INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL AREA: TEMA: Tecnologa e Informtica Grado 11 Diseo Web - Preparacin del sitio

o web

Introduccin
Un sitio web o website, es un conjunto de pginas web, agrupadas bajo un dominio. La idea de crear un sitio web nace porque hay algo que comunicar con el mundo. El tema seleccionado para desarrollar un sitio web debe resultar interesante; adems de ser concreto. No slo debemos de elegir un tema que resulte atractivo para un grupo de usuarios, si no que debemos de tener suficiente informacin sobre l. Una vez elegido la temtica, debemos de distinguir cuales son las categoras en las que vamos a dividir nuestro sitio, para el diseo del men. Estas sern ms genricas o menos, dependiendo del tamao del sitio.

Preparando el Sitio
Por ejemplo, vamos a crear la web del Instituto Tcnico Superior Industrial. Principalmente, el inters es exponer fotografas de su sede principal, pero tambin crearemos las pginas que den a conocer datos generales de la institucin y que permitan ponerse en contacto con ella. Cuando se accede a un sitio web, realmente accedemos a una carpeta del servidor en donde se aloja, que funciona como raz del sitio. Internamente, dentro de esa carpeta, se encuentran archivos y subcarpetas que permiten organizar el sitio, igual que organizamos los documentos en las carpetas del computador. Por lo general se deben tener en cuenta una serie de cosas: En la raz del sitio (carpeta principal), debe estar como mnimo la pgina de inicio, que se debe llamar index.html (o .htm). Esto se debe a que cuando a un navegador le indicamos que abra una carpeta, busca el archivo index de la misma. Se debe organizar los tipos de archivo en carpetas. Por ejemplo, una carpeta para las imgenes que forman parte del diseo de la pgina. Si a parte tenemos fotografas de una galera, o de productos, es mejor ponerlas en otra carpeta, ya que no tienen relacin con el diseo. Otra carpeta para los archivos javascript, videos, etc. Si hay secciones claramente definidas, podemos guardar sus pginas en subcarpetas. Se debe dar un nombre descriptivo a los archivos. Nos resultar mucho ms sencillo si nuestros archivos se llaman contacto.html y noticias.html que si los llamamos pagina_1.html y pagina_2.html. A no ser que se trate de pginas del mismo tipo en las que es muy importante el orden, como pginas de un manual. Es conveniente planificar cmo va a ser el sitio, y partir de las carpetas iniciales. Lgicamente, no vamos a tenerlo todo en cuenta, por lo que a medida que vaya creciendo nuestro sitio, iremos creando las carpetas que nos hagan falta. Primero crearemos el sitio en nuestro equipo, y cuando lo acabemos ya los subiremos a un servidor Web. Comenzamos por crear la carpeta raz. En este caso, la llamaremos sitio_itsi, y estar ubicada en el computador del profesor. Qu tendremos dentro de esta carpeta? A priori, contendr las pginas, entre las que incluimos un index. Tambin tendremos una hoja de estilo, e imgenes del diseo de la pgina, como logos, imgenes para el fondo, etc. Por lo que ser mejor si agrupamos estas imgenes en una carpeta, que podemos llamar imagenes (omitimos el acento porque no conviene incluir caracteres especiales en los nombres de archivos y carpetas). Si ms adelante tenemos otros elementos, como archivos javascript, archivos para descargar, etc, ya nos preocuparemos por crear ms carpetas para ellos. Vamos a echar un vistazo a las secciones que queremos crear: Una seccin sobre la sede principal, con fotografas. Una pgina sobre la institucin. Un formulario de contacto. Una pgina con noticias sobre la institucin. A excepcin de la seccin de la sede principal, las otras sern pginas simples, que podemos dejar en la carpeta raz. Pensemos en la seccin de la sede principal. Queremos mostrar una amplia galera de fotografas. Para que el visitante pueda encontrar un lugar en concreto, es importante que las clasifiquemos. Por eso crearemos un ndice alfabtico con los lugares. En otra pgina, mostraremos las fotos de las locaciones. Como no conviene crear una pgina muy grande, con muchas fotografas, la dividiremos en las distintas categoras, que en principio sern cinco. En resumen, para la seccin de la sede principal, necesitamos 6 pginas y fotografas, que estarn mejor recogidas en una carpeta, que podemos llamar imagenes. No son muchos elementos, pero podemos pensar en agruparlos todos dentro de una carpeta. Por lo tanto, la estructura de archivos que planteamos para nuestro sitio quedara as:

Definir un sitio en KompoZer

Al trabajar con KompoZer, nos resultar mucho ms cmodo si utilizamos el Administrador de sitios para acceder a nuestros archivos. Para que se mostrarlo u ocultarlo, podemos seleccionarlo en el men Ver Mostrar / Ocultar Administrador de sitios, o pulsando F9. Al mostrarlo, se mostrar a la izquierda un panel con los distintos sitios que tengamos definidos:

Pero lo primero ser crear un sitio. Para crear o editar un sitio, pulsamos en el icono abrir la ventana Configuracin de publicacin:

. Se

En Nombre de sitio indicamos un nombre, que ser el que identifique al sitio en la ventana del Administrador se sitios. Direccin HTTP de su pgina inicial, es opcional. Aqu podramos poner la direccin del sitio si ya lo hemos publicado en Internet. Direccin de publicacin. Aqu tenemos que indicar la carpeta raz de nuestro sitio. Si est en nuestro equipo, no tendremos ms que pulsar en Seleccionar directorio y elegir la carpeta. En cambio, si ya hemos publicado el sitio, lo podemos editar directamente desde el servidor, introduciendo la URL del servidor ftp del sitio. En este caso, tambin deberemos de indicar un Nombre de Usuario y Contrasea.

Una vez elegido el nombre y la carpeta, pulsamos en Nuevo sitio. Si cerramos la ventana, el nuevo sitio aparecer en el Administrador de sitios. Y a medida que vayamos creando archivos, estos aparecern en el rbol del sitio. Si no aparecen, debemos de Recargar Desde el Administrador, podemos Renombrar archivos , Eliminarlos el sitio. , y crear Nuevas carpetas dentro del sitio.

Ejercicio
1. 2. 3. 4. 5. Crea una carpeta en la unidad D:\ llamada Sitios_web. Si ya est creada, crea dentro de ella una subcarpeta llamada 110x (x es el nmero de tu grupo, por ejemplo, 1105). Haz doble clic sobre la carpeta creada y crea dos subcarpetas llamadas sede_a e imagenes (sin tilde). Abre KompoZer y accede al panel Administrador de Sitios. Desde all, define un nuevo sitio web llamado sitio_ietsi, seleccionando como direccin de publicacin la carpeta 110x creada en el punto 1. Sigue las instrucciones dadas en la seccin Definir un sitio en KompoZer. Al terminar, debers observar en el Administrador de Sitios el nombre de tu sitio web.

Estructura del men

El uso de mens es muy habitual en las pginas web. Un men no es ms que una lista de enlaces relativos a nuestro sitio, llamados elementos del men. Por lo general se suele colocar en la parte superior de la pgina, junto al logo o debajo de l, o en el lateral izquierdo. No debe de ser demasiado extenso. Aparecern las secciones de nuestro sitio web. Y por ejemplo, podemos utilizar diversos mtodos para que el usuario pueda expandir cada seccin y ver enlaces a los apartados de la seccin, o utilizar mens desplegables. Los elementos del men deben de ser descriptivos (usar texto en lugar de imgenes). El men debe de ser ligero, y no ocupar demasiado espacio, ya que se repetir en todas las pginas. En lo que se refiere al cdigo, el men suele tener estos elementos: Los mens se suelen basar en listas <ul></ul>. Dentro de cada elemento de la lista, colocaremos un enlace. El aspecto del men se pude mejorar con CSS. Por lo tanto, comenzaremos creando nuestro men como una lista, a la que ms adelante le iremos dando estilo hasta convertirla en un atractivo elemento de navegacin.

Estructura de la pgina
En nuestro ejemplo, como norma general todas las pginas mantendrn la misma estructura. Por ejemplo, tendrn el mismo logo o ttulo, el sistema de navegacin en la misma posicin, el mismo pie, etc. Slo iremos cambiando el contenido.

