Computación Gráfica 4

Programa CG4 (Descargar)

CONTRATAR UN HOSTING:

Qué es un Hosting?
Hosting es una palabra del Inglés que quiere decir dar hospedar o alojar. Aplicado a Internet, significa poner una página web en un servidor de Internet para que ella pueda ser vista en cualquier lugar del mundo entero con acceso al Internet. A cada hosting se le asigna un espacio en el disco duro del servidor. El espacio disponible en cada plan es suficiente (100, 200 o 300 MB, etc.). Un Sitio Web puede contener varios cientos de páginas de texto o de imágenes, o una sola página de información. A cualquier momento que lo necesites.

Subir los archivos vía FTP:
FTP en Inglés quiere decir File Transfer Protocol (Protocolo para la Transferencia de Archivo).
Con la ayuda del FTP, se suben y bajan las páginas web al servidor de Internet.
Cada usuario dispone en el Tablero de Control de un Administrador de Archivos y del servicio de FTP para subir y bajar archivos y directorios al sitio. El servicio de FTP esta disponible a cualquier momento (24horas) del día.
Descargar Filezilla

---

NAVEGADORES WEB:

Son los softwares que se ocupan de realizar un pedido siguiendo las reglas de protocolo HTTP a un softare servidor web que esté instalado en algun hosting, solicitando una URl precisa.
El navegador espera la respuesta del software servidor que recibió el pedido, osea que un navegador es lo único imprescindible que necesita un usuario para poder navegar por internet, las páginas web siempre seran visualizadas dentro de un navegador.
El navegador interpreta el código, HTML generalmente, en el que está escrita la página web y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante enlaces o hipervínculos.
La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Los documentos pueden estar ubicados en la computadora en donde está el usuario, pero también pueden estar en cualquier otro dispositivo que esté conectado a la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos (un software servidor web)

PRINCIPALES NAVEGADORES WEB:

Mozilla Firefox:
http://www.mozilla-europe.org/es/products/firefox/
Extensiones Firefox:
https://addons.mozilla.org/en-US/firefox/addon/60
Simulador de versiones Internet Explorer:
http://www.my-debugbar.com/wiki/IETester/HomePage(solo para Windows)
Google Chromme:
http://www.google.com/chrome (solo para Windows).

Volver arriba

CREAR NUEVO SITIO EN DREAMWEAVER

Configuración de un sitio nuevo:

Configurar un sitio de Dreamweaver permite organizar todos los documentos asociados con un sitio Web. El cuadro de diálogo Configuración del sitio es donde se especifica la configuración del sitio de Dreamweaver.
Para abrir el cuadro de diálogo Configuración del sitio, seleccionar Sitio > Nuevo sitio.
La categoría Sitio del cuadro de diálogo Configuración del sitio es la única que se tendrá que rellenar para comenzar a trabajar en el sitio de Dreamweaver. Esta categoría permite especificar la carpeta local en la que almacenarán todos los archivos del sitio.
Nombre del sitio:
El nombre que aparece en el panel Archivos y en el cuadro de diálogo Administrar sitios; no aparece en el navegador.
Carpeta del sitio local:
El nombre de la carpeta del disco local en la que se almacenan los archivos del sitio, las plantillas y los elementos de biblioteca. Crear una carpeta en el disco duro o hacer clic en el icono de carpeta para localizar la carpeta. Cuando Dreamweaver resuelve vínculos relativos a la raíz del sitio, toma como referencia esta carpeta.

En la casilla Nombre del sitio, hay que poner el nombre que quieras para el sitio. No es relevante, podés poner cualquier nombre
La casilla siguiente es más importante. En Donde pone Carpeta raíz local hay que poner la dirección local del sitio. Es decir, hay que hacer una carpeta para el sitio y buscarla pulsando en el icono que pone una carpeta, señalada en la foto con un círculo.
Donde pone Dirección HTTP, sería la dirección del site en Internet. Puede dejarse en blanco.
La casilla Caché debe dejarse siempre activada. Al tener él caché activado se establece un registro de los archivos existentes de modo que Dreamweaver pueda actualizar rápidamente los vínculos al mover, cambiar el nombre o eliminar un archivo.
Por último hay que darle al botón aceptar, para cerrar el cuadro de diálogo.
La ventana Sitio mostrará a continuación una lista de todas las carpetas y archivos contenidos en el sitio local (si hubiera algo). La lista también actúa como administrador de archivos, ya que permite copiar, pegar, eliminar, mover y abrir archivos del mismo modo que en el escritorio de la PC.
Siempre hay que crear un sitio para cada Proyecto.

---

HOJAS DE ESTILOS EXTERNAS

Las hojas de estilo externas (o conectadas) son las que mejor responden a las exigencias de los desarrolladores y, sobre todo, las que interpretan mejor la filosofía de las hojas de estilo. Para comprender plenamente las peculiaridades de las CSS externas, pensemos en un sitio de grandes dimensiones con 1000 páginas HTML y un cierto tipo de formatación del texto. De repente, exigencias estéticas imponen el cambio del color de fondo, el tipo de carácter y la alineación del texto. Por lo que hemos visto ahora, tenemos tres casos:
» El sitio está construido en HTML clásico, por lo que deberemos intervenir en cada uno de los marcados de cada una de las 1000 páginas.
» El sitio está construido adoptando hojas de estilo en línea, por lo que también en este caso deberemos intervenir en cada marcado de cada una de las 1000 páginas.
» El sitio está construido con las hojas de estilo incorporadas, por lo que se deberá siempre modificar el encabezamiento de estilo de 1000 documentos, si bien no se deberá intervenir individualmente en los atributos de la página que permanecerán, así, inalterados.
» Aunque el último procedimiento limita en gran medida la mole de trabajo de actualización repecto a los dos primeros, se trata de intervenir, en cualquier caso, en un elevado número de documentos.
La solución de este problema consiste en hacer que los estilos de cada marcador se recojan en un documento independiente de las restantes páginas, las cuales simplemente los invocarán con una sencilla línea de código. De esta manera, las modificaciones del archivo "centralizado" se extenderán automáticamente a todos los documentos que lo invocan. En este hecho obvio se basan las hojas de estilo externas que aquí examinamos.
Crear una hoja de estilo externa e invocarla dentro de las páginas HTML es un procedimiento sencillo que consta de 5 fases:
» Una vez creado el archivo estilos.css (ir a archivo/nuevo/CSS) (.css es la extensión asignada a las hojas de estilo externas, mientras que el nombre "estilos" se puede cambiar por el que queramos.
» Abrir los documentos HTML de tu sitio e introducir, entre las marcas <HEAD> el siguiente código:
<link rel=stylesheet href="style.css" type="text/css">
» La marca link identifica un archivo externo al documento HTML con el que, en cualquier caso, tiene una relación directa. El atributo rel indica que el archivo conectado es una hoja de estilo (stylesheet). href invoca el recorrido del archivo .css externo (en este caso el archivo entendemos que está depositado en la misma carpeta en la que se halla el documento HTML. De no ser así, debería insertarse el recorrido del archivo, p. ej.: href="css/style.css"). El atributo type tiene la función antes vista para las hojas de estilo incorporadas.
» Dentro del documento, identifica los estilos que deben asignarse usando las marcas <H1> y <H2>. Por ejemplo, <H1> podría establecer los títulos y <H2> el texto de las páginas de esta manera:
<H1>Título de la página</H1>
<H2>Texto de la página de prueba, Texto de la página de prueba, Texto de la página de prueba, </H2>
El resultado de este ejemplo es el establecimiento en todas las páginas de tu sitio de un estilo común para las marcas <H1> e <H2>, de manera que con sólo modificar el archivo externo todos los documentos HTML enlazados se actualizarán como establecido. En el ejemplo del sitio de 1000 páginas, si debiéramos modificar tamaño y estilo de los títulos de página, bastaría tan sólo con intervenir en la marca <H1> del archivo externo estilos.css.

El objetivo, al combinar XHTML (para la estructura) y CSS (para el formateo) es separar el contenido de la presentación.
Cualquier cambio que se haga en los estilos afectará a todos los html vinculados a esa hoja de estilo, y se reflejará de inmediato en todas las páginas del sitio a la vez, sin tener que cambiarles absolutamente nada dentro de su código XHTML.
Validador de hojas de estilos

Volver arriba

LENGUAJES DE MARCADOS:

Se llaman lenguajes de marcado porque simplemente consisten en envolver textos con MARCAS o "etiquetas", que describen "que es" cada parte de una página web (si es un encabezado, si es una imagen, un menú, etc.) No es un lenguaje de programación, no hace falta ser programador para usarlos.
El HTML fue el primer lenguaje utilizado para estructurar una página web, sin este lenguaje no se podria hacer ninguna web.
Su único problema es que mal utilizado podria mezclar su jerarquización de sus textos.

fragmento de un archivo HTML:

Lenguaje XHTML:
Se creó para solucionar los problemas del HTML. El objetivo es estructurar jerárquicamente los contenidos sin profundizar en los detalles decorativos, con el cual se harán mediante otro lenguaje: el CSS, de esta manera desaparecerán varias etiquetas que mencionamos antriormente como bold, font, center, align, etc.
Lo mismo que mostramos anteriormente se verá así:

---

ESTRUCTURA XHTML:

Codificación:
La primera línea que debemos tener en un documento XHTMl es la que marca la codificación. Es el formato en el que se guardan los caracteres en el archivo. La Codificación estándar es la Unicode (utf-8) y soporta caracteres de todas las lenguas: occidentales, griegos, chinos, árabes, japoneses, etc.)

