Foros del Web » Creando para Internet » CSS »

¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML?

Estas en el tema de ¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML? en el foro de CSS en Foros del Web. Hola de vuelta, soy novato en esto de las CSS, aunque me estoy dando maña para ya estar haciendo algunas webs.. en estos días estoy ...
  #1 (permalink)  
Antiguo 26/06/2008, 09:05
 
Fecha de Ingreso: enero-2008
Mensajes: 273
Antigüedad: 9 años, 11 meses
Puntos: 1
¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML?

Hola de vuelta, soy novato en esto de las CSS, aunque me estoy dando maña para ya estar haciendo algunas webs.. en estos días estoy armando un pagina y a medida que defino los estilos me resuena la siguiente pregunta en la cabeza:
¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML? a limpio: es lo mismo poner un estilo mio digamos: .estilotitulo o .estilosubtitulo o una muy común en mi: txt-plano y txt-negrita o necesariamente debería haber definido h1, h2 y p ¿cómo afecta ésto el resultado final? y me refiero al producto terminado no solo a lo que ve quien visita la web.. ¿es una página "menos profesional"?¿afecta el SEO?¿es cuestion de gustos?¿está mal hacer lo que hago o directamente carece de relevancia?¿hace un tiempo estaba muy mal.. pero ya hoy, con los motores nuevos es lo mismo? bueno, la corto.. se imaginaran todas las preguntas que vienen de esta sola, no? como siempre.. gracias!
  #2 (permalink)  
Antiguo 26/06/2008, 10:14
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Respuesta: ¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML?

Hola

La respuesta es muy relativa, aunque también implica sentido común.

No afecta al seo.

No afecta al profesionalismo, mientras cualquiera de las opciones que elijas la uses bien.

Por ejemplo, si defines una clase y luego la usas solo en párrafos, es mejor definir las propiedades en la p.

Si la característica es aplicable a varios elementos, pero no sabes bien a cuales, osabes que serán usada en varios, pero no estás seguro aun, es mejor definir una clase.

Si será usada solo en una sección determinada del sitio, es mejor definir una id en un contendor general de dicha sección y usar las propiedades del css, por ejemplo, si el contenedor se llama "contenedor" y quieres modificar un párrafo, puedes usar:
#contenedor p

En principio, da lo mismo como lo hagas, la regla genérica, es que debes definir cosas que tengan sentido semántico y pesen lo menos posible.

Recuerda, no hay reglas fijas y aunque hagas una buena combinación, siempre habrá una mejor; no hay que ofuscarse buscando la mejor de todas, cuando consigas una buena, usa esa. Si realmente es bueno el diseño, cuando se te ocurra una mejor, podrás volver y mejorarla sin hacer muchos o ningún cambio. Pero como todo, solo la práctica y el tiempo lo dirán.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 26/06/2008, 10:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: ¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML?

Lo que preguntas se resume en que debes buscar lecturas sobre semántica. Ahí está la clave para saber qué debes usar y por qué, como afecta al SEO, etc.

Mikel.
  #4 (permalink)  
Antiguo 26/06/2008, 20:08
Avatar de jharif
Colaborador
 
Fecha de Ingreso: mayo-2001
Ubicación: Ciudad de México
Mensajes: 313
Antigüedad: 16 años, 7 meses
Puntos: 3
Respuesta: ¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML?

Se definen los estilos de las etiquetas para ahorrar código y, precisamente, añadir el formato de presentación (diseño) final. De otra manera, tendrías que: 1)Usar etiquetas <font> para cambiar la tipografía, color y tamaño o 2) Usar siempre el atributo class o id en las etiquetas que corresponden.
Un saludo
__________________
"Johan Cruyff fue mejor, pero fui yo quien ganó la Copa del Mundo " Franz Beckenbauer
  #5 (permalink)  
Antiguo 27/06/2008, 08:47
 
Fecha de Ingreso: enero-2008
Mensajes: 273
Antigüedad: 9 años, 11 meses
Puntos: 1
Respuesta: ¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML?

Hola muchachos, gracias por las respuestas. De momento, me quedo con esto, que eran quizá los puntos más fuertes de mi pregunta
Cita:
Iniciado por PatomaS Ver Mensaje

