www.deciencias.net
Web docente departamental
 
> web docente > diseño web dpto > sitio web
 
Página web y sitio web

Las páginas web son los documentos con los que se construye la Web. Una página web es un documento hipermedia (fichero .htm, .html, .xhtml, .asp, .jsp, .php), escrito con el lenguaje HTML que es procesado por un programa especial, el navegador. Las páginas web se diseñan para ser accesibles fundamentalmente a través de Internet.

Un sitio web es un conjunto de páginas web interrelacionadas y organizadas entorno a una temática o necesidad concreta, que están en un mismo servidor. Acompañando a las páginas están las carpetas con archivos auxiliares de imágenes, sonidos, documentos, ...

En Internet no hay páginas web "sueltas". Hay sitios web (aunque sean de una sola página) ubicados en servidores web. Normalmente la página de entrada a un sitio web figura como index.htm. Con un navegador podemos hacer la petición de entrada en un sitio web (página de entrada) o en una página concreta del sitio.

Los ficheros correspondientes a páginas web debemos diseñarlos en el disco duro del ordenador local (servidor local). Después, teniendo los permisos oportunos del servidor (terra, wanadoo, educaragon, ...), podemos colocar estos ficheros en Intenet (servidor remoto) para que puedan ser visitados en todo el mundo. Para colocar estos ficheros (subirlos a Internet) podemos utilizar un programa FTP.

Cuando los sitios web son muy complejos o extensos hay dos herramientas interesantes que dan un cierto valor añadido a la calidad del mismo:

  • La primera es el mapa del sitio, una enumeración jeraraquizada de todas sus páginas, normalmente con vínculos directos a cada página para facilitar la navegación.
  • La segunda es un buscador interno que permita al visitante una rápida localización de cualquier elemento del sitio.
Interactividad

La interactividad es hoy día un aspecto fundamental en el diseño de un buen sitio web. La interactividad se puede conseguir de varias formas. La más antigua se basa en el uso de formularios . Un formulario permite el envío de información desde el cliente hacia el servidor, donde un programa se encarga de procesarla.

Otro tipo de interactividad es la proporcionada por el denominado HTML dinámico , basada en el uso de pequeños programas llamados scripts (guiones). Un script ejecuta una acción sobre un elemento de la página cuando se produce un determinado evento sobre dicho elemento. La combinación de un evento con una acción para un determinado elemento se conoce como un comportamiento del objeto, pudiendo un mismo elemento tener asociados varios comportamientos. Es importante tener en cuenta que al hacer dinámicas las páginas éstas pueden volverse inaccesibles para muchos usuarios.

Ejemplos: http://www.deciancias.net/ (Buscar un evento script en esta página)

Creación de páginas web
Cuando emprendamos la tarea de crear páginas web a partir de una buena planificación que nos la da el diseño de página, tener una idea clara de los elementos que vamos a incluir y conseguir los elementos o documentos auxiliares (imágenes, docs, animaciones, etc), tenemos varias posibilidades de edición web:
  • Utilizar un editor de páginas web
  • Programar directamente en HTML
  • Guardar en formato HTML un documento creado con otra aplicación

Una vez elegido el editor de páginas web con el que tendremos que trabajar en profundidad necesitamos algunas herramientas auxiliares que nos faciliten el tratamiento de los distintos documentos que vayamos a incluir en las páginas:

  • Programas de diseño gráfico , para la creación y el tratamiento digital de imágenes y fotografías (PaintShop Pro, Adobe Photoshop, Corel PhotoPaint).
  • Programas de tratamiento del color, nos proporcionan los colores amigables y los códigos correspondientes para incluirlos en el editor (Color Schemer, también online: http://www.colorschemer.com/online.html )
  • Editores de mapas sensibles , para crear mapas de imágenes (Mapedit).
  • Programas de animación , para crear animaciones GIF (GIF Construction Set) o vectoriales (Macromedia Flash).
  • Programas de edición de audio (GoldWave, Sonic Foundry SoundForge)
  • Programas de edición de vídeo (Adobe Premiere), para editar audio y vídeo digital.
  • Programas de modelado 3D (Kinetix 3D Studio, CorelWEB.WORLD, 3D Webmaster), para incluir mundos virtuales en VRML.
  • Conversores de formatos gráficos y de texto, para incorporar a un documento HTML documentos realizados con otros programas y almacenados en diferentes formatos (Paquete Corel, Graphics Workshop).
  • Analizadores de vínculos , para comprobar los enlaces entre las páginas (Los propios editores web).
  • Entornos de desarrollo de programas , para escribir código HTML, Java, JavaScript o VBScript.
  • Programas de FTP , para la transferencia de las páginas al servidor web (WS_FTP).
  • Servidores web , para realizar pruebas en modo local (Microsoft Personal Web Server).

Páginas de recursos gráficos para webmasters en la red:

  • Cool Archive Archivo personal que ofrece tipografías, iconos, animaciones y gráficos gratis.  http://www.free-clip-art.net/index2.shtml
  • Absolutely Free Icon Library Una de las más grandes colecciones de iconos gratis.
    http://www.free-icons.com/
  • Icon Depot Más de 1,000 iconos, líneas, y botones gratis para fines no comerciales. http://www.geocities.com/SiliconValley/6603/
  • WDVL Icons Excelente colección de iconos gratis. 
    http://www.stars.com/Icons/
  • Animation Factory. Animaciones y elementos multimedia.
    http://www.animationfactory.com/
  • Dresher image. Otra gran colección de imágenes.
    http://www.free-clip-images.com/
  • Original free clipart. Colección de clipart, cartons, fuentes.
    http://www.free-clip-art.net/index2.shtml
  • RecursosGratis. Completo directorio de enlaces clasificados por categorías.
    http://www.recursosgratis.com
  • Coolclips. Todos los gráficos pasando por un cuestionario previo.
    http://www.coolclips.com/
  • Clipsahoy. Colección de miles de clipart gratis.
    http://www.clipsahoy.com

 

Actividad: Bajar Páginas y Comparar sitio remoto-sitio local

Con ayuda de un navegador accede a la siguiente página, que está ubicada en algún servidor "remoto" de Internet. Se trata de una interesante webquest sobre "Cómo diseñar bien una página web" (http://www.aula21.net/Wqfacil/ejemplos/webtic.htm)
Guarda la página con el nombre "webtic" en Mis Documentos. Observa los archivos descargados (sitio local).
En Mis Documentos abre webtic.htm y visualiza su código fuente en lenguaje html (Ver->Código fuente). Ciérrala.
Ahora edita la página anterior con Front Page o Dreamweaver. Modifica algo (ej. quitar la imagen inicial) y guárdala de nuevo. Observa los resultados.

Actividad: Entrar en un sitio web y en una página web

Con un navegador entra en el siguiente sitio web: (http://www.deciencias.net/)
Ahora entra en la página principal del sitio: (http://www.deciencias.net/index.htm) y observa las diferencias o coincidencias.
Después entra en una página concreta del sitio de dos formas distintas, directamente y a través de la página principal (p.e. http://www.deciencias.net/centrosA/index.htm).


Anterior
 
Siguiente

© All rights reserved
Webmaster: Miguel Vaquero
| Web docente | Integración TIC | Diseño Web | Edición Web | Tutoriales diseño-web |    Envía tus comentarios
  El uso de esta Web significa que está de acuerdo con las condiciones de uso | 2010