Como hacer una página web

 

Como hacer una pagina web¿ Como hacer una página web ?

En esta sección vamos a realizar nuestra propia pagina web para posteriormente subirla. Empezaremos con elementos sencillos para ampliando poco a poco con actividades algo mas complejas.

Primeros pasos.

Realizar las siguiente tareas usando el manual del MEC que tenemos en la dirección http://www.ite.educacion.es/formacion/materiales/107/cd/index.htm. Para nuestros alumnos del centro, lo tenéis en la carpeta home/aulas/informatica/pagina web. Crear una carpeta en vuestro ordenador que se llame web y dentro de ella otra con el nombre imagenes. ( imágenes lleva tilde, ya sabemos que los nombres de las carpetas es mejor ponerlas sin tildes, sin ñ, sin espacios, etc ). También tenemos que crear un archivo que se llame index.html para hacer las tareas que detallo a continuación. Para hacerlas, usaremos el programa Kompozer.

    • Realizar una página que contenga texto de diferentes estilos y color.
    • Incorpora imágenes, listas numeradas y un enlace a una web cualquiera
    • Insertar una tabla del estilo a la del manual
    • Usar el editor de CSS para añadir dos estilos diferentes. Sólo intentarlo, porque las CSS tienen una sección aparte
    • Insertar el formulario de google para realizar búsquedas en internet
    • Usar el compresor del ordenador y comprimir una carpeta cualquiera que contenga archivos. Guardarla en la carpeta web
    • Usaremos un menú de navegación por iframe. Iframe es una técnica para que salga una ventana con los contenidos de otra página y lo vamos a usar para crear un menú de navegación. Para ello vamos a proceder de la siguiente forma:
      1. Creamos una nueva página que se llame enlaces.html y la guardamos en la misma carpeta que index.html ( la principal )
      2. En esa página, ponemos Home con un enlace a la pagina principal, Fotos con un enlaces a otra página que se llame fotos.html y google con un enlace a la web de google
      3.  Insertamos el código al inicio de cada página que queramos mostrar los enlaces. En Kompozer se hace como Insertar-> html-> y en la ventana que se abre poner :  <iframe src="enlaces.html" width="600" height="100" align="center"></iframe>.  Comprobar que funciona.
  1. Una vez terminadas las prácticas, pasamos a hacer el proyecto final. Elegir el tema apropiado para la Web. Puede ser alguno vinculado con vuestra familia o entorno, de forma que si vuestra familia tiene un negocio, podemos hacerle la Web
  2. La estructura de la Web debe ser:
    1.  Hacer una carpeta en el escritorio con el nombre Web.
    2. Dentro de la carpeta Web, creamos otra carpeta con el nombre imagenes.
    3. Según necesitamos mas elementos haremos mas carpetas para tener todos los archivos ordenados.
    4. El archivo principal debe llamarse index.html. Esto es necesario porque si lo subimos a Internet, al  escribir el nombre del dominio, el servidor busca el archivo index y si no lo encuentra da un error. Esto es al escribir tecnologia-informatica.es el servidor busca el archivo index.html y lo muestra en el navegador. Si nosotros tenemos como archivo principal miweb.html  el servidor dará un error porque no sabe que es esto lo que debe mostrar.
  3. Todas las imágenes que se suban no deben tener mas de 60kb. Excepcionalmente podemos subir algunas mas pesadas pero esto afecta a la hora de cargar las páginas

  4. Los nombres de los archivos y carpetas no deben tener la letra ñ, acentos o espacios entre letras para evitar posible errores con los navegadores

En esta sección vamos a trabajar para hacer nuestra Web propia con los elementos necesarios para una buena presentación

 Otras prÁcticas 1º.  Mapas de Imágenes

1.1 Mapas de imagen con el programa gráfico Gimp

¿Cómo se hace?

En el curso de GIMP dentro de la sección Animación y web  tenemos como hacer un mapa de imagen. Es el primer paso que tenemos que dar para crear una portada, si lo que queremos es una imagen que tenga zonas donde al hacer clic sobre la misma se acceda a diferentes lugares de la web. Por ejemplo, los dedos de una mano pueden ser activados para ir a 5 páginas diferentes.

