DiseodepginasWebcon

MICROSOFTEXPRESSIONWEB4

I.E.S.FERNANDODEMENA
INFORMTICA4ESO
CURSO2012/2013

Alumno:_________________________

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

TABLADECONTENIDOS
1. OPERACIONES BSICAS ............................................................................................................................................... 1 Cambiar el aspecto del programa................................................................................................................................ 1 Abrir/cerrar paneles........................................................................................................................................................ 1 Ver un Web ya existente................................................................................................................................................ 1 Pasos para crear la estructura de nuestro Web......................................................................................................... 2 2. UTILIZAR PLANTILLAS.................................................................................................................................................... 3 Seleccionar una plantilla................................................................................................................................................ 4 Crear pginas basadas en la plantilla.......................................................................................................................... 5 3. OTRA OPCIN: UTILIZAR MARCOS............................................................................................................................. 5 Crear marcos................................................................................................................................................................... 5 Ver propiedades del marco .......................................................................................................................................... 6 Dividir un marco.............................................................................................................................................................. 6 Eliminar un marco .......................................................................................................................................................... 6 Crear un hipervnculo a un marco................................................................................................................................ 6 Insertar un marco flotante ............................................................................................................................................. 7 4. DAR FORMATO A LAS PGINAS.................................................................................................................................. 7 Dar formato a los caracteres......................................................................................................................................... 7 Dar formato a los prrafos............................................................................................................................................. 7 Aplicar bordes y sombreado a un prrafo .................................................................................................................... 7 Aplicar numeracin o vietas a una serie de lneas................................................................................................... 7 Crear una lista anidada ................................................................................................................................................. 8 Insertar lnea horizontal.................................................................................................................................................. 8 Modificar las propiedades de una lnea horizontal .................................................................................. 8

Agregar un sonido de fondo en una pgina .............................................................................................................. 8 Insertar una imagen como fondo de una pgina........................................................................................................ 8 Agregar un color de fondo a la pgina......................................................................................................................... 8 5. HIPERVNCULOS ................................................................................................................................................................ 8 Crear un hipervnculo a una pgina ya existente de nuestro Web.......................................................................... 8 Crear un hipervnculo a una pgina que se crear automticamente.................................................................... 9 Hipervnculos a marcadores.......................................................................................................................................... 9 Insertar marcadores .................................................................................................................................................. 9 Crear un hipervnculo a un marcador ................................................................................................................. 10 Insertar un hipervnculo a otro Web existente.......................................................................................................... 10 Insertar un hipervnculo de correo.............................................................................................................................. 10 Insertar un hipervnculo para la descarga de archivos............................................................................................ 10 Agregar colores a los hipervnculos de una pgina................................................................................................. 11

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

6. TABLAS ............................................................................................................................................................................. 11 Insertar una tabla.......................................................................................................................................................... 11 Ver propiedades de la tabla........................................................................................................................................ 11 7. IMGENES......................................................................................................................................................................... 12 Insertar una imagen...................................................................................................................................................... 12 Ubicar correctamente en la pgina una imagen insertada..................................................................................... 12 Editar una imagen insertada....................................................................................................................................... 12 Definir color transparente de una imagen GIF .......................................................................................................... 12 Insertar un GIF animado.............................................................................................................................................. 12 Crear un mapa-imagen que contenga varios hipervnculos................................................................................... 12 8. MEJORAR EL WEB.......................................................................................................................................................... 13 Insertar botones interactivos....................................................................................................................................... 13 Animar la transicin de pginas.................................................................................................................................. 13 Incrustar sonidos/canciones en una pgina.............................................................................................................. 13 a) Poner un sonido de fondo a la pgina.............................................................................................................. 14 b)Crear un hipervnculo a un archivo de sonido................................................................................................. 14 c)Insertar un botn interactivo vinculado a un archivo de sonido.................................................................... 14 d)Insertar un archivo de sonido que sonar al hacer clic en un texto, imagen, etc....................................... 14 Agregar un vdeo ......................................................................................................................................................... 14 a) Incrustar el vdeo en la pgina......................................................................................................................... 14 b) Insertar un archivo de vdeo............................................................................................................................. 15 c)Insertar una pelcula en formato .swf............................................................................................................... 15 d) Pegar el cdigo HTML del vdeo desde Youtube.......................................................................................... 15 Mensaje emergente ..................................................................................................................................................... 16 Insertar ventana emergente o pop-up ...................................................................................................................... 17 Insertar un efecto a un texto ........................................................................................................................................ 17 Hacer que al pasar el ratn por una imagen aparezca otra imagen (imagen de reemplazo)............................ 17 Revisar ortografa......................................................................................................................................................... 18 9. PUBLICAR EL WEB......................................................................................................................................................... 18 Herramientas gratuitas para crear nuestro web gratis...................................................................................................... 18 Hosting (alojamiento web)..................................................................................................................................................... 18 Alojamiento web gratuito .............................................................................................................................................. 18 Recurrir a nuestro proveedor de servicios de Internet....................................................................................... 19 Alojamiento web de pago............................................................................................................................................ 20 10. AADIR UN FAVICON................................................................................................................................................... 20 Colocar un icono en un Web de manera global........................................................................................................ 20 Colocar un icono especfico en una pgina.............................................................................................................. 21 11. POSICIONAMIENTO WEB............................................................................................................................................ 21 ACTIVIDAD FINAL: DISEO DE UN WEB DE TEMA A ELEGIR................................................................................ 23

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

1. OPERACIONES BSICAS

(pgs. 128 y 129 del libro)

Para disear pginas Web vamos a utilizar Microsoft Expression Web 4, uno de los editores de pginas Web ms populares1, de muy sencillo manejo pero con el que se pueden lograr grandes efectos. Un Web se compone de un conjunto de archivos relacionados (pginas HTML, imgenes, sonidos, vdeos, etc.) sobre un tema determinado. Abre en tu ordenador Microsoft Expression Web 4 e investiga las siguientes acciones:

Cambiar el aspecto del programa: Selecciona el men HerramientasOpciones de la aplicacin... y

activa la opcin Usar la combinacin de colores actual de Windows.

Abrir/cerrar

paneles: Cierra todos los paneles a izquierda y derecha del rea de trabajo central, haciendo clic sobre las respectivas x, excepto el panel Lista de carpetas. Si ms adelante quieres visualizar algn panel, selecciona el Men Paneles y activa el panel en cuestin... Si lo que quieres es recuperar el diseo predeterminado de paneles, selecciona el Men Paneles y activa Restablecer diseo de rea de trabajo.

Ver un Web ya existente:

1. Haz clic en la lista desplegable situada a la dcha. del botn 2. Haz clic en el botn y selecciona Abrir sitio....

y busca en el servidor Pblico el Web Frmula 1 de ejemplo.

3. Seleccinalo y haz clic en el botn 4. Abre la pgina index.htm haciendo doble clic sobre ella Las carpetas y archivos que componen el web aparecen a la izquierda, en el panel Lista de carpetas:
Barra de ttulo Barra de mens

Pestaas de pginas activas Barra de herramientas

rea de trabajo

Panel Lista de carpetas

Barra de estado Barra de vistas

1

Existen otros editores Web, como Dreamweaver CS 5, que es de pago, o KompoZer, Mozilla Composer, etc. en software libre.

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

