Guía para principiantes para crear páginas web HTML5 / CSS3

Este artículo es parte de nuestro "Serie de tutoriales HTML5 / CSS3" - Dedicado a ayudarlo a ser un mejor diseñador y / o desarrollador.. haga clic aquí Ver más artículos de la misma serie..

HTML5 y CSS3 han barrido la web por completo en solo 2 años. Antes de ellos, ha habido muchas alteraciones en la semántica en la forma en que se espera que los diseñadores web creen páginas web, y con su llegada vienen una serie de increíbles soportes, como medios alternativos, etiquetas de estilo XML y atributos de entrada progresivos para que los diseñadores web alcancen el sueño características 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 lo guiaré a través del proceso de relajación para crear una página web estándar de HTML5 / CSS3 con una explicación completa pero detallada y ¡tada! Bonos como recursos de aprendizaje y plantillas HTML5 gratuitas están disponibles para usted, así que aproveche esta oportunidad para iniciar su viaje en HTML5!

Cambios entre HTML4 y HTML5

Quizás se pregunte por qué es incluso importante cambiar a HTML5. Hay un sinnúmero de razones, pero sobre todo porque estarás Trabajando con los estándares globales de internet. como cualquier otro diseñador. De esta manera encontrarás más soporte en línea y tu Los sitios web se mostrarán correctamente en los navegadores modernos. que se mejoran constantemente.

(Fuente de la imagen: W3C)

La comparación entre HTML4 y HTML5 es difícil de detectar a nivel de superficie. Desde la visualización del nuevo borrador de HTML5, puede ver los elementos destacados y los procedimientos de manejo de errores corregidos. Los desarrolladores de navegadores han disfrutado específicamente de las nuevas especificaciones para representar páginas web predeterminadas.

Lo que es más de HTML5 es la conversión de nuestro navegador web moderno. Con estas nuevas especificaciones, la web en su conjunto ahora se ve como un plataforma de aplicaciones para HTML (especialmente HTML5), CSS y JavaScript sobre los que se construirá. Además, este sistema elegantemente Crea armonía entre diseñadores web y desarrolladores. estableciendo estándares comunes que todos los navegadores deben seguir.

Adicionalmente se han creado muchos elementos para representar los medios digitales de la nueva era. Éstos incluyen y que son enormes para el soporte multimedia. En algunos navegadores puede completar la validación de formularios directamente en HTML. Por supuesto, todavía hay una gran necesidad de jQuery, ya que hay muchos desarrolladores de software que aún no han reconocido las funciones. Si desea una lista de etiquetas, consulte esta tabla de W3Schools para obtener más información sobre ellas..

Bare HTML5 Skeleton

Encuentro que la forma más fácil de entender cualquier tema es sumérgete en ello. Así que estaré construyendo una plantilla de esqueleto HTML5 muy básica para una página web. Incluí algunos de los elementos más nuevos, que espero categorizar un poco más adelante..

   Nuestra primera página HTML5       Bienvenido, uno y todos!
   Casa
 Sobre nosotros
 Contactos
 
 
 
   algo de contenido aquí.
 
  pero algunos aquí también!
 
 
  Algunos derechos de autor y avisos legales aquí. Tal vez use el símbolo © un poco.

De inmediato, esto no es muy diferente de una página web HTML4 estándar. Lo que puede notar es que nosotros No es necesario incluir más etiquetas de cierre automático.. Esta es una noticia realmente maravillosa ya que ahorrará mucho tiempo fuera de sus proyectos de desarrollo.

Para aquellos que no saben, en los borradores de XHTML había muchos elementos etiquetados de cierre automático. Estos terminarían con una barra inclinada delante del operador "mayor que" para indicar que no necesitaría incluir otra etiqueta de cierre en otro lugar. Como ejemplo, para crear una etiqueta de palabras clave meta que usaría sin la necesidad de un cierre en otra parte.

