Comprensión de HTML5 y CSS3 para Diseño Web

Comprensión de HTML5 y CSS3 para Diseño Web
03 Jul 2012

La etiqueta de Navegación

Se trata de un área a menudo pasada por alto de HTML5En resumen, usted siempre debe tratar de envolver las conexiones pertinentes en navegación (“<nav>”) etiquetas. No parece mucho, pero viene en su propio elemento si tenemos en cuenta las perspectivas de SEO para su sitio web.

La etiqueta de Navegación

SEO (search engine optimization) es en asegurarse de motores de búsqueda populares, por lo general de Google, recogerá su sitio web en sus listados. Cuanto más alto aparece en esta lista, más tráfico en línea, es probable que reciba y el negocio más que puede esperar.

Google mira a los enlaces internos para ayudar a determinar qué consultas de búsqueda que debe ser encontrado. Enlaces en la navegación es probable que sean una buena indicación de que los rastreadores y el uso de la etiqueta de navegación significa que usted está diciendo de forma explícita “estos son los eslabones más importantes en el sitio web” y ayudar a los robots a entender lo que su sitio se trata. Esto no significa que usted será penalizado por no usar una etiqueta de navegación, pero usted debe tratar de hacer todo lo posible para ayudar a los rastreadores de motores de búsqueda en cualquier forma que pueda.

Los encabezados y pies de página

Estas etiquetas son bastante simples, pero tienen un propósito importante. Los encabezados y pies de página (“<header>” y “<footer>”, respectivamente) funcionan bien con SEO. Las etiquetas separar la cabecera y los elementos de pie de página de la copia principal.

Encabezados

Pie de página

Encabezado y pie de página son a la vez diferente a la de un <div> simple como, al ser identificado como algo diferente, los motores de búsqueda son capaces de diferenciar la información de otros contenidos y clasificar su sitio web en consecuencia.

Vídeo, Audio y salida

Multimedia es cada vez más popular entre los usuarios y se han ido los días en que los visitantes sólo pueden consumir la información por texto. Etiquetas para vídeo (“<video>”) y audio (“<audio>”) son fáciles de implementar y HTML5 permite una personalización completa con JavaScript y varios codecs – así que usted puede conseguir fácilmente el contenido de trabajo de la manera deseada.

Vídeo, Audio y salida

De manera similar, HTML5 utiliza de salida (“<output>”) etiquetas para una mejor personalización. Por la salida de JavaScript, puede editar con mayor comodidad y modificar lo que sea activar los elementos que tienes en la página, en lugar de intentar hacerlo a través de HTML. Suena bastante simple y lo que realmente hace el proceso mucho más fácil de completar.

 Vídeo, Audio y salida

Artículos

Ofrece a sus visitantes una elección en la forma de consumir su contenido es importante si desea neto en todos los diferentes tipos de consumidores. Para los amantes de un buen artículo, no es la etiqueta de artículo (“<article>”).

Los desarrolladores pueden utilizar la etiqueta del artículo para marcar las piezas individuales de contenido, como una entrada de blog, lo que reduce la necesidad de un sinfín de etiquetas Div. Además separando el texto principal de un sitio web después de que su encabezado y pie de página antes de su uso de la etiqueta del artículo significa un código más claro y el potencial de optimización para motores de búsqueda.

La etiqueta del artículo es probablemente una de las etiquetas más útiles en términos de SEO. Aunque nada está escrito en piedra hasta el momento, es probable que los rastreadores de motores de búsqueda a utilizar estas etiquetas para entender el contenido de su sitio y peso en el algoritmo en consecuencia.Google ama el contenido y por envolver el texto en una etiqueta del artículo, usted está diciendo a Google que tienen un contenido en el sitio, lo que ayudará a su sitio de más alto rango. También podría ser que las palabras clave y texto de anclaje dentro de la etiqueta del artículo se ponderan más que las palabras clave fuera de la etiqueta del artículo que usted está diciendo a los robots de los motores de búsqueda que usted ha escrito el contenido específico sobre el término de búsqueda. Usted también puede ayudar a sus esfuerzos de SEO, dando el título del artículo (“<title>”) atribuye por la misma razón.

Artículos

Lienzo

Se utiliza para insertar gráficos diversos, etiquetas de tela (“<canvas>”) son una característica más moderno de HTML 5. Esto permite una mayor personalización en el diseño, como etiquetas específicas pueden envolver en los destinados gráficos, imágenes o gráficos van a hacer más clara su diseño de página web y su código menos desordenada.

Lienzo

Figuras y Títulos

Estos dos van de la mano y hace un largo proceso mucho más corto. Mediante el uso de una etiqueta de figura (“<figure>”) se puede aislar un gráfico o una imagen. Un subtítulo (“<figcaption>”) etiqueta puede ser usada para proporcionar texto de subtítulos para la cifra concreta. Esto hace que la tarea de combinar el texto en cuestión con la imagen mucho más fácil, ya que las etiquetas de título ayudar a determinar dónde debe estar el título (cerca de la imagen, obviamente).

