diseño de páginas web con publisher 2007

Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez [email protected]

www.humantica.com

Diseño de páginas WebDiseño de páginas Webcon Microsoft Publisher con Microsoft Publisher

2007 2007

Junio de Junio de 20142014

Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado- - 22 - -CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER

Diseño de páginas Web con Diseño de páginas Web con PublisherPublisher

1. Qué es una Web2. Pensar la Web3. Construir la Web4. Insertar contenidos5. Opciones avanzadas6. Gastar dinero en mi W

eb7. Ejercicio final

Para saber más: Para saber más: http://office.microsoft.com/es-es/publisher

Observa cómo tu profe diseña una página Web “Observa cómo tu profe diseña una página Web “a manoa mano” ” en HTMLen HTML


RecomendacionesRecomendaciones1.1.Conocimiento básico de Conocimiento básico de WindowsWindows2.2.Conocimiento medio de Microsoft Conocimiento medio de Microsoft WordWord3.3.Conocimiento básico de Internet Conocimiento básico de Internet ExplorerExplorer

Puedes seguir el curso en la siguiente dirección: Puedes seguir el curso en la siguiente dirección: http://humantica.com/servicios_informaticos/curso_publisher.htm


¿Qué es Microsoft ¿Qué es Microsoft Publisher?Publisher?• Es un programa más de la familia Es un programa más de la familia Microsoft OfficeMicrosoft Office• Su función principal es Su función principal es diseñar publicacionesdiseñar publicaciones• Se basa principalmente en Se basa principalmente en plantillasplantillas• Pero sirve para un montón de propósitos más:Pero sirve para un montón de propósitos más:

Puedes descargar una versión de prueba Puedes descargar una versión de prueba aquí


1. ¿Qué es una página 1. ¿Qué es una página Web?Web?

• Una Una página webpágina web es un documento o es un documento o información electrónica adaptada para la información electrónica adaptada para la World Wide Web y que puede ser accedida y que puede ser accedida mediante un navegador para mostrarse en el mediante un navegador para mostrarse en el monitor de un ordenador o dispositivo móvil monitor de un ordenador o dispositivo móvil (PDA, móvil, portátil).(PDA, móvil, portátil).

• Esta información se encuentra generalmente en Esta información se encuentra generalmente en formato formato HTML, y puede proporcionar navegación , y puede proporcionar navegación a otras páginas Web mediante a otras páginas Web mediante hiperenlaces..

• Las páginas Web frecuentemente incluyen otros Las páginas Web frecuentemente incluyen otros recursos recursos multimediamultimedia como imágenes en como imágenes en movimiento, fotos, vídeos, sonido…movimiento, fotos, vídeos, sonido…

Diferencia entre Diferencia entre dominios genéricosdominios genéricos ( (com, .net, .org, com, .net, .org, biz, .info, .eubiz, .info, .eu) y ) y dominios territoriales


1. Programas 1. Programas necesariosnecesarios

• Diseño WebDiseño Web: DreamWeaver, Expression Web, : DreamWeaver, Expression Web, FrontPage, Google Sites, FrontPage, Google Sites, Microsoft PublisherMicrosoft Publisher

• Cliente FTPCliente FTP: CuteFTP, FileZilla, : CuteFTP, FileZilla, Explorador de Explorador de WindowsWindows

• Edición de imágenesEdición de imágenes: Photoshop, Gimp, : Photoshop, Gimp, PaintPaint• Edición de vídeoEdición de vídeo: : Windows Movie MakerWindows Movie Maker• Edición de sonidoEdición de sonido: : AudacityAudacity• Un Un NavegadorNavegador::

Uno de los programas Uno de los programas subrayados es de pago ¿subrayados es de pago ¿cuál cuál

eses??


1. Tres requisitos para tener una 1. Tres requisitos para tener una WebWeb

1.Diseñar una Web una Web

en tu ordenadoren tu ordenador

1.Registrar un nombre de dominio un nombre de dominiowww.fruteriaperez.com

2.2.Alojar la Web en un servidor WebAlojar la Web en un servidor Webwww.arsys.es www.abansys.com www.humantica.com


1.1. Visita algunas Webs Visita algunas Webs realesreales

• www.rocafull.es www.rocafull.es

• www.ginesito.es

• www.ginescorbalan.com

• www.luanconsultores.com

• www.librerialeyendas.es

Observa la sencillez de la primera WebObserva la sencillez de la primera Web


1. Asistente para hacer una 1. Asistente para hacer una WebWeb1.1. Abre el programa Abre el programa Microsoft Publisher Microsoft Publisher 20072007

2.2. Pulsa en la categoría Pulsa en la categoría Sitios WebSitios Web

3.3. En el área de categorías de plantillas, En el área de categorías de plantillas, en la sección Diseños clásicos y en la sección Diseños clásicos y haz clic en haz clic en VeranoVerano::

4.4. Pulsa clic en Crear. Aparece el cuadro de diálogo Pulsa clic en Crear. Aparece el cuadro de diálogo Generador fácil de sitios webGenerador fácil de sitios web

5.5. En el cuadro Generador fácil de sitios web, En el cuadro Generador fácil de sitios web, activa las activa las casillascasillas de verificación que consideres necesarias de verificación que consideres necesarias

Observa cómo tu profe diseña Observa cómo tu profe diseña una página Web con Microsoft una página Web con Microsoft

PublisherPublisher


1. Asistente para hacer una 1. Asistente para hacer una WebWeb

6.6. Luego clic en Aceptar. Ahora esperemos que se creen las Luego clic en Aceptar. Ahora esperemos que se creen las páginas del sitio Web, selecciona todas las opcionespáginas del sitio Web, selecciona todas las opciones

Marca solo las páginas que Marca solo las páginas que creas que vas a necesitar en tu creas que vas a necesitar en tu

WebWeb


7.7. Como puedes ver, la plantilla de página web Como puedes ver, la plantilla de página web muestra una serie de páginas predefinidas listas muestra una serie de páginas predefinidas listas para ser personalizadas. Cambia el texto “Página para ser personalizadas. Cambia el texto “Página Web” por “Web” por “Bienvenidos a Frutería PérezBienvenidos a Frutería Pérez”…”…


Bienvenidos a Frutería Bienvenidos a Frutería PérezPérez