Esta regla todavía se aplica en HTML5. Pero ahora tu Ni siquiera necesito la barra inclinada extra! es completamente válido, aunque se le permite continuar usando el estándar XHTML / XML. Para todos los navegadores compatibles con los estándares, ambos elementos se representarán de la misma manera..

Definiendo nuestras áreas de página

La mayoría de nuestro nuevo código no debería ser demasiado impactante. Nuestro doctype es hilarantemente más simple que nunca, sin necesidad de atributos corporales excesivos, y la información en nuestro encabezado está claramente etiquetada. Continuando me gustaría enfocar su atención en el contenido dentro de nuestro etiqueta. Esto incluye toda la estructura de la página principal. He usado algunas etiquetas HTML5 para indicar cómo puedes incluirlas en tu propio trabajo..

Primero verás que toda la página es encapsulado dentro de un div etiqueta. He etiquetado esto con una identificación de envoltura, lo que significa que envuelve todo el contenido de nuestro sitio web. Esto es Útil para establecer un ancho máximo o posicionar el contenido. alrededor de la pantalla. A continuación, he fracturado la página en 3 elementos principales: uno

, un núcleo

, y un corto

. Dentro de mi área de encabezado personalizada, he agregado una visualización simplista del título de la página y los elementos de navegación usando el

etiqueta como un envoltorio.

Ahora para el

con una identificación de núcleo He aplicado una secundaria clearfix. Esta característica lo hace para que podamos flotar libremente 2 columnas dentro y no experimentaremos ningún contenido caído o fenómenos extraños. Y con razón, ya que por dentro he colocado dos.

Etiquetas que incluirán nuestra área de contenido principal y barra lateral, respectivamente. Estaremos usando estilos CSS para separarlos.

Del mismo modo la tranquilidad. pie de página etiqueta Funciona bien para diferenciar este contenido entre la página. Dentro, he colocado un párrafo solemne que puede contener información sobre derechos de autor y propiedad. Pero es probable que desee incluir un poco más de contenido, como enlaces secundarios a sus páginas..

Creative CSS3 Wizardry

Para terminar este diseño básico de la plantilla podemos usar algunos estilos CSS. En la plantilla básica de HTML5 he añadido un hoja de estilo CSS externa para que podamos mantener nuestras áreas de código separadas. Esta voluntad aclarar mucha confusión A la larga, cuando sus páginas y estilos comienzan a ejecutarse en diferentes páginas..

(Fuente de la imagen: W3C)

Así que no he pasado mucho tiempo con CSS, pero lo suficiente como para mostrar un par de efectos impecables. En primer lugar he usado algunos de los configuración del radio del borde para construir efectos de desplazamiento de enlace de navegación muy interesantes. Puede orientar este mismo efecto en el código de la plantilla, solo agregue las siguientes líneas en el documento CSS.

 nav display: block; margen inferior: 10px;  nav ul estilo de lista: ninguno; tamaño de fuente: 14px;  nav ul li display: inline;  nav ul li a display: block; flotador izquierdo; relleno: 3px 6px; color: # 575c7d; texto-decoración: ninguno; font-weight: negrita;  nav ul li a: hover background: # deff90; color: # 485e0f; -webkit-border-radius: 3px; -moz-border-radius: 3px; radio del borde: 3px; relleno: 3px 6px; margen: 0; texto-decoración: ninguno;

Otro buen efecto es el estilos clearfix. Este no es un concepto completamente nuevo con CSS3, pero es importante para crear páginas web que cumplan con los estándares. A menudo, cuando buscas flotar contenido uno junto al otro, experimentarás fallos de posicionamiento de buggy. Esto se debe a los márgenes de compensación y los errores en la configuración de anchos absolutos para su contenido flotante.

Este concepto puede parecer un poco confuso, y he añadido un poco de código a continuación para ayudar. Básicamente estamos apuntando a dos

elementos, #izquierda y #Correcto Para corresponder a su lado de la página. Los he establecido con un ancho definido y flotando a la izquierda, para que se apilen uno al lado del otro. Desde nuestro contenedor div # core contiene el clearfix clase, esto significa que todo el contenido interno puede moverse libremente y despeja automáticamente espacio extra después.

