Bienvenidos a mi ultimo post de Si te gustan mis Aportes no duden es Seguirme Si te gusto el post recomendalo, shutealo, no pido puntos, pido que lo compartan comunidad, podes visitar mi perfil En este tutorial, vamos a crear una página de blog a través de la próxima generación de técnicas de HTML 5 y CSS 3. El tutorial tiene como objetivo demostrar la forma en que será la construcción de sitios web, cuando las especificaciones son finalizados y los fabricantes de navegadores han implementado. Si ya sabes HTML y CSS, debe ser fácil de seguir adelante. 1. HTML 5 HTML 5 es la próxima gran versión de HTML. Se introduce un montón de nuevos elementos que harán que nuestras páginas sean más semántica. Esto hará que sea mucho más fácil para los motores de búsqueda y lectores de pantalla para navegar por nuestras páginas, y mejorar la experiencia web para todos. Además, HTML 5 también incluirá APIs para dibujar gráficos de fantasía en la pantalla, el almacenamiento de datos fuera de línea, arrastrar y soltar, y mucho más. Vamos a empezar el marcado de la página del blog. 2. Basic Structure Antes de comenzar el marcado de la página que debe recibir toda la estructura recta: En HTML 5 existen etiquetas específicas destinadas a marcar el encabezado, la navegación, la barra lateral y pie de página. En primer lugar, eche un vistazo a las marcas y voy a explicar después:

Page title

Todavía se parece a formato HTML, pero hay algunas cosas a tener en cuenta: En HTML 5, sólo hay un tipo de documento. Se declara en el comienzo de la página . Simplemente le dice al navegador que está tratando con un documento HTML. La cabecera nueva etiqueta se envuelve alrededor de los elementos introductorios, como el título de la página o un logotipo. También podría incluir una tabla de contenido o un formulario de búsqueda. Cada cabecera suele contener una etiqueta de encabezado de

a

. En este caso, la cabecera se usa para introducir toda la página, pero vamos a utilizar para introducir una sección de la página un poco más tarde. La unidad la etiqueta se utiliza para contener los elementos de navegación, tales como la navegación principal en un sitio o una navegación más especializados, como siguiente / anterior-links. La sección de etiqueta se utiliza para denotar una sección en el documento. Puede contener todo tipo de marcas y varias secciones se pueden anidar unos dentro de otros. además se utiliza para envolver alrededor de los contenidos relacionados con el contenido principal de la página que aún podía soportar por sí mismo y tener sentido. En este caso lo estamos utilizando para la barra lateral. El pie de página de etiquetas deben contener información adicional sobre el contenido principal, tales como información acerca de quién lo escribió, la información de copyright, enlaces a documentos relacionados y así sucesivamente. En lugar de utilizar divs que contienen las diferentes secciones de la página que ahora estamos utilizando etiquetas apropiadas, semántica. Se hará mucho más fácil para los motores de búsqueda y los lectores de pantalla para averiguar qué es lo que en una página. 3. Marking Up the Navigation La navegación se caracteriza exactamente igual que lo haríamos en HTML 4 o XHTML, utilizando una lista desordenada. La clave es que esta lista se coloca dentro de las etiquetas de navegación. 4. Marcar la Introducción Ya hemos definido una nueva sección en el documento utilizando la etiqueta de sección. Ahora sólo necesitamos algo de contenido. section id="intro">

Do you love flowers as much as we do?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Añadimos un id de la etiqueta de sección para que podamos identificar más tarde, cuando el estilo. Nosotros usamos la etiqueta de cabecera para cubrir a la introducción elemento h2. Además de describir un documento conjunto, la cabecera de etiqueta también debe ser usado para describir las distintas secciones. 5. Marcar el área de contenido principal Nuestra área de contenido principal consta de tres secciones: la entrada del blog, los comentarios y el formulario de comentarios. Usando nuestro conocimiento acerca de las nuevas etiquetas estructurales en HTML 5, que debería ser fácil para marcar. Marcar el post en tu blog Pasar por el marcado y voy a explicar los nuevos elementos después.