DTD (Definición de Tipo de Documento):
Una DTD es la parte fundamental de un documento, donde se definen restricciones a respetar en la estructura y sintaxis de ese documento. Puede estar incluida dentro del mismo documento, o puede ser colocada fuera del documento y ser compartida por muchos documentos (esto último es lo normal, el hosting del W3C aloja las DTD para el lenguaje XHTML). Las DTD se utilizan para determinar cómo podrá ser la estructura de un documento escrito en lenguajes de marcado.
Una DTD describe:
Elementos: indican qué etiquetas son permitidas y qué atributos, y cuál puede ser el contenido de dichas etiquetas.
Estructura: indica el orden en que pueden colocarse las etiquetas en el documento.
Anidamiento: indica qué etiquetas pueden ir dentro de otras, como su contenido.

Una DTD puede definir que se permiten las etiquetas <provincia><ciudad><barrio>, que primero debe abrir una etiqueta <provincia> antes que ninguna etiqueta <ciudad>, y que debe abrirse una etiqueta <barrio> antes de una <plaza>, y que <comisaría> puede colocarse una o varias veces dentro de <barrio> pero no puede ir suelta dentro de <provincia>las reglas de esa DTD sería así:

W3C:
El W3C es un consorcio (World Wide Web Consortium, o "Consorcio de la web mundial"), integrado por fabricantes de softwares relacionados con la web, fabricantes de navegadores, servidores, softwares de edición de HTML, etc. Por ejemplo, integran el W3C: Microsoft, Adobe, HP, etc.
Lista completa de miembros:
http://www.w3.org/Consortium/Member/List
El trabajo de este consorcio es consensuar y definir estándares para la web, entre ellos, los lenguajes HTML y XHTML.
Documentos XHTML 1.0 Estrictos:
Usaremos siempre este, al abrir dreamweaver y crear un documento nuevo nos dá la opcion a elegirlo.
La DTD a incluir al principio de un documento para indicar que es XHTML 1.0 Strict es:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
La mejor opción es XHTML Strict, solamente se usará otra DTD cuando alguien lo solicite (por ejemplo, Transicional se usará cuando un cliente exija que los enlaces abran en ventana nueva, (no permitido en Strict), o Basic cuando programemos exclusivamente para un celular o Palm).
Podemos Validar nuestro código en este link:Validator W3.org

Volver arriba

ETIQUETAS:

Las etiquetas funcionan envolviendo al texto, también se las denominan marcas o tags, como muestra el ejemplo anterior.
Las etiquetas son las letras envueltas entre "<" y ">"
Por ejemplo, para el título usamos un h1, substítulo usamos un h2 y al párrafo lo envolvimos con p.

Uniendo las etiquetas con el contenido estaría formando la base de todas las página web denominándose ELEMENTOS (apertura + contenido + cierre), O sea una página web es un conjunto de ELEMENTOS.
Por ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Adobe Dreamweaver</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body >
<h1>Clases de Dreamweaver</h1>
<h2>Contenido del curso</h2>
<p>Las clases son a domicilio</p>
</body>
</html>

» Al principio de todo se declara la DTD (Declaración de Tipo de Documentos), que le dice al navegador las reglas que tendrá que seguir el documento que viene a continuación (XHTML Strict).
» Luego viene la apertura de la etiqueta "html", que indica que todo lo que está envuelto dentro estará escrito en lenguaje HTML.
En esta etiqueta, es obligatorio especificar el atributo "xmlns" (namespace XML, o espacio de nombres, una URL donde están detalladas "qué etiquetas" usará el archivo, y "qué atributos", la URL indica el espacio de nombres de XHTML, o sea, estamos declarando que usaremos solamente las etiquetas y atributos permitidos para ese tipo de lenguaje). El espacio de nombres es como "el alfabeto" que utilizaremos.
» Dentro de la etiqueta "html" es obligatorio especificar el idioma en que está escrita la página, en dos atributos: "xml:lang" y "lang".
LINK DE LISTA COMPLETA DE IDIOMAS
» Luego abre el "head" o encabezado de la página. Allí adentro debe haber un "title".(obligatorio)
» Luego que cerramos el "head", comenzará el "body" o cuerpo del documento, donde pondremos todo el contenido de nuestra web, imágenes, textos, etc.
» Por último se cierra el body y la etiqueta html.

ATRIBUTOS (O CARACTERISTICAS DE LOS ELEMENTOS:)
Identificador, clase, tamaño, etc. Estos serían los atributos de los elementos del lenguaje XHTML
todos los atributos tienen siempre la misma estructura:
NOMBRE DEL ATRIBUTOS=VALOR DEL ATRIBUTO

REFERENCIA DE ETIQUETAS XHTML POSIBLES:

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.

Algunas etiquetas como:
applet, basefont, center, dir, font, isindex, menu, s, strike, u. (no son utilizadas actualmente).
Para ver las referencias de algunas:
http://www.w3.org/TR/REC-html40/index/elements.html
FUNCION DE CADA ETIQUETA:
Etiquetas que definen la Estructura general de una página:
<!DOCTYPE: especifica qué tipo de documento vamos a usar, y qué variante,
por ejemplo. XHTML Strict.
<html>: es la etiqueta que envolverá a todo el documento.
<head>: es la etiqueta que envolverá al encabezado del documento.
<body>: es la etiqueta que envolverá al cuerpo del documento.
Dentro del head se pueden incluir las siguientes etiquetas:
<base />: URI de base para direcciones relativas
<link />: Enlace a otros archivos (hoja de estilo, index, etc.).
<meta />: Metainformación sobre el documento, palabras clave, autor, etc.
<noscript>: Contenido a mostrar en navegadores que no admiten <script>.
<script>: Código de scripts de programación, típicamente de JavaScript.
<style>: Reglas de estilos incrustadas en el documento.
<title>: Título del documento (se muestra en la barra de título del navegador, y es útil para los buscadores).
<!-- -->: Comentario (sólo visible en el código fuente, no en la pantalla).
<a>: Hiperenlace, vínculo, enlace o link, como prefieran llamarlo.
<blockquote>: Cita larga (de varios párrafos).
<br />: Salto de línea.
<div>: División, bloque conceptual.
<hr />: Línea horizontal.
<img />: Imagen.
<span>: Envoltorio artifical (elemento en línea).

Texto (en bloque):
<address> dirección (información sobre el autor)
<h1> a <h6> encabezado (de nivel 1 a 6)
<p> párrafo
<pre> texto preformateado.
Descargar listado completo

---

CONTENIDOS:
El CONTENIDO de un elemento es lo que queda envuelto entre la etiqueta de apertura y la etiqueta de cierre. Habitualmente es texto, pero pueden ser también alguna otra etiqueta; se pueden "anidar" etiquetas como contenido de otras etiquetas, por ejemplo:
<div id="menu">
<ul>
<li>primer botón</li>
<li>segundo botón</li>
</ul>
</div>
Tenemos unos elementos "li", que están "anidados" dentro de un elemento "ul" que los esta envolviendo,a su vez, este elemento "ul" está anidado dentro de un elemento "div". Es decir, para el elemento "div" su contenido es el "ul" y todo lo que viene dentro:
<div id="menu">
<ul>
<li>primer botón</li>
<li>segundo botón</li>
</ul>
</div>

Volver arriba

MARCADO DE TEXTOS:

A la hora de manejar textos en las páginas web son válidas todas las condideraciones vistas para el diseño gráfico general, pero adaptadas a un medio que impone fuertes limitaciones.
En primer lugar, leer de la pantalla de una computadora es cansado para los ojos y un 25% más lento que la lectura en papel. Como consecuencia, los usuarios tienden a minimizar el número de palabras que leen, por lo que la comprensión y retención se reduce aproximadamente a un 50%.
Además, la web es un medio interactivo, y los usuarios tienden a navegar más que a leer, por lo que hay que tener especial cuidado en ofrecerles contenidos de calidad, perfectamente estructurados e interesantes, que consigan atraer su atención y mantenerla durante la lectura.
El texto es el contenido de mayor importancia en un sitio web, porque es el elemento común; mínimo al que todos los navegadores, lectores de pantalla, Celulars, Palms, etc. podrán acceder. En algunos casos, las imágenes no se podrán acceder, los objetos multimedia tampoco, siendo el texto el que siempre se podrá acceder.
Es necesario que el texto esté correctamente estructurado, no por su efecto visual; de tamaño que quiera causar en la pantalla (eso se decora por medio de las hojas de estilos), sino por su función dentro del sitio, por su valor semántico, de significado.
Para agregarle semántica a un texto, disponemos de elementos tales como encabezados, listas, citas, énfasis, definiciones, abreviaturas, divisiones, etc.
Una buena disposición de textos en una página web es la siguiente:

• Un titular que describa de forma clara el tema tratado.
• Un pequeño resumen de la información ofrecida.
• Una serie de palabras clave destacadas (en forma de vínculos, utilizando variables tipográficas o cambios de color).
• Segmentación de los contenidos en unidades más pequeñas, reforzadas con índices y listas con items.
• Subtítulos significativos, útiles.
• Una idea por párrafo.
• La mitad o menos de palabras que las que normalmente se utilizan en textos impresos. Veremos las diferencias entre dos clases de etiquetas para textos: los elementos EN LINEA y los elementos DE BLOQUE.
La principal diferencia entre los dos tipos de elementos es la forma en la que ocupan el espacio disponible en la página. Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea, aunque sus contenidos no lleguen hasta el final de la línea. Por su parte, los elementos en línea sólo ocupan el espacio necesario para mostrar sus contenidos.

Ejemplo:
<html>
<head>
<title>Ejemplo de elementos en línea y elementos de bloque</title>
</head>
<body>
<p>Los párrafos son elementos de bloque.</p>
<a href="http://www.google.com">Los enlaces son elementos en línea</a>
<p>Dentro de un párrafo, <a href="http://www.google.com">los enlaces</a>
siguen siendo elementos en línea.</p>
</body>
</html>

<h1>ESTE TITULO ES UN ELEMENTO EN BLOQUE<h1/>
<p>Acá también tenemos un elemento en bloque<p>
<p>Dentro de este párrafo, se encuentra este<a href="http://www.google.com">enlace</a>
siguen siendo elementos en línea.</p>
los elementos en línea no cortan la línea de texto en la que están incluidos, se adaptan ocupando el espacio mínimo necesario para mostrar el contenido que es envuelto por sus etiquetas. En cambio, los párrafos y el encabezado, aunque a veces contienen textos menores al ancho de la pantalla, no permiten que el siguiente párrafo se acomode a su derecha, se reservan el espacio hasta el final del renglón. Por lo tanto, encabezados y párrafos son elementos de bloque. La mayoría de los elementos de bloque puede contener en su interior elementos en línea y a su vez a otros elementos de bloque. En cambio, los elementos en línea sólo pueden contener texto u otros elementos en línea. o sea que un elemento de bloque no puede insertarse dentro de un elemento en línea. En cambio, un elemento en línea puede estar incluido dentro de un elemento de bloque o dentro de otro elemento en línea.
ELEMENTOS EN LINEA:
a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.
ELEMENTOS EN BLOQUE:
address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.
ESTOS PUEDEN SER AMBOS SEGUN COMO ESTEN UTILIZADOS:
button, del, iframe, ins, map, object, script.

---

Encabezados: h1, h2, h3, h4, h5, h6:

El texto de cada página web se tiene que estructurar mediante encabezados de niveles distintos según las secciones en que se divida ese texto, y para eso se usan las etiquetas h1, h2, h3, h4, h5, y h6 (la "h" es de "Heading" o "encabezado").
En tooda página debe haber siempre un solo encabezado de nivel 1, que corresponde a la etiqueta <h1>.
Luego, puede tener uno o más de cada uno de los siguientes niveles de encabezados, respetando el orden: si hay un h1, para marcar algo del siguiente nivel de importancia se debe usar un h2, no un h3 ni h4, es decir, no saltearse en jerarquía ningún nivel, no se debe pasar desde h1 a h3 o a h4 sin escalas...

---

Citas: blockquote, cite y q:

Para declarar citas usaremos las etiquetas blockuote, cite y q.
blockuote: Define una cita. Es comunmente usado para definir citas largas como párrafos.
ejemplo: <blockquote><p>El poder de la Web se encuentra en su universalidad. El acceso por parte de todos mas allá de la discapacidad es un aspecto esencial.</p>
</blockquote>
cite: Es usado para marcar la fuente o autor de la cita, al ser en línea , estará envuelta por alguna etiqueta en bloque como <p> o <h4>, etc.
ejemplo:<cite>Artículo 14: del manifiesto surrealista.</cite>
q: Cuando la cita es de texto plano (sin etiquetas) y es mas breve que un párrafo, es en línea, una parte de un párrafo.
Según el W3C, la etiqueta <BLOCKQUOTE> es para añadir sangrados largos y <Q>, para sangrados más pequeños, sin necesidad de romper el párrafo.
ejemplo: <p>La mediocridad para algunos es normal,<q>la locura es poder ver mas alla</q></p>
Párrafos: Los párrafos son bloques de textos que finalizan en un punto y aparte.
es el de menor nivel, no hay ningún bloque ni encabezado menor que el párrafo.
Para colocar textos en bloques, se utiliza el par de etiquetas <p> y </p>. Esta etiqueta puede incluir cualquiera de los atributos mencionados anteriormente.
Los saltos de línea (saltar de una línea a la siguiente) se crean usando la etiqueta <br/>.
La etiqueta <hr> se utiliza para insertar una línea horizontal.
ACRONIMOS Y ABREVIATURAS:
Dentro de los textos, encontramos con siglas, abreviaturas y acrónimos, que se deben marcar con sus etiquetas para que sean más comprensibles por el usuario, y para que aparezca la "definición expandida" de la abreviatura al pasar con el mouse por sobre la palabra. Para eso, XHTML distingue dos tipos: abreviaturas y acrónimos.
Abreviaturas: Las abreviaturas son el resultado de una reducción en la cantidad de letras de la palabra, que reducen al menos 2 letras, (por ejemplo, "aprox." por "aproximadamente") y siempre terminan con un punto.
La abreviatura se lee "traduciendo" o "expandiendo" lo escrito (lo más breve) por lo que en ello se representa (lo más extenso). Por ejemplo, "Sr." se lee forzosamente "señor", "EE.UU." se lee "Estados Unidos".
El marcado se realiza incluyendo SIEMPRE el atributo "title" que contiene el texto expandido:
<abbr title="contribuciones">contr.</abbr>
Se usa la etiqueta "abbr" para abreviaturas fuera de lo comun, o sea, las que no aparecen en un diccionario, ya que las abreviaturas comunes ya están incluidas en los diccionarios de los lectores de pantalla, y el lector de pantalla la expandirá automáticamente (así que no marcaremos "Sr.", "etc.", "atte." y similares abreviaturas comunes). También lo incluiremos en aquellas que puedan dar lugar a confusiones por abreviarse de forma similar a otra (ambigua):
<abbr title="correspondiente">corresp.</abbr>
corresp.

---

ACRONIMOS:
Se usa la etiqueta "acronym" para marcar siglas y acrónimos:
Siglas:
Las siglas utilizan las iniciales de las palabras que abrevian: por ejemplo, "WWW" es "World Wide Web", "CSS" es "Cascading Style Sheet", "XHTML" es "eXtensible Hyper Text Markup Language", etc. y no llevan punto. Las leemos "letra por letra", por ejemplo, a "CSS" lo pronunciamos como "ce, ese, ese".
También existen siglas que se pronuncian tal como se escribe la forma abreviada: "OVNI" (no decimos "o, ve, ene, i", sino que decimos "ovni" como si fuera una palabra en sí misma).
Por ejemplo si queremos escribir Ovni en el código lo escribiremos así:
<acronym title="Objeto Volador No Identificado">OVNI</acronym>
y en el navegador se verá así (pasar el mouse por arriba):
OVNI

---

LISTAS DE DEFINICION:
Se utilizan en listados de palabras con definiciones, al estilo de los diccionarios o glosarios. Cada palabra del diccionario o glosario está compuesta por dos elementos:
• El nombre
• La definición

Cada uno de estos dos elementos posee su propia etiqueta: <dt> se utiliza para el nombre del término, y <dd> para cada definición (un mismo término puede tener varias definiciones, en ese caso, luego de un "dt" vendrían varios "dd").

Todos los elementos de una lista de definiciones deben envolverse con la etiqueta <dl>.

<dl>
<dt>Sitio Web: </dt>
<dd>Conjunto de páginas web bajo un mismo dominio.</dd>

<dt>Página Web: </dt>
<dd>Un documento HTML o XHTML individual.</dd>
</dl>

Todos los elementos de una lista de definiciones deben envolverse con la etiqueta <dl>.
así quedaría:

Sitio Web:

Conjunto de páginas web bajo un mismo dominio.

Página Web:

Un documento HTML o XHTML individual.

Definiciones individuales (en línea):
Para marcar la definición de una sola palabra poco conocida, propia de un léxico técnico, en vez de crear una lista por un solo caso, en XHTML se incluye la etiqueta "dfn", que permite explicar el significado de la palabra en el atributo "title". ejemplo:
<p>Con estos síntomas, podría tratarse de un caso de <dfn title="Imagen o sensación subjetiva, propia de un sentido, determinada por otra sensación que afecta a un sentido diferente">sinestesia</dfn></p>

Con estos síntomas, podría tratarse de un caso de sinestesia