Para ver el contenido de una pgina html en cuestin basta con hacer doble clic sobre ella. El panel Lista de carpetas nos permite organizar todos los elementos del Web cmodamente. Ejercicio 1: Descrgate en tu pendrive el Web Frmula 1 de ejemplo de la web del profesor, descomprime la carpeta, e investiga todo lo anterior.

Pasos para crear la estructura de nuestro Web:

(pg. 130 del libro)

Como habrs observado en el web del ejemplo anterior, un sitio web se compone de una serie de carpetas para guardar ordenadamente la informacin (carpetas imgenes, vdeos, msica, botones, etc.) y de archivos; la mayor parte de estos ltimos tienen la extensin html2, y la ms importante es index.html, que es como la pgina de inicio o bienvenida. Vamos a crear la estructura de nuestro web (para ello, previamente tendremos que haber decidido qu tema trata...): 1. Crea en tu pendrive una carpeta que alojar todas las subcarpetas y archivos de tu futuro web, y asgnale un nombre autoidentificativo. 2. Abre el programa y haz clic en el botn 3. Clic en botn Seleccinala y haz clic en 4. Observars que la ruta de acceso a tu carpeta aparece a la derecha del cuadro Ubicacin: Haz clic en . El programa, por defecto, crea la carpeta raz del web, de la cual cuelga el archivo Ese pequeo icono que aparece a la izquierda de su nombre indica que es la pgina principal. Es conveniente que lo renombres como index.html; para ello, haz clic con el botn derecho sobre l y selecciona Cambiar nombre. Este es el momento en que debemos crear carpetas individuales y ordenadas para guardar en el futuro sonidos, vdeos, imgenes, etc. Para ello, haz clic con el botn derecho sobre la carpeta raz del web y selecciona NuevoCarpeta. Crea todas las carpetas que necesites de momento (no uses tildes!), como por ejemplo: (Nuevo sitio) GeneralSitio web de una pgina

y navega hasta encontrar la carpeta que creaste en el paso 1.

Carpeta raz

Ambas extensiones, htm y html vienen a ser lo mismo; HTML (HyperText Markup Language, es decir,

Lenguaje de marcado de hipertexto) es el lenguaje predominante para la elaboracin de pginas Web.

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

Seguidamente, tendremos que agregar las pginas que compondrn nuestro web:
1. Selecciona de nuevo la carpeta raz del web. 2. Clic en la lista desplegable situada a la derecha del botn Pgina...GeneralHTML 3. Clic en La pgina se crea en blanco, y su nombre (Sin_ttulo_1.html) aparece en la pestaa de las pginas activas. Una vez la editemos, aparecer un * a la derecha de su nombre, indicando que ha sido modificada. Para guardar los cambios podemos hacer clic con el botn derecho sobre su nombre, elegir la opcin Guardar y darle un nombre autoidentificativo.
AVISO IMPORTANTE: Se recomienda vivamente, a la hora de nombrar archivos o carpetas, no utilizar

(Nuevo documento)

palabras separadas, maysculas, caracteres poco corrientes y/o tildes3. Ejemplos: DESACONSEJADO: Imgenes Mi msica 4 ESO RECOMENDADO: imagenes mi_musica 4_eso

Ms adelante, desde la lista de carpetas, ser muy fcil modificar sobre la marcha la estructura del Web.

Para

guardar el Web, hay que guardar todas y cada una de las pginas; lo ms rpido es: ArchivoGuardar todo. Otra opcin es cerrar el programa, y cuando nos pregunte si queremos guardar los cambios, responder afirmativamente.

Ejercicio 2: Una vez elegido el tema de tu Web, crea en tu pendrive, y dentro de la carpeta 3 evaluacin, una carpeta denominada Diseo Web y, dentro de ella, otra con un nombre alusivo al tema del Web elegido. A continuacin, y siguiendo los pasos explicados arriba, crea en sta ltima tu Web especificando la ubicacin de la carpeta anterior. Finalmente, crea las pginas que constituirn la estructura provisional del Web. En cualquier caso, la mayor parte de las pginas que acabamos de crear las vamos a eliminar ya que, como veremos en el prximo apartado, es ms recomendable trabajar con plantillas. Otra opcin, menos recomendable, es trabajar con marcos, lo cual veremos en el apartado 3.

2. UTILIZAR PLANTILLAS
Se recomienda elegir una de las mltiples plantillas ya hechas que nos ofrece el programa. Estas plantillas presentan un atractivo diseo, y adems es muy fcil realizar cambios en ellas. La idea es
3

As evitaremos que nuestro Web pueda presentar problemas en determinados entornos, como por ejemplo servidores basados en Linux o Unix, que distinguen maysculas y minsculas -no as Windows-.

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

elegir una de las plantillas y, posteriormente, crear pginas basadas en ella. De esta forma, nuestro web tendr un diseo atractivo y uniforme.

Seleccionar una plantilla:

1. Clic en botn (Nuevo sitio) Plantillas. 2. Seleccionar una de las plantillas en el panel central. 3. Marcar la casilla 4. Clic en Veremos que el programa crea entonces una serie de carpetas (images, styles, etc.) y dos pginas: es la nueva pgina principal. es la plantilla. No la borres!

La carpeta La carpeta La carpeta La carpeta La carpeta La carpeta La carpeta La carpeta No borrar la carpeta

contiene la informacin relacionada con el vnculo Acerca de. contiene la informacin relacionada con el vnculo Calendario. contiene la informacin relacionada con el vnculo Contacto. contiene la informacin relacionada con el vnculo P+F. contiene las imgenes del web. contiene la informacin relacionada con el vnculo Vnculos. contiene la informacin relacionada con el vnculo Noticias. contiene la informacin relacionada con el vnculo Galera de fotografas. , pues contiene pginas de estilos css!

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

Por lo tanto, podemos borrar las carpetas employees, employment, press, products, promotions, services y site_map, la carpeta imgenes que creamos en el ejercicio 2, la pgina inicial antigua index.html, y renombrar default.html como index.html. Ejercicio 3: Selecciona una plantilla que te guste, y sigue los pasos explicados arriba.

Crear pginas basadas en la plantilla:

Seguidamente, crearemos una serie de pginas a partir de la plantilla recin elegida: 1. Clic con botn derecho sobre .

2. Seleccionar Nuevo a partir de plantilla web dinmica. Vemos que se crea una nueva pgina basada en la plantilla. Tanto en como en esta pgina recin creada observamos que hay zonas que no pueden ser editadas: al intentar situar el cursor sobre ellas, aparece un crculo indicando que son zonas no editables. Se suele tratar, habitualmente, de la cabecera y de la barra lateral. La zona central s puede ser editada. Ahora bien, esos cambios s pueden ser realizados en la plantilla . Y lo ms importante: si guardamos esos cambios en la plantilla mediante el men ArchivoGuardar todo y respondiendo afirmativamente cuando el programa nos pregunta si queremos actualizar los archivos asociados, podremos ver que los cambios se han validado en el resto de pginas! De esta forma se consigue cmodamente cierta uniformidad en todas las pginas del web.

NOTA: Es fcil reconocer una pgina creada a partir de la plantilla por su icono

