 |
CSS Semánticas, un nuevo enfoque (I)
De: José Juan Corpas  | Publicado: 27-07-2007 | Comentarios: 0 | Vistas: 108 | Rating: (127)  (?)
Introducción
Existen infinidad de sitios en Internet que ofrecen miles de propuestas diferentes a la hora del uso de hojas de estilo CSS en la maquetación de portales web, como sabemos aplicables a múltiples tecnologías: XHTML, Flash, etc...
Lo que es difícil de encontrar es aquella solución que se adapte perfectamente a tus desarrollos, a tu entorno concreto. Quizá más difícil aun es adecuar algún enfoque similar al tuyo. Esta tarea es proclive a múltiples errores, que irán saliendo conforme se vaya utilizando y que llegado el momento, podemos comprobar que nos hemos equivocado de base, lo que exige una reestructuración desde el inicio.
Este es el contexto en el que nos encontramos actualmente. Tras una fuerte apuesta por la reestructuración y organización de CSS basadas en su semántica de uso se ve que si es quizá uno de los enfoques más acertados, deja bastantes puntos abiertos que es necesario concretar. Esa es la tarea que nos proponemos aquí.
Para los no iniciados, comentar que el enfoque semántico se basa en la idea de que la manera de estructurar la información relativa a la capa de presentación de nuestros proyectos web debe de seguir el criterio de qué es y el contexto donde se usa cada elemento.
El entorno web tiene una característica fundamental que pocos otros tienen y es la capacidad y potencialidad de uso en múltiples tipos de dispositivos, lo cual nos abre aun más el abanico de puntos que debemos controlar a la hora de crear nuestras hojas de estilos, a la vez que multiplica la casuística y potenciales errores que es necesario controlar.
Aquí trataremos de dar una posible solución que se adecue a los principios de CSS semántica y que siga las pautas de accesibilidad y de facilidad de extensión a múltiples dispositivos.
Puntos a tener en cuenta
Estructura jerárquica de las CSS
Nuestras hojas de estilo seguirán una estructura jerárquica, cuyo elemento principal será el que incluya, para cada tipo de dispositivo, las hojas de estilo correspondientes.
Explicación de cada una de las hojas de estilo
- Pantalla.css, Impresora.css y Movil.css. Estas son CSS específicas para cada tipo de dispositivo. Su misión en la parte superior de la jerarquía es la importación de las CSS hijas (@import url("...css") ). No incluyen estilos concretos.
- LayoutPantalla.css, LayoutImpresora.css y LayoutMovil.css. Incluyen la información relativa a las diversas capas que forman el layout de la página, es decir, información de maquetación de las distintas zonas del portal (Banner, menús, contenidos, créditos, ...)
- CrossBrowser.css. Aglutina trucos, fixes y demás elementos para hacer que las páginas se vean igual en todos los navegadores (Internet Explorer, Mozilla, Firefox, Opera, etc.)
- Tipografía.css. Cualquier elemento relacionado con las forma en que se presenta la tipografía de la página queda recogida aquí.Comienza con una medida relativa de 62.5% en la etiqueta body, que se establece como medida equivalente a 1em. El resto de tamaños vendrán supeditados a este (mayores: 1.2em, 1.5em, etc..., y menores: 0.8em, 0.5em, etc.)
- Formularios.css. Definición de los estilos aplicables a todas las etiquetas relacionadas con los formularios genéricos.
Documentos asociados a este artículo
Si quieres seguir leyendo sobre este tema... CSS Semánticas. Un nuevo enfoque (y II)
Puntaje:
Current: 0 / 5 stars - 0 vote(s).
Fuente: Artículos Gratuitos Online de Articuloz.com
|
Publicar artículos se ha convertido en uno de los medios más populares para generar vínculos de retroceso de calidad, así como tráfico dirigido a tu sitio Web. Únete hoy mismo: ¡es gratis! |
|
Artículos Relacionados
CSS Semánticas, un nuevo enfoque (y II)
De: José Juan Corpas | 27/07/2007 | Internet
Continuación de CSS semánticas. Un nuevo enfoque, y trata de dar una serie de consejos o recomendaciones a la hora del uso de hojas de estilo y escritura de código XHTML.
Posicionamiento complejo con capas
De: José Juan Corpas | 16/11/2007 | Diseño digital
El día que a alguien se le ocurrió que se debía dejar de maquetar con tablas, más de uno dejó la profesión. Accesibilidad… qué es eso?
Bromas a parte, todos sabemos ya que nuestros diseños tienen que ser accesibles por muchos motivos, incluso por posicionamiento de nuestros contenidos, así que de una manera y otra nos hemos decidido a seguir estas pautas
La Web 2.0: nuevos retos para el posicionamiento en Internet
De: Fernando Maciá | 17/12/2007 | Marketing en Internet
La revolución de la Web 2.0 exige hoy ampliar la perspectiva y abrirse a las nuevas tendencias en donde los consumidores adquieren un papel mucho más activo. Y aunque los buscadores siguen jugando un papel fundamental en la generación de tráfico cualificado, hay que aprender a gestionar una mayor variedad de actores, escenarios y tramas de relaciones en donde las redes sociales están adquiriendo un inusitado protagonismo.
Arquitectura de Foros
De: Vseo | 09/01/2008 | SEO
Bases para establecer la arquitectura de los foros, las relaciones con el contenido y crosslinking con diferentes estructuras de la página como parte de la cadena de valor de un foro.
Si No Tienes Una Web 2.0,Està Dando Mala Imàgen
De: David Avila Martìn | 13/03/2008 | Alojamiento de páginas Web
Imagen Diseño Marqueting Web on Line
Ventajas de la web 2.0
De: Pi Medios | 12/02/2008 | Otro
En este artículo se analizará qué es eso de la "web 2.0", cuales son sus ventajas y algunos ejemplos, que ayudarán a tener más claro el concepto y a sacar un mayor rendimiento en la web.
Más de José Juan Corpas
Posicionamiento complejo con capas
De: José Juan Corpas | 16/11/2007 | Diseño digital
El día que a alguien se le ocurrió que se debía dejar de maquetar con tablas, más de uno dejó la profesión. Accesibilidad… qué es eso?
Bromas a parte, todos sabemos ya que nuestros diseños tienen que ser accesibles por muchos motivos, incluso por posicionamiento de nuestros contenidos, así que de una manera y otra nos hemos decidido a seguir estas pautas
CSS Semánticas, un nuevo enfoque (y II)
De: José Juan Corpas | 27/07/2007 | Internet
Continuación de CSS semánticas. Un nuevo enfoque, y trata de dar una serie de consejos o recomendaciones a la hora del uso de hojas de estilo y escritura de código XHTML.
|
|
Internet 
