• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Diseño de páginas Web con Publisher 2007
 

Diseño de páginas Web con Publisher 2007

on

  • 18,230 views

Diseño de páginas web con Publisher 2007, Humántica, Francisco Sánchez Guisado

Diseño de páginas web con Publisher 2007, Humántica, Francisco Sánchez Guisado

Statistics

Views

Total Views
18,230
Views on SlideShare
17,632
Embed Views
598

Actions

Likes
14
Downloads
10
Comments
2

3 Embeds 598

http://www.humantica.com 545
http://humantica.com 51
http://www.humantica.es 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Diseño de páginas Web con Publisher 2007 Diseño de páginas Web con Publisher 2007 Presentation Transcript

    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado francisco@humantica.comfrancisco@humantica.com www.humantica.comwww.humantica.com Diseño de páginas WebDiseño de páginas Web con Microsoft Publisher 2007con Microsoft Publisher 2007 Junio de 2014Junio de 2014
    • 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 PublisherDiseño de páginas Web con Publisher 1.1. Qué es una WebQué es una Web 2.2. Pensar la WebPensar la Web 3.3. Construir la WebConstruir la Web 4.4. Insertar contenidosInsertar contenidos 5.5. Opciones avanzadasOpciones avanzadas 6.6. Gastar dinero en mi WebGastar dinero en mi Web 7.7. Ejercicio finalEjercicio final Para saber más:Para saber más: http://office.microsoft.com/es-es/publisherhttp://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 HTML” en HTML
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 33 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER RecomendacionesRecomendaciones 1.1. Conocimiento básico deConocimiento básico de WindowsWindows 2.2. Conocimiento medio de MicrosoftConocimiento medio de Microsoft WordWord 3.3. Conocimiento básico de InternetConocimiento 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.htmhttp://humantica.com/servicios_informaticos/curso_publisher.htm
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 44 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER ¿Qué es Microsoft¿Qué es Microsoft Publisher?Publisher?• Es un programa más de la familiaEs un programa más de la familia Microsoft OfficeMicrosoft Office • Su función principal esSu función principal es diseñar publicacionesdiseñar publicaciones • Se basa principalmente enSe 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 pruebaPuedes descargar una versión de prueba aquíaquí
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 55 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 1. ¿Qué es una página Web?1. ¿Qué es una página Web? • UnaUna página webpágina web es un documento o informaciónes un documento o información electrónica adaptada para laelectrónica adaptada para la World Wide WebWorld Wide Web y quey que puede ser accedida mediante un navegador parapuede ser accedida mediante un navegador para mostrarse en el monitor de un ordenador omostrarse en el monitor de un ordenador o dispositivo móvil (PDA, móvil, portátil).dispositivo móvil (PDA, móvil, portátil). • Esta información se encuentra generalmente enEsta información se encuentra generalmente en formatoformato HTMLHTML, y puede proporcionar navegación a, y puede proporcionar navegación a otras páginas Web medianteotras páginas Web mediante hiperenlaceshiperenlaces.. • Las páginas Web frecuentemente incluyen otrosLas páginas Web frecuentemente incluyen otros recursosrecursos multimediamultimedia como imágenes en movimiento,como imágenes en movimiento, fotos, vídeos, sonido…fotos, vídeos, sonido… Diferencia entreDiferencia entre dominios genéricosdominios genéricos ((com, .net, .org, biz, .info, .eucom, .net, .org, biz, .info, .eu) y) y dominios territorialesdominios territoriales
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 66 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 1. Programas necesarios1. Programas necesarios • 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 deExplorador 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 • UnUn NavegadorNavegador:: Uno de los programas subrayadosUno de los programas subrayados es de pago ¿es de pago ¿cuál escuál es??
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 77 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 1. Tres requisitos para tener una1. Tres requisitos para tener una WebWeb 1.1.DiseñarDiseñar una Webuna Web en tu ordenadoren tu ordenador 1.1.RegistrarRegistrar un nombre de dominioun nombre de dominio www.fruteriaperez.comwww.fruteriaperez.com 1.1.Alojar la Web en un servidor WebAlojar la Web en un servidor Web www.arsys.eswww.arsys.es www.abansys.comwww.abansys.com www.humantica.comwww.humantica.com
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 88 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 1.1. Visita algunas WebsVisita algunas Webs realesreales • www.rocafull.eswww.rocafull.es • www.ginesito.eswww.ginesito.es • www.ginescorbalan.comwww.ginescorbalan.com • www.www.luanconsultores.comluanconsultores.com • www.librerialeyendas.eswww.librerialeyendas.es Observa la sencillez de la primera WebObserva la sencillez de la primera Web
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 99 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 1. Asistente para hacer una Web1. Asistente para hacer una Web 1.1. Abre el programaAbre el programa Microsoft PublisherMicrosoft Publisher 20072007 2.2. Pulsa en la categoríaPulsa en la categoría Sitios WebSitios Web 3.3. En el área de categorías de plantillas, enEn el área de categorías de plantillas, en la sección Diseños clásicos y hazla sección Diseños clásicos y haz clic enclic en VeranoVerano:: 4.4. Pulsa clic en Crear. Aparece el cuadro de diálogoPulsa 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 lasactiva las casillascasillas de verificación que consideres necesariasde verificación que consideres necesarias Observa cómo tu profe diseña unaObserva cómo tu profe diseña una página Web con Microsoft Publisherpágina Web con Microsoft Publisher
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 1010 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 1. Asistente para hacer una Web1. Asistente para hacer una Web 6.6. Luego clic en Aceptar. Ahora esperemos que se creen lasLuego 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 creasMarca solo las páginas que creas que vas a necesitar en tu Webque vas a necesitar en tu Web
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 1111 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 7.7. Como puedes ver, la plantilla de página web muestra unaComo puedes ver, la plantilla de página web muestra una serie de páginas predefinidas listas para serserie de páginas predefinidas listas para ser personalizadas. Cambia el texto “Página Web” porpersonalizadas. Cambia el texto “Página Web” por ““Bienvenidos a Frutería PérezBienvenidos a Frutería Pérez ”…”… 1. Asistente para hacer una Web1. Asistente para hacer una Web Bienvenidos a FruteríaBienvenidos a Frutería PérezPérez
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 1212 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 7.7. …… Ahora pulsa laAhora pulsa la opción “opción “ArchivoArchivo” ->” -> ““Vista previa páginaVista previa página WebWeb” para visualizar” para visualizar en tu navegador unaen tu navegador una vista previa de tuvista previa de tu web recién creadaweb recién creada en tu propioen tu propio ordenador:ordenador: 1. Asistente para hacer una Web1. Asistente para hacer una Web Bienvenidos a FruteríaBienvenidos a Frutería PérezPérez Ahora vuelve al paso primero (diapositiva 9ª)Ahora vuelve al paso primero (diapositiva 9ª) para crear tu primera Web sin ayuda del profepara crear tu primera Web sin ayuda del profe
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 1313 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER • Para “Para “subirsubir” la Web a Internet” la Web a Internet, deberías tener previamente, deberías tener previamente contratados dos productos:contratados dos productos: – unun nombre de dominionombre de dominio, por ejemplo: “www.fruteriaperez.com”, por ejemplo: “www.fruteriaperez.com” – unun alojamiento Webalojamiento Web como mínimo de 50 MBcomo mínimo de 50 MB • Como no los tienes contratados, este último paso deja queComo no los tienes contratados, este último paso deja que lo haga tu profesor por ti para que veas que no es tanlo 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 losCrear los directoriosdirectorios de trabajo (o hazlo en el paso 2)de trabajo (o hazlo en el paso 2) 2.2. Guardar elGuardar el proyectoproyecto (archivo *.pub): “Archivo” -> “Guardar cómo…”(archivo *.pub): “Archivo” -> “Guardar cómo…” 3.3. Generar losGenerar los archivos Webarchivos Web: “Archivo” -> “Publicar en Web…”: “Archivo” -> “Publicar en Web…” 4.4. SubirSubir los archivos Web a Internet con un cliente FTPlos archivos Web a Internet con un cliente FTP 5.5. ComprobarComprobar que funciona:que funciona: www.luanconsultores.comwww.luanconsultores.com 1. Asistente para hacer una Web1. Asistente para hacer una Web Observa cómo tu profe sube laObserva cómo tu profe sube la página Web a Internetpágina Web a Internet
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 1414 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER CogeCoge papel y lápizpapel y lápiz piensa en los siguientespiensa en los siguientes componentescomponentes de tu Web:de tu Web: • Nombre de laNombre de la web:web: “Frutería Pérez”“Frutería Pérez” • Nombre delNombre del dominio:dominio: “fruteriaperez.com”“fruteriaperez.com” • Páginas oPáginas o botonesbotones principales de miprincipales de mi web y sus dependencias (esquema)web y sus dependencias (esquema) • EscribirEscribir contenidoscontenidos de cada ventanade cada ventana • BuscarBuscar imágenesimágenes y otros recursosy otros recursos multimedia que necesitaré para incluirmultimedia que necesitaré para incluir en la Weben la Web (y guardarlos en una carpeta)(y guardarlos en una carpeta) • ConsejoConsejo: Utiliza: Utiliza WordWord y su herramientay su herramienta SmartArtSmartArt yy guarda todo en el directorio “mi_web.com/recursos”guarda todo en el directorio “mi_web.com/recursos” 2. Pensar en la Web2. Pensar en la Web “FrureriaPerez.com”“FrureriaPerez.com” Las decisiones que tomes escríbelas enLas decisiones que tomes escríbelas en un papel, la pizarra o en Wordun papel, la pizarra o en Word
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 1515 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER En el menúEn el menú Edición / Información empresarial / ModificarEdición / Información empresarial / Modificar:: 2. Información empresarial2. Información empresarial • Nombre personaNombre persona • Puesto o cargoPuesto o cargo • Nombre empresaNombre empresa • DirecciónDirección • Teléfono / FaxTeléfono / Fax • Correo electrónicoCorreo electrónico • EsloganEslogan • LogotipoLogotipo (PowerPoint)(PowerPoint) Está diapositiva la verás a fondo en el capítulo 5Está diapositiva la verás a fondo en el capítulo 5
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 1616 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER CrearCrear una carpetauna carpeta exclusiva para la Web:exclusiva para la Web: • fruteriaperez.comfruteriaperez.com: Aquí se guardarán los archivos de la Web: Aquí se guardarán los archivos de la Web una vez publicada esta, siempre tendrá un archivo principaluna vez publicada esta, siempre tendrá un archivo principal llamado “llamado “index.htmindex.htm” y una carpeta llamada “” y una carpeta llamada “index_archivosindex_archivos”” • recursosrecursos: En esta subcarpeta guardaré todos los archivos: En esta subcarpeta guardaré todos los archivos multimedia que necesite para añadir a mi Web: imágenes,multimedia que necesite para añadir a mi Web: imágenes, fotos, música MP3, incluso vídeosfotos, música MP3, incluso vídeos 2. Crea las carpetas del proyecto2. Crea las carpetas del proyecto Crea esas dos carpetas en tu ordenador oCrea esas dos carpetas en tu ordenador o pendrivependrive
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 1717 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 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 fuentes: En Formato / Combinación de fuentes • MenúsMenús:: ¿Horizontal o vertical? Lo encontrarás en¿Horizontal o vertical? Lo encontrarás en Formato / Formato de publicación / “CambiarFormato / Formato de publicación / “Cambiar plantilla” / Barras de exploraciónplantilla” / Barras de exploración 2. Pensar en la Web2. Pensar en la Web Continúa pensando, decidiendoContinúa pensando, decidiendo y escribiendo sobre tu Weby escribiendo sobre tu Web En:En: Formato / Formato de publicación / Opciones deFormato / Formato de publicación / Opciones de Sitio / Cambiar plantilla / OpcionesSitio / Cambiar plantilla / Opciones
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 1818 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER • LogotipoLogotipo de la Webde la Web (diapo. 21)(diapo. 21) • EncabezadoEncabezado de la webde la web (diapo. 22)(diapo. 22) y elementos comunesy elementos comunes • Lo más importante: LosLo más importante: Los contenidoscontenidos (escríbelos antes)(escríbelos antes) • Colección deColección de imágenes:imágenes: BMP, JPG, PNG y GIFBMP, JPG, PNG y GIF (diap.(diap. 20)20) – 2 estrategias: los alojas tú o te aprovechas de2 estrategias: los alojas tú o te aprovechas de Flickr.comFlickr.com • Colección deColección de músicamúsica MP3 -> WAV ó MIDMP3 -> WAV ó MID • Colección deColección de vídeosvídeos: MP4: MP4 – 2 estrategias: los alojas tú o te aprovechas de2 estrategias: los alojas tú o te aprovechas de YouTubeYouTube • Vínculos: PáginasVínculos: Páginas recomendadasrecomendadas 2. Pensar en la Web2. Pensar en la Web Piensa en la lista de páginas recomendadasPiensa en la lista de páginas recomendadas
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 1919 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER • Lo más importante es lo primero que se ve, en tuLo más importante es lo primero que se ve, en tu caso lacaso la página de INICIOpágina de INICIO (index.html o(index.html o index.htmindex.htm)):: – Debe seDebe se sencillasencilla y con “aire”y con “aire” – DebeDebe verse de un vistazoverse de un vistazo – Poco texto y sencilloPoco 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 muchosNo mezcles muchos tipos de letrastipos de letras • Elabora lista deElabora lista de serviciosservicios • Elabora lista deElabora lista de productosproductos 2. Pensar en la Web2. Pensar en la Web ComparaCompara www.google.eswww.google.es concon www.terra.eswww.terra.es
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 2020 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 2. Formatos2. Formatos 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 blog.para usar en tu Web o 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 imagenEs el formato de imagen más difundidomás difundido.. Pierde nitidezPierde nitidez según el grado desegún el grado de compresión. Hay que usarlo con cuidado. Es el formato que máscompresión. Hay que usarlo con cuidado. Es el formato que más comprimecomprime elel archivo de imagen. (Recomendado para fotos).archivo de imagen. (Recomendado para fotos). • PNGPNG (Portable Network Graphics)(Portable Network Graphics) No pierde nitidez, queda clarito como un BMP pero sin ocupar demasiadosNo pierde nitidez, queda clarito como un BMP pero sin ocupar demasiados KB. Otra cualidad del PNG es laKB. Otra cualidad del PNG es la transparenciatransparencia, para que se acople con el, para que se acople con el fondo de nuestra web. (Recomendado para fotos y dibujos). Es un formatofondo de nuestra web. (Recomendado para fotos y dibujos). Es un formato libre.libre. • GIFGIF (Compuserve GIF)(Compuserve GIF) Es un formato muy ligero, y lo mejor es que laEs un formato muy ligero, y lo mejor es que la transparenciatransparencia usada en esteusada en este tipo de archivo lo leen todos los navegadores. Otro punto a favor es que setipo de archivo lo leen todos los navegadores. Otro punto a favor es que se pueden hacer unapueden 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 comoGuardar como”” BMP JP G PNG GIF Transparenci a No No Sí Sí Movimiento No No No Sí Compresión No Sí Sí Sí
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 2121 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 2. Logotipo2. Logotipo Crea un logotipo para tu Web y guárdalo en la carpeta “recursos”.Crea un logotipo para tu Web y guárdalo en la carpeta “recursos”. Puedes retocarlo con “Puedes retocarlo con “PaintPaint” o con “” o con “PowerPointPowerPoint”. Utiliza la”. Utiliza la herramienta “herramienta “Definir color transparenteDefinir color transparente”.”. 1.1. AbreAbre GoogleGoogle / Imágenes/ Imágenes 2.2. Busca imagen relacionadaBusca imagen relacionada con tu Web (“con tu Web (“frutafruta”)”) 3.3. Aprende a manejar laAprende a manejar la búsqueda avanzadabúsqueda avanzada:: • Temas, Tamaños,Temas, Tamaños, • Color, Tipo, fechasColor, Tipo, fechas 4.4. Encuentra imagenEncuentra imagen adecuada (adecuada (fondo blancofondo blanco)) 5.5. Guárdala en “Guárdala en “recursosrecursos”” 6.6. ¿Qué¿Qué tipo de imagentipo de imagen es?es?
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 2222 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 2. Banner (WordArt)2. Banner (WordArt) Crea un banner adecuado a tu Web yCrea un banner adecuado a tu Web y guárdalos en la carpeta “recursos”guárdalos en la carpeta “recursos” 1.1. Abre PublisherAbre Publisher 2.2. Insertar / Imagen /Insertar / Imagen / WordArtWordArt 3.3. Escribe el textoEscribe el texto 4.4. Edita el gráficoEdita el gráfico 5.5. Tamaño adecuadoTamaño adecuado 600x120 u otros600x120 u otros
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 2323 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 2. Sonido de fondo2. Sonido de fondo Guarda tu música deGuarda tu música de fondo en la carpetafondo en la carpeta “recursos“recursos 1.1. Botón dcho. sobre la página 1Botón dcho. sobre la página 1 2.2. Abre “Opciones de página Web…”Abre “Opciones de página Web…” 3.3. Selecciona de la carpetaSelecciona de la carpeta “Recursos” la música adecuada“Recursos” la música adecuada 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 FilesMicrosoft OfficeCLIPARTPUB60CORC:Program FilesMicrosoft OfficeCLIPARTPUB60COR Pide al profe que te enseñe aPide al profe que te enseñe a extraer música WAV de un CDextraer música WAV de un CD
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 2424 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 2. Descarga de vídeos2. Descarga de vídeos Ver vídeos conVer vídeos con YouTubeYouTube:: 1.1. Abrir el navegador (InternetAbrir el navegador (Internet ExplorerExplorer)) 2.2. Ir a la páginaIr a la página www.youtube.comwww.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 interesaque nos interesa Busca y descarga unBusca y descarga un vídeo para tu Webvídeo para tu Web Descargar vídeos deDescargar vídeos de YouTubeYouTube (una manera sencilla)(una manera sencilla):: 1.1. CopiaCopia ((Ctrl+CCtrl+C)) la URL del vídeo a descargarla URL del vídeo a descargar 2.2. AbreAbre www.descargaryoutube.comwww.descargaryoutube.com yy PegaPega ((Ctrl+VCtrl+V) la) la URLURL 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 ”recursos”y guárdalo en ”recursos” www.ssyoutube.comwww.ssyoutube.com yy VLCVLC
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 2525 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 1.1. Recopila material multimediaRecopila material multimedia y cópialo a la carpetay 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 elAbre el Publisher y utiliza el asistenteasistente con toda libertad paracon toda libertad para crear el esqueleto de la Web como más te gustecrear el esqueleto de la Web como más te guste 3.3. Crea laCrea la cabeceracabecera de la Web (de la Web (bannerbanner) y un logotipo) y un logotipo 4.4. Construye elConstruye el menú principalmenú principal y revísaloy revísalo 5.5. Llena deLlena de contenidoscontenidos (textos) la Web, empieza por la página(textos) la Web, empieza por la página principalprincipal 6.6. AñadeAñade elementos multimediaelementos multimedia (imágenes, sonido, vídeo)(imágenes, sonido, vídeo) 7.7. Guarda el trabajo en unGuarda el trabajo en un archivo PUBarchivo PUB (“fruteriaperez.pub”)(“fruteriaperez.pub”) 8.8. Archivo/Publicar en WebArchivo/Publicar en Web (genera “index.htm” e “index_archivos”)(genera “index.htm” e “index_archivos”) 9.9. Cierra el Publisher yCierra el Publisher y prueba la Webprueba la Web en tu PCen tu PC (“index.htm”)(“index.htm”) 3. Construir la Web por pasos3. Construir la Web por pasos Pongamos en marcha lo aprendido hastaPongamos en marcha lo aprendido hasta ahora. Tómate 30 minutos.ahora. Tómate 30 minutos.
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 2626 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 3. Cuidado con el objeto MENÚ3. Cuidado con el objeto MENÚ Practica modificando opciones del menúPractica modificando opciones del menú Aprende todas las opciones de laAprende todas las opciones de la barra de menúbarra de menú:: • AgregarAgregar vínculovínculo • QuitarQuitar vínculovínculo • ModificarModificar vínculovínculo • SubirSubir yy bajarbajar los vínculoslos vínculos No olvidesNo olvides MARCARMARCAR Varita mágicaVarita mágica ConsejoConsejo: Nunca edites la misma: Nunca edites la misma opción de menú que la página en laopción de menú que la página en la que estás. Y si puedes evitarque estás. Y si puedes evitar editarlo, mejor.editarlo, mejor.
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 2727 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 4. Añadir una página a la Web4. Añadir una página a la Web 1.1. Pulsa clic en laPulsa clic en la última páginaúltima página deldel clasificador de páginas y luego clicclasificador de páginas y luego clic en Insertar páginaen Insertar página 2.2. En el cuadro de diálogoEn el cuadro de diálogo Insertar página WebInsertar página Web, en la columna, en la 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 deAgregar hipervínculo a las Barras de exploraciónexploració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””
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 2828 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 4. Añadir una página a la Web4. Añadir una página a la Web 5.5. …observa cómo se crea…observa cómo se crea susu nueva páginanueva página, y en el, y en el panel que está al ladopanel que está al lado derecho de la página webderecho de la página web (Barra de exploración de(Barra de exploración de página web) se encuentrapágina web) se encuentra el vínculo ael vínculo a Oficio.Oficio. CambiaCambia el nombre del botón porel nombre del botón por ““Aviso legalAviso legal”” Una buena costumbreUna buena costumbre: Haz una copia del archivo PUB antes de: Haz una copia del archivo PUB antes de empezar a trabajar con él, te ahorrarás muchos disgustosempezar a trabajar con él, te ahorrarás muchos disgustos
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 2929 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 4. Modificar un elemento del menú4. Modificar un elemento del menú 6.6. Selecciona laSelecciona la Barra deBarra de exploraciónexploración y clic en lay clic en la ““varita mágica”varita mágica”
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 3030 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 4. Modificar un elemento del menú4. Modificar un elemento del menú 7.7. En el cuadro de diálogoEn el cuadro de diálogo Propiedades de la barra dePropiedades de la barra de exploraciónexploración, en el cuadro, en el cuadro ““NombreNombre” escribe: “Mis” escribe: “Mis vínculos”. De esta manera sevínculos”. De esta manera se está dando un nombreestá dando un nombre personalizado a la Barra depersonalizado a la Barra de exploración.exploración. 8.8. En la columna “En la columna “VínculosVínculos:”, seleccione “:”, seleccione “OficioOficio” y luego clic” y luego clic en el botón “en el botón “Modificar vinculoModificar vinculo””
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 3131 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 4. Modificar un elemento del menú4. Modificar un elemento del menú 9.9. En el cuadroEn el cuadro ““Modificar vinculo:Modificar vinculo: Mis vínculosMis vínculos”,”, cambia el cuadrocambia el cuadro Texto de “Texto de “OficioOficio” a:” a: ““Aviso legalAviso legal”” 10.10. Clic enClic en AceptarAceptar en todos los cuadros de diálogosen todos los cuadros de diálogos abiertos. Nota cómo ha cambiado el nombre de la Barraabiertos. Nota cómo ha cambiado el nombre de la Barra de exploración. Donde antes decía “de exploración. Donde antes decía “OficioOficio”, ahora dice”, ahora dice ““Aviso legalAviso legal”” 11.11. En laEn la barra Herramientas webbarra Herramientas web, pulse clic en el botón, pulse clic en el 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 páginaBusca en Google “Aviso legal frutería” y copia el texto a tu página
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 3232 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 4. Modificar un elemento del menú4. Modificar un elemento del menú 12.12. Revisa tu página Web yRevisa tu página Web y prueba cada vínculoprueba cada vínculo Puedes tener más de un menú a la vez, no lo olvides.Puedes tener más de un menú a la vez, no lo olvides. Menú Insertar / Barra de exploración / Nuevo…Menú Insertar / Barra de exploración / Nuevo…
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 3333 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Opciones avanzadas.5. Opciones avanzadas. Barras de herramientas y botonesBarras de herramientas y botones Activa y desactiva las barras de herramientasActiva y desactiva las barras de herramientas
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 3434 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 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 bibliotecaAgregar a la biblioteca • Copiar formatoCopiar formato • DeshacerDeshacer • RehacerRehacer • Traer al frenteTraer al frente** • Girar librementeGirar libremente • Insertar hipervínculoInsertar hipervínculo** • Vista previa de la páginaVista previa de la página WebWeb • Caracteres especialesCaracteres especiales • ZoomZoom • AlejarAlejar • AcercarAcercar • AyudaAyuda
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 3535 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Barra de Formato5. Barra de Formato • EstilosEstilos • EstiloEstilo • FuenteFuente • Tamaño de fuenteTamaño de fuente • NegritaNegrita • CursivaCursiva • SubrayadoSubrayado • Alinear a la izquierdaAlinear a la izquierda • 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 bordeEstilo de línea o borde • Estilo de guiónEstilo de guión • Estilo de flechaEstilo de flecha • Estilo de sombraEstilo de sombra • Estilo 3DEstilo 3D
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 3636 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Opciones avanzadas. Insertar5. Opciones avanzadas. Insertar • 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 DiseñoInsertar Objeto de la Galería de Diseño • Insertar Información empresarialInsertar Información empresarial • Insertar Imágenes prediseñadasInsertar 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 páginate lleva a la página que tengas creada en el hipervínculoque tengas creada en el hipervínculo
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 3737 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Insertar Cuadro de texto5. Insertar Cuadro de texto A ver si consigues un efectoA ver si consigues un efecto degradadodegradado como el del ejemplocomo el del ejemplo
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 3838 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Insertar Hipervínculo5. Insertar Hipervínculo (Ctrl+Alt+K)(Ctrl+Alt+K) PermitePermite crear hiperenlaces desdecrear hiperenlaces desde:: • Un texto:Un texto: Haz clicHaz clic aquí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 (URL)Otras páginas de Internet externas (URL) • Correo electrónico*Correo electrónico* Crea unCrea un hipervínculohipervínculo a una página dea una página de tu Web y otra a una Web externatu Web y otra a una Web externa Botón Inicio
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 3939 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Insertar Correo electrónico5. Insertar Correo electrónico Contacta con info@frutasperez.com Este correo solo funcionará en los ordenadores que tengan instaladoEste correo solo funcionará en los ordenadores que tengan instalado un cliente de correo como:un cliente de correo como: OutlookOutlook, Outlook Express o, Outlook Express o ThunderbirdThunderbird No es buena idea exponer el correoNo es buena idea exponer el correo en la web, usa una imagenen la web, usa una imagen
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 4040 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Insertar Objeto de la galería de diseño5. Insertar Objeto de la galería de diseño Practica con los objetos señalados, crea un anuncioPractica con los objetos señalados, crea un anuncio
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 4141 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Insertar Información empresarial5. Insertar Información empresarial Modifica el eslogan de la empresa y compruebaModifica el eslogan de la empresa y comprueba que cambia en TODAS las páginasque cambia en TODAS las páginas La “La “InformaciónInformación empresarialempresarial” se” se reconocen por elreconocen por el subrayado azulsubrayado azul
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 4242 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5.5. Insertar Imágenes prediseñadas y externasInsertar Imágenes prediseñadas y externas Practica con los 4 objetos señaladosPractica con los 4 objetos señalados ¡¡¡Comprímela!!!¡¡¡Comprímela!!!
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 4343 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Insertar Vídeo o Música5. Insertar Vídeo o Música Antes de nada, hay queAntes de nada, hay que SUBIRSUBIR a una carpetaa una carpeta “multimedia” (u otro nombre) del servidor FTP el“multimedia” (u otro nombre) del servidor FTP el vídeo o la canción:vídeo o la canción: 1.1. InsertarInsertar un objeto gráfico o un texto donde se deseeun 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 textoel objeto o el texto 3.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óndel vídeo o canción Puedes utilizar un MP3 de InternetPuedes utilizar un MP3 de Internet (si conoces su URL)(si conoces su URL)
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 4444 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Insertar Tablas5. Insertar Tablas 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 deIntenta crear la tabla de esta misma diapositivaesta misma diapositiva 55 66
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 4545 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5.5. Incrustar Mapa de GoogleIncrustar Mapa de Google 1.1. Accede aAccede a www.google.com/mapswww.google.com/maps 2.2. Localiza el mapa exacto tal y como loLocaliza el mapa exacto tal y como lo quieres mostrar en la Webquieres mostrar en la Web 3.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 HTML 5.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 se haPega el código en la ventana que se ha abierto y “Acepta”abierto y “Acepta” 7.7. Redimensiona el objeto HTML paraRedimensiona el objeto HTML para que ocupe el espacio del mapa en laque ocupe el espacio del mapa en la WebWeb 8.8. PruébaloPruébalo Inserta un Mapa de Google en laInserta un Mapa de Google en la página “Acerca de nosotros”página “Acerca de nosotros” ** Puedes utilizar esta técnica para insertar un calendario de GooglePuedes utilizar esta técnica para insertar un calendario de Google
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 4646 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5.5. Incrustar Vídeo de YouTubeIncrustar Vídeo de YouTube 1.1. Accede a www.youtube.comAccede a www.youtube.com 2.2. Localiza y abre el vídeoLocaliza 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 visualizaciónConfigura las opciones de visualización 6.6. Selecciona y Copia el código HTMLSelecciona y Copia el código HTML 7.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 se haPega el código en la ventana que se ha abierto y “Acepta”abierto y “Acepta” 9.9. Sitúa la esquina superior izquierda delSitúa la esquina superior izquierda del objeto HTML para que se situe en elobjeto HTML para que se situe en el sito exacto donde va en la Websito exacto donde va en la Web 10.10.PruébaloPruébalo Inserta un vídeo de Youtube enInserta un vídeo de Youtube en una página de tu Webuna página de tu Web
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 4747 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5.5. Incrustar Formulario de GoogleIncrustar Formulario de Google 1.1. Accede a Google DocsAccede a Google Docs 2.2. Archivo / Nuevo /Archivo / Nuevo / FormularioFormulario 3.3. Escribe el títuloEscribe el título 4.4. Escribe las instruccionesEscribe las instrucciones 5.5. Elige tipo TextoElige tipo Texto 6.6. Botón “EnviarBotón “Enviar formulario”formulario” 7.7. IncrustarIncrustar 8.8. Luego insertas el códigoLuego insertas el código HTML en una páginaHTML en una página Web de tu proyectoWeb de tu proyecto Necesitarás una cuenta deNecesitarás una cuenta de GmailGmail
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 4848 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5.5. Crear imágenes con zonasCrear imágenes con zonas activasactivas 1.1. Selecciona una imagenSelecciona una imagen 2.2. Selecciona “Zona activa”Selecciona “Zona activa” 3.3. Pincha y arrastra para crearPincha y arrastra para crear la forma rectangularla forma rectangular 4.4.Inserta el hipervínculoInserta el hipervínculo 5.5.Repite el proceso más vecesRepite el proceso más veces Inserta una imagen con varias zonas activasInserta una imagen con varias zonas activas
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 4949 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Revisión ortográfica: F75. Revisión ortográfica: F7 • Aunque parezca poco importante, tener unaAunque parezca poco importante, tener una Web bien redactada y sinWeb bien redactada y sin faltas de ortografíafaltas de ortografía influye mucho en el posicionamiento Webinfluye mucho en el posicionamiento Web • Si tienes faltas de ortografía estarásSi 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
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 5050 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Opciones de página Web5. Opciones de página Web • Muy importanteMuy importante rellenar bien estosrellenar bien estos datosdatos en todas lasen todas las páginas si quierespáginas si quieres posicionarte en Googleposicionarte en Google * La página de inicio se debe llamar “* La página de inicio se debe llamar “index.htmindex.htm””
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 5151 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Agrupar / desagrupar5. Agrupar / desagrupar • Selecciona varios objetos gráficos y pulsaSelecciona varios objetos gráficos y pulsa “botón derecho” / ““botón derecho” / “AgruparAgrupar” / “” / “AgruparAgrupar”” Para practicar el ejemplo, creaPara practicar el ejemplo, crea un página “en blanco”un página “en blanco”
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 5252 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Ordenar5. Ordenar Selecciona uno o varios objetos gráficos y pulsa “botónSelecciona uno o varios objetos gráficos y pulsa “botón derecho” / “derecho” / “OrdenarOrdenar” +” + TraerTraer oo enviarenviar (4 opciones)(4 opciones) 11 22 33 11 22 33
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 5353 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Alinear5. Alinear Selecciona uno o varios objetos gráficos y pulsa “botónSelecciona uno o varios objetos gráficos y pulsa “botón derecho” / “derecho” / “Alinear o distribuirAlinear o distribuir” (6 opciones)” (6 opciones) 11 22 44 33 55 66 11 22 44 33 55 66
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 5454 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Distribuir5. Distribuir Selecciona varios objetos gráficos y pulsa “botón derecho”Selecciona varios objetos gráficos y pulsa “botón derecho” // Alinear o distribuirAlinear o distribuir ++ DistribuirDistribuir (2 opciones)(2 opciones) 11 22 11 22
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 5555 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Posicionamiento en Google5. Posicionamiento en Google (SEO)(SEO)• PonerPoner nombresnombres adecuados a las páginasadecuados a las páginas • Rellenar losRellenar los datos extradatos extra de cada páginade cada página • ConseguirConseguir enlaces de otras Websenlaces de otras Webs a la míaa la mía (intercambio de enlaces)(intercambio de enlaces) • Poner contenido extra a lasPoner contenido extra a las imágenesimágenes • CuidarCuidar mucho todo el contenidomucho todo el contenido • Tener la WebTener la Web actualizadaactualizada y siny sin enlaces rotosenlaces rotos • Centrar el contenido en unCentrar el contenido en un par de frasespar de frases para quepara que Google nos encuentre por ese criterio (repetirlas)Google nos encuentre por ese criterio (repetirlas) • Lo últimoLo último: el alta en: el alta en www.google.com/addurlwww.google.com/addurl • Alta enAlta en redes socialesredes sociales: facebook, linkedin…: facebook, linkedin…
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 5656 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Poner contenido extra a las imágenes5. Poner contenido extra a las imágenes • Ve una por una todas lasVe una por una todas las imágenes de la Web y creaimágenes de la Web y crea ““texto alternativotexto alternativo” para cada una” para cada una • Para hacerlo pulsa con el botónPara hacerlo pulsa con el botón derecho del ratón sobre cadaderecho del ratón sobre cada imagen y selecciona la opciónimagen y selecciona la opción ““formato de imagenformato de imagen”” • Abre la pestaña “Web”Abre la pestaña “Web” • RellenaRellena el cuadro vacíoel cuadro vacío Para: Discapacitados, Google yPara: Discapacitados, Google y conexiones lentasconexiones lentas
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 5757 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 5. Panel de tareas5. Panel de tareas • Busca errores de diseñoBusca errores de diseño • Reemplaza textoReemplaza texto • Busca imágenes de MicrosoftBusca imágenes de Microsoft • Datos básicos de la empresaDatos básicos de la empresa • Tamaño y plantillaTamaño y plantilla • ColoresColores • FuentesFuentes • FondoFondo Prueba a modificar las opciones “Formato dePrueba a modificar las opciones “Formato de publicación”, “Colores” y “Fondo”publicación”, “Colores” y “Fondo”
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 5858 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 1.1. Diseñar una Web en tu ordenador:Diseñar una Web en tu ordenador: gratisgratis  60 €60 €  miles €miles € 2.2.Registrar un nombre de dominio:Registrar un nombre de dominio: gratisgratis  9 €9 €  20 € / año20 € / año 3.3. Alojar la Web en un servidor:Alojar la Web en un servidor: gratisgratis  36 €36 €  cientos € / añocientos € / año 6. El coste real de tener una Web6. El coste real de tener una Web Los precios que ves son aproximados y muy variablesLos precios que ves son aproximados y muy variables
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 5959 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 6. Necesito un cliente FTP6. Necesito un cliente FTP Una vez diseñada nuestra Web, deberemosUna vez diseñada nuestra Web, deberemos copiar los archivoscopiar los archivos de nuestro PC a Internet, esta tarea la debemos realizarde nuestro PC a Internet, esta tarea la debemos realizar con un programa especial del tipocon un programa especial del tipo CLIENTE FTPCLIENTE FTP.. Hay varios programas gratuitos que podemos utilizar para estaHay varios programas gratuitos que podemos utilizar para esta labor, como:labor, como: FileZillaFileZilla oo CuteFTPCuteFTP Pero si no queremos buscarlo en Internet ni instalarlo, hay unaPero si no queremos buscarlo en Internet ni instalarlo, hay una manera más sencilla que consiste en utilizar elmanera más sencilla que consiste en utilizar el ““Explorador de WindowsExplorador de Windows ”:”:
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 6060 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 6.6. Un cliente FTPUn cliente FTP:: Explorador de WindowsExplorador de Windows 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” + “Siguiente”Elegir una ubicación de red personalizada” + “Siguiente” 5.5. Dirección de red: ftp://ftp.luanconsultores.com/httpdocsDirección de red: ftp://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” + “Finalizar”Nombre para esta ubicación: “Mi página Web” + “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”. UtilizandoComprueba que puedes “Conectarte a la unidad de red”. Utilizando los tres parámetros que nos habrá dado nuestro proveedorlos tres parámetros que nos habrá dado nuestro proveedor
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 6161 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 6. Vamos a6. Vamos a SUBIRSUBIR nuestra Web a Internetnuestra Web a Internet 1.1. Abre PublisherAbre Publisher y abre tu proyecto de Weby abre tu proyecto de Web 2.2. ““Archivo” -> “Archivo” -> “Publicar en WebPublicar en Web”, no olvides que el archivo se”, no olvides que el archivo se debe llamar “index.htm” + “Guardar” + …debe llamar “index.htm” + “Guardar” + … 3.3. Cierra PublisherCierra Publisher (no es necesario)(no es necesario) 4.4. Abre la carpetaAbre la carpeta donde guardaste el archivo “index.htm”donde guardaste el archivo “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) yy abre la unidad FTPabre la unidad FTP 8.8. Copia los archivos con “Ctrl+V” ó botón dcho. “Copia los archivos con “Ctrl+V” ó botón dcho. “PegarPegar” + …” + … 9.9. Ya puedesYa puedes comprobar en el navegadorcomprobar en el navegador tu Página Webtu Página Web Sigue las instrucciones del profe y sube tu Web a InternetSigue las instrucciones del profe y sube tu Web a Internet para que tus compañeros puedan visualizarlapara que tus compañeros puedan visualizarla
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 6262 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 7. Ejercicio final. Crea tu Web7. Ejercicio final. Crea tu Web Piensa un poco y realiza estePiensa un poco y realiza este ejercicio finalejercicio final parapara demostrar que has entendido cómo sedemostrar que has entendido cómo se diseña una página Web.diseña una página Web. Sigue estos pasos:Sigue estos pasos: 1.1. Decide elDecide el nombre la Webnombre la Web que vas a diseñarque vas a diseñar 2.2. Dibuja elDibuja el esquemaesquema de páginasde páginas 3.3. Crea unCrea un directoriodirectorio de trabajo en el PCde trabajo en el PC 4.4. AbreAbre PublisherPublisher y comienza el ejercicio …y comienza el ejercicio … Ayúdate de los 10 pasos explicados en el tema 3ºAyúdate de los 10 pasos explicados en el tema 3º Tómate todo el tiempo que necesitesTómate todo el tiempo que necesites
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 6363 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 7. Ejercicio final. Diseña tu Web7. Ejercicio final. Diseña tu Web …… pero si no te apetece pensar en la Web quepero si no te apetece pensar en la Web que tienes que diseñar, diseña la siguiente web:tienes que diseñar, diseña la 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
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 6464 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 7. Recursos para7. 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 raíz” y lo debes guardar en el directorio raíz • Puedes crear el icono en: www.online-convert.comPuedes crear el icono en: www.online-convert.com • CrearCrear GIFGIFs animados: www.gifninja.coms animados: www.gifninja.com • Reconocedor fuentes: www.myfonts.comReconocedor fuentes: www.myfonts.com • ContadorContador de visitas: www.contadorvisitasgratis.comde visitas: www.contadorvisitasgratis.com • Usuarios conectados: www.usuarios-online.com/esUsuarios conectados: www.usuarios-online.com/es • Generar códigos QR: www.codigos-qr.comGenerar códigos QR: www.codigos-qr.com • Retoque de fotos de caras: http://makeup.pho.to/esRetoque de fotos de caras: http://makeup.pho.to/es
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 6565 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER 7. Recursos para7. 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/addurlDar de alta las páginas: www.google.com/addurl • Recortador de URLs: http://goo.gl/Recortador de URLs: http://goo.gl/ • Recursos Google paraRecursos Google para webmasterswebmasters:: • Google AnalyticsGoogle Analytics:: Estadísticas de las visitas a tu webEstadísticas de las visitas a tu web • 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 GmailPara algunos recursos de Google necesitarás correo de Gmail
    • Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisado-- 6666 --CURSO DE DISEÑO WEB - PUBLISHERCURSO DE DISEÑO WEB - PUBLISHER ¡Muchas gracias a¡Muchas gracias a todos!todos! Tel.: 619 069 125Tel.: 619 069 125