lunes, 12 de julio de 2010

Tablas HTML, 'table', 'tr' y 'td'

logo COEPAUna tabla es un conjunto de filas y columnas para representar datos, que pueden ser de cualquier tipo: texto, imágenes, listas, otras tablas, etc. La forma de crear una tabla en un documento HTML:

  • <table> y </table> son las etiquetas de apertura y cierre de la tabla.
    Un atributo muy interesante para <table> es "summary", se usa para introducir una descripción del contenido de la tabla:
    <table summary="descripción de lo que representa el contenido de la tabla">
    ...aquí irán las filas y columnas con los datos de la tabla...
    </table>
    El atributo summary no será mostrado por el navegador web, pero se debe incluir siempre por motivos de accesibilidad y posicionamiento para algunos buscadores.
  • <tr> y </tr> definen cada una de las filas de la tabla (tr viene de table row).
  • <td> y </td> contendrán entre ellas el contenido (o datos) de cada una de las celdas de la tabla, ordenadas dentro de cada fila <tr> ... ... </tr> (td viene de table data).
  • <th> y </th> es para definir "cabeceras" de columnas o filas de dentro de la tabla (th viene de table head). Estas etiquetas sustituirán a las celdas de datos <td> en el lugar en que las queramos posicionar, por lo tanto también van dentro de las filas de la tabla en su lugar correspondiente.
    La etiqueta <th> debe tener el atributo scope para indicar si esta celda "cabecera" define el contenido de una columna o de una fila con los valores ="col" o ="row" respectivamente:
    • <th scope="col">... identifica a una "columna"
    • <th scope="row">... identifica a una "fila"
    El valor de scope no será mostrado por el navegador web, pero como antes, es muy conveniente incluirlo siempre por motivos de accesibilidad y posicionamiento.
  • <caption> descripción de la tabla </caption> es para indicar una descripción del contenido de la tabla, y está sí será mostrada por el navegador web, va justo después de la etiqueta <table>:
    <table summary="descripción de la tabla">
    <caption>descripción de la tabla</caption>

    <tr> <td> celda 1,1 </td> <td> celda 1,2 </td> <td> celda 1,3 </td> <td> celda 1,4 </td> </tr>

    <tr> <th scope="row"> cabecera 2,1 </th> <td> celda 2,2 </td> <td> celda 2,3 </td> <td> celda 2,4 </td> </tr>

    <tr> <th scope="row"> cabecera 3,1 </th> <td> celda 3,2 </td> <td> celda 3,3 </td> <td> celda 3,4 </td> </tr>

    </table>

    El código anterior mostrará la siguiente tabla:

    descripción de la tabla
    celda 1,1 celda 1,2 celda 1,3 celda 1,4
    cabecera 2,1 celda 2,2 celda 2,3 celda 2,4
    cabecera 3,1 celda 3,2 celda 3,3 celda 3,4

    El contenido de la etiqueta <caption> se muestra con ese fondo amarillento por que tenemos una regla CSS definida para esta etiqueta:

    caption{
    background-color: #F3F38E;
    }

    El resto del contenido de la tabla se muestra tal y como lo muestra por defecto el navegador que estés utilizando, pues no todos los navegadores web muestran las tablas html del mismo modo:

    Resulta muy interesante crear reglas de estilo CSS para cada uno de los elementos de nuestras tablas, y evitar así sorpresas inesperadas... bordes de celdas, espacio entre celdas, fuente de texto, tamaño de texto, color de texto, estilo, colores de fondo, etc.

Ejemplos de reglas o clases CSS para tablas

Además de la regla para <caption> mostrada antes, hay definida en este blog una clase de estilo CSS con el nombre ".tabla" (para algunas tablas del blos) con estas reglas:

/* fondo de la etiqueta "CAPTION" */
caption{
background-color: #F3F38E;
}

/* margen interno para todas las celdas TD de tablas */
td{
padding: 4px;
}

/* celdas TD de la clase ".tabla": color fondo, color texto */
.tabla td{
background-color: orange;
color: black;
}

/* celdas TH de la clase ".tabla": color fondo, color texto */
.tabla th{
background-color: blue;
color: white;
}

Para aplicar estas reglas de estilo a una tabla, se debe especificar en la etiqueta <table> así:

<table class="tabla" summary="descripción de la tabla" ... >

Y la tabla del ejemplo anterior se mostrará así:

descripción de la tabla
celda 1,1 celda 1,2 celda 1,3 celda 1,4
cabecera 2,1 celda 2,2 celda 2,3 celda 2,4
cabecera 3,1 celda 3,2 celda 3,3 celda 3,4

Otro ejemplo tabla con bordes, primero el código CSS, cuyas reglas se aplicarán también a las etiquetas td que estén dentro de nuestra clase tabla_bordes:

.tabla_bordes td {
border-spacing: 15px;
border-width: 3px;
border-style: solid;
border-color: #99CCCC;
border-collapse: collapse; /* une borde celdas con el borde de tabla */
padding: 10px;
text-align: center;
}

Y la tabla de nuestro ejemplo anterior se mostrará así:

descripción de la tabla
celda 1,1 celda 1,2 celda 1,3 celda 1,4
cabecera 2,1 celda 2,2 celda 2,3 celda 2,4
cabecera 3,1 celda 3,2 celda 3,3 celda 3,4

Como a la etiqueta de cabecera th no se le aplica ninguna regla, las celdas cabecera de la tabla se visualizan según las muestra el navegador web que estemos usando.

lunes, 5 de julio de 2010

Capas 'DIV' y uso de 'SPAN'

logo COEPAUna capa es un contenedor donde se pueden meter elementos html (textos, imágenes, listas, tablas...) y, más capas. Se emplean también mucho para las plantillas html o la maquetación o distribución web.

La forma de "invocar" una capa desde un documento HTML es:

<div>
contenido y elementos html y/o más capas
</div>

Y es posible definir reglas de estilo CSS para los elementos del contenido que irán dentro de una capa determinada, que luego se invocará desde el documento HTML de la siguiente forma:

<div class="nombre_capa_en_css">
contenido y elementos html y/o más capas
</div>

Y para "definir" (declarar o crear) una capa en el documento CSS, se procede de la misma manera que para crear una clase dentro del CSS:

.nombre_capa_en_css{
propiead1: valor1;
propiead2: valor2;
propiead3: valor3;
}

Por ejemplo, una capa típica es una que abarca todo el contenido del documento html, la capa contenedor:

.contenedor{
width: 880px; /* 880 píxeles de ancho para la capa */
height: 100%; /* la altura será el 100% de lo alto de todo el documento */
margin: auto; /* margen externo automático */
}

Comentarios HTML

En el código anterior, los textos que van entre las cadenas de caracteres "/*" y "*/" son comentarios de 'control' para el Webmaster, o sea, no tienen ningún efecto en el "comportamiento" del documento a la hora visualizarlo en un navegador web.

Ya de paso, los comentarios en el documento HTML se ponen entre los caracteres <!-- y -->.

Ejemplo de capas:

Capa 1

Contenido de la capa 1

Capa 2

Contenido de la capa 2

Capa 3

Contenido de la capa 3

Más contenido de la capa 1

Las capas de este ejemplo están definidas en el fichero CSS de este blog con sus colores de fondo, para que muestren los bordes de color negro, y un margen externo de 5 píxeles (width: 5px;)

Algunos enlaces sobre uso de capas, estructura y maquetación HTML, o maquetación web:


Uso de la etiqueta SPAN

La etiqueta <span> se usa para aplicar un estilo diferente a un determinado texto de, por ejemplo, un parrafo:

  • En el fichero CSS
    .rojo {
    color: red;
    font-weight: bold;
    }
  • En el fichero html
    <p>No bebas <span class="rojo">lejía</span> que es perjudicial para la salud.</p>

Al visualizarlo en el navegador:

No bebas lejía que es perjudicial para la salud.

Por otro lado, si queremos que todos los span se muestren de la misma forma -en negrita y de color rojo de color rojo- dentro del documento html, se puede definir una regla para span dentro del fichero CSS:

span {
color: red;
font-weight: bold;
}
IMPORTANTE Observar en este ejemplo, el selector la declaración de la regla "span" no lleva delante el caracter "."

viernes, 2 de julio de 2010

1.4.6 Logotipos

La función clave de un logotipo es identificar. Por lo tanto, un logotipo debe ser identificativo

Tipos de logotipos:

  1. Basados en la propiedad del propietario de la marca (kellog's, Levi's)
  2. contracción de la marca, o sus iniciales (BPL, CHS)
  3. Asociación nombre + imagen (icónico o abstracto)
"Logotipo" se refiere a la parte textual del diseño e "imagotipo" se refiere a la parte gráfica, pero solemos llamar "logotipo" de forma genérica a todo el conjunto.