/ * page core * / div # core display: block; Limpia los dos; margen inferior: 20px;  seccion # izquierda ancho: 550px; flotador izquierdo; margen: 0 15px;  seccion # derecha flotar: izquierda; ancho: 300px;  / * clearfix * / .clearfix: after content: "."; bloqueo de pantalla; Limpia los dos; visibilidad: oculta; línea de altura: 0; altura: 0;  .clearfix display: inline-block;  html [xmlns] .clearfix display: block;  * html .clearfix altura: 1%;

Estos bits de código son simples para empezar. También pertenecen a nuestro código de plantilla HTML5 construido anteriormente, por lo que esta es una práctica simple. Pero cuando se trata de adictos a la web real, verás más funcionalidades de CSS3..

Sintaxis de CSS3 menos conocida

Para construir páginas web completas de HTML5 / CSS3, comenzarás a usar hojas de estilo mucho más complejas. Muchos diseñadores conocen el código de taquigrafía (como el fuente: propiedad), ya que estos han sido estándares incluso antes de CSS2.

Pero hay algunas propiedades nuevas en CSS3 que muchos diseñadores no están pensando. Muchos de estos no son solo para estética, sino que también incluyen efectos de animación. A continuación hay una lista corta que explica algunas de las propiedades con las que puede considerar jugar. Trate de buscar ejemplos de sintaxis en Google si se siente perdido.

sombra de la caja: agrega un efecto de sombra limpio a los elementos de tu página. Se le dan 4 parámetros que establecen la posición izquierda / derecha, arriba / abajo, sombra borrosa y color. Tenga en cuenta que las sombras de cuadro no se consideran espacio adicional al ancho / alto original.
sombra de texto: crea hermosas sombras detrás del texto de tu página. Con los efectos correctos, sus letras pueden aparecer al salir de la página..
radio del borde: Las esquinas redondeadas han tardado mucho tiempo en convertirse en estándares aceptados. Hace algunos años, muchos diseñadores web 2.0 creaban imágenes de fondo solo para encajar en esquinas redondeadas con CSS. Pero utilizando el radio de borde de CSS3 puede manipular la curva de cada borde en cualquier elemento.
opacidad: Parece una propiedad simple que muchos diseñadores no consideran. La opacidad espera una entrada numérica única que oscile entre 0 y 1.0 (0% - 100%). Este efecto funciona muy bien como una animación flotante..
@Perfil delantero: Otro bello ejemplo de algunos estilos y tipografías CSS complejas. Los diseñadores web ahora pueden trabajar con sus propias fuentes personalizadas definiéndolas como variables dentro de sus documentos CSS.
tamaño de caja: por defecto, el tamaño del cuadro establecerá todos tus elementos como caja de contenido. Esto significa que el ancho, el relleno y los bordes se incluyen en el ancho máximo. Pero establecido en casillero puede definir un ancho máximo (por ejemplo, 20 px) y los rellenos / bordes agregados se incluirán en este, eliminando así el espacio dentro del objeto. Es una propiedad fantástica una vez que domines su ingenio..

Todas estas propiedades tienen sus ventajas y desventajas. No recomendaría tratar de incluirlos en sus páginas web. Pero la práctica te dará una mentalidad clara Entrar en el desarrollo de otros sitios web con facilidad..

Una pieza más de la sintaxis adicional que vale la pena mencionar es selectores de atributos. Con CSS3 puedes ahora Definir estilos basados en atributos HTML. (como tipo, href, título) e incluso proporcionar valores específicos. Así, por ejemplo, podríamos dirigir enlaces con un atributo de título definido y darles un conjunto de íconos de fondo.

 ul li [title ^ = "ico"] background: url ('my-icon.gif');

