también el Firefox 4

También está disponible el Firefox 4 en fase beta  :  Firefox 4

Y en microsiervos podéis leer una nota sobre las críticas que cada navegador dice del otro, aún estando en fase de pruebas.

llega IE9

Se puede probar el IE9, está en fase beta y se puede descargar aquí >> IE9 (hay que tener el Windows7)

Y si queréis leer algo más sobre él podéis hacerlo en este blog: otroblogmas

Phlook es un sitio web que genera algunos efectos interactivos a nuestras fotos para poner en una web, por ejemplo ponemos una foto sobre la que se puede hacer zoom.
Phlook
Otro editor de imagenes:

Aviary  y Cloud Canvas

Más adelante veremos cosas de HTML5, dejo aquí dos enlaces uno de la wikipedia sobre HTML5  y otro del W3C  sobre HTML5.

Ver aquí algunas características de comportamiento de los navegadores con HTML5

seguimos con CSS

Continuamos viendo características generales de las hojas de estilo:

• unidades de medida :
  • relativas:destacamos el px (pixel) y el %.
  • absolutas: cm, in, mm
• colores:
  • palabras clave: orange, yellow, black, etc.
  • RGB hexadecimal

Ejercicio:  Crear una página html que contenga un titular,  un párrafo, una imagen, otro párrafo y una tabla de dos columnas y tres filas. Asociar una hoja de estilos y probar a usar las unidades relativas, para comprender que son relativas al elemento que las contiene (el body). En la tabla probar con diferentes colores.

Empezando con CSS

Vemos una introducción a CSS. Vamos a seguir el libro “Introducción a CSS” que podéis leer y descargar en librosweb .

En el primer capítulo nos indica como se incluye o enlaza CSS con una web y en el segundo se ve el formato básico de una regla CSS y manejamos los selectores básicos .

Como ejercicio práctico construimos una web sencilla que se describe en el siguiente documento:  ejer1_dream

Notas :

La especificación actual  de CSS 2.1  está   en W3C.org  aquí  ( aunque es aún un documento de trabajo y no la especificación final) . La versión 2.0  está   aquí .

W3C tiene también un servicio de validación de código CSS (y de HTML) aquí.

empezando con Dreamweaver

Aunque nos queda por ver algunas cosas de HTML hemos cambiado a editar webs con una herramienta mucho más potente: Dreamweaver.

Dreamweaver es un editor gráfico de webs que además incorpora funciones de manejo de imágenes y también de transmisión de ficheros.

Podéis descargaros dreamweaver desde Adobe, funciona como versión de prueba durante 30 días y después pide la clave.

Instalado y listo.
Dreamweaver tiene un esquema de menús que al principio cuesta un poco entender, así que el objetivo inicial es aprender el manejo básico del programa, para lo cual vamos a construir una web sencilla que contenga un poco de todo lo que hemos estudiado de HTML: listas, tablas, imágenes, mapas de bits, enlaces por aquí y por allá.

para publicar la web

Una vez que tengamos nuestra web lista y un espacio donde alojarla (servicio de hosting) viene el paso de subir los ficheros.
Para subir los ficheros al servidor hosting hay varias formas:

• a veces, el propio servicio de hosting nos permite a través de una web subir los ficheros. En este caso cada empresa tiene su interface y a veces es un poco liado enterarse como funciona.
• utilizando un cliente FTP (un programa para transmitir los ficheros). Recomiendo este método.

Programas cliente de FTP hay unos cuantos: cute-FTP, Filezilla, etc. Podéis buscar más.

La página oficial de FileZilla está
aquí >> http://filezilla-project.org/

Es importante es que uséis él programa CLIENTE no el server (el server es para montar un servidor, y no es lo que necesitamos).
Para usarlo es necesario conocer el nombre del servidor en el que vamos a dejar nuestros ficheros, el nombre de usuario dentro de ese servidor y la password. Todos esos datos nos los da el servidor de hosting y debemos tenerlos a mano para la configuración del programa cliente FTP.

