Contenido

La unión hace la fuerza ¿o no?

29 Ago

aNieto2k hace 6125 días en: CSS, Curiosidades, Programacion, semántica, web, webdev

+ 18

Hoy hablando con mi Sensei, nos ha asaltado una duda a la cual hemos llegado con una diferencia de opinión sobre un tema bastante tonto y que me gustaría haceros llegar para ver si alguien nos puede iluminar.

Iluminar

¿Cual sería la mejor forma de usar la combinación XHTML+CSS? 

Bueno, voy a explicar un poco lo abstracto de la pregunta. Resulta que hace poco estuve leyendo acerca del uso de multivalores en los atributos class de los elementos de una página web. 

<p class="texto grande"> ... </p>

De esta forma podemos aplicar 2 clases diferentes a este elemento, por lo tanto podemos ahorrarnos código y creamos un sistema algo más semántico y claro. Ya que en este caso podríamos usar este parrafo para indicar que sobre todos los <p></p> de clase texto, este además será grande.

Primero empezamos pensando en lo cómodo o práctico del uso de esta técnica. Por un lado tenemos la cosa de que podemos definir funciones con finalidades varias, osea en este caso tenemos grande que puede aplicarse a todo lo que queramos mostrar de un tamaño mayor y texto para todo lo que queramos tratar como texto. Pudiendo juntarlos en caso de desearlo.

Pero por otro lado, podríamos tener un clase texto_grande que integrara todo lo que necesitamos de las dos clases. De esta foma únicamente bastaría editar esta clase para conseguir un cambio en nuestro aspecto.

Esto nos llevó a una primera cuestión:

¿Que parece ser lo más óptimo? ¿Usar una sola clase? ¿O dividir el diseño en varias clases?

Dependiendo de que solución escojas puede llevarte a otras preguntas, pongamos por ejemplo que elejimos el usar una sola clase. Esto nos hizo llegar a la siguiente pregunta.

¿No sería mejor tener todos los elementos del HTML con su correspondiente ID, y así poder controlar todo el aspecto de cada elemento desde el CSS sin cambiar para nada el HTML?

A ver, me explico. Resulta que si optamos por declarar una clase con el contenido de texto y grande, daremos lugar a una clase nueva que probablemente únicamente usemos en un determinado sitio, aunque con el estilo y atributos que deseemos, ni uno más ni uno menos. Siguiendo por esa línea pensamos que utilizando los ID’s de los elementos podríamos controlar completamente todo el aspecto de nuestra web (esta claro que cada proyecto es un mundo y que dependiendo de cada uno requerirá que se realize de una forma u otra).

¿Tenemos más control y es más óptimo definir ID’s a todos los elementos? ¿Que opinais?

  • aguayoki aguayoki

    @2 agosto 29th, 2006 at 5:10 pm

    ¿Y funciona / valida sin problemas utilizar clases compuestas? En todo caso, lo que planteas es un tema más relacionado con diseño gráfico en sí; recuerda que además de la separación de contenidos y diseño, hay que mantener una estructura semántica… Y para eso sirven los id‘s. La idea es identificar los elementos para hacer más legible el conjunto… Por tanto, según mi perspectiva, una web con un buen diseño de información debiera mantener una utilización óptima de id‘s y clases… En conjunto.

    Respecto al ejemplo que tú planteas, el texto grande… Si el texto va con una tipografía de tamaño mayor al normal, eso quiere decir que es necesario llamar la atención sobre el contenido en cuestión… Así que… ¿No será mejor a utilización de h*? Y lo mismo, se pueden definir h*‘s con id‘s para mantener la semántica; por ejemplo, definir tanto h1 id=TextoPrincipal como h1 id=TextoSecundario.

    Saludos desde Chile.

    Responder

  • aNieto2k aNieto2k

    @3 agosto 29th, 2006 at 5:42 pm

    #1 Validar si que valida, puedo dar fé de ello. Y tienes toda la razón que lo suyo sería encontrar una forma optima de usar id’s y class, pero ¿cual es la más optima?

    El tema de texto grande quizas no sea muy buen ejemplo ya que como tu dices podríamos usar un H* y tema solucionado, ¿quizas un texto rojo? Supongo que la idea es clara ¿no?

    Yo el problema que le veo es que quizas definir un id para cada uno de los elementos de una web puede ser algo realmente exagerado ¿no crees?, pero por otro lado creo que te puede permitir un control que de otra forma no podrías conseguir.

    Mirandolo desde el punto de vista que el programador programa y el diseñador diseña, no es mejor para el diseñador poder disponer de los id’s de todos y cada uno de los elementos de la plantilla. Así, creo que se puede ahorrar esas horas de espera a que el programador cambie lo que necesitas…. (siempre y cuando no sean la misma persona :D).

    Responder

  • lor lor

    @4 agosto 29th, 2006 at 6:29 pm

    Interesante post y interesantisimo blog.

    Partiendo de la idea de diseñar una web semantica, utilizar un class=»texto grande» (o class=»texto_grande») creo que no es conceptualmente correcto. Seria mejor utilizar un class=»Resumen» o algun valor más semánticamente relevante.

    Por otro lado, un ejemplo semanticamente correcto puede ser algo así:

    …
    …

    Debe ser más correcta está formula que utilizar class=»vehiculo_avion» y class=»vehiculo_coche» respectivamente, un analizador semántico comprendería mejor el primer caso y localizaria, por ejemplo, los vehiculos tanto si son aviones o coches.

    Dejando la teoria a un lado, en los proyectos reales es, hoy en dia, bastante dificil pensar en realizar un analisi semantico profundo del contenido de una web que permita a los futuros analizadores semanticos «comprender» un site correctamente. Es más normal simplemente ignorar el tema y partir de una maqueta hecha por un diseñador, con un stylesheet inmutable y semanticamente vacio. Igual en el Web 3.0… ;))

    Responder

  • lor lor

    @5 agosto 29th, 2006 at 6:33 pm

    Vaya, parece que no ha salido todo lo que he escrito, perdon por mi inexperiencia

    Donde aparece:

    …
    …

    deberia aparecer

    _div id=»Boeing747″ class=»vehiculo avion»_…_/div_
    _div id=»Seat600″ class=»vehiculo coche»_…_/div_

    con sus respectivos «mayorque» y «menorque» (como las islas ;))

    Un saludo desde Barcelona

    Responder

  • aNieto2k aNieto2k

    @6 agosto 29th, 2006 at 6:42 pm

    #4 xDDD Hombre, yo si veo semántico (o semánticamente correcto) le definir un texto por lo que és (texto y grande). Quizas en ese ejemplo no se ve muy claro, pero imagina que en vez de texto grande sea texto rojo. Parece correcto pensar que ese elemento puede ser las dos clases a la vez ¿no?

    <style type="text/css">