7.7. … … Ahora pulsa la Ahora pulsa la opción “opción “ArchivoArchivo” -” -> “> “Vista previa Vista previa página Webpágina Web” para ” para visualizar en tu visualizar en tu navegador una navegador una vista previa de tu vista previa de tu web recién creada web recién creada en tu propio en tu propio ordenador:ordenador:


Bienvenidos a Frutería Bienvenidos a Frutería PérezPérez

Ahora vuelve al paso primero (diapositiva Ahora vuelve al paso primero (diapositiva 9ª) para crear tu primera Web sin ayuda 9ª) para crear tu primera Web sin ayuda

del profedel profe


• Para “Para “subirsubir” la Web a Internet” la Web a Internet, deberías tener , deberías tener previamente contratados dos productos:previamente contratados dos productos:

– un un nombre de dominionombre de dominio, por ejemplo: “www.fruteriaperez.com”, por ejemplo: “www.fruteriaperez.com”– un un alojamiento Webalojamiento Web como mínimo de 50 MB como mínimo de 50 MB

• Como no los tienes contratados, este último paso deja que Como no los tienes contratados, este último paso deja que lo haga tu profesor por ti para que veas que no es tan lo haga tu profesor por ti para que veas que no es tan complicado como parece, observa los pasos siguientes:complicado como parece, observa los pasos siguientes:

1.1. Crear los Crear los directoriosdirectorios de trabajo (o hazlo en el paso 2) de trabajo (o hazlo en el paso 2)

2.2. Guardar el Guardar el proyectoproyecto (archivo *.pub): “Archivo” -> “Guardar (archivo *.pub): “Archivo” -> “Guardar cómo…”cómo…”

3.3. Generar los Generar los archivos Webarchivos Web: “Archivo” -> “Publicar en Web…”: “Archivo” -> “Publicar en Web…”

4.4. SubirSubir los archivos Web a Internet con un cliente FTP los archivos Web a Internet con un cliente FTP

5.5. ComprobarComprobar que funciona: que funciona: www.luanconsultores.com


Observa cómo tu profe Observa cómo tu profe sube la página Web a sube la página Web a

InternetInternet


Coge Coge papel y lápiz papel y lápiz piensa en los siguientes piensa en los siguientes componentescomponentes de tu Web: de tu Web:

• Nombre de la Nombre de la web: web: “Frutería Pérez”“Frutería Pérez”

• Nombre del Nombre del dominio: dominio: “fruteriaperez.com”“fruteriaperez.com”

• Páginas o Páginas o botonesbotones principales de mi principales de mi web y sus dependencias (esquema)web y sus dependencias (esquema)

• Escribir Escribir contenidoscontenidos de cada ventana de cada ventana• Buscar Buscar imágenesimágenes y otros recursos y otros recursos

multimedia que necesitaré para incluir multimedia que necesitaré para incluir en la Web en la Web (y guardarlos en una carpeta)(y guardarlos en una carpeta)

• ConsejoConsejo: Utiliza : Utiliza WordWord y su herramienta y su herramienta SmartArt SmartArt y guarda todo en el directorio y guarda todo en el directorio “mi_web.com/recursos”“mi_web.com/recursos”

2. Pensar en la Web 2. Pensar en la Web “FrureriaPerez.com”“FrureriaPerez.com”

Las decisiones que tomes Las decisiones que tomes escríbelas en un papel, la pizarra o escríbelas en un papel, la pizarra o

en Worden Word


En el menú En el menú Edición / Información empresarial / ModificarEdición / Información empresarial / Modificar::

2. Información 2. Información empresarialempresarial

• Nombre personaNombre persona

• Puesto o cargoPuesto o cargo

• Nombre empresaNombre empresa

• DirecciónDirección

• Teléfono / FaxTeléfono / Fax

• Correo Correo electrónicoelectrónico

• EsloganEslogan• Logotipo Logotipo

(PowerPoint)(PowerPoint)

Está diapositiva la verás a fondo en el Está diapositiva la verás a fondo en el capítulo 5capítulo 5


Crear Crear una carpeta una carpeta exclusiva para la Web:exclusiva para la Web:

• fruteriaperez.comfruteriaperez.com: Aquí se guardarán los archivos de la : Aquí se guardarán los archivos de la Web una vez publicada esta, siempre tendrá un archivo Web una vez publicada esta, siempre tendrá un archivo principal llamado “principal llamado “index.htmindex.htm” y una carpeta llamada ” y una carpeta llamada ““index_archivosindex_archivos””

• \\recursosrecursos: En esta subcarpeta guardaré todos los : En esta subcarpeta guardaré todos los archivos multimedia que necesite para añadir a mi archivos multimedia que necesite para añadir a mi Web: imágenes, fotos, música MP3, incluso vídeosWeb: imágenes, fotos, música MP3, incluso vídeos

2. Crea las carpetas del 2. Crea las carpetas del proyectoproyecto

Crea esas dos carpetas en tu ordenador o Crea esas dos carpetas en tu ordenador o pendrivependrive


Seleccionar y configurar plantilla: Seleccionar y configurar plantilla: • FondoFondo: En Formato / Fondo: En Formato / Fondo

• TamañoTamaño: En Formato / Formato de publicación: En Formato / Formato de publicación

• ColoresColores: En Formato / Combinación de colores: En Formato / Combinación de colores

• Tipos letraTipos letra: En Formato / Combinación de : En Formato / Combinación de fuentesfuentes

• MenúsMenús: : ¿Horizontal o vertical? Lo encontrarás ¿Horizontal o vertical? Lo encontrarás en Formato / Formato de publicación / “Cambiar en Formato / Formato de publicación / “Cambiar plantilla” / Barras de exploraciónplantilla” / Barras de exploración

2. Pensar en la Web2. Pensar en la WebContinúa pensando, Continúa pensando,

decidiendo y escribiendo decidiendo y escribiendo sobre tu Websobre tu Web

En: En: Formato / Formato de publicación / Opciones Formato / Formato de publicación / Opciones de Sitio / Cambiar plantilla / Opcionesde Sitio / Cambiar plantilla / Opciones


• LogotipoLogotipo de la Web de la Web (diapo. 21)(diapo. 21)