Ejercicio 4: Crea varias pginas a partir de la plantilla elegida en el ejercicio anterior. A continuacin, realiza cambios en la plantilla master.dwt y comprueba que se validan en el resto de pginas. Seguidamente, realiza cambios en las zonas editables de las pginas asociadas a la plantilla. Si decides adoptar este sistema de plantillas para tu web que es hoy en da lo ms recomendable-, puedes saltar directamente al apartado 4. Por el contrario, si piensas que vas a inclinarte ms bien por un diseo a base de marcos lo cual ya est un poco obsoleto...-, pasa al siguiente captulo.

3. OTRA OPCIN: UTILIZAR MARCOS

Los marcos permiten dividir la pgina Web en varias zonas independientes, cada una con una informacin distinta y con su propia barra de desplazamiento. Ahora bien, de acuerdo con los ltimos estndares de diseo, los marcos estn desaconsejados.

Crear marcos:
1. Selecciona de nuevo la carpeta raz del web. 2. Clic en la lista desplegable situada a la derecha del botn Pgina...Pginas de marcos. 3. Selecciona el marco que ms te guste (Se recomienda Titular y contenido) 4. Clic en (Nuevo documento)

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

5. En cada uno de los marcos recin creados aparecern dos botones, para seleccionar qu pgina se visualizar en ellos: para insertar en ese marco una pgina ya existente para insertar una pgina en blanco (en la que podremos comenzar a aadir elementos) Elige una de las dos opciones anteriores para cada marco (se recomienda la segunda). 6. Al guardar los cambios realizados (men ArchivoGuardar todo), el programa nos preguntar los nombres de las pginas de cada marco, y de la pgina que engloba a todos los marcos. Es importante que asignes a cada marco parcial un nombre autoidentificativo (marco_izquierdo.html, marco_central.html, etc.), y al marco total el que engloba a los otros- lo conviertas en la pgina principal (Para ello, haz clic con botn derecho sobre lEstablecer como pgina principal). Ntese que, una vez creados, se pueden cambiar las dimensiones de los marcos arrastrando su borde.

Ver propiedades del marco (nombre, mostrar barras de desplazamiento, no mostrar bordes, insertar
sonido, etc.) para su posible modificacin: Botn derecho sobre el marcoPropiedades de marco
NOTA: Es interesante la opcin

, que permite a los visitantes de nuestro Web modificar el tamao de los marcos desde su explorador.

Dividir

un marco: Seleccionarlomen FormatoMarcosDividir marco (o bien, arrastrar uno de sus bordes mientras pulsamos Ctrl )

Eliminar un marco: Seleccionarlomen FormatoMarcosEliminar marco

Crear un hipervnculo4 a un marco: 1. Insertar y seleccionar el texto, imagen u objeto que constituir el hipervnculo. 2. Botn derecho sobre lo anteriorClic en 3. Seleccionar la pgina a la que apuntar el hipervnculo. 4. Clic en para seleccionar en qu marco se abrir la pgina anteriormente seleccionada: en el panel izquierdo podemos elegir cualquiera de los marcos, mientras que en el derecho podemos seleccionar que se abra en el mismo marco, que ocupe toda la pgina sin marcos, etc. NOTA: En todo momento, mediante el botn (Vista previa), que nos permite adems elegir el navegador que deseemos, podemos publicar el Web y ver cmo se van aplicando nuestros cambios.
4

En la prxima seccin trataremos los hipervnculos ms en profundidad.

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

Insertar un marco flotante (es un marco que podemos situar en cualquier parte de la pgina):
1. Situar el cursor en el punto deseado de la pgina deseada 2. Men InsertarHTMLMarco flotante
NOTA: Para modificar las propiedades de un marco flotante (p. ej. para quitarle la barra de

desplazamiento) hay que situar el cursor en cualquiera de sus bordes y hacer clic con el botn derecho.

Ejercicio 5: Si te has decidido por un diseo a base de marcos, elimina las carpetas y plantillas que se crearon en el ejercicio 4. A continuacin crea, al menos, una pgina de marcos que contenga algo parecido a lo siguiente: un marco en su parte superior para informacin que siempre aparezca (logotipo, direccin, etc.), un marco en la parte izquierda donde posteriormente ubicaremos hipervnculos a las distintas pginas, y un marco principal en la parte central donde deber aparecer la pgina principal. Por ejemplo:

4. DAR FORMATO A LAS PGINAS

En Expression Web 4, el formato del texto, prrafos, vietas, etc. se cambia cmodamente de forma
similar a un procesador de textos: Dar formato a los caracteres: Seleccionar texto men Formato Fuente... Dar formato a los prrafos: Seleccionar prrafo(s)men FormatoPrrafo Aplicar bordes y sombreado a un prrafo: Seleccionar prrafomen FormatoBordes y sombreado. Aplicar numeracin o vietas a una serie de lneas: Seleccionar prrafosmen FormatoNumeracin y vietas

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

NOTA: Al igual que con un procesador de textos, se puede elegir como vieta una imagen

previamente guardada en un archivo, si seleccionamos la opcin Especificar imagen: de la ficha Vietas de imagen.

Crear una lista anidada (para estructurar mejor la informacin):

1. Situar el cursor en el punto de la lista principal donde deseamos insertar la lista secundaria y pulsar Intro . 2. Clic dos veces sobre el botn (Aumentar sangra) o )

3. Crear nueva lista (mediante los botones

Insertar lnea horizontal: InsertarHTMLLnea horizontal

Modificar las propiedades de una lnea horizontal: Botn derecho sobre la lneaPropiedades de la lnea horizontal

Agregar un sonido de fondo en una pgina5:

Botn derecho sobre la pginaPropiedades de pginaFicha General

NOTA: Procrese utilizar archivos MIDI, ya que poseen menor tamao.

Insertar una imagen como fondo de una pgina: Botn derecho sobre la pginaPropiedades de pginaFicha Formato Agregar un color de fondo a la pgina: Botn derecho sobre la pginaPropiedades de pginaFicha Formato
NOTA: Es posible que alguno de los elementos anteriores pueda ser reproducido en unos

navegadores y no en otros Ejercicio 6: Investiga en tu Web todos y cada uno de los elementos anteriormente explicados. Una vez hecho esto, incorpora slo aquellos que te interesen.

5. HIPERVNCULOS
Un hipervnculo es un enlace que relaciona las pginas de nuestro Web o que conecta con otros Web de Internet.

Crear un hipervnculo a una pgina ya existente de nuestro Web:

2. Botn derecho sobre lo anterior 3. Seleccionar la pgina a la que apuntar el hipervnculo.

(pg. 133 del libro)

1. Seleccionar el texto, imagen u objeto que constituir el hipervnculo6.

En las pginas 13 y 14 veremos, en profundidad, varios mtodos alternativos para insertar sonidos. En la pgina 13 se explica cmo asignar un hipervnculo a un botn.

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

4. Clic en para seleccionar en qu marco se abrir la pgina anteriormente seleccionada: en el panel izquierdo podemos elegir cualquiera de los marcos, mientras que en el derecho podemos seleccionar que se abra en el mismo marco, que ocupe toda la pgina sin marcos, etc7. 5. Se recomienda, adems, hacer clic en para poder escribir un texto que se mostrar al situar el puntero del ratn sobre el hipervnculo, o bien cuando no sea posible cargar la imagen o se navegue sin ellas (este texto a modo de etiqueta es muy til cuando el hipervnculo est sobre una imagen!).
NOTA: Existe otra forma alternativa de crear un hipervnculo, ms rpida y cmoda pero quiz no tan

completa, que consiste en arrastrar la pgina en cuestin desde el panel de tareas. Ntese que, como cualquier otro objeto, una vez creado el hipervnculo podemos modificarlo haciendo clic con el botn derecho sobre l.

Crear un hipervnculo a una pgina que se crear automticamente:

1. Seleccionar el texto, imagen u objeto que constituir el hipervnculo. 2. Botn derecho sobre lo anterior

3. Clic sobre el botn

situado en el panel izquierdo.

4. Escribir el nombre de la nueva pgina que se crear (Si, adems, queremos cambiar la ubicacin de esa nueva pgina, seleccionaremos el botn ) Ejercicio 7: Crea algunos hipervnculos necesarios para poder navegar por tu Web.

Los

hipervnculos a marcadores son de gran utilidad cuando se incluyen datos ordenados alfabticamente. En primer lugar hay que insertar los marcadores, y a continuacin crear los hipervnculos que apuntarn a cada uno de ellos:
(pg. 134 del libro)

a) Insertar marcadores:

1. Situar el cursor en el punto en que se desea insertar el marcador, o seleccionar el texto, imagen u objeto que constituir el marcador. 2. Men InsertarMarcador 3. Escribir un nombre autoidentificativo para el marcador. 4. 5. Guardar la pgina donde se ha insertado el marcador.
7

Las opciones son: Valor pred. (ninguno): Se abre en el mismo marco. El mismo marco: Se abre en el mismo marco. Toda la pgina: Se abre ocupando toda la pgina. Nueva ventana: Se abre en una nueva ventana del navegador. Marco primario: Se abre ocupando toda la pgina.

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

(Para borrar un marcador, basta con seleccionarlo y pulsar Supr, o bien acceder al men InsertarMarcador y borrarlo de la lista)

b) Crear un hipervnculo a un marcador situado en la misma pgina, o en otra: 1. Seleccionar el texto, imagen u objeto que constituir el hipervnculo. 2. Botn derecho sobre lo anterior 3. Seleccionar o en otra. 4. Seleccionar (la pgina y) el marcador en cuestin (y el marco de destino). o dependiendo de si el marcador est en la misma pgina

Ejercicio 8: Crea una pgina que contenga en su parte superior las 26 letras del abecedario, y asigna los correspondientes marcadores que accedan a una lista alfabtica relacionada con el tema de tu web.

Insertar un hipervnculo a otro Web existente:

(pg. 135 del libro)

1. Seleccionar el texto, imagen u objeto que constituir el hipervnculo. 2. Botn derecho sobre lo anterior 3. Seleccionar

4. Escribir en el campo Direccin: la direccin del Web en cuestin. 5. Clic en para seleccionar en qu marco se abrir la pgina anteriormente seleccionada: en el panel izquierdo podemos elegir cualquiera de los marcos, mientras que en el derecho podemos seleccionar que se abra en el mismo marco, que ocupe toda la pgina sin marcos, etc.

Insertar un hipervnculo de correo (para que nos enven sugerencias, pedidos, etc):
1. Seleccionar el texto, imagen u objeto que constituir el hipervnculo. 2. Botn derecho sobre lo anterior 3. Seleccionar 4. Escribir nuestra direccin de correo.

(pg. 135 del libro)

Insertar un hipervnculo para la descarga de archivos8:

1. Seleccionar el texto, imagen u objeto que constituir el hipervnculo. 2. Botn derecho sobre lo anterior
8

En la pgina 13 veremos una forma alternativa de hacer esto, utilizando un botn de accin.

10

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

3. Seleccionar 4. Acceder al archivo en cuestin (Si no se conoce su ubicacin exacta, se recomienda hacer clic en )
NOTA: Cuando hemos insertado bastantes hipervnculos, puede ser interesante verlos todos

seleccionando

Ejercicio 9: a) Crea en tu Web al menos un hipervnculo a otro Web interesante de tema anlogo. b) Inserta un hipervnculo de correo para que los usuarios de tu Web se puedan comunicar contigo. c) Inserta al menos un hipervnculo para que cualquiera que visite tu Web se pueda bajar a su ordenador un archivo relacionado con el tema.

Agregar colores a los hipervnculos de una pgina:

Siempre que no se haya aplicado un tema, es posible configurar la pgina para que los hipervnculos cambien de color segn hayan sido visitados, o el usuario site el puntero del ratn sobre ellos, etc.: 1. Botn derecho sobre la pginaPropiedades de pginaFicha Formato 2. Seleccionar el color deseado.

NOTA: El efecto elegido se aplicar a todos los hipervnculos de la pgina.

6. TABLAS

(pgs. 131 y 132 del libro)

Una tabla permite organizar la informacin (imgenes, texto, etc.) cmoda y ordenadamente.

Insertar una tabla: Situar el cursor en el lugar deseadoMen Tabla Resulta til tener visible la barra de herramientas Tabla (para borrar lneas, insertar filas o columnas,
combinar celdas, alinear texto, distribuir texto, cambiar formato, etc. cmodamente): Men VerBarras de herramientasTablas

Ver propiedades de la tabla: Botn derecho sobre la tabla

(Por ejemplo, puede ser interesante asignar un grosor de 0 pxeles para organizar una serie de imgenes) Ejercicio 10: Investiga en tu Web todo lo anterior e incorpora al menos una tabla que contenga imgenes, texto, etc.

11

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

7. IMGENES
Los formatos GIF (8 bits hasta un mximo de 256 colores; permite animaciones) y JPEG (de alta definicin; 24 bits hasta un mximo de 16.777.216 colores) son los ms difundidos, compatibles y rpidos de cargar. Tambin existen otros formatos: BMP, TIFF, PNG, etc.

Insertar una imagen:

lo ms cmodo y rpido, como siempre, es copiar y pegar la imagen. En este caso, cuando salgamos del programa o guardemos el trabajo, se nos pedir un nombre y una ubicacin para dicha imagen (Se recomienda guardar las distintas imgenes ordenadamente en un sistema de carpetas y subcarpetas! Cuidado: Si posteriormente cambiamos la ruta de acceso a esa imagen, el programa no la encontrar).

Si

la imagen est previamente almacenada en un archivo, otro procedimiento alternativo para insertarla es: Men InsertarImagen (O bien, arrastrar la imagen en cuestin desde la lista de carpetas hasta la pgina).

Para poder ubicar correctamente en la pgina una imagen insertada: Botn derecho sobre la imagen
 Propiedades de imagen... Apariencia

Para poder editar una imagen insertada: Botn derecho (o doble clic) sobre la imagen  Propiedades
de imagen... Ficha General

Definir color transparente de una imagen GIF:

1. Seleccionar la imagen. 2. Mostrar la barra de herramientas Imagen: Men VerBarras de herramientasImgenes 3. Clic en botn formato) (Si la imagen no es GIF, nos preguntar si queremos convertirla a este

4. Clic sobre la zona de la imagen que deseamos hacer transparente. Ejercicio 11: Inserta en las pginas de tu Web imgenes alusivas al tema elegido.

Insertar un GIF animado: Se inserta de la misma forma que una imagen usual.
Ejercicio 12: Entra en una pgina de gifs animados, como por ejemplo www.gifanimados.com/rotulos/nuevo, escoge el rtulo que ms te guste, e insrtalo en tu Web. No te olvides de guardar la imagen del gif animado en la carpeta correspondiente. Puedes insertar varios gif animados ms

Crear un mapa-imagen que contenga varios hipervnculos:

1. Insertar la imagen. 2. Mostrar barra de herramientas Imagen. 3. Seleccionar para definir una zona rectangular para definir una zona circular para definir una zona poligonal

12

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

4. Delimitar con el ratn la regin deseada. Una vez hecho esto, aparecer el cuadro de dilogo Insertar hipervnculo, y procederemos como ya se ha explicado en el apartado 5 (Hipervnculos). Repetir los pasos 3 y 4 para cada una de las regiones del mapa-imagen.
NOTA: Aqu es muy recomendable utilizar el botn

para indicar un texto que aparecer cuando el usuario site el puntero del ratn encima de cada regin en cuestin.

Ejercicio 13: Construye un mapa-imagen en tu Web, preferentemente en la pgina principal.

8. MEJORAR EL WEB

Insertar botones interactivos:

1. Situar el cursor en el punto deseado. 2. Men Insertar 3. Seleccionar el diseo del botn; en el cuadro Texto: podemos escoger el texto del botn. para seleccionar dnde apuntar el botn al hacer clic sobre l; hay varias 4. Clic en opciones: podemos elegir otra pgina de nuestro web, o un web externo, o un archivo de texto, sonido, pelcula, etc., en cuyo caso se le preguntar al usuario si desea ejecutarlo o guardarlo...

Animar la transicin de pginas:

1. Men Formato 2. Seleccionar en la lista desplegable Evento: cundo se desea que se produzca el efecto: al entrar o salir de la pgina, o cuando se entre o salga del Web. 3. Seleccionar en el cuadro Efecto de transicin: el tipo de transicin deseado. 4. Escribir en el cuadro Duracin: cuntos segundos durar la transicin.

Incrustar sonidos/canciones en una pgina: permite al usuario controlar la reproduccin del sonido o
cancin utilizando el reproductor asociado a su navegador, el cual se abrir automticamente. Con esta opcin se pueden incrustar varios archivos de sonido en una misma pgina. 1. Imprescindible copiar previamente el archivo de sonido (extensiones posibles: .midi, .wma, etc.; IMPORTANTE!: para que funcione, el nombre de archivo no puede contener palabras separadas, maysculas, caracteres poco corrientes y/o tildes) en una carpeta de nuestro Web (p. ej. Msica). 2. Situar el cursor en el punto deseado. 3. Men InsertarMultimedia 4. Seleccionar archivo de sonido. 5. Se incrustar en nuestra pgina un cuadro reproductor de Windows Media. Si hacemos clic con el botn derecho sobre l y seleccionamos Propiedades del control ActiveX... podremos elegir, en las distintas pestaas que se muestran, los parmetros del cuadro reproductor; por ejemplo, se recomienda deseleccionar la opcin Inicio automtico de la ficha General.

13

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

Si guardamos y publicamos el web, observaremos en nuestro web algo parecido a esto:

de modo que el usuario de nuestra pgina podr utilizar los controles del reproductor a voluntad.
NOTA: Otras opciones para insertar sonido en una pgina pueden ser, entre otras:

a) Poner un sonido de fondo a la pgina, como se explic en la pg. 8: tiene el inconveniente de que slo se puede asignar un nico sonido a la pgina. b) Crear un hipervnculo a un archivo de sonido, como se vio en la pg. 10, de forma que el usuario pueda descargarlo y reproducirlo cuando desee. c) Insertar un botn interactivo vinculado a un archivo de sonido (ver pg. 13), de modo que cuando el usuario haga clic sobre l se reproducir dicho archivo. d) Insertar un archivo de sonido que sonar al hacer clic en un texto, imagen, etc.: 1. Seleccionar el texto, imagen, etc. en cuestin. 2. Con el texto o imagen seleccionado, ir a FormatoComportamientos 3. En el panel derecho que se abre a continuacin seleccionar sonido. 4. Clic en hasta seleccionar el archivo de sonido en cuestin. / Reproducir

NOTA: Con esta opcin el sonido se escuchar hasta el final, sin botones de control, hasta el momento en que salgamos de la mquina. En cualquier caso, se recomienda utilizar archivos MIDI, ya que poseen menor tamao.

Agregar

un vdeo: Tngase en cuenta que un archivo de vdeo ocupa demasiado espacio y, por consiguiente, el tiempo de espera puede ser excesivo. Siempre que se pueda, se recomienda indicar en la pgina su tamao, para que el usuario decida su reproduccin. Los formatos ms extendidos, y por tanto que presentan menos problemas, son: .AVI o WMA (utilizados por el reproductor de Windows Media), .MOV o .QT (se abre con Quick Time, de Apple), .MPEG (de formato comprimido, por lo cual tiene un tamao menor, pero sin prdida de calidad), .FLV (flash vdeo de Macromedia), etc.

Tenemos las siguientes posibilidades de agregar un vdeo en Microsoft Expression Web 4: a) Incrustar el vdeo en la pgina: el procedimiento es anlogo al recin explicado en el epgrafe anterior para incrustar archivos de sonido: Men InsertarMultimedia NOTA: Se recomienda guardar todos los vdeos en una carpeta, p. ej. Vdeos.

14

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

Con esta opcin, en la pgina aparecer el cuadro reproductor con el primer fotograma del vdeo, junto con los controles necesarios para que el visitante pueda reproducirlo, detenerlo, etc. NOTA: Es probable que esta opcin no funcione en Mozilla Firefox o en otros navegadores... b) Insertar un archivo de vdeo: en este caso el vdeo se reproducir sin controles ni ventanas aparte: 1. Imprescindible copiar previamente el archivo del vdeo en una carpeta de nuestro Web (p. ej. Vdeos). 2. Arrastrar el vdeo desde el panel de archivos hasta la pgina en cuestin, o bien crear un hipervnculo al archivo de vdeo, o bien un botn interactivo vinculado al archivo de vdeo (al igual que hicimos para insertar un archivo de sonido...). Una vez publicado el Web, el usuario podr visualizar el vdeo haciendo clic sobre l. c) Insertar una pelcula en formato .swf (es decir, Flash): tiene el inconveniente de que, para poder verlo, quien acceda a nuestro web tendr que tener instalado Adobe Flash Player (cuya descarga, en cualquier caso, es gratuita...). 1. Imprescindible copiar previamente el archivo .swf en una carpeta de nuestro Web (p. ej. Vdeos). 2. Situar el cursor en el punto deseadoMen InsertarMultimedia 3. Seleccionar archivo swf. 4. Se incrustar en nuestra pgina el archivo flash. Si hacemos clic con el botn derecho sobre l y seleccionamos Propiedades de Flash SWF ... podremos elegir, en las dos pestaas que se muestran, los parmetros a la hora de reproducirlo; por ejemplo, se recomienda deseleccionar la opcin Reproduccin automtica de la ficha General. Si guardamos y publicamos el web, observaremos que, para reproducir el vdeo, hay que hacer clic con el botn derecho y escoger Reproducir. d) Pegar el cdigo HTML del vdeo (o cualquier otro componente) desde Youtube o similares en nuestra pgina: 1. Abrir la pgina (Youtube, Google videos, etc.) donde est el vdeo. 2. Copiar el cdigo HTML del vdeo (p. ej. en Youtube hay que hacer clic sucesivamente sobre los botones e , y copiar el cdigo que figurar en azul; en otros portales, suele estar situado en un cuadro llamado Embed, Insertar, o similar) 3. Colocar el cursor en el punto de nuestra pgina donde queremos copiar el vdeo. situado en la barra de vistas, en la parte inferior de la pantalla. Se 4. Clic en el botn abrir entonces debajo del rea de trabajo la ventana para visualizar el cdigo HTML de la pgina. 5. Copiar el cdigo HTML del vdeo (p.ej. mediante CTRL-V ) En nuestra pgina se ver algo parecido a esto:

15

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

Ntese que el usuario dispone de controles para visualizar el vdeo. La ventaja de este mtodo es que ahorramos espacio, pero la desventaja clara es que si el vdeo es retirado de Youtube dejar de verse en nuestra pgina.
NOTA: En realidad este procedimiento sirve para poder pegar todo tipo de componentes (presentaciones Powerpoint, objetos flash, relojes, gif animados, etc.). A continuacin mostramos una serie de portales en los que podemos encontrar interesantes utilidades:

URL: http://www.cbox.ws/index.php http://clustrmaps.com/getone.php http://www.slideshare.net/

DESCRIPCIN: Permite a nuestros visitantes dejar mensajes o chatear Permite pegar mapas

OBSERVACIONES: Hay que registrarse previamente Hay que registrarse previamente No precisa registrarse previamente Es un programa de pago, pero hay disponible versin gratuita de prueba

http://www.ispringsolutions.com/ http://www.micontador.es/ http://www.contador-de-visitas.com www.forogratis.es www.foromania.com www.forosgratis.net

Permiten incrustar presentaciones Powerpoint

Ofrecen contadores gratis Desde nuestro web podemos enlazar a alguno de estos foros gratuitos Permite crear un foro Alguno puede requerir registro previo Hay que registrarse previamente

Mensaje

emergente: es una ventana de Windows que se mostrar con el mensaje de texto que deseemos al hacer clic sobre un objeto, o al cargar la pgina, etc.: Seleccionar el objetoMen FormatoComportamientos Mensaje emergenteRedactar el mensaje

Ejercicio 14: a) Inserta botones interactivos (por ejemplo, para volver a la pgina anterior o a la principal, o a otra pgina de nuestro web, o un web externo, o un archivo de texto, sonido, pelcula, etc.). b) Elige algn tipo de transicin entre las distintas pginas del Web. c) Inserta al menos una cancin. d) Inserta al menos un vdeo. e) Inserta un mensaje emergente.

16

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

Insertar ventana emergente o pop-up: Una ventana emergente (pop-up, en ingls) es una ventana
con el tamao e informacin (texto, tabla, imagen, etc.) que deseemos, que se abre cuando hacemos clic sobre una imagen, texto, etc. 1. Crear archivo nuevo .html, el cual constituir la ventana emergente, e insertar en l la informacin que queramos. Guardarlo. 2. Seleccionar el texto, imagen, etc. tal que, al hacer clic sobre l, aparezca la ventana emergente. 3. Con el texto o imagen seleccionado, ir a FormatoComportamientos 4. En el panel derecho que se abre a continuacin seleccionar explorador. / Abrir ventana de

5. Clic en hasta seleccionar la pgina html del paso 1; seleccionar tambin el tamao de la ventana emergente, etc. NOTA: Por defecto, la ventana emergente se abrir al pasar el puntero del ratn sobre el texto seleccionado. Si queremos cambiar esto, hay que hacer clic sobre en el panel derecho y cambiarlo. NOTA: Ms adelante, si queremos cambiar el comportamiento, bastar con hacer doble clic sobre l en el panel derecho, y seleccionar los cambios. NOTA: Si queremos eliminar un comportamiento, hay que seleccionar en el panel derecho.

Insertar un efecto a un texto de forma que, por ejemplo, al pasar el ratn por l, cambie de formato
(esta opcin es muy recomendable en una barra de vnculos): 1. Seleccionar el texto que deseamos que cambie. 2. FormatoComportamientos 3. En el panel derecho que se abre a continuacin, clic en 4. Seleccionar , y cambiar el color, tamao, etc. en que se aada borde, sombreado, etc. en . IMPORTANTE!: Si elegimos retirar el puntero del ratn. / Cambiar propiedad. ; podemos hacer

, el texto retornar a su formato original al

NOTA: Al igual que en el caso anterior, por defecto, el efecto se producir al pasar el puntero del ratn sobre el texto seleccionado. Si queremos cambiar esto, hay que hacer clic sobre en el panel derecho y cambiarlo.

Hacer que al pasar el ratn por una imagen aparezca otra imagen (imagen de reemplazo):
1. Seleccionar la imagen original. 2. FormatoComportamientos 3. En el panel derecho que se abre a continuacin seleccionar 4. Clic en / Intercambiar imagen.

para seleccionar la imagen de reemplazo; si seleccionamos la opcin

, una vez el usuario de nuestra pgina deje de pasar el puntero del ratn por la imagen se volver a la imagen original.

17

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

NOTA: Por defecto, la imagen de reemplazo aparecer al pasar el puntero del ratn sobre el texto seleccionado. Si queremos cambiar esto, hay que hacer clic sobre en el panel derecho y cambiarlo. NOTA: Otra variante es hacer que, al pasar el ratn por un determinado texto, se cambie una imagen original por otra de reemplazo; para ello, basta seleccionar el texto en cuestin en el paso 1.

Revisar ortografa: HerramientasOrtografa

Ejercicio 15: a) Inserta al menos una ventana emergente. b) Inserta efectos en algunos textos. c) Inserta alguna imagen de reemplazo. d) Revisa la ortografa de todas las pginas.

(o bien, pulsar F7)

9. PUBLICAR EL WEB

En primer lugar, conviene saber que existen herramientas gratuitas para crear nuestro web gratis,
como por ejemplo: http://www.creatupropiaweb.com/publicar/publicar.htm

Hosting

(alojamiento web): Consiste en, una vez ultimado, enviar la totalidad de nuestro Web (archivos, sonido, imgenes, vdeos, etc) a un determinado proveedor, el cual nos garantizar que cualquier usuario de Internet a nivel mundial podr acceder a l desde cualquier ordenador conectado a la red. Para ello, tendremos que enviar todos los archivos que componen nuestro Web (IMPORTANTE!: Suele ser necesario llamar index a la pgina principal) al proveedor elegido por medio de cualquier programa de transmisin de archivos (tambin llamado ftp: file transfer protocol), del tipo filezilla, cute ftp, WS ftp, etc., los cuales pueden encontrarse gratis en la red. Existen varias posibilidades de hosting: 1. Alojamiento web gratuito: Es ms limitado que el de pago, y suele agregar publicidad, pero es gratis He aqu una lista de servidores: www.iespana.es. Ofrecen 100Mb de espacio, acceso va Web o FTP ,trfico ilimitado, herramientas para principiantes, libros de visita, estadsticas detalladas de tus visitas, etc. Tienes que soportar su publicidad, un banner enorme debajo de la pgina o, mandndoles un correo a esta direccin (popup@iespana.es), una ventana popup al entrar en tu pgina. Direccin URL que obtienes: http://tu_nombre.iespana.es. www.tripod.lycos.es. Ofrecen 50Mb, acceso FTP EN LA PROPIA WEB, herramientas para principiantes, la publicidad es personalizable; lo que tiene de malo es que es muy difcil subir tu sitio si tienes que manejarte con varias carpetas, ya que no te permite abrirlas. URL tipo http://usuarios.lycos.es/tu_nombre. Soporte php y sql, http://galeon.hispavista.com/ Ofrecen 15Mb, acceso Web, asistente para principiantes, plantillas ya creada , y recursos para tus pginas como libro de visitas, foro, Chat, formularios, lbum de fotos, etc.. URL tipo http://tu_nombre.galeon.com GratisWeb. Te dan 50Mb de espacio gratuito, asistente que te guiar paso a paso, gestor de archivos; soporta ftp.

