Conceptos básicos del diseño HTML5. Conceptos básicos del diseño semántico en HTML5

XHTML es muy adecuado para aprender y desarrollar el estilo correcto de diseño debido a sus reglas formales y una sintaxis más rígida en comparación con HTML. Sin embargo, en los diez años transcurridos desde su lanzamiento, XHTML se ha vuelto obsoleto y ya no cumple con las condiciones modernas. En particular, no hay herramientas estándar para reproducir audio y vídeo, ni soporte para geolocalización, ni la posibilidad de dibujar directamente en el navegador, faltan algunos elementos del formulario y mucho más. Por supuesto, algunos de estos problemas se han resuelto desde hace tiempo mediante complementos de navegador de terceros, por ejemplo, Adobe Flash reproduce vídeos, Google Gears implementa bases de datos locales y ejecuta scripts en segundo plano. El lenguaje de programación JavaScript le permite implementar la funcionalidad faltante de formularios y varios efectos en la página. Pero todas estas tecnologías tienen ciertas limitaciones: es necesario instalar complementos adicionales y es posible que no funcionen como Flash en iPhone y iPad, y no todo se puede hacer mediante JavaScript. La popularidad de los dispositivos móviles y el desarrollo de los canales de comunicación han desplazado el énfasis de las tecnologías web hacia la multimedia, es decir. reproducción de streaming de audio y vídeo, así como archivos relacionados. No hay nada de esto en XHTML.

El consorcio W3, desarrollador de las especificaciones HTML y XHTML, comenzó a trabajar en XHTML 2.0, que superaría estas deficiencias de la versión anterior. Como resultado, este proyecto quedó congelado y no se completó. Preocupados por el lento progreso del trabajo, los desarrolladores de los navegadores Safari, Firefox y Opera fundaron su propia organización, WHATWG (Web Hypertext Application Technology Working Group), que recogió la bandera caída. Las ideas del W3C, las necesidades de los usuarios modernos y las opiniones de los desarrolladores web se plasmaron en un nuevo lenguaje de marcado llamado HTML5.

Debe entenderse que, a pesar de la similitud de nombres, HTML5 no es una continuación de HTML4 o XHTML. Más bien, estamos hablando del nuevo lenguaje Web Applications 1.0, que con fines de marketing recibe el nombre de una abreviatura familiar y está construido sobre la base de HTML.

Oficialmente, el estándar HTML5 aún no está completo, pero los navegadores modernos ya pueden trabajar parcialmente con él. Entonces, ¿qué cosas interesantes nos aporta HTML5? Estas son algunas de sus características.

• Soporte de geolocalización: determinar la ubicación del usuario en el mapa y utilizar esta información para calcular su ruta, mostrar tiendas, cines, cafeterías cercanas y otros datos.
• Reproducción de vídeos.
• Reproduce archivos de audio.
• Almacenamiento local: permite que los sitios guarden información en la computadora local y accedan a ella más tarde.
• La computación en segundo plano es la forma estándar para que JavaScript se ejecute en el navegador en segundo plano.
• Las aplicaciones sin conexión son páginas que pueden funcionar cuando Internet está apagado.
• Dibujo: dentro de una etiqueta usando JavaScript puedes dibujar formas, líneas, crear degradados y transformar objetos sobre la marcha.
• Nuevos elementos de formulario: para fecha, hora, búsqueda, números, selección de color, etc.

Además de estas características, HTML5 incluye nuevas etiquetas para marcar documentos, elimina etiquetas obsoletas y modifica algunas otras. Para diseñar páginas web, primero debe comprender qué ha cambiado y cómo convertir la página a HTML5.

HTML Basics contiene las reglas básicas del lenguaje HTML, una descripción de la estructura de una página HTML y las relaciones en la estructura de un documento HTML entre elementos HTML.

Un documento HTML es un documento de texto normal que se puede crear en un editor de texto normal (Bloc de notas) o en uno especializado con código resaltado (Notepad++, Visual Studio Code, etc.). Un documento HTML tiene una extensión .html.

Un documento HTML consta de un árbol de elementos HTML y texto. Cada elemento se identifica en el documento fuente mediante una etiqueta de inicio (apertura) y de finalización (cierre) (con raras excepciones).

La etiqueta de inicio muestra dónde comienza el elemento, la etiqueta de final muestra dónde termina. La etiqueta de cierre se forma añadiendo una barra diagonal / antes del nombre de la etiqueta: .... Entre las etiquetas de inicio y cierre está el contenido de la etiqueta: el contenido.

Las etiquetas individuales no pueden almacenar contenido directamente; se escribe como un valor de atributo; por ejemplo, una etiqueta creará un botón con el texto Botón dentro.

Las etiquetas se pueden anidar unas dentro de otras, por ejemplo,

Texto

. Al invertir, debes seguir el orden en que se cierran (el principio de la “matrioska”), por ejemplo, la siguiente entrada será incorrecta:

Texto

.

Los elementos HTML pueden tener atributos (globales, aplicados a todos los elementos HTML y propios). Los atributos se escriben en la etiqueta de apertura del elemento y contienen un nombre y un valor, especificados en el formato atributo nombre="valor" . Los atributos le permiten cambiar las propiedades y el comportamiento del elemento para el que están configurados.

A cada elemento se le pueden asignar múltiples valores de clase y solo un valor de identificación. Se escriben varios valores de clase separados por un espacio. Los valores de clase e id deben consistir únicamente en letras, números, guiones y guiones bajos, y deben comenzar únicamente con letras o números.

