1
Download páginas web
Document related concepts
Transcript
Antes de comenzar un sitio
Es muy recomendable realizar la siguiente actividad, de evaluación de páginas web,
para tener ideas y recursos. http://www.uamvirtual.es/mod/assignment/view.php?id=3228
Empezar un sitio web
Familiarizarse con el lenguaje
Navegador
Es el programa que utilizamos para acceder a las páginas web. Hay muchos
navegadores pero los más comunes son Mozilla Firefox e Internet Explorer. Se
recomienda usar el primero por muchas razones de las que podemos destacar:
•
•
•
•
•
•
•
•
Fue el primero en usar la navegación en pestañas
Es software libre
En continua mejora
Hay versiones portables
No castiga al usuario con el bloqueo constante de contenidos active-X
Añade marcadores con un clic
Tiene más de 5000 complementos
Fácilmente personalizable
Servidor
Es el ordenador que almacena los sitios web (Host, equipo anfitrión) al que
accedemos con nuestro ordenador para que nos proporcione acceso a las páginas
solicitadas.
HTTP (HyperText Transfer Protocol)
Es el protocolo por el que se comunican a través de internet el servidor y el
navegador. El protocolo http:// se indica al principio de la dirección. Si no se teclea,
el navegador lo añade automáticamente.
URL (Uniform Resource Locator)
Localizador Uniforme de Recursos. Es la dirección donde se encuentra un
recurso en Internet. Ejemplo: http://www.uam.es.
Si no se indica una página html en concreto, el servidor nos dará acceso a la página
índice (index) o por defecto (default). Al navegar:
1. El usuario, situado en el equipo cliente, teclea la URL en la casilla dirección
del navegador y pulsa la tecla enter.
2. La petición se dirige a los servidores DNS (Domain Name System) que
traducen esta URL a una dirección IP (Internet Protocol). Por ejemplo:
www.uam.es Æ 150.244.9.237. Si tecleamos estos números en la barra de
direcciones del navegador, se abre la página de inicio de la UAM.
3. La petición llega al servidor que tiene esa IP.
4. El servidor devuelve la página solicitada.
1
5. El archivo html y los archivos multimedia vinculados se almacenan en la
carpeta caché del navegador (dentro del disco duro del equipo cliente).
Cuando se han descargado estos activos entonces el usuario visualiza la
página y todos sus elementos.
HTML (HyperText Markup Language)
Es el lenguaje más común (hay otros php, asp, jsp, etc) en el que se diseñan las
páginas que se visualizan a través del navegador. Este lenguaje se basa en
etiquetas (instrucciones que le dicen al navegador como deben mostrarse) y
atributos (parámetros que dan valor a la etiqueta). Una página html contiene texto
con un cierto formato y referencias a archivos externos que contienen imágenes,
sonidos, animaciones, etc.
Básicamente los documentos escritos en HTML constan de texto y etiquetas. Las
etiquetas permiten definir el formato del texto, el título que mostrará en la barra de
título del navegador, los elementos multimedia que aparecerán incrustados en el
documento pero que se almacenan en archivos externos, etc.
Todo documento HTML tiene la siguiente estructura: cabecera y cuerpo del
documento. Las tres etiquetas que describen su estructura general son:
•
•
•
<html>: se inicia el documento.
<head>: incluye el título de la página (<title>) que se muestra en la barra
de título del navegador.
<body>: contiene la información visible.
Primer documento HTML
Con el Bloc de Notas escribir
<html>
<head>
<title>aquí va el título de la página web</title>
</head>
<body>Dentro de estas dos etiquetas va el cuerpo del mensaje.</body>
</html>
Las etiquetas que llevan la barra / como </body> significan el cierre de la misma.
Si lo guardamos como nombre.htm tendremos una página web que se abrirá con
nuestro navegador.
Pensar en el sitio web
Es importante saber desde el principio la estructura de nuestro sitio y dibujar en un
papel el esqueleto. Igualmente tenemos que pensar en el menú y cómo será la
navegación
Organización de archivos.
Conviene generar una carpeta para las páginas web y una subcarpeta con los
elementos multimedia, de forma previa a la generación de documentos.
Mi web Æ imagenes (sin tilde)
2
Se pueden crear las carpetas que se crean necesarias dentro de la carpeta mi_web.
Ejemplo de estructura de un sitio web
Muy importante. Todos los archivos y carpetas que se encuentren dentro de la
carpeta mi web serán los que subiremos al servidor y deben estar correctamente
nombrados para que podamos verlos. En nuestro ordenador veremos
perfectamente determinados archivos pero es muy posible que no accedamos
desde la web porque los servidores trabajan en inglés y, por tanto, no admiten
determinados caracteres. Además hay unas reglas básicas que cumplir en cuanto a
nombrar archivos y carpetas. Todo debe estar correctamente nombrado antes de
incluirlo en nuestro sitio web. No se debe cambiar el nombre después ya que se
perderían los vínculos.
•
•
•
•
•
Nombrar todos los archivos con minúsculas. Algunos servidores admiten
mayúsculas pero mejor cumplir esta regla
Sin tildes, ñ o caracteres raros (nada de ¿?, ¡!, *, +, [], {} ni cosas
parecidas)
No separar las palabras con espacio. Usar guión bajo.
Nombres cortos
La página de inicio de nuestro sitio web se llamará siempre index.htm o
bien index.html (no hay diferencia en principio entre htm y html pero mejor
usar siempre la misma extensión. En algunos sitios (como la UAM) la página
de inicio se llama default.htm pero no es frecuente. Por ejemplo si ponemos
la dirección
http://www.isftic.mepsyd.es/ lo que nos devuelve el servidor es
http://www.isftic.mepsyd.es/index.htm
Bien nombrado
index.htm
mapa_espana.htm
colegio.jpg
camion.gif
Mal nombrado
INDEX.htm
mapa_españa.htm
mapa de espana.jpg
Index.htm
león.png
3
Editores de páginas. Front Page
Se trata de un programa de software propietario para edición de páginas web.
Dispone de un excelente y amplio tutorial en
http://www.aulaclic.org/frontpage2002/f_frontpage2002.htm
Le puede ser útil hojear consejos y preguntas habituales:
http://www.microsoft.com/spain/usuarios/trucos/frontpage/frontpage1-10.asp
Editores de páginas. Kompozer
Se trata de un programa gratuito y portable para la edición de páginas web.
Se descarga desde
http://portableapps.com/apps. Línea: Internet. Nvu Portable & KompoZer Portable.
Al pinchar se abre una nueva ventana. Elige “Download Kompozer”.
Manual de uso de Kompozer.
Sencillo http://creatuweb.espaciolatino.com/curso_nvu/
Muy completo http://www.subir-
archivos.com.ar/index.php?action=downloadfile&filename=tutorial%20by%20JuamPi.pdf&directory=&PHPSESSID=5f5b
b3cc902e533f48dd6ff4a8c6600b
Páginas Web. Edición
Use un tono cercano
Concite en su presentación la sencillez y elementos característicos
(imágenes, diagramación)
Use cuadrículas para diagramar sus páginas. Una propuesta más avanzada
está en Un manual en línea de diseño digital de un profesor que publica en el Cnice.
Trabaje con imágenes. Dispone de bancos de imágenes en: WikiMedia e
IsfTIC del Mecd. Dispone de sugerencias en el apartado sobre Gráficos y gifs del
Cnice
Genere enlaces internos de cada página
Desarrolle el mapa de navegación
Genere enlaces entre páginas.
Pruebe, muestre, piense, rehaga
Viñetas, listas…
• Inserción de textos. Manual, pág. 21
Prueba los iconos que permiten incluirlo en tu editor.
Vínculos
• Inserción de enlaces. Manual, pág. 33
Hipervínculos Son los enlaces a otras páginas web pero puede ocurrir también
que en ocasiones nos puede interesar colocar enlaces a otros puntos de una misma
página. Antes de crear el hipervínculo, es necesario situar esos puntos mediante
marcadores de posición. Un marcador es un nombre que representa una posición
dentro de la página. Suele estar formado por un fragmento de texto y es utilizado
como destino de un hipervínculo.
• Inserción de imágenes. Manual, pág. 40
Lo más importante al colocar imágenes en una web es tener en cuenta que
funcionan de distinta forma que en un procesador de textos. En el procesador la
imagen va incrustada y se mueve con el documento al copiarlo, enviarlo por
correo… En cambio, en una web, las imágenes están vinculadas por lo que no
forman parte de la misma y debemos siempre mantener la misma posición ya que
4
cada vez que se carga la página se llama a las imágenes y si las hemos movido de
sitio no las encuentra apareciendo un espacio en blanco en lugar de la imagen.
Tablas
•
Manual, pág. 51
Es muy común utilizar tablas para maquetar texto e imagen en una página web. El
problema del uso de las mismas es que hacen que las páginas sean menos
accesibles. Actualmente se utilizan contenedores DIV o capas pero distribuir los
espacios de nuestra web pero es algo complejo.
En Anchura indica los píxeles exactos de ancho que tendrá la tabla o bien el % que
ocupará del ancho total de la ventana. Conviene utilizar una anchura 100 % de la
ventana ya que se esta forma la tabla se ajusta automáticamente al espacio
disponible en la ventana del navegador.
Para que la tabla no muestre el borde introduce el valor 0 en la casilla Borde.
Hojas de estilo, plantillas…
• Manual, pág. 88
A diferencia del procesador de texto, donde trabajamos en un único archivo, un
sitio web se compone generalmente de varias páginas por lo que es muy
conveniente usar los estilos de párrafo para mantener una coherencia en el
formato de todas las páginas.
Una hoja de estilo o CSS (Cascading Style Sheets. Su extensión es .css) es un
archivo que contiene las definiciones de formato (fuente, tamaño, color, etc) de las
distintas etiquetas que forman una página web.
Lo bueno de trabajar con ellas es que todas las páginas de un sitio web tienen el
mismo formato. Se crea una hoja de estilo y se vinculan todas las páginas del sitio
a este archivo. Cualquier cambio en la hoja de estilo afecta instantáneamente al
formato de todas las páginas vinculadas a la misma.
Crear una hoja de estilo
Lo mejor es crear primero una carpeta (vamos a llamarla css) dentro de mi_web
1. Herramientas Æ Editor CSS
2. En Hojas de estilo CSS clic en el primer icono y seleccionar Hoja de estilos
enlazada (según la versión puede ser Elem. Enlace)
Los estilos se pueden guardar en el propio código de la página o bien en un archivo
css independiente. Optamos por la segunda opción por lo que seleccionamos una
hoja de estilos enlazada.
3. En URL escribimos la dirección: css/estilo.css Esto le indicará al programa que
los estilos se guardarán en una hoja de estilos externa con nombre estilo.css
dentro de la carpeta css que creamos antes.
Al crear una hoja de estilo su nombre aparece a la izquierda del editor CSS: Hojas
y reglas.
5
4. Seleccionar css/estilo.css, clic en la paleta Æ Regla de estilo.
5. Nueva regla de estilo. Seleccionar estilo aplicado a todos los elementos
del tipo. Así las características de estilo se aplicarán a una etiqueta html estándar:
body, h1, h2, etc.
6. Desplegar la lista para seleccionar la etiqueta cuyo formato vamos a definir. En
este caso la etiqueta será body. Esta etiqueta afecta al cuerpo de la página. Clic en
Crear regla de estilo.
7. Si pulsamos sobre la pestaña texto podemos cambiar el formato del mismo y lo
mismo ocurre si pinchamos en fondo, etc.
Es conveniente utilizar fuentes vulgares ya que si el usuario no dispone de la que
hemos puesto se reemplaza por una fuente de sustitución y los resultados suelen
ser visualmente nefastos.
7. Así podemos ir creando nuevas reglas de estilo para otros tipos de elementos. Si
creamos una regla para h1 significa que cambiaremos el formato de los
encabezados de tipo 1.
8. Finalmente se cierra el panel y se guardan las modificaciones.
Si se revisa el Código fuente de la página (clic en la pestaña inferior Código
fuente) se puede ver que se ha creado una vinculación de esta página al archivo
que contiene la información de estilos: <link rel="stylesheet" href="css/estilo.css"
y que además se ha creado el archivo estilo.css en la carpeta css.
Vincular una hoja de estilo a una web
1. Herramientas Æ Editor CSS
2. En el botón hoja de estilo CSS seleccionar Hoja de estilos enlazada y en el
panel derecho Elegir archivo para abrir mi_web\css\estilo.css.
3. Clic en Crear hoja de estilos. Aparece en el panel izquierdo. Al abrir pulsando
en el + se ven las reglas de estilo. La web ha tomado el formato de la hoja de
estilo.
4. Desde aquí se pueden modificar las propiedades de las etiquetas.
5. Finalmente se guarda la vinculación de la página con la hoja de estilo.
6
Páginas Web. Publicación
Host
http://www.gratisweb.com
FTP. Filezilla
http://portableapps.com/apps/internet/filezilla_portable
Tarea: Edición y publicación web
Tema educativo, útil para un maestro
Como un web puede ser muy amplio, lo limitamos a:
• Mapa de navegación completo (Exploración).
• Una rama del mismo desarrollada completamente.
• En el resto, indicación de qué habría en cada página.
Que incluya:
• Programación, con curso al que se dirige, objetivos, paradigma y autores.
• Imágenes, vínculos, texto.
• Estética cuidada
7