Sigue estos pasos


  1. Abre la imagen donde quieras poner las zonas activas con el Gimp y ve al apartado Filtros -> Web -> Mapa de imagen. Al abrirse una ventana nueva, verás la imagen junto a las herramientas necesaria para la selección del área que te interesa

  2. Toma la forma geométrica apropiada, llevarla sobre la imagen y al terminar el programa te pedirá la url. Añade la dirección web, que puede ser una página de nuestro proyecto u otra externa

  3. Si es una página interna, especifica solo el nombre y la ruta relativa. Por ejemplo, si tenemos un archivo que se llama fotos.html dentro de la carpeta imagen, debemos poner /imagen/fotos.html en el apartado url

  4. Tener cuidado. En la versión actual, cuando tomamos la figura de polígono irregular, al terminar hay que hacer clic dos veces para que salga el menú de la url

  5. Cuando ya tengas todas las zonas creadas y sus correspondientes enlaces, ve a Archivo -> Guardar como y guárdalo con un nombre acabado en map.

  6. Mira el archivo map creado. Copia su código fuente y llevarlo a tu página

  7. Un problema típico es que al llevar el código, la imagen no se ve. Esto es debido porque hay que ajustar la ruta de la imagen , es decir, en la línea donde pone <img src=”/imagen.jpg” width=”200″ height=”246″ border=”0″ usemap=”#map” /> , la ruta de la scr debe ser la adecuada porque ahí es donde va a buscar la imagen. En este caso, lo busca en la misma carpeta. Veamos algunos ejemplos: Si la imagen ( supongamos que se llama paisaje.jpg está en la carpeta imagenes, entonces la ruta para que se cargue debe ser  <img src=”/imagenes/paisaje.jpg” ….

2º Práctica.  Galería de Imágenes

Es frecuente encontrar galerías de imágenes en las web y el propósito de todo programador es hacer que sean atractivas al usuario. Existen multitud de scripts que podemos incorporar a nuestra web y uno de los mas populares es Lightbox.

Vamos a seguir un manual que he traducido del creador para incorporarlo a nuestra web. Por tanto, ya tenemos que tener preparadas las fotos ( de 7 a 10 ) que van a componer nuestra galería. Todo viene explicado en Galería con Lightbox.

3º Práctica. Formulario de contacto

Para que los visitantes puedan mandar sugerencias o solicitar información, tenemos que tener un formulario de contacto para que, sin mostrar nuestro e-mail, tengamos un vínculo de comunicación con los interesados. Tenemos dos formas

a) Usar servicios externos tipo Jotform por el cual, nos damos de alta e incorporamos el código facilitado

b) usamos PHP. Hay infinidad de script para  ello. Podemos usar uno de ventana emergente como el siguiente:

Formulario de contacto en PHP

4º PRÁCTICA   archivo .htaccess

 2º Paso. Subir un archivo de configuración .htaccess. Este archivo es utilizado por Apache ( programa del servidor ) para hacer determinadas tareas, por ejemplo mostrar una página de error cuando se solicita una página que no existe.Para ello, procedemos de la siguiente manera

  1. Creamos con el editor de textos sencillo del sistema operativo, en nuestro caso gedir, un archivo que se llame .htaccess.
  2. Lo abrimos y escribimos   ErrorDocument 404 /404.html
  3. Lo cerramos y lo subimos al directorio raíz
  4. Creamos con komposer otra página que se llame 404.html donde vamos a poner algo como ” Lo sentimos, pero la página no existe ..”  Y algún texto o imagen que dirija a la página principal
  5. Subirla a nuestro servidor

4º Práctica. Añadir un  favicon.ico en tu web.

Si queremos mostrar una pequeña imagen al lado de la url de  nuestra web, lo primero que tenemos que hacer es crear una imagen jpg  que queremos mostrar ( nuestra cara, nuestro avatar, un icono, etc ). Tiene que tener una dimensión de 16 x 16 px y se tiene que llamar favicon.ico. Guardarlo en la carpeta imagenes

Después  añadir en el head este código

<link href="imagenes/favicon.ico" rel="shortcut icon" type="image/x-icon">

5º Práctica.  Ajustar el texto al dispositivo

Ya sabemos que existen muchos dispositivos para mostrar nuestra web, pc, tablet, móvil. La vía más rápida si recurrir a re-diseñar nuestra web para mostrarla en distintos dispositivos es añadir está linea en el head:

<meta name=viewport content=”width=device-width, initial-scale=1″>

Probar con vuestro  móvil.

6º Práctica.  Fuentes de google

Cuando elegimos una fuente determinada para mostrarla en el navegador, se asume que el navegador residente en la computadora tiene esa fuente. Si no la tiene, mostrará otra por defecto. Lo cierto es que hay fuentes muy atractivas para darle un look especial a nuestra web. Para ello vamos a usar algunas de google Font. Para añadirla a nuestra web, seguir los  pasos  que se muestran  al final de  http://www.tecnologia-informatica.es/internet/hojas-de-estilo/

7º Práctica  .Añadir un  Logo