• EncabezadoEncabezado de la web de la web (diapo. 22) (diapo. 22) y elementos comunesy elementos comunes• Lo más importante: Los Lo más importante: Los contenidoscontenidos (escríbelos antes)(escríbelos antes)

• Colección de Colección de imágenes:imágenes: BMP, JPG, PNG y GIF BMP, JPG, PNG y GIF (diap. 20)(diap. 20)

– 2 estrategias: los alojas tú o te aprovechas de 2 estrategias: los alojas tú o te aprovechas de Flickr.comFlickr.com

• Colección de Colección de músicamúsica MP3 -> WAV ó MID MP3 -> WAV ó MID

• Colección de Colección de vídeosvídeos: MP4: MP4– 2 estrategias: los alojas tú o te aprovechas de 2 estrategias: los alojas tú o te aprovechas de YouTubeYouTube

• Vínculos: Páginas Vínculos: Páginas recomendadasrecomendadas

2. Pensar en la 2. Pensar en la WebWeb

Piensa en la lista de páginas Piensa en la lista de páginas recomendadasrecomendadas


• Lo más importante es lo primero que se ve, en Lo más importante es lo primero que se ve, en tu caso la tu caso la página de INICIOpágina de INICIO (index.html o (index.html o index.htmindex.htm))::

– Debe se Debe se sencillasencilla y con “aire” y con “aire”– Debe Debe verse de un vistazoverse de un vistazo– Poco texto y sencillo Poco texto y sencillo de entender (no técnico)de entender (no técnico)– Muy importante: Banner, logo, lema, Muy importante: Banner, logo, lema, imágenesimágenes– No mezcles muchos No mezcles muchos tipos de letrastipos de letras

• Elabora lista de Elabora lista de serviciosservicios

• Elabora lista de Elabora lista de productosproductos

2. Pensar en la 2. Pensar en la WebWeb

Compara Compara www.google.es con con www.terra.es


2. 2. FormatosFormatos

gráficosgráficos• BMPBMP (Bits Maps Protocole)(Bits Maps Protocole)Es de los más pesados, Es de los más pesados, nada recomendadonada recomendado para usar en tu Web o para usar en tu Web o blog.blog.El único punto a favor es que es muy nítido y claroEl único punto a favor es que es muy nítido y claro• JPEGJPEG (Joint Photographic Experts Group)(Joint Photographic Experts Group)Es el formato de imagen Es el formato de imagen más difundidomás difundido. . Pierde nitidezPierde nitidez según el según el grado de compresión. Hay que usarlo con cuidado. Es el formato que grado de compresión. Hay que usarlo con cuidado. Es el formato que más más comprimecomprime el archivo de imagen. (Recomendado para fotos). el archivo de imagen. (Recomendado para fotos).• PNGPNG (Portable Network Graphics)(Portable Network Graphics)No pierde nitidez, queda clarito como un BMP pero sin ocupar No pierde nitidez, queda clarito como un BMP pero sin ocupar demasiados KB. Otra cualidad del PNG es la demasiados KB. Otra cualidad del PNG es la transparenciatransparencia, para que , para que se acople con el fondo de nuestra web. (Recomendado para fotos y se acople con el fondo de nuestra web. (Recomendado para fotos y dibujos). Es un formato libre.dibujos). Es un formato libre.• GIFGIF (Compuserve GIF)(Compuserve GIF)Es un formato muy ligero, y lo mejor es que la Es un formato muy ligero, y lo mejor es que la transparenciatransparencia usada usada en este tipo de archivo lo leen todos los navegadores. Otro punto a en este tipo de archivo lo leen todos los navegadores. Otro punto a favor es que se pueden hacer una favor es que se pueden hacer una secuencia de imágenessecuencia de imágenes. . (Recomendado para dibujos)(Recomendado para dibujos)

Abre el PAINT y pulsa “Abre el PAINT y pulsa “Guardar Guardar comocomo””BMP JPG PNG GIF

Transparencia

No No Sí Sí

Movimiento No No No Sí

Compresión No Sí Sí Sí


2. 2. LogotipoLogotipo

Crea un logotipo para tu Web y guárdalo en la carpeta Crea un logotipo para tu Web y guárdalo en la carpeta “recursos”. Puedes retocarlo con ““recursos”. Puedes retocarlo con “PaintPaint” o con ” o con

““PowerPointPowerPoint”. Utiliza la herramienta “”. Utiliza la herramienta “Definir color Definir color transparentetransparente”.”.

1.1. Abre Abre GoogleGoogle / Imágenes / Imágenes2.2. Busca imagen Busca imagen

relacionada con tu Web relacionada con tu Web (“(“frutafruta”)”)

3.3. Aprende a manejar la Aprende a manejar la búsqueda avanzadabúsqueda avanzada::• Temas, Tamaños, Temas, Tamaños, • Color, Tipo, fechasColor, Tipo, fechas

4.4. Encuentra imagen Encuentra imagen adecuada (adecuada (fondo fondo blancoblanco))

5.5. Guárdala en “Guárdala en “recursosrecursos””6.6. ¿Qué ¿Qué tipo de imagentipo de imagen

es?es?


2. Banner (WordArt)2. Banner (WordArt)Crea un banner adecuado a tu Crea un banner adecuado a tu Web y guárdalos en la carpeta Web y guárdalos en la carpeta

“recursos”“recursos”

1.1.Abre PublisherAbre Publisher2.2.Insertar / Imagen Insertar / Imagen

/ / WordArtWordArt3.3.Escribe el textoEscribe el texto4.4.Edita el gráficoEdita el gráfico5.5.Tamaño Tamaño

adecuado adecuado 600x120 u otros600x120 u otros


2. Sonido de 2. Sonido de fondofondo

Guarda tu música de Guarda tu música de fondo en la carpeta fondo en la carpeta

“recursos“recursos

1.1. Botón dcho. sobre la página 1Botón dcho. sobre la página 12.2. Abre “Opciones de página Abre “Opciones de página

Web…”Web…”3.3. Selecciona de la carpeta Selecciona de la carpeta

“Recursos” la música “Recursos” la música adecuadaadecuada

Los tipos de archivo de sonido que necesita Publisher son:Los tipos de archivo de sonido que necesita Publisher son:*.*.wavwav, *., *.midmid, *.midi, *.rmi, *.au, *.aif, *.aiff, *., *.midi, *.rmi, *.au, *.aif, *.aiff, *.mp3mp3 (teóricamente NO)(teóricamente NO)Ejemplos en:Ejemplos en: C:\Program Files\Microsoft Office\CLIPART\PUB60COR