This is the title of a blog post

Posted on June 29th 2009 by Mads Kjaer - 3 comments

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...

Comenzamos una nueva sección y envolver la entrada en el blog en un artículo conjunto de etiquetas. La etiqueta del artículo se utiliza para indicar una entrada independiente en un blog, la discusión, enciclopedias, etc, y es ideal para usar aquí. Ya que estamos viendo los detalles de un solo puesto que sólo tenemos un artículo, pero en la página principal del blog nos envuelva cada mensaje en un artículo de etiqueta. El elemento de encabezado se utiliza para presentar el encabezado y los metadatos de la entrada en el blog. Le decimos al usuario cuando el mensaje fue escrito, quién lo escribió y la cantidad de comentarios que tiene. Tenga en cuenta que la fecha y hora está envuelto en una etiqueta. Esta etiqueta también es nuevo en HTML 5 y se utiliza para marcar un lugar específico en el tiempo. El contenido de los atributos de fecha y hora debe ser: 1) El año seguido de un guión gráfico (un signo menos para que no la tipografía nerds) 2) El mes, seguidos por un guión figura 3) de la fecha 4) A mayúscula para indicar que vamos a especificar la hora local 5) La hora local en el formato hh: mm: ss 6) La zona horaria con respecto a GMT. Estoy en Dinamarca, que es de 1 hora después de GMT, por lo que escribo 01. Si usted estuviera en Colorado que sería de 7 horas GMT, y podría escribir -07. Marcar los Comentarios Marcar los comentarios es bastante sencilla. No hay nuevas etiquetas o atributos que se utilizan.

Comments

George Washington on June 29th 2009 at 23:35

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Benjamin Franklin on June 29th 2009 at 23:40

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Marcar el formulario para comentarios Varias mejoras en las formas se han introducido en HTML 5. Que ya no tienen que hacer validación en el cliente de los campos requeridos, correos electrónicos, etc El navegador se encarga de esto para usted.

Post a comment

Name

E-mail

Website

Comment