Si nota que he incluido un símbolo de caret antes del signo igual. Este es un operador que define todos los elementos de la lista que contienen el prefijo, ico. Alternativamente, puede reemplazar el símbolo de intercalación (^) con un signo de dólar ($) para seleccionar el área del sufijo de su título. De esta manera, CSS3 sabe agregar imágenes de fondo en las que puede establecer los títulos como 'primer ico' o 'libro ico'. Lea un poco más sobre los selectores de atributos si está interesado.

Poniendolo todo junto

En el núcleo de las páginas web HTML5 y CSS3 está sencillez. Los desarrolladores web intentan crear sitios web altamente creativos en menos tiempo y con menos estrés. Las nuevas características en HTML5 permiten esto con un montón de margen de maniobra. Y el uso de algunos de los nuevos selectores y propiedades CSS3 le dará ventajas a largo plazo..

(Fuente de la imagen: W3C)

Pero también deberías estar considerando el usuario final. El proceso de construcción de una página web finalmente termina después de lanzar el sitio web público. Tu objetivo es por favor audiencia con información de fácil acceso, y no solo lectores humanos, sino rastreadores de motores de búsqueda y bots de indexación. La semántica ha evolucionado enormemente para incluir nuevos elementos de diseño HTML5, dividiendo los diseños de página de manera consistente. Nunca ha sido tan fácil construir una pequeña sección de navegación y pie de página en línea con todos los navegadores web modernos.

Una vez que se haya familiarizado con la creación de páginas web HTML5, es probable que comience a buscar animaciones de páginas. Incluso efectos menores con JavaScript y AJAX pueden mayormente mejorar la experiencia del usuario y el rendimiento del sitio. Aunque esto no es parte del alcance del artículo, recomiendo jugar con jQuery si tiene tiempo. La biblioteca de código abierto es asombrosa y permite la creación rápida de prototipos sobre elementos de página HTML5.

Recursos adicionales

Los bloggers de todo el mundo han estado discutiendo las nuevas tendencias en HTML5 y CSS3 y compartiendo recursos para el público. El tiempo está cambiando y la comunidad web está cambiando con ellos. Debe considerar algunas áreas de nicho para estudiar y generar un pequeño interés..

A continuación hay algunas listas adicionales, artículos y tutoriales que puede disfrutar. Me he tomado la libertad de dividir las listas en recursos HTML5 y CSS3. De acuerdo con lo que estás buscando, debería haber algunos temas aquí para todos. También disfrute de la breve galería de temas HTML gratuitos disponibles para descargar en línea!

HTML5

HTML5: 15 experimentos inspiradores
HTML5: 19 aplicaciones web
HTML5: 48 Demostraciones potenciales de matar flash
Crear un formulario de contacto HTML5 / CSS3 basado en Ajax

CSS3

CSS3: Una guía para principiantes
CSS3: Creando el campo de búsqueda
CSS3: Usando Pseudo-Clases
CSS3: 30+ Tutoriales útiles

Bono: Plantillas y Temas HTML5

Compañía de diseño

¿Listo para entrar en el maravilloso mundo de HTML5? Aquí hay una plantilla HTML5 completamente gratuita, con scripts de jQuery y fuentes personalizadas armadas para que puedas probarlas libremente.!

Un tema HTML5 / CSS3

Este tema potenciado por HTML5 / CSS3 tiene un diseño de diseño de blog común para que usted pueda construir su propio blog HTML5 con amplias funciones, o simplemente profundizar en el código y aprender algo sobre él..

Yoko

Yoko es un tema moderno de WordPress que habla acerca de la flexibilidad con su diseño receptivo basado en consultas de medios CSS3, que es la capacidad de adaptarse a diferentes tamaños de pantalla.!

Gris

Si prefieres el estilo clásico del blog de WordPress, Grey es probablemente para ti con sus características incorporadas de CSS3 como radio de borde, fondos múltiples, sombra de texto, etc..

Guía para principiantes de Flock, el navegador de redes sociales

Guía para principiantes para el desarrollo de iOS La interfaz - Parte I

Guía para principiantes para configurar Windows 7 Media Center