Pide al profe que te enseñe Pide al profe que te enseñe a extraer música WAV de a extraer música WAV de un CDun CD


2. Descarga de vídeos2. Descarga de vídeosVer vídeos con Ver vídeos con YouTubeYouTube::

1.1. Abrir el navegador (Internet Abrir el navegador (Internet ExplorerExplorer))

2.2. Ir a la página Ir a la página www.youtube.com

3.3. EscribirEscribir lo que buscamos en la casilla de lo que buscamos en la casilla de ““buscarbuscar””

4.4. Seleccionar el vídeoSeleccionar el vídeo que nos interesa que nos interesa

Busca y descarga Busca y descarga un vídeo para tu un vídeo para tu

WebWeb

Descargar vídeos de Descargar vídeos de YouTubeYouTube (una manera (una manera sencilla)sencilla)::

1.1. CopiaCopia ((Ctrl+CCtrl+C) ) la URL del vídeo a descargarla URL del vídeo a descargar2.2. AbreAbre www.descargaryoutube.com y y PegaPega ( (Ctrl+VCtrl+V) )

la URLla URL

3.3. Pulsa el botón “Pulsa el botón “Descargar vídeo”Descargar vídeo”

4.4. Selecciona “Selecciona “Descargar MP4” Descargar MP4” y guárdalo en y guárdalo en ”recursos””recursos”

www.ssyoutube.com y y VLC


1.1. Recopila material multimediaRecopila material multimedia y cópialo a la carpeta y cópialo a la carpeta “recursos” dentro de la carpeta “fruteriaperez.com”“recursos” dentro de la carpeta “fruteriaperez.com”

2.2. Abre el Publisher y utiliza el Abre el Publisher y utiliza el asistenteasistente con toda libertad con toda libertad para crear el esqueleto de la Web como más te gustepara crear el esqueleto de la Web como más te guste

3.3. Crea la Crea la cabeceracabecera de la Web ( de la Web (bannerbanner) y un logotipo) y un logotipo

4.4. Construye el Construye el menú principalmenú principal y revísalo y revísalo

5.5. Llena de Llena de contenidoscontenidos (textos) la Web, empieza por la (textos) la Web, empieza por la página principalpágina principal

6.6. Añade Añade elementos multimediaelementos multimedia (imágenes, sonido, vídeo)(imágenes, sonido, vídeo)

7.7. Guarda el trabajo en un Guarda el trabajo en un archivo PUBarchivo PUB (“fruteriaperez.pub”)(“fruteriaperez.pub”)

8.8. Archivo/Publicar en WebArchivo/Publicar en Web (genera “index.htm” e “\(genera “index.htm” e “\index_archivos”)index_archivos”)

9.9. Cierra el Publisher y Cierra el Publisher y prueba la Webprueba la Web en tu PC en tu PC (“index.htm”)(“index.htm”)

3. Construir la Web por 3. Construir la Web por pasospasos

Pongamos en marcha lo aprendido hasta Pongamos en marcha lo aprendido hasta ahora. Tómate 30 minutos.ahora. Tómate 30 minutos.


3. Cuidado con el objeto 3. Cuidado con el objeto MENÚMENÚ

Practica modificando opciones del Practica modificando opciones del menúmenú

Aprende todas las opciones de la Aprende todas las opciones de la barra de barra de menúmenú::• AgregarAgregar vínculo vínculo• QuitarQuitar vínculo vínculo• ModificarModificar vínculo vínculo• SubirSubir y y bajarbajar los vínculos los vínculos

No No olvides olvides MARCARMARCAR

Varita mágicaVarita mágica

ConsejoConsejo: Nunca edites la : Nunca edites la misma opción de menú que la misma opción de menú que la página en la que estás. Y si página en la que estás. Y si puedes evitar editarlo, mejor.puedes evitar editarlo, mejor.


4. Añadir una página a la 4. Añadir una página a la WebWeb

1.1. Pulsa clic en la Pulsa clic en la última páginaúltima página del del clasificador de páginas y luego clic clasificador de páginas y luego clic en Insertar páginaen Insertar página

2.2. En el cuadro de diálogo En el cuadro de diálogo Insertar página WebInsertar página Web, en la , en la columna columna Seleccione un tipo de páginaSeleccione un tipo de página, pulsa clic en , pulsa clic en ““OficioOficio” (u otra)” (u otra)

3.3. Verifica que la casilla “Verifica que la casilla “Agregar hipervínculo a las Barras Agregar hipervínculo a las Barras de exploraciónde exploración” se encuentre activa” se encuentre activa

4.4. Pulsa clic en “Pulsa clic en “AceptarAceptar”…”…

Observa cómo tu profe añade una nueva página para Observa cómo tu profe añade una nueva página para ““Aviso legalAviso legal””


4. Añadir una página a la 4. Añadir una página a la WebWeb

5.5. …observa cómo se …observa cómo se crea su crea su nueva páginanueva página, y , y en el panel que está al en el panel que está al lado derecho de la lado derecho de la página web (Barra de página web (Barra de exploración de página exploración de página web) se encuentra el web) se encuentra el vínculo a vínculo a Oficio.Oficio. Cambia el nombre del Cambia el nombre del botón por “botón por “Aviso legalAviso legal””

Una buena costumbreUna buena costumbre: Haz una copia del archivo PUB : Haz una copia del archivo PUB antes de empezar a trabajar con él, te ahorrarás antes de empezar a trabajar con él, te ahorrarás

muchos disgustosmuchos disgustos


4. Modificar un elemento del 4. Modificar un elemento del menúmenú

6.6. Selecciona la Selecciona la Barra de Barra de exploraciónexploración y clic en la y clic en la ““varita mágica”varita mágica”



7.7. En el cuadro de diálogo En el cuadro de diálogo Propiedades de la barra Propiedades de la barra de exploraciónde exploración, en el , en el cuadro “cuadro “NombreNombre” escribe: ” escribe: “Mis vínculos”. De esta “Mis vínculos”. De esta manera se está dando un manera se está dando un nombre personalizado a la nombre personalizado a la Barra de exploración. Barra de exploración.