100 MB de espacio

50 MB de espacio

15 MB de espacio

50 MB de espacio

18

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

50 MB de espacio

www.telepolis.com. Ofrecen 50Mb, acceso Web, herramientas y asistente para principiantes. Tienes que soportar publicidad tipo popup al entrar en tu Web; tienes que instalarte un pack al registrarte (noticias en tu email, boletn de pginas en telepolis, asistente para navegacin, la pagina de telepolis como inicio) que luego puedes desinstalar. URL tipo http://club.telepolis.com/tu_nombre . http://miarroba.com. Ofrecen 25Mb, acceso Web FTP, transferencia ilimitada, estadsticas completa. Tienes que soportar su publicidad (Nada molesta). URL tipo http://tu_nombre.webcindario.com. Bases de datos, php, etc. Muchos recursos gratuitos para crear tu sitio (PHP5, MySql5.x). UnLugar.com 25Mb de espacio gratuito, ftp, cuentas de correo, alojamiento por tiempo ilimitado. ijijiji ,com Diseo propio, transferencia ilimitada, espacio ilimitado, recursos, nombre tipo http://hippo.ijijiji.com - http://hippo.cute.ijijiji.com http://hippo.album.ijijiji.com Personales.com Te ofrecen 30Mb, plantillas prediseadas, gestor de imgenes texto y fotos, mltiples subdominios y dominios para elegir. Amigar.com. Ms que un sitio para alojar tu Web se trata de un servidor privado, donde crear tu espacio, con asistente, recursos; tienes que ser mayor de 18 aos para registrarte. En ingls. 50 Megas Gratis para tu Web. URL www.atspace.com. tipo http://atspace.tu nombre http://freeservers.com. Te dan 50Mb, herramientas bsicas para iniciados y Web ftp; lo malo de este hosting es la publicidad. URL del tipo http://tu_nombre.4t.com o http://tu_nombre.freeservers.com, o cualquier otro, ya que puedes elegir entre varias opciones. Alojamiento gratuito con soporte PHP y ASP, bases de datos MySQL y Access. Sin publicidad. Espacio en disco y transferencia ajustados a cada necesidad. Es un lugar donde te ofrecen espacio gratuito para tu pgina y un montn de recursos: PHP, MySQL, espacio ilimitado, promocin... Tambin para pginas PHP y base de datos MySQL. Ofrecen espacio ilimitado y gratuito para alojar una web con tecnologas PHP, MySQL y otras. Es otro gran sitio donde publicar. Ofrecen espacio de 20 Mb y no colocan banners en las pginas. Alojamiento 100% gratis. Espacio web ilimitado con ftp y todo lo necesario. Tambin hosting vip GRATIS con mysql, php, cgis y mas... Servicios de alojamiento gratuito de calidad, transferencia ilimitada, servicios de dns, mail, php y mysql sin restricciones.

 500 Mb de espacio

25Mb de espacio

Ilimitado

Sin especificar
 50Mb de espacio

 50Mb de espacio

Tresuvesdobles Metropoli 2000 Tripod Espaa comunalia Galen Aldea Virtual Vivelared

(Busca por ti mismo ms sitios; slo tienes que poner en Google, por ejemplo, hosting gratis) 2. Otra posibilidad puede ser recurrir a nuestro proveedor de servicios de Internet (Telefnica, Jazztel, Ono, etc.), el cual, adems de la propia conexin a Internet, generalmente ofrece dentro del importe del contrato la posibilidad de almacenamiento web, si bien con bastantes limitaciones en la mayora de los casos.

19

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

3. Alojamiento web de pago: La mayor parte de los proveedores ofrecen, adems, otros servicios: compra de dominios, correo electrnico, etc. www.guebs.com/ www.arsys.es www.1and1.es/hosting www.piensasolutions.com www.hostalia.com/ www.evidaliahost.com/ www.interdominios.com/ Desde slo 3 al mes nos oferecen 100 MB de espacio Por 18 al trimestre ofrecen 200 MB Desde 3 /mes; 250 MB Desde 2 /mes; 100 MB Por 4 /mes slo ofrecen 30 MB Desde 2 /mes; 100 MB Desde 6 /mes ofrecen 800 MB

(Busca por ti mismo ms sitios; slo tienes que poner en Google, por ejemplo, hosting)

10. AADIR UN FAVICON

Vamos a ver cmo conseguir que, una vez publicado nuestro Web, en la barra de direcciones del navegador aparezca, junto a la URL de nuestro Web, un icono identificativo previamente escogido por nosotros. Tambin, este icono se ver en Favoritos de Explorer, o Marcadores de Mozilla. Este icono se suele llamar favicon:

Un favicon es un archivo de imagen que suele tener extensin .ico. El que funcione o no nuestro favicon en los distintos navegadores suele ser, a veces, algo impredecible, errtico e inestable, sobre todo en Explorer. Para asegurarnos de que funcione, se recomienda que tenga un tamao de 16x16 pxeles, 16 colores (4 bits), y extensin .ico (no .bmp, gif o jpg). En primer lugar, tendremos que crear el archivo favicon. He aqu una lista de programas para ello: http://tools.dynamicdrive.com/favicon/ http://www.genfavicon.com/es/ http://www.favikon.com/

Si queremos tener posibilidades de que funcione siempre, no se recomienda crearlo con Paint, PhotoShop, etc. Una vez creado el favicon, para conseguir nuestro objetivo de que se vea en la barra de direcciones tenemos dos posibilidades. La primera se trata de colocar un icono a todo un sitio Web entero. Con la segunda opcin podremos asignar un icono en una pgina de manera independiente: 1. Colocar un icono en un Web de manera global: Para ello, debemos editar un archivo .ico y darle el nombre "favicon.ico". Este archivo lo colocaremos en el directorio raz del dominio. Cuando se introduzca en favoritos cualquier pgina del sitio, en principio se ver el icono seleccionado.

20

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

Ahora bien, en general el procedimiento anterior suele funcionar con Mozilla, pero no con Explorer. En tal caso, tenemos una segunda opcin:

2. Colocar un icono especfico en una pgina En este caso tenemos que colocar una etiqueta en la cabecera del documento HTML (entre <head> y <head>). Esta etiqueta la tenemos que colocar en cada pgina que queramos asociar con un icono: <link rel="shortcut icon" href="myicono.ico">

