Pagina web HTML

http://inserweb.comeze.com

17/07/2012 Silvano Rojas Castillo Ingenieria en informatica IPchile

Indice
Titulo n de pagina

HTML webhost________________________________________________________3 La WEB Mapa__________________________________________________________4 Inicio______________________________________________________________________5 Paginas amigas__________________________________________________________6 Preguntas frecuentes___________________________________________________7 Servicios__________________________________________________________________8 Acerca de_________________________________________________________________9 Contacto_________________________________________________________________10 Mapa en la web_________________________________________________________11 La estructura___________________________________________________________12 El codigo php___________________________________________________________13 Codigos menu__________________________________________________________14 Efecto fade - los links_________________________________________________15 Acordeon_______________________________________________________________16 jQzoom_________________________________________________________________17 Slide_____________________________________________________________________18 Bordes redondeados_________________________________________________19

Silvano Rojas Castillo Pagina web en HTML

HTML
HTML, siglas de HyperText Markup Language (lenguaje de marcado de hipertexto), hace referencia al lenguaje de marcado predominante para la elaboracin de pginas web que se utiliza para describir y traducir la estructura y la informacin en forma de texto, as como para complementar el texto con objetos tales como imgenes. El HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<,>). HTML tambin puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.1 1: wikipedia

Webhost
La pagina web se encuentra alojada en uno de los servidores de webhost.com

Silvano Rojas Castillo Pagina web en HTML

La web
La tematica de la pagina web se enfoca en una empresa ficticia llamada inSerweB. Mostrando en sus paginas las actividades y servicios que ofrece dicha empresa. Para el desarrollo de la web se utilizaron distintos codigos y librerias que hacen mas atractiva la forma en que se distribuye la informacion, lo cual provoca que sea mas amigable al usuario.

Mapa

Silvano Rojas Castillo Pagina web en HTML

Inicio
La pagina inicial muestra algunas de los servicios que ofrece la empresa. El link es http://inserweb.comeze.com/ . Parte del codigo. La pagina inicial fue escrita en un principio en html, usando tablas para ubicar el contenido en pantalla, utiliza un script en jquery para dar un efecto de entrada, ademas de estilos css para el menu principal que se repite en todas las demas paginas.

Silvano Rojas Castillo Pagina web en HTML

Paginas amigas
Esta pagina presenta al publico las paginas asociadas a la empresa. La direccion es http://inserweb.comeze.com/amigas.html/ Esta pagina contiene estilos css para el menu principal y script y librerias de Jquery para agrupar informacion en forma de acordeon.

Silvano Rojas Castillo Pagina web en HTML

Preguntas frecuentes
En esta pagina se muestran los comentarios y preguntas del publico. El link es http://inserweb.comeze.com/faq.html

La pagina fue programada usando los estilos css definidos como estandar, ademas de un script de redes sociales (facebook) el cual premite escribir comentarios en tiempo real e integrarlos de manera inmediata a la pagina.

Silvano Rojas Castillo Pagina web en HTML

Servicios
En esta pagina se presenta al cliente los servicios que la empresa entrega.

La direccion es http://inserweb.comeze.com/servicios.html

La pagina servicios fue programada con un script en javascript llamado zoomlt el cual aumenta el tamao de la imagen al pasar el cursor sobre ella.

Silvano Rojas Castillo Pagina web en HTML

Acerca de.
En esta pagina se presenta formalmente la empresa. La direccion es: http://inserweb.comeze.com/acerca.html

Esta pagina contiene aparte de los codigos html habituales , un slideshow en Jquery, descargado de internet y modificado para los fines de explicacion y presentacion de la empresa

Silvano Rojas Castillo Pagina web en HTML

Contacto
Contacto .html es la pagina donde se puede contactar a la empresa, a traves de un iframe que contiene el formulario. El link es http://inserweb.comeze.com/contacto.html El codigo de envio esta en php y fue descargargado de internet. Ademas esta pagina contiene otro iframe de google maps el cual muestra la direccion de la empresa, tambien se agrego el script de comantarios de facebook.

