sesion 01- html5

24
TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013 1 Ing. Donny Acosta Benites HTML5

Upload: universidad-catolica-los-angeles-de-chimbote

Post on 11-Apr-2017

378 views

Category:

Engineering


0 download

TRANSCRIPT

Page 1: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

1 Ing. Donny Acosta Benites HTML5

Page 2: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

2 Ing. Donny Acosta Benites HTML5

I. Introducción:

HTML (HyperText Markup Language) es el lenguaje estandarizado por la World

Wide Web Consortium (W3C) y es el más utilizado para la elaboración de páginas

Web. Este lenguaje se utiliza para mostrar texto, acompañado de otros elementos

como imágenes, tablas y otros, también se emplea junto con los lenguajes de pro-

gramación como PHP, ASP, etc.

HTML5 es un lenguaje nuevo concepto para la construcción de sitios Web y aplica-

ciones en una era que combina dispositivos móviles, computación en la nube y tra-

bajos en red, utiliza una serie de APIs (Interface de Programación de Aplicaciones)

que nos permiten desarrollar aplicaciones Web de una manera mucho más cómo-

da, sencilla y evitando el uso de aplicaciones externas como Flash, Applets y otros.

El mayor inconveniente de Java y Flash puede describirse como una falta de inte-

gración. Ambos fueron concebidos desde el principio como complementos (plug-

ins), algo que se inserta dentro de una estructura de la página Web. Por lo tanto no

existe comunicación e integración alguna entre aplicaciones y documentos.

HTML5 es considerado el producto de la combinación de HTML, CSS y Javascript y

su estandarización oficial se ha pronosticado para fines del 2014, según fuentes ofi-

ciales; así no existirá problemas de incompatibilidad en los navegadores como

Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Opera y otros.

II. Semántica de HTML5

Esta nueva versión de HTML nos proporciona una mejor manera para estructurar y

distribuir nuestro documento. Anteriormente las páginas de dividían de la siguiente

manera:

Page 3: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

3 Ing. Donny Acosta Benites HTML5

Figura Nº 01: Estructura con HTML4

Figura Nº 02: Estructura con HTML5

Entonces en HTML4 se empleaba la etiqueta <div> como una solución para poder

distribuir el contenido a través de la web, una solución que ha tenido gran acepta-

ción y utilización durante todo este tiempo, pero que no provee demasiada informa-

ción acerca de las parte del cuerpo que está representando. En ese sentido, en la

nueva versión de HTML5, no se utilizará en la estructura general del documento.

Page 4: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

4 Ing. Donny Acosta Benites HTML5

Por lo tanto, hay una serie de nuevas etiquetas en la estructura de la página Web.

La etiqueta header es para los elementos de la parte superior, la etiqueta nav es

para los menús, la etiqueta section se utiliza para definir diferentes secciones de

una página y que cada uno sea independientes de su contenido, article es un espa-

cio independiente comúnmente utilizado en una noticia completa, un comentario en

un foro, un artículo, etc.; la etiqueta aside nos denota contenido lateral y finalmente

footer se sitúa en la parte inferior de la página Web.

II.1. Estructura Global

Los documentos HTML se encuentran estrictamente organizados. Ca-

da parte del documento está diferenciada, declarada y determinada por eti-

quetas específicas. En este punto vamos a ver cómo construir la estructura

global de un documento HTML y los nuevos elementos semánticos incorpora-

dos en HTML5.

1) <!DOCTYPE>

En primer lugar necesitamos indicar el tipo de documento que estamos

creando, y en la primera línea del archivo, sin espacios o líneas que la pre-

cedan, debe ir lo siguiente:

2) <html>

Luego de declarar el tipo de documento, debemos comenzar a construir la

estructura HTML. Como siempre, la estructura tipo árbol de este lenguaje

tiene su raíz en el elemento <html>. Este elemento envolverá al resto del

código:

Page 5: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

5 Ing. Donny Acosta Benites HTML5

El atributo lang en la etiqueta de apertura <html> es el único atributo que

necesitamos especificar en HTML5. Este atributo define el idioma del con-

tenido del documento que estamos creando, en este caso es español.

3) <head>

El código HTML insertado entre las etiquetas <html> tiene que ser dividido

entre dos secciones principales. Al igual que en versiones previas de