Una excepcin a esto puede ser la pgina de inicio. Pensemos que esta pgina es la presentacin de nuestro sitio, y el visitante se har una idea de qu puede encontrar en nuestro sitio a partir de ella. Por eso no es extrao que tenga ms enlaces que el resto de pginas. Esto, como siempre, depender del tamao del sitio. Pero pensando en el resto de pginas, no es una mala idea comenzar creando una pgina base, con esos elementos comunes que podamos utilizar a modo de plantilla. Vamos a ver qu elementos necesitamos en nuestro ejemplo: Un ttulo, para lo que podemos utilizar un encabezado h1. En el se mostrar el nombre de la institucin, Instituto Tcnico Superior Industrial. Un men. En este caso pondremos un enlace a las siguientes secciones: o Inicio (index.html) o Sede Principal (sede_a/index.html) o Nosotros (nosotros.html) o Contacto (contacto.html) o Noticias (noticias.html) Como son slo cinco elementos, vamos a ponerlo en la parte superior, ya que en un lateral desperdiciaramos espacio. Un rea para el contenido. Cambiar en cada pgina, pero tendr un ttulo para la seccin. El pie, por ejemplo para poner el copyright de la pgina. Podemos utilizar un elemento de bloque como un prrafo o un div. Tambin existe una etiqueta especfica, <address> utilizada para contener informacin sobre el autor de la pgina.

Para que nos quede mejor estructurada la pgina, vamos a utilizar divisiones en las tres secciones diferenciadas:

De esta manera, entre pginas prcticamente slo cambiaremos el contenido. Con esta estructura en mente, vamos a escribir el cdigo: Creamos una nueva pgina, con el Doctype, head, body, etc... Dentro, creamos tres divisiones. En la primera, colocamos un <h1> con el nombre de la asociacin. Tambin una <ul>, con un elemento y un enlace para cada una de las secciones. La divisin central la dejamos en blanco, ya que ser la que iremos cambiando. En la tercera divisin, introducimos el texto del pie. Por ejemplo, Todos los derechos reservados.

Y no hemos de olvidar, que en un futuro contendr un enlace a la hoja de estilos. Por lo que es conveniente que lo pongamos ya, decidiendo un nombre para la hoja, por ejemplo estilos.css. Una vez creada, guardamos la pgina como base.html. La pgina tiene pocos elementos, y se recomienda que intentes hacerla escribiendo directamente el cdigo fuente. De todas formas, puedes seguir el siguiente ejercicio para realizar la pgina con KompoZer, y comprobar el cdigo generado.

Ejercicio paso a paso: KompoZer. Pgina base

Vamos a crear la pgina que nos servir como base para crear las distintas pginas posteriores. La pgina la ubicaremos en un sitio llamado sitio_itsi, el cual deber ser creado en la siguiente ruta (unidad y carpetas): D:\11-0x\sitio_itsi\ (siendo x el nmero de su grupo, por ejemplo, 11-01) 1. En la barra de redaccin de KompoZer, haz clic sobre el botn Nuevo. 2. En la pgina en blanco, escribe el nombre del sitio, Instituto Tcnico Superior Industrial. No cambies de lnea al acabar. 3. En la barra de formatos, en el primer desplegable, elige Ttulo 1. 4. Pulsa Enter para saltar de lnea. 5. Vamos a escribir el men. Escribe los distintos elementos, cada uno en una lnea. Debe de quedar con este aspecto. o Inicio o Sede Principal o Nosotros o Contacto o Noticias

6. 7. 8. 9. 10.