Espacios en blanco:
Los espacios en blanco dentro del código fuente de una página XHTML son ignorados cuando se visualiza en el navegador la página ya interpretada.
En XHTML se considera "espacio en blanco" no solo a los espacios en blanco propiamente dichos, sino también a los tabuladores, los retornos de carro y el carácter de nueva línea (enter).

Para que entre dos letras o palabras se visualice más de un espacio, se debe sustituir cada espacio en blanco agregado por este texto:
&nbsp;
Eso es una de las tantas "entidades HTML" , y como todas, comienza con un ampersand, termina con punto y coma, y en este caso, las letras "nbsp" significan "Non Breaking SPace" (espacio "irrompible").
Cada &nbsp; genera UN espacio en blanco, por lo que debemos escribir tantos &nbsp; como espacios en blanco querramos que se muestren en el texto.
Por ejemplo:
<p>Palabras &nbsp;&nbsp;&nbsp;separadas &nbsp;&nbsp;&nbsp;por &nbsp;&nbsp;&nbsp;3 &nbsp;&nbsp;&nbsp;espacios.</p>

Saltos de línea:
Para marcar una nueva línea y forzar a que el texto que sigue se muestre en la línea siguiente hacia abajo, se utiliza la etiqueta <br />
Esta es una de las varias etiquetas "vacías" de XHTML, es decir, que no envuelve ningún texto. En teoría, esta etiqueta debería abrirse y cerrarse sin encerrar nada entre medio: <br></br>.
Pero para estos casos, se debe utilizar un atajo llamado "cierre abreviado", para indicar que una etiqueta se está abriendo y cerrando simultáneamente.
El cierre abreviado se escribe dejando un espacio y una barra luego del nombre de la etiqueta:
<p>Palabras<br />
en<br />
distintos<br />
renglones<br />
pero<br />
en<br />
el<br />
mismo<br />
párrafo.</p>
Para seguir investigando:
es.wikibooks.org

Volver arriba

IMAGEN DE SUSTITUCION:

Insertar/Imagen/Imagen por sustitución

---

ANIMACION PARA ENCABEZADOS CON WOW SLIDER:

Descargar desde la web: wowslider.com
o desde acá: descargar archivo
tutorial

otro: css slider.com

---

CODIFICACIONES DE CARACTERES Y ENTIDADES:

Existen numerosas variables a la hora de intercambiar archivos de texto, que influyen en cómo se ven los "caracteres especiales" incluidos en esos textos.
Es necesario que coincidan 4 declaraciones para que los caracteres especiales se vean bien:
1) El editor tiene que guardar los archivos en el sistema de codificación que uno decida. Por ejemplo, en Aptana eso se configura en "Project -> Properties -> Info -> Text file encoding". Allí podemos elegir ISO-8859-1 o UTF-8 que son las dos mejores opciones hoy día.
2) El tag meta y el atributo xml:lang dentro del tag HTML deben especificar la misma codificación: si el editor lo guardó como utf, estos tags deben decir utf, y lo mismo en caso de haber usado ISO.
3) El servidor web (Apache) del hosting donde coloquemos las páginas debe "servir" las páginas avisando en sus cabeceras HTTP el mismo tipo de codificación que utilizamos.
4) El navegador del usuario debe tener configurado "autodetectar" codificación para no tener problemas con los acentos y eñes.
Así que son varias las posibles causas de errores, es algo muy común descubrir sitios que no le prestaron atención a este tema, y que muestran cosas como P?gina; en vez de Página, o errores similares.
Lo preferible es codificar todos los caracteres raros; que no pertenecen al alfabeto inglés mediante las reglas de la norma ISO 8859-1. Eso se puede especificar con la etiqueta "meta" dentro del encabezado ("head") de nuestros html:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Esa norma exige que cada caracter raro de las páginas así declaradas sea escrito como su correspondiente "entidad HTML" .
Dejando declarado ISO-8859-1, entonces los acentos los tendremos que convertir a su correspondiente entidad, esto Dreamweaver lo hace automáticamente escribiendo en "Vista de Diseño"
<h1>P&aacute;gina!</h1>
Veamos la estructura de eso que quedó entre la p y la g:
& a acute ;
El ampersand indica el inicio de un caracter especial, y el punto y coma el final.
Encontramos una "a" y la palabra "acute" (que significa "acento"), o sea que se escribirá una "a" con acento.
En cambio, si en el tag meta elegimos utf-8, podemos poner los acentos directamente como los escribimos normalmente:
<h1>Página</h1>
eso requiere que el hosting sirva los archivos como UTF-8, y no todos los hostings lo hacen... por ahora, suele ser más seguro tomarse el trabajo de codificar las entidades y guardar como ISO-8859-1, eso funciona bien en todos los hostings.

Algunos de los caracteres que se utilizan habitualmente en los textos y que no se pueden incluir "directamente" en las páginas web, sino que hay que codificarlos, son:
• Los caracteres que utiliza el lenguaje HTML para definir sus etiquetas y atributos: < (menor que), > (mayor que) y " (comillas).
• Los caracteres especiales de idiomas distintos al inglés (ñ, á, é, í, ç, ¿, ¡, etc.)
Ver lista completa de las 252 entidades HTML
En el segundo caso, el de los caracteres especiales de idiomas distintos del inglés, también nos conviene utilizar las entidades correspondientes. Habría una potencial solución, pero en los hechos es muy raro que se produzca, y es que, desde que se crea una página, hasta que llega al navegador del usuario, todos usen la misma codificación:
• El diseñador debería crear la página con su editor guardándola con una codificación.
• El servidor web debería almacenar la página y servir esas páginas con la misma codificación anterior.
• El usuario debería solicitar y visualizar las páginas con un navegador que use la misma codificación.
Es muy complicaodo... si en todos los procesos anteriores se utilizara una misma codificación de caracteres, los caracteres propios de los idiomas se podrían escribir directamente:
<p>Este párrafo contiene ñ y á en UTF-8</p>
La palabra "párrafo" incluye la letra "á". Si el editor utilizó codificación UTF-8, el servidor web también y el navegador del usuario también, el texto se verá correctamente
En la mayoría de los casos, el eslabón "débil" es el usuario, del que no sabemos qué navegador utilizará ni cómo lo tendrá configurado. En ese caso, se mostrarán caracteres "extraños" en todos los acentos y en todos los caracteres especiales...
Lo que hay que hacer es reemplazar cada carácter problemático por su correspondiente entidad:
Se puede copiar y pegar el texto completo de cada página que estemos por diseñar, en alguno de estos conversores de entidades, que nos devuelven el texto con todas las entidades ya convertidas en unos pocos segundos:
Conversor de entidades HTML

---