HTML, la primera sección es la cabecera y la segunda el cuerpo. El siguien-

te paso, por lo tanto, será crear estas dos secciones en el código

usando los elementos <head> y <body> ya conocidos.

El elemento <head> va primero, por supuesto, y al igual que el resto de los

elementos estructurales tiene una etiqueta de apertura y una de cierre:

La etiqueta no cambió desde versiones anteriores y su propósito sigue

siendo exactamente el mismo. Dentro de las etiquetas <head> definiremos

el título de nuestra página web, declararemos el set de caracteres corres-

pondiente, proveeremos información general acerca del documento e incor-

poraremos los archivos externos con estilos, códigos JavaScript o incluso

imágenes necesarias para generar la página en la pantalla.

4) <body>

La siguiente gran sección que es parte principal de la organización de un

documento HTML es el cuerpo. El cuerpo representa la parte visible de

todo documento y es especificado entre etiquetas <body>. Estas etiquetas

tampoco han cambiado en relación con versiones previas de HTML:

Page 6: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

6 Ing. Donny Acosta Benites HTML5

5) <meta>

El elemento meta representa varios tipos de metadatos que no se pueden

expresar en title, base, link, style y otros elementos script. El elemento meta

puede representar metadatos de nivel de documento con el atributo de

nombre, con el atributo http-equiv, y la declaración de codificación de carac-

teres del archivo cuando un documento HTML es guardado en forma de

cadena (por ejemplo, para la transmisión a través de la red o de almacena-

miento en disco) con el atributo charset, como se muestra a continuación:

ASCII, ISO-8859-1 y UTF-8:

Los tres estándares representan el esfuerzo informático por brindar un sis-

tema de codificación que permita representar los caracteres que se usan en

todos los idiomas. El primer esfuerzo lo hizo ASCII y fue para el idioma in-

glés (128 caracteres), luego ante su insuficiencia para representar otros ca-

racteres como los latinos por ejemplo, nace ISO-8859-1 (tambien llamado

LATIN-1 ó ASCII extendido) pero debido a que no podía representar carac-

teres de otros idiomas aparece el estándar UNICODE (del cual es parte

UTF-8). Preferentemente, elijo UTF-8 por seguir la línea y el posicionamien-

to que ha tomado esta codificación sobre la gran mayoría de sitios que exis-

ten.

Page 7: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

7 Ing. Donny Acosta Benites HTML5

6) <title>

La etiqueta <title>, como siempre, simplemente especifica el título del do-

cumento:

7) <link>

Otro importante elemento que va dentro de la cabecera del documento es

<link>. Este elemento es usado para incorporar estilos, códigos Javascript,

imágenes o iconos desde archivos externos. Uno de los usos más comu-

nes para <link> es la incorporación de archivos con estilos CSS:

En HTML5 ya no se necesita especificar qué tipo de estilos estamos inser-

tando, por lo que el atributo type fue eliminado. Solo necesitamos dos

atributos para incorporar nuestro archivo de estilos: rel y href. El atributo rel

significa “relación” y es acerca de la relación entre el documento y el archi-

vo que estamos incorporando por medio de href.

8) <style>

El elemento de estilo permite insertar información del estilo de sus páginas

Web. El valor por defecto para el atributo es "text / css".

Page 8: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

8 Ing. Donny Acosta Benites HTML5

II.2. Estructura del Cuerpo

La estructura del cuerpo (el código entre las etiquetas <body>) generará la par-

te visible del documento. Este es el código que producirá nuestra página web.

HTML siempre ofreció diferentes formas de construir y organizar la información

dentro del cuerpo de un documento. Uno de los primeros elementos provistos

para este propósito fue <table>. Las tablas permitían a los diseñadores acomo-

dar datos, texto, imágenes y herramientas dentro de filas y columnas de celdas,

incluso sin que hayan sido concebidas para este propósito.

En los primeros días de la web, las tablas fueron una revolución, un gran paso

hacia adelante con respecto a la visualización de los documentos y la expe-

riencia ofrecida a los usuarios.

El elemento <div> comenzó a dominar la escena. Con el surgimiento de

webs más interactivas y la integración de HTML, CSS y Javascript, el uso de

<div> se volvió una práctica común. Pero este elemento, así como <table>, no

provee demasiada información acerca de cuerpo que está representando.