No afecta al seo.

No afecta al profesionalismo, mientras cualquiera de las opciones que elijas la uses bien.
Después con el tiempo iré buscando, como dice Mikmoro, material al respecto, solo que los tiempos cambian cuando ya tienes las manos metidas en un trabajo.
Como sienmpre, muchas gracias!
  #6 (permalink)  
Antiguo 27/06/2008, 09:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: ¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML?

Pues en este caso no estoy del todo de acuerdo con PatomaS. Que utilices o no las etiquetas h1, h2, etc. yo diría que sí afecta al SEO, y esto se debe como te decía a la semántica, ya que tienen una mejor consideración lo sitio bien esctructurados semánticamente, es decir, lo que usan las etiquetas adecuadas para marcar la estructura de encabezados, subtítulos, etc.

Es lo que creo.

Mikel.
  #7 (permalink)  
Antiguo 27/06/2008, 22:13
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Respuesta: ¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML?

Hola

Bien bien, un reto intelectual, je je je

Desafortunadamente, la semántica no afecta al seo.

Escojan una categoría, la que quieran, y revisen quienes están en primeros puestos en los resultados.

Obviamente habrá casos que serán la excepción, pero estamos hablando del grueso de los casos.

Desde hace unos 9 meses, Google está considerando la semántica en su algoritmo, sin embargo, en repetidas ocasiones, desde entonces, se han producido variaciones en las posiciones, la cuales no están representadas por las páginas con mejor semántica.

Pero dejemos la teoría por un momento y vayamos a la lógica y la práctica. Solo un ejemplo sencillo para no aburrir mucho.

Semánticamente, debe haber un h1, puede haber varios h2, h3 y demás, los cuales, deben tener cierta relación jerárquica, por ejemplo, esto es válido
Código HTML:
h1
p
h2
p
h3
p
h3
p
h4
p
h3
p
pero esto no
Código HTML:
h2
h1
h2
h3
h4
h3
h5
Evidente, pero sencillo.

Ahora bien, aplicar estilos a las etiquetas, por ejemplo
Código HTML:
h3 {color: #f00}
está perfecto, sin embargo, nos "amarra" a que los h3 serán en rojo y si no los queremos así en alguna parte, habrá que usar un id o una clase, veamos que pasa si aplicamos un id.
Código HTML:
#subtitulo_uno {color #000;}
...
<h3 id="subtitulo_uno"> 
No está mal, pero si luego queremos aplicar lo mismo en otra parte de la página, hay que usar otro id y aunque es posible, en principio, asignar id's a elementos que no los requieren, es superfluo, recarga de peso la página y no es accesible.

Pero aun podemos usar una clase, veamos que pasaría:
Código HTML:
#error {color #000;}
...
<h3 class="error"> 
Ahora parece que tiene sentido, el objeto subtítulo de tercer orden, indica que es un error o el texto de un error viene a continuación, lo cual es semánticamente correcto, y deseable. Aparte, podemos reusar el código en cada caso que haya un error, por ejemplo, en los párrafos que vengan después del título. O en cualquier otro caso que convenga.

Por supuesto, también podemos usar un contenedor, asignar un id al contenedor y herencia, lo cual sería semánticamente perfecto y haría la página ligera, pero tiene inconvenientes como por ejemplo, amarra todos los elementos de ese contenedor a menos que hagamos excepciones en la css y que en algunos navegadores no se verá bien por problemas de herencia, con lo que habrá que empezar a jugar con las reglas o asignar más id's internos.

Ahora, usando el ejemplo válido de arriba, asumamos que es una página con reporte de errores, y así unimos las dos cosas planteadas. Estoy presumiendo que los títulos estarán bien redactados, tendrán sentido y demás, si no, empezamos a tener demasiadas posibilidades para escribir y es mejor hablarlo con un vinito delante y en un bareto.

;)