LISTAS:

Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas aunque con alguna en común:

Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada elemento de la lista estará encabezado por la tag <li> que puede o no llevar la tag de cierre </li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones.
Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la tag <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.
O sea que las listas ordenadas (<ol> <ol/>), es donde el orden de los elementos es importante. cada elemento está numerado, por ejemplo: las instrucciones de un manual.
En las listas sin ordenar (<ul> <ul/>) (donde no es importante el orden que tengan.
SIN ORDENAR:
<ul>
<li>Inicio</li>
<li>Servicios</li>
<li>Mantenimiento</li>
<li>Contacto</li>
<ul/>
ORDENADAS:
<ol>
<li>Página uno</li>
<li>Página dos</li>
<li>Página tres</li>
<ol/>

Resaltar textos:
En los renglones de texto, ciertas veces necesitamos resaltar o destacar palabras, para que al leerlas les demos mayor importancia. Este énfasis es un elemento en línea, no corta el renglón al momento de aplicarlo.
Existen dos etiquetas para destacar textos, cada una con un nivel distinto de importancia: la etiqueta "em" se usa para enfatizar "levemente" un texto, y la etiqueta "strong" para darle un nivel "máximo" de importancia.
Si bien los actuales navegadores decidieron aplicar un formato visual de "negrita" para la etiqueta "strong" y de "itálica" para la etiqueta "em", la forma de mostrar ese énfasis puede cambiarse fácilmente mediante CSS.
se puede declarar que los énfasis se marquen en un tamaño o color de letra, decorados con subrayados o con tipos de letra diferentes. Los lectores de pantalla como JAWS enfatizan lo marcado con "strong" o con "em" pronunciando más fuerte y lento el texto. Es decir, la "forma" de enfatizar no necesariamente debe ser visual, pero esas palabras deben ser "remarcadas", "destacadas", de alguna manera.
ejemplo:
<strong>texto resaltado</strong>
<em>texto resaltado mas leve<em/>
texto resaltado
texto resaltado mas leve

---

LISTAS ANIDADAS:

Cuando queremos que dentro de una lista crear "sub-listas" o "listas anidadas", como la siguiente:

Adentro de uno de los "li" (el de artículos) abrimos otra nueva "ul" interna, con sus propios "li".
<ul>
<li>Inicio</li>
<li> Artículos
<ul>
<li>Electrodomésticos</li>
<li>Audio</li>
</ul>
</li>
<li>Contacto</li>
</ul>
Es importante que el "li" que envuelve a esa lista interna, se cierre después de que cerró la lista, no antes.
Y el texto de ese "li" (el que dice "Artículos") va antes de la lista interna.

Volver arriba

ESTRUCTURA DE UN ENLACE:

Los enlaces en XHTML se crean utilizando la etiqueta "<a>" ("anchor", o "ancla").
Es una etiqueta en línea, por lo que no genera ningún salto de línea cuando se la intercala dentro de un texto.

<p>la dirección de google es href="http://www.google.com.ar" title="buscador web">google</a> el más visitado.</p>
Esta etiqueta debe poseer uno de estos dos atributos: href, o id, según la dirección (el "sentido") del enlace.

• El primero de estos atributos, href (hiper-referencia) sirve para establecer, en el punto de origen del enlace, cuál es la URL del recurso de destino del mismo.
• El segundo de los atributos mencionados, id (identificador), es para cuando debemos marcar un punto de destino, solamente se usa para un enlace interno dentro de una página.
Cuando el usuario pulsa (o activa con "enter") un texto o imagen marcado como enlace, el navegador solicita la URL indicada en el atributo href, es decir, percibimos que el navegador "nos lleva" a ese recurso o página.

Atributos adicionales
A la estructura básica de un enlace, además del imprescindible "href" que indica la URL de destino, podemos adicionarle más información (de ser necesario, no es obligatorio) con los siguientes atributos:
title: Especifica un texto que complemente al texto visible del enlace, cuando éste por sí solo no fuera suficiente para dar a entender el destino del enlace (es OPCIONAL).
hreflang:
Especifica el lenguaje en que está escrita la página a la que lleva el enlace. Así, nos da la posibilidad de evitar dirigirnos a ese enlace si no manejamos el idioma especificado.
ejemplo:
<p>Vean la <a href="http://www.december.com/html/x1/element/a.html" hreflang="en">referencia de enlaces en XHTML</a>.</p>

Enlaces externos (absolutos):
Se llama "absolutos" a aquellos enlaces que utilizan URL que incluyen el protocolo, el servidor/dominio y la ruta completa al archivo de destino.
Se llama "externos" a los enlaces que apuntan a otro servidor/dominio distinto del nuestro. todos los enlaces externos necesariamente son "absolutos" (no alcanzaría con especificar solamente la ruta de carpetas y archivos, sino que es preciso incluir el protocolo y el servidor/nombre de dominio).
Los enlaces externos son típicos en banners, anuncios, etc.
ejemplo:
<a href="http://www.google.com.ar/search?q=fotos" title="Buscar fotos en Google">Buscar</a>

Internos Relativos al documento actual:
apuntan a nuestro mismo dominio:
<a href="http://www.jorgepiccini.com.ar/ensayos.html" title="Galeria fotografica">Fotografía</a>
Internos relativos a la raíz del sitio:
Es "más breve",no tenemos que escribir el protocolo y el servidor (estos enlaces solo funcionan "online", en un servidor web real, no es nuestra propia computadora). Lo que simboliza la "raíz" de nuestro sitio, es la barra: "/" que el navegador reemplaza, al encontrarla al inicio de la URL, por el protocolo y el nombre de dominio "actual", donde se está ejecutando la página que contiene el enlace:
<a href="/consultas.php" title="consultas de clientes">Consultar</a>
Es común los enlaces internos relativos a la raíz del sitio, un enlace que permite volver a la página de inicio del sitio desde cualquier otra página, sin importar a qué nivel de anidamiento dentro de carpetas y subcarpetas se encuentren éstas:
<a href="/">Inicio</a>

Dentro de una misma página:
Cuando haya contenidos largos dentro de una página html. Lo ideal es crear un índice que nos permita saltar entre secciones de la página.
Para hacerlo tndremos que trabajar en las dos puntas del enlace, no solo en la etiqueta de "origen" del enlace, sino también en la etiqueta de "destino" del enlace.
Para la etiqueta de origen, marcaremos el enlace utilizando un numeral o "almohadilla" ("#") seguido de un nombre que le daremos a la sección de destino:
<a href="#servicios">Ir a Servicios</a>
Debemos entonces marcar el lugar de destino del enlace, poniendo ese nombre de sección mencionado. Para esto utilizaremos el atributo "id" (Identificador), en este caso no lleva el numeral:
<h2 id="servicios">Servicios</h2>

Hacia un lector de correos:
Estos enlaces no son recomendados, porque su problema está en que muchos usuarios a la web desde lugares públicos, donde no tienen instalados programas de correo como el Outlook o Thunderbird ocasionando que no nos pueden enviar el correo.
Lo ideal es crear formularios, donde se verá más adelante
Pero veamos igual la estructura de este enlace:
<a href="mailto:info@jorgepiccini.com.ar">Consulta sobre los cursos</a>

Volver arriba

IMAGENES:

La estructura mínima de una etiqueta de imagen debe incluir el nombre de la etiqueta "img", y los atributos "src" (source, "origen" o URL de la imagen), y "alt" (texto "alternativo", a ser mostrado solo si el navegador no puede descargar la imagen):
Vemos que esta etiqueta, al no envolver ningún texto entre su apertura y su cierre, debe escribirse con cierre abreviado, es decir, en vez de escribir etiquetas de apertura y de cierre sin contenido:
Si en la URL especificada se encuentra ubicado un archivo de imagen con ese nombre, se visualizará la imagen en la parte exacta del documento en que está la etiqueta "img".

Existen otros atributos que pueden incluirse optativamente en una imagen, de los cuales los más utilizados son "width" y "height" (ancho y alto de la imagen), y "longdesc" (URL a un archivo entero aparte, puede ser una página HTML completa, donde se explica el contenido de la imagen, si éste fuera imprescindible para entender el documento donde se encuentra, como por ejemplo, un gráfico de barras con cifras, una infografía, etc.).
Suele emplearse para que personas con alguna deficiencia o limitación visual puedan acceder al contenido de las imágenes a través de un texto alternativo más extenso y explicito que el que proporciona alt.
Para las imágenes es recomendable incluir los atributos "width" y "height", si lo omitimos, obligamos al navegador a averiguar por su cuenta esas medidas, haciendo más lenta la carga de la imagen.
<img src="auto.jpg" width="117" height="109" alt="ford fiesta rojo" />

Alt:
Todo contenido de imagen; en la web debe llevar un texto alternativo, que explique la función de ese contenido no textual dentro del documento.
Los lectores de pantalla leerán ese texto alternativo, los navegadores de solo texto (Lynx) lo muestran, Google lo indexa, y los navegadores visuales pueden mostrarlo como una información complementaria, y en caso de que una persona haya desactivado las imágenes (por problemas con la velocidad de conexión), verá en lugar de la imagen el texto alternativo.
Opera, Firefox, Google Chrome y Safari implementan el atributo "alt" exactamente como el W3C pide que se implemente, mostrando su texto "alternativo" solo en el caso en que la imagen NO se cargue en el navegador (por el motivo que fuere, lentitud de conexión, imágenes desactivadas en el navegador, etc.). Pero no es un texto para ser mostrado siempre.
En cuanto a la longitud de ese texto alternativo (atributo "alt") es conveniente que sea breve, ya que para el caso de necesitar una descripción larga, se puede utilizar el atributo "longdesc", llevándonos a un html externo.
<img src="dibujo.png" longdesc="descripcion.html">

IMAGENES DECORATIVAS:
Son utilizadas con objetivos estéticos, mejorando la apariencia visual de una web. Son esencialmente "condimentos" para el ojo que mira la pantalla.
Algunos ejemplos de imágenes decorativas que podemos mencionar son las viñetas (bullets), espaciadores, separadores de secciones o zonas de la pantalla, degradés de colores, bordes curvos, o fotos usadas puramente para decorar un texto. Si elimináramos por completo todas las imágenes decorativas de una página, eso no cambiaría en absoluto el significado del contenido de esa página.

IMAGENES NO DECORATIVAS:
A diferencia de las imágenes decorativas, el objetivo de las imágenes "no decorativas" es transmitir información. Son parte del contenido de la página. Por ejemplo, fotografías de personas, lugares, eventos, gráficos con datos, diagramas, logotipos con texto.
Todas las imágenes que son parte del contenido requieren un "alt", y el "alt" debería ser un reemplazo suficiente de la imagen cuando ésta no pudiera visualizarse.
El texto alternativo debería ser breve, si éste no alcanzara, debe usarse el atributo "longdesc":

ENLACES CON IMAGENES:
Para que una imagen funcione igual que un enlace de texto, simplemente debemos envolver la etiqueta "img" con la etiqueta "a"
<a href="ruta.html"><img src="images.jpeg" /></a>

MAPA DE IMAGEN:
Un mapa de imagen es una manera de aplicar más de una etiqueta de enlace a una misma imagen (es comun en botoneras muy gráficas, imposibles de lograr solo con imágenes de fondo), o de aplicar un enlace a solamente una "parte" de una imagen y no a toda la imagen completa.

CODIGO:
<map name="Map" id="Map">
<area shape="rect" coords="46,41,255,82" href="#" alt="boton_inicio" />
<area shape="rect" coords="48,110,258,151" href="#" alt="boton_staff" />
<area shape="rect" coords="39,172,262,215" href="#" alt="boton_historia" />
<area shape="rect" coords="43,238,250,284" href="#" alt="boton_directores" />
<area shape="rect" coords="49,304,247,351" href="#" alt="boton_contacto" />
</map>

Volver arriba

SELECTORES DE ELEMENTOS XHTML (etiquetas):

Los selectores los vamos a usar para elegir a qué partes de los archivos XHTML de un sitio se aplican las declaraciones de estilos
Existen diferentes tipos de selectores, la primera manera de seleccionar partes de archivos XHTML: si con un selector queremos "apuntar" a todas las apariciones de una etiqueta o tag XHTML, solamente tendremos que escribir el nombre de la etiqueta.
ejemplo: si vamos a declarar cuáles serán las propiedades y sus valores para los todos los items de lista <li> de un sitio:

SELECTORES DE IDENTIFICADOR UNICO id):
Este selector es el que selecciona elementos únicos, identificados con un id. Se puede apuntar a un solo elemento identificado de forma única en la página mediante su atributo id los atributos "id no se pueden repetir dentro de una misma página, por eso este tipo de selector apuntará a un solo destinatario. Como cualquier etiqueta puede usar el atributo "id", se puede apuntar a cualquier elemento de la página, simplemente lo marcamos en el XHTML con un atributo id único, y se podrá marcar desde la hoja de estilos. En la hoja de estilos deben llevar un numeral # antes del nombre de "id" al que apuntamos