El navegador ve (interpreta) el documento HTML, construye su estructura (DOM) y lo muestra de acuerdo con las instrucciones incluidas en este archivo (hojas de estilo, scripts). Si el marcado es correcto, la ventana del navegador mostrará una página HTML que contiene elementos HTML: encabezados, tablas, imágenes, etc.

El proceso de interpretación (análisis) comienza antes de que la página web esté completamente cargada en el navegador. Los navegadores procesan documentos HTML de forma secuencial, desde el principio, mientras procesan CSS y relacionan hojas de estilo con los elementos de la página.

Un documento HTML consta de dos secciones: el encabezado, entre las etiquetas... y la parte de contenido, entre las etiquetas....

estructura de la página web 1. Estructura del documento HTML

HTML sigue las reglas contenidas en el archivo de declaración de tipo de documento. (Definición de tipo de documento o DTD). Una DTD es un documento XML que define qué etiquetas, atributos y sus valores son válidos para un tipo HTML particular. Cada versión de HTML tiene su propia DTD.

DOCTYPE es responsable de la correcta visualización de una página web por parte del navegador. DOCTYPE especifica no sólo la versión HTML (p. ej. html), sino también el archivo DTD correspondiente en Internet.

...

Los elementos dentro de la etiqueta forman un árbol de documentos, el llamado modelo de objetos de documento, DOM (modelo de objetos de documento). En este caso, el elemento es el elemento raíz.

Arroz. 1. La estructura más simple de una página web.

Para comprender la interacción de los elementos de una página web, es necesario considerar las llamadas “relaciones familiares” entre elementos. Las relaciones entre múltiples elementos anidados se clasifican como padre, hijo y hermano.

Un antepasado es un elemento que contiene otros elementos. En la Figura 1, el antepasado de todos los elementos es. Al mismo tiempo, el elemento es el antepasado de todas las etiquetas que contiene: ,

. . . etc.

Un descendiente es un elemento ubicado dentro de uno o más tipos de elementos. Por ejemplo, es descendiente de y el elemento

Es descendiente de ambos y .

Un elemento padre es un elemento que está relacionado con otros elementos en un nivel inferior y se encuentra encima de ellos en el árbol. En la Figura 1 y . Etiqueta

Es padre sólo de .

Un elemento hijo es un elemento que está directamente subordinado a otro elemento de nivel superior. En la Figura 1 solo hay elementos , ,

Y son hijos de .

Un elemento hermano es un elemento que tiene un elemento padre común con el en cuestión, los llamados elementos del mismo nivel. En la Figura 1 y se encuentran elementos del mismo nivel, así como elementos , y

Son hermanas entre sí.

1.1. Elemento 1.2. Elemento

La sección... contiene información técnica sobre la página: título, descripción, palabras clave para buscadores, codificación, etc. La información que ingresa allí no se muestra en la ventana del navegador, pero contiene datos que le indican al navegador cómo procesar la página.

1.2.1. Elemento

La etiqueta de sección requerida es . El texto colocado dentro de esta etiqueta aparece en la barra de título del navegador web. El título no debe tener más de 60 caracteres para que quepa completamente en el título. El texto del título debe contener la descripción más completa del contenido de la página web.

1.2.2. Elemento

Una etiqueta de sección opcional es una etiqueta única. Con su ayuda, puede establecer una descripción del contenido de la página y palabras clave para los motores de búsqueda, el autor del documento HTML y otras propiedades de metadatos. Un elemento puede contener varios elementos porque contienen información diferente según los atributos utilizados.

La descripción del contenido de la página y las palabras clave se pueden especificar simultáneamente en varios idiomas, por ejemplo, en ruso e inglés:

Usando una etiqueta, puedes bloquear o permitir la indexación de una página web por parte de los motores de búsqueda:

Para recargar automáticamente la página después de un período de tiempo específico, debe usar el valor de actualización:

La página se recargará después de 30 segundos. Para redirigir al visitante a otra página, debe especificar la URL en el parámetro URL:

Tabla 2. Atributos de etiqueta Atributo

juego de caracteres	Especifica la codificación de caracteres para el documento HTML actual:
contenido	Contiene texto arbitrario que especifica el valor asociado con el atributo http-equiv o nombre, según su valor.
equivalente a http	Controla las acciones del navegador en una página web determinada (equivalente a los encabezados HTTP). Al representar la página, el navegador seguirá las instrucciones especificadas en el atributo: estilo predeterminado especifica el estilo preferido para usar en la página. El atributo de contenido debe contener el ID del elemento que hace referencia a la hoja de estilo CSS, o el ID del elemento que contiene la hoja de estilo. actualizar indica el tiempo en segundos antes de que se vuelva a cargar la página o el tiempo antes de redirigir a otra página si el atributo de contenido contiene la línea "url=page_address" después del tiempo. Recarga automáticamente la página después de un período de tiempo específico, en este ejemplo, después de 30 segundos: Si necesita redirigir inmediatamente al visitante a otra página, puede especificar la URL en el parámetro URL:
nombre	Asociado al valor contenido en el atributo de contenido. No debe usarse si el elemento ya tiene establecidos los atributos http-equiv , charset o itemprop. nombre-aplicación especifica el nombre de la aplicación web utilizada en la página. autor especifica el nombre del autor del documento en formato libre. descripción define una breve descripción del contenido de la página, por ejemplo: El generador especifica uno de los paquetes de software utilizados para crear el documento, por ejemplo: . palabras clave contiene una lista separada por comas de palabras clave que coinciden con el contenido de la página, por ejemplo: . Además, el atributo de nombre puede tomar los siguientes valores de la especificación extendida, como creador, googlebot, editor, robots, slurp, viewport, aunque ninguno de estos se ha adoptado oficialmente todavía.

1.2.3. Elemento

Dentro de este elemento se establecen los estilos que se utilizan en la página. CSS se utiliza para establecer estilos en un documento HTML. Puede haber varios elementos de este tipo en una página.

Dentro de este elemento puede escribir código de formato tanto para los elementos de la página web como para toda la página web.

.paper (ancho: 200 px; alto: 300 px; color de fondo: #ef4444; color: #666666;)

Para conectar un estilo determinado a un elemento, debe asignar el nombre apropiado al elemento utilizando el atributo de clase (o id):

...

El código CSS se puede incrustar directamente en el elemento de marcado como el valor del atributo de estilo, por ejemplo:

1.2.4. Elemento

También puede configurar estilos para un documento utilizando otro método: escríbalos en un archivo separado con la extensión .css, por ejemplo, style.css.

Hay dos formas de conectar un archivo con estilos a una página web:
a través de la directiva @import url

@importar URL(estilo.css);

utilizando el elemento. El elemento no requiere una etiqueta de cierre. Este elemento define la relación entre la página actual y otros documentos. Puede haber varios elementos de este tipo en una página. La entrada se verá así:

Tabla 4. Atributos de etiqueta Descripción del atributo, valor aceptado

origen cruzado	Indica si se debe utilizar CORS (una tecnología de navegador que permite que una página web acceda a recursos de otro dominio) al recuperar una imagen de un sitio. anónimo: el navegador agrega automáticamente un encabezado Origin a una solicitud entre dominios, que contiene el nombre del dominio desde el que se realizó la solicitud. Si el servidor no responde con el encabezado CORS Access-Control-Allow-Origin: * (o el nombre de dominio en lugar de un asterisco), se bloqueará la carga de la imagen. use-credentials: si el servidor no proporciona credenciales mediante Access-Control-Allow-Credentials: true, se bloqueará la carga de imágenes.
href	El atributo principal de la etiqueta, el valor, es la ruta al archivo con estilos.
hreflang	Determina el idioma del texto en el documento de referencia.
medios de comunicación	Especifica el tipo de dispositivo al que se debe aplicar el recurso de enlace.
mientras tanto	Una variable de cadena generada aleatoriamente en el servidor que establece reglas para usar estilos en línea para proteger el contenido. El valor del atributo es una cadena de texto.
rel	El atributo define la relación entre el documento actual y el documento al que se hace referencia. alternativo: un enlace al mismo documento, pero en un formato diferente (por ejemplo, páginas para imprimir, traducción, espejo, feed en formato RSS o Atom), . archivos: indica que el documento vinculado es de interés histórico. El enlace puede apuntar a una colección de registros, documentos y otros materiales. enlace del autor a una página sobre el autor del documento o a una página con la información de contacto del autor. marcador es una referencia al ancestro más cercano del artículo que es el enlace, o a la sección del artículo más estrechamente relacionada con el elemento si no hay un ancestro. externo se utiliza para indicar que la página a la que se vincula no forma parte de este sitio. primero especifica un enlace que apunta al primer documento de una secuencia de documentos. enlace de ayuda a un documento de ayuda. icono especifica la ruta al icono que se utilizará para el documento actual. último especifica un enlace que apunta al último documento de una secuencia de documentos. licencia Un enlace a la información de derechos de autor de un documento. next indica que este documento es parte de una serie y que el enlace va al siguiente documento de esa serie. nofollow indica que el enlace no cuenta con el respaldo del autor de la página o que el enlace es de naturaleza comercial. noreferrer indica que el encabezado de solicitud del cliente que contiene la URL del origen de la solicitud no debe pasarse al seguir el enlace. pingback especifica la dirección del servidor pingback, que permite al blog notificar automáticamente a los sitios que enlazan con él. prefetch especifica que el archivo al que se hace referencia debe almacenarse en caché de antemano. prev indica que este documento es parte de una serie y que el enlace es a un documento anterior de esa serie. buscar indica que el documento al que se hace referencia contiene una interfaz para búsqueda y recursos relacionados. La barra lateral indica que el documento vinculado se mostrará en un contexto adicional del navegador, si es posible, y algunos navegadores, cuando hace clic en un hipervínculo, abren una ventana para agregar el enlace a su barra de marcadores. La hoja de estilo es un enlace a un archivo externo que se utilizará como hoja de estilo para este documento. La etiqueta indica que la etiqueta con hipervínculo se aplica a este documento. arriba indica que la página es parte de una estructura jerárquica y que el hipervínculo apunta a un nivel superior de recurso en la estructura.
tamaños	Especifica el tamaño de los iconos para la visualización. El atributo de tamaños se usa solo junto con rel="icon" y puede tomar los siguientes valores: ancho-alto: define una lista de tamaños separados por espacios, cada tamaño debe estar en el formato ancho-alto (las dimensiones de los iconos se especifican en píxeles), por ejemplo: ; cualquiera: el icono se puede escalar a cualquier tamaño.
título	Define el título de un enlace o el nombre de un conjunto de hojas de estilo alternativas. El valor del atributo es texto.
tipo	Especifica el tipo MIME del documento al que se hace referencia. En este caso toma el valor "text/css".

1.2.5. Elemento Tabla 5. Atributos de etiqueta Descripción del atributo, valor aceptado

asíncrono	El atributo indica que el script se ejecutará de forma asincrónica con el resto de la página (el script comenzará a ejecutarse al mismo tiempo que se carga la página).
juego de caracteres	Define la codificación de caracteres.
origen cruzado	Determina si se utilizará CORS al cargar scripts externos (utilizando el atributo src). anónimo: antes de cargar el script en una solicitud entre dominios, el navegador agrega automáticamente el encabezado Origin, sin pasar parámetros de acceso (cookie, certificado X.509, nombre de usuario/contraseña para autenticación básica a través de HTTP). Si la respuesta del servidor no contiene el encabezado del nombre de dominio Access-Control-Allow-Origin:, el script no se cargará. use-credentials: antes de cargar el script en una solicitud entre dominios, el navegador agrega automáticamente un encabezado Origin que indica los parámetros de acceso (cookie, certificado SSL o pares de inicio de sesión/contraseña). Si la respuesta del servidor no contiene el encabezado Access-Control-Allow-Credentials: true, el script no se cargará.
aplazar	La interpretación de los guiones se retrasa hasta que el documento se presenta en el dispositivo del usuario.
mientras tanto	Proporciona seguridad protegiendo contra ataques de secuencias de comandos entre sitios (XSS). Establece reglas para el uso de scripts integrados utilizando valores nonce y hashes. Durante la representación de la página, el navegador calcula hashes para cada script en línea y los compara con los que figuran en el CSP. Se bloquean las descargas de recursos no incluidos en la “lista blanca”.
src	Indica la ubicación del archivo de script, el valor del atributo es la URL del archivo que contiene el programa JavaScript.
tipo	Se utiliza para declarar el lenguaje de escritura utilizado para componer el contenido de la etiqueta.

1.3. Elemento

Esta sección contiene todo el contenido del documento. Disponible para el elemento.

Tabla 5. Atributos de etiqueta Descripción del atributo, valor aceptado

en la huella posterior	Un evento que se activa después de enviar una página para imprimir o después de cerrar la ventana de impresión.
en antes de imprimir	Un evento que se activa antes de enviar una página para imprimir.
antes de descargar	El evento se activa cuando el visitante inicia una transición a otra página o hace clic en "cerrar ventana". Le permite mostrar un mensaje en el cuadro de diálogo de confirmación para informarle al usuario si desea permanecer o abandonar la página actual.
cambio de hash	El evento se activa cuando cambia la parte hash de la URL, por ejemplo, cuando el usuario pasa de example.domain/test.aspx#page1 a example.domain/test.aspx#page2.
en mensaje	Un evento ocurre cuando se recibe un mensaje a través de una fuente de evento.
en línea	El evento lo activa el navegador cuando éste determina que se ha perdido la conexión a Internet.
en línea	El evento lo activa el navegador cuando se restablece la conexión a Internet.
ocultar en la página	El evento ocurre cuando el usuario abandona la página mediante la navegación, como al hacer clic en un enlace, actualizar la página, completar un formulario, etc.
mostrar en la página	El evento ocurre cuando el usuario navega a la página web, después del evento de carga.
descargar	El evento se activa si la página no se carga por algún motivo o cuando se cierra la ventana del navegador.

Ahora estamos listos para ensuciarnos las manos con tinta. Siéntete como un maquetador en una imprenta de mediados del siglo XX. El ruido rítmico de las imprentas, el olor a imprenta recién impresa, los clics de las letras de latón al colocarlas en su lugar. Grandes rollos de papel de periódico impecable, esperando recibir una parte de la información de circulación. Y tú, sentado frente a la máquina de escribir, colocas el bloque de información en el lugar correcto...

Es bueno que a las computadoras se les haya ocurrido esto. Puedes crear la atmósfera adecuada para ti y empezar a crear en un ambiente tranquilo. En realidad, esto es lo que haremos ahora.

Para completar las tareas necesitará (habrá un motivo para actualizar):

Si está interesado, puede comprobar hasta qué punto su navegador web admite el estándar HTML5. Siga el enlace http://html5test.com, allí verá los puntos, cuya suma está formada por el número de puntos admitidos por el estándar. En el momento de escribir este artículo, en mi máquina (Ubuntu10.10), Opera11.10 obtuvo 258 puntos y FireFox4 solo 240. Me pregunto qué tienes.

En este tutorial, nosotros:

• Crearemos una página contigo según el estándar HTML5.
• usemos nuevos elementos semánticos,
• dibujemos un poco,
• Veamos cómo se muestra el video en nuestra página,
• Comprobemos el funcionamiento de los nuevos elementos del formulario.

Para funcionar, sólo necesitaremos crear un archivo HTML. índice.html y un archivo CSS estilos.css. Los scripts aparecerán en la página a medida que complete las tareas, así que esté preparado para que su navegador le advierta sobre esto. Deberá permitir que se ejecuten scripts en la página.

Preparando el marco de la página

¡El navegador debe conocer la página de vista! Si no le dices quién es y de dónde es, activará el modo de compatibilidad y tendrás que adivinar “cómo responderá tu palabra” en el navegador del cliente. Para evitar que esto suceda, debe escribir el tipo de documento correcto correspondiente al código de página al principio de la página.

Aparentemente, después de escuchar las súplicas de los diseñadores de diseño, los chicos del W3C se apiadaron e hicieron una etiqueta corta para el estándar HTML5. Cualquier página web que admita el último estándar debe comenzar con él. ¿Recuerdas cómo era antes...? público … transicional o estricto... también la dirección del archivo de descripción del tipo de documento, que es muuuuy largo.

Empecemos. Crea una carpeta en tu escritorio, contendrá nuestro dulce par de archivos HTML y CSS. Cree un archivo de texto simple index.html, en codificación utf-8. Esta codificación de caracteres ha sido durante mucho tiempo el estándar para todos los textos que no están en inglés.

La primera línea es donde escribimos el tipo de documento.
En segundo lugar, abrimos la etiqueta principal de todo el documento html y especificamos el parámetro lang, escribiendo allí el idioma base de la página: el ruso.
Pasemos al título.
Lo primero que indicaremos es la codificación de caracteres del documento.
Luego el título de la ventana del navegador.
Luego, sin dudarlo, conectaremos el archivo de estilo.
Finalmente, agreguemos un contenedor de cuerpo de documento vacío.

Todo lo que describimos aquí está en el Listado No. 1:

Listado 1. Estructura básica del documento HTML5

Los inversores ven el futuro

Tenga en cuenta que la mayoría de las etiquetas ahora no son tan largas como antes. La etiqueta no necesita más que idioma. Para una metaetiqueta, simplemente escriba juego de caracteres. Además, para la etiqueta enlace no es necesario especificar tipo.

El marco está listo, pero es demasiado pronto para mostrar la página en el navegador. Pasemos a los elementos semánticos de la página.

Marcamos el contenido. Colocamos bloques semánticos en el marco.

Ahora seamos más precisos sobre lo que tendremos en la página. Partiremos de lo siguiente: debemos aprovechar al máximo los nuevos elementos semánticos de HTML5.

Nuestra página servirá para mostrar el texto completo de las noticias sobre la empresa a la que está dedicado el sitio. La transición a él se producirá desde la página principal donde se publican las últimas noticias o desde el archivo de noticias.

Coloquemos los bloques en un recipiente. Nos adheriremos a la siguiente secuencia de estos elementos:

– encabezado
– – grupo h
– navegación
- artículo
– – encabezado
- - "contenido"
- - sección
– – – encabezado
- - - "contenido"
– pie de página

Al principio tendremos un bloque: el título de la página. con un grupo de encabezados que hablan del sitio. Luego un bloque semántico para el menú. Hagamos ficticios los enlaces del menú. Tras esto comienza el artículo, indicado por el bloque semántico correspondiente. Contiene un bloque de encabezado para registrar el título del artículo y la fecha de publicación. A continuación viene el contenido del artículo, al que se suman las propias conclusiones del autor que redactó la noticia. Este complemento está diseñado como una sección y también va acompañado de un bloque de título y contenido. Al final de la página hay un bloque. pie de página, en el que publicaremos información adicional sobre el contenido de nuestras páginas.

Todo lo que hemos descrito aquí se presenta en el Listado No. 2. No proporcionamos el código completo de la página, sino solo lo que debe estar entre las etiquetas... .

Listado 2. Colocar bloques semánticos HTML5

LLC Horns and Hooves Texto completo de la noticia

• Hogar
• Sobre nosotros
• Contactos
• Archivos de noticias

26 de abril Los inversores ven perspectivas

Nada impide que la gente utilice los cuernos de la liebre. Sin embargo, no tiene pezuñas.

¿Qué piensa el público?

En realidad, sólo existe Ubuntu con un nombre tan extraño como "Harelope".

2011 LLC Cuernos y Pezuñas. Mantenemos nuestros derechos en un lugar seguro.

Ahora la página se puede ver en el navegador. Sin embargo, todavía parece poco atractivo. Pero no en vano ya nos hemos ocupado e incluido el archivo con estilos.

Pintemos la fachada.

Nuestra página todavía parece aburrida y poco atractiva. Vamos a maquillarla. Implementémoslo en nuestro archivo de estilo. estilos.css Lo primero que haremos será decidir la fuente de todo el documento. Si alguien no lo sabe, digamos que se realizó una investigación sobre qué fuente se percibe mejor en la pantalla de un monitor y resultó que era la que no tiene serifas. Estas fuentes se denominan sans-serif, sin serifa. Estos incluyen, por ejemplo: Arial, Helvetica, Verdana. Sigamos adelante, determinaremos en orden las reglas para el diseño de todos los elementos de nuestra página. Para no adelantarnos demasiado, usemos algunas características por ahora: sombras y bordes redondeados en los bloques.

La mayor parte de lo que codificaremos aquí estaba disponible en los primeros estándares CSS. Enumeraremos las nuevas características.

sombra de caja
Este parámetro se especifica para un elemento de página de bloque y crea una sombra a su alrededor. Los primeros cuatro números son los parámetros lineales de la sombra, respectivamente, se indican en píxeles; píxeles, u otras unidades lineales ( ellos, pt), o sin ellos, en el caso de tamaño cero. El primer número significa proyección horizontal de la sombra hacia la derecha; si desea proyectarla hacia la izquierda, coloque un número negativo. El siguiente es vertical hacia abajo; para completarlo, pon un número negativo. Lo siguiente es la cantidad de desenfoque de la sombra y luego la extensión de la sombra. Después de las dimensiones lineales, se indica el color de la sombra, y si desea una sombra interior, entonces la palabra clave recuadro. Si una sombra no es suficiente para ti, realiza tus fantasías de sombras separadas por comas.

sombra de texto
Este parámetro es similar en su configuración al anterior, la única diferencia es la ausencia de dispersión de sombras y sombra interna. Y nadie te impide fantasear con la cantidad de sombras, separadas por comas.

radio-borde (-moz-radio-borde, -webkit-radio-borde)
Radio de redondeo de bloques. Un bloque puede tener cuatro esquinas, por lo que este parámetro puede tener la misma cantidad de elementos. Listado en el sentido de las agujas del reloj comenzando desde la esquina superior izquierda. Los nombres de los parámetros indicados entre paréntesis se utilizan en los navegadores de la familia Mozilla y en el motor Webkit (Chrome, Safari). Así que duplique en la regla la configuración especificada para radio-frontera también en este par de parámetros.

El diseño que ideamos y codificamos se verá como el que se muestra en el Listado No. 3. Este código debe colocarse en un archivo. estilos.css.

Listado 3. CSS para los nuevos elementos semánticos HTML5

* (familia de fuentes: Lucida Sans, Arial, Helvetica, sans-serif;) cuerpo (ancho: 480px; margen: 0px auto;) header.mainH ( -webkit-border-radius: 6px; -moz-border-radius: 6px; radio de borde: 6px; -webkit-box-shadow: 0 3px 5px 0 #AA4400; -moz-box-shadow: 0 3px 5px 0 #AA4400; : 36px; margen: 0px; ) encabezado h2 (tamaño de fuente: 18px; margen: 0px; color: #888; estilo de fuente: cursiva; ) nav ul (estilo de lista: ninguno; pantalla: bloque; color de fondo: #666; altura: 24px; 12px; radio del borde: 12px; ) nav ul li (pantalla: en línea; relleno: 0px 20px 5px 10px; altura: 24px; borde derecho: 1px sólido #ccc; ) nav ul li a ( color: #EFD3D3; decoración del texto: ninguna; tamaño de fuente: 13px; peso de fuente: negrita; ) nav ul li a:hover ( color: #fff; ) artículo > tiempo del encabezado ( tamaño de fuente: 14px; mostrar : bloque; ancho: 26px; relleno: 2px; alineación de texto: centro; color de fondo: #993333;

Si abre su página de índice ahora, no se verá tan aburrida, mire la Figura 1. En comparación con la vista anterior, será simplemente SUPER

Figura 1. Vista de una página estilizada

Si la página se ve diferente, significa que la abriste en el navegador equivocado. Por "incorrecto" me refiero a un navegador que no sea Mozilla4+, Chrome11.0+, Opera11.10+, muestran la página de la misma manera: probado.

Nota: Si alguien no comprende las entradas de reglas en la lista, por ejemplo, ¿no comprende por qué necesita usar > en el selector? Entonces escribe tus preguntas en los comentarios.

Ofrezco una breve descripción general del estándar HTML5. Bueno, hay una, ¿cuáles son las diferencias, qué hay de nuevo, qué es mejor que el viejo html4?

A medida que el estándar se hizo popular, muchos se preguntaron si valía la pena reescribir el código de marcado de un sitio web existente/creado al nuevo estándar HTML5. Si es así, ¿cómo?

Pongamos un pequeño ejemplo aquí para aclarar las cosas.

Entonces, tenemos aproximadamente el siguiente código de documento:

Título

lorem ipsum

barra lateral


derechos de autor

Diseño estándar de dos columnas, con un menú superior en el encabezado del sitio.

Etiquetas básicas del estándar html5:

- un elemento que denota el encabezado de un sitio o alguna sección. Puede haber varios elementos en una página a la vez.

- un elemento que indica el pie de página de la página (su parte inferior), también puede ser la parte inferior de cualquier sección. Puede haber varios elementos de este tipo en una página (por ejemplo, el pie de página con información de derechos de autor + un elemento en cada noticia).

- el elemento se utiliza para enmarcar cualquier menú del sitio. Puede estar ubicado (aunque no necesariamente en el bloque de encabezado).

- un elemento para mostrar el contenido principal de la página del sitio. NO debe contener bloques de navegación y auxiliares del sitio, como menús, logotipos, barras laterales, etc.

- Se utiliza para la estructuración lógica de bloques de información en la página. Por ejemplo, puede enmarcar listas de noticias, artículos, lecciones, etc.

- un elemento que se utiliza para designar columnas laterales auxiliares. Por ejemplo, enmarcan las barras laterales.

- el elemento se utiliza para resaltar lógicamente una unidad de información independiente. Por ejemplo, dentro de la etiqueta se puede colocar un anuncio de un artículo con un título, una nota, una publicación de blog, etc.

Algunas etiquetas que se pueden utilizar según sea necesario:

, - etiquetas para insertar materiales de audio/vídeo en el sitio.

- etiqueta para insertar una fecha. Por ejemplo, la fecha en que se publicó el artículo.

- el elemento se utiliza para dibujar imágenes bidimensionales utilizando scripts (en particular Javascript). Gráficos en sitios web, diagramas, etc.

Los elementos deben contener etiquetas de apertura/cierre. En general, esto se aplica no sólo a los elementos del estándar HTML5. Aunque los navegadores modernos han aprendido a configurar correctamente una etiqueta de cierre, en ausencia de una, se considera una buena práctica cerrar las etiquetas (si no hablamos de etiquetas individuales) por parte del propio desarrollador.

Ahora una pequeña parte preparatoria para que la transición se note mínimamente en los navegadores más antiguos:

Añadir a la sección:

Para ayudar al navegador a comprender los elementos de bloque desconocidos, agregue lo siguiente al archivo de estilos:

Pie de página, navegación, encabezado, sección, al lado (
mostrar: bloquear;
}

Ahora veamos qué pasa si reescribimos el código de nuestra plantilla al estándar HTML5:

pie de página, navegación, encabezado, sección, al lado (
mostrar: bloquear;
}

Documento

lorem ipsum

barra lateral


derechos de autor

¿Cómo vemos las diferencias?

• El tipo de documento se ha acortado y se ha vuelto conciso. Ahora no hay necesidad de elegir dolorosamente el correcto.
• Faltan los atributos type="..." y los tipos MIME de etiquetas internas.
• Todos los bloques div han sido reemplazados por elementos de marcado semántico. Además, si los selectores en el archivo de estilo no estaban vinculados a etiquetas (por ejemplo, no “div.header”, sino “.header”), los estilos sin ediciones se aplicarán a los elementos correspondientes.

Debe comprender que la transición a HTML5 es más que simplemente transferir el diseño div a etiquetas del nuevo estándar.

Se trata de optimización de sitios para motores de búsqueda, para una amplia gama de dispositivos modernos desde los que se pueden ver los sitios. Nuevas capacidades para insertar materiales multimedia, capacidades estándar adicionales al trabajar con formularios (muchas de las cuales anteriormente solo se lograban mediante la conexión de scripts).

Ésta es sólo una breve lista de innovaciones. Espero que esta excursión te ayude a resolverlo.

Preguntas, aclaraciones, déjalas en los comentarios.

Del autor: desde que comenzaron a aparecer en Internet artículos que demostraban las nuevas propiedades de HTML5 y CSS3, tuve la idea de crear un diseño de sitio web sin imágenes. Aprovechando las mejoras en HTML5 y CSS3 (con respecto a las venerables especificaciones anteriores), no es demasiado difícil crear un sitio web con un aspecto decente que no tenga que depender de imágenes para el marcado.

Aquí hay una imagen del sitio que diseñaremos usando HTML5 y CSS3:

Antes de comenzar con los pasos prácticos, le recomiendo que vea el resultado de demostración del trabajo.

El elemento de encabezado representa el grupo introductorio o ayudas a la navegación.

Siguiendo su recomendación, el elemento del encabezado contendrá nuestro logotipo, subtítulo y navegación principal. Cuando ingresamos al elemento de encabezado del encabezado, tenemos un detalle de marcado que contiene todas aquellas partes de la página que intuitivamente consideramos un encabezado. (O todos esos detalles de la página que estarán anidados en el elemento div con la identificación del encabezado). El elemento del encabezado se puede usar más de una vez en la página y lo usaremos nuevamente dentro de los elementos del artículo, que contendrán introducciones a las publicaciones.

elemento del grupo H

Primero, dentro del elemento del encabezado hay otra etiqueta nueva, hgroup. Lo usaremos para mostrar el logotipo y el subtítulo de nuestro sitio respectivamente en las etiquetas h1 y h2.

El elemento hgroup se utiliza para agrupar un conjunto de elementos h1-h6 cuando un título tiene varios niveles, como subtítulos, títulos alternativos o subtítulos.

El elemento hgroup puede parecer redundante a menos que envuelva los encabezados en un elemento div como de costumbre para que el título o los subtítulos tengan un fondo o estilo normal. Sin embargo, hgroup juega un papel importante en el esquema del documento. El algoritmo de esquema verifica su página e informa la estructura del encabezado. Consulta el esquema de tu trabajo utilizando la herramienta Outliner. Cuando el algoritmo del esquema encuentra un elemento hgroup, ignorará todo excepto el encabezado de nivel más alto (generalmente h1).

Ahora tenemos un problema: el algoritmo del circuito no es perfecto ni está completo. Por ejemplo, el siguiente elemento que analizaremos es el elemento de navegación y el marcado lo marca como "Sección sin título". Ha habido solicitudes de desarrolladores de marcado para cambiar el algoritmo del esquema para representar el elemento de navegación como "Navegación". En cualquier caso, el elemento hgroup te proporciona una manera de agrupar tus títulos y así organizarlos tanto estructural como semánticamente.

elemento de navegación

Pasamos al siguiente elemento HTML5, nav. En nav incluiremos la navegación principal del sitio, envuelta en una lista desordenada.

El elemento de navegación representa una sección de una página que enlaza con otras páginas o áreas dentro de una página: el área con enlaces de navegación.

Usar nav para crear la navegación principal de un sitio es algo que se da por sentado, pero las circunstancias son tales que habrá más áreas en su sitio que contengan enlaces; la pregunta es cuáles deberías envolver con una etiqueta de navegación. A continuación se muestran algunos casos de uso que creo que podrían ser adecuados:

Publicaciones relacionadas.

Según la especificación, estos pueden ser usos apropiados o no del elemento de navegación. La especificación no es muy clara y los ejemplos dados no son de mucha ayuda. Entonces, si bien la especificación no es definitiva ni más específica, solo puede confiar en la comunidad de desarrolladores para determinar el método correcto para usar el elemento de navegación.

Elemento del artículo

El siguiente elemento que quiero presentarles es el artículo. El área principal de nuestra página de demostración contiene tres citas de publicaciones y incluiremos cada una de ellas en una etiqueta de artículo.

HTML

2010 16 de abril Publicación de muestra 1 38

Curabitur ut congue hac, diam turpis[…]

Escrito por: Autor Nombre Etiquetas: Fríomodernoamigable con el bombo Continuar leyendo

2010 16 de abril Publicación de muestra 1 38 Curabitur ut congue hac, diam turpis[…] Escrito por: Nombre del autor Etiquetas: Frío moderno amigable con el bombo Continuar leyendo

Aquí está la definición del W3C para el elemento artículo:

El elemento del artículo representa una composición modular en un documento […], por lo que está destinado a ser autodistribuible o reutilizable, como en la sindicación (la publicación simultánea de contenido en múltiples sitios web).

Esta vez la especificación es más clara y la publicación del blog (o extracto) es mucho mejor ( tenga en cuenta la mención de sindicación) va al artículo. Por supuesto, podemos colocar muchos elementos de artículo en una página.

Sin duda habrás notado que dentro del artículo hemos colocado elementos de encabezado y pie de página. Tanto el encabezado como el pie de página se pueden utilizar más de una vez en una sola página HTML. Dado que el encabezado es un "grupo introductorio o ayuda para la navegación", incluimos la fecha, el título y la cantidad de comentarios. A continuación, tenemos un párrafo con un extracto del post, seguido de un pie de página.

Elemento de pie de página

Como dije antes, el pie de página se puede usar tantas veces como sea necesario en una sola página y representa el segmento de pie de página de una página de documento, o parte de un documento.

El elemento de pie de página representa el pie de página de la sección a la que accede. Normalmente, el pie de página contiene información sobre su sección, como autoría, enlaces a documentos relacionados, fecha de copyright, etc.

Tenemos cuatro elementos de pie de página en nuestra página de demostración: uno para cada uno de los tres elementos del artículo y un pie de página común para toda la página. El pie de página del elemento del artículo contiene el nombre del autor de la publicación, las etiquetas y un botón de enlace a la publicación completa del blog.

El pie de página general contiene tres elementos de sección y un aviso de derechos de autor. Ambos usos del elemento de pie de página son legales y cumplen con la recomendación del W3C.

Elemento de sección

El área de pie de página general de nuestra página de demostración contiene tres elementos de sección. En ellos, enumeramos nuestras publicaciones de blog más populares, comentarios recientes y una breve biografía de nuestra empresa ficticia.

El elemento de sección representa el área general de un documento o solicitud. Una sección en este caso es una agrupación temática de contenido, que normalmente utiliza un título.

El elemento de sección es bastante complicado porque en su definición de especificación parece muy similar al elemento div. Caí en esta trampa cuando comencé a codificar la página de demostración; Coloqué tres elementos del artículo dentro del elemento de sección. Pronto me di cuenta del error de mis métodos. La única forma de decidir si usar la sección es ver si el área que desea envolver con un elemento de sección necesita un título. En la definición, puedes ver que el elemento de sección generalmente tiene un título.

Otra pregunta que es útil para determinar la validez del uso del elemento de sección es: ¿lo está agregando únicamente con fines de estilo? Lo estás agregando simplemente porque necesitas hacer que la sección se destaque usando JavaScript, o porque necesitas aplicarle un estilo regular y necesitas usar un elemento div en su lugar.

Envolver los tres elementos del artículo de nuestra página de demostración en una etiqueta de sección tendría sentido si la sección incluyera un título como "Últimas publicaciones del blog". Tendría sentido; de lo contrario, la etiqueta que contiene los elementos del artículo es solo soporte de estilo, algo que nos ayuda a orientarlo mediante JavaScript o CSS.

elemento aparte

El último elemento HTML5 utilizado para la página de demostración está a un lado; Lo usamos como contenedor de barra lateral.

El elemento aparte representa una sección de una página que consta de contenido que está superficialmente relacionado con el contenido que rodea al aparte y que puede percibirse como separado de ese contenido. Estas secciones suelen representarse en tipografía como barras laterales.

Como puede ver en la especificación, un ejemplo de un uso ideal para el elemento lateral es una barra lateral. A continuación, en el gráfico, puede ver la jerarquía del elemento aside en nuestra página de demostración.

Colocamos dos secciones y una de navegación. El primer elemento de la sección contiene enlaces a Twitter y RSS, y el segundo representa el último tweet (la publicación del usuario en Twitter). El elemento de la segunda sección es también uno de los raros casos en los que no tiene título. Podría tener un título, algo así como "Último Tweet", pero no creo que sea necesario porque los lectores están acostumbrados a ver bloques como este y la etiqueta de Twitter debajo de la cita es muy reconocible. Nuestro elemento de navegación de la barra lateral se utiliza para mostrar una lista de blogs y, a diferencia de la navegación principal, tiene un título.

Última palabra

Así, la primera parte de nuestro artículo sobre diseño de sitios web en HTML5 y CSS3 ha llegado a su fin. Intenté que fuera lo más breve posible y no dedicar demasiado tiempo a las incertidumbres de la especificación HTML5 porque aún no está terminado. Mientras tanto, tendremos que confiar en la comunidad y en el trabajo de los “curanderos” de HTML5 para que se conviertan en nuestros guías a la hora de introducir nuevos elementos en los sitios.

Gracias por leer y no te pierdas la Parte 2 de este artículo, donde discutiremos las propiedades de CSS3 utilizadas para decorar el marcado.

Como siempre, quedo atento a cualquier duda o comentario. No tenga miedo de hablar e iniciar una discusión sobre el uso de nuevos elementos, porque esta es la mejor manera de aclarar su utilidad.

Editor: Rog Victor y Andrey Bernatsky. equipo webformyself.