¿qué alternativas tenemos para mostrar al usuario la información y mantener la semántica?
Veamos
Opción 1:
Código HTML:
#errores {color,  fondo, tamaño de letra ...}
<div id="errores">
h1
p
h2
p
h3
p
h3
p
h4
p
h3
p
<div> 
Este caso fallaría en la representación de los colores en explorer como vimos no hace mucho en otro caso por temas de herencia de propiedades. COn lo que algunos elementos tendrían los colores adecuados y otros nos. ¿Eso afecta a la semántica?, no, pero si la página no es agradable a la vista, tiene pocas visitas y parece poco profesional ¿afecta eso al seo?, si.
Si en el cas oanterior cambiamos id por class, es exactamente lo mismo.


Opción 2:
Código HTML:
.errores {color,  fondo, tamaño de letra ...}
<h1 class="errores">
p
<h2 class="errores">
p
<h3 class="errores">
p
<h3 class="errores">
p
<h4 class="errores">
p
<h3 class="errores">
p
Este ejemplo, es como exagerado ¿no?, a fin de cuentas estamos logrando lo mismo que en el caso anterior, pero recargamos más las etiquetas. Cierto, con lo cual aumentamos el tiempo de carga, ligeramente, claro, pero si la página es más grande, lo afectamos más. Eso afecta al seo, desde el punto de visitas, si. Afecta a la semántica, no en cuanto a la estructura de las etiquetas.

Opción 3:
Código HTML:
#errores {color,  fondo, tamaño de letra ...}
#errores * {color,  fondo, tamaño de letra ...}
<div id="errores">
h1
p
h2
p
h3
p
h3
p
h4
p
h3
p
<div> 
Es como el caso uno, pero tratamos de que no haya problemas de herencia en los navegadores, claro que eso nos colorea también los párrafos y no solo los títulos. AHora dependería del gusto por si lo queremos así o no, si no lo queremos así, pasamos al ejemplo 4

Opción 4:
Código HTML:
#errores {color,  fondo, tamaño de letra ...}
#errores h1, #errores h2, #errores h3, #errores h4, {color,  fondo, tamaño de letra ...}
<div id="errores">
h1
p
h2
p
h3
p
h3
p
h4
p
h3
p
<div> 
Mejor que el anterior, aunque solo hemos combatido un problema de renderizado en algún navegador, sin embargo, eso nos pude aumentar las visitas, y por lo tanto el seo.

...

Seleccioné esta serie de opciones porque son bastante cuadradas y limitadas, lo que limita los posibles ejemplos, pero espero haber logrado mostrar la idea, la cual es, que el seo no tiene que ver con los contenidos en muchos casos, desafortunadamente, y definitivamente no con la semántica.

Si alguien quiere un ejemplo más complejo ¿Han visto el código de forosdelweb? Osea, vbulletin. Forosdelweb tiene una posición excelente en Internet ¿no?, sin embargo, la semántica dentro de las páginas da pena. Y no vale decir que es cosa de vbulletin, lo cual es cierto; pero el sitio web es el sitio web, no importa con que herramienta se construya, no estamos evaluando los conocimientos de quien lo armó, si no de la página en si.

Conste que no me agrada que sea así, dedicándome a esto, y justamente adiseño de interfaces usables, entre otras cosas, me encantaría que las páginas no accesibles y no usables estuvieran más abajo en los rankings, pero no es así.

:)

Felicidad gente
__________________
¡ hey, hou, hou, hey !
  #8 (permalink)  
Antiguo 28/06/2008, 04:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: ¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML?

Cita:
Desafortunadamente, la semántica no afecta al seo.
Escojan una categoría, la que quieran, y revisen quienes están en primeros puestos en los resultados.
Pues de nuevo vuelvo a estar en desacuerdo

Que todos los modelos sean rubios no implica que todos los rubios sean modelos (un ejemplo chorra), es decir, que las páginas mejor posicionadas no sean semánticamente correctas no significa que la semántica no se tiene en cuenta, sino que que se evalua en un porcentaje determinado, inferior a otros factores, y que no tenerla se penaliza en un porcentaje también inferior a otros factores.

Para saber hasta qué punto se evalua, deberíamos poder comparar dos páginas con idénticos factores en cuanto a estructura, links externos, "pagerank", visitas, etc., en la que una fuera semánticamente correcta y la otra no. Esto nos daría realmente la medida de su importancia en la SEO, ya que a falta de posibilidad de comparación, toda estimación es subjetiva. Si suponemos que la semántica ocupa un 10% de la evaluación global de un sitio, es posible que con mi página semánticamente perfecta no sea capaz de superar en posicionamiento a forosdelweb, pero es que forosdelweb me superará en el otro 90%, con lo que queda claro que posiblemente a veces no será un factor determinante, pero no por eso despreciable.