y en el html tendremos esto: <div id>"encabezado"</div>;

SELECTORES DE CLASES:
Este selector es el que selecciona una "clase", un "conjunto" de elementos agrupados.
Su función es distinta al de identificador único ya que el otro apunta apunta siempre a un único objeto, el selector de clase se usa con la intención de apuntar hacia un grupo o conjunto de elementos, totalmente arbitrario, dentro de una página.
La idea es que, en la hoja de estilos, definiremos declaraciones para un nombre de clase, y luego, en el código HTML de la página, haremos que varios elementos utilicen esa clase, creando un conjunto arbitrario de cosas que por sí solas no estaban relacionadas. Las clases se declaran en la hoja de estilos escribiendo un punto antes del nombre que querramos darle. Por ejemplo, si queremos marcar errores con un fondo de un color:

luego en la página html le asignaremos la clase asignándole el atributo class.
<p class="error">Disenio web</p>
<li class="error">enlase</li>

MULTIPLES CLASES:
Se pueden asignar varios nombres de clases a un mismo elemento
los valores del atributo class pueden ser una lista de nombres de clases separados por un espacio
<p class="nota advertencia">Argentina</p>
entonces esto apuntará a los párrafos que tengan aplicado las clases: nota advertencia

SELECTORES CONTEXTUALES:

Esto seleccionará todos los elementos "li" que estén dentro de un elemento cuyo "id" sea "menu". Cualquier otro "li" que esté fuera de algo llamado "menu", no se verá afectado.
o también podemos seleccionar esto:

nos seleccionará el páarrafo que esté dentro del menu y a su vez dentro del encabezado.

DECLARACIONES MULTIPLES:
Se puede asignar la misma regla con todas sus declaraciones a distintos destinatarios, en vez de repetir una y otra vez la misma definición, escribimos antes de las llaves la lista de "destinatarios" SEPARADOS POR COMAS:

esto sería lo mismo que decarar a cada uno por separado.

SELECTOR UNIVERSAL:
Este se asigna por medio de un asterisco * yes para asignar una regla de estilos a todos los elementos de una página.
Es común definr margin y paddings a todos los elementos a cero, como valor por defecto.
esto asigna margen y relleno en cero ya que los diferentes navegadores le asignan márgenes distintos a todos los elementos de una página, más adelante veremos como se soluciona con hojas de estilos de reseteo

Descargar listado de selectores

Volver arriba

ELEGIR PALETAS DE COLORES PARA TU SITIO:

El modelo RGB requiere de 24 bits para describir el color de cada pixel en la pantalla y el total de combinaciones posibles mediante este modelo es exactamente de 16.777.216 colores. Aunque cualquier monitor a color puede mostrar todos estos tonos, por razones de economía algunas computadoras usan un sistema de sólo 8 bits conformando así una paleta de 256 colores (tomados de esos 16 millones posibles).
En un monitor capaz de mostrar solamente 256 colores, aquellos tonos presentes en una imagen que no se encuentran en la paleta del sistema son simulados por combinación de pixeles (técnica que se conoce como dithering). Por eso, en la medida de lo posible, es conveniente seleccionar para nuestras páginas colores que puedan ser visualizados correctamente en estos sistemas.
El inconveniente es la diferencia entre los colores definidos en la paleta de Windows y la de Mac. Ambos sistemas tienen solamente algunos colores en común, que son usados por Netscape y otros navegadores. Estos colores en común conforman la paleta Web o paleta segura (safety palette).
Esta paleta segura tiene como característica estar basada en los valores RGB con incrementos de 20% entre cada valor, por lo que resulta un total de 216 colores.

Existen utilidades para crear la paleta de colores de un sitio, es decir, para decidir la combinación de colores que usaremos para decorar todo en la página: siempre, antes de diseñar, armaremos una lista de los colores que aplicaremos a textos, fondos, botones, franjas de color, etc. en todo nuestro sitio.

Objetivo:Definir 3 colores:
* Color Predominante o Primario: Es el tono predominante en la página, el que da color a la mayoría de los elementos de esa página. Muchas veces, suele ser el color aplicado al "body" entero, o a un contenedor ("div") colocado por encima del "body", dando fondo a todo el resto de contenidos. También suele coincidir con el logotipo de la web, o el color institucional.
* Color Análogo o Secundario: Es el segundo tono mayoritario dentro de la página, y sirve para limitar zonas diferenciadas de ese fondo principal (bloques laterales, menúes, pie, etc.). Lo ideal es que sea un color muy similar al predominante/primario, solo que con alguna ligera variante de gama (más claro, por ejemplo).
* Color Complementario o Destacado: Es el color usado para resaltar y destacar detalles, para llamar la atención. Tiene que contrastar con los dos colores anteriores, por lo cual debe usarse moderadamente, en iconos, barras separadoras, botones, etc. Lo ideal es que sea el color complementario del color primario de la página. Es absolutamente distinto a los dos anteriores (si los anteriores eran fríos, este es cálido, es el exactamente OPUESTO en el círculo cromático).
Herramienta generador de colores web
Tutorial en español

Si nos decidimos por cierto color predominante, viendo sitios web creados con esa gama de colores:
http://www.cssdrive.com/

BOOKMARKLET:
Existe una herramienta muy cómoda para copiar códigos de color de una web que nos guste. Se trata de Bookmarklet para Firefox, es una web que vamos a visitar con Firefox y que colocaremos en nuestro "favoritos".
Para que se vea debajo de la barra de direcciones de nuestro navegador Firefox la barra de marcadores (favoritos). En ese momento, arrastramos el botón redondeado gris que dice "CSS Prism" hasta la barra de marcadores, y lo soltamos allí
Luego, cuando querramos saber los colores de una página web, simplemente la visitamos con nuestro navegador Firefox, y una vez en ella, pulsamos el botón "CSS Prism" de nuestra barra de marcadores. Eso hará que aparezca encima de la página un enlace por cada hoja de estilos que tenga vinculada la página actual.
Si pulsamos cada enlace, nos llevará a la web de CSS Prism mostrándonos todos los colores utilizados con su código hexadecimal, y en qué línea de la hoja de estilos fue utilizado ese color. Es muy útil para copiar esquemas de color fácilmente.

Colors In Corporate Branding And Design
Paletas de colores que usaron Grandes Corporaciones y como fueron aplicados en sus webs, la relación entre los colores del logo y sus contenidos web, la elección de colores complementarios o análogos, etc.

CIRCULO CROMATICO

Dos colores se llaman complementarios cuando dentro de un círculo cromático se encuentra exactamente en el punto opuesto.
Los colores de la mitad izquierda son los colores "fríos" (azules, verdes, violetas) y los de la mitad derecha son los colores "cálidos" (rojos, naranjas, amarillos).
Se puede usar este círculo para definir el color principal del sitio, y su complementario. Como el círculo está dividido en colores fríos y cálidos, siempre trabajaremos contrastando un color frío con uno cálido.
Por ejemplo, el color complementario del "rojo-violeta" es el "amarillo-verde".


COLORES ANALOGOS:
Dos colores se llaman análogos cuando rodean a un color por ambos lados; son los colores "vecinos" en el círculo
Son la combinación ideal para elegirlos como color primario y secundario de una paleta de colores. Son casi iguales, sumamente parecidos al principal:

LOS TEXTOS Y SU FONDO
Lo ideal para la legibilidad siempre ha sido el texto negro sobre fondo blanco, pero en caso de que no sea posible por la idea de diseño aplicada, debemos buscar un color cálido sobre uno frío, o uno frío sobre uno cálido, y si es el complementario, tanto mejor será la combinación.
Herramienta para probar variantes de colores de fondo:
* uicystudio.com
* www.snook.ca
Los colores de fondo más oscuros o cálidos (llamativos) suelen usarse esporádicamente, para llamar la atención sobre un texto breve a destacar del resto.
Un punto crítico será probar esa combinación de colores con una herramienta que simule las distintas enfermedades visuales que padece más del 10% de los usuarios de internet, como por ejemplo, Deuteranomalía (5% de los hombres, 0,4% de las mujeres), Deuteranopía (1% de los hombres), Protanopía (1% de los hombres), Monocromatismo, etc.
El generador de esquemas de colores de colorschemedesigner.com nos permite simular cómo verían la página las personas con esa enfermedad, así podemos asegurarnos de crear combinaciones de colores que permitan distinguir el texto sobre el fondo en todos los casos, es decir, que nadie se quede sin poder leer el contenido de nuestras webs.

Volver arriba

DIVISIONES DE UNA PAGINA:

Para marcar las secciones o divisones una página, según la función que cumple cada bloque, por ejemplo: menú, encabezado, contenido, pié, etc.
Para lograr esto usaremos la etiqueta <div> (división)
Su objetivo es agregarle un "nombre" o "identificador" mediante el atributo "id", a un bloque de código (a una sección de la página).
Por ejemplo, vemos las 5 divisiones o en que se divide esta página (cada uno corresponde a una etiqueta "div"):

<div id="contenedor_general">
<div id="encabezado">
<p>aca puede ir el logo de la empresa</p>
</div>

<div id="parte menu">
<p>aca pueden ir unos botones</p>
</div>

<div id="contenido1">
<p>aca puede ir algo de texto</p>
</div>

<div id="contenido2">
<p>aca puede algo ir de texto</p>
</div>

<div id="menu2">
<p>aca puede ir otra botonera</p>
</div>


<div id="pie">
<p>aca puede ir una direccion</p>
</div>
</div> (cierre del contenedor_general).

Es común encerrar todo el contenido de la página en un único div que funciona como contenedor principal. Luego, vienen los otros divs , y luego, puede haber otro nivel dentro de cada uno, es decir, dentro del contenido principal. No es común superar un tercer nivel de "anidamiento" de divs dentro de divs.
Tipos de Divisiones:
• Un bloque
• Dos columnas
• Tres columnas
• Dos columnas, cabezal y pié
• Tres columnas, cabezal y pié
• Y más variantes.

Volver arriba

MODELO DE CAJAS / CSS PARA BLOQUES

El modelo de cajas es el tema clave de CSS a la hora de intentar diseñar, es decir, "acomodar" cosas en la pantalla.
El modelo de cajas nos permite tratar a todos los elementos de bloque incluidos en una página como si fueran "cajas" rectangulares: podemos definir el alto y el ancho de cada caja, el margen entre una caja y otra, el borde de cada caja, y el espacio de relleno desde el borde de una caja hacia adentro. También podemos definir la forma en que se visualizan las cajas: las podremos ocultar, desplazarlas a otra posición, o ubicarlas en un lugar exacto.
El desafío que deberemos superar es desarrollar nuestra capacidad de imaginación para lograr "ver" las cajas aun cuando no se vean en la pantalla (cuando no tengan un borde, o un color de fondo que nos permita reconocerlas a simple vista).
También contaremos con herramientas muy prácticas como el "Outline" de la "Web Developer Toolbar" del navegador Firefox, que nos pintará un borde alrededor de cada caja de la página.
Nos vamos a concentrar en las etiquetas de bloque. Muchas veces, nos estaremos refiriendo a las etiquetas "div", que son etiquetas de bloque, como los párrafos, los encabezados, las listas, los elementos de listas, etc.
De estas etiquetas de bloque, veremos que tienen en común el comportarse como cajas, es decir, las utilizaremos para contener otras cosas, y de allí el nombre de "modelo de cajas".
Nuestros sitios estarán diseñados gracias a las cajas: un gran rectángulo será el cabezal, dentro de él, otro rectángulo será el "h1", luego habráotro rectángulo que serÁ el cuerpo de la página, con muchos otros "rectangulos" dentro (los encabezados, párrafos y listas, etc.)
Rectángulos dentro de rectángulos... eso serán nuestras páginas web.

En esta imagen vemos las 8 zonas o cajas "principales" en que fue dividido el cuerpo de esta página: marca, logo, menú, menú interno, título de página, banner, contenidos y pié. Todos ellos, en XHTML serán "divs" con un "id" apropiado.
Pero a su vez, dentro de estas 8 cajas, tendremos otras cajas más chicas: una lista "ul" dentro de "menú", lista que a su vez tendrá dentro elementos de lista "li".
Y dentro del contenido, tendremos h3, párrafos, etc.

PROPIEDADES DE LAS CAJAS

las características que toda caja, por el solo hecho de ser caja y nada más que por eso, posee de nacimiento.
A las propiedades que pueden definirse en una caja, y a la manera en que esas propiedades son representadas visualmente (mostradas) por los navegadores.
Las cajas son 100% visuales, es decir, son una forma de "visualizar" el árbol de "etiquetas en bloque" del documento, en una pantalla de un navegador visual.
A estas cajas no hace falta crearlas, las cajas se generan solas, automáticamente, cada vez que insertamos una etiqueta de bloque en nuestro archivo.
Las principales propiedades que una caja posee son: un ancho, un alto, un borde, un espacio de "relleno" entre el borde y el contenido, un margen externo en relación a otras cajas cercanas, un color y una imagen de fondo:
Las propiedades CSS que definen cómo se ve cada caja, según el orden en que las visualiza el usuario, son:
• Contenido (content): es todo el contenido HTML del elemento (texto, imágenes, listas, etc.)
• Relleno (padding): es el espacio hueco (es opcional) entre el contenido y el borde que lo encierra.
• Borde (border): línea (de color o invisible) que encierra completamente al contenido y a su relleno, a "ambos dos", como decía cierto profesor mío...
• Imagen de fondo (background-image): imagen que se muestra por detrás del contenido y de la zona hueca del relleno (de ambos, otra vez, igual que el borde).
• Color de fondo (background-color): color que se muestra por detrás del contenido y del hueco de relleno, y por detrás también de la imagen de fondo, si hubiera una.
• Margen (margin): espacio libre entre esta caja y otras posibles cajas adyacentes a ella.
Tanto el relleno como el margen son "transparentes", por lo que en el espacio ocupado por el relleno se verá el color o imagen de fondo (si estuviera definido alguno de los dos, o ambos), y en el espacio ocupado por el margen se verá el color o imagen de fondo de su elemento padre (si estuviera definido algún color o imagen). Si ningún elemento padre tuviera definido un color o imagen de fondo, se verá el color o imagen de fondo del "body" de la página (si estuviera definido).

Vamos a ver ahora en detalle cada una de estas propiedades aplicables a las cajas

ANCHO Y ALTO
Las dimensiones del contenido de cada caja varían según varios factores: cantidad de contenidos en sí (más o menos texto, tamaño de las imágenes que contenga, o de otras cajas que tenga adentro), anchura (width) dada a ese contenido, anchos de tablas, listas, etc. que estuvieran dentro de esa zona de contenido.
En cambio, el tamaño (horizontal y vertical) de la caja en sí, están definidos por la suma de otros factores.
El tamaño de una caja es igual a la suma total de: el ancho (width) de su contenido, más los márgenes, bordes y paddings, derecho e izquierdo.
Si A es el tamaño total de la caja, y C es la anchura (width) de sus contenidos, la fórmula quedaría:
ML + MR + BL + BR +PL+ PR + C = A
Siendo que "left" quiere decir "izquierdo", y "right" es derecho:
ML = margin-left
MR = margin-right
BL = border-left
BR = border-right
PL = padding-left
PR = padding-right
C = anchura de su contenido (width)
A = tamaño total
Veamos un ejemplo práctico para entenderlo: tenemos una imagen cuya anchura (width) es de 100 pixeles, y le aplicamos un margen de 10 pixeles; también le aplicamos un padding (relleno) de 10px, y un borde de 10px pixeles (todas estas propiedades, a ambos lados).
El tamaño total que ocupará ese elemento imagen, según la fórmula anterior, será de 160 pixeles:

10px + 10px + 10px + 10px + 10px + 10px + 100px = 160px
De la misma forma, el tamaño vertical de cualquier caja está compuesto por la suma total del alto (height) del contenido más los márgenes, bordes y paddings superiores e inferiores.
Saber esto nos servirá para "acomodar" esa imagen en el documento, y para que pueda "convivir" con otros elementos vecinos. No saber calcular con este modelo trae serios problemas. Las imágenes se correrán del lugar en el que queremos colocarlas, se saldrán de sus cajas contenedoras, otros elementos reaccionarán de la forma contraria a la que pretendíamos hacer...
Para darle ancho a un bloque de contenidos, utilizamos la propiedad "width", y para darle alto, "height".
Veamos a un ejemplo práctico:
#cabezal {
width: 500px;
height: 120px;
background-color: #999;
}

