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:
Creamos una nueva página que se llame enlaces.html y la guardamos en la misma carpeta que index.html ( la principal )
En esa página, ponemos Homecon un enlace a la pagina principal, Fotoscon un enlaces a otra página que se llame fotos.html y googlecon un enlace a la web de google
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.
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
La estructura de la Web debe ser:
Hacer una carpeta en el escritorio con el nombre Web.
Dentro de la carpeta Web, creamos otra carpeta con el nombre imagenes.
Según necesitamos mas elementos haremos mas carpetas para tener todos los archivos ordenados.
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.
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
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
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
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
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
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
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.
Mira el archivo map creado. Copia su código fuente y llevarlo a tu página
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:
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
Creamos con el editor de textos sencillo del sistema operativo, en nuestro caso gedir, un archivo que se llame .htaccess.
Lo abrimos y escribimos ErrorDocument 404 /404.html
Lo cerramos y lo subimos al directorio raíz
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
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
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:
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 https://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º 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.
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
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
2º 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=»https://www.tecnologia-informatica.es/»>
Tecnologia Informática</a></P></DIV></DIV>
<!– fin de bloque –>
Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.
¿ Como hacer una página web ?