Una vez subidos los ficheros, hay que comprobar que funcionan las páginas, que se cargan las imágenes y que los enlaces están bien.

tablas

En html se continuó con tablas.
Las tablas son fundamentales para dar un poco de orden a la página, para maquetar texto y fotos.
Aunque es aquí, en las tablas, donde los editores gráficos son muy prácticos, conviene conocer el significado básico de las etiquetas utilizadas en las tablas .
Un truco básico de las tablas es, una vez ordenado todo el contenido, eliminar el borde y separar un poco las celdas entre sí.

Tenemos ya algunas páginas construidas y empezamos a darle forma a una web pequeña, a establecer una navegación entre las páginas.

imágenes <img />

Para insertar imágenes tenemos la etiqueta img <img src=”ruta” alt=”descripcion” / > .

Pero las imágenes hay que prepararlas antes de ponerlas en la web. Prepararlas significa ajustar el tamaño y resolución para que pesen lo adecuado a la calidad de imagen que necesitemos.
Se pueden tratar con programas tan sencillos como el Paint o programas tan sofisticados como el Photoshop. GIMP es otro editor de imagenes y Filestone es un visor y editor, para mí muy práctico. Tenéis los enlaces en la zona de enlaces.
Queda pendiente de estudio los diferentes tipos de ficheros de imágenes: jpg, gif, png.

Con las imagenes también se pueden crear mapas activos con zonas que tienen vínculos. En este documento se hace un resumen de su uso.
Además del programa Mapthis, Manuel ha encontrado en la red varios sitios para crear mapas de imagenes, algunos on-line.

• programa XMap >> www.carlosag.net/Tools/XMap/
• editor on-line >> www.b1d.dk/imagemaps/
• editor on-line >> www.image-maps.com

Alojamiento web (hosting)

Le hemos echado un ojo a algunos planes de alojamiento web, ya que publicaremos algunas páginas.

• R ofrece alojamiento para sus clientes, sin sobrecoste.
• Si tienes ADSL con cualquier compañía casi seguro que también tienes espacio web. Y con telefónica sólo por tener teléfono puedes solicitar espacio web aqui
• Strato y 1and1 ofrecen por un precio bajo registro de dominio .es y alojamiento básico por un año.
• Otra compañía es dinahosting un poco más cara. En su paquete más básico no incluye PHP ni MySql.
• dreamhost un servicio de hosting y de registro de dominios que está en USA, suelen tener ofertas que renuevan cada cierto tiempo. Precio en dólares, con muchísimos servicios, aunque tiene el inconveniente de que su servicio de asistencia y sus páginas de ayuda están en inglés.
• Y muchos más servicios de hosting que hay por ahí, algunos gratuitos ponen publicidad y es un poco molesto.

Conviene tner algún sitio para publicar nuestra web y ver así como funciona en el ciberespacio, así que daros de alta en alguno.
Si sabéis de otros interesantes ponerlos en los comentarios.

creación de páginas web sencillas

Por ahora hemos visto las etiquetas básicas referidas a formato de texto, enlaces y listas

---

formateo de texto

• párrafo < p >
• titulares < h1 … h7 l>
• cambio de línea < br/ >
• cursiva < em >
• negrita < strong >
• citas < blockquote >
• texto preformateado < pre >
• caracteres especiales
• otras:abreviaturas, borrado, acrónimos, subíndice, superíndice, etc.

---

enlaces <a href=”URL”> texto que enlaza </a>

• enlaces a otras webs
• enlaces a otras páginas dentro de mi propia web (rutas relativas)
• enlaces a puntos concretos dentro de una página web. en dos pasos: poner etiquetas y enlazar a las etiquetas

---

listas

1. listas ordenadas <ol>
2. listas desordenadas <ul>
3. listas de definiciones <dl>