#cuerpo {
width: 500px;
}

#pie {
width: 500px;
height: 60px;
background-color: #CCC;
}
El marcado XHTML:
<div id="cabezal">Logo</div>
<div id="cuerpo">
<h1>Sitio de Pepe</h1>
<p>Estamos llenando esto de texto para ver cómo un bloque al que no se le especifica una altura, se adapta a la altura necesaria para mostrar la totalidad de su contenido, o sea, este texto.</p>
</div>
<div id="pie"><p>Copyright</p></div>

BORDE:
Las 4 características que afectan a los bordes de una caja (traducción previa: "top" significa superior, "bottom" inferior, "left" izquierdo, y "right" derecho):
Propiedades para el espesor del borde (width)

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width
• border-width (es una síntesis de los 4 anteriores en lo que respecta a espesor del borde). Cada una de las 4 medidas se especifica en el orden: top, right, bottom, left, en el sentido de las agujas del reloj, comenzando de las 12 en punto:

Definiendo los 4 valores:
Si defino los 4 valores, corresponderán a top, right, bottom y left, en ese orden:
#caja {
border-width: 5px 2px 1px 12px;
}
o definir un solo valor
#caja {
border-width: 5px;
}
Propiedad Color (color)

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color
• border-color

Al igual que con el espesor, se puede especificar un color distinto para cada lado por separado, o utilizando la abreviatura "border-color", con el mismo funcionamiento de top. right, bottom y left y las mismas posibilidades de especificar 4, 3, 2 o 1 valor.

Los colores podemos expresarlos en hexadecimal, que es lo más conveniente.

Un ejemplo simple:
#caja {
border-color: #FC0 #FF0;
}

Propiedad Estilo (style):
• border-top-style
• border-right-style
• border-bottom-style
• border-left-style
• border-style

Es el tipo de "línea" del borde, si es sólida, punteada, de a rayitas, etc.

Toma una serie de posibles valores fijos: dotted, dashed, solid, double, groove, ridge, inset, outset (en sus editores aparecerán todas las variantes). Es una propiedad algo conflictiva ya que no todos los navegadores interpretan todos esos valores de la misma manera.

MARGENES.
Llegó el momento del "tema clave". El margen es el más difícil de detectar de los elementos de una caja, ya que siempre (sin excepciones) es transparente, y solo se percibe cuando estamos en compañía de otro elemento vecino que se ve afectado, "empujado".

El margen se cuenta desde el borde del elemento hacia afuera.
El hueco que genera es producido por márgenes, pero... ¿qué márgenes, si yo no declaré ningún margen en esa hoja de estilos? Bien, quizás ustedes se imaginaban (con muchísimo sentido común) que si yo no defino márgenes, los valores por defecto de esos márgenes serán "0" (cero). Pues NO, no es así...

Cada navegador le aplica márgenes "por defecto" a todas las etiquetas de bloque, para que así cada elemento esté "separado" de los otros aunque no hayamos especificado nada en la hoja de estilos.

Pero, para empeorar las cosas, no todos los navegadores le aplican el mismo valor a los mismos elementos!

Por supuesto, podemos (y debemos) sobre-escribir esos valores por defecto con nuestras propias reglas de estilo. Y existen reglas de estilo "estandar", universales, que podemos copiar al principio de nuestras hojas de estilo nuevas, para "resetear" todos los valores de márgenes y paddings de un sitio antes de ponernos a definirlos nosotros.

De lo contrario, nos encontraremos con que al aplicar un margen, en un navegador se ve a una distancia y en otro se ve a otra distancia diferente, debido a que algún otro elemento de la página, al que no le definimos margen o relleno, tiene un valor por defecto distinto en cada navegador.

Luego de leer esta lección, encontrarán una lección completa acerca del reseteo de valores por defecto, les recomiendo que no se distraigan ahora, y que lo lean después de terminar esta lección.

En síntesis, todos los elementos ubicados en el body (desde que abrió la etiqueta <body> hasta que cierra </body>) tienen margen. Y ese margen es transparente, no se le puede dar color ni aplicar bordes.

PROPIEDADES DEL MARGEN
Las 4 propiedades posibles respecto al margen son:

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin (abreviatura de las otras 4, en el orden típico de las agujas del reloj comenzando a las 12).

RELLENO:
El relleno es el espacio interno, desde el borde de una caja, hasta su contenido:
Las propiedades del relleno son:

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding (abreviatura de los 4 anteriores).

Debido a que algunos navegadores antiguos como Explorer 6 manejan mal el modelo de caja, cuando un elemento "padre" (contenedor) tiene un padding aplicado, ese navegador le agrega el valor del padding y bordes al ancho del elemento mismo, y eso traerá problemas a la hora de calcular anchos y posiciones.

Por eso, para "despegar" elementos "hijos", no conviene aplicarle padding al elemento padre, sino margin a los elementos "hijos".
#contenedor p{
margin: 1em;
}
Para finalizar esta primera aproximación al modelo de caja, comentemos qué se verá a través de cada área cuando la página se muestre en un navegador:

• En el área de Contenido y en la de Relleno se verá aquello que se determine en la propiedad "background" del elemento (un color o una imagen, según el orden de apilado).
• En el área de Borde se verá aquello que se determine en las propiedades del Borde (ancho, color y estilo).
• El área de Margen será siempre transparente.


Recordatorio de las principales propiedades del lenguaje CSS en PDF:
Descargar Cheat-sheet CSS (también llamada "chuleta" CSS).

HOJAS DE RESETEO

Para qué sirven?
Como ya sabemos las diferencias en cuanto a la interpretación que los navegadores dan a los elementos HTML.
Es decir, dichos elementos traen por defecto paddings, margins, y algún que otro atributo mas que los navegadores asumen de diferentes manera.
Esto es fácilmente testeable, si creamos un documento Web simplemente con un H1, un H2 , un párrafo y unas listas, sin ningún tipo de estilo, observaremos que los elementos, tales como encabezados, párrafos o listas adoptan diferentes estructuras, en cuanto a presentación se refiere.
Dependiendo de su jerarquía o posición.
Esto sucede porque los diferentes navegadores, (Firefo, IE, Opera, etc,), traen de por sí unos atributos Css predefinidos.
Por este motivo es importante que de alguna manera digamos a los diferentes navegadores que partan de cero al interpretar nuestros documentos Web.
Para ello utilizaremos lo que se conoce por reset o reseteo de estilos.
Dónde la colocamos?
Hacemos el llamado inmediatamente antes de nuestra hoja de estilos principal:
Hay multitud de hojas de reseteo que podemos utilizar en la Web.
Podemos descargar una desde aquí

---

MENUES DE NAVEGACION | Verticales y Horizontales

Qué son los menúes de navegación?
La barra horizontal arriba de una página que contiene los enlaces se llama menú de navegación y su razón de ser es la de permitir estructurar todas las páginas web en función de un menú o de una lista de páginas principales que estan accesibles en todas las páginas.
Así, el visitante que llega a cualquier página puede en una simple observación , puede ver el contenido de las grandes páginas del lugar según su interés.
Los menús de navegación son uno de los elementos principales de un sitio web, su buen funcionamiento y diseño influyen directamente en la forma en que el lector encuentra la información.
Un factor a considerar en los menús es la compatibilidad entre navegadores, siendo los basados en CSS, los que tienen menos problemas.
El menú de navegación es un elemento importante en el diseño de una web ya que gracias a él los usuarios son guiados hasta los contenidos que ofrecemos además de mostrar la estructura de nuestro site.
Un buen menú de navegación no solo atraerá más usuarios sino que provocará un aumento en el número de accesos a los contenido ofrecidos.
Conceptualmente los menúes son listas.
Son listas de enlaces agrupados, normalmente sin ordenar (ul). Para armar menúes de un solo nivel, vamos a usar listas sin ordenar, y en el caso de menúes con sub-menúes, utilizaremos listas anidadas.
Podremos agregar adicionalmente un "span" envolviendo el enlace de la lista, o aplicando alguna clase a alguno de los elementos de lista, en cuanto al decorado lo haremos mediante CSS.
Desde la hoja de estilos modificando algunas de las características por default de los elementos de lista (li) y de los enlaces (a), se pueden quitar las viñetas, modificar el ancho y alto, padding, imagen de fondo, etc.

Algunos Menúes interesantes para ver:
http://www.tooler.com.ar/2006/02/05/menus-de-navegacion-realizados-con-css-para-descargar/
http://cssmenumaker.com/
http://exploding-boy.com/images/cssmenus/menus.html
http://www.csstea.com/css-gallery-news-and-resources/264-120-excellent-examples-of-css-horizantal-menu.html
http://www.webdesignbooth.com/45-inspiring-navigation-menus-that-you-must-see/
http://spritegen.website-performance.org/
http://www.csssprites.com/


• Menúes en mosaico
• Sprite y centrado
• Vertical

Podemos descargarnos estos ejemplos para trabajar en clase desde aquí

Ultimo

Volver arriba