confecciÓn de pÁginas web con ms front page - ticeq 2006 - prof: dr. carlos a. núñez dpto....

CONFECCIÓN DE PÁGINAS CONFECCIÓN DE PÁGINAS WEB CON WEB CON

MS FRONT PAGEMS FRONT PAGE

- TICEQ 2006 -- TICEQ 2006 -

Prof: Dr. Carlos A. NúñezProf: Dr. Carlos A. NúñezDpto. Química Física, U.HDpto. Química Física, U.H

cnv@fq.uh.cucnv@fq.uh.cu

Los ejemplos, asociados a los iconos:Los ejemplos, asociados a los iconos:

solo pueden consultarse si se trabaja solo pueden consultarse si se trabaja con conexión a la Intranet de la con conexión a la Intranet de la Facultad de Química o a InternetFacultad de Química o a Internet

NOTA

Texto e HipertextoTexto e Hipertexto

Texto común: para imprimir y leer Texto común: para imprimir y leer linealmentelinealmente

• Hipertexto: para leer en pantallaHipertexto: para leer en pantalla• HipervínculoHipervínculo• Cada lector una secuencia Cada lector una secuencia diferentediferente

Página y Sitio WebPágina y Sitio Web

Página web: documento de hipertexto Página web: documento de hipertexto (consulta on-line) (consulta on-line)

Sitio web: Conjunto de páginas web Sitio web: Conjunto de páginas web relacionadas mediante relacionadas mediante hipervínculos hipervínculos

HTMLHTML

HTML: HTML: HHiperiperttexto exto MMarkup arkup LLanguaje: anguaje: Confección de páginas web Confección de páginas web

Texto no formateado (txt) + etiquetas Texto no formateado (txt) + etiquetas (tags)(tags)

CÓDIGO FUENTE (.txt)CÓDIGO FUENTE (.txt)

NAVEGADOR (.htm)NAVEGADOR (.htm)

MS-FrontPageMS-FrontPage

Confección de páginas web:Confección de páginas web:

Mediante el “código fuente”Mediante el “código fuente”

Programa “wysiwyg” (Programa “wysiwyg” (wwhat hat yyou ou sseeee iis s wwhat hat yyou ou gget) et)

MS FrontPage MS FrontPage

Subdirectorio de trabajoSubdirectorio de trabajo

ANTESANTES de comenzar el trabajo: de comenzar el trabajo:

Crear subdirectorio de trabajo yCrear subdirectorio de trabajo y

situar en él situar en él TODOSTODOS los materiales de los materiales de

trabajo ordenadamentetrabajo ordenadamente

Pantalla de trabajo de FPPantalla de trabajo de FP

Pantalla de trabajo de FPPantalla de trabajo de FP

• Normal: edición

•HTML: código fuente

•Vista previa: como en “navegador”

Vistas de FPVistas de FP

Guardado de la páginaGuardado de la página

Nombres de archivo permitidosNombres de archivo permitidos

(Linux)(Linux)

Sólo se letras del alfabeto inglésSólo se letras del alfabeto inglés

No espacios( _ ), acentos, signos de No espacios( _ ), acentos, signos de puntuaciónpuntuación

(Se recomienda) Solo minúsculas(Se recomienda) Solo minúsculas

TÍTULO: Cualquier carácterTÍTULO: Cualquier carácter

Propiedades de la página: generalPropiedades de la página: general

Propiedades de la página: fondoPropiedades de la página: fondo

Propiedades de la página: fondoPropiedades de la página: fondo

Propiedades de la página: fondoPropiedades de la página: fondo

Propiedades de la página: fondoPropiedades de la página: fondo

Uniformidad

• Color e imagen de fondo• Colores para el texto e hipervínculos• Banners• Hipervínculos de navegación • Tablas en blanco para el formateo• Elementos comunes

Plantilla del sitioPlantilla del sitio

•Tamaño de fuentes particular en HTML

•No subrayado: hipervínculos

•Probar con diferentes tamaños en navegador

FuentesFuentes

• Exposición ordenada de datos

• Formateo de la página:

Tablas invisibles

TablasTablas

• En el texto

• Fondo de página o tabla

• Con hipervínculo asociado

ImágenesImágenes

• GIF:Pocos colores

Animadas

Transparencias

• JPEG:Medios tonos

• BMP:Muy grandes

Formato de las imágenesFormato de las imágenes

Propiedades de las imágenesPropiedades de las imágenes

Texto asociado a una imagenTexto asociado a una imagen

Aparece al picar sobre imagen:

• Transparencias:

• Mapas de imagen:

Barra de herramientas de imagenBarra de herramientas de imagen

• Imágenes grandes demoran descarga de página

• No .BMP

• Réplica pequeña de imagen grande con hipervínculo (Thumbnail)

Imágenes reducidasImágenes reducidas(Thumbnails)(Thumbnails)

Imagen de fondoImagen de fondo

• Imagen grande o pequeña que se repite

• Color de fuente: buen contraste con imagen de fondo

• Dar color al fondo semejante al de imagen de fondo

Imagen de fondoImagen de fondo

Fondo lateralFondo lateral

• Saltos de una página a (un punto dado de) otra

• Asociables a figuras o textos

• Destino: archivo de cualquier formato

HipervínculosHipervínculos

• Texto: Subrayado

Colores particulares

según estado

• Figuras: Si borde, igual color

que hipervínculo de

texto

•Cursor: Mano

Hipervínculos: aparienciaHipervínculos: apariencia

•Marcar elemento

Hipervínculos: creaciónHipervínculos: creación

•Ventana destino del hipervínculo

Hipervínculos: creaciónHipervínculos: creación

•Ventana destino del hipervínculo

Hipervínculos: creaciónHipervínculos: creación

Desde FrontPage:

•Vista normal de FP:Picando sobre él + Ctrl

• Vista previa de FP:Picando sobre él

Desde navegador en:

Su PC Otra PC Servidor

Hipervínculos: Hipervínculos: comprobacióncomprobación

• Señal que permite acceder directamente a un punto dado de documento mediante un hipervínculo • Modo normal (edición) de FP:

Icono

Texto subrayado - - - - -

• Invisible en “Vista previa de FP y en Navegador

MarcadoresMarcadores

• Marcar sitio + opción "Insertar/Marcador"

Marcadores: inserciónMarcadores: inserción

Mismo documento: #marcador

O …

Hipervínculo a marcadorHipervínculo a marcador

Otro documento: dirección + marcador

Hipervínculo a marcadorHipervínculo a marcador

Mediante bpt+on “Dirección de correo electrónico”

Hipervínculo a e-mailHipervínculo a e-mail

ALGUNOS CONSEJOSALGUNOS CONSEJOSPARA LA CONFECIÓNPARA LA CONFECIÓN

DE SITIOS WEBDE SITIOS WEB

GENERALESGENERALES

Contenido y aprienciaContenido y apriencia

Diseño previo del sitioDiseño previo del sitio

Todo en directorio de trabajoTodo en directorio de trabajo

Uniformidad (plantilla)Uniformidad (plantilla)

DISEÑO DEL SITIODISEÑO DEL SITIO

Primera página: Primera página:

Objetivo y contenidoObjetivo y contenidoVínculo a diferentes partes, al mapa Vínculo a diferentes partes, al mapa o índice del sitio y a la página o índice del sitio y a la página personal o dirección de correo personal o dirección de correo electrónico del autor.electrónico del autor.

Titulo adecuado a cada páginaTitulo adecuado a cada página

DISEÑO DEL SITIODISEÑO DEL SITIO

Estructura:Estructura:

Hipervínculos “de navegación”: Hipervínculos “de navegación”: anterior, siguiente, mapa del sitio anterior, siguiente, mapa del sitio

No necesario volver siempre a No necesario volver siempre a página principalpágina principal

Hipervínculos de navegación en Hipervínculos de navegación en lugares fijoslugares fijos

DISEÑO DEL SITIODISEÑO DEL SITIO

Estructura:Estructura:

Para leer en la pantalla: no largasPara leer en la pantalla: no largas 3 o 4 pantallas 3 o 4 pantallas

Versión para imprimir (.doc o .pdf)Versión para imprimir (.doc o .pdf)

Diseño visible en monitores 640x480: Diseño visible en monitores 640x480: figuras y tablas de ancho < 620 pixelsfiguras y tablas de ancho < 620 pixels

IMÁGENES Y TABLASIMÁGENES Y TABLAS

Tener en cuenta tamaño de pantallaTener en cuenta tamaño de pantalla

Verificar que se observen detallesVerificar que se observen detalles

PrecauciónPrecaución con figuras digitalizadas o con figuras digitalizadas o copiadas de Internet y cambiadas de copiadas de Internet y cambiadas de tamaño: pérdida de detalles tamaño: pérdida de detalles corrección corrección

HIPERVÍNCULOSHIPERVÍNCULOS

Asociado a un texto: Asociado a un texto:

Indicación clara del destinoIndicación clara del destino

Asociado a una figura: Asociado a una figura:

Indicación del destinoIndicación del destino

mediantemediante

texto asociado a figuratexto asociado a figura

REVISIÓN FINALREVISIÓN FINAL

Redacción y ortografía Redacción y ortografía

Extensión de páginas Extensión de páginas

Hipervínculos "rotos": Hipervínculos "rotos": En su PC, en otra PC y en servidor En su PC, en otra PC y en servidor

Diferentes tamaños de texto en Diferentes tamaños de texto en navegadornavegador

Diferentes navegadoresDiferentes navegadores