Infosofía := 0×69AEE7

Una de las confusiones que se suele presentarse a la hora de diseñar CSS es saber la diferencia entre los distintos selectores. CSS cuenta con los siguientes

• Selectores de tipo
• Selectores descendentes
• Selectores de clase
• Selectores de ID

Veamos exactamente que es un selector:
[css]p { font-size: 12px; }[/css]

Esto se denomina una regla CSS. p es un selector y lo que se encuentra dentro de los paréntesis es una declaración (puede haber más de una declaración). Una declaración está formada por dos elementos: propiedad y valor; la propiedad en éste caso sería font-size y el valor sería 12px.

El selector de tipo, índica que se apliquen las declaraciones a todas las etiquetas del documento. Este selector es el menos restrictivo
Por ejemplo:
[css]h4 { color: blue; }[/css]

Aplicado al siguiente código html
[html]

soy un h4

soy otro h4

¡Somos todos del mismo color!

[/html]
Salida

Como se puede ver en la salida sólo se aplico el estilo a todas las etiquetas que coincidieron con el selector.
En el siguiente ejemplo aplicaremos el mismo estilo a dos etiquetas, CSS nos ayuda a simplificar la notación, para no definir dos veces las mismas declaraciones.
[css]strong, em{color:green;}[/css]

Notar que los selectores están separados por coma

que lo aplicaremos a
[html]

Soy un strong verde

soy em verde y también un strong verde

[/html]
Salida:

Con esto logramos que todas las etiquetas strong y em en la página tengan el mismo estilo.

Los selectores descendentes sólo aplica las declaraciones cuando coincide el selector y el anidamiento de etiquetas especificado. Veamos un ejemplo para aclarar las cosas
[css]p strong {color:red;}[/css]

Notar que los selectores están separados por espacios

Y tengamos el siguiente código HTML
[html]

Tengo una parte strongpero ¡no es rojo!

Sólo dentro de mi es rojo

[/html]
Salida

No se aplico el estilo en h5, porque el selector descendente especifica que el estilo se aplique dentro de p, o sea se aplica el estilo al selector más a la izquierda y que se encuentre contenido en el selector de la derecha. Sólo dentro p cumple con el anidamiento especificado en el selector de descendencia.

A través de los selectores de clase podemos referenciar etiquetas especificas de la página que no lo podríamos lograr con los anteriores selectores. Una situación sería la siguiente:

Marcar con amarillos 3 etiquetas strong. Donde por lo menos una deben encontrarse dentro de cualquier etiqueta.

En está situación no podemos usar los selectores de tipo, ya que nos indica que sólo marquemos 3 strong, ni los selectores de descendencia porque los encabezados se pueden encontrar dentro de cualquier etiqueta.
Para solucionar dicha situación deberemos definir un selector de clase, estos se aplican a todas las etiquetas con el valor del atributo class igual al selector. Un mismo elemento puede tener una o más class.
[css].amarillo{color:yellow;}[/css]

Notar el signo punto al inicio del selector

Que aplicaremos al siguiente código
[html]

Tengo un strong pero no es amarillo

Tengo un strong y es amarillo

puedo ser amarillo en cualquier parte

Falta un ultimo strong

[/html]
La salida sería

Con el selector de clase podemos aplicar el estilo a una o más etiquetas determinadas.

Y por último tenemos el selector de ID, cumple la misma función que el selector de clase. Pero para aplicar dicho estilo se utiliza el atributo id de las etiquetas. Veamos como se define
[css]#unico{color:#6947a7}[/css]

Notar el signo almohadilla al inicio del selector

Y lo aplicamos en el siguiente código
[html]

soy el único strong de la página con este color

No puedo ser de ese color

Tampoco lo puedo ser

[/html]
Salida

Como se puede ver, estos dos selectores se comportan de manera muy parecida ¿Cuál es entonces la diferencia entre un selector de clase y uno de id? La diferencia es sútil y radica en que un selector de clase puede aparecer una o más veces en una misma página, en cambio un selector de ID sólo puede aparecer una sóla vez en la página, debido a que se utiliza el atributo id de la etiqueta, y en una misma página no pueden haber dos etiquetas con el mismo valor de id. Por lo tanto el selector de ID se utiliza para que aparezca una vez en la página, por ejemplo definir el estilo de la etiqueta body; por el contrario el selector de clase aparece varias veces en la misma página, como vimos en el ejemplo de los tres encabezados.