Y en cuanto a la estructura que comentas, si imaginamos la estructura de h1, h2, etc. similar a un libro, es poco probable que tras el Tomo I (h1) y el Título I (h2), quiera que el Capítulo I (h3) se vea diferente del Capítulo II (h3), por lo que a mi entender debería utilizar las etiquetas header a modo de índice de contenidos (en cuanto a aspecto estético me refiero) en el que todos los Tomos irán sangrados a la izquierda, en negrita y cuerpo 18, los Títulos con sagría francesa y cuerpo 16 y los Capítulos centrados en negrita y subrayados. Quizá lo que no solemos hacer bien es concebir el anidamiento de secciones en cuanto a la semántica, y por eso creemos necesitar un h3 en rojo 16 y otro h3 en amarillo y 24.
De todos modos no considero ningún problema adicional asignar una clase a cada etiqueta que necesite una pequeña diferencia de su genérico, porque si bien visualmente será algo distinta, representará su papel en la estructura general, además de permitir un correcto estructurado en navegadores de texto o lectores de pantalla, no influyendo para nada el hecho de que asignarle una clase nos haya permitido cambiar un poco su color o cuerpo de letra.

Mikel.
  #9 (permalink)  
Antiguo 28/06/2008, 09:39
 
Fecha de Ingreso: enero-2008
Mensajes: 273
Antigüedad: 9 años, 11 meses
Puntos: 1
De acuerdo Respuesta: ¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML?

No desaparecí, eh! sigo el hilo con mucha atención! se ha puesto muy interesante .
Otra parte oculta de mi pregunta (por que como decía antes, es una pregunta que incluye muchas) es además, porque hay como un "pre-formato" en estas etiquetas, a veces muy dificil de combatir para un novato ("como yo"), ejemplo, ayer mismo tuve una lucha cuerpo a cuerpo con una porcion de texto, y no lo pude ubicar en la posicion dentro de un div que yo quería, hasta que por allí le quité la etiqueta <p> (Dreamweaver/Barra de Propiedades/Formato: Ninguno) y Pluf!: justo donde lo quería.. y ya me ha pasado antes, entonces como novato absoluto pienso en por qué tantos dolores de cabeza si con un ".texto-choto{etc}" lo arreglaba y en definitiva, definir las parrafos definiendo el estilo para las etiquetas <p> no tiene mayor trasendencia.
De Mikmoro tomo que: (Como en la vida misma) si uno va dejando las pequeñas cosas de lado.. simplemente por perqueñas, al final del dia se va a encontrar con un paquete grande de cosas dejadas de lado. Traducido.. uno podría no prestarle mucha atencion a las METAS.. por que no son la gran cosa, o los formatos de párrafo (H1, H2.. etc) que tampoco tienen mucha incidencia.. o a los mismos Alt de las imágenes.. pero en este tren de cosas, el resultado final, no va a ser (hablando además de profesionalidad, estándares, etc) nada aceptable.

Se que ponerme en "Abanderado" de los novatos preguntones me va a traer más de alguna mala cara.. pero bué.. la realidad me tomó por sorpresa trabajando de algo en lo que recién me estaba metiendo..
  #10 (permalink)  
Antiguo 28/06/2008, 21:20
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Respuesta: ¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML?

Hola

Un ejemplo típico en el que puedes querer que un h3 se vea diferente en una página y en otra, es por ejemplo, hmmm ... Una página de errores de la aplicación. Eso me suena, ¿dónde he leido algo de errores antes? Aaaah si, justo arriba.

¿Han creado aplicaciones que requieren páginas de error? Si lo han hecho, no necesito explicar más. Si no, es muy largo. Pero piensen en algo más allá de un 404, piensen en mensajes, accesibles y usables para una aplicación web, en la que en determinados puntos del proceso, si hay errores, se redirige al usuario a dichos puntos o páginas. Estas, evidentemente no pueden ser iguales que las demás.