Selecciona las cinco lneas y pulsa el icono de la barra de formatos para convertirlas en una lista no ordenada. Haz doble clic sobre el texto del primer elemento para seleccionarlo. En la barra de redaccin haz clic sobre el botn Enlace. En la ventana que se abre, en Ubicacin del enlace introduce index.html y pulsa Aceptar. Repite los pasos del 7 al 9, pero enlazando los elementos con las siguientes pginas: o Sede Principal sede_a/index.html o Nosotros nosotros.html o Contacto contacto.html o Noticias noticias.html Haz clic fuera de la lista, en la lnea siguiente. Si no puedes salir de la lista, sitate en el ltimo elemento y pulsa dos veces Enter. Escribe un texto donde ir el ttulo de la seccin, por ejemplo Ttulo. Convirtelo en un Ttulo 2 (<h2>). Cambia de lnea, y escribe un texto de ejemplo, como Aqu ir el texto. Convirtelo en un Prrafo, en el mismo desplegable. Estos dos elementos los hemos colocados para hacernos una idea de lo que ir en la pgina, pero los cambiaremos para cada una. Cambia de lnea y escribe el texto del pie, Todos los derechos reservados. El smbolo lo puedes insertar a travs del men Insertar Caracteres y smbolos.... Sin cambiar de lnea, en la barra de formatos, en el primer desplegable, elige Contenedor genrico (DIV). Cambia al modo de edicin de Cdigo fuente. Vamos a encerrar la parte del encabezado en una divisin. Escribe la apertura de la etiqueta (<div>) antes de la etiqueta <h1>. Escribe el cierre de la etiqueta (</div>) tras el cierre de la lista (</ul>). En la pgina tenemos ahora dos divisiones, una para el encabezado y otra para el pie. Crea otra para el contenido, que englobe al ttulo 2 y al prrafo. Para acabar, vamos a aadir el enlace a la hoja de estilos. Vuelve al modo de edicin normal. En la barra de redaccin, pulsa en CSS. Despliega el men de la izquierda y elige Elem. Enlace. En el campo URL escribe estilo.css y pulsa en Crear hoja de estilos. Pulsa Aceptar. En la barra de redaccin, pulsa Guardar. Cuando te pida el ttulo, escribe el nombre del colegio y pulsa Aceptar. Asegrate de que eliges la carpeta sitio_itsi para guardarla, cmbiale el nombre por base.html y pulsa Guardar.

11. 12. 13.

14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26.

Una vez creada, visualiza la pgina con un navegador. Puedes pulsar F5 desde KompoZer o hacer doble clic directamente sobre el archivo

Pginas bsicas
Partiendo de la pgina que hemos creado, vamos a crear una pgina sencilla. La idea es tener pginas con algunos elementos, como texto, para poder comenzar con el diseo. Como bsicamente se trata de introducir texto, lo haremos mucho ms rpido utilizando el editor de KompoZer. Vamos a comenzar por la pgina index.html.

Como tenemos una pgina que nos sirve de plantilla (base.html) vamos a utilizarla. La abrimos, y en men Archivo seleccionamos Guardar como, y le damos el nombre index.html. De este modo tenemos una pgina con la misma estructura que la pgina base. Slo nos queda cambiar el contenido de la divisin central. Comenzamos por el ttulo de la seccin. Como estamos en la pgina inicial, y trata de ser una web amistosa, vamos a darle la bienvenida al usuario. Por ejemplo, lo cambiamos por Bienvenidos a la web del ITSI! Al estar en la pgina inicial, vamos describir brevemente qu puede encontrar el usuario en nuestra pgina. Recuerda que la idea principal es que los usuarios visiten nuestra galera de fotos, que pensbamos dividir en cinco categoras. De momento, crearemos el enlace, utilizando una lista como con el men. Por ahora vamos a dejar el enlace provisional, enlazando slo con # (<a href="#">Enlace</a>). Por ejemplo, esto es lo que hemos introducido en el contenido del index.html, vindolo en el modo de edicin de etiquetas de KompoZer:

La otra pgina que vamos a crear es nosotros.html. En ella hablaremos un poco de nuestra Institucin. Como antes, partimos del archivo base.html, que guardaremos como nosotros.html, y cambiaremos el contenido:

Compromiso Organcense en grupos de dos estudiantes. Dentro del grupo deben seleccionar un tema para el diseo del sitio web que ser el proyecto final del perodo, y que de ahora en adelante debern desarrollar a la par con lo visto en clase. Una vez seleccionado el tema. Debern presentar un trabajo escrito con lo siguiente: 1. Tema seleccionado. Explique brevemente el por qu del tema y la importancia que tiene para usted. 2. Organizacin del tema (secciones). Describa cules sern las secciones que conformarn su sitio web. 3. Organizacin del sitio (estructura de directorios y archivos que conformarn su sitio web, segn lo explicado en este taller). 4. Elabore un bosquejo sencillo con el diseo de su sitio web, en donde aparezcan claramente los siguientes elementos: encabezado, men, pie de pgina. Sea creativo. Este informe deber ser entregado en la siguiente clase.