De todo, como en botica

Ya estamos por nuestra clase Nro 3!

Esta semana nos dedicaremos a enriquecer y diversificar el contenido de las otras páginas del
sitio.

Ya tenemos algunos iconos, ya tenemos líneas, ya tenemos unas fotos "probadas" y alguna
experiencia en el armado de pases de diapositivas. Todo eso lo podemos utilizar ya mismo, así
que van algunos consejos...

Un sitio web es como una casa... si en una casa cada habitación está amoblada en un estilo
diferente, si los pisos están todos a diferentes niveles, si en una habitación las ventanas son
rectangulares con borde de aluminio y en otra vitrales del siglo XIII... seguramente causará la
sensación de que fue construida en espasmos, sin ninguna coherencia...

Podemos ir pensando en que las secciones pueden tener cierta autonomía (por ejemplo, es
buena idea que cada carrera tenga una tonalidad o gama de colores) pero es importante
unificar un poco "la casa" empezando por lo más evidente.

Paso uno, entonces: la tipografía.

Hay tipografías mejores y peores para la web. Times New Roman es buena (o lo fue) para el
periódico New York Times. Para un sitio web no. Es difícil de leer en pantalla, y tiene mucha
pinta de copiado y pegado del procesador.
Tipografías "buenas para pantalla" son las más legibles, las que tienen menos adornos
(remates o serif), que están disponibles de manera estándar en cualquier PC y que soportan
bien cuando los usuarios cambian de tamaño el monitor (o usan la lupa de pantalla)
En esta familia están las letras Arial, Verdana, y Tahoma.

Arial tamaño 10 u 11 queda bien para los párrafos con texto abundante. En negrita, y un poco
más grande, para los títulos. También es bueno combinar, por ejemplo:

Ejemplo de Título en Arial

Ejemplo de Subtítulo en Arial

Ejemplo de párrafo en Arial Ejemplo de párrafo en Arial Ejemplo de párrafo en Arial Ejemplo
de párrafo en Arial Ejemplo de párrafo en Arial Ejemplo de

Ejemplo de Título en Verdana

Ejemplo de Subtítulo en Verdana

Ejemplo de párrafo en Verdana Ejemplo de párrafo en Verdana Ejemplo de

párrafo en Verdana Ejemplo de párrafo en Verdana

Ejemplo de Título en Tahoma

Ejemplo de Subtítulo en Tahoma
Ejemplo de párrafo en Tahoma Ejemplo de párrafo en Tahoma Ejemplo de párrafo en
Tahoma Ejemplo de párrafo en Tahoma Ejemplo de párrafo en

¿Les parece que procedamos a unificar?

Una forma rápida de cambiar es seleccionar todo (desde el menú Edición) y aplicar una letra
base (por ejemplo, Verdana 10 para todo) y luego ir paso a paso con los título, subtítulos y
destacados.

Les proponemos que se arriesguen un poquito más con titulares grandes: pueden usarlos para
la presentación de las secciones. ¿Notaron que si uno elige una sección, y esta no tenia
contenido propio lo que queda en pantalla, hasta tanto uno elige la página dependiente de ese
menú, es la última página visitada?
Entonces el visitante hizo clic en "Ubicación" por ejemplo, pero luego eligió la sección
"Carreras" y hasta que no selecciona una página que forme parte de la sección carreras,
seguirá viendo la ubicación. Mmmm.... no queda bien!
¿Qué tal si verificamos que cada sección tenga al menos un título, y en todo caso una breve
descripción? Si no lo tiene, a jugar con las tipografías tamaño mamut...no tengan miedo, vean:

Ubicación
Y ya que mencionamos la ubicación, un detalle sencillo, gratuito y práctico. La zona del
instituto, visualizada a través de Google Maps.
Al igual que muchos de los contenidos ofrecidos en la web, se trata de obtener, copiar y pegar
unas líneas de código.

Ver turorial en http://www.slideshare.net/infdtic/minitutorial-mapas-en-la-web?from=ss_embed

Aprendiendo las Tablas...

Y a medida que hacemos la pasadita por las demás páginas, vamos poniendo una línea aquí,
una foto allá... Podemos unificar también las tablas que también son una especie de
maldición...

Básicamente las tablas las utilizamos para armar listados (Como puede ser el de la página
"docentes") y para posicionar imágenes o texto con imágenes, en nuestra web.

Leer clase extra sobre tablas

¿Y ahora qué dicen? ¿Quedó mas sabroso el sitio?

Prueben: pídanle a algunos colegas, o a los alumnos, que se den una vuelta y opinen (tienen
libro de visitas habilitado, no?)

Verán que ahora, después de este esfuerzo será más fácil añadir contenido.

Nos vemos la próxima!

Mariano

TAREAS DE ESTA SEMANA:

1. Unificar la tipografía usada en todas las páginas web del sitio

2. Unificar el uso de líneas, iconos, etc, en las páginas. Añadir imágenes, usando las
que subimos previamente a Upload
3. Añadir el mapa incrustado de Google Maps, en la página Ubicación
4. Editar o revisar las tablas que hubiera en el sitio (unificar si fuese necesario)