Silvano Rojas Castillo Pagina web en HTML

Mapa en la web
En esta pagina se puede apreciar el mapa de la web, cun la funcion zoomer (libreria de Jquery), el cual agranda la imagen de manera que muestra un zoom de ella en el lugar que se desliza el cursor. La direccion es: http://inserweb.comeze.com/mapa.html

Silvano Rojas Castillo Pagina web en HTML

La estructura
La compocicion de las paginas es la siguiente: <html> <head> </head> <body> (en el body se crea una tabla general que contiene la pagina web) <table> (esta tabla es divida en 3 filas) <tr> <td> (aqui se ubica el banner y el menu) </td> </tr> <tr> <td> (este el cuerpo general de la pagina) </td> </tr> <tr> <td> (aqui se ubica el pie de pagina) </td> </tr> </table> </body> </html> Todas las paginas se conforman de la misma estructura, cambiando la cantidad e columnas y filas de la tabla general, dependiendo de la necesidad de la pagina. La pagina web esta optimizada para Chrome o firefox, en Internet explorer algunos estilos css no funcionan.

Silvano Rojas Castillo Pagina web en HTML

El codigo PHP
Este es el codigo de envio al email especificado en la segunda linea, el protocolo usado para enviar el correo es STMP.

Silvano Rojas Castillo Pagina web en HTML

Codigos

El menu principal son listas ordenadas y desordenadas, parte del codigo:

Las listas contienen los diferentes link de las paginas internas de la web. Las listas se encuentran en un contenedor <div> que tiene la clase cssmenu que es refenciada de css/menu.css el cual contiene el estilo que hace que el menu parezca ser dinamico.

Silvano Rojas Castillo Pagina web en HTML

El efecto fade
Primero se hace referencia a la libreria de javascript en la cabezera.

Luego en un contenedor <div> se llama a la clase micontenedor, la que tiene el efecto de entrada. <div id="micontenido" style="display:none;"> el contenido de la pagina va aca. </div> Al cerrar el contenedor se debe poner el codigo de javascript que contiene micontenedor Este script contiene el efecto fadeIn que muestra el inicio de la pagina desde negro.

Los links
Todo link de la pagina simula ser un boton con bordes redondeados . El estilo se encuentra en estilo.css, el cual debe ser referenciado en la cabezera. La estructura del css es:

Silvano Rojas Castillo Pagina web en HTML

La manera de llamar las clases es crear un link y poner el nombre de la clase en el.

por ejemplo, en la linea anterior se creo un link a contacto.html con la case boton medio verde, el cual se ve asi:

Este estilo css funciona tanto en firefox como en chrome , en internet explorer los bordes redondeados se pierden quedando cuadrados.

Acordeon

Para el efecto acordeon se descarga la libreria de easyAccordeon

Silvano Rojas Castillo Pagina web en HTML

Para el efecto acordeon se crea un contendor con el id accordion-2 que es llamado desde css, el cual contiene el estilo. Ademas son llamadas las librerias de jquery que estan previamente descargadas que contienen la velocidad.

JQzoom
El efecto JQzoom se descarga desde una libreria jquery y se crea un contenedor con las imagenes y links que vamos a mostrar.

Silvano Rojas Castillo Pagina web en HTML

Al cerrar el contenedor se llaman los script de javascript, que contienen los efectos de animacion. Quedando nuestras imagenes asi:

Efecto Slide

Se crea un contenedor el cual llama la clase que contiene los estilos y los script que generan el movimiento

Silvano Rojas Castillo Pagina web en HTML

Bordes redondeados
Los bordes redondeados son estilos guardados en css los cuales provocan el bode redondo y el estilo de letra que se desea.

Parte del codigo css es:

Aqui se crean 3 distintos tipos de estilos que contienen colores diferentes, la forma de llamar el estilo es usandolo en un contenedor o en alguna tabla, o donde se desee.

Silvano Rojas Castillo Pagina web en HTML