Esto cuatros selectores pueden combinarse entre sí y dar una amplia variedad de forma de especificar elementos en los documentos. Les dejo un último ejemplo para mostrarles lo muy complejo que se puede volver una notación de selectores
[css]
p#directo strong.especial em a#video { … }
[/css]
Las declaraciones se aplicarán sólo a un link que tenga el valor id igual a video y que se encuentre dentro de un elemento em, que a su vez se encuentre dentro de un elemento strong con el atributo class igual a especial, el cual se encuentra dentro de un elemento p con el atributo id igual a directo.

Acá les dejo una explicación de las dos formas en que se puede generar contenido dinámico en documentos web. Ya que he notado que varias personas no comprenden bien la diferencias de las dos formas. Ninguna forma es “superior” a la otra, sino que se complementan. Hay varias ocasiones donde es necesario usar ambas formas para poder solucionar un determinado problema.

Contenido dinámico del lado del servidor:

Por ejemplo imaginen el siguiente escenario, se está llenando un formulario para ser un usuario de un determinado sitio web. Al enviar el formulario, se envía un mensaje al servidor, pero no para solicitar un archivo de regreso. Sino, se debe pasar los valores del formulario a alguna aplicación del servidor para que lo procese. Por ejemplo se podría disparar una consulta a una base de datos, para verificar que el nombre de usuario indicado en el formulario no está asignado. Entonces aquí tenemos una generación de contenido dinámica, porque según los datos del formulario se generará distintos contenidos, por ejemplo si el nombre de usuario ya está registrado se podría mostrar una página indicando que dicho nombre ya está usado, o en cambio si los datos fueron correctos generar una página felicitando al nuevo usuario. Hay varios lenguajes para escribir estos programas: Perl, PHP, JSP, ASP.

Contenido dinámico del lado del cliente:

Hoy en día está muy de moda colocar “efectos” en las páginas. Uno que es muy usado es que cuando se presiona un botón (o se pasa por arriba de este) ocurre algo, por ejemplo, cambia de color o se abre una etiqueta que nos indica a que hace referencia ese botón, etc. Como se puede ver todo ese contenido dinámico es en respuesta a la interacción con el usuario y no es necesario para nada el servidor de donde se solicitó la página. Para generar esos efectos es necesario tener comandos incrustados dentro de la página y que actúen en función de lo que hace el usuario. Un lenguaje muy popular para esto es Javascript.

Como se puede ver la diferencia entre ambas es muy rígida, pero a través de la tecnología AJAX, es posible unir las otras dos y que interaccionen de una manera más flexible ofreciendo una mayor calidad al usuario, un mayor grado de interactividad.

Algo que hay que destacar es que AJAX en sí no es una tecnología ni un lenguaje de programación, es más bien la unión de varias tecnologías. AJAX es una técnica de desarrollo web.

Una explicación sómera de como se utiliza AJAX (sin entrar en detalles técnicos) podría ser el caso en que se busca una palabra en la barra de Google, al colocar la primera letra, el servidor despliega una lista de sugerencias de palabras que empiezan con esa letra. Al colocar una segunda letra se vuelve a mostrar otra lista de sugerencias.

Aquí se puede ver que para obtener la lista se necesita información del servidor y la lista está en función de la interacción que tiene el usuario con la página. De aquí que unimos las dos tecnologías y damos una apariencia de mayor fluidez al usuario, primero por que la página no se refresca completa, sino, la lista de sugerencias y segundo una comunicación más rápida con el servidor, porque no tiene que traer toda una página, sino una pequeña lista.

El otro día hablando con unos amigos estudiantes de la UTN-FRM [Nota: su mayor densidad de alumnos se encuentra en la carrera "Ingeniería de Sistemas de Información”]. Salio el tema sobre el pésimo servicio que ofrece la “autogestión” (un programa dentro del sitio web que gestiona la inscripción a materias o mesas de exámenes de los alumnos), y que si eres uno de eso “raros” que usa navegadores como Firefox XD, te las ves feas al entrar a la autogestión (o mejor dicho, ves fea la página ;)), no quiero ni pensar con Lynx… Realmente es muy pobre el programa y la página, entrar a inscribirse es toda una odisea, porque el diseño de la autogestión es espantoso… También deja mucho que hablar la página principal de la facultad. Toda persona con conocimientos mínimos en HTML sabe como es su estructura básica, ni hablar de un ingeniero, un ser superior el cual tiene conocimientos superiores a una persona normal. Además todo ingeniero siempre está muy apegado a los estándares, por lo tanto el fruto de su trabajo debe estar conforme a los estándares a los que se apega. Pero no es así con su sitio web. Sin entrar en detalles sobre los HORRORES que se pueden encontrar en el diseño de la página (ni hablar de la autogestión), respeten por lo menos la estructura básica de un documento HTML (salvo que quieran tener algo mal formado como ahora), o sea, <!DOCTYPE…><html><head></head><body></body></html>….