Logotipos de las web 2.0 http://fontfeed.com/archives/the-logos-of-web-20/

1.4.5 Contenido

El contenido es el recurso más importante de un sitio web, por encima del diseño, los gráficos o cualquier otro elemento.

  • Contenido apropiado para tus lectores: tus textos han de tratar sobre las preocupaciones de los usuarios, lo que es importante para ellos, y en su lenguaje. Explica el problema que resuelves y cómo lo haces. Esto es o que les interesa a las personas que visitan tu web.
  • Diseño de autoservicio: una web es un autoservicio, y un establecimiento de este tipo está centrado en la conveniencia, la velocidad y lo económico:
    • Es conveniente cuando el usuario apenas tiene que pensar.
    • Es veloz cuando se reduce el tiempo que tarda el usuario en encontrar lo que quiere.
    • Es económico cuando con poco esfuerzo el usuario consigue realizar su acción
  • El formato de los textos: los usuarios escanean tus páginas, leyendo frases y palabras sueltas en pocos segundos con la intención de hacerse una idea de lo que contiene tu web. El formato de tus textos ha de ser acorde con ello.

    Usar negritas y párrafos de poca anchura y con una única idea. También usar un color diferente en palabras que quieras resaltar.

    El tamaño de los textos es importante.
  • Estructura del contenido: utiliza el estilo de "pirámide invertida": las conclusiones y lo más importante se presenta primero, y a continuación los detalles y la información de soporte. Trata de lo más específico a lo más general.
    Lo ideal es que el usuario encuentre en la primera línea la información esencial.

Párrafos de texto 'p'

Ya hemos visto algunos elementos ya vistos como son las imágenes y los vínculos, los párrafos de texto se definen dentro del documento HTML con la etiqueta <p> de la siguiente manera:

<p>Aquí va el texto del párrafo</p>

Y el código anterior se mostrará así:

Aquí va el texto del párrafo

Dentro de un párrafo de texto se pueden incluir imágenes (alineadas a la izquierda o derecha del texto)y otros elementos que veremos más adelante como capas, tablas, listas, etc.

Texto en negrita 'strong'

El texto en negrita se define con la etiqueta <strong> de la siguiente manera:

<p>Aquí va el <strong>texto en negrita</strong> del párrafo</p>

Y el código anterior se mostrará así:

Aquí va el texto en negrita del párrafo

Texto en cursiva 'em'

El texto en cursiva se hace con la etiqueta <em> de la siguiente manera:

<p>Aquí va el <em>texto en cursiva</em> del párrafo</p>

Y el código anterior se mostrará así:

Aquí va el texto en cursiva del párrafo

Saltos de línea 'br /' y lineas horizontales 'hr /'

Un salto de línea se hace con la etiqueta <br />, y no usa etiqueta de cierre. Una linea horizontal se hace con la etiqueta <hr />, y tampoco tiene etiqueta de cierre, se usan de la siguiente manera:

<p>Aquí va un salto de linea<br />aquí viene otro<br />y aquí otro<br />y ahora una linea horizontal<hr />y otra más<hr /> y ya está bien...</p>

Aquí va un salto de linea
aquí viene otro
y aquí otro
y ahora una linea horizontal


y otra más
y ya está bien...

Las lineas horizontales (o separadores) admiten algunas reglas CSS para determinar su color, grosor o el ancho.

1.4.4 Vínculos (enlaces, o hipervínculos)

logo COEPAtambién llamados hiperenlaces, enlaces o "links".

Es una palabra, frase o imagen de un hipertexto (HTML) que conecta con otra información. En la WWW, los enlaces (o vínculos) de una página WEB conectan con otras páginas, a menudo muy alejadas físicamente, pero relacionadas por sus temáticas. Hay enlaces de dos tipos genéricos, enlaces externos y enlaces internos:

Definir un enlace externo en un documento HTML:

Los enlaces externos son los que, al hacer click sobre ellos, siempre nos llevan a otro documento o página web diferente al que nos encontramos. Podemos definir un enlace desde el cual acceder a otra página cuando hacemos clic sobre el texto del enlace o sobre una imagen:

  • <a href="http://direccion-web.com/lo_que-sea">palabra o una frase concreta</a>
    Tanto a la "palabra" como a "una frase concreta" se les denomina texto ancla (o en inglés: anchor text).
  • <a href="http://direccion-web.com">una imagen como contenido</a>
    En el caso de imágenes, recordar siempre etiquetar la imagen con el atributo alt="descripción de la imágen" por motivos de accesibilidad y de indexación en buscadores.