;)

Otro sitio en el que definitivamente puedes querer que alguna etiqueta se vea diferente al resto, es la portada de un sitio. Podrías manejarla como la excepción al sitio y en esta página asignar clases e id's que luego no usarás en las de contenido. Pero ¿y las portadillas? Es decir, las portadas de sección de una página grande o aplicación web. Empezamos a sumar excepciones ¿no?.

Como dije en un principio, depende del sitio, una técnica es mejor que otra; partiendo siempre de la base de que cualquiera de ellas se usará con conocimientos y razonamiento, no a lo loco. Si no se usan de esa manera, puede coincidir que se seleccione bien, o no.

Sobre la valoración del posicionamiento, obviamente no tenemos un laboratorio para hacer una medición justa, es por eso mismo que el único punto de medida válido, es la experiencia diaria y los resultados visibles. No vivimos en un mundo ideal ni publicamos en un medio aislado, Internet es una sola gran masa con páginas de todo tipo, calidad y contenidos, por lo que quien está arriba, está arriba y quien no, pues no.

Podemos argumentar muchas cosas, podemos usar la razón y decir lo que debería ser, pero lo que debería, no es lo que es.

Vayamos por un momento a la raíz de este ¿Qué es SEO? Search Engine Optimization. Es decir, Optimización para motores de búsqueda. Eso significa, que cualquier cosa que resulte en una mejor posición en los buscadores, es algo efectivo, algo que no, no lo es.

Los factores principales para obtener resultados en los buscadores, que por cierto, a la gente le importa bien poco el plural, solo les interesa Google, son el número de links y el número de visitas. Después de eso, tenemos otras categorías que caen en segundo lugar y después otras en tercero, la semántica de las hojas de estilo, cae como en la quita posición, siendo generoso; la semántica del HTML, al menos está en la tercera categoría.

Nuevamente, ojalá no fuera así, ojalá el sistema premiara realmente los buenos contenidos y la excelencia técnica, pero no es así. Aun no.

Ahora, si queremos agarrarnos a una literalidad, podemos decir que si, la semántica de las CSS ayuda; a fin de cuentas, aunque sea un punto de 100, es al menos un punto ¿no?.

Pero recordemos, si usamos ese argumento, y somos tan puntillistas, el aire que respiramos no es 79% nitrógeno y 21% oxígeno, tenemos que decir que el nitrógeno es 78%, el oxígeno 20, el argón casi 1% y la suma de los otros gases el otro 1%. Y así con todas las cosas.

;)

Por mi lo dejamos como está, nitrógeno 79 y oxígeno 21.

En cualquier caso, yo seguiré tratando de que mis páginas, mis CSS y mi combinación de ambos, sea tan semánticamente correcta como sea posible, a veces lo haré bien y a veces no, pero lo intentaré.

elsalta, no te preocupes por preguntar, cualquier duda es importante.

En cualquier caso, lo del preformato, no lo veo claro. Por lo que tendría que empezar a explicar cajas anónimas, cajas, elementos inline, como se calcula la altura de cada uno, etc etc y eso, justamente es una de las cosas más áridas de las CSS y en coasiones muy mal definido en las propias recomendaciones; aparte de que poca gente lo sabe, a menos aun les importa, lo importante es obtener el resultado.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #11 (permalink)  
Antiguo 28/06/2008, 23:21
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: ¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML?

Sólo para aclarar un pequeño detalle: sí afecta al SEO.
  #12 (permalink)  
Antiguo 01/07/2008, 07:57
Avatar de dacho  
Fecha de Ingreso: junio-2008
Ubicación: Argentina
Mensajes: 374
Antigüedad: 9 años, 6 meses
Puntos: 21
Respuesta: ¿Qué importancia tiene difinir los estilos sobre las etiquetas HTML?

En mi humilde opinion y experiencia.... Me parece que si afecta el SEO. El no utilizar en plenitud las etiquetas HTMLs ademas me parece que hace pobre lo semantico y creo que eso los buscadores lo valoran. Coincido con mikmoro y con metacortex.

De todos modos, y como todos sabemos el SEO no se basa en la semantica. Pero que ayuda ayuda.

Saludos... Damian...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 16:27.