Hola, Laneros!
He decidido crear este nuevo tema, por la necesidad de ampliar y compartir conocimientos, en cuanto al tema del diseño web Basado en CSS, compre un libro hace unos meses de CSS el cual me a servido mucho para reforzar mis conocimientos.
A continuación quiero escribirles algunas partes (por lo menos básicas) sacadas de dicho libro, me gustaria que este tema sea el Oficial del CSS, ya que hasta el momento no existe uno en Laneros (que yo sepa)
Las hojas de estilos en cascadas (Cascading Stylesheets) ofrecen propiedades para ampliar el lenguaje HTML en la representación visual de las páginas web. El lenguaje CSS definido por primera vez en el año 1996, es el mas conocido y utilizado para definir las propiedades de formato de los diferentes elementos HTML.
Este lenguaje permite vincular los documentos HTML con "plantillas de documento" (hojas de estilo o stylesheets), que además de contener la información topográfica de los elementos visuales de la pagina, permiten separar completamente la estructura de contenidos de su representación y presentación actuales, no solo en el monitor si no en cualquier pantalla imaginable (móvil, PDA, etc.), tecnología de soporte (lectores de pantalla, lineas en braille) o en papel impreso.
El propio lenguaje (X)HTML se ha visto reforzado para la construcción de las estructuras lógicas de la pagina. No obstante, todavía siguen siendo muchas las paginas web que se crean mediante diseño de tablas, a pesar de que las tablas jamas, fueron pensadas para esta finalidad. El porque de esta obstinada practica es sencillo:
Un diseño de tabla se puede crear muy facilmente con un editor WYSIWYG, sin necesidad de mucha experiencia ni conocimientos. No hace falta decir que el resultado no siempre resulta del todo convincente. Contrariamente, crear un diseño basado en CSS sin contar con los conocimientos necesarios, es algo mas difícil. Además, esta técnica no ha sido soportada ampliamente por los modernos navegadores hasta tiempos recientes. Actualmente, no obstante, hacer el cambio solo ofrece ventajas.
¿QUE APORTA SEPARAR LA ESTRUCTURA DEL DISEÑO?
Veamos a continuación algunas de las ventajas mas destacables a primera vista. Muchos de los puntos tratados ahora se verán con mas detalle en capítulos posteriores.
Menos código y mas transparente
En lugar del amasijo de instrucciones de formato y tablas de diseño anidadas en varios niveles, el código fuente de los documentos se compone ahora de bloques lógicos muy claros. Eso permite leerlos mejor y acortar drasticamente los tiempo de carga. y cargar rápidamente una pagina no es solo algo subjetivo si no también práctico, ya que nos da acceso inmediato al texto completo; en cambio, con una tabla HTML primero se han de leer todos los contenidos (incluidos los gráficos) antes de que aparezca nada en pantalla. Se podría argumentar que en la era del ADSL eso no es ningún problema. Pero piense: no todo el mundo tiene ADSL y, menos aun, a nivel internacional.
Facilita las actualizaciones
Al estar todas las instrucciones de diseño y formato en una hoja de estilo, fuera del documento HTML en sí, todas las modificaciones se puede realizar de una forma centralizada. Por lo tanto, ya no es necesario manipular el código fuente del documento vinculado.
E incluso la actualización de los contenidos en si es mas fácil gracias a la mejor legibilidad del código. Y eso tiene su importancia cuando los contenidos son manipulados por diferentes colaboradores nuevos. La nueva estructura semántica de los contenidos permite moverlos y reestructurarlos sin problemas, a diferencia de los contenidos incrustados en complicadas tablas creadas con varios niveles y a partir de criterios meramente ópticos.
Accesibilidad
Separar el contenido de la presentación es la base fundamental para conseguir paginas web mas accesibles y con menos obstáculos.
Puesto que la base de la pagina web es un documento perfectamente estructurado, se puede acceder a sus contenidos desde cualquier sistema de cualquier plataforma con las configuraciones básicas del sistema correspondiente, esto es, con la configuración por defecto del usuario en cuestión, sin ningún esfuerzo suplementario.
Por su puesto, también se puede facilitar una representación mas refinada para determinados aparatos y sistemas, por ejemplo, ofreciendo hojas de estilos especificas.
Usabilidad
CSS contiene muchas funciones y métodos con los que proporciona funciones ampliadas a sus visitantes. Por ejemplo, elementos ópticos de navegación o un tipo de representación alternativa conforme a los deseos y necesidades de sus visitantes o grupos de visitantes.
Buscadores
El menor código fuente y la estructura ordenada también hacen mas fácil y rápido la lectura con los robots de búsqueda. Las palabras claves mas importantes en textos y títulos se procesan conjuntamente y no hay peligro, por tanto, de que el buscador tire la toalla en el enésimo anidamiento de la tabla.
El factor de los costos
Las ventajas económicas quedan claras ya en los puntos mencionados hasta ahora. Uno ahorra, sobre todo, tiempo en todos los procesos.
Los contenidos se pueden crear conjuntamente para todos los documentos sin preocuparse del formato y la forma. Las hojas de estilo se crean y mantienen de manera centralizada. Cualquier colaborador, ajeno a la creación de los mismos documentos, puede realizar sin problemas las modificaciones, actualizaciones e incluso el total relanzamiento de los mismos.
El código fuente al ocupar un espacio mínimo, representa un ahorro inmediato, especialmente en los sitios web de muchas paginas, donde el costo del trafico de datos se vera reducido drasticamente.
Hechos
Es evidente que las paginas desarrolladas conforme a un estándar y con reducción máxima de barreras, transmiten una imagen de negocio inteligente. ¿Porque renunciar a amplio numero de clientes potenciales, o a una pagina mas rápida, con un mejor ranking en los buscadores? y, por su puesto, también conseguirá mayor efecto en el publico en general, ya que se correrá la voz de que su pagina es muy facil de manejar, la información de los productos se encuentran facilmente, y nadie se ve excluido por tener un navegador "inadecuado".
Si alguien le interesa comprar el libro.. se llama Diseño web con CSS, de Ralph G. Schulz. lo encuentran en cualquier librería.
Ahora algunos enlaces interesantes.
Algunas chuletas de CSS http://www.abreo.co/css/chuletas/
Validador de CSS http://jigsaw.w3.org/css-validator/
¿Colocar tu logo como img, como background o como h1? http://www.elwebmaster.com/articulos/¿colocar-tu-logo-como-img-como-background-o-como-h1#more-12064
Chuleta CSS en Español
Algunos datos
Hay que aclarar que las clases se diferencian por un .(punto), los ID por el signo #, y los tags sin ningun prefijo, ejemplo:
--------------------------
La idea es que usemos este foro para debatir cosas sobre css.. hacer preguntas, pedir ayudar, dar ayuda... Si tienes Tips, enlaces, o demas informacion que creas necesaria que valla en el topic principal, con gusto la postean y la voy incluyendo... asi hacemos una guia bien chevere... por el momento abro este foro asi.. pero con los dias ire metiendole mas info al post principal... osea este
asi vamos puliendo entre todos y aprendemos mucho mas...
Espero que apoyen la idea, es hora de olvidarnos de las TABLAS... hay un nuevo mundo de DIVs por descubrir
Desde ya les ofresco mi ayuda a todo el que la necesite, no soy experto en css, pero creo que lo poco que se, es suficiente para guiar a algunos que se inician...
Pues nada, Feliz 2011, que una de sus metas sea el dominio de CSS para fin de año, te lo propones?
Saludos!
He decidido crear este nuevo tema, por la necesidad de ampliar y compartir conocimientos, en cuanto al tema del diseño web Basado en CSS, compre un libro hace unos meses de CSS el cual me a servido mucho para reforzar mis conocimientos.
A continuación quiero escribirles algunas partes (por lo menos básicas) sacadas de dicho libro, me gustaria que este tema sea el Oficial del CSS, ya que hasta el momento no existe uno en Laneros (que yo sepa)
Las hojas de estilos en cascadas (Cascading Stylesheets) ofrecen propiedades para ampliar el lenguaje HTML en la representación visual de las páginas web. El lenguaje CSS definido por primera vez en el año 1996, es el mas conocido y utilizado para definir las propiedades de formato de los diferentes elementos HTML.
Este lenguaje permite vincular los documentos HTML con "plantillas de documento" (hojas de estilo o stylesheets), que además de contener la información topográfica de los elementos visuales de la pagina, permiten separar completamente la estructura de contenidos de su representación y presentación actuales, no solo en el monitor si no en cualquier pantalla imaginable (móvil, PDA, etc.), tecnología de soporte (lectores de pantalla, lineas en braille) o en papel impreso.
El propio lenguaje (X)HTML se ha visto reforzado para la construcción de las estructuras lógicas de la pagina. No obstante, todavía siguen siendo muchas las paginas web que se crean mediante diseño de tablas, a pesar de que las tablas jamas, fueron pensadas para esta finalidad. El porque de esta obstinada practica es sencillo:
Un diseño de tabla se puede crear muy facilmente con un editor WYSIWYG, sin necesidad de mucha experiencia ni conocimientos. No hace falta decir que el resultado no siempre resulta del todo convincente. Contrariamente, crear un diseño basado en CSS sin contar con los conocimientos necesarios, es algo mas difícil. Además, esta técnica no ha sido soportada ampliamente por los modernos navegadores hasta tiempos recientes. Actualmente, no obstante, hacer el cambio solo ofrece ventajas.
¿QUE APORTA SEPARAR LA ESTRUCTURA DEL DISEÑO?
Veamos a continuación algunas de las ventajas mas destacables a primera vista. Muchos de los puntos tratados ahora se verán con mas detalle en capítulos posteriores.
Menos código y mas transparente
En lugar del amasijo de instrucciones de formato y tablas de diseño anidadas en varios niveles, el código fuente de los documentos se compone ahora de bloques lógicos muy claros. Eso permite leerlos mejor y acortar drasticamente los tiempo de carga. y cargar rápidamente una pagina no es solo algo subjetivo si no también práctico, ya que nos da acceso inmediato al texto completo; en cambio, con una tabla HTML primero se han de leer todos los contenidos (incluidos los gráficos) antes de que aparezca nada en pantalla. Se podría argumentar que en la era del ADSL eso no es ningún problema. Pero piense: no todo el mundo tiene ADSL y, menos aun, a nivel internacional.
Facilita las actualizaciones
Al estar todas las instrucciones de diseño y formato en una hoja de estilo, fuera del documento HTML en sí, todas las modificaciones se puede realizar de una forma centralizada. Por lo tanto, ya no es necesario manipular el código fuente del documento vinculado.
E incluso la actualización de los contenidos en si es mas fácil gracias a la mejor legibilidad del código. Y eso tiene su importancia cuando los contenidos son manipulados por diferentes colaboradores nuevos. La nueva estructura semántica de los contenidos permite moverlos y reestructurarlos sin problemas, a diferencia de los contenidos incrustados en complicadas tablas creadas con varios niveles y a partir de criterios meramente ópticos.
Accesibilidad
Separar el contenido de la presentación es la base fundamental para conseguir paginas web mas accesibles y con menos obstáculos.
Puesto que la base de la pagina web es un documento perfectamente estructurado, se puede acceder a sus contenidos desde cualquier sistema de cualquier plataforma con las configuraciones básicas del sistema correspondiente, esto es, con la configuración por defecto del usuario en cuestión, sin ningún esfuerzo suplementario.
Por su puesto, también se puede facilitar una representación mas refinada para determinados aparatos y sistemas, por ejemplo, ofreciendo hojas de estilos especificas.
Usabilidad
CSS contiene muchas funciones y métodos con los que proporciona funciones ampliadas a sus visitantes. Por ejemplo, elementos ópticos de navegación o un tipo de representación alternativa conforme a los deseos y necesidades de sus visitantes o grupos de visitantes.
Buscadores
El menor código fuente y la estructura ordenada también hacen mas fácil y rápido la lectura con los robots de búsqueda. Las palabras claves mas importantes en textos y títulos se procesan conjuntamente y no hay peligro, por tanto, de que el buscador tire la toalla en el enésimo anidamiento de la tabla.
El factor de los costos
Las ventajas económicas quedan claras ya en los puntos mencionados hasta ahora. Uno ahorra, sobre todo, tiempo en todos los procesos.
Los contenidos se pueden crear conjuntamente para todos los documentos sin preocuparse del formato y la forma. Las hojas de estilo se crean y mantienen de manera centralizada. Cualquier colaborador, ajeno a la creación de los mismos documentos, puede realizar sin problemas las modificaciones, actualizaciones e incluso el total relanzamiento de los mismos.
El código fuente al ocupar un espacio mínimo, representa un ahorro inmediato, especialmente en los sitios web de muchas paginas, donde el costo del trafico de datos se vera reducido drasticamente.
Hechos
Es evidente que las paginas desarrolladas conforme a un estándar y con reducción máxima de barreras, transmiten una imagen de negocio inteligente. ¿Porque renunciar a amplio numero de clientes potenciales, o a una pagina mas rápida, con un mejor ranking en los buscadores? y, por su puesto, también conseguirá mayor efecto en el publico en general, ya que se correrá la voz de que su pagina es muy facil de manejar, la información de los productos se encuentran facilmente, y nadie se ve excluido por tener un navegador "inadecuado".
Si alguien le interesa comprar el libro.. se llama Diseño web con CSS, de Ralph G. Schulz. lo encuentran en cualquier librería.
Ahora algunos enlaces interesantes.
Algunas chuletas de CSS http://www.abreo.co/css/chuletas/
Validador de CSS http://jigsaw.w3.org/css-validator/
¿Colocar tu logo como img, como background o como h1? http://www.elwebmaster.com/articulos/¿colocar-tu-logo-como-img-como-background-o-como-h1#more-12064
Chuleta CSS en Español
Algunos datos
Hay que aclarar que las clases se diferencian por un .(punto), los ID por el signo #, y los tags sin ningun prefijo, ejemplo:
Código:
p { margin: bottom;}
Código:
.prueba { margin: bottom;}
Código:
#prueba { margin: bottom;}--------------------------
La idea es que usemos este foro para debatir cosas sobre css.. hacer preguntas, pedir ayudar, dar ayuda... Si tienes Tips, enlaces, o demas informacion que creas necesaria que valla en el topic principal, con gusto la postean y la voy incluyendo... asi hacemos una guia bien chevere... por el momento abro este foro asi.. pero con los dias ire metiendole mas info al post principal... osea este
asi vamos puliendo entre todos y aprendemos mucho mas...Espero que apoyen la idea, es hora de olvidarnos de las TABLAS... hay un nuevo mundo de DIVs
por descubrir Desde ya les ofresco mi ayuda a todo el que la necesite, no soy experto en css, pero creo que lo poco que se, es suficiente para guiar a algunos que se inician...
Pues nada, Feliz 2011, que una de sus metas sea el dominio de CSS para fin de año, te lo propones?
Saludos!
![[sC+].JotaDe](https://cdn.laneros.net/data/avatars/s/227/227078.jpg?1446761140){kind=avatar}