Dentro de la misma sección tenemos actividades sobre logos. Realiza uno a tu gusto para dar el título a tu Web

 Animaciones

En la sección de animaciones tenemos varios ejemplos de como poner texto y figuras en movimiento. Realiza varias para incorporarlas a la Web con la temática relativa a la misma. Para esta actividad tienes que guardar todas las imágenes que emplees en la carpeta practicas ( créala dentro de la carpeta Web ). Dentro de esa carpeta practicas   puedes crear tantas carpetas como quieras de forma que para la animación 1  puedes crear la subcarpeta practica1, …

En primer lugar, ya vimos el código html con las etiquetas mas importantes. Después de verlas, el siguiente paso es conocer y aplicar CSS que vamos a utilizar durante todo nuestro proyecto. Para ello, hay que hacer las prácticas que tenemos en el curso relativo al archivo de Antonio Gala. Una vez finalizado, ver las características mas importantes en la sección

8º Práctica. Hojas  de estilo

Las hojas de estilo o CSS  son un conjunto de instrucciones adjunto a la página web ( a veces en la misma página ) , que se asocia aspectos  como  el  tipo de  fuente , tamaño de letras,  color de texto,  caracteristicas del  fondo, etc. La ventaja radica en que si modificamos algún detalles de la  hojas de estilo, la apariencia de la página web cambia automáticamente. Si tenemos 100 páginas que llaman a la misma hoja de estilo, al cambiar ésta, cambia las 100 páginas web. Veamos como se trabaja con ellas.

  1. 1º Realizar la prácica que hay en el curso Página web. Bajarse el archivo comprimido sobre Antonio gala y realizar las tareas que se indican.
  2. Vamos a costruir una hoja de estilo para nuestra web. Para ello
  • Abrir el Kompozer y seleccionamos el icono CascadeS ( el icono de la paleta de colores )
  • Al abrirse la ventana, pinchamos en el icono de la paleta de colores y pinchamos en Hojas de estilo enlazada. De esta manera creamos un archivo que va a contener todos los estilos de la página
  • Volvemos al menú anterior y creamos una regal de estilo. Seleccionar  “Estilo aplicado a todos los elementos de la clase “. Observar que siempre emnpieza por un punto. No tocarlo y escribir un nombre a continuación del punto. Después pinchar en Crear estilo y completar cada uno de los campos de ese estilo
  • La pägina debe contener varios estilos ( podeis verlos en el apartado de hojas de estilos ). Es necesario que incluya una lista usando una imagen para cada línea. Si hay problemas a la hora de añadirlo, ver lista de estilo

9º Práctica. Javascript

1º Smooth.pack.js

Este archivo java, “reclamado ” desde la cabecera de la página, nos va a permitir movernos dentro de una página que tenga marcadores con movimientos suaves, parecidos a los que haría un ascensor de un rascacielos.

El objetivo del curso no es entender el funcionamiento del archivo, sino como aplicarlo

  1. Bajarse el archivo del siguiente enlace
  2. En la cabecera de la web, antes de </head> añadimos
    <script type=“text/javascript” src=“smooth.pack.js”></script>
  3. En nuestra página debe hacer enlaces a marcadores, del tipo
  1. <a href=“#pie” name=“arriba”>Ir a pie de pagina</a>
  2. <p> Aqui iría el texto </p>
  3. <a href=“#arriba” name=“pie”>Ir a la cabecera</a>