En el atributo href de la etiqueta anterior, se ha de colocar el nombre del icono que queremos utilizar y la ruta para acceder a l. En el caso del ejemplo anterior se supone que un archivo llamado myicono.ico estar en el mismo directorio que la pgina web. Ahora bien, no siempre tenemos acceso al directorio raz del dominio. Imaginemos que publicamos nuestro web en Guebs; en este caso nunca tendremos acceso al directorio raz, www.guebs.com, sino que tendremos acceso al directorio que nos hayan asignado, por ejemplo www.guebs.com/mipagina. Para este caso, tenemos una segunda manera de insertar el icono. <link rel="shortcut icon" href="http://www.alfonsogonzalez.es/favicon.ico" type="image/x-icon"> Es decir, hemos indicado la ruta de acceso completa, y aadido el atributo type. De esta manera, es ms probable que funcione.

11. POSICIONAMIENTO WEB

Consiste en conseguir, una vez realizado nuestro Web y publicado, que ste se agregue a las bases de datos de los motores y directorios de bsqueda ms utilizados en la red (Google, Yahoo, Altavista, etc.). Por cierto, hay que tener en cuenta que Google responde a alrededor del 60 % de las bsquedas en la red. De nuevo, existen dos posibilidades para ello: gratis, o pagando. En el primer caso, he aqu algunos ejemplos: Elegir search engine submission, y a continuacin, free URL submission; tras una descripcin nuestra de nuestro web, generar las metaetiquetas para pegar a nuestro cdigo HTML. Para posicionarse en el buscador de yahoo. Para posicionarse en el buscador de google (ahora bien, ya nos avisan de que no nos prometen resultados inmediatos). Se trata de un interesante tutorial que nos da consejos para posicionarnos en google con un alto grado de xito.

http://www.cyler.com/agregaWeb/

http://docs.yahoo.com/info/suggest/ http://www.google.com/addurl.html http://www.google.com/intl/es/addurl.html http://google.dirson.com/posicionamiento.net/

Usualmente los resultados sern ms cmodos y quiz mejores en el caso de que estemos dispuestos a pagar una cantidad; el problema es que esta cantidad suele ser elevada para el bolsillo de un particular, por lo que es ms frecuente su uso en el caso de empresas. SEO son las siglas de

21

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

"Search Engine optimizar" (Optimizador de Buscadores). Se trata de una persona o empresa que se encarga de que una pgina web aparezca en las primeras posiciones dentro de los resultados de un buscador, en relacin a una serie de palabras o trminos. Hay una gran oferta en la red (basta con poner posicionamiento web en cualquier buscador): www.canalip.com www.Hurra.com/Posicionamiento www.serviweb.es/ www.davilac.es/posicionamiento www.seoposicion.com/

www.posicionamientoweb.com/ www.xeoweb.com/

Pero, adems de la posibilidad de que nuestra Web est presente en las bases de datos de los navegadores, tambin es muy recomendable poner las cosas fciles a los buscadores, fundamentalmente intentando que en el ttulo de cada pgina aparezcan las palabras claves deseadas (con las que queremos que encuentren nuestro web desde cualquier buscador); a ello podemos aadir la utilizacin de metaetiquetas: etiquetas HTML que se insertan en la cabecera de la pgina (entre <HEAD> y </HEAD>) y que nos permiten incluir en ellas la informacin que posibilitar a los buscadores localizar nuestra pgina: 1. Botn derecho sobre la pgina principal>Propiedades de pgina>Ficha General 2. Escribir en el campo Ttulo: un ttulo de la pgina que sirva adems como palabra clave descriptiva del web. Se recomienda no usar maysculas.9 3. Escribir en el campo Palabras clave: las palabras que resumen el contenido de nuestro Web, separadas por comas; no conviene usar maysculas, ni extenderse mucho. 4. Escribir en el campo Descripcin de la pgina: una breve descripcin de nuestro Web, la cual aparecer, por ejemplo, en Google cada vez que ste encuentre nuestro Web. Si activamos el panel Cdigo para visualizar el cdigo HTML de la pgina, podremos observar: <title>titulo_de_la_pagina</title> Ttulo de la pgina

junto con las siguientes metaetiquetas en la cabecera de la pgina: <META name="keywords" content="" /> < META name="Description" content="" /> Palabras clave de bsqueda Descripcin del contenido del Web

Finalmente, hay que resear que lo que se recomienda vivamente para poder aumentar nuestro pagerank -una especie de ndice de popularidad en Google- es lograr un gran nmero de enlaces a nuestro web en otros webs.

No todos los buscadores funcionan igual: Google, por ejemplo tiene ms en cuenta las palabras clave en el ttulo de la pgina (paso 2), y no las metaetiquetas de los pasos 3 y 4

22

Alfonso Gonzlez I.E.S. Fernando de Mena Curso 2012-2013

ACTIVIDAD FINAL: DISEO (por parejas) DE UN WEB DE TEMA A ELEGIR

En primer lugar, cada alumno o pareja deber elegir el tema de su Web (deportes, msica, cine, cultura, ciencia, etc.) y, una vez recibido el visto bueno del profesor, pensar qu estructura tendr dicho Web. A continuacin, habr que crear la estructura de carpetas y subcarpetas (imgenes, vdeos, msica, etc.) del Web y sus distintas pginas (ver pgs. 2 y 3), utilizando obligatoriamente plantillas (pgs. 3 a 5) o marcos (pg. 5). Dicho Web deber implementar algunos de los siguientes aspectos (en negrita figuran aquellos que debern ser incorporados obligatoriamente): 1. Utilizar tablas (pg. 11) para organizar la informacin. 2. Listas anidadas (pg. 8) 3. Lneas horizontales (pg. 8) 4. Marcadores para acceder a una lista alfabtica (pg. 9) 5. Hipervnculo a Web de tema relacionado (pg. 10) 6. Hipervnculo de correo (pg. 10) para que los que accedan a nuestro Web puedan mandarnos algn mensaje, sugerencia, etc. 7. Hipervnculo para la descarga de archivos (pg. 10) 8. Insertar imgenes (pg. 12) 9. Insertar gif animados (pg. 12) 10. Mapa imagen con hipervnculos (pg. 12) 11. Botones interactivos (pg. 13) 12. Sonidos (pg. 13) y vdeos (pg. 14) 13. Contador de visitas (pg. 16) 14. Incorporar animaciones y efectos dinmicos a los distintos elementos (letras, texto, imgenes, etc.) del Web (pg. 17) 15. Transiciones atractivas entre las distintas pginas del Web (pg. 13) 16. Una presentacin PowerPoint incrustada (pg. 16) 17. Incorporar un foro de discusin (pg. 16) 18. Mensajes emergentes (pg. 16) 19. Insertar ventana emergente (pg. 17) 20. Insertar una imagen de reemplazo (pg. 17) 21. Revisar la ortografa de todo el Web (pg. 18) (Evidentemente, cuantos ms tems de los anteriores incorpore el Web, de forma armonizada y atractiva, mejor nota se obtendr) Finalmente, se conseguir la mxima nota si se consigue publicar el Web siguiendo las recomendaciones de las pg. 18 y ss., y ms an, si se consigue asociarle un favicon (pg. 20).

Socullamos, abril de 2013

23