8.8. En la columna “En la columna “VínculosVínculos:”, seleccione “:”, seleccione “OficioOficio” y ” y luego clic en el botón “luego clic en el botón “Modificar vinculoModificar vinculo” ”


4. Modificar un elemento del 4. Modificar un elemento del menúmenú9.9. En el cuadro En el cuadro

““Modificar Modificar vinculo: Mis vinculo: Mis vínculosvínculos”, ”, cambia el cuadro cambia el cuadro Texto de “Texto de “OficioOficio” ” a: “a: “Aviso legalAviso legal””10.10. Clic en Clic en AceptarAceptar en todos los cuadros de diálogos en todos los cuadros de diálogos

abiertos. Nota cómo ha cambiado el nombre de abiertos. Nota cómo ha cambiado el nombre de la Barra de exploración. Donde antes decía la Barra de exploración. Donde antes decía ““OficioOficio”, ahora dice “”, ahora dice “Aviso legalAviso legal””

11.11. En la En la barra Herramientas webbarra Herramientas web, pulse clic en el , pulse clic en el botón “botón “Vista previa de la página webVista previa de la página web””

Busca en Google “Aviso legal frutería” y copia el texto a tu Busca en Google “Aviso legal frutería” y copia el texto a tu páginapágina



12.12. Revisa tu página Web y Revisa tu página Web y prueba cada prueba cada vínculovínculo

Puedes tener más de un menú a la vez, no lo Puedes tener más de un menú a la vez, no lo olvides. olvides. Menú Insertar / Barra de exploración / Menú Insertar / Barra de exploración /

Nuevo…Nuevo…


5. Opciones avanzadas.5. Opciones avanzadas.Barras de herramientas y Barras de herramientas y botonesbotones

Activa y desactiva las barras de Activa y desactiva las barras de herramientasherramientas


5. Barra Estándar5. Barra Estándar

• Nueva página WebNueva página Web• AbrirAbrir• GuardarGuardar• ImprimirImprimir• Vista preliminarVista preliminar• OrtografíaOrtografía• ReferenciaReferencia• CortarCortar• CopiarCopiar• PegarPegar• Agregar a la Agregar a la bibliotecabiblioteca• Copiar formatoCopiar formato

• DeshacerDeshacer• RehacerRehacer• Traer al frenteTraer al frente**• Girar librementeGirar libremente• Insertar hipervínculoInsertar hipervínculo**• Vista previa de la página Vista previa de la página WebWeb• Caracteres especialesCaracteres especiales• ZoomZoom• AlejarAlejar• AcercarAcercar• AyudaAyuda


5. Barra de Formato5. Barra de Formato

• EstilosEstilos• EstiloEstilo• FuenteFuente• Tamaño de fuenteTamaño de fuente• NegritaNegrita• CursivaCursiva• SubrayadoSubrayado• Alinear a la Alinear a la izquierdaizquierda• CentrarCentrar• Alinear a la derechaAlinear a la derecha• JustificarJustificar• InterlineadoInterlineado• NumeraciónNumeración

• ViñetasViñetas• Disminuir sangríaDisminuir sangría• Aumentar sangríaAumentar sangría• Disminuir tamañoDisminuir tamaño• Aumentar tamañoAumentar tamaño• Color de rellenoColor de relleno• Color de líneaColor de línea• Color de fuenteColor de fuente• Estilo de línea o Estilo de línea o bordeborde• Estilo de guiónEstilo de guión• Estilo de flechaEstilo de flecha• Estilo de sombraEstilo de sombra• Estilo 3DEstilo 3D


5. Opciones avanzadas. 5. Opciones avanzadas. InsertarInsertar• Insertar Cuadro de textoInsertar Cuadro de texto

• Insertar HipervínculoInsertar Hipervínculo

• Insertar Correo electrónicoInsertar Correo electrónico

• Insertar Objeto de la Galería de Insertar Objeto de la Galería de DiseñoDiseño

• Insertar Información empresarialInsertar Información empresarial

• Insertar Imágenes prediseñadas Insertar Imágenes prediseñadas

y externas (desde archivo)y externas (desde archivo)

• Insertar Vídeo o MúsicaInsertar Vídeo o Música

• Insertar TablasInsertar Tablas

• Insertar Mapa de GoogleInsertar Mapa de Google

• Insertar Vídeo de YouTubeInsertar Vídeo de YouTube

Truco: Truco: Ctrl+ClicCtrl+Clic te lleva a la te lleva a la página que tengas creada en el página que tengas creada en el

hipervínculohipervínculo


5. Insertar Cuadro de 5. Insertar Cuadro de textotexto

A ver si consigues un efecto A ver si consigues un efecto degradadodegradado como el del como el del

ejemploejemplo


5. Insertar Hipervínculo 5. Insertar Hipervínculo (Ctrl+Alt+K)(Ctrl+Alt+K)

Permite Permite crear hiperenlaces desdecrear hiperenlaces desde::• Un texto: Un texto: Haz clic Haz clic aquí

• Una imagen:Una imagen:

• Un menú:Un menú:

• Un botón:Un botón:

HaciaHacia::• Otras páginas de nuestra WebOtras páginas de nuestra Web

• Otras páginas de Internet externas Otras páginas de Internet externas (URL)(URL)

• Correo electrónico*Correo electrónico*

Crea un Crea un hipervínculohipervínculo a una a una página de tu Web y otra a una página de tu Web y otra a una

Web externaWeb externa

Botón

Inicio


5. Insertar Correo 5. Insertar Correo electrónicoelectrónicoContacta con [email protected]

Este correo solo funcionará en los ordenadores que tengan Este correo solo funcionará en los ordenadores que tengan instalado un cliente de correo como: instalado un cliente de correo como: OutlookOutlook, Outlook , Outlook

Express o Express o ThunderbirdThunderbird

No es buena idea exponer el No es buena idea exponer el correo en la web, usa una correo en la web, usa una

imagenimagen


5. Insertar Objeto de la galería de 5. Insertar Objeto de la galería de diseñodiseño

Practica con los objetos señalados, crea un Practica con los objetos señalados, crea un anuncioanuncio


5. Insertar Información 5. Insertar Información empresarialempresarial

Modifica el eslogan de la empresa y Modifica el eslogan de la empresa y comprueba que cambia en TODAS las comprueba que cambia en TODAS las

páginaspáginas

La “La “Información Información empresarialempresarial” se ” se reconocen por el reconocen por el subrayado azulsubrayado azul


5. 5. Insertar Imágenes prediseñadas y Insertar Imágenes prediseñadas y externasexternas

Practica con los 4 objetos Practica con los 4 objetos señaladosseñalados

¡¡¡Comprímela!¡¡¡Comprímela!!!!!


5. Insertar Vídeo o 5. Insertar Vídeo o MúsicaMúsica

Antes de nada, hay que Antes de nada, hay que SUBIRSUBIR a una carpeta a una carpeta “multimedia” (u otro nombre) del servidor “multimedia” (u otro nombre) del servidor FTP el vídeo o la canción:FTP el vídeo o la canción:

1.1. InsertarInsertar un objeto gráfico o un texto donde se desee un objeto gráfico o un texto donde se desee enlazar el vídeo o la canciónenlazar el vídeo o la canción

2.2. SeleccionarSeleccionar el objeto o el texto el objeto o el texto3.3. Insertar / HipervínculoInsertar / Hipervínculo (Ctrl + Alt +K) (Ctrl + Alt +K)4.4. EscribirEscribir en “Dirección” en “Dirección” la URLla URL del vídeo o canción del vídeo o canción

Puedes utilizar un MP3 de Puedes utilizar un MP3 de Internet (si conoces su URL)Internet (si conoces su URL)


5. Insertar 5. Insertar TablasTablas

Lunes Martes Miércoles Jueves Viernes

Desayuno Donut Donut Donut Donut Donut

Almuerzo Café Café Café Café Café

Comida Lentejas Lentejas Lentejas Lentejas Lentejas

Cena Huevo frito Huevo frito Huevo frito Huevo frito Huevo frito

Intenta crear la tabla Intenta crear la tabla de esta misma de esta misma

diapositivadiapositiva

5566


5. 5. Incrustar Mapa de GoogleIncrustar Mapa de Google1.1. Accede a Accede a www.google.com/maps 2.2. Localiza el mapa exacto tal y Localiza el mapa exacto tal y

como lo quieres mostrar en la Webcomo lo quieres mostrar en la Web3.3. Pulsa el botón “Enlazar”Pulsa el botón “Enlazar”4.4. Selecciona y Copia el código HTMLSelecciona y Copia el código HTML5.5. Ve a Publisher / Menú Insertar / Ve a Publisher / Menú Insertar /

Fragmento de código HTML… Fragmento de código HTML… **6.6. Pega el código en la ventana que Pega el código en la ventana que

se ha abierto y “Acepta”se ha abierto y “Acepta”7.7. Redimensiona el objeto HTML para Redimensiona el objeto HTML para

que ocupe el espacio del mapa en que ocupe el espacio del mapa en la Webla Web

8.8. PruébaloPruébalo

Inserta un Mapa de Google Inserta un Mapa de Google en la página “Acerca de en la página “Acerca de

nosotros”nosotros”

** Puedes utilizar esta técnica para insertar un calendario de Puedes utilizar esta técnica para insertar un calendario de GoogleGoogle


5. 5. Incrustar Vídeo de Incrustar Vídeo de YouTubeYouTube1.1. Accede a www.youtube.comAccede a www.youtube.com

2.2. Localiza y abre el vídeo Localiza y abre el vídeo “presentación “presentación frutería”frutería”

3.3. Pulsa el botón “Compartir”Pulsa el botón “Compartir”4.4. Pulsa el botón “Insertar”Pulsa el botón “Insertar”5.5. Configura las opciones de Configura las opciones de

visualizaciónvisualización6.6. Selecciona y Copia el código HTMLSelecciona y Copia el código HTML7.7. Ve a Publisher / Menú Insertar / Ve a Publisher / Menú Insertar /

Fragmento de código HTML…Fragmento de código HTML…8.8. Pega el código en la ventana que Pega el código en la ventana que

se ha abierto y “Acepta”se ha abierto y “Acepta”9.9. Sitúa la esquina superior izquierda Sitúa la esquina superior izquierda

del objeto HTML para que se situe del objeto HTML para que se situe en el sito exacto donde va en la en el sito exacto donde va en la WebWeb

10.10.PruébaloPruébalo

Inserta un vídeo de Youtube Inserta un vídeo de Youtube en una página de tu Weben una página de tu Web


5. 5. Incrustar Formulario de Incrustar Formulario de GoogleGoogle

1.1. Accede a Google Accede a Google DocsDocs

2.2. Archivo / Nuevo / Archivo / Nuevo / FormularioFormulario

3.3. Escribe el títuloEscribe el título4.4. Escribe las Escribe las

instruccionesinstrucciones5.5. Elige tipo TextoElige tipo Texto6.6. Botón “Enviar Botón “Enviar

formulario”formulario”7.7. IncrustarIncrustar8.8. Luego insertas el Luego insertas el

código HTML en una código HTML en una página Web de tu página Web de tu proyectoproyecto

Necesitarás una cuenta de Necesitarás una cuenta de GmailGmail


5. 5. Crear imágenes con zonas Crear imágenes con zonas activasactivas

1.1. Selecciona una imagenSelecciona una imagen2.2. Selecciona “Zona Selecciona “Zona

activa”activa”3.3. Pincha y arrastra para Pincha y arrastra para

crear la forma crear la forma rectangular rectangular

4.4.Inserta el hipervínculoInserta el hipervínculo5.5.Repite el proceso más Repite el proceso más

vecesveces

Inserta una imagen con varias zonas Inserta una imagen con varias zonas activasactivas


5. Revisión ortográfica: 5. Revisión ortográfica: F7F7• Aunque parezca poco importante, tener Aunque parezca poco importante, tener

una Web bien redactada y sin una Web bien redactada y sin faltas de faltas de ortografía ortografía influye mucho en el influye mucho en el posicionamiento Webposicionamiento Web

• Si tienes faltas de ortografía estarás Si tienes faltas de ortografía estarás ““echando” de tu Web a muchos clientesechando” de tu Web a muchos clientes

• Empieza por la primeraEmpieza por la primera

línea de la página 1línea de la página 1


5. Opciones de página 5. Opciones de página WebWeb• Muy importante Muy importante

rellenar bien estos rellenar bien estos datosdatos en todas las en todas las páginas si quieres páginas si quieres posicionarte en posicionarte en GoogleGoogle

* La página de inicio se debe llamar “* La página de inicio se debe llamar “index.htmindex.htm””


5. Agrupar / 5. Agrupar / desagrupardesagrupar• Selecciona varios objetos gráficos y Selecciona varios objetos gráficos y

pulsa “botón derecho” / “pulsa “botón derecho” / “AgruparAgrupar” / ” / ““AgruparAgrupar””

Para practicar el ejemplo, Para practicar el ejemplo, crea un página “en crea un página “en

blanco”blanco”


5. Ordenar5. OrdenarSelecciona uno o varios objetos gráficos y pulsa Selecciona uno o varios objetos gráficos y pulsa

“botón derecho” / ““botón derecho” / “OrdenarOrdenar” + ” + TraerTraer o o enviarenviar (4 opciones) (4 opciones)

11

22 33

11

22

33


5. 5. AlinearAlinear

Selecciona uno o varios objetos gráficos y pulsa Selecciona uno o varios objetos gráficos y pulsa “botón derecho” / ““botón derecho” / “Alinear o distribuirAlinear o distribuir” (6 ” (6 opciones)opciones)

11

22

44

33

5566

11 22

44

33

55 66


5. Distribuir5. DistribuirSelecciona varios objetos gráficos y pulsa “botón Selecciona varios objetos gráficos y pulsa “botón

derecho” / derecho” / Alinear o distribuirAlinear o distribuir + + DistribuirDistribuir (2 (2 opciones)opciones)

11

22

11

22


5. Posicionamiento en Google 5. Posicionamiento en Google (SEO)(SEO)• Poner Poner nombresnombres adecuados a las páginas adecuados a las páginas

• Rellenar los Rellenar los datos extradatos extra de cada página de cada página

• Conseguir Conseguir enlaces de otras Websenlaces de otras Webs a la mía a la mía (intercambio de enlaces)(intercambio de enlaces)

• Poner contenido extra a las Poner contenido extra a las imágenesimágenes

• CuidarCuidar mucho todo el contenido mucho todo el contenido

• Tener la Web Tener la Web actualizadaactualizada y sin y sin enlaces rotosenlaces rotos

• Centrar el contenido en un Centrar el contenido en un par de frasespar de frases para para que Google nos encuentre por ese criterio que Google nos encuentre por ese criterio (repetirlas)(repetirlas)

• Lo últimoLo último: el alta en : el alta en www.google.com/addurl www.google.com/addurl

• Alta en Alta en redes socialesredes sociales: facebook, linkedin…: facebook, linkedin…


5. Poner contenido extra a las 5. Poner contenido extra a las imágenesimágenes

• Ve una por una todas las Ve una por una todas las imágenes de la Web y crea imágenes de la Web y crea ““texto alternativotexto alternativo” para cada ” para cada unauna

• Para hacerlo pulsa con el Para hacerlo pulsa con el botón derecho del ratón botón derecho del ratón sobre cada imagen y sobre cada imagen y selecciona la opción selecciona la opción ““formato de imagenformato de imagen””

• Abre la pestaña “Web”Abre la pestaña “Web”

• RellenaRellena el cuadro vacío el cuadro vacíoPara: Discapacitados, Google y Para: Discapacitados, Google y

conexiones lentasconexiones lentas


5. Panel de tareas5. Panel de tareas• Busca errores de diseñoBusca errores de diseño• Reemplaza textoReemplaza texto• Busca imágenes de Busca imágenes de MicrosoftMicrosoft• Datos básicos de la Datos básicos de la empresaempresa• Tamaño y plantillaTamaño y plantilla• ColoresColores• FuentesFuentes• FondoFondo

Prueba a modificar las opciones “Formato Prueba a modificar las opciones “Formato de publicación”, “Colores” y “Fondo”de publicación”, “Colores” y “Fondo”


1.1. Diseñar una Web en tu ordenador:Diseñar una Web en tu ordenador:

gratis gratis 60 €60 € miles €miles €2.2.Registrar un nombre de dominio:Registrar un nombre de dominio:

gratis gratis 9 €9 € 20 € / año20 € / año3.3. Alojar la Web en un servidor:Alojar la Web en un servidor:

gratis gratis 36 €36 € cientos € / añocientos € / año

6. El coste real de tener una 6. El coste real de tener una WebWeb

Los precios que ves son aproximados y muy Los precios que ves son aproximados y muy variablesvariables


6. Necesito un cliente 6. Necesito un cliente FTPFTP

Una vez diseñada nuestra Web, deberemos Una vez diseñada nuestra Web, deberemos copiar los copiar los archivos archivos de nuestro PC a Internet, esta tarea la de nuestro PC a Internet, esta tarea la debemos realizar con un programa especial del tipo debemos realizar con un programa especial del tipo CLIENTE FTPCLIENTE FTP..

Hay varios programas gratuitos que podemos utilizar Hay varios programas gratuitos que podemos utilizar para esta labor, como:para esta labor, como:

FileZillaFileZilla o o CuteFTP CuteFTPPero si no queremos buscarlo en Internet ni instalarlo, Pero si no queremos buscarlo en Internet ni instalarlo,

hay una manera más sencilla que consiste en hay una manera más sencilla que consiste en utilizar el utilizar el ““Explorador de WindowsExplorador de Windows”:”:


6. 6. Un cliente FTPUn cliente FTP: : Explorador de Explorador de WindowsWindows

1.1. Abre el programa “Equipo” (Abre el programa “Equipo” (+E+E))

2.2. Menú “Herramientas” / “Conectar a unidad de red…”Menú “Herramientas” / “Conectar a unidad de red…”

3.3. ““Conectarse a un sitio para usarlo…” + “Siguiente”Conectarse a un sitio para usarlo…” + “Siguiente”

4.4. ““Elegir una ubicación de red personalizada” + Elegir una ubicación de red personalizada” + “Siguiente”“Siguiente”

5.5. Dirección de red: Dirección de red: ftp://ftp.luanconsultores.com/httpdocsftp://ftp.luanconsultores.com/httpdocs

6.6. Desactivar “Iniciar sesión de forma anónima”Desactivar “Iniciar sesión de forma anónima”

7.7. Nombre de usuario: “Nombre de usuario: “usuario2usuario2” + “Siguiente” + ” + “Siguiente” + “Siguiente”“Siguiente”

8.8. Nombre para esta ubicación: “Mi página Web” + Nombre para esta ubicación: “Mi página Web” + “Finalizar”“Finalizar”

9.9. Cuando se abra la ventana, poner contraseña Cuando se abra la ventana, poner contraseña ““123456123456””

Comprueba que puedes “Conectarte a la unidad de red”. Comprueba que puedes “Conectarte a la unidad de red”. Utilizando los tres parámetros que nos habrá dado nuestro Utilizando los tres parámetros que nos habrá dado nuestro

proveedorproveedor


6. Vamos a 6. Vamos a SUBIRSUBIR nuestra Web a nuestra Web a InternetInternet

1.1. Abre PublisherAbre Publisher y abre tu proyecto de Web y abre tu proyecto de Web

2.2. ““Archivo” -> “Archivo” -> “Publicar en WebPublicar en Web”, no olvides que el ”, no olvides que el archivo se debe llamar “index.htm” + “Guardar” + archivo se debe llamar “index.htm” + “Guardar” + ……

3.3. Cierra PublisherCierra Publisher (no es necesario) (no es necesario)

4.4. Abre la carpeta Abre la carpeta donde guardaste el archivo donde guardaste el archivo “index.htm”“index.htm”

5.5. SeleccionaSelecciona “index.htm” y la carpeta “index_archivos” “index.htm” y la carpeta “index_archivos”

6.6. Copia ambos elementos con “Ctrl+C” ó botón dcho. Copia ambos elementos con “Ctrl+C” ó botón dcho. ““CopiarCopiar””

7.7. Abre el programa “Equipo” (Abre el programa “Equipo” (+E) +E) y y abre la unidad abre la unidad FTPFTP

8.8. Copia los archivos con “Ctrl+V” ó botón dcho. Copia los archivos con “Ctrl+V” ó botón dcho. ““PegarPegar” + …” + …

9.9. Ya puedes Ya puedes comprobar en el navegador comprobar en el navegador tu Página tu Página WebWeb

Sigue las instrucciones del profe y sube tu Web a Sigue las instrucciones del profe y sube tu Web a Internet para que tus compañeros puedan Internet para que tus compañeros puedan

visualizarlavisualizarla


7. Ejercicio final. Crea tu 7. Ejercicio final. Crea tu WebWebPiensa un poco y realiza este Piensa un poco y realiza este ejercicio finalejercicio final

para demostrar que has entendido para demostrar que has entendido cómo se diseña una página Web.cómo se diseña una página Web.

Sigue estos pasos:Sigue estos pasos:

1.1. Decide el Decide el nombre la Web nombre la Web que vas a que vas a diseñardiseñar

2.2. Dibuja el Dibuja el esquemaesquema de páginas de páginas

3.3. Crea un Crea un directoriodirectorio de trabajo en el PC de trabajo en el PC

4.4. Abre Abre PublisherPublisher y comienza el ejercicio y comienza el ejercicio …… Ayúdate de los 10 pasos explicados en el tema Ayúdate de los 10 pasos explicados en el tema

3º3º

Tómate todo el tiempo que necesitesTómate todo el tiempo que necesites


7. Ejercicio final. Diseña tu 7. Ejercicio final. Diseña tu WebWeb… … pero si no te apetece pensar en la Web pero si no te apetece pensar en la Web

que tienes que diseñar, diseña la que tienes que diseñar, diseña la siguiente web:siguiente web:

Floristería PepiFloristería Pepi

ServiciosServicios

TiendaTienda

Entrega a domicilioEntrega a domicilio

Ramos de bodasRamos de bodas

ProductosProductos

RamosRamos

Maceteros artesanalesMaceteros artesanales

ContactoContacto


7. Recursos para 7. Recursos para webmasterswebmasters

• El icono principal de la Web se llamará El icono principal de la Web se llamará ““favicon.icofavicon.ico” y lo debes guardar en el directorio ” y lo debes guardar en el directorio raízraíz• Puedes crear el icono en: www.online-Puedes crear el icono en: www.online-convert.com convert.com • Crear Crear GIFGIFs animados: www.gifninja.com s animados: www.gifninja.com • Reconocedor fuentes: www.myfonts.comReconocedor fuentes: www.myfonts.com• ContadorContador de visitas: de visitas: www.contadorvisitasgratis.com www.contadorvisitasgratis.com • Usuarios conectados: www.usuarios-Usuarios conectados: www.usuarios-online.com/es online.com/es • Generar códigos QR: www.codigos-qr.com Generar códigos QR: www.codigos-qr.com • Retoque de fotos de caras: Retoque de fotos de caras: http://makeup.pho.to/es http://makeup.pho.to/es


7. Recursos para 7. Recursos para webmasterswebmasters

• Imágenes libres: Imágenes libres: GoogleGoogle / / ImágenesImágenes / / OpcionesOpciones / / Búsqueda avanzaBúsqueda avanza / / Derechos de usoDerechos de uso / / 5 opciones5 opciones• Dar de alta las páginas: www.google.com/addurl Dar de alta las páginas: www.google.com/addurl • Recortador de URLs: http://goo.gl/ Recortador de URLs: http://goo.gl/ • Recursos Google para Recursos Google para webmasterswebmasters::

• Google AnalyticsGoogle Analytics:: Estadísticas de las visitas a tu Estadísticas de las visitas a tu webweb• Google AdWowds:Google AdWowds: Poner anuncios de Google Poner anuncios de Google ((gastargastar €) €)• Google AdSense:Google AdSense: Poner anuncios en mi Web Poner anuncios en mi Web ((ganarganar €) €)

Para algunos recursos de Google necesitarás correo de Para algunos recursos de Google necesitarás correo de GmailGmail


¡Muchas gracias a ¡Muchas gracias a todos!todos!

Tel.: 619 069 125Tel.: 619 069 125

diseño de páginas web con publisher 2007

Technology

pulsa botnselecciona uno

poner contenido extra

bits maps protocole

puede proporcionar navegacin

ves son aproximados

sigue estos pasos

portable network graphics

elemento del men4