En la primera línea tenemos un enlace que va a un marcador ( de ahí el signo # ).

En la 2º el texto, que puede ser tan largo como quiera

En la tercera otro enlace interno al marcador posicionado en la Web

Si dentro de vuestra página hay una sección del tipo FAQ ( Frequently Asked Questions ) podeis añadir este archivo y veréis que efecto mas bonito. Comprobarlo en el ejemplo que viene junto al smooth.pack dentro del archivo comprimido

Iframe

Con esta etiqueta de html conseguimos incorporar una pagina dentro de otra. La utilidad es la siguiente

Imaginemos que estamos construyendo una Web con diferentes secciones. Si ponemos los enlaces en cada una de ellas para que se acceda desde cualquier página a otra de la Web puede ocurrir lo siguiente.

Terminado el trabajo, nos damos cuenta que deseamos añadir otra página. ¿ Qué hacemos ?. Pues ir página por página añadiendo el dichoso enlace.

Una de las soluciones para html es el iframe, o sea, añadir un pedazo de pagina dentro de otra y llamarla siempre desde todas las páginas. Si queremos modificar uno de los enlaces, solo vamos al trozo de página que tiene los enlaces y lo cambiamos

El código html es

<iframe src=”/enlaces.html” width=”100%” height=”60″>
<p>Su navegador no soporta iframes</p>
</iframe>

La primera línea es el llamamiento a la página. Cuando hablamos de trozo de página entiéndase que es un documento donde se va a ver el 100 % de su anchura 60 pixel de alto

La 2º línea nos mostrara un mensaje de error en caso de que el navegador no soporte iframe

Algunos atributos para esta etiqueta son

align. Esta es la alineación de la página a incrustar dentro de la principal . Puede ser

left – > para Izquierda
right → Para la derecha
top – > arriba
middle → en el medio
Frameborder . Especifica si se quiere borde alrededor del iframe. 1 para Si y 0 para no

height Especifica la altura del iframe

marginheight Especifica los pixel de margen para la altura

marginwidth Especifica los pixel de margen para la anchura

scrolling Si queremos que aparezca la barrita para movernos sobre la pagina se pone yes. En caso contrario, no. Si queremos que salga en caso de que haya contenido que no aparezca en el cuadro, se pone auto.

3º Como usar javascript para tener una imagen rotativa en la web

Ahora vamos con algo más elaborado a la hora de poner una imagen de fondo que rotará constantemente  para dar una impresión de vision 360º. Para ellos usamos unos archivos java ( que no vamos a explicar )

El ejercicio consiste en bajarse el archivo completo con la carpeta  de imágenes y java junto a dos archivos html. El primero se llama imagen-rotativa.htm. Éste archivo tiene los suficiente para que la imagen rote. Hemos puesto una de la playa. El 2º archivo index  tiene mas elementos para ampliarlos junto al ejercicio de estilos. Se puede bajar  desde imagen-rotativa

En caso de querer un cambio en la posicion del logo y del menú , tenemos que modificar los estilos de menu, que queda como .menu {float:left; padding:5px 0 0 20px;}  ( El float le cambiamos por left , antes right  y paddind de 150 a 20, que hce referencia a la distancia al margen izquierdo

En el caso deldiv logo, vamos al último .logo de la hoja de estilo y cambiamos left por right

Si queréis saber la web podemos utilizar  nixiweb.com que ofrece hosting gratuito.

Añadir un  formulario de contacto.  Utilizar el servicio de jotform para crear un formulario y añadirlo a la web.

10º Práctica. texto desplegable

En esta ocasión vamos a realizar un desplegable de forma que al cliquear en un icono, aparece un texto explicativo sobre un apartado concreto. Mejor verlo en este enlace: Desplegable

En esta ocasión usamos un archivo java , hojas de estilo css y el bloque, que contiene los siguientes elementos:

Este código corresponde al bloque 4. Para añadir un bloque 5, hay que copiar este bloque y sustituir el 4 por el 5

 

<!–añadimos un bloque mas –>

<DIV class=”tipo mensajes”>
<DIV class=”cab_tipo”>
<DIV class=”datos_tipo”>
<H3>Y esto para terminar</H3></DIV></DIV>
<DIV class=”desplegar”><A class=”bt_masdetalle” id=”title_up_4″ onkeypress=”javascript:dwh_ga(‘tarifasPage’,’informacion’,’smsCerrarLayerInformacion@t0rm0n0′, event);toggleInfo(‘detalle_4’);return false;”
onclick=”javascript:dwh_ga(‘tarifasPage’,’informacion’,’smsCerrarLayerInformacion@t0rm0n0′);toggleInfo(‘detalle_4’);return false;”
href=”#”><IMG alt=”más detalles”
src=”desplebable_archivos/bt_recoger.png”></A> <A class=”bt_masdetalle”
id=”title_down_4″ style=”display: block;” onkeypress=”javascript:dwh_ga(‘tarifasPage’,’informacion’,’smsAbrirLayerInformacion@t0rm0n0′, event);toggleInfo(‘detalle_4’);return false;”
onclick=”javascript:dwh_ga(‘tarifasPage’,’informacion’,’smsAbrirLayerInformacion@t0rm0n0′);toggleInfo(‘detalle_4’);return false;”
href=”#”><IMG alt=”más detalles”
src=”desplebable_archivos/bt_desplegar.png”></A></DIV>
<DIV class=”cajadetalle” id=”detalle_4″ style=”display: none;”>
<P><strong>Con esto terminamos</strong></P>
<P>. Ahora a probarlo vosotros, ampliar y ajustarlo a vuestras webs.</P>
<P>Mas infor en la web <a href=”http://www.tecnologia-informatica.es/”>
Tecnologia Informática</a></P></DIV></DIV>

<!– fin de bloque –>

 

Entradas recientes