Métodos Avanzados / Un ejemplo motivador

Un Ejemplo Motivador
(A Motivational Example )

Para ayudarte a apreciar cómo páginas estilizadas te pueden hacer el diseño de tu red mas fácil, vamos a considerar como añadiríamos algo llamativo a encabezamientos de secciones en una página de la red. Las etiquetas por omisión del navegador   <h1>,....,<h6> te permiten fácilmente crear encabezamientos de varios tamaños, pero no te permiten mucho en la manera de variaciones en estilo. Por ejemplo, si tu deseas titular una sección con el encabezamiento tamaño mediano "Algunos Ejemplos de GIFs Animados" y estás satisfecha/o con el encabezamiento por omisión del navegador, puedes obtener

Algunos Ejemplos de GIFs Animados

Algunos Ejemplos de GIFs Animados

siempre y cuando estés dispuesto a pasar suficiente trabajo:

   
<p>     
<B>     
<FONT FACE="Helvetica,Geneva,Arial" size="+1"     
color="#cc0000">   
Algunos Ejemplos de GIFs Animados   
</FONT>     
</B>     
<p>     

Nota que para conseguir éste último encabezado tienes que especificar tipo de letra, tamaño, color, estilo ennegresido, y hasta espacios entre párrafos después del encabezado. (Explícitamente centralizamos los dos títulos anteriores para que éstos ejemplos no se confundan con los títulos actuales de la sección en ésta página.)

Posiblemente detallando todas estas especificaciones no sea gran cosa si todo lo que deseas usar tu estilo entallado es para un solo encabezamiento, o un par de ellos. Pero y qué tal si necesitas encabezados entallados (costomizados) para muchas páginas, cada una de ellas con varias secciones tituladas? O, una verdadera pesadilla, qué tal si después que hayas pasado por tanto trabajo, tienes que cambiar el estilo de todos los encabezamientos en todas las páginas para que se vean diferentes? Entonces tienes un grave dolor de cabeza.  Tienes que hacer mucho trabajo, escencialemente para hacer los mismos cambios una y otra y otra y otra vez. Seguramente, tiene que haber una mejor manera.

Existe una mejor manera: puedes usar páginas estilizadas para redefinir alguno o todos las etiquetas  <h1>...<h6> para que usen las nuevas versiones cuando tu lo desees. En adición, si mas adelante deseas o necesitas cambiar el estilo de los encabezamientos, todo lo que tienes que hacer es modificar las definiciones de tu estilo, y los encabezamientos se actualizarán para reflejar tales cambios. Hasta puedes preparar cosas de manera que, si lo deseas, globalmente puedes cambiar el formato de todos los encabezamientos para páginas múltiples, hasta para un una dirección completa en la red, con simplemente cambiar las definiciones de estilo en un solo lugar.

Inmediátamente vemos que páginas estilizadas tienen el potencial de ahorrarte enormes cantidades de tiempo y trabajo (y eliminar las posibilidades de errores que siempre pueden ocurrir si tienes que formatear cada encabezamiento de la manera anticuada). Y éste ejemplo se queda corto cuando se trata de lo que tu puedes hacer con páginas estilizadas.

Preparando[Formateando] webTeacher
(webTeacher Formatting)

Estamos completamente convencidos de las ventajas de usar páginas estilizadas, pero las usamos cuando creamos el webTeacher? No. Y por qué no? Posiblemente en una actualización futura lo haremos, pero webTeacher fue creado originalmente en el momento en que navegadores 3.0 estaban en su gran uso. IE 3 comenzaba a apoyar algunas características de páginas estilizadas, mas sin embargo, Netscape no apoyaba ninguna. Así que en ese momento, no podemos hacer uso de las páginas estilizadas ya que una gran porción de nuestra audiencia no habrían tenido los navegadores que mostrarían las características. En esta publicación del webTeacher queremos indroducirte algunos de los conceptos y capacidades de las páginas estilizadas, pero aún no hemos convertido el tutor en sí en usarlos.

Terminología: Hojas de Estilo y CSS
(Terminology: Style Sheets and CSS)

Antes de que lleguemos a nuestros ejemplos, vamos a decir algo sobre la terminología que estaremos usando en nuestras discusiones. A veces usaremos css com simples abreviatura para "cascadas de páginas estilizadas". En otras ocasiones usaremos css para denotar un  lenguaje en que páginas estilizadas estan escritas. y en otras ocasiones el término será usado de manera general para que funcione cualquier interpretación.

En adición, a menudo omitiremos el término "cascadas" y simplemente referirse a  "páginas estilizadas" ("style sheets") para ser breve. Pero debemos aclarar que estamos tomando un atajo cuando hacemos esto. Técnicamente, "cascadas en páginas estilizadas" se refiere a un tipo particular de páginas estilizadas, las cuales se adhieren a un conjunto especifico de convenciones determinado por grupos oficiales de estándares de la red. Existen otros typos de páginas estilizadas en uso en la red, pero éstas no son abiertamente apoyadas y no las discutiremos aquí.

Tampoco entraremos en una discusión extensa sobre el significado del término   "cascadas" "cascading". Solo notemos que no es un una mera palabra; se refiere a la manera en que las páginas son mostradas cuando existen conflictos en definición de estilo.