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.
hartum
menos, mal,porque me estaba comiendo la cabeza y pensando ¿como hara esta gente para calcular la altura? ¿y la posicion de cada registro en la pantalla? en fin que me quedo mas tranquilo, las capas ó css para lo que es maquetacion y las tablas para presentar datos tabulados, shashi.
Con lo facil que es hablar claro y el misterio que nos gusta darle a las cosas!!!!
orange
Gracias por mirarlo Boris, sí era por eso.
Ya me imagino que no descubrirá nuevos y maravillosos horizontes, pero creo que en esto de maquetar con CSS más que buscar un campo de nuevas posibilidades lo que hay que hacer es tratar de aprender una metodología correcta y quitarte malos hábitos de enmedio (yo me he dado cuenta a raiz de subir la miniweb de theorangeside).
Yo hay de muchos libros donde aprendo más de cómo hacen las cosas que de qué es lo que hacen exactamente.
(Y de hecho cuando te enfrentas a proyectos un poco serios esas son las dudas que te asaltan, no cómo conseguir los resultados, que a las malas se conseiguen de cualquier forma, sino hacerlo de la manera correcta)
Cuando te acabes la Guia esencial pásate directamente al de Creación de sitios web con PHP 4 ... verás que, además de enseñarte PHP, te enseñan metodología de programación (aunque no sea un libro específico del tema)
josh
HARTUM lo que haces es correcto y es el uso original de las tablas.
hartum
bueno pues una felicitacion para boris por dejar el asp y pasarse a php, ya veras que el paso es relativamente facil(a mi me lo parecio), en segundo lugar que esta practicamente todo hecho e implementado y que encontraras ejemplos a tutiplen, y gratis no como en asp que en cuanto te descuidas te estan pidiendo el numero de la visa, y ahora viene la pregunta: para mostrar un monton de registros sacados de una base de datos, que es para lo que suelo utilizar las tablas ¿tb utilizais css? ¿y como lo haceis para mostrar los resultados? ¿me podeis mostrar un caso practico? graciassssssssssssssssssssss para mas detalle me refiero a esto:
<table>
<? while ($fila=db_fetch_array($rs)) { ?>
<tr>
<td><? echo $fila["campo"] ?></td>
</tr>
<? }//fin del while ?>
</table>
espero explicarme!!!! :-P
boris
Mmmm... la segunda edición es del 2002, del año pasado.
Me imagino que lo preguntas por si ya se ha quedado desfasado... es lógico.
Vaya, la verdad es que no descubre nada absolutamenta nuevo, pero si que creo que puede ser un buen recurso para lograr un basamento teórico sin dejarse las retinas en la pantalla. Y un punto de referencia cuando consultamos y estudiamos códigos fuente que pensamos nos pueden ayudar a aprender y comprender.
Por cierto, Orange, he seguido tu consejo en otro post y llevo unos días ojeando la "Guía esencial del PHP" (si, yo también voy a dejar de lado poco a poco el asp), y la verdad es que es un librito muy llevadero, bueno para empezar con el php sin descerebrarse, gracias por el consejo.
orange
¿De qué año es el libro Boris?
iworkwithyou
Por si es de interes las CSS de alzado.org estan aqui:
http://www.alzado.org/css/
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.
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)
loopecio
... yo me apunto a ese agradecimiento..
*/ merci!
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 :-)
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
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!!!!
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.
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 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!
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
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
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.
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.
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.
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
c
Buen propósito del dia: como creadores, deberíamos dejar de tener prejuicios y analizar más los hechos concretos.
De buen rollo... :)
Usuario desconocido
Puaj! Odio las páginas a 100% de ancho... quedan muy poco profesionales la gran mayoría...
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
Perdón me he confundido, creí que se hablavais de estilos CSS
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...
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 ?.
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
<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.