Resumen subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tener en cuenta qué quieres conseguir y si tiene o no sentido realizar el diseño a una versión concreta para escritorio o dispositivo móvil




descargar 358.78 Kb.
títuloResumen subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tener en cuenta qué quieres conseguir y si tiene o no sentido realizar el diseño a una versión concreta para escritorio o dispositivo móvil
página6/22
fecha de publicación28.11.2015
tamaño358.78 Kb.
tipoResumen
med.se-todo.com > Ley > Resumen
1   2   3   4   5   6   7   8   9   ...   22

2.2.1.- Estructura global


Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas20 específicas. En esta parte del capítulo vamos a ver cómo construir la estructura global de un documento HTML y los nuevos elementos semánticos incorporados en HTML5.

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 . Este elemento envolverá al resto del código:

El elemento va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre:

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 . Estas etiquetas tampoco han cambiado en relación con versiones previas de HTML.

2.2.2.-Estructura del cuerpo


La estructura del cuerpo (el código entre las etiquetas ) generará la parte 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 . Las tablas permitían a los diseñadores acomodar 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 experiencia ofrecida a los usuarios. Más adelante, gradualmente, otros elementos reemplazaron su función, permitiendo lograr lo mismo con menos código, facilitando de este modo la creación, permitiendo portabilidad y ayudando al mantenimiento de los sitios web.

El elemento
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
se volvió una práctica común. Pero este elemento, así como
, no provee demasiada información acerca de las parte del 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
. En otras palabras, la palabra clave div solo especifica una división en el cuerpo, como 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.

Para los usuarios estas claves o indicios no son importantes, pero para los navegadores la correcta interpretación de qué hay dentro del documento que se está procesando puede ser crucial en muchos casos. Luego de la revolució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 expuesto, HTML5 incorpora nuevos elementos que ayudan a identificar cada sección del documento y organizar el cuerpo del mismo. En HTML5 las secciones más importantes son diferenciadas y la estructura principal ya no depende más de los elementos
o
.

Cómo usamos estos nuevos elementos depende de nosotros, pero las palabras clave otorgadas a cada uno de ellos nos dan ayudan a entender sus funciones. Normalmente una página o aplicación web está dividida entre varias áreas visuales para mejorar la experiencia del usuario y facilitar la interactividad.

2.2.3.-Organización


La Figura 2.1 representa un diseño común encontrado en la mayoría de los sitios webs estos días. A pesar del hecho de que cada diseñador crea sus propios diseños, en general podremos identificar las siguientes secciones en cada sitio web estudiado:




Figura2. Representación visual de diseño común encontrado en la mayoría de los sitios webs. Fuente: Elaboración Propia

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 considere importante compartir. La barra Institucional es un complemento de la Cabecera 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:



Figura2. Representación visual de diseño de un blog normal Fuente: Elaboración Propia
La Figura 2.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 diferenciar y declarar cada una de sus partes. A partir de ahora podemos decir al navegador para qué es cada sección:



Figura2. Representación visual de un diseño utilizando elementos HTML5. Fuente: Elaboración Propia
La Figura 2.3 muestra el típico diseño presentado anteriormente, pero esta vez con los correspondientes elementos HTML5 para cada sección (incluyendo etiquetas de apertura y cierre).

Uno de los nuevos elementos incorporados en HTML5 es
. El elemento
no debe ser confundido con usado antes para construir la cabecera del documento. Del mismo modo que , la intención de
es proveer información introductoria (títulos, subtítulos, logos), pero difiere con respecto a en su alcance. Mientras que el elemento tiene el propósito de proveer información acerca de todo el documento,
es usado solo para el cuerpo o secciones específicas dentro del cuerpo:

La siguiente sección es la Barra de Navegación. Esta barra es generada en HTML5 con el elemento
), no dentro de las etiquetas
. Esto es porque .

El elemento
1   2   3   4   5   6   7   8   9   ...   22

similar:

Resumen subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tener en cuenta qué quieres conseguir y si tiene o no sentido realizar el diseño a una versión concreta para escritorio o dispositivo móvil iconTesis diseño de una aplicación móvil para la consulta académica de la fiis-utp

Resumen subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tener en cuenta qué quieres conseguir y si tiene o no sentido realizar el diseño a una versión concreta para escritorio o dispositivo móvil iconResumen Para el diseño de la interfaz de la página Web, me he fijado tres principales objetivos

Resumen subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tener en cuenta qué quieres conseguir y si tiene o no sentido realizar el diseño a una versión concreta para escritorio o dispositivo móvil icon¿Qué se debe tener en cuenta para manejar una terapéutica optima?

Resumen subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tener en cuenta qué quieres conseguir y si tiene o no sentido realizar el diseño a una versión concreta para escritorio o dispositivo móvil iconEste trabajo consistirá en desarrollar la idea de un negocio para...

Resumen subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tener en cuenta qué quieres conseguir y si tiene o no sentido realizar el diseño a una versión concreta para escritorio o dispositivo móvil iconResumen: Con este trabajo se pretende proporcionar unos adecuados...

Resumen subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tener en cuenta qué quieres conseguir y si tiene o no sentido realizar el diseño a una versión concreta para escritorio o dispositivo móvil iconContextualización sobre prensa, tecnología y diseño en el último...

Resumen subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tener en cuenta qué quieres conseguir y si tiene o no sentido realizar el diseño a una versión concreta para escritorio o dispositivo móvil iconDiseño de un sistema móvil de recorrido turístico en el departamento de lima

Resumen subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tener en cuenta qué quieres conseguir y si tiene o no sentido realizar el diseño a una versión concreta para escritorio o dispositivo móvil iconDiseño de un sistema móvil de recorrido turístico en el departamento de lima

Resumen subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tener en cuenta qué quieres conseguir y si tiene o no sentido realizar el diseño a una versión concreta para escritorio o dispositivo móvil iconAdquisición de diseño y de materiales para el área de casa de máquinas,...

Resumen subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tener en cuenta qué quieres conseguir y si tiene o no sentido realizar el diseño a una versión concreta para escritorio o dispositivo móvil iconAdquisición de diseño y de materiales para el área de casa de máquinas,...


Medicina



Todos los derechos reservados. Copyright © 2015
contactos
med.se-todo.com