Plantillas de diseño Html
Este artículo recapitulará algunas de las características del diseño CSS que ya hemos tocado en módulos anteriores, como los diferentes valores de visualización, así como introducirá algunos de los conceptos que cubriremos a lo largo de este módulo.
Las técnicas de diseño de páginas CSS nos permiten tomar elementos contenidos en una página web y controlar su posición con respecto a los siguientes factores: su posición por defecto en el flujo de diseño normal, los otros elementos que los rodean, su contenedor padre y la ventana/portada principal. Las técnicas de diseño de páginas que cubriremos con más detalle en este módulo son:
Cada técnica tiene sus usos, ventajas y desventajas. Ninguna técnica está diseñada para ser utilizada de forma aislada. Si entiendes para qué está diseñado cada método de diseño, estarás en una buena posición para entender qué método es el más apropiado para cada tarea.Flujo normalEl flujo normal es la forma en que el navegador diseña las páginas HTML por defecto cuando no haces nada para controlar el diseño de la página. Veamos un ejemplo rápido de HTML:
Observe cómo el HTML se muestra en el orden exacto en el que aparece en el código fuente, con los elementos apilados uno encima de otro: el primer párrafo, seguido de la lista desordenada, seguida del segundo párrafo.
Generador de diseño Html
Algunos puntos destacados:Este es un inicio muy básico y sólido para todos y cada uno de los proyectos HTML5 que puedas hacer en el futuro. Si tuviéramos una máquina de rayos X diseñada para sitios web, este sería el esqueleto de nuestra página: La cabeceraLa cabecera de la maquetación es de lo más sencilla. La nueva especificación de la etiqueta <header> dice lo siguiente:El elemento header representa un grupo de ayudas a la introducción o a la navegaciónAsí que es más que lógico que usemos esto para marcar nuestra cabecera. También utilizaremos la etiqueta <nav>. La especificación dice:El elemento nav representa una sección de una página que enlaza con otras páginas o con partes dentro de la página: una sección con enlaces de navegación. No todos los grupos de enlaces de una página tienen que estar en un elemento nav – sólo las secciones que consisten en bloques de navegación importantes son apropiadas para el elemento nav.Hay mucho revuelo con respecto a la especificación del elemento nav ya que “bloques de navegación importantes” no es una descripción muy útil. Pero esta vez estamos hablando de la navegación principal de nuestro sitio web; no puede haber nada más importante que eso. Así que después de un par de id’s y clases nuestra cabecera termina así:
Comentarios
Para alguien que nunca ha codificado antes, el concepto de crear un sitio web desde cero – diseño y todo – puede parecer realmente intimidante. Puede que te imagines a los estudiantes de Harvard de la película “La red social”, sentados frente a sus ordenadores con unos auriculares gigantescos y martilleando el código, y pienses: “Yo nunca podría hacer eso”.
Cualquiera puede aprender a programar, igual que cualquiera puede aprender un nuevo idioma. De hecho, programar es como hablar una lengua extranjera, y por eso se llaman lenguajes de programación. Cada uno tiene sus propias reglas y sintaxis que hay que aprender paso a paso. Esas reglas son formas de decirle al ordenador lo que tiene que hacer. Más concretamente, en la programación web, son formas de decirle a los navegadores lo que tienen que hacer.
Programar, o codificar, es como resolver un puzzle. Piensa en un lenguaje humano, como el inglés o el francés. Utilizamos estos idiomas para convertir pensamientos e ideas en acciones y comportamientos. En la programación, el objetivo del rompecabezas es exactamente el mismo: sólo estás conduciendo diferentes tipos de comportamiento, y la fuente de ese comportamiento no es un humano. Es un ordenador.
Ejemplos de sitios web Html5
HTML5 y CSS3 han arrasado en la web.. Antes de ellos se ha alterado mucho la semántica en la forma en que se espera que los diseñadores web creen las páginas web, y con su llegada llegan un montón de apoyos impresionantes como los medios alternativos, las etiquetas de estilo XML y los atributos de entrada progresiva para que los diseñadores web consigan características de ensueño como la animación.
Aunque la mayoría de los desarrolladores parecen mostrar demostraciones potenciales pero complicadas, HTML5/CSS3 no son realmente ciencia espacial, y yo te guiaré a través del relajante proceso de construcción de una página web estándar HTML5/CSS3 con una explicación exhaustiva pero profunda y ¡tada!
La comparación entre HTML4 y HTML5 es difícil de detectar a nivel superficial. Al ver el nuevo borrador de HTML5 se pueden ver los elementos destacados y los procedimientos de gestión de errores corregidos. Los desarrolladores de navegadores han disfrutado especialmente de las nuevas especificaciones para la representación de páginas web por defecto.
Además, se han creado muchos elementos para representar los medios digitales de la nueva era. Estos incluyen <videogt; y <audiogt; que son enormes para el soporte multimedia. En algunos navegadores se puede completar la validación de formularios directamente en HTML.