Desde imágenes a menús, textos, enlaces, códigos, formularios, cualquier cosa

puede ir entre las etiquetas de apertura y cierre de un elemento <div>. En otras

palabras, la palabra clave div solo especifica una división en el cuerpo, co-

mo la celda de una tabla, pero no ofrece indicio alguno sobre qué clase

de división es, cuál es su propósito o qué contiene.

Page 9: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

9 Ing. Donny Acosta Benites HTML5

Para los usuarios estas claves o indicios no son importantes, pero para los na-

vegadores la correcta interpretación de qué hay dentro del documento

que se está procesando puede ser crucial en muchos casos. Luego de la re-

volución de los dispositivos móviles y el surgimiento de diferentes formas en

que la gente accede a la web, la identificación de cada parte del documento es

una tarea que se ha vuelto más relevante que nunca.

Considerando todo lo mencionado en líneas anteriores, HTML5 incorpora nue-

vos elementos que ayudan a identificar cada sección del documento y organi-

zar el cuerpo del mismo. En HTML5 las secciones más importantes son dife-

renciadas y la estructura principal ya no depende más de los elementos <div> o

<table>.

Organización

La Figura 1-1 representa un diseño común encontrado en la mayoría de los si-

tios webs estos días. A pesar del hecho de que cada diseñador crea sus pro-

pios diseños, en general podremos identificar las siguientes secciones en cada

sitio web estudiado:

Figura 1-1. Representación visual de un clásico diseño web.

Page 10: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

10 Ing. Donny Acosta Benites HTML5

En la parte superior, descripto como Cabecera, se encuentra el espacio donde

usualmente se ubica el logo, título, subtítulos y una corta descripción del sitio

web o la página.

Inmediatamente debajo, podemos ver la Barra de Navegación en la cual casi

todos los desarrolladores ofrecen un menú o lista de enlaces con el propósito

de facilitar la navegación a través del sitio. Los usuarios son guiados des-

de esta barra hacia las diferentes páginas o documentos, normalmente per-

tenecientes al mismo sitio web.

El contenido más relevante de una página web se encuentra, en casi todo di-

seño, ubicado en su centro. Esta sección presenta información y enlaces valio-

sos. La mayoría de las veces es dividida en varias filas y columnas. En el

ejemplo de la Figura 1-1 se utilizaron solo dos columnas: Información Principal

y Barra Lateral, pero esta sección es extremadamente flexible y normalmente

diseñadores la adaptan acorde a sus necesidades insertando más columnas,

dividiendo cada columna entre bloques más pequeños o generando diferentes

distribuciones y combinaciones. El contenido presentado en esta parte del di-

seño es usualmente de alta prioridad. En el diseño de ejemplo, Información

Principal podría contener una lista de artículos, descripción de productos, en-

tradas de un blog o cualquier otra información importante, y la Barra Lateral

podría mostrar una lista de enlaces apuntando hacia cada uno se esos ítems.

En un blog, por ejemplo, esta última columna ofrecerá una lista de enlaces

apuntando a cada entrada del blog, información acerca del autor, etc.

En la base de un diseño web clásico siempre nos encontramos con una barra

más que aquí llamamos Institucional. La nombramos de esta manera porque

esta es el área en donde normalmente se muestra información acerca del sitio

web, el autor o la empresa, además de algunos enlaces con respecto a reglas,

términos y condiciones y toda información adicional que el desarrollador consi-

dere importante compartir. La barra Institucional es un complemento de la Ca-

becera y es parte de lo que se considera estos días la estructura esencial de

una página web, como podemos apreciar en el siguiente ejemplo:

Page 11: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

11 Ing. Donny Acosta Benites HTML5

Figura 1-2. Representación visual de un clásico diseño para blogs.

La Figura 1-2 es una representación de un blog normal. En este ejemplo se

puede claramente identificar cada parte del diseño considerado anteriormente.

1. Cabecera

2. Barra de Navegación

3. Sección de Información Principal

4. Barra Lateral

5. El pie o la barra Institucional

Esta simple representación de un blog nos puede ayudar a entender que cada

sección definida en un sitio web tiene un propósito. A veces este propósito no

es claro pero en esencia se encuentra siempre allí, ayudándonos a reconocer

cualquiera de las secciones descriptas anteriormente en todo diseño.

HTML5 considera esta estructura básica y provee nuevos elementos para dife-

renciar y declarar cada una de sus partes. A partir de ahora podemos decir al

navegador para qué es cada sección:

Page 12: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

12 Ing. Donny Acosta Benites HTML5

Figura 1-3. Representación visual de un diseño utilizando elementos HTML5.

La Figura 1-3 muestra el típico diseño presentado anteriormente, pero esta vez

con los correspondientes elementos HTML5 para cada sección (incluyendo eti-

quetas de apertura y cierre).

Figura 1-4. Representación visual de las etiquetas <article> que fueron inclui-

das para contener información relevante de la página web.

Page 13: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

13 Ing. Donny Acosta Benites HTML5

El elemento <article> no está limitado por su nombre (no se limita, por ejemplo,

a artículos de noticias). Este elemento fue creado con la intención de contener

unidades independientes de contenido, por lo que puede incluir mensajes de

foros, artículos de una revista digital, entradas de blog, comentarios de usua-

rios, etc. Lo que hace es agrupar porciones de información que están relacio-

nadas entre sí independientemente de su naturaleza.

1) <header>

Uno de los nuevos elementos incorporados en HTML5 es <header>.

El elemento <header> no debe ser confundido con <head> usado antes

para construir la cabecera del documento. Del mismo modo que <head>,

la intención de <header> es proveer información introductoria (títulos, subtí-

tulos, logos).

Page 14: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

14 Ing. Donny Acosta Benites HTML5

Así como también podemos mostrar imágenes en header:

Page 15: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

15 Ing. Donny Acosta Benites HTML5

2) <nav>

La siguiente sección es la Barra de Navegación. Esta barra es generada en

HTML5 con el elemento <nav>:

Page 16: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

16 Ing. Donny Acosta Benites HTML5

3) <section>

Representa una sección genérica de un documento o aplicación. Una sec-

ción, en este contexto, es una agrupación temática de los contenidos, por lo

general con una partida.

4) <article>

Representa una solución completa, o autónomo, la composición de un do-

cumento, página, aplicación o sitio, y que es, en principio, independiente

distribuibles o reutilizables. Esto podría ser un mensaje en el foro, un artícu-

lo de una revista o de un periódico, un blog, un comentario enviado por el

usuario, un widget interactivo o gadget, o cualquier otro elemento indepen-

diente del contenido.

5) <aside>

Representa una sección de una página que consiste de contenido que esté

tangencialmente relacionado con el contenido, y que podría ser considera-

do por separado. Estas secciones se representan a menudo como barras

laterales.

El elemento puede ser utilizado para efectos tipográficos como citas en las

barras laterales con publicidad, por grupos de elementos de navegación o

por otra información que se considera separado del contenido principal de

la página.

6) <h1, h2, h3, h4, h5 y h6>

Representan encabezamientos para sus secciones. Estos elementos tienen

un rango dado por el número de su nombre. El elemento h1 se dice que tie-

ne el rango más alto, el elemento h6 tiene el rango más bajo, y dos elemen-

tos con el mismo nombre tienen el mismo valor.

Page 17: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

17 Ing. Donny Acosta Benites HTML5

7) <adress>

Representa la información de contacto de su artículo ancestro más cercano

o elemento del cuerpo.

8) <footer>

Representa un pie de página de su ancestro más cercano seccionando el

contenido. El pie de página suele contener información acerca de enlaces a

documentos relacionados, los datos de autor, y similares.

Cuando el elemento de pie de página contiene secciones enteras, constitu-

yen apéndices, índices, contratos de licencia detallados y otro tipo de con-

tenido.

Page 18: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

18 Ing. Donny Acosta Benites HTML5

III. Programación mediante Netbeans:

Page 19: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

19 Ing. Donny Acosta Benites HTML5

Page 20: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

20 Ing. Donny Acosta Benites HTML5

Page 21: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

21 Ing. Donny Acosta Benites HTML5

Miestilo.css:

Page 22: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

22 Ing. Donny Acosta Benites HTML5

Page 23: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

23 Ing. Donny Acosta Benites HTML5

IV. Compatibilidades:

Page 24: sesion 01- HTML5

TECNOLOGÍA DE PROGRAMACIÓN ULADECH CATÓLICA – 2013

24 Ing. Donny Acosta Benites HTML5