Enlaces Internos:

Los enlaces internos son enlaces enlaces que nos conducen a otra parte del mismo documento en el que estamos (NO a otro documento html del mismo sitio web).

Para acceder a una parte concreta dentro de un documento html hay que insertar "anclas" dentro del un documento (no "texto ancla" o "anchor text" mencionados antes en la creación de enlaces), y estas "anclas" se definen con el atributo "name" en lugar de "href":

  • <a name="texto_identificativo_del_ancla">entidad a la que hacemos referencia</a>
    En el "texto_identificativo_del_ancla" no se pueden usar guiones medios (-) ni espacios, ni caracteres especiales. Es bueno, en este caso, usar guiones bajos (_) para separar las palabras. En la "entidad a la que hacemos referencia" se puede poner una párrafo -con sus respectivas etiquetas de apertura <p> y cierre </p>-, una imagen o lo que queramos, pero es más normal que esa "entidad" sea algún encabezado tipo <H2>, <H3>, etc. El uso de "anclas" se recomendable para SEO.

Y el enlace a ese "ancla" que hemos definido:

<a href="#texto_identificativo_del_ancla">palabra o frase o imagen</a>

Y el enlace a un "ancla" de una página externa, u otro documento html del mismo site:

  • <a href="url/direccion-web.html#texto_identificativo_del_ancla">palabra o frase o imagen</a>
    En primer lugar la url, que debe tener guiones medios (-) entre las palabras, después el símbolo almoadilla (#) y el "texto_identificativo_del_ancla" con guiones bajos (_) para separar las palabras

Atributos de enlaces

  • Atributo "target": Tal y como estamos haciendo estos enlaces, lo normal es que al hacer clic sobre uno de ellos, la web a la que "apunta" ese enlace aparezca en la misma ventana del navegador web que estamos usando, pero hemos visto que en ocasiones, al hacer clic en un enlace de una página web, la web de dicho enlace se nos abre en otra ventana (o pestaña) del navegador.

    Para que los enlaces de nuestra web se comporten de esta manera, debemos agregar a nuestra etiqueta de enlace <a> el atributo target con el valor ="_blank":

    <a target="_blank" href="nuestro-enlace.html">texto o imagen </a>

    Otros dos valores que tiene el atributo target -hoy en día en desuso, ya que se empleaban en las web diseñadas con marcos o frames- son ="_self" y ="_top". Con ="_self", al hacer clic en un enlace, la pagina de dicho enlace se abre en el marco (o frame) actual, mientras que con ="_top" desaparecen los marcos y la web del enlace a la que hemos hecho clic se mostrará ocupando toda la ventana del navegador web.

    Si no usamos el atributo target, cualquier navegador se comportará como si se emplease target="_self", y cuando estamos navegando como usuario en una web, si queremos que los enlacen se comporten como target="_blank" deberemos hacer clic sobre ellos con el botón central (o presinando la ruleta) del ratón.

  • Atributo "rel": para robots de buscadores (SEO)

    Teniendo en cuenta que el robot de Google solo mira los primeros 100 enlaces de un sitio web (también otros buscadores), en determinados casos puede que nos interese que algunos enlaces no sean considerados por los robots de los buscadores, para esto se puede usar el atributo rel... A los enlaces normales se les denomina DOFOLLOW (opción por defecto), mientras que a los que no queremos que sean indexados por los robots de búsqueda se les denomina NOFOLLOW. Para indicarle a los robots de búsqueda que no tengan en consideración un enlace:

    <a rel="nofollow" href="nuestro-enlace.html">texto o imagen</a>
  • Atributo "title": se emplea para añadir una descripción al enlace, además, tiene más relevancia este atributo que el propio texto ancla del enlace:
    <a target="_blank" title="WarWys blog" href="http://warwys.blogspot.com">WarWys</a>
    Al situar el puntero del ratón sobre el texto del enlace (o texto ancla) aparece el valor del atributo 'title', y como se ha indicado arriba, el texto de 'title' tiene más relevancia que el propio texto ancla del enlace para los motores de búsqueda.
Sobre enlaces externos e internos
Cuando hablamos de Diseño web Cuando hablamos de SEO
Enlaces internos Enlazan a una parte del mismo documento HTML en el que nos encontramos. Enlazan a las páginas del mismo sitio web en el que nos encontramos.
Enlaces externos Enlazan a otro documento HTML que puede ser del mismo sitio web o de otro sitio web diferente. Enlazan a otro otro sitio web diferente al que nos encontramos.

Enlaces a direcciones de correo electrónico (email)

Al hacer click sobre este tipo de enlaces se abrirá el programa cliente de correo electrónico que tengamos por defecto instalado en el sistema con la dirección de correo electrónico del enlace para empezar a escribir el mensaje:

<a href="mailto:correoelectronico@dominio.com" >texto o imagen</a>
Estos enlaces están en desuso, ya que son escaneados con intenciones fraudulentas como el envío de spam (o coreo basura).

jueves, 1 de julio de 2010

1.4.3 Imágenes: etiqueta 'img'

Formatos de imagen

Los hay de varios tipos como bmp, gif, jpg, png... pero no todos ellos son adecuados para la web, algunos ocupan demasiada memoria o no son compatibles con algunos navegadores.

  • Formato JPG o JPEG: se creó para almacenar fotografías, y cada una puede disponer de hasta 16 millones de colores ocupando un reducido tamaño.
    Cuanto mayor es su compresión peor es la calidad, pero el tamaño de la imagen será menor.
    La resolución ideal para la pantalla es de 72 píxeles por pulgada (también ppp, ó dpi), para la imprenta se recomiendan 300 ppp.

  • gif del planeta tierra girando sobre su ejeFormato GIF: es el más usado en Internet, almacenan un máximo de 256 colores o tonos de gris -para imágenes en blanco y negro-. Admite imágenes transparentes, entrelazadas -que van apareciendo a medida que las va cargando el navegador web- e imágenes animadas -guardando varias imágenes en un único fichero.

  • Formato PNG: se diseño como sucesor del formato GIF, por lo que combina ventajas de los formatos GIF y JPG.
    Ofrece compresión sin perdidas, admite transparencia y entrelazado, permitiendo hasta 16 millones de colores y transparencia de 8 y 24 bits, con lo que se consigue 256 niveles de transparencia... algunos navegadores antiguos como Internet Explorer 6 no soportan las últimas versiones de este formato

En cuanto al formato a elegir:

  • JPG para fotografías.
  • GIF y PNG para logotipos e imágenes con colores uniformes o imagenes con texto.

Imágenes como entidades (contenido) y como fondo (diseño)

Como entidad:

Para introducir una imagen en un documento HTML se debe emplear la etiqueta IMG con sus atributos necesarios:

<img src="ruta-de-la-imagen.gif" width=100 height=50 alt="texto alternativo" />

Los atributos de la entidad o etiqueta son:

  • src se especifica la ruta y nombre del fichero de la imagen
  • width define el ancho de la imagen (en píxeles)
  • height define su altura
  • y entre las comillas de alt se debe introducir siempre un breve texto descriptivo de lo que hay en la imagen, tanto por motivos de accesibilidad para personas discapacitadas, o para accesos desde dispositivos que no pueden mostrar imágenes, como por motivos de indexación por parte de los robots de los buscadores como Google

Como fondo del web (en el archivo de estilo CSS):

body {
background: url (ruta-de-la-imagen.jpg) repeat;
}
  • body, que es el selector de la regla, indica que la regla se aplica a todo el cuerpo del documento HTML.
  • background es la propiedad de la declaración de la regla, en este caso se refiere al fondo (background) del documento.
  • Nos queda el valor de la declaración, url es para indicar la ruta y nombre del fichero de la imagen, entre paréntesis (ruta-de-la-imagen.jpg) (o .gif o .png), y repeat; es para indicar al navegador web que debe mostrar la imagen repetida en todo el fondo de la página web a visualizar, que es la opción por defecto. Además de repeat también se puede usar repeat-x para que solo repita la imagen en horizontal, repeat-y para que la repita en vertical, o no-repeat para que solo la muestre una vez y no repita. Otra opción es fixed, y es para que no se mueva la imagen de fondo al movernos a lo largo de la web.

Dos formas de definir las reglas para definir imagen y color de fondo:

Forma larga:

body {
background-image: url(ruta-de-la-imagen.jpg);
background-color: #CCEECC;
}

Forma corta:

body {
background: #CCEECC, url(ruta-de-la-imagen.jpg);
}

Bancos de imágenes on line:

El tamaño recomendado de una imagen para insertar en una web no debe superar los 50kb, tampoco es conveniente cargar la página de muchas imágenes para no ralentizar demasiado su descarga.