Figuras y Títulos

También puede usar las siguientes etiquetas en los propósitos similares a los encabezados, pies de página, los artículos y secciones.

Detalles

Si usted no ha oído hablar de esto, es porque todavía no es una característica principal sino que, sin embargo cada vez más y más común. En pocas palabras, los detalles (“<details>”) permite la fácil caída de abajo el texto que debe incluirse. Vea un ejemplo de trabajo aquí  .

Los beneficios de la lista desplegable de texto son muchas. Se puede guardar las páginas en busca de desordenado, para que pueda centrarse únicamente en mantener la información pertinente sobre la página. Incluso se puede capturar el número de usuarios buscaron más información con un poco de JavaScript y ajustar sus esfuerzos de marketing basadas en los datos.

Utilizando CSS3

Cascading Style Sheets o CSS, es un lenguaje de hojas de estilo que se puede utilizar junto con HTML5. CSS2 es utilizado actualmente por el Consorcio World Wide Web (conocido como W3C) – una organización que valida lo mejor de lo que los códigos se utilizan en línea. La última versión estable de su desarrollo de la CSS fue en 2010. Sin embargo, el W3C está trabajando en la adopción de CSS3, varios de los módulos ya están aprobados.

CSS3 le permite centrarse más en el lado de la presentación de la página web, dejando a HTML5 para la estructura general. CSS3 ofrece los últimos avances en el tipo de letra, color y diversos antecedentes y las características de la frontera.

Sin embargo, debe tenerse en cuenta que no todos los navegadores son compatibles con CSS3. Algunos son eficaces con ciertos módulos, mientras que otros no lo son. Firefox, por ejemplo, en la actualidad no pueden soportar las reflexiones. Safari y Chrome, por el contrario, apoyar a todo, excepto el desplazamiento de desbordamiento, por desgracia, no hay ningún navegador web más importantes en la actualidad acepta este módulo.

En la parte inferior de la escala, Internet Explorer admite módulos de muy pocos, aunque las versiones más recientes están mostrando una mejora en este sentido. He aquí un cuadro detallado de la compatibilidad con exploradores para CSS3.

Selectores de pseudo clase y atributos

Selectores de pseudo clase puede ser utilizado para agregar información adicional de las características de las etiquetas y divisiones. Son fácilmente reconocibles, ya que están precedidos por dos puntos. Pase el ratón, por ejemplo, es un selector simple que puede agregar texto de la pantalla cuando el ratón sobre una etiqueta determinada.

En CSS3, que son capaces de definir el directorio raíz (“root:”) elemento en un documento. En HTML, esto siempre ha sido “<html>”, pero la característica es ahora más en gran medida aparece en CSS3. Selectores CSS3 adicionales de clase en permitir un mayor control de partido entre los hermanos. Esto viene junto con una mayor flexibilidad que permite mayores funciones entre los elementos relacionados. Esto hace que el proceso sea más intuitiva e interconectado, con lo que el resultado global mucho más impresionante.

Selectores de pseudo clase y atributos

Selectores de pseudo clase y atributos

Del mismo modo, nuevos selectores de atributos le dará un mayor control sobre diferentes partes específicas de sus elementos. Puede comprobar si hay coincidencias con otros elementos, o asignar atributos para crear este efecto. El siguiente formato se utiliza para seleccionar los atributos: “el elemento [^ att = val]”

Así, un ejemplo real podría ser:

Atributos Atributos

Este selector se encuentra ningún párrafos “<p>”) con un título (“<title>”) que comienza con el atributo (“^”) SEO (“” SEO “”) y cambia el color del texto a azul (” color: blue; “)

Subcadena coincidente Selectores de atributos

Ya me he referido en el poder de CSS3 con el selector de atributo correspondiente subcadena comienza con (“^”). En realidad, puede utilizar los “termina en” subcadena de selección (“$”) y el “contiene” subcadena de selección (“*”) para limitar los atributos de lo que se selecciona para el estilo.

HTML5-CSS3

Fuente: http://designmodo.com/html5-css3-web-design/#ixzz1zW0C5hkU

 

Share

Diseño Páginas Web

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (No Ratings Yet)
Cargando…

Comentarios

  1. Itˇs really a great and useful piece of info. I am satisfied that you simply shared this useful information with us. Please stay us up to date like this. Thank you for sharing.

  2. […] Comprensión de HTML5 y CSS3 para Diseño Web | Diseño Web CSS3Ps – free cloud based photoshop plugin that converts layers to CSS3 styles. CSS clear property All of my templates are free for any personal or commercial use (provided you follow the license) so you do not have to pay me anything to use them. All I ask is that you link back to my website (see the license for more details). I update my site with new templates regularly so check back for even more free CSS templates. Have fun 🙂 <p style="text-align:right;color:#A8A8A8">Read more</p> […]

Comentarios están cerrados