.rojo { color:red; }
.texto { text-align:left;}
</style> 

<p class="texto rojo">Aki todo en rojo :D</p>
<p class="texto">Esto será un texto normal</p>

    Responder

  • Alex Alex

    @7 agosto 29th, 2006 at 7:41 pm

    Opino que lo correcto (para mí) es usar las clases para cosas más generales (en ese caso yo usaría class=texto) y luego pasar a usar ID’s. Si he definido que la clase texto sea de 3em pero en el párrafo con id=flauta quiero que sea de 5 pues defino para la p#flauta el tamaño de 5em’s.

    Para mi ésta es la forma más correcta de usar CSS. Pero ignoro por completo que realmente lo sea.

    Un saludo!

    Responder

  • lor lor

    @8 agosto 29th, 2006 at 8:27 pm

    Creo que nos podriamos pasar años (hasta que intervenga Tim Berners-Lee) hablando de esto.

    A mi parecer, la idea principal es desvincular totalmete el diseño del archivo HTML (o XHTML), asi que en la clase, en vez de poner algo asi como «texto rojo» sera ponerlo como «relevante» o directamente en un strong dentro del parrafo.

    Si lo que queremos es hacer algo «semanicamente correcto», totalmente de acuerdo, yo separaria en dos clases, mejor class=»texto rojo» que class=»texto_rojo», asi te ahorras faena. Aunque hay que ir con cuidado, y no acabar poniendo algo del estilo: class=»bold esq textblanc t70 paddingDre10Esq15 block blauhover marginSup pastBlaufortblancMenu1 paddingsupinf5″ (veridico, malditos diseñadores!)

    Responder

  • aNieto2k aNieto2k

    @9 agosto 29th, 2006 at 9:44 pm

    Claro que no hay que llegar a esos extremos, aunque si lo pensamos un poco ¿no estamos llegando a lo que conocemos como microformatos?

    Responder

  • hari hari

    @10 agosto 29th, 2006 at 10:56 pm

    Interesante cuestión.

    Aunque estoy de acuerdo con lor, cuando dice que podríamos estar años hablando de la semántica de la cosa. Creo que la opción class=»texto grande» o class=»texto rojo» es la más «correcta», desde el punto de vista semántico y también mirando el asunto desde una perspectiva más mundana.

    Me explico, si optamos por la opción class=»texto_grande», igualmente tendríamos class=»texto_pequeño» o simplemente class=»texto».

    Si quiero que lo etiquetado como «texto» tenga caracteristicas comunes y la diferencia sea simplemente el tamaño, podría llegar a tener algo asi:

    texto{font:normal 1em Arial, monospace;}
    texto_pequeño{font:normal 0.5em Arial, monospace;}
    texto_grande{font:normal 1.5em Arial, monospace;}

    Hay redundancia de código, como más adelante tenga que cambiar el tipo de fuente de Arial a Tahoma, tengo que tocar en tres sitios, es más dificil de mantener el código.

    Esto sería mejor, pienso yo:

    texto{font:normal Arial, monospace;}
    pequeño{font-size 0.5em;}
    grande{font-size 1.5em;}

    No se si lo veis igual que yo, pero cuando me enfrenté a esa cuestión opte por dos clases, precisamente por reducir la redundancia de código, más que por cuestión de semántica.

    Ah, por cierto, validar valida, se justifica en el estandar, no es que me lo sepa de memoria, pero los primeros posts que escribí iba sobre selectores en CSS. Y quieras que no te acuerdas.

    Pasé 15 minutos tratando de descifrar esto .clase{…}

    Responder

  • hari hari

    @11 agosto 29th, 2006 at 10:59 pm

    Jajaja, se ha cortado el comentario, siempre me dicen que charlo demasiado 🙂

    Lo que tenía que descifrar era esto:

    .clase{…}

    Responder

  • hari hari

    @12 agosto 29th, 2006 at 11:01 pm

    Desisto, no me deja escribirlo, y no quiero bombardear esto de comentarios. 🙁

    Chao

    Responder

  • coyr coyr

    @13 agosto 30th, 2006 at 3:38 am

    Bueno yo voy a cuestionar un poco la pregunta o el planteamiento.
    En mi experiencia con el CSS e llegado a conciliar con otro grupo de diseñadores en que la mejor forma de darle nombre a una «clase» o a una «id» es refiriendose a su «función» y no a su «apariencia». Suponiendo que realizo el desarrollo óptimo del sitio y tengo mi clase «texto», «rojo» o «texto_rojo».

    El código quedaría algo así:

    *texto_rojo {color:#FF0000}
    //color:#FF0000 // por si no sale lo de los corchetes 😛

    Si voy a realizar un rediseño, y el sitio va a usar el azul o un gris o el color que sea, el nombre de la clase o identificador quedaría obsoleta y sería semánticamente equivocada. Implicaría más trabajo remplazar el nombre, o quedaría una hoja llena de nombres incoherentes.

    Responder

  • coyr coyr

    @16 agosto 30th, 2006 at 2:51 pm

    Si, ese es el punto con lo de los nombres. Andy lo expone bien. Volviendo al ejemplo de las clases. Las clases que se quieran realizar denderan del diseño que se quiera lograr. Pero al parecer en pro de manejar un diseño más estandar sería mejor manejar las cambinaciones para usarlas dependiendo el caso.

    .clear_both{clear:both} //Por lo general solo he necesitado usar este.
    .clear_left{clear:left}
    .clear_right{clear:right}

    Y esta es la estructura básica que uso para un sitio:

    <div id=»contenedor»>

    <div id=»header»>

    <div id=»logo»>
    </div>

    </div>>

    <div id=»menu»>
    </div>

    <div id=»contenido»>
    </div>

    <div id=»footer»>
    </div>

    </div>

    Responder

  • felipe.lavin felipe.lavin

    @17 septiembre 5th, 2006 at 3:18 am

    Andrés y públci en general

    Me encuentro en total desacuerdo respecto de que texto grande sea una clase (o dos clases) semánticamente correcta… habría que analizar la situación puntual que te lleva a creer que sí podría ser, pero francamente no me imagino un contexto en el que podría ser semántico, por la simple razón de que texto grande se refiere a la presentación del contendor, no a su función.

    No hace mucho escribí un post al respecto: Semántica en clases e ids (de hecho, tú mismo me dejaste un comentario en él en relación con microformatos), y el punto central que es recomendado incluso por la W3 es otorgar nombres de acuerdo a la función, no a la presentación.

    XHTML es un lenguaje estructural y las clases deberían secundar esta perspectiva, para mí la semántica es tal en tanto agrega significado respecto del propósito de un elemento o contenedor dentro de un documento; pensemos en una representación de XML sin estilo: atendiendo solamente a la estructura de elementos, clases e ids, deberíamos tener una idea de cómo está estructurado el documento, no de cómo debería verse.

    Sobre lo de «la unión» de clases, me cabe una pregunta: ¿qué tal el soporte de navegadores? Me imagino que MSIE debe tener problemas. Por otra parte, WordPress lo utiliza hace rato, por ejemplo en los estilos generados para los widgets (muy poco semánticos, dicho sea de paso)

    Responder

Enlace permanente: La unión hace la fuerza ¿o no?

Comentar

↑

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.

wordpress. themes wordpress.plugins wordpress.hacks Wordpress webkit usabilidad tweet themes Safari prototype plugins plugin PHP optimización Opera navegadores MooTools lightbox jquery.plugin jquery javascript itouch iphone internet explorer imagenes IE8 IE6 HTML5 HTML hack google.chrome google framework flash firefox3 firefox firebug estandares CSS3 CSS canvas ajax Accesibilidad 2.7 2.6