Instituto Tecnolgico Superior de Lerdo

Programacin, diseo y desarrollo de un sitio web para el foro Caf Cultural Tumbao

Jos Isidro Fabela Aldaco

Agosto de 2010

ndice 1. Introduccin....5 2. Objetivo6 3. Justificacin7 4. Marco terico.....8 4.1 Redes posteriores a internet..8 4.2 Esquema de conexin a internet..9 4.3 Protocolos de internet....10 4.3.1 TCP....10 4.3.2 IP....11 4.3.3 ARP.......12 4.4 Cuadro comparativo entre sitios y pginas web.......13 4.5 Acceso a archivos FTP..14 4.6 Componentes que debe reunir un sitio web.....16 4.6.1 Conceptos relacionados con el diseo y/o desarrollo Web.16 4.7 Elementos de una pgina web....18 4.8 Aplicaciones de internet19 4.9 Tag HTML.20 4.9.1 Lista de tags......22 4.9.2 Cuadro comparativo de formato de texto y tags ms utilizadas en HTML...26 4.10 Imgenes que se utili zan en el diseo web: caractersticas..28 4.10.1 Tabla comparativa de formatos de compresin de imgenes ....28 4.11 Importancia de los enlaces dentro de una pgina web ......29 4.12 Bases de datos.......29 4.13 PHP y MySQL.....30 4.13.1 Qu es PHP?....................................................................................30 4.13.2 Qu es MySQL?................................................................................31 4.14 Una IP especial: 127.0.0.1...33 4.15 El servidor apache.....33 4.16 Macromedia Dreamweaver... ...34
2

4.17 Macromedia Fireworks.35 4.18 Inkscape..36 4.19 Proporcin urea...36 5 Desarrollo....39 5.1 Ttulo de la pgina...39 5.2 Logotipo de la pgina..39 5.3 Mapa del sitio40 5.4 Estructura del siti o40 5.5 Pgina principal42 5.6 Los colores.43 5.7 La tipografa...45 5.8 Banner....46 5.9 Cabeceras..47 5.10 Tablas...49 5.11 Imgenes de sustitucin y lbum web......52 5.11.1 Imagen de sustitucin....52 5.11.2 lbum web...55 5.12 CSS...61 5.13 Configuracin de servidor web personal63 5.13.1 Introduccin..63 5.13.2 Desarrollo..64 5.13.3 Conclusiones....69 5.14 Direccin virtual.......70 5.14.1 Introduccin..70 5.14.2 Desarrollo......71 5.14.3 Conclusiones....78 5.15 Registro de dominio....79 5.15.1 Introduccin..79 5.15.2 Desarrollo..80 5.15.3 Conclusiones....87 5.16 Redireccionamiento....88 5.16.1 Introduccin......88
3

5.16.2 Desarrollo......89 5.16.3 Conclusiones.....100 5.17 Bases de datos..101 6. Conclusiones109 7. Bibliografa110

1. Introduccin

La Internet, o red de redes ha llegado hasta nuestros das como una de las herramientas ms importantes. Indispensables, para el desarrollo.

Internet no tiene dueo ni pertenece a nadie, esto es de conocimiento de la comunidad que utiliza de manera libre esta red. El fcil manejo y prctica de esta herramienta que lleva y trae informacin nos mantiene actualizados en infinidad de sentidos: tecnologa, noticias, etctera. Un sitio web es un conjunto de pginas web, tpicamente comunes a un dominio de

Internet o subdominio en la World Wide Web en Internet. Una pgina web es un documento HTML/XHTML accesible generalmente mediante

el protocolo HTTP de Internet. Todos los sitios web pblicamente accesibles constituyen una gigantesca "World Wide Web" de informacin (un gigantesco entramado de recursos de alcance mundial). A las pginas de un sitio web se accede frecuentemente a travs de un URL raz comn llamado portada, que normalmente reside en el mismo servidor fsico. Los URL organizan las pginas en una jerarqua, aunque los hiperenlaces entre ellas controlan ms

particularmente cmo el lector percibe la estructura general y cmo el trfico web fluye entre las diferentes partes de los sitios.

Bien, el proyecto que a continuacin se mostrar a detalle es el desarrollo de un sitio web con una base de datos para el cual se utilizaron varias herramientas tales como Dreamweaver, Fireworks e Inkscape. Por otra parte se hizo uso de una base de datos MySQL y un se utiliz un servidor Apache para el alojamiento del sitio. El sitio web desarrollado es para el Foro Cultural Caf Tumbao. El sitio web proporcionar informacin acerca del lugar: un poco de historia, ubicacin, propuesta gastronmica, imgenes de lugar, calendario de actividades y una seccin para que los usuarios se pongan en contacto y reciban informacin.

El diseo del sitio web fue desarrollado con Dreamweaver, tambin se utilizaron las herramientas Inkscape y Fireworks para el desarrollo y edicin de imgenes.

Respecto a la programacin del sitio se uso el lenguaje PHP para la conexin con la base de datos MySQL. Los ficheros del sitio web fueron alojados dentro de un servidor Apache. Se decidi usar el lenguaje de programacin PHP, la base de MySQL y el servidor Apache ya que son herramientas gratuitas y muy poderosas, la gran mayora de los sitios web del mundo estn montados sobre estas plataformas. 2. Objetivo

Desarrollar un Sitio Web con 10 ligas de calidad con el objeto de proyectar una excelente imagen del Caf Cultural Tumbao al mundo a travs de la Internet.

3. Justificacin

Es indiscutible el impacto de un sitio web en la actualidad. Es importante tener presencia en la Internet para mostrar la informacin de las empresas, as como describir sus productos y servicios en forma general. As mismo es importante contar con una imagen que asegure la fortaleza de la organizacin y que nos de la seguridad de crear clientes prospecto a travs del sitio web.

La justificacin de este proyecto radica en la mejora de la calidad de la imagen del Caf Cultural Tumbao proyectndola al mundo a travs de un sitio web. La ejecucin del proyecto contribuir en un avance significativo en la proyeccin de la imagen del Caf.

El proyecto cobra especial importancia por tener entre sus objetivos la construccin, fomento, desarrollo y difusin del arte y la cultura de para la comarca lagunera, que trascienda y supere el olvido en que tanto las autoridades como la ciudadana mantienen esta situacin, para cuya solucin se hace necesario la participacin de la comunidad artstica y general por la compleja gama de dificultades que la misma problemtica actualmente presenta.

Es por estas razones que el sitio web

que

se

desarrollar

resulta

determinante en la proyeccin de la empresa al mundo, ya que a travs del sitio web se mostrar la oferta gastronmica, el trabajo de artistas locales y forneos que colaboran con el foro cultural Caf Tumbao, los talleres artsticos que se ofrecen y la cartelera de eventos que esta misma ofrece.

El dinero destinado a promover la cultura jams ser un gasto, siempre ser una inversin.

4. Marco terico

4.1 Internet y redes posteriores La Advanced Research Projects Agency Network (ARPANET por sus siglas en ingls) fue una red de computadoras creada por el Departamento de Defensa los Estados Unidos como medio de comunicacin para los diferentes organismos del pas.

En 1966 la agencia ARPA tena un programa con varias instituciones de investigacin. ARPANET surgi de la necesidad del gobierno de los Estados Unidos de encontrar una manera de acceder y distribuir la informacin en caso de una catstrofe. El objetivo de esta red es que si un centro de ordenadores fuera destruido la informacin no se parara, es decir unir varias redes separadas para que estas siguieran funcionando en caso de que alguna fuera destruida.

Este proyecto de ARPA gradualmente fue evolucionando de la teora a proposiciones reales de construir esas redes. En 1968, ARPA envo una peticin a varias instituciones pidiendo ofertas para crear la primera red de rea extensa (WAN). La firma BBN gan la oferta para disear 4 mquinas procesadoras de mensajes que crearan comunicaciones abiertas entre los cuatro dispositivos diferentes, y en cuatro sistemas operativos distintos.

En 1970 ARPANET haba crecido hasta 15 nodos con 23 ordenadores hosts (centrales). Un ao mas tarde Ray Tomlinson, escribe el software bsico de envo-recepcin de mensajes de correo electrnico, impulsado por la necesidad que tenan los desarrolladores de ARPANET de un mecanismo sencillo de coordinacin. poco mas tarde amplia su valor aadido con un primer programa de correo electrnico para relacionar, leer selectivamente, almacenar, reenviar y responder a mensajes.

En 1970 el Network Working Group (NWG) liderado por S.Crocker acab el protocolo host a host inicial para ARPANET, llamado Network Control Protocol (NCP, protocolo de control de red).

En 1972 ARPA cambia su denominacin y es conocida de alli en mas como DARPA ( Defense Advanced Research Projects Agency ) y se realiza la primera demostracin pblica de la nueva tecnologa de ARPANET , las primeras conexiones internacionales se realizan un ao mas tarde entre el University College of London en Inglaterra y the Royal Radar Establishment in Norway.

En 1974 dos investigadores, Vint Cerf (Stanford University) y Robert Kahn (BBN), redactan un memoranda titulado "A Protocol for Packet Nertwork Internetworking", donde explicaban como podria resolverse el problema de comunicacin entre los diferentes tipos de computadoras. 4.2 Esquema de conexin a la Internet

Ilustracin 1. Esquema de conexin a Internet

La conexin

Internet es

el

mecanismo

de

enlace

con

que

una computadora o red de computadoras cuenta para conectarse a Internet, lo que les permite visualizar las pginas web desde un navegador y acceder a otros servicios que ofrece esta red. Las empresas que otorgan acceso a Internet reciben el nombre de proveedores (ISP), por ejemplo:
9

Ya.com, Jazztel, Telefnica de Espaa, Tooway y Fon son cinco proveedores espaoles.

En Venezuela existen CANTV e Inter (Venezuela).

En Mxico, Prodigy Internet de Telmex; en Estados Unidos, America Online (AOL) como el ms exitoso entre muchsimos otros; en Argentina, Arnet y Telefonica.

En Chile VTR, Telefnica Chile, Telefnica del Sur, Telmex, Movistar, Entel, Claro Chile, GTD Manquehue,CMET. 4.3 Protocolos de internet

4.3.1 TCP

Transmission

Control

Protocol (en

espaol Protocolo

de

Control

de

Transmisin) o TCP, es uno de los protocolos fundamentales enInternet. Fue creado entre los aos 1973 y 1974 por Vint Cerf y Robert Kahn.

Muchos

programas

dentro

de

una

red

de

datos

compuesta

por computadoras pueden usar TCP para crear conexiones entre ellos a travs de las cuales puede enviarse un flujo de datos. El protocolo garantiza que los datos sern entregados en su destino sin errores y en el mismo orden en que se transmitieron. Tambin proporciona un mecanismo para distinguir distintas aplicaciones dentro de una misma mquina, a travs del concepto de puerto. TCP da soporte a muchas de las aplicaciones ms populares de Internet, incluidas HTTP, SMTP, SSH y FTP.

Las caractersticas del TCP son:

Orientado a la conexin: dos computadoras establecen una conexin para intercambiar datos. Los sistemas de los extremos se sincronizan

10

con el otro para manejar el flujo de paquetes y adaptarse a la congestin de la red.

Operacin Full-Duplex: una conexin TCP es un par de circuitos virtuales, cada uno en una direccin. Slo los dos sistemas finales sincronizados pueden usar la conexin.

Error Checking: una tcnica de checksum es usada para verificar que los paquetes no estn corruptos.

Acknowledgements: sobre recibo de uno o ms paquetes, el receptor regresa un acknowledgement (reconocimiento) al transmisor indicando que recibi los paquetes. Si los paquetes no son notificados, el transmisor puede reenviar los paquetes o terminar la conexin si el transmisor cree que el receptor no est ms en la conexin.

Control de flujo: si el transmisor est desbordando el buffer del receptor por transmitir demasiado rpido, el receptor descarta paquetes.

Servicio de recuperacin de Paquetes: el receptor puede pedir la retransmisin de un paquete. Si el paquete no es notificado como recibido (ACK), el transmisor enva de nuevo el paquete.

4.3.2 IP

Una direccin IP es una etiqueta numrica que identifica, de manera lgica y jerrquica, a una interfaz de un dispositivo (habitualmente una computadora) dentro de una red que utilice elprotocolo IP (Internet Protocol), que corresponde al nivel de red del protocolo TCP/IP. Dicho nmero no se ha de confundir con la direccin MAC que es un nmero hexadecimal fijo que es asignado a la tarjeta o dispositivo de red por el fabricante, mientras que la direccin IP se puede cambiar. Esta direccin puede cambiar 2 3 veces al da; y a esta forma

11

de

asignacin

de

direccin

IP

se

denomina

una direccin

IP

dinmica (normalmente se abrevia como IP dinmica).

Los sitios de Internet que por su naturaleza necesitan estar permanentemente conectados, generalmente tienen una direccin IP fija (comnmente, IP fija o IP esttica), es decir, no cambia con el tiempo. Los servidores de correo, DNS, FTP pblicos, y servidores de pginas web necesariamente deben contar con una direccin IP fija o esttica, ya que de esta forma se permite su localizacin en la red.

4.3.3 ARP

Es un protocolo de nivel de red responsable de encontrar la direccin hardware (Ethernet MAC) que corresponde a una determinada direccin IP. Para ello se enva un paquete (ARP request) a la direccin de difusin de la red (broadcast (MAC = xx xx xx xx xx xx)) que contiene la direccin IP por la que se pregunta, y se espera a que esa mquina (u otra) responda (ARP reply) con la direccin Ethernet que le corresponde. Cada mquina mantiene una cach con las direcciones traducidas para reducir el retardo y la carga. ARP permite a la direccin de Internet ser independiente de la direccin Ethernet, pero esto slo funciona si todas las mquinas lo soportan.

12

4.4 Cuadro comparativo entre sitios y pginas web

SITIOS WEB

PAGINAS WEB

Se localiza dentro de la WWW. Puede contener grficos, texto, audio, video, y otros materiales dinmicos o estticos.

Se localiza dentro de un sitio Web. Se considera un documento del sitio Web, en el cual, la informacin aparece mediante video, audio, texto, etc. Home Page es la pgina Web que aparece cuando introducimos el nombre de dominio de una pgina Web en el navegador. Todas las pginas Web pertenecen a un sitio Web.

Home Page es el primer documento que ve el usuario cuando entra a un sitio Web.

Normalmente esta formado por varias paginas Web. Es gestionado por un individuo, una compaa o una organizacin.

13

4.5 Accesos a archivos FTP

Protocolo de Transferencia de Archivos es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red TCP (Transmission Control Protocol), basado en la arquitectura cliente-servidor. Desde un equipo cliente se puede conectar a un servidor para descargar archivos desde l o para enviarle archivos, independientemente del sistema operativo utilizado en cada equipo.

Ilustracin 2. Acceso a archivos FTP

Formas de acceder:

Se hace referencia en la barra de direcciones que es un archivo ftp escribiendo ftp://

Se ingresa el usuario y la contrasea de la siguiente manera: ftp://usuario:contrasea@servidor

En el men Archivo, haga clic en Abrir sitio Web.

14

En el cuadro de dilogo Abrir sitio Web, haga clic en la ficha Sitio FTP.

Proporcione la informacin siguiente:

Servidor Escriba el nombre del servidor, cuyo formato puede ser ftp://server.

Puerto Si el administrador del servidor FTP le ha asignado un nmero de puerto que no sea el 21, cambie este valor.

Modo pasivo Active esta casilla de verificacin si hay un firewall entre su equipo y el servidor FTP.

Directorio Escriba el nombre de la carpeta en la que desee abrir los archivos.

Inicio de sesin annimo Active esta casilla de verificacin si el servidor FTP no le exige que inicie sesin para tener acceso a los archivos, y desactvela para escribir un nombre de usuario y una contrasea.

Nombre de usuario y Contrasea Escriba las credenciales que le proporcion el administrador del servidor FTP.

Haga clic en Abrir.

15

4.6 Componentes que debe reunir un sitio web

Son varios factores los que debe reunir un sitio web. A continuacin se mencionan los componentes elementales que debe contener un sitio web.

Una pgina Web est compuesta por uno o varios documentos html relacionados entre s mediante hipervnculos (enlaces). Adems estos documentos pueden contener otros elementos como pueden ser imgenes, sonidos, animaciones multimedia, aplicaciones

4.6.1 Conceptos relacionados con el diseo y/o desarrollo Web.

Pgina Web: Documento realizado en HTML y que es parte de un sitio Web. Aparte del HTML se pueden utilizar otros lenguajes complementarios como PHP, ASP, Javascript

Sitio Web: Pgina principal y sus otras pginas, grficos, documentos, multimedia y otros archivos asociados que se almacenan en un servidor Web o en el disco duro de un equipo.

HTML: (Lenguaje de marcado de hipertexto) Lenguaje estndar de marcas empleado para documentos del World Wide Web. Hipervnculo: Al hipervnculo se le suele llamar enlace Web o en su versin anglosajona link. Un hipervnculo es una conexin de una pgina a otro destino como, por ejemplo, otra pgina o una ubicacin diferente en la misma pgina.

El destino es con frecuencia otra pgina Web, pero tambin puede ser una imagen, una direccin de correo electrnico, un archivo (como por ejemplo, un archivo multimedia o un documento de Microsoft Office) o un programa. Un hipervnculo puede ser texto o una imagen.

Lenguaje de programacin: Lenguaje con el que est desarrollada una pgina Web.
16

Editor: Programa utilizado para crear pginas Web sin la necesidad de tener que aprender el lenguaje. Ejemplos: M. Front Page 2000 y Macro-media Dreamweaver. Servidor: Mquina conectada a Internet que entre otros servicios- ofrece albergue para pginas Web haciendo que estn accesibles desde cualquier punto de Internet.

Cliente FTP: Programa que permite conectarse al servidor para publicar pginas Web.

Hosting: Hospedaje Web.

Dominio: Direccin Web asociada a una pgina Web.

ISP: En el mbito del desarrollo de sitios web, se puede decir que un ISP es un proveedor de servicios para web. Los diferentes servicios que pueden ofrecer son: conexin a Internet, registro de dominio, hospedaje de sitios web, servicios de contadores de servicios, libros de visitas gratuitos, estadsticas para web, entre otros.

URL: (Universal Resource Location / Localizador de recursos universal) Cadena que proporciona la direccin de Internet de un sitio Web o un recurso del World Wide Web, junto con el protocolo mediante el cual se tiene acceso al sitio o al recurso.

El tipo ms comn de direccin URL es http://, que proporciona la direccin de Internet de una pgina Web. Otros tipos de direccin URL son gopher://, que proporciona la direccin de Internet de un directorio Gopher, y ftp://, que proporciona la ubicacin de red de un recurso FTP.

Ejemplos: http://www.mitecnologico.com , http://www.google.com

Applets: Programas desarrollados con Java para mejorar la presentacin de las pginas Web que realizan animaciones, juegos e interaccin con el usuario.
17

Frames (marcos): reas rectangulares que subdividen las ventanas de algunas pginas Web, cada una de las cuales contiene un documento de hipertexto independiente de los dems.

Webmaster: Un webmaster es el encargado de crear, disear, estructurar, maquetar, publicar, promocionar y mantener un sitio web. Tablas: Deben utilizarse unicamente para datos tabulados. Nunca para maquetar.

Banner: Elemento grfico con forma rectangular, normalmente animado, cuyo contenido es publicidad.

Imagen: Archivo grfico que se puede insertar en una pgina Web y mostrar en un explorador de Web. Existen diferentes formatos: GIF, JPEG, BMP, TIFF, WMF y PNG, entre otros.

Propiedades: Caractersticas de un elemento del Web actual, como el ttulo y la direccin URL de un Web o el nombre y el valor inicial de un campo de formulario. Tambin puede especificar propiedades para elementos de pgina como tablas, grficos y elementos activos.

4.7 Elementos de una pgina web

Una pgina web tiene contenido que puede ser visto o escuchado por el usuario final. Estos elementos incluyen, pero no exclusivamente: Texto. El texto editable se muestra en pantalla con alguna de las fuentes que el usuario tiene instaladas (a veces se utiliza una tecnologa de fuentes incrustadas, con lo que vemos en el monitor una fuente que realmente no poseemos, pero es poco frecuente.) El texto editable puede marcarse con el ratn o el teclado y copiarse a otra aplicacin, como el bloc de notas (muchos de los elementos textuales de las pginas, en especial los ttulos, botones de navegacin, etc. son realmente grficos, y su texto no es editable.)

18

 Imgenes. Son ficheros enlazados desde el fichero de la pgina propiamente dicho. Se puede hablar de tres formatos casi exclusivamente: GIF, JPG y PNG. Hablamos en detalle de este tema en la seccin de Grficos para la Web. Audio, generalmente en MIDI, WAV y MP3. Adobe Flash. Adobe Shockwave. Grficas Vectoriales (SVG - Scalable Vector Graphics). Hipervnculos, Vnculos y Marcadores.

La pgina web tambin puede traer contenido que es interpretado de forma diferente dependiendo del navegador y generalmente no es mostrado al usuario final. stos elementos incluyen, pero no exclusivamente: Scripts, generalmente Java Script. Meta tags. Hojas de Estilo (CSS - Cascading Style Sheets). Plantillas de diseo web

4.8 Aplicaciones de Internet

Las Aplicaciones de Internet, consisten en el aprovechamiento de la experiencia del usuario en herramientas y funciones de escritorio tan naturales como copiar, cortar y pegar, redimensionar columnas, y ordenar etc., con el alcance y la flexibilidad de presentacin y despliegue que ofrecen las aplicaciones o pginas Web junto con lo mejor de la multimedia (voz, vdeo, etc.).
19

Se puede decir que las RIA son la nueva generacin de las aplicaciones y es una tendencia ya impuesta por empresas como Macromedia, Sun o Microsoft que se encuentran desarrollando recursos para hacer de este tipo de aplicaciones una realidad. Estas aplicaciones estn basadas en plataformas J2EE o .NET, con un front-end Flash y utilizan una arquitectura Cliente/Servidor asncrona, segura y escalable, junto con una interfaz de usuario Web.

Entre los beneficios principales de aplicaciones RIA tenemos un mejoramiento importante en la experiencia visual, que hacen del uso de la aplicacin algo muy sencillo, ofrece mejoras en la conectividad y despliegue instantneo de la aplicacin, agilizando su acceso, garantizan la desvinculacin de la capa de presentacin es decir acceso a la aplicacin desde cualquier computador en cualquier lugar del mundo.

La Pagina Web: es una fuente de informacin adaptada para la World Wide Web (WWW),pueden ser cargadas de un ordenador o computador local, llamado Servidor Web, el cual servira de apoyo para los estudiantes.

Una pgina Web est compuesta por uno o varios documentos html relacionados entre s mediante hipervnculos (enlaces).

4.9 Tag HTML

A continuacin se muestra una lista de todos los tags HTML (lenguaje de marcas hipertextual) para el estndar HTML 4.01, que tambin pertenecen al estndar XHTML (lenguaje de marcas hipertextual extensible) con la excepcin de aquellos desaprobados. Junto a cada tag encontrars un smbolo indicando si el tag es vaco o no, lo que podra ayudar en la labor de escribir cdigo XHTML, el cual representa una mejor opcin no tan difcil de lograr. Recomendamos fuertemente usar XHTML en lugar de HTML, debido a los beneficios y a las pequeas diferencias.

20

El color rojo se ha usado para marcar tags desaprobados, cuyo uso no es recomendado. Esto se debe a que han sido reemplazados por otros tags (por ejemplo, el tag applet ha sido reemplazado por el tag object) o porque las hojas de estilos se han convertido en la forma preferida de lograr sus mismos efectos. Note, que los tags y atributos desaprobados en HTML pueden no ser soportados por futuras versiones (por ejemplo, XHTML 1.0). Esta es una buena razn para dejar de usarlos.

21

4.9.1 Lista de tags HTML

Tag <!-- --> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del>

Vaco Descripcin corta Inserta comentarios ocultos Establece el tipo de documento Inserta vnculos o marcadores Explica abreviaciones Explica acrnimos Provee informacin de contacto Inserta un applet (scripts) Define sectores para mapas de imagen Texto en negrita URI base para resolver URIs relativas Tamao de la fuente predeterminado Suprime el algoritmo bidireccional Texto en tamao "grande". Citar prrafos Contiene los elementos a mostrar Fuerza un quiebre de lnea Crea un botn Establece un ttulo para una tabla Centra su contenido Inserta una cita o referencia Representa texto de computadora Da atributos a columnas en una tabla Agrupa columnas en una tabla Define descripciones en una lista Indica texto eliminado
22

<dfn> <dir> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <h1> <h2> <h3> <h4> <h5> <h6> <head> <hr> <html> <i> <iframe> <img> <input> <ins> <isindex> <kbd> <label>

Asigna una definicin a un trmino Inserta una lista de directorios (rbol) Define un bloque de contenido Define una lista Inserta un trmino en una lista Indica nfasis Agrupa controles en un formulario Establece el estilo de fuente Inserta un formulario Inserta un marco Inserta un grupo de frames Encabezado de nivel 1 Encabezado de nivel 2 Encabezado de nivel 3 Encabezado de nivel 4 Encabezado de nivel 5 Encabezado de nivel 6 Define el bloque de encabezado Dibuja una lnea o regla horizontal Contiene al documento Muestra texto en itlica Inserta un marco dentro del documento Inserta una imagen Muestra controles de entrada Indica texto insertado Entrada de lnea simple Indica texto a ingresarse por el usuario Establece una etiqueta para un control
23

<legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table>

Asigna un ttulo a un "fieldset" Define un artculo en una lista Ofrece informacn relacional Define un mapa de imagen Lista men Da informacin sobre el documento Contenido alternativo para marcos Contenido alternativo para scripts Ejecuta aplicaciones externas Inserta una lista ordenada Agrupa opciones en un control select Define una opcin en un control select Define un prrafo Da un parmetro para un objeto Bloque de texto preformateado Inserta una cita en una lnea Muestra texto tachado Representa texto de programas Contiene scripts Crea un control select Muestra texto en letra "pequea" Asigna atributos al texto en lneas Muestra texto tachado Indica nfasis fuerte Define atributos visuales (hojas estilo) Define texto en subndice Define texto en super-ndice Inserta una tabla
24

<tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var>

Define un cuerpo en una tabla Celda regular de una tabla Entrada de texto de lneas mltiples Define un pie en una tabla Celda de encabezado de una tabla Define un encabezado de tabla Define el ttulo del documento Inserta una fila en una tabla Muestra texto en "teletype" Muestra texto subrayado Inserta una lista sin orden Indica una instancia de una variable

25

4.9.2 Cuadro comparativo de formato de texto y tags ms utilizadas en HTML

TAGS BASICOS <HTML></HTML> <HEAD></HEAD> <TITLE><TITLE> <BODY></BODY>

PROPOSITO Indica que es cdigo HTML. Titulo en la barra del navegador. Titulo de la pgina. Cuerpo.

ESTILOS DE CARCTER LOGICOS <em></em> <strong></strong> <code></code> <samp></samp> <kdb></kdb> <var></var> <dfn></dfn> <cite></cite>

PROPOSITO Caracteres enfatizados. Mayor enfatis (negritas). Fuente monoespaciada. Muy similar a code. Texto que el usuario debe escribir. Variable remplazada por valor real. Resalta palabra que se va definir. Se usa para sitas cortas.

ESTILOS DE CARCTER FISICOS <b></b> <i></i> <tt></tt> <u></u> <pre></pre>

PROPOSITO Negrita. Cursiva. Texto monoespaciado. Subrayar. Texto pre formateado.

LISTAS <ol></ol> <li></li> <ul></ul> <men></men> <dir></dir> <dl></dl>

PROPOSITO Listas numeradas u ordenadas. Cada elemento encabezado de lista. Lista con vietas y sin orden. Mens. Directorio. Glosario.
26

SALTOS Y LINEAS <hr> <br>

PROPOSITO Lnea divisora. Salto de lnea.

27

4.10 Imgenes que se utilizan en el diseo web: caractersticas

Los formatos de las imgenes potencian su usabilidad y adaptabilidad. Una de las principales caractersticas de las imgenes para la web es el tamao: que ofrezcan la mayor calidad (nitidez, color) ocupando el menor tamao posible.

4.10.1 Tabla comparativa de formatos de compresin de imgenes Formato Tipo compresin Con JPEG prdida de Ventajas

Desventajas muy Prdida de calidad notoria niveles compresin

Ficheros reducidos

(algoritmo JPEG)

altos de

Muy bueno para fotografas

Paleta (obsoleto

limitada para de

GIF(algoritmo LZW)

Sin

prdida,

Permite animaciones (no adecuado

imgenes muchos colores) Potenciales problemas

aunque limitado a 256 colores

para Wikipedia)

legales

(en algunos paises en otros ya venci la licencia)

Excelente para grficos

Ficheros

grandes

para imgenes de muchos (fotografas, ilustraciones, etc.) colores

PNG

Sin prdida

Permite transparencias

Observacin: en el caso de imgenes con texto no es conveniente usar el formato JPEG ya que produce un desenfoque que dificulta la lectura.

28

4.11 Importancia de los enlaces dentro de una pgina web.

Los enlaces dentro de la misma pgina web ayudan a la navegacin dentro de la misma. Esta tcnica permite que los navegantes se accedan a la informacin con mayor facilidad.

Esta tcnica consiste en que al dar clic en algn texto o imagen el navegante se pueda desplazar a otra parte dentro de la misma pgina o sitio.

Para hacer este tipo de enlaces hay que hacer dos operaciones:

1. Establecer marcadores a lo largo de la pgina (son los lugares a los que queremos saltar con los enlaces).

2. Poner enlaces que salten a los marcadores 4.12 Bases de datos

El concepto Base de Datos es uno de los ms utilizados por cualquier persona que tenga contacto con las computadoras, y aun sin tener contacto con estas. El uso de estas, aunque no con este nombre, se remonta a tiempos remotos en la historia, ya que se puede decir que es cualquier coleccin de datos compilados.

Sin embargo, con la introduccin de las computadoras en el mbito de la educacin, los negocios, y los medios de informacin, se acu el trmino Database (Base de datos) para una coleccin o recopilacin de datos relacionados y organizados en forma electrnica, y DBMS, DataBase Manager System (Sistema de administracin de bases de datos) para el programa que se encarga de crear y administrar la base de datos, de tal manera que Access es una DBMS y los archivos que genera y administra son las Bases de Datos.

La manera clsica de organizar los datos es representndolos en forma de renglones y columnas; es decir, en forma tabular, como la informacin
29

financiera o contable. Si los datos se encuentran estructurados, sin importar el tema (comerciales, mdicos, escolares, etctera), se est trabajando con bases de datos.

Qu ventajas representa tener esta informacin en una computadora, y no en las tradicionales hojas tabulares? Las principales: facilidad en el procesamiento de la informacin, gran velocidad de respuesta, posibilidad de organizar los datos conforme a criterios distintos, precisin en los clculos y obtencin de informes fcilmente.

4.13 PHP Y MySQL

4.13.1 Qu es PHP?

Qu es PHP y qu es MySQL. Bien comencemos por el primero. PHP es un lenguaje de alto nivel que se ejecuta en el servidor. Qu significa esto? Que un lenguaje de servidor es aquel que se ejecuta en el servidor donde las pginas se encuentran alojadas. Esto representa una ventaja en comparacin con otros lenguajes que se ejecutan en el propio navegador. Qu ventajas son estas. La principal es que todas nuestras pginas podrn ser vistas en cualquier ordenador independientemente del navegador con que se cuenteya que el cdigo se ejecuta en el servidor. Por qu no ocurre esto (ver nuestras pginas desde cualquier ordenador) al ejecutarse el cdigo desde el navegador: porque muchos navegadores no son capaces de entender todo el cdigo y esto se ve reflejado en errores al mostrar el resultado de las pginas mostrando.

Si bien, el que se ejecute el cdigo desde el servidor representa una gran ventaja, PHP presenta otras ventajas frente a otros lenguajes. La principal es que se trata de un software de programacin gratuito y todo el mundo puede utilizarlo sin tener que pagar un coste por trabajar con l, a diferencia de otros lenguajes en los que se debe comprar el software necesario para su utilizacin.

Resumiendo:
30

Es un lenguaje que combina potencia, versatilidad y sencillez de aprendizaje.

Permite gestionar eficientemente cualquier elemento de una pgina Web.

Se comunica perfectamente con HTML y JavaScript, permitiendo alcanzar un elevado nivel de integracin con el navegador.

Gestiona con eficacia bases de datos, tan necesarias para gran cantidad de proyectos modernos.

Es un lenguaje en constante evolucin.

Es un lenguaje de programacin totalmente libre, lo que en el mbito informtico se conoce como open source. Esto quiere decir que usted podr disponer de la ltima versin completamente gratis. Pero no slo eso. Adems, puede disponer libremente de cdigo fuente original del lenguaje, por si decide modificarlo para adaptarlo a sus necesidades especficas.

Ningn otro lenguaje de programacin est tan extendido en Internet. Los sitios de mayor xito estn basados en el uso de este lenguaje. Por algo ser.

4.13.2 Qu es MySQL?

Luego, qu es MySQL. MySQL es una base de datos, la que el mayor nmero de programadores en PHP eligen. MySQL soporta el lenguaje SQL, as como la conexin de varios usuarios.

31

Qu ventajas presenta MySQL. La principal (al igual que PHP) es que es una base de datos gratuita y puede ser utilizada por cualquier usuario sin costo alguno.

Ahora bien, que se puede decir de la combinacin del lenguaje de programacin PHP y la base de datos MySQL. PHP y MySQL son utilizados en conjunto en un gran nmero de pginas Web debido a la potencia que se consigue al ejecutar estas dos aplicaciones juntas.

Una de las grandes ventajas de esta combinacin es que PHP dispone de una amplia lista de funciones para ser utilizadas con la base de datos MySQL. Como se ha podido ver, trabajar con el lenguaje de programacin de pginas Web PHP representa muchas ventajas ya que es muy potente y muy extenso, pero el no trabajar con una base de datos, en especfico la base de datos MySQL, sera desaprovechar un gran nmero de ventajas que nos ofrece el lenguaje.

Resumiendo:

Al igual que PHP, se trata de una herramienta open source. Aunque existen licencias de pago, destinadas a grandes usuarios que necesitan un soporte tcnico especializado, este no ser su caso. Como comentario vale la pena comentar que existen libros que pueden brindar este soporte, aparte de que en la Internet existe gran cantidad de documentacin, tanto en ingls como en espaol.

Es un gestor de base de datos sensiblemente ms rpido y eficiente que la mayora de los que hay en el mercado, muchos de los cuales, adems son de pago.

Permite una gran versatilidad a la hora de almacenar y gestionar todo tipo de datos.

32

4.14 Una IP especial: 127.0.0.1

Esta direccin se conoce como de bucle local o localhost. Identifica siempre al ordenador con el que estamos trabajando. Cualquier plataforma del mundo (cualquier sistema operativo) sabe que, si solicitamos un documento, pgina Web, o cualquier recurso a esta direccin, en realidad lo estamos solicitando a nuestro propio ordenador, que lo busca en una carpeta determinada (aquella que se ha definido como localhost).

Cuando un usuario se conecta a Internet y solicita una pgina Web a travs de su barra de direcciones, lo que hace es establecer contacto con el ordenador que tiene almacenada esa pgina Web. En este ordenador est funcionando un programa que se conoce, genricamente como servidor Web. Este programa busca la pgina solicitada en el disco duro del servidor y se la enva al cliente. As pues, podemos decir que un servidor es un ordenador que almacena pginas Web y tambin un programa que se encarga de entregar dichos documentos a los clientes que lo soliciten. Por analoga, el cliente es un ordenador (aquel desde el que nos conectamos a Internet) y un programa cliente (el navegador con el que nos conectamos y donde se muestra la pgina solicitada). Como vemos, cada elemento de una arquitectura cliente-servidor se compone, por lo tanto, de hardware y software.

4.15 El servidor Apache

El servidor Apache (http://www.apache.org) es el servidor Web ms extendido en Internet. La mayora de los sitios que se visitan a diario estn corriendo sobre este servidor. Las razones son varias. Por una parte es gratuito. No se tiene que pagar nada para emplearlo. Por otra parte, es uno de los servidores ms robustos que existen, muy seguro ante los ataques en la red. Adems, es extremadamente fcil de configurar.

El servidor HTTP Apache es un software (libre) servidor HTTP de cdigo abierto para plataformas Unix (BSD, GNU/Linux, etc.), Windows, Macintosh y otras, que implementa el protocolo HTTP/1.11 y la nocin de sitio virtual.
33

Cuando comenz su desarrollo en 1995 se bas inicialmente en cdigo del popular NCSA HTTPd 1.3, pero ms tarde fue reescrito por completo. Su nombre se debe a que Behelendorf eligi ese nombre porque quera que tuviese la connotacin de algo que es firme y enrgico pero no agresivo, y la tribu Apache fue la ltima en rendirse al que pronto se convertira en gobierno de EEUU, y en esos momentos la preocupacin de su grupo era que llegasen las empresas y "civilizasen" el paisaje que haban creado los primeros ingenieros de Internet. Adems Apache consista solamente en un conjunto de parches a aplicar al servidor de NCSA. Era, en ingls, a patchy server (un servidor "parcheado").

El servidor Apache se desarrolla dentro del proyecto HTTP Server (httpd) de la Apache Software Foundation.

Apache presenta entre otras caractersticas mensajes de error altamente configurables, bases de datos de autenticacin y negociado de contenido, pero fue criticado por la falta de una interfaz grfica que ayude en su configuracin.

Apache tiene amplia aceptacin en la red: desde 1996, Apache, es el servidor HTTP ms usado. Alcanz su mxima cuota de mercado en 2005 siendo el servidor empleado en el 70% de los sitios Web en el mundo, sin embargo ha sufrido un descenso en su cuota de mercado en los ltimos aos. (Estadsticas histricas y de uso diario proporcionadas por Netcraft2).

La mayora de las vulnerabilidades de la seguridad descubiertas y resueltas tan slo pueden ser aprovechadas por usuarios locales y no remotamente. Sin embargo, algunas se pueden accionar remotamente en ciertas situaciones, o explotar por los usuarios locales malvolos en las disposiciones de recibimiento compartidas que utilizan PHP como mdulo de Apache.

4.16 Macromedia Dreamweaver 8

Macromedia Dreamweaver 8 es un componente que proporciona una plataforma para el desarrollo y la distribucin de servicios Web.
34

Dreamweaver 8 permite la creacin y administracin de sitios Web profesionales as como potentes aplicaciones de Internet. Esto se consigue utilizando las herramientas visuales de composicin logrando un desarrollo rpido de aplicaciones de Internet y un amplio soporte para la creacin de cdigo.

Por otra parte, el desarrollo de aplicaciones Web dinmicas que interactan con bases de datos es otra de las ventajas de Dreamweaver 8.

Macromedia Fireworks 8 es un complemento que permite a Macromedia Dreamweaver 8 disear pginas Web de alta calidad.

Otra de las ventajas de trabajar con Macromedia Dreamweaver 8 es que se pueden crear conexiones con bases de datos. Y es aqu donde se pueden crear conexiones a sitios PHP.

S bien Macromedia Dreamweaver 8 es un editor profesional para disear, codificar y desarrollar sitios, pginas y aplicaciones Web y que adems permite trabajar en un entorno de edicin visual sin necesidad de escribir cdigo, tambin es posible crear el cdigo manualmente gracias a las numerosas herramientas y funciones relacionadas a la codificacin. 4.17 Macromedia Fireworks

Fireworks es una aplicacin en forma de estudio (basada en la forma de estudio de Adobe Flash), pero con ms parecido a un taller destinado para el manejo hbrido de grficos vectoriales con Grficos en mapa de bits y que ofrece un ambiente eficiente tanto para la creacin rpida de prototipos de sitios Web e interfaces de usuario, como para la creacin y Optimizacin de Imgenes para web. Originalmente fue desarrollado por Macromedia, compaa que fue comprada en 2005 por Adobe Systems.

35

Fireworks est disponible de forma individual o integrado en Adobe CS3/CS4/CS5 y por tanto ha sido diseado para integrarse con otros productos de Adobe, como Dreamweaver y Flash. 4.18 Inkscape

Inkscape es un editor de grficos vectoriales de cdigo abierto, con capacidades similares a Illustrator, Freehand, CorelDraw o Xara X, usando el estndar de la W3C: el formato de archivo Scalable Vector Graphics (SVG). Las caractersticas soportadas incluyen: formas, trazos, texto, marcadores, clones, mezclas de canales alfa, transformaciones, gradientes, patrones y agrupamientos. Inkscape tambin soporta meta-datos Creative Commons, edicin de nodos, capas, operaciones complejas con trazos, vectorizacin de archivos grficos, texto en trazos, alineacin de textos, edicin de XML directo y mucho ms. Puede importar formatos como Postscript, EPS, JPEG, PNG, y TIFF y exporta PNG asi como muchos formatos basados en vectores.

El objetivo principal de Inkscape es crear una herramienta de dibujo potente y cmoda, totalmente compatible con los estndares XML, SVG y CSS. Tambin queremos mantener una prspera comunidad de usuarios y desarrolladores usando un sistema de desarrollo abierto y orientado a las comunidades, y estando seguros de que Inkscape sea fcil de aprender, de usar y de mejorar. 4.19 Proporcin urea

La proporcin urea, divina proporcin, razn urea, razn dorada, seccin urea o simplemente Golden Ratio es una frmula matemtica un tanto compleja que se concreta en el nmero phi ():

=(1+5) 1.61803

Aunque puede expresarse de forma ms simple como proporcin 1:1.6

36

Fue aplicada desde la antigedad como patrn geomtrico y esttico, al coincidir como esquema en algunos modelos de la Naturaleza: plantas, animales, pero tambin el mismo cuerpo humano.

Adems, es la base de los nmeros de Fibonacci, tambin se aplica al diseo de pginas web. A continuacin se muestra de forma grfica el resultado de cumplir con esta urea proporcin.

La distribucin del encabezado quedara as:

Ilustracin 3. Distribucin del encabezado (Proporcin urea)

37

Este es un ejemplo de la distribucin de la pgina en general:

Ilustracin 4. Distribucin de una pgina de internet (Proporcin urea)

38

5. Desarrollo

5.1 Ttulo de la pgina

Caf Tumbao

5.2 Logotipo de la pgina

El logotipo de la pgina simula alguna de las lmparas que se encuentran en las salas del Caf Tumbao, se tom como logotipo a estas porque son representativas del caf. A continuacin se describen las lmparas para que quede claro el por qu del logo.

Las lmparas son una especie de conos elaborados con aros almbricos y forrados con tela o papel peridico. La parte ms ancha se encuentra en la parte de abajo y la parte ms angosta est pegada al techo. Las lmparas miden aproximadamente 2 metros y medio. Es decir casi llegan al piso de las salas.

Ilustracin 5. Logotipo del sitio

39

5.3 Mapa del sitio

Ilustracin 6. Mapa del sitio

5.4 Estructura del sitio

La estructura del sitio web para el Caf Tumbao estar definida de la siguiente manera: estructura de rbol o jerrquica.

La estructura de rbol o jerrquica se da de la siguiente manera: a partir de una pgina de bienvenida o portal (raz) se abrirn las secciones que a su vez estas nos ligaran al contenido de las pginas. Estructura del sitio:

Raz: Pgina de bienvenida.

Secciones: Tumbao, Carta, Galera, Talleres, Calendario y Contacto.

Inicio: Mostrar una fotografa del caf. Es la portada dentro del sitio.

Tumbao: Liga que nos llevar a la pgina que nos presentar informacin sobre el Caf Tumbao.

40

Carta: Esta liga nos llevar a la pgina en que se muestra la carta de alimentos del Caf Tumbao.

Galera: El sitio contendr una pgina con la galera de imgenes y es esta liga la que nos lleva a esta parte del sitio.

Talleres: El Caf Tumbao dentro de sus actividades tiene varios talleres artsticos y es aqu donde se mostrar informacin acerca de ellos.

Calendario: Esta pgina contendr un calendario de eventos que se presentarn en foro del Caf Tumbao.

Contacto: Esta liga nos llevar a la seccin de contacto entre la pgina del Caf Tumbao y los visitantes del sitio.

Enlace con la base de datos: Aqu slo se mostrar una pantalla en la que se le indica a los usuarios que sus datos han sido enviados y que pronto nos pondremos en contacto con ellos.

41

5.5 Pagina principal

Esta es la primera pantalla que se mostrar al ingresar al sitio, al dar clic en cualquiera de las imgenes (ya sea la fotografa o el logotipo del sitio) se ingresar a la pantalla en la que muestran las ligas para interactuar dentro del sitio.

Ilustracin 7. Primera pantalla que aparece al ingresar al sitio.

42

Al dar clic sobre cualquiera de las imgenes (el logotipo o la fotografa) se mostrar la siguiente pantalla, las ligas que muestra son: Inicio, Tumbao, Carta, Galera, Talleres, Calendario, Contacto.

Ilustracin 8. Pantalla principal del sitio.

5.6 Los colores

El color es una parte del espectro lumnico, y, al fin, es energa vibratoria. Esta energa afecta de diferente forma al ser humano, dependiendo de su longitud de onda (del color en concreto) produciendo diferentes sensaciones de las que normalmente no somos conscientes.

Pero la gente que trabaja en agencias de marketing y publicidad, los asesores de imagen de empresa, los diseadores industriales y de moda, etctera, son bien conscientes de ello y utilizan los colores para asociarlos coherentemente al tipo de producto que quieren hacer llegar.

El efecto que producen los colores funciona. Desde hace aos se han hecho todo tipo de pruebas para analizar las sensaciones que sugieren los colores.

43

Y qu es un sitio web si no un escaparate personal, de empresa, de comunidad, etctera? Adems de muchas otras funciones que cada sitio pueda tener, ante todo intenta comunicar y lo hace con palabras, con imgenes y, en primera instancia, con colores.

Cuando

un

sitio

web

est

diseado

por

profesionales

con

slidos

conocimientos de diseo grfico, normalmente las pautas seguidas con los colores no son aleatorias.

A continuacin se da una justificacin de los colores que se usaron en el diseo del sitio.

Gris. El gris se us de color de fondo de las pantallas. Este color da estabilidad. Inspira la creatividad y simboliza el xito.

Las ligas, que son las imgenes que se muestran de forma vertical en la parte izquierda, contienen los siguientes colores.

Verde. El fondo de estas imgenes (ligas) es verde. El verde es un sedativo que dilata los capilares y tiene un efecto reductivo de la presin; sus radiaciones calman los dolores neurlgicos y resuelven algunos casos de fatiga nerviosa, insomnio, etctera.

El crculo y la imagen de la taza estn formados por el negro y el naranja. El naranja es el color de fondo y el negro es para la imagen de la taza.

El naranja se us porque esta relacionado entre otras cosas con los alimentos, se us de fondo porque (entre otras explicaciones de la psicologa de los colores) es un excitante emotivo que favorece la digestin. Por su parte, el negro se us para dar un gran contraste entre la forma de la taza el vapor y el fondo, se us para dar formalidad al banner.

44

El color de la tipografa es negro para que contraste y resalte el nombre de las ligas. Por otra parte el color negro est asociado al poder, la elegancia y la formalidad. 5.7 La tipografa

Para el diseo del sitio se usaron dos tipografas: Para el logo y las ligas se us la tipografa mmmm Coffee con el objeto de usar una tipografa creativa que atrajera la atencin de los visitantes del sitio.

Para el texto de las pantallas que se encuentran dentro del marco principal se us la tipografa Times New Roman. Esto con el objeto de usar u na tipografa clara que permitiera a los visitantes leer sin ningn problema la informacin que la pgina le brinda.

45

5.8 Banner

El banner que a continuacin se presenta es el que se usar dentro del sitio en ciertos lugares estratgicos, por ejemplo en la pantalla que aparece despus de llenar el formulario de contacto.

El banner est formado por dos colores, el negro y el naranja. El naranja es el color de fondo y el negro es para la imagen de la taza. El banner tiene un formato .GIF y es animado. Los colores que se usaron son por las razones siguientes:

El naranja se us porque est relacionado entre otras cosas con los alimentos, se us de fondo porque (entre otras explicaciones de la psicologa de los colores) es un excitante emotivo que favorece la digestin. Por su parte, el negro se us para dar un gran contraste entre la forma de la taza el vapor y el fondo, se us para dar formalidad al banner.

Ilustracin 9. Banner para el sitio.

46

5.9 Cabeceras

En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaos de letra) por medio de las etiquetas <h1><h2><h3><h4><h5> y <h6>, todas con su respectiva etiqueta de cierre.

Para este sitio las cabeceras que se utilizaron fue la etiqueta <h1>. En todas las pantallas que se muestran en el rea principal de los marcos se utiliz el mismo formato para los ttulos de las pantallas y para el texto. A continuacin se muestran la manera en que ests cabeceras se insertaron haciendo uso de Dreamweaver.

En este caso se muestra como se desarroll la cabecera del fichero Carta.html

1. Abrimos el fichero en Dreamweaver.

2. En el apartado de la vista diseo insertamos en este caso el ttulo del texto que es Carta. (La imagen que se muestra adelante tiene abiertas las vistas cdigo y diseo de Dreamweaver).

3. En la barra de propiedades de la vista diseo vamos a configurar la cabecera de nuestro ttulo. Lo primero que se debe hacer es seleccionar el texto al cual le vamos a aplicar el tamao de las cabeceras.

4. Despus de haber seleccionado el texto vamos a la barra de propiedades y ah configuramos la cabecera. En la parte superior izquierda de la barra nos aparece la opcin Formato y seleccionamos Encabezado 1, que es el equivalente a la etiqueta <h1>.

Estos son todos los pasos que hay que seguir para agregar los encabezados en nuestros ficheros. Como ya se mencion anteriormente todos los ficheros guardan el mismo formato. A continuacin se muestra una imagen que nos seala los pasos descritos.
47

Se selecciona el texto

En el apartado Formato de la Barra de propiedades seleccionamos Encabezado 1

Ilustracin 10. Cabeceras.

48

5.10 Tablas

A continuacin se muestra de manera detallada la forma en que se insert la tabla usada en nuestro sitio haciendo uso de la herramienta Dreamwaver. La tabla se inserto en el fichero calendario.html para mostrar las fechas de eventos de lugar.

1. Abrimos nuestro fichero calendario.html

2. En el men Insertar seleccionamos la opcin Tabla

Ilustracin 11. Insercin de una Tabla.

49

3. En la ventana que nos aparece al seleccionar esta opcin configuraremos nuestra tabla, es decir: nmero de filas, de columnas, ancho de la tabla, etc.

Para este caso seleccionaremos 3 filas y dos columnas con un ancho de 600 y un grosor de borde de 2 pixeles.

Ilustracin 12. Configuracin de una tabla.

50

4. Despus de haber configurado nuestra tabla la llenamos con los datos correspondientes, en este caso la fecha del evento la pondremos en la columna de la izquierda y el nombre del evento en la derecha.

Ilustracin 13. Llenando una tabla.

51

5.11 Imgenes de sustitucin y lbum web

5.11.1 Imagen de sustitucin

La imagen de Sustitucin describe un comportamiento interactivo que se activa simplemente al pasar el cursor del mouse encima de la imagen en cuestin, es decir, cuando se desliza por encima el cursor del mouse sobre la imagen sta cambiar por otra imagen.

En primer lugar se necesitarn dos imgenes, una que estar en estado OFF o Apagado, la cual actuar cuando el cursor del mouse no est encima de la imagen, la segunda imagen solo actuar en

estado ON o Encendido, esto quiere decir que se har presente siempre y cuando el cursor del mouse est encima de la imagen con el comportamiento interactivo.

Despus de conseguir las dos imgenes necesarias para aplicar este comportamiento interactivo se necesitar ir al men principal del programa y elegir la opcin Insertar, inmediatamente seleccione Objetos de Imagen y en el men emergente elija Imagen de sustitucin, tal como muestra la siguiente imagen.

52

Ilustracin 14. Ruta para localizar la insercin de una imagen de sustitucin.

En este instante rellenaremos el cuadro de dilogo Insertar imagen de sustitucin. A continuacin se describir brevemente cada campo.

Nombre de la imagen: Servir para tener una referencia de la imagen que presenta un comportamiento interactivo.

Imagen original: Esta imagen ser la que actuar en estado OFF.

Imagen de sustitucin: Esta imagen ser la que actuar en estado ON Carga previa de imagen de sustitucin.

Es importante marcar esta casilla de verificacin, ya que permite que se incluya automticamente en la carga de la pgina la(s) imagen(es) de sustitucin (las del tipo ON), esto evita posibles demoras debido a la descarga de la imagen (del tipo ON) cuando sea oportuno (al pasar el cursor del mouse encima de la Imagen de sustitucin)

Texto Alternativo:
53

Este campo se refiere al efecto que se le inserta a las imgenes que permite mostrar un texto despus de permanecer el cursor del mouse por pocos segundos encima de la imagen en cuestin. Este campo es opcional.

Al hacer clic; ir a URL:

En este campo seleccionamos el fichero al cual nos enviar al dar clic sobre la imagen de sustitucin, en este caso nos enviara al fichero que muestra la pantalla de inicio: untitled-8.html

Ilustracin 15. Configuracin de una imagen de sustitcin.

Imgenes de sustitucin para el sitio web del Caf Tumbao

54

Ilustracin 16. Imagen de sustitucin para el sitio.

5.11.2 lbum Web

El lbum web creado para el sitio web del Caf Tumbao se cre sin el asistente de Dreamweaver para crear lbumes web ya que al usar las herramientas correspondientes para crear un lbum no lo permita por el uso de marcos. A continuacin se describe paso a paso la creacin del lbum web.

1. El primer paso es crear una carpeta llamada lbum en la que se guardarn las imgenes que se mostrarn y dentro de esta carpeta se crear otra llamada thumbnails que es donde se guardarn las imgenes en formato pequeo.

Ilustracin 17. Creacin de carpetas para el lbum web.

55

2. El segundo paso es crear los thumbnails necesarios para la creacin del sitio. En este caso se us Fireworks para la reduccin de las imgenes que se mostrarn. A continuacin se muestra un ejemplo de cmo se crea un thumbnail con Fireworks. Lo primero es abrir la imagen correspondiente de la carpeta thumbails en Fireworks.

Ilustracin 18. Reduciendo las imgenes en Fireworks para los thumbnails.

El tamao al que se reducir la imagen es de 150 por 113 pixeles.

3. El siguiente paso es abrir en Dreamweaver nuestro fichero que tiene como nombre galera.html. En este fichero insertaremos los thumbnails que nos servirn como liga para mostrarnos en otro fichero la imagen ampliada.

56

Ilustracin 19. Insercin de imgenes desde la carpeta thumbnails.

Ilustracin 20. Thumbnails insertado.

4. El siguiente paso es crear nuestros ficheros con las imgenes ampliadas, que son las que nos mostrar cuando demos clic sobre los thumbnails.

57

Ilustracin 21. Imgenes ampliadas.

Cada imagen llevar en la parte de abajo las ligas Atrs, lbum y Siguiente.

Ilustracin 22. Ligas de las imgenes.

58

5. Despus de haber guardado un archivo con su correspondiente imagen ampliada vamos nuevamente a nuestro fichero galeria.html para crear las ligas de los thumbnails con el fichero correspondiente que contiene la imagen ampliada.

Ilustracin 23. Ligas de los thumbnails.

6. Luego de haber seguido estos pasos ha quedado el lbum web, a continuacin se muestra el resultado final en dos imgenes, la primera muestra los thumbnails y la segunda muestra un imagen ampliada.

59

Ilustracin 24. Galera de imgenes: thumbnails.

Ilustracin 25. Galera de imgenes: ampliaciones.

60

5.12 CSS

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cmo se va a mostrar un documento en la pantalla, o cmo se va a imprimir, o incluso cmo va a ser pronunciada la informacin presente en ese documento a travs de un dispositivo de lectura. Esta forma de descripcin de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

A continuacin se describe la forma en que se cre la hoja de estilos para el sitio web www.cafetumbao.co.cc.

1. El primer paso fue crear el cdigo html, en este caso el cdigo se cre de forma automtica ya que se us Dreamweaver para el diseo de las pginas del sitio web. A continuacin se muestra como ejemplo el cdigo del fichero tumbao.html.

Ilustracin 26. Cdigo HTML del fichero tumbao.html.

2. El segundo paso es crear en un archivo nuevo nuestra hoja de estilos con la extensin .css, que en este caso se llamar estilos.css. En este caso nuestra hoja de estilos nos servir para manipular el color de fondo de la pantalla y el color de la tipografa. Este es el cdigo:

61

Ilustracin 27. Cdigo de la hoja de estilos.

3. El ltimo paso es agregar el cdigo correspondiente en nuestros archivos .html para ligarlos con nuestra hoja de estilos. En la siguiente imagen se muestra la lnea de cdigo que liga nuestros ficheros con estilos.css.

Ilustracin 28. Cdigo que liga nuestros ficheros HTML con la hoja de estilos.

Esta liga de cdigo se debe de incluir en todos nuestros ficheros para que al momento que deseemos cambiar el color del fondo de la pantalla o el color de la letra lo hagamos desde nuestra hoja de estilos.

62

5.13 Configuracin de servidor web personal

5.13.1 Introduccin

El servidor HTTP Apache es un servidor web HTTP de cdigo abierto para plataformas Unix (BSD, GNU/Linux, etc.), Microsoft Windows,Macintosh y otras, que implementa el protocolo HTTP/1.1 1 y la nocin de sitio virtual. Cuando comenz su desarrollo en 1995 se bas inicialmente en cdigo del popular NCSA HTTPd 1.3, pero ms tarde fue reescrito por completo. Su nombre se debe a que Behelendorf quera que tuviese la connotacin de algo que es firme y enrgico pero no agresivo, y la tribu Apache fue la ltima en rendirse al que pronto se convertira en gobierno de EEUU, y en esos momentos la preocupacin de su grupo era que llegasen las empresas y "civilizasen" el paisaje que haban creado los primeros ingenieros de internet. Adems Apache consista solamente en un conjunto de parches a aplicar al servidor de NCSA. Era, en ingls, a patchy server (un servidor "parcheado"). El servidor Apache se desarrolla dentro del proyecto HTTP Server (httpd) de la Apache Software Foundation.

Apache presenta entre otras caractersticas altamente configurables, bases de datos de autenticacin y negociado de contenido, pero fue criticado por la falta de una interfaz grfica que ayude en su configuracin. Apache tiene amplia aceptacin en la red: desde 1996, Apache, es el servidor HTTP ms usado. Alcanz su mxima cuota de mercado en 2005 siendo el servidor empleado en el 70% de los sitios web en el mundo, sin embargo ha sufrido un descenso en su cuota de mercado en los ltimos aos.

63

5.13.2 Desarrollo

1. El primer paso es abrir dar clic en apache 2triad desde nuestro disco de instalacin. En seguida nos aparecer el asistente de instalacin del programa indicndonos los componentes que se instalarn. Debemos de dar clic en el botn Next

Ilustracin 29. Asistente de instalacin.

64

2. Despus de esto nos indicar la ruta en la que se instalar el programa. Podemos cambiar esta ruta, pero es recomendable que dejemos la que nos da el asistente por default.

Ilustracin 30. Ruta de instalacin.

65

3. Despus de haber confirmado la ruta de instalacin nos pide que entremos una contrasea. Es importante que memoricemos esta contrasea ya que ser la que luego usaremos para hacer las conexiones de los ficheros con la base de datos.

Ilustracin 31. Contrasea.

4. Despus de haber ingresado la contrasea nos pedir que aceptemos las condiciones de licencia del producto.

Ilustracin 32. Condiciones de licencia.

66

5. Luego de haber aceptado las condiciones de licencia del producto si iniciar el proceso de instalacin de Apache 2Triad.

Ilustracin 33. Inica el proceso de instalacin.

6. Enseguida una ventana nos pedir que aceptemos la extraccin de Apache a la carpeta correspondiente. Debemos presionar el botn Aceptar.

Ilustracin 34. Los archivos han sido extraidos a la ruta correspondiente.

67

7. En la siguiente pantalla que se muestra debemos ingresar la contrasea que tecleamos en la ventana anterior correspondiente.

Ilustracin 35. Ingresar nuevamente la contrasea.

8. Al terminar el proceso se nos mostrar la siguiente ventana indicndonos que se ha configurado exitosamente. Presionamos el botn aceptar y enseguida el equipo se reiniciar de forma automtica.

Ilustracin 36. Termina el proceso de instalacin.

68

5.13.3 Conclusiones

Apache es usado principalmente para enviar pginas web estticas y dinmicas en la World Wide Web. Muchas aplicaciones web estn diseadas asumiendo como ambiente de implantacin a Apache, o que utilizarn caractersticas propias de este servidor web. Apache es usado para muchas otras tareas donde el contenido necesita ser puesto a disposicin en una forma segura y confiable.

69

5.14 Direccin Virtual

5.14.1 Introduccin

Una direccin IP es un conjunto de 4 nmeros de 0 a 255 separados por puntos, que identifica a una computadora en una red (un conjunto de computadores conectados entre s). Un mismo computador tendr asignada una IP por cada red a la que est conectado.

El servicio de DNS dinmica de No-IP permite identificar tu PC con un nombre de dominio fcil de recordar, como TuNombre.no-ip.com en lugar de con un nmero extrao del tipo 213.171.218.201 y poder montar un servidor sin complicaciones independientemente de si tenemos o no una IP esttica.

70

5.14.2 Desarrollo

Primero debemos Ingresar al sitio www.no-ip.com

1. En la barra superior del sitio, vaya al link No_ip Free y en seguida a Sign-Up Now! para tramitar nuestro registro de manera gratuita.

Ilustracin 37. Pantalla principal del sitio no-ip.

71

2. Ingresar la cuenta de correo con la que se va a registrar

Ilustracin 38. Registro en el sitio.

3. Ingresamos los datos correspondientes que se no solicitan en el formulario

Ilustracin 39. Formulario de registro.

72

4. Una pantalla nos indica que nos hemos registrado satisfactoriamente y debemos ir a nuestro correo para dar clic en la liga correspondiente para activar nuestra cuenta.

Ilustracin 40. Registro satisfactorio en no-ip.

Ilustracin 41. Mensaje que nos enva no-ip a nuestro correo para confirmar el registro.

73

5. Luego de habernos registrado y haber confirmado el registro dando clic en la liga correspondiente que se nos envi a nuestro correo, debemos ingresar al sitio con nuestro nombre de usuario y contrasea, luego ir al apartado que se encuentra en la parte superior izquierda que se llama Host/Redirects. Dentro de este apartado daremos clic en la liga Add Host.

Ilustracin 42. Host/Redirects.

74

6. En esta pantalla debemos de ingresar el alias con el que nos identificaremos dentro de no-ip.com. Luego de haber ingresado estos datos debemos de dar clic en el botn Create Host que se encuentra en la parte inferior derecha de la pgina. Es importante que tengamos este alias con el que nos hemos registrado dentro de no-ip.com ya que este dato lo utilizaremos para configura el software de no-ip y nuestro redireccionamiento en www.mydomain.com.

Ilustracin 43. Registro de nuestro alias en no-ip.com.

75

7. Despus de habernos registrado y agregado un alias para identificarnos en no-ip.com debemos descargar el software de NO-IP, que mantendr activa la redireccin de forma permanente mientras nuestro equipo est encendido. Podemos descargar el software desde la siguiente ruta http://www.noip.com/downloads.php. En esta pantalla debemos seleccionar el sistema operativo que tenemos instalado en nuestra PC. En este caso Windows XP.

Ilustracin 44. Descarga de software.

76

8. Instalamos el programa con el asistente

Ilustracin 45. Instalacin del software de no-ip.

9. Despus de haber instalado con el programa con el asistente debemos ejecutarlo y configurarlo para que pueda redireccionarnos con la ip esttica virtual. Nos aparecer la siguiente ventana y es aqu donde ingresaremos el correo electrnico y la contrasea con que nos registramos en no-ip.com para que nos redireccione con nuestro alias y pueda ser redireccinada nuestra ip virtual.

Ilustracin 46. Ingresamos nuestro usuario y contrasea.

77

5.14.3 Conclusiones

Muy a parte de su tamao Internet no deja de ser otra red, por lo que es evidente que toda computadora, por el hecho de estar conectada a sta, contar con una IP por la que es conocida y referenciada por los dems equipos de la red. Esta IP, al contrario de las IPs de una red local que podemos asignar nosotros mismos, viene dada por el ISP (proveedor de servicio a internet) y podemos consultarla en Windows utilizando el comando ipconfig en la consola (Inicio - Ejecutar, escribimos cmd para abrir la consola, e ipconfig en la consola para mostrar la configuracin IP actual).

78

5.15 Registro de dominio

5.15.1 Introduccin

Un dominio de Internet es una red de identificacin asociada a un grupo de dispositivos o equipos conectados a la red Internet.

El propsito principal de los nombres de dominio en Internet y del sistema de nombres de dominio (DNS), es traducir las direcciones IP de cada nodo activo en la red, a trminos memorizables y fciles de encontrar. Esta abstraccin hace posible que cualquier servicio (de red) pueda moverse de un lugar geogrfico a otro en la red Internet, aun cuando el cambio implique que tendr una direccin IP diferente.

Sin la ayuda del sistema de nombres de dominio, los usuarios de Internet tendran que acceder a cada servicio web utilizando la direccin IP del nodo (Ej. Sera necesario utilizar http://66.102.7.104 en vez

de http//:www.google.com).

79

5.15.2 Desarrollo

Antes de generar nuestro nombre de dominio nos debemos registrar en el sitio. En este caso lo haremos en uno llamado CO.CC. Ingrearemos al sitio con la siguiente direccin: www.co.cc y en la pantalla principal en la parte superior izquierda daremos clic en la liga que dice: Crear una cuenta ahora.

Ilustracin 47. Pantalla principal del sitio co.cc.

80

Enseguida nos enviara al siguiente formulario que debemos de llenar, despus de llenarlo nos enviarn un mensaje a nuestro correo con una liga a la que deberemos de dar clic para confirmar el registro .

Ilustracin 48. Registro de usuario.

81

Creando nuestro nombre de dominio gratuito

1.- Ingresar al sitio co.cc y escribir el nombre de dominio que deseamos en el apartado correspondiente al centro de la pgina entre www y Co.Cc (en este caso cafetumbao). Damos clic en el botn comprobar disponibilidad

Ilustracin 49. Comprobacin de disponibilidad del nombre de dominio.

82

2.- Si el nombre est disponible nos enviar a est pantalla, si no un mensaje nos indicar que ese nombre ya existe y debemos seguir buscando otras alternativas.

Ilustracin 50. Esta pantalla nos indica si el nombre de dominio est disponible o no.

83

3.- Para continuar con el registro debemos darnos de alta con nuestro nombre de usuario y contrasea. Es la siguiente pantalla que nos enva.

Ilustracin 51. Acceso a nuestra cuenta.

84

4.- Despus de haber accedido a nuestra cuenta nos aparecer la siguiente pantalla indicndonos que hemos obtenido un nuevo dominio de forma satisfactoria y que tenemos un plazo no mayor a 48 horas para configurar el dominio.

Ilustracin 52. Nombre de dominio creado.

85

5.- Para configurar el nombre de dominio debemos entrar a nuestra cuenta y seleccionar el nombre de dominio que hemos creado.

Ilustracin 53. Seleccin de nuestro nombre de dominio para configurarlo.

86

6.- Y lo que debemos de configurar para nuestro nombre de dominio son los DNS, y esto se hace en la siguiente pantalla, que es a la que nos enva despus de haber seleccionado el nombre de dominio correspondiente.

Ilustracin 54. Configruacin de DNS.

Estos son los pasos que debemos seguir para registrar y configurar un nombre de dominio de forma gratuita en Co.Cc. 5.15.3 Conclusiones

La mayora de los dominios gratuitos los ofrecen que brindan espacio web gratuito, por lo que si pasado un tiempo no se est contento con ese hosting, al cambiar a otra empresa se tendr que cambiar de direccin web. Es resulta muy malo para el posicionamiento de buscadores, pues supone empezar de nuevo en la promocin del dominio, empezar a subir posiciones otra vez, conseguir enlaces, etctera. Es por esta razn que si se trata de una empresa que le fuera factible pagar por un nombre de dominio esto sera preferible.

87

5.16 Redireccionamiento

5.16.1 Introduccin

El servicio de redireccionamiento de dominios nos permite configurarlos de forma directa o transparente. Qu significa esto: el redireccionamiento directo significa que cuando el usuario teclee la URL www.dominio.com, por ejemplo , el navegador abrir el destino final, es decir

www.mihostinggratis.com/~user1543/web/index.html. Cuando hablamos de la redireccin transparente nos referimos a que en el momento que el usuario teclee la URL, www.dominio.com el navegador se abrir y este seguir manteniendo la URL de su dominio, es decir www.dominio.com.

Bien, a continuacin se presenta de manera detallada la forma en que se hace un redireccionamiento de forma gratuita, para este caso utilizamos los servicios de www.mydomain.com.

88

5.16.2 Desarrollo

Bien, el primer paso es registrarnos en mydomain.com. En la pantalla principal daremos clic en la liga login.

Ilustracin 55. mydomain.com

89

En la siguiente pantalla que nos envi daremos clic en la liga Create an Account

Ilustracin 56. Registro.

90

Y por ltimo llenaremos los campos que se nos solicitan en la siguiente pantalla. Despus de haber hecho esto se nos enviar un mensaje a nuestro correo para que confirmemos el registro.

Ilustracin 57. Llenar la forma con nuestros datos.

91

Luego de habernos registrado en mydomain.com debemos iniciar con el proceso de redireccionamiento. Para hacer esto ya debemos contar con nuestro nombre de dominio y el registro y la instalacin del software de www.no-ip.com.

1. Al logearnos en el sitio nos enviar a la siguiente pantalla. En esta pantalla debemos de dar clic en la liga Manage Service Domains que se encuentra en la parte superior de la barra lateral derecha.

Ilustracin 58. Dar clic en Manage Service Domains.

92

2.- Despus de haber dado clic en esta liga nos enviar la siguiente pantalla. En esta debemos presionar el botn Add Domains para agregar un nuevo dominio.

Ilustracin 59. Add Domains.

93

3. En la siguiente pantalla debemos agregar el nombre de dominio en el cuadro correspondiente. Despus de esto presionamos el botn Add que se encuentra debajo del cuadro e iniciamos con el proceso de configuracin.

Ilustracin 60. Agreagamos el dominio que redireccionaremos.

4.- Se mostrar un proceso en el que se verifica si otro usuario no ha registrado ya ese dominio. Despus de esto se mostrar la siguiente pantalla. En ella debemos dar clic en la liga Add Services.

Ilustracin 61. Dar clic en Add Services.

94

5. En la siguiente pantalla que aparezca debemos presionar el botn Continue.

Ilustracin 62. En esta pantalla damos clic en Continue

95

6. En la siguiente pantalla marcamos la casilla Registration Agreguemet, introducimos un correo electrnico vlido y presionamos el botn Continue en la siguiente pantalla.

Ilustracin 63. Aceptamos en la casilla de registro y damos clic en Continue

96

7. Despus de esto debemos esperar unos cuantos segundos para que el proceso termine. Despus de esto en la siguiente pantalla deberemos presionar el botn Place order .

Ilustracin 64. El proceso ha terminado. Damos clic en Place Order

97

8. Por ltimo en la siguiente pantalla daremos clic en el botn Goto my Account.

Ilustracin 65. Damos clic en el botn Goto my Account.

Los ltimos pasos que quedan son los de redireccionamiento de nombre de dominio. Esto para que al teclear el nombre de dominio en la barra de direccin de nuestro navegador web nos vincule a nuestro servidor.

A continuacin se muestra paso a paso lo que debemos hacer.

98

1. En la pantalla de panel de control de nuestra cuenta debemos dar clic en la pestaa Hosting & Services. En esta categora deberemos de dar clic en la liga Manage Domain Services del dominio que vamos a redireccionar, esto se encuentra dentro del recuadro Domain Tools .

Ilustracin 66. Manage Domain Services.

99

2. Esta es la pantalla que nos mostrar. Aqu debemos de ingresar el alias del servidor web, en este caso el alias que estamos usando en no-ip.

Ilustracin 67. Ingresar el alias de no-ip.

3. Despus de estos pasos se nos avisa que el trmite se ha terminado correctamente y que debemos espera al menos una hora para que los cambios tengan efecto.

5.16.3 Conclusiones

Es de suma importancia redireccionar el nombre de dominio con nuestro sitio web para que los motores de bsqueda nos tengan localizados y as conseguir que los usuarios accedan a nuestro sitio web.

100

5.17 Bases de datos

A continuacin se documenta la creacin de la base de datos generada con PHP MySQL. El objetivo de la creacin de esta base de datos es crear un registro de de usuarios para as poder captarlos y poderles ofrecer servicios y promociones de nuestra empresa.

1.- El primer paso es crear el formulario con Dreamwaver para que los usuarios se registren en nuestra web.

Ilustracin 68. Creacin del formulario con Dreamwaver.

2.- Para que los usuarios puedan quedar registrados en nuestra web es necesario crear una base de datos. En ella se almacenarn los datos del usuario.

El nombre de la base de datos que se cre fue registrados y creamos dentro de ella una tabla que se llama usuarios.

101

El primer paso para crear la base de datos es abrir nuestro navegador y en la barra de direccin escribir la direccin IP 127.0.0.1 para poder acceder a la siguiente pantalla.

Ilustracin 69. Navegador. Direccin IP 127.0.0.1

102

Cuando nos encontremos dentro de esta pantalla debemos dar clic en la liga phpmyadmin/ para poder ingresar a MySQL. Al momento de dar clic nos pedir el usuario y contrasea, que para este caso son: Nombre de usuario: root. Contrasea: 12345678

Ilustracin 70. Necesitamos ingresar nuestro usuario y contrasea para crear una base de datos.

103

Despus de haber ingresado estos datos nos encontraremos dentro de MySQL. En esta pantalla crearemos nuestra base de datos que como ya lo mencionamos se llamar registrados.

Ilustracin 71. Creacin de una base de datos con MySQL.

104

Al momento de dar clic en el botn crear nos enviar a la siguiente pantalla y es aqu donde crearnos una tabla que tendr por nombre usuarios.

Ilustracin 72. Creacin de una tabla.

105

Despus de hacer clic en el botn contine nos enviar a la siguiente pantalla que es donde daremos de alta los campos de nuestra tabla.

Ilustracin 73. Campos.

106

Despus de esto habr quedado creada nuestra base de datos en MySQL

Ilustracin 74. Base de datos creada con MySQL.

107

El siguiente paso es crear un fichero que en este caso llevar por nombre registro.php, este fichero ser el encargado de recibir los datos del formulario e insertarlos en la base de datos, para que el usuario quede registrado. A continuacin se muestra el cdigo que se encarga de la conexin entre el formulario y la base de datos.

Ilustracin 75. Cdigo en PHP que inserta los datos capturados en nuestro formulario en la base de datos creada.

108

6. Conclusiones

Un sitio web es el vnculo entre un organismo (de cualquier tipo) y su pblico, por lo tanto, la calidad del sitio web es determinante entre estos dos factores.

Disear y programar un sitio web es una tarea minuciosa que merece un cuidadoso trabajo previo antes de que el diseador y el programador web empiecen a trabajar directamente en la computadora en la creacin del sitio. La navegacin entre las pginas y la usabilidad son factores determinantes para el buen funcionamiento de un sitio. Determinar la estructura del sitio, estudiar a los usuarios a los que va dirigido y despus poner manos a la obra.

El diseador web debe ser una persona capaz de combinar los componentes para producir un sitio de calidad, es decir, un sitio web usable y funcional. Esta usabilidad y funcionalidad se debe aplicar a la interfaz, que es con la que interactuarn los usuarios.

Por otra parte el programador deber ser capaz de lograr una conexin funcional en el acceso y transacciones con las bases de datos.

Un sitio web de calidad deber ser el resultado de una excelente integracin entre el programador y el diseador web.

109

7. Bibliografa y referencias de sitios web consultados

Bibliografa

Creacin de un portal con PHP y MySQL Jacobo Pavn Puertas Alfaomega Tercera edicin

Domine PHP y MySQL Programacin dinmica en el lado del servidor Jos Lpez Quijado Alfaomega Primera edicin

Dreamweaver 8 Csar Prez Alfaomega Primera edicin

Fundamentos de bases de datos Silberschatz | Korth | Sudarshan McGraw-Hill Quinta edicin Sitios web

http://www.paralibros.com/passim/p20-tec/pg2050ci.htm

http://es.wikipedia.org/wiki/Conexin_a_Internet

http://es.wikipedia.org/wiki/Transmission_Control_Protocol

http://es.wikipedia.org/wiki/Direccin_IP

110

http://forums.remote-exploit.org/guias-y-tutoriales/30479-envenenamiento-arpnotas.html

http://es.wikipedia.org/wiki/File_Transfer_Protocol

http://www.mitecnologico.com/Main/PaginaWebConceptoYElementos

http://www.superhosting.cl/disenodepaginasweb.php

http://es.wikipedia.org/wiki/Rich_Internet_Applications

http://www.htmlquick.com/es/reference/tags.html

http://www.hooping.net/faq-formatos-imagenes.aspx

http://www.inkscape.org/?lang=es

http://despuesdeg.com/2008/12/29/aplica-la-proporcion-aurea-al-diseno-deuna-pagina-web/

www.todoexpertos.com/categorias/casa-yjardin/decoracion/respuestas/909804/psicologia-de-los-colores

http://www.webusable.com/coloursMean.htm

111