external image 40px-Stop_sign.pngEstas son indicaciones básicas sobre diseño de páginas Web, dirigida a alumnos de Secundaria.
Hacer clic sobre los enlaces con el botón derecho del ratón para visitar otras páginas sin abandonar esta.
Ir a >> Diseñar facilmente una web con Google Page Creator

Consejos para diseño de páginas web

Introducción:

disenoweb.jpgDiseñar y crear una página Web, no es difícil, lo difícil es llenarla de contenidos, por eso antes de hacerla y colocarla en Internet debemos pensar que es lo que queremos transmitir o comunicar en nuestro sitio Web, es decir decidir el tema a tratar.

Un sitio Web, está compuesto por varias páginas Web (piensa en un libro que tiene varias páginas), aunque también podemos construir un sitio Web con una sola página, lo usual es que tenga como mínimo dos.

Existen varios programas para diseñar páginas Web, entre ellos Microsoft FrontPage (descatalogado, no está ya en Office), Macromedia Dreamweaver, Microsoft Word, etc. Al terminar de diseñarlas debemos "subir" desde nuestro ordenador, cada una de las páginas a un servidor Web, mediante un programa FTP.

Si lo que queremos hacer es un gran sitio Web, podemos optar por un CMS un sistema de páginas Web completamente prediseñado y personalizable y de fácil administración, pero casi siempre debemos tener un servicio de Hosting que permita el uso del lenguaje PHP.

Existen sitios Web que ofrecen gratuitamente, páginas prediseñadas "Templates" o plantillas preparadas en lenguaje HTML, que podemos descargar gratis y editar o personalizar a nuestro gusto, con los programas citados, pero no los libraríamos de tener que utilizar un programa FTP y de buscar un servicio de alojamiento (Hosting) para nuestra página, que pueden ser gratuitos o de pago. Como ves, construir un sitio Web completo desde cero lleva su tiempo, aunque no sea difícil.

También existen servicios que ofrecen estas páginas prediseñadas online, es decir, que podemos directamente editarlas en Internet, muy rápido y llenarlas de contenido.
Nosotros utilizaremos los servicios de https://sites.google.com para hacer una página web estática, con resultados profesionales.

Si quisieramos páginas web dinámicas, lo mejor será hacernos un Blog o un Wiki.

Estructura: ¿Cómo debe ser nuestra página Web?

estructurapw.gifAntes de ponernos a hacer nuestra página Web, debemos pensar en un nombre o título para nuestra página, que esté relacionado con el contenido y hacermos un esquema mental o en folio de cómo será su estructura, para diseñarla. La estructura de nuestra página web, por ejemplo puede ser esta que muestra la imagen a la derecha:
  • Cabecera: En esta parte estará el título de nuestra Web y si queremos ganar algún dinero, un espacio para publicidad.
  • Barra lateral: Situada a la derecha o izquierda de nuestra página, en esta zona colocaremos enlaces (links) hacia otras páginas de nuestro sitio, por ejemplo un índice o enlaces hacia páginas externas. También aquí se pueden colocar pequeñas fotos, publicidad, etc.
  • Cuerpo: Esta es la zona más importante, pues es la que muestra los contenidos de texto e imágenes de nuestra página.

Es aconsejable redactar muy bien y con buena ortografía todos estos contenidos y tener cuidado al escoger las fotos o vídeos.

Debemos ser originales y no copiar y pegar desde otras páginas, esto molesta a los autores de aquellas y sobre todo podemos meternos en un lío, ya que los textos y las fotos pueden tener derechos de autor "Copyright". Si alguna vez copiamos algo debe ser muy poco, debemos citar la fuente y colocar un enlace hacia esa página o fuente si existe.

Los textos no deben ser muy extensos, la altura de la página no debe ser más que una vez y media la altura de nuestra pantalla, si necesitas escribir más, enlaza y crea otra página para continuar con el texto. El tipo de letra debe ser cómodo para leer, por ejemplo la fuente "Arial" es adecuada y debemos escoger un tamaño apropiado entre 10 y 12 por ejemplo.

Las fotos necesitan ser optimizadas (para que no sean " pesadas") antes de colocarlas en la Web. No se deben insertar muchas fotos o vídeos, pues retardan la carga de la página y consumen "ancho de banda". Además se deben cumplir las siguientes recomendaciones cuando se usen imágenes con movimiento:

external image hammer2.gifExisten muchos sitios Web que ofrecen gifts animados gratis para decorar nuestra Web, pero no debemos abusar de ellos y si ponemos alguno, debemos escoger muy bien el lugar en donde colocarlos para que no moleste en la lectura. En Internet es muy fácil "cambiar de canal" y caer en el olvido con un simple clic, así que cuando alguien ve algo que no le gusta, se va y no vuelve.
Enlaces: para obtener gifts, fondos, textos de cabecera, etc:
external image animated.gifLas páginas "antiguas" utilizaban estos gifts animados, aunque son bonitos ESTÁN EN DESUSO.
http://www.flamingtext.com | http://www.iconbazaar.com/

external image evista_full.jpg Las páginas actuales utilizan iconos y gráficos estáticos, con una estética que asemeja a los iconos de los sistemas operativos, Windows, Linux y Mac:

http://www.iconaholic.com | http://www.fasticon.com/downloads.html

  • Pie de página: Aquí debemos escribir entre otras cosas, nuestro nombre, el año y una dirección de correo electrónico para que puedan contactar con nosotros. Es muy importante colocar aquí o en otra parte visible de la página algún "Acerca de" que hable sobre nosotros como persona y contenga una foto nuestra o al menos un avatar, así el visitante se lleva una idea de quién es y a que se dedica el autor de la página.

Ejemplos:

Mi página Web personal, fue diseñada utilizando esta plantilla original, que luego edité con el programa FrontPage.
Mi blog. Se hizo con un CMS prediseñado BLOG:CMS, aunque lo he personalizado posteriormente.

Resumen:

Una buena página Web debe ser sencilla y agradable de ver, que cargue rápido cuando conectamos con ella, con un título y una URL (dirección Web) fácil de recordar. Fondos claros o blanco, colores pastel, tipo y tamaño de letra cómodo para leer. Para decorar pocas imágenes pequeñas.
Observa los sitios Google y Yahoo, son un buen ejemplo de diseño y cumplen con todo lo explicado anteriormente.

Ejercicio:

  • En la siguiente página se dan indicaciones paso a paso para construir una página web como esta con Google Page Creator. Este será nuestro ejercicio de diseño web. Haz clic en siguiente:
Siguiente >> next.gif