CSS-P ? sin tablas ? en diseño comercial
Esto va dedicado a todos los que opinan que CSS es complicado, que no funciona, que comercialmente no es válido, que no sirve para nada, que sólo tiene fallos, que no vale la pena aprenderlo, etc.:
Mike Davidson ha sido el responsable del rediseño de ESPN.com ? ESPN es una compañía estadounidense sobre deportes que tiene canales de televisión, radio, magazine, etc. ?, que se ha hecho mediante CSS-P ? CSS Positioning ?, es decir, sin tablas.
Netscape DevEdge publica una entrevista ? en dos partes ? en la que se habla sobre el porqué y el cómo, y se dan muchos datos que vienen a romper algunos mitos sobre el CSS-P
<fieldset>For the month before our redesign, we calculated that 97.44% of our users were using standards-compliant browsers (IE 5+, Netscape 6+, Mozilla, Opera 6+, Safari, Chimera, and Konqueror), and the rest were either non-detectable or using non-compliant browsers. The only substantial groups among the non-compliant browsers were IE 4.x at 1.32% and Netscape 4.x at 1.17%.</fieldset>
Podéis leer la entrevista en Netscape DevEdge.
loopecio
Bueno, pero yo me pregunto, que ventajas tiene? Por que a mi me ha tardado bastante en cargar, y aparentemente solo hace que imitar el diseño con tablas, no me resulta innovador ..
a ver si me lo explicas, por que no llego a entender como rula ese método.
iworkwithyou
diseñar solo con CSS dejando el contenido "libre" es bueno por muchas razones.
Mira este articulo: http://www.alzado.org/articulo.php?id_art=148
Accesibilidad: la separación de forma y contenido permite acceder a las personas con discapacidades a los contenidos de un sitio.
Menor cantidad de código que redunda en menores tiempos de carga: Jugando con el posicionamiento es posible presentar unas partes del contenido antes que otras dando aún mayor sensación de velocidad.
Mantenimiento: el cambio de aspecto del sitio resulta mucho más sencillo al estar todas las normas de presentación ubicadas en un punto único: las hojas CSS.
Posibilidad de control por parte del usuario: como en el caso de Wired o IHT, se deja al usuario el control y la apariencia del contenido: maquetación en columnas, tamaño y color de fuentes haciendo su uso más cómodo.
Futuro: La maquetación con tablas es cosa del pasado. Si todos los fabricantes se han dado cuenta de la importancia de los estándares y los adoptan, estamos garantizando una viabilidad a largo plazo de nuestros trabajos. Hay que ponerse sobre el camino adecuado.
Gestión: el contenido se presenta agrupado basándose en criterios lógicos gracias a la utilización de etiquetas div, pudiendo presentarse un módulo de contenidos con diferentes aspectos según la página desde la que es llamado o incluso no presentarlo.
cø
<em>César se me ha adelantado, aún así publico lo que estaba escribiendo, porque creo que repite algunas cosas de las que él dice ? que son importantes ? y amplía otras.</em>
Bueno, el CSS-P es un movimiento que avanza en dos frentes: la filosofía y la técnica.
Filosóficamente, el CSS-P es una aproximación mayor a la web semántica, permite dejar de usar todas las etiquetas de presentación en (X)HTML ? que están todas deprecated ? y tener un código válido, dejando de lado el uso anacrónico de las tablas, que no son más que un sucio truco que se popularizó en un momento en que la web era un caos, permite separar contenido de presentación, que además de formar parte del buen uso de los códigos, es más cómodo a la hora de transformar los documentos, etc.
Técnicamente, en un sentido más práctico: en la entrevista Mike Davidson dice cinco ventajas: el código pesa menos, mayor control de la presentación y posición de los elementos de los documentos, mayor control de la presentación por parte del usuario, y el hacer las cosas bien, que no sólo es filosofía, sinó que también forma parte de la idea de la Forward Compatibility ? compatibilidad hacia adelante ? que, en contra de lo que proponía la Backward Compatibility ? que era lo que se hacía antes con las webs: adaptar el código con tablas, hacks y trucos de lo más sucio para que funcionara en navegadores antiguos ?, propone un desarrollo de código que además de permitirnos usar todas las ventajas actuales, sea válido cuando estas ventajas se amplíen.
En la entrevista también se dice que una de las razones para descartar Netscape 4.x es poder generar contenido dinámicamente: el código válido tiene muchas ventajas respecto al código sucio en el uso de JavaScript/ECMAScript y DOM ? intenta buscar un elemento con DOM si tienes una tabla dentro de otra tabla dentro de un span dentro de otra tabla... ?, porque JS ya no es ese inventillo cutre para hacer chorradas que era diferente en cada navegador, sinó que están definidos unos estándares que funcionan.
Evidentemente, para el desarrollo de la página personal de Pedro García, o la web corporativa de Frutería Hnos. Díaz, no es necesario todo esto, y se convierte en una opción. Pero para la creación de webs más complejas, o para trabajar codo con codo con un equipo de programadores, es vital empezar a tener una visión un poco realista de lo que es el (X)HTML que vaya más allá de DreamWeaver.
iworkwithyou
no veo tu contacto en la web que tienes con tus diseños...
sobre tu portfolio solo una cosa, tienes cosas mucho mejores al final que al principio... yo casi miraria de mover el orden.
felicidades por el trabajo.
cesar.
cø
César, gracias por el feedback.
Hay un e-mail de contacto en la última página.
Los trabajos están ordenados por orden cronológico. La intención de ponerlo así y con un sistema de adelante y atrás, es hacer más evidente la evolución.
De todas maneras el book actual es sólo una actualización para mantener viva la web. El trabajo real de ese book es la selección y presentación de los trabajos, que se va a usar en la versión que irá dirijida a las empresas con los datos de todos los trabajos y mi cv personal.
Lo único que creo que falla en el book, es que al no saber cuántos trabajos hay, puede que haya gente que no llegue hasta el final. Pero de todas maneras repito, es sólo una muestra ? probablemente temporal ?.
Usuario desconocido
Informaros que la nueva versión de InfoJobs que estoy haciendo apenas tiene imágenes la interfaz... ME LO HAN PROHIBIDO por lo tanto me veo obligado a trabajar exclusivamente en CSS.
La ventaja que tiene es que permite hacer cambios en toda la web en un "pim, pam, pum, bocadillo de atún" :)
Tambien decir que ESPN no creo que sea un modelo a seguir de usabilidad ni mucho menos...
Usuario desconocido
Perdón me he confundido, creí que se hablavais de estilos CSS
Josh
De todas formas el reto de trabajar con tableless y css no es hacer páginas de ancho fijo sino de contenido fluido (fluid layout). Eso es lo realmente jodido.
Usuario desconocido
Puaj! Odio las páginas a 100% de ancho... quedan muy poco profesionales la gran mayoría...
cø
Buen propósito del dia: como creadores, deberíamos dejar de tener prejuicios y analizar más los hechos concretos.
De buen rollo... :)
deiavu
Tu lo dices, fuera prejuicios.
Este tema me parece realmente interesante... algun link con +info para dinosaurios de la tabla?. Llevo (llevamos) usandolas demasiado... los engranajes chirrian... otra vez a empezar de cero... en el fondo es bonitop
joshuatree
Ya lo decia el Jeffrey Veen hace un par de años. Y ponia el ejemplo del uso de CSS en las paginas del Hotbot. To lo q ha dicho cø lo repetia este tio en su libro. Pues dos personas no pueden estar equivocadas ;)
Lo de los diseños fluidos, disiento contigo creatiu, hermano mio: Hay cosas deslumbrantes, como esta o sino esta otra, q son para quitarse el sombrero. Y aun recuerdo la de cdnow anterior a la actual, q me ha parecido bellisima, lastima q ahora ha cambiado.
Opino.
loopecio
Pues estoy con Deiavu, me interesa muhco el tema, pero no se si soy muy tonto o que, pero me cuesta hacerme la idea de como debe de ser la técnica.. Pero no me rindo. Voy a ver si pillo un 'caso práctico' de eso y le paso el bisturí a ver como rula.
MUChAS GRACIAS POR LA INFO.
cø
Pues la verdad es que recursos exclusivamente de CSS hay pocos... en español creo que ninguno.
Yo aprendí de la manera más bestia: con las especificaciones del W3C ? no recomendable ?.
Creo que ya lo he repetido algunas veces, pero además de la web de Eric Meyer, el weblog de Diego Lafuente ? que muy de vez en cuando toca el tema ? y la web de Pedro Palazón ? que aunque no habla sobre el tema suele publicar enlaces a recursos como tablas de compatibilidad en navegadores ?, los dos últimos en castellano, sólo se encuentran cosas sueltas...
Así que lo mejor es mirar el código que hacen otros ? sin plagiarlo ?, experimentar, y cuando se sepa de qué va la cosa, mirarse la especificación del W3C ? o su traducción en castellano en Sidar ?, que no hay otro remedio.
Lo más importante de CSS son los selectores ? cuidado porque Explorer es muy cabrón con el soporte de selectores ?, el modelo de cajas ? caja = contenido + padding + borde + margen ? y el posicionamiento ? float, clear, posicionamiento relativo, absoluto y fijo, etc. ?.
Por cierto, en Alzado, Luís Villa acaba de publicar un artículo sobre el mismo tema.
Usuario desconocido
cø no me vayas de listo, si tu quieres cargarte responsabilidades "por ser creador" tu mismo, pero yo paso de las tablas a 100%
cø
No era mi intención Dani...
Pero como tú mismo dices el problema no es que el resultado no sea profesional, sinó que no que la gente no quiere cargar con responsabilidades.
Es algo de lo que ya se ha hablado mucho en el foro: cada uno que valore lo que cree que es su compromiso profesional.
Pero ante todo, buen rollo :)
Usuario desconocido
No se porque recalcas tanto lo del buen rollo... yo no vengo aqui a nada que no sea divertirme... será porque te mola armar follón?
Yo simplemente no estoy deacuerdo en que siempre se lo cargue todo a las espaldas el diseñador por vuestra teoria de que "somos creadores"... manda huevos... ni que fueramos dioses!
Yo como diseñador soy lo que soy y no necesito que nadie me deje por menos competente por dominar unos temas u otros. Y a quien no le guste que no mire! juas!
loopecio
Juer, Dani.. ya vale, no?
No metas más cizaña colega, que siempre estas por el medio en todos los fregaos. Dejémonos de rivalidades históricas y seamos un poco más cerebrales. Intentemos no tirarnos de los pelos constantemente.. y no se, para los casos crónicos recomiendo unas caladillas a un peta y contar hasta diez, venga, buen karma.
En cuanto al tema, pues eso, que sigo sin tener nada claro. A ver si alguien me dice de una web wapa para hacere una biopsia, ok?
*/ merci!
Usuario desconocido
No me hagas caso... se me va un poco la olla a veces... pero es que no me gusta que se generalizen las cosas.
hartum
mire usted, yo hago webs sin tablas, pues mire usted yo tengo en mi casa un botijo alicatado por dentro ¿y?
¿que se pueden hacer webs sin tablas? po zi, po zi
¿que se pueden hacer webs con tablas? po tb, po tb
¿que tu te llevas de culo con los programadores y has encontrado la manera de que no te vuelvan loco y te hagan cambiar el diseño cada 2x3? Ole tus güevos!!!
Pero yo utilizo tablas cuando me da la gana con php (sobre todo para mostrar resultados) y soy tan feliz.
POR FAVOR me podria decir que ventaja tiene no utilizar tablas sin tener que leerme un articulo tecnico de no se quien publicado en nosedonde, como si tubiese 6 añitos (sin ofender a los de 6 añitos eh???)
Muuuuuuuuuchisimas gracias por adelantado y que rule ese porrito que habia por ahiiiiiii!!!!
iworkwithyou
Ventajas.
1. Reduces el peso.
2. Es mucho más facil de modificar, cambiar, actualizar.
3. Mejoras tu posicion en buscadores.
4. Es mas accesible.
5. Facil de portar a otras plataformas.
6. Separas contenido y forma.
7. Maquetación independiente.
Cesar.
hartum
iworkwithyou
eres un mostro, son razones mas que suficientes para que empiece a interesarme el tema, aaaaaaaaaaaahora es cuando si me voy a empezar a leer esos articulos, gracias mil por saciar las mentes simples :-)
loopecio
... yo me apunto a ese agradecimiento..
*/ merci!
Josh
Acabo de ver un artículo sobre el tema en macromedia.com:
Composiciones sin tablas con Dreamweaver MX
Yo personalmente recomiendo TopStyle como herramienta (no es wysiwyg)
Boris
Por el lado editorial, yo tengo aquí un libro que podría interesar a los que estáis (estamos) interesados en este tema:
Dhtml y Css (segunda edición)
Prentice Hall
24 ?
Hay dos capítulos relativos al css positioning, bien explicado... y no muy denso de leer, de verdad.
Eso si, lo suyo es complementar todo aquello que podamos leer y aprender con un buen repaso al código de sitios web desarrollado con esta tesnología.