Hay nuevos dos nuevos tipos de entradas, correo electrónico y URL. Correo electrónico especifica que el usuario debe introducir una dirección de correo electrónico y URL que el usuario debe introducir una dirección web válida. Si se escribe como un atributo necesario, el usuario no puede presentar un campo vacío. "Obligatorio" es un atributo booleano, nuevo HTML 5. Sólo significa que el atributo es que se declare sin valor. Marcar la barra lateral y pie de página El marcado de la barra lateral y pie de página es muy simple. Algunos tramos con algo de contenido dentro de la correspondiente retirada de tierras y las etiquetas de pie de página. Usted puede ver el formato final, sin estilo aquí. Ahora, por el estilo. 6. Estilo con CSS 3 CSS 3 se basa en los principios sobre los estilos, selectores y la cascada que tan bien conocemos de versiones anteriores de CSS. Se añade un montón de nuevas características, incluyendo los nuevos selectores, pseudo-clases y propiedades. El uso de estas nuevas características se convierte en mucho más fácil para configurar su diseño. Vamos a zambullirse Configuración básica Para empezar vamos a definir algunas normas básicas relativas a la tipografía, el color de fondo de la página, etc Usted reconoce todo esto de CSS 2.1 /* CSS Reset */ { margin: 0; padding: 0; } /* Dicen que el navegador muestre los elementos HTML5 como el bloqueo */ header, footer, aside, nav, article { display: block; } body { margin: 0 auto; width: 940px; font: 13px/22px Helvetica, Arial, sans-serif; background: #f0f0f0; } h2 { font-size: 28px; line-height: 44px; padding: 22px 0; } h3 { font-size: 18px; line-height: 22px; padding: 11px 0; } p { padding-bottom: 22px; } En primer lugar, restablecer el margen y el relleno estilos, con una simple regla. En un entorno de producción que usaría un Reset CSS más completa, como Eric Meyer (de CSS 2.1) pero para el alcance de este tutorial esto va a hacer. Le decimos que el navegador muestre todos los nuevos elementos de HTML 5 como bloque. Los navegadores están muy bien con los elementos que no reconocen (por eso de HTML 5 es algo compatible), pero no saben cómo esos elementos deben ser prestados de forma predeterminada. Tenemos que decir esto hasta que la norma se aplica en todos los ámbitos. También tenga en cuenta lo que he elegido el tamaño de las fuentes de píxeles en lugar de ems o%. Esto es para mantener el carácter progresivo de la tutoría. Cuando los navegadores más importantes un día son completamente terminada la aplicación de HTML 5 y CSS 3 que todos tendrán acceso a la página de zoom en lugar de cambiar el tamaño de texto que se acaba. Esto elimina la necesidad de definir un tamaño en unidades relativas, como el navegador de la escala de la página de todos modos. Vea lo que la página se parece con el estilo básico que se aplica. Ahora podemos pasar a un estilo que el resto de la página. No hay estilos adicionales son necesarios para la cabecera, así que vamos a ir directamente a la navegación. 7. El estilo de la navegación Es importante tener en cuenta que la anchura de la carrocería se ha definido como 940px y que se ha centrado. Nuestra barra de navegación de las necesidades para abarcar todo el ancho de la ventana, así que tendremos que aplicar algunos estilos adicionales: nav { position: absolute; left: 0; width: 100%; background: url("nav_background"; } Hemos puesto el NAV-elemento absolutamente, alinear a la izquierda de la ventana y hacer que abarcan todo el ancho. Vamos a centrar la lista anidada para que se muestre dentro de los límites de la disposición: nav ul { margin: 0 auto; width: 940px; list-style: none; } Ahora vamos a definir algunos estilos adicionales para hacer que los elementos de navegación vea más bonita y alinearlos a la red se basa en el diseño. También he incluido un estilo para resaltar la página que el usuario está activado, y algunos un estilo personalizado para la suscripción de enlace. nav ul li { float: left; } nav ul li a { display: block; margin-right: 20px; width: 140px; font-size: 14px; line-height: 44px; text-align: center; text-decoration: none; color: #777; } nav ul li a:hover { color: #fff; } nav ul li.selected a { color: #fff; } nav ul li.subscribe a { margin-left: 22px; padding-left: 33px; text-align: left; background: url("rss.png" left center no-repeat; } 8. El estilo de la Introducción El marcado de la introducción es bastante simple: una sección con un título y un párrafo de texto. Sin embargo, vamos a utilizar algunos de los nuevos trucos de CSS 3 para que se vea más atractivo. #intro { margin-top: 66px; padding: 44px; background: #467612 url("intro_background.png" repeat-x; background-size: 100%; border-radius: 22px; } Estamos utilizando dos nuevas propiedades. El primero es el fondo de tamaño, lo que le permite escalar la imagen de fondo. En nuestro caso, se escala al 100% en ambos ejes. Si la caja se expande a medida que agregamos más contenido a la misma, el fondo degradado a escala también. Esto es algo que no era posible en CSS 2.1 no sin marcado semántico y diversos asuntos navegador. La segunda novedad es la propiedad border-radius, que se aplica esquinas redondeadas para el elemento. El radio de nuestro esquinas redondeadas son 22px en cada esquina. Usted puede especificar valores diferentes para cada esquina o elegir para redondear las esquinas sólo individual. Desafortunadamente, ninguna de las propiedades se aplican plenamente en los principales navegadores. Sin embargo, podemos obtener algún tipo de apoyo mediante el uso de atributos específicos del proveedor. Antecedentes de tamaño con el apoyo de las nuevas versiones de Safari, Opera y Konqueror. Border-radius se apoya en las nuevas versiones de Safari y Firefox. #intro { ... /* Antecedentes de tamaño aún no implementadas */ -webkit-background-size: 100%; -o-background-size: 100%; -khtml-background-size: 100%; /* Border-radius pendientes de aplicación */ -moz-border-radius: 22px; -webkit-border-radius: 22px; } Ya que tenemos un background-color definido, no habrá mayores problemas en los navegadores que no soportan el fondo de tamaño, como por ejemplo Firefox. Ahora sólo tenemos que el estilo del título y el texto. #intro h2, #intro p¬†{ width: 336px; } #intro h2 { padding: 0 0 22px 0; font-weight: normal color: #fff; } #intro p { padding: 0; color: #d9f499; } La imagen de la flor se pueden añadir fácilmente dando # intro una imagen de fondo en segundo lugar, algo que soporta CSS 3. #intro { ... background: #467612 url("intro_background.png" top left (287px 100%) repeat-x, url("intro_flower.png" top rightright (653px 100%) no-repeat; ... } Damos las dos imágenes de fondo dimensiones explícitas para asegurar que no se superpongan, y listo. Tenga en cuenta la notación abreviada de fondo de tamaño. Desafortunadamente, no hay ningún navegador fiable apoya esta, sin embargo, por lo que tendremos que hacerlo de la manera tradicional: mediante la inclusión de una imagen en línea y la posición que el uso de CSS. Vea el ejemplo final para ver cómo se ha hecho. 9. El estilo del área de contenido y Sidebar El área de contenido y la barra lateral van a estar alineados uno junto al otro. Tradicionalmente, podría hacer esto mediante el uso de flotadores, pero en CSS 3 que vamos a utilizar las tablas! "¿Qué? Tablas? ", Puede preguntar y mirada confusa. Es probable que aprendí hace años que el uso de tablas para maquetar web es una gran no-no, y lo sigue siendo. Usted nunca debe utilizar la tabla de elementos para marcar un diseño. Sin embargo, en CSS 3, podemos hacer que los elementos se comportan como las tablas sin que nunca muestran en el margen de beneficio! Para empezar, vamos a necesitar algunos divs a agrupar las secciones de una manera poco más lógico.

Todo lo que sigue teniendo sentido semántico, pero ahora podemos estilo de ella. Queremos que el div # contenido a comportarse como una mesa, el n º mainContent y aparte que en la tabla de las células. Con CSS 3, esto es muy fácil: #content { display: table; } #mainContent { display: table-cell; width: 620px; padding-right: 22px; } aside { display: table-cell; width: 300px; } Eso es todo! No más flotante, falso imágenes columna de fondo, compensación o colapso de los márgenes. Hemos hecho los elementos se comportan como una mesa, y esto hace que sea mucho más fácil para nosotros hacer el diseño. 10. El estilo de la publicación en tu blog El estilo de la cabecera del mensaje es más bien trivial, así que voy a pasar a la parte divertida: el diseño de varias columnas. varias columnas Varias columnas de texto antes era imposible sin manualmente la división del texto, pero con CSS 3 es un juego de niños, aunque hay que añadir un div en todo el varios párrafos para que esto funcione con los navegadores actuales.

Lorem ipsum dolor sit amet...

Pellentesque ut sapien arcu...

Vivamus vitae nulla dolor...

...

ahora podemos añadir dos propiedades simples y lo llaman un día. .blogPost div { column-count: 2; column-gap: 22px; } Queremos dos columnas y un espacio de 22px entre las columnas. El div adicional es necesario porque actualmente no hay manera de hacer compatible un lapso elemento más de una columna. En el futuro, sin embargo, usted será capaz de especificar la propiedad de la columna-span, y podemos escribir simplemente: .blogPost { column-count: 2; column-gap: 22px; } .blogPost header { column-span: all; } Por supuesto, las propiedades del número de columnas y columnas vacío-sólo son compatibles con algunos navegadores, Safari y Firefox. Tenemos que usar el proveedor de las propiedades específicas, por ahora. .blogPost div { /* Columna de conteo aún no implementadas */ -moz-column-count: 2; -webkit-column-count: 2; /* Column-gap aún no implementadas */ -moz-column-gap: 22px; -webkit-column-gap: 22px; } Box shadow Si te fijas bien en la imagen de la entrada en el blog verás una gota de sombra. Somos capaces de generar este uso de CSS 3 y la propiedad box-shadow. .blogPost img { margin: 22px 0; box-shadow: 3px 3px 7px #777; } El primer "3px" indica al navegador que queremos dejar a la sombra en sentido horizontal. El segundo "3px" le dice a donde queremos dejar la sombra vertical. El último "7px" es la forma borrosa la frontera debe ser. Si se establece en 0, será completamente sólido. Por último se define el color base de la sombra. Este color es, por supuesto, se desvaneció, en función de lo mucho que desenfoque la sombra. Probablemente no es ninguna sorpresa que esta propiedad no está implementada en todos los navegadores todavía. De hecho, sólo funciona en Safari, y usted tiene que utilizar la propiedad específica del proveedor. .blogPost img { margin: 22px 0; -webkit-box-shadow: 3px 3px 7px #777; } 11. Zebra-striping los Comentarios Zebra-striping, o resaltar todos los elementos segundo de una serie, siempre ha implicado la selección de todos los elementos a través de JavaScript, a continuación, recorrer a través de ellos y destacando todos los elementos extraños. CSS 3 introduce la pseudo-clase "nth-child", lo que lo hace ridículamente simple de hacer esto sin javascript. Vamos a utilizar para la cebra de banda de los comentarios. section#comments article:nth-child(2n+1) { padding: 21px; background: #E3E3E3; border: 1px solid #d7d7d7; /* Border-radius aún no implementadas */ -moz-border-radius: 11px; -webkit-border-radius: 11px; } El extraño valor "2n +1" es en realidad bastante simple si usted entiende lo que significa: 2n selecciona todos los elementos segundo. Si usted escribió 3n que se seleccione todos los elementos en tercer lugar, 4n cada cuarto punto, y así sucesivamente. El 1 indica al navegador que comienzan en el elemento 1. Si está familiarizado con la programación que usted probablemente sabe que todos los arreglos comienzan en 0, y esto también es cierto aquí. Esto significa que un elemento es en realidad el segundo elemento de la serie section#comments article:nth-child(odd) { ... } Dado que la norma incluye a los dos más utilizados los valores como forma abreviada, pares e impares. El resto del diseño comentario debe ser fácil de entender con sus nuevos conocimientos. El estilo del formulario de comentarios, Pie de página y la barra lateral Un par de CSS 3 técnicas se vuelven a utilizar en el diseño del formulario de comentarios, pie de página y la barra lateral. En el formulario de comentarios y el pie de página que he usado el mismo tipo de técnica de la tabla de diseño utilizadas en el diseño principal. En la barra lateral border-radius se utiliza para añadir esquinas redondeadas a las diferentes secciones. 12. El diseño final Ver el diseño final con todo el estilo aplicado. compatibilidad La página se representa correctamente en Safari 4 y los navegadores más recientes basados ??en WebKit, como es el motor de renderizado único que admite todas las técnicas de CSS 3 que hemos utilizado. Firefox 3 tiene algunos problemas de aplicación de las esquinas redondeadas a nuestra imagen de la flor y no es compatible con el fondo de tamaño, pero aparte de eso el diseño de las obras. He decidido hacer caso omiso de Internet Explorer, ya que requiere un poco de hacking para obtener HTML 5 para trabajar. También puede definir las reglas un poco más y conseguir que todo funcione en todos los navegadores importantes, pero todo esto está fuera del alcance de este tutorial. conclusión Cuando HTML 5 y CSS 3 es un día implementado en todos los navegadores que será mucho más fácil para crear sitios web. Finalmente será capaz de dejar de usar flotadores para el diseño (que nunca fueron destinados a ser utilizados para), y vamos a pasar mucho menos tiempo escribir Javascript para escalar nuestras imágenes de fondo o de cebra de banda nuestras mesas. Espero que podamos utilizar todo este tiempo extra para estudiar algunas áreas descuidado durante mucho tiempo de diseño de páginas web, como la optimización de front-end y arquitectura de la información adecuada. Espero que les pueda servir y ya saben, ante cualquier duda me mandan un MP!