Instituto Tecnológico Superior de Lerdo

“Programación, diseño y desarrollo de un sitio web para el foro Café Cultural Tumbao”

José Isidro Fabela Aldaco

Agosto de 2010

1

Índice 1. Introducción…………………….……………………………...………………5 2. Objetivo…………………………………………………………………………6 3. Justificación……………………………………………………………………7 4. Marco teórico……………………………………………..…..……………….8 4.1 Redes posteriores a internet……………………………..…………………8 4.2 Esquema de conexión 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 páginas 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 diseño y/o desarrollo Web…….……16 4.7 Elementos de una página web……………………………………....……18 4.8 Aplicaciones de internet……………………………………………………19 4.9 Tag HTML…………………………………………………………………….20 4.9.1 Lista de tags………………………………………………………..…..…..22 4.9.2 Cuadro comparativo de formato de texto y tags más utilizadas en HTML………………………………………………….……..26 4.10 Imágenes que se utili zan en el diseño web: características…….…….28 4.10.1 Tabla comparativa de formatos de compresión de imágenes… ..…..28 4.11 Importancia de los enlaces dentro de una página 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 Proporción áurea……………………………...………………………………36 5 Desarrollo…………………………………………………………...…………….39 5.1 Título de la página……………………………...………………………………39 5.2 Logotipo de la página…………………………………………………………..39 5.3 Mapa del sitio……………………………………………………………………40 5.4 Estructura del siti o………………………………………………………………40 5.5 Página principal…………………………………………………………………42 5.6 Los colores……………………………………………………………………….43 5.7 La tipografía……………………………………...………………………………45 5.8 Banner…………………………………………...……………………………….46 5.9 Cabeceras………………………………………………………………………..47 5.10 Tablas……………………………………………………………..…………….49 5.11 Imágenes de sustitución y álbum web………………………...…………...52 5.11.1 Imagen de sustitución………………………………………...…………….52 5.11.2 Álbum web……………………………………………………...……………55 5.12 CSS…………………………………………...…………………………………61 5.13 Configuración de servidor web personal……………………………………63 5.13.1 Introducción……………………………….………………………………….63 5.13.2 Desarrollo………………………………….……………………………….…64 5.13.3 Conclusiones……………………………….………………………………...69 5.14 Dirección virtual……………………………….………………....……………..70 5.14.1 Introducción…………………………………………………………………..70 5.14.2 Desarrollo……………………………………………………..……………....71 5.14.3 Conclusiones………………………………………………….……………...78 5.15 Registro de dominio……………………………………………….…………...79 5.15.1 Introducción………………………………….……………………………….79 5.15.2 Desarrollo………….………………………….………………………………80 5.15.3 Conclusiones..…………………………………………..……………………87 5.16 Redireccionamiento…………………………………………………………....88 5.16.1 Introducción……..…………………………………………………………....88
3

.2 Desarrollo……….89 5.100 5.…………………………….101 6.16... Conclusiones……………………………………………………………………109 7.3 Conclusiones……………………………….17 Bases de datos………………………………………………………………..5...16..………………………………………………………….. Bibliografía………………………………………………………………………110 4 .

1. típicamente comunes a un dominio de Internet o subdominio en la World Wide Web en Internet. etcétera. Todos los sitios web públicamente accesibles constituyen una gigantesca "World Wide Web" de información (un gigantesco entramado de recursos de alcance mundial). Un sitio web es un conjunto de páginas web. El fácil manejo y práctica de esta herramienta que lleva y trae información nos mantiene actualizados en infinidad de sentidos: tecnología. o red de redes ha llegado hasta nuestros días como una de las herramientas más importantes. propuesta gastronómica. A las páginas de un sitio web se accede frecuentemente a través de un URL raíz común llamado portada. ubicación. noticias. Introducción La Internet. que normalmente reside en el mismo servidor físico. Internet no tiene dueño ni pertenece a nadie. Bien. aunque los hiperenlaces entre ellas controlan más particularmente cómo el lector percibe la estructura general y cómo el tráfico web fluye entre las diferentes partes de los sitios. calendario de actividades y una sección para que los usuarios se pongan en contacto y reciban información. Indispensables. para el desarrollo. Una página web es un documento HTML/XHTML accesible generalmente mediante el protocolo HTTP de Internet. imágenes de lugar. El sitio web proporcionará información acerca del lugar: un poco de historia. Los URL organizan las páginas en una jerarquía. esto es de conocimiento de la comunidad que utiliza de manera libre esta red. 5 . El sitio web desarrollado es para el “Foro Cultural Café Tumbao”. 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 proyecto que a continuación 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.

6 . 2.El diseño del sitio web fue desarrollado con Dreamweaver. Respecto a la programación del sitio se uso el lenguaje PHP para la conexión con la base de datos MySQL. la gran mayoría de los sitios web del mundo están montados sobre estas plataformas. 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 través de la Internet. también se utilizaron las herramientas Inkscape y Fireworks para el desarrollo y edición de imágenes. la base de MySQL y el servidor Apache ya que son herramientas gratuitas y muy poderosas. Se decidió usar el lenguaje de programación PHP. Los ficheros del sitio web fueron alojados dentro de un servidor Apache.

para cuya solución se hace necesario la participación de la comunidad artística y general por la compleja gama de dificultades que la misma problemática actualmente presenta. La justificación de este proyecto radica en la mejora de la calidad de la imagen del Café Cultural Tumbao proyectándola al mundo a través de un sitio web. El dinero destinado a promover la cultura jamás será un gasto. los talleres artísticos que se ofrecen y la cartelera de eventos que esta misma ofrece. La ejecución del proyecto contribuirá en un avance significativo en la proyección de la imagen del Café. siempre será una inversión.3. Es por estas razones que el sitio web que se desarrollará resulta determinante en la proyección de la empresa al mundo. así como describir sus productos y servicios en forma general. el trabajo de artistas locales y foráneos que colaboran con el foro cultural Café Tumbao. Justificación Es indiscutible el impacto de un sitio web en la actualidad. fomento. ya que a través del sitio web se mostrará la oferta gastronómica. El proyecto cobra especial importancia por tener entre sus objetivos la construcción. que trascienda y supere el olvido en que tanto las autoridades como la ciudadanía mantienen esta situación. Así mismo es importante contar con una imagen que asegure la fortaleza de la organización y que nos de la seguridad de crear clientes prospecto a través del sitio web. Es importante tener presencia en la Internet para mostrar la información de las empresas. desarrollo y difusión del arte y la cultura de para la comarca lagunera. 7 .

Un año mas tarde Ray Tomlinson. poco mas tarde amplia su valor añadido con un primer programa de correo electrónico para relacionar. En 1970 ARPANET había crecido hasta 15 nodos con 23 ordenadores hosts (centrales). impulsado por la necesidad que tenían los desarrolladores de ARPANET de un mecanismo sencillo de coordinación. es decir unir varias redes separadas para que estas siguieran funcionando en caso de que alguna fuera destruida. La firma BBN ganó la oferta para diseñar 4 máquinas procesadoras de mensajes que crearían comunicaciones abiertas entre los cuatro dispositivos diferentes. y en cuatro sistemas operativos distintos. Marco teórico 4. En 1968. ARPA envío una petición a varias instituciones pidiendo ofertas para crear la primera red de área extensa (WAN). escribe el software básico de envío-recepción de mensajes de correo electrónico.1 Internet y redes posteriores La Advanced Research Projects Agency Network (“ARPANET” por sus siglas en inglés) fue una red de computadoras creada por el Departamento de Defensa los Estados Unidos como medio de comunicación para los diferentes organismos del país. Este proyecto de ARPA gradualmente fue evolucionando de la teoría a proposiciones reales de construir esas redes. 8 . ARPANET surgió de la necesidad del gobierno de los Estados Unidos de encontrar una manera de acceder y distribuir la información en caso de una catástrofe. reenviar y responder a mensajes. El objetivo de esta red es que si un centro de ordenadores fuera destruido la información no se parara. En 1966 la agencia ARPA tenía un programa con varias instituciones de investigación.4. almacenar. leer selectivamente.

protocolo de control de red).Crocker acabó el protocolo host a host inicial para ARPANET. donde explicaban como podria resolverse el problema de comunicación entre los diferentes tipos de computadoras. En 1972 ARPA cambia su denominación y es conocida de alli en mas como DARPA ( Defense Advanced Research Projects Agency ) y se realiza la primera demostración pública de la nueva tecnología de ARPANET . Vint Cerf (Stanford University) y Robert Kahn (BBN). por ejemplo: 9 . Esquema de conexión a Internet La conexión a Internet es el mecanismo de enlace con que una computadora o red de computadoras cuenta para conectarse a Internet.2 Esquema de conexión a la Internet Ilustración 1. 4. las primeras conexiones internacionales se realizan un año mas tarde entre el University College of London en Inglaterra y the Royal Radar Establishment in Norway. lo que les permite visualizar las páginas web desde un navegador y acceder a otros servicios que ofrece esta red. En 1974 dos investigadores. Las empresas que otorgan acceso a Internet reciben el nombre de proveedores (ISP). llamado Network Control Protocol (NCP. redactan un memoranda titulado "A Protocol for Packet Nertwork Internetworking".En 1970 el Network Working Group (NWG) liderado por S.

Telefónica de España. a través del concepto de puerto. Telmex. en Estados Unidos. en Argentina.3. Prodigy Internet de Telmex. Fue creado entre los años 1973 y 1974 por Vint Cerf y Robert Kahn. Entel. GTD Manquehue. es uno de los protocolos fundamentales enInternet. Arnet y Telefonica. Tooway y Fon son cinco proveedores españoles. Jazztel. El protocolo garantiza que los datos serán entregados en su destino sin errores y en el mismo orden en que se transmitieron. SMTP. Claro Chile.CMET. También proporciona un mecanismo para distinguir distintas aplicaciones dentro de una misma máquina. Telefónica del Sur. En Venezuela existen CANTV e Inter (Venezuela). Muchos programas dentro de una red de datos compuesta por computadoras pueden usar TCP para crear conexiones entre ellos a través de las cuales puede enviarse un flujo de datos. En Chile VTR. Movistar.com. Telefónica Chile.Ya. America Online (AOL) como el más exitoso entre muchísimos otros. Los sistemas de los extremos se sincronizan 10 .3 Protocolos de internet 4. SSH y FTP. incluidas HTTP. Las características del TCP son:  Orientado a la conexión: dos computadoras establecen una conexión para intercambiar datos. 4. En México.1 TCP Transmission Control Protocol (en español Protocolo de Control de Transmisión) o TCP. TCP da soporte a muchas de las aplicaciones más populares de Internet.

 Control de flujo: si el transmisor está desbordando el buffer del receptor por transmitir demasiado rápido.  Servicio de recuperación de Paquetes: el receptor puede pedir la retransmisión de un paquete. el receptor regresa un acknowledgement (reconocimiento) al transmisor indicando que recibió los paquetes.3. mientras que la dirección IP se puede cambiar.con el otro para manejar el flujo de paquetes y adaptarse a la congestión de la red. y a esta forma 11 . Dicho número no se ha de confundir con la dirección MAC que es un número hexadecimal fijo que es asignado a la tarjeta o dispositivo de red por el fabricante. el transmisor envía de nuevo el paquete. el transmisor puede reenviar los paquetes o terminar la conexión si el transmisor cree que el receptor no está más en la conexión. que corresponde al nivel de red del protocolo TCP/IP.  Error Checking: una técnica de checksum es usada para verificar que los paquetes no estén corruptos. 4.  Operación Full-Duplex: una conexión TCP es un par de circuitos virtuales. el receptor descarta paquetes. Sólo los dos sistemas finales sincronizados pueden usar la conexión. a una interfaz de un dispositivo (habitualmente una computadora) dentro de una red que utilice elprotocolo IP (Internet Protocol). cada uno en una dirección.  Acknowledgements: sobre recibo de uno o más paquetes.2 IP Una dirección IP es una etiqueta numérica que identifica. Esta dirección puede cambiar 2 ó 3 veces al día. Si el paquete no es notificado como recibido (ACK). de manera lógica y jerárquica. Si los paquetes no son notificados.

Los servidores de correo. no cambia con el tiempo. 4. y servidores de páginas web necesariamente deben contar con una dirección IP fija o estática. IP fija o IP estática). 12 . FTP públicos. Cada máquina mantiene una caché con las direcciones traducidas para reducir el retardo y la carga.de asignación de dirección IP se denomina una dirección IP dinámica (normalmente se abrevia como IP dinámica).3.3 ARP Es un protocolo de nivel de red responsable de encontrar la dirección hardware (Ethernet MAC) que corresponde a una determinada dirección IP. ya que de esta forma se permite su localización en la red. Para ello se envía un paquete (ARP request) a la dirección de difusión de la red (broadcast (MAC = xx xx xx xx xx xx)) que contiene la dirección IP por la que se pregunta. es decir. DNS. Los sitios de Internet que por su naturaleza necesitan estar permanentemente conectados. ARP permite a la dirección de Internet ser independiente de la dirección Ethernet. y se espera a que esa máquina (u otra) responda (ARP reply) con la dirección Ethernet que le corresponde. pero esto sólo funciona si todas las máquinas lo soportan. generalmente tienen una dirección IP fija (comúnmente.

en el cual. Es gestionado por un individuo. texto. Todas las páginas Web pertenecen a un sitio Web. Home Page es la página Web que aparece cuando introducimos el nombre de dominio de una página Web en el navegador.4 Cuadro comparativo entre sitios y páginas web SITIOS WEB PAGINAS WEB   Se localiza dentro de la WWW. Puede contener gráficos.   Home Page es el primer documento que ve el usuario cuando entra a un sitio Web. la información aparece mediante video. Se considera un documento del sitio Web. una compañía o una organización. texto.  Se localiza dentro de un sitio Web. audio. audio.   Normalmente esta formado por varias paginas Web.   13 . video. y otros materiales dinámicos o estáticos.4. etc.

14 . Ilustración 2.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). independientemente del sistema operativo utilizado en cada equipo. haga clic en Abrir sitio Web. 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. 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 contraseña de la siguiente manera: ftp://usuario:contraseña@servidor  En el menú Archivo.

Proporcione la información siguiente: Servidor Escriba el nombre del servidor. cambie este valor. cuyo formato puede ser ftp://server. y desactívela para escribir un nombre de usuario y una contraseña. 15 .   En el cuadro de diálogo Abrir sitio Web.  Haga clic en Abrir.  Directorio Escriba el nombre de la carpeta en la que desee abrir los archivos. haga clic en la ficha Sitio FTP.  Nombre de usuario y Contraseña Escriba las credenciales que le proporcionó el administrador del servidor FTP.  Inicio de sesión anónimo Active esta casilla de verificación si el servidor FTP no le exige que inicie sesión para tener acceso a los archivos.  Modo pasivo Active esta casilla de verificación si hay un firewall entre su equipo y el servidor FTP.  Puerto Si el administrador del servidor FTP le ha asignado un número de puerto que no sea el 21.

6. HTML: (Lenguaje de marcado de hipertexto) Lenguaje estándar de marcas empleado para documentos del World Wide Web.6 Componentes que debe reunir un sitio web Son varios factores los que debe reunir un sitio web. otra página o una ubicación diferente en la misma página. Página Web: Documento realizado en HTML y que es parte de un sitio Web. gráficos.1 Conceptos relacionados con el diseño y/o desarrollo Web. Lenguaje de programación: Lenguaje con el que está desarrollada una página Web. Aparte del HTML se pueden utilizar otros lenguajes complementarios como PHP.4. por ejemplo. A continuación se mencionan los componentes elementales que debe contener un sitio web. una dirección de correo electrónico. Un hipervínculo puede ser texto o una imagen. El destino es con frecuencia otra página Web. sonidos. documentos. ASP. Javascript… Sitio Web: Página principal y sus otras páginas. Hipervínculo: Al hipervínculo se le suele llamar “enlace Web” o en su versión anglosajona “link”. un archivo (como por ejemplo. Un hipervínculo es una conexión de una página a otro destino como. pero también puede ser una imagen. animaciones multimedia. multimedia y otros archivos asociados que se almacenan en un servidor Web o en el disco duro de un equipo. aplicaciones… 4. 16 . Una página Web está compuesta por uno o varios documentos html relacionados entre sí mediante hipervínculos (enlaces). un archivo multimedia o un documento de Microsoft Office) o un programa. Además estos documentos pueden contener otros elementos como pueden ser imágenes.

com Applets: Programas desarrollados con Java para mejorar la presentación de las páginas Web que realizan animaciones. que proporciona la dirección de Internet de un directorio Gopher. Front Page 2000 y Macro-media Dreamweaver. ISP: En el ámbito del desarrollo de sitios web. Hosting: Hospedaje Web. Ejemplos: M. juegos e interacción con el usuario.mitecnologico. http://www. y ftp://. hospedaje de sitios web.ofrece albergue para páginas Web haciendo que estén accesibles desde cualquier punto de Internet. que proporciona la dirección de Internet de una página Web. entre otros. Los diferentes servicios que pueden ofrecer son: conexión a Internet.google. registro de dominio. El tipo más común de dirección URL es http://.Editor: Programa utilizado para crear páginas Web sin la necesidad de tener que aprender el lenguaje. junto con el protocolo mediante el cual se tiene acceso al sitio o al recurso. Otros tipos de dirección URL son gopher://. 17 . que proporciona la ubicación de red de un recurso FTP.com . se puede decir que un ISP es un proveedor de servicios para web. Cliente FTP: Programa que permite conectarse al servidor para publicar páginas Web. Dominio: Dirección Web asociada a una página Web. Servidor: Máquina conectada a Internet que –entre otros servicios. estadísticas para web. servicios de contadores de servicios. libros de visitas gratuitos. Ejemplos: http://www. URL: (Universal Resource Location / Localizador de recursos universal) Cadena que proporciona la dirección de Internet de un sitio Web o un recurso del World Wide Web.

Estos elementos incluyen. diseñar. WMF y PNG. Tablas: Deben utilizarse unicamente para datos tabulados. Webmaster: Un webmaster es el encargado de crear. entre otros.7 Elementos de una página web Una página web tiene contenido que puede ser visto o escuchado por el usuario final. pero no exclusivamente: • Texto.) 18 . También puede especificar propiedades para elementos de página como tablas. promocionar y mantener un sitio web. con lo que vemos en el monitor una fuente que realmente no poseemos. pero es poco frecuente. 4. Nunca para maquetar. Propiedades: Características de un elemento del Web actual. Existen diferentes formatos: GIF. Banner: Elemento gráfico con forma rectangular. cuyo contenido es publicidad. El texto editable se muestra en pantalla con alguna de las fuentes que el usuario tiene instaladas (a veces se utiliza una tecnología de fuentes incrustadas. maquetar. cada una de las cuales contiene un documento de hipertexto independiente de los demás. gráficos y elementos activos. como el título y la dirección URL de un Web o el nombre y el valor inicial de un campo de formulario. estructurar.Frames (marcos): Áreas rectangulares que subdividen las ventanas de algunas páginas Web. BMP. etc. JPEG. publicar. botones de navegación. y su texto no es editable. son realmente gráficos. TIFF. Imagen: Archivo gráfico que se puede insertar en una página Web y mostrar en un explorador de Web.) El texto editable puede marcarse con el ratón o el teclado y copiarse a otra aplicación. normalmente animado. en especial los títulos. como el bloc de notas (muchos de los elementos textuales de las páginas.

• Plantillas de diseño web 4. generalmente Java Script. • Meta tags. • Hipervínculos. cortar y pegar. JPG y PNG. consisten en el aprovechamiento de la experiencia del usuario en herramientas y funciones de escritorio tan naturales como copiar. con el alcance y la flexibilidad de presentación y despliegue que ofrecen las aplicaciones o páginas Web junto con lo mejor de la multimedia (voz. La página web también puede traer contenido que es interpretado de forma diferente dependiendo del navegador y generalmente no es mostrado al usuario final. 19 . pero no exclusivamente: • Scripts. WAV y MP3.Cascading Style Sheets).8 Aplicaciones de Internet Las Aplicaciones de Internet.Scalable Vector Graphics).. Son ficheros enlazados desde el fichero de la página propiamente dicho. • Gráficas Vectoriales (SVG .• Imágenes. Vínculos y Marcadores. etc. • Adobe Shockwave. vídeo. generalmente en MIDI.). Hablamos en detalle de este tema en la sección de Gráficos para la Web. • Audio. Se puede hablar de tres formatos casi exclusivamente: GIF. • Hojas de Estilo (CSS . Éstos elementos incluyen. • Adobe Flash. redimensionar columnas. y ordenar etc.

agilizando su acceso. junto con una interfaz de usuario Web. llamado Servidor Web. lo que podría ayudar en la labor de escribir código XHTML. el cual servira de apoyo para los estudiantes. Estas aplicaciones están basadas en plataformas J2EE o . Sun o Microsoft que se encuentran desarrollando recursos para hacer de este tipo de aplicaciones una realidad.pueden ser cargadas de un ordenador o computador local. 20 . Recomendamos fuertemente usar XHTML en lugar de HTML. Una página Web está compuesta por uno o varios documentos html relacionados entre sí mediante hipervínculos (enlaces). segura y escalable. Junto a cada tag encontrarás un símbolo indicando si el tag es vacío o no. el cual representa una mejor opción no tan difícil de lograr. garantizan la desvinculación de la capa de presentación es decir acceso a la aplicación desde cualquier computador en cualquier lugar del mundo.Se puede decir que las RIA son la nueva generación de las aplicaciones y es una tendencia ya impuesta por empresas como Macromedia. Entre los beneficios principales de aplicaciones RIA tenemos un mejoramiento importante en la experiencia visual. La Pagina Web: es una fuente de información adaptada para la World Wide Web (WWW). que hacen del uso de la aplicación algo muy sencillo. debido a los beneficios y a las pequeñas diferencias.01.NET. 4. que también pertenecen al estándar XHTML (lenguaje de marcas hipertextual extensible) con la excepción de aquellos desaprobados. ofrece mejoras en la conectividad y despliegue instantáneo de la aplicación. con un front-end Flash y utilizan una arquitectura Cliente/Servidor asíncrona.9 Tag HTML A continuación se muestra una lista de todos los tags HTML (lenguaje de marcas hipertextual) para el estándar HTML 4.

Esta es una buena razón para dejar de usarlos. XHTML 1.El color rojo se ha usado para marcar tags desaprobados. cuyo uso no es recomendado.0). Note. 21 . que los tags y atributos desaprobados en HTML pueden no ser soportados por futuras versiones (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. Esto se debe a que han sido reemplazados por otros tags (por ejemplo.

Citar párrafos Contiene los elementos a mostrar Fuerza un quiebre de línea Crea un botón Establece un título 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 .1 Lista de tags HTML Tag <!-.4.9.--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> Vacío Descripción corta Inserta comentarios ocultos Establece el tipo de documento Inserta vínculos o marcadores Explica abreviaciones Explica acrónimos Provee información de contacto Inserta un applet (scripts) Define sectores para mapas de imagen Texto en negrita URI base para resolver URIs relativas Tamaño de la fuente predeterminado Suprime el algoritmo bidireccional Texto en tamaño "grande".

<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 definición a un término Inserta una lista de directorios (árbol) Define un bloque de contenido Define una lista Inserta un término 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 línea o regla horizontal Contiene al documento Muestra texto en itálica Inserta un marco dentro del documento Inserta una imagen Muestra controles de entrada Indica texto insertado Entrada de línea 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 título a un "fieldset" Define un artículo en una lista Ofrece informacón relacional Define un mapa de imagen Lista menú Da información 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 opción en un control select Define un párrafo Da un parámetro para un objeto Bloque de texto preformateado Inserta una cita en una línea Muestra texto tachado Representa texto de programas Contiene scripts Crea un control select Muestra texto en letra "pequeña" Asigna atributos al texto en líneas Muestra texto tachado Indica énfasis fuerte Define atributos visuales (hojas estilo) Define texto en subíndice 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 líneas múltiples Define un pie en una tabla Celda de encabezado de una tabla Define un encabezado de tabla Define el título 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 .

Cursiva.9. Glosario. Titulo de la página. Texto que el usuario debe escribir. Menús. Mayor enfatis (negritas). Cuerpo. Resalta palabra que se va definir. Titulo en la barra del navegador. Directorio. Lista con viñetas y sin orden. Texto pre formateado. Texto monoespaciado. ESTILOS DE CARÁCTER FISICOS <b></b> <i></i> <tt></tt> <u></u> <pre></pre> PROPOSITO Negrita. Variable remplazada por valor real. Subrayar. Fuente monoespaciada.4. ESTILOS DE CARÁCTER LOGICOS <em></em> <strong></strong> <code></code> <samp></samp> <kdb></kdb> <var></var> <dfn></dfn> <cite></cite> PROPOSITO Caracteres enfatizados. 26 . Se usa para sitas cortas. Cada elemento encabezado de lista. LISTAS <ol>…</ol> <li>…</li> <ul>…</ul> <menú>…</menú> <dir>…</dir> <dl>…</dl> PROPOSITO Listas numeradas u ordenadas.2 Cuadro comparativo de formato de texto y tags más utilizadas en HTML TAGS BASICOS <HTML></HTML> <HEAD></HEAD> <TITLE><TITLE> <BODY></BODY> PROPOSITO Indica que es código HTML. Muy similar a code.

SALTOS Y LINEAS <hr> <br> PROPOSITO Línea divisora. Salto de línea. 27 .

1 Tabla comparativa de formatos de compresión de imágenes Formato Tipo compresión Con JPEG pérdida de Ventajas  Desventajas muy  Pérdida de calidad notoria niveles compresión  Ficheros reducidos (algoritmo JPEG) a altos de  Muy bueno para fotografías Paleta (obsoleto limitada para de GIF(algoritmo LZW) Sin pérdida.  Permite animaciones (no adecuado  imágenes muchos colores) Potenciales problemas aunque limitado a 256 colores para Wikipedia) legales (en algunos paises en otros ya venció la licencia)  Excelente para gráficos  Ficheros grandes para imágenes de muchos (fotografías.10 Imágenes que se utilizan en el diseño web: características Los formatos de las imágenes potencian su usabilidad y adaptabilidad.) colores PNG Sin pérdida  Permite transparencias Observación: en el caso de imágenes con texto no es conveniente usar el formato JPEG ya que produce un desenfoque que dificulta la lectura. ilustraciones. color) ocupando el menor tamaño posible. 28 . 4.10. etc. Una de las principales características de las imágenes para la web es el tamaño: que ofrezcan la mayor calidad (nitidez.4.

Esta técnica consiste en que al dar clic en algún texto o imagen el navegante se pueda desplazar a otra parte dentro de la misma página o sitio. se acuñó el término Database (Base de datos) para una colección o recopilación de datos relacionados y organizados en forma electrónica. ya que se puede decir que es “cualquier colección de datos compilados”. es decir. 2. de tal manera que Access es una DBMS y los archivos que genera y administra son las Bases de Datos. Esta técnica permite que los navegantes se accedan a la información con mayor facilidad. El uso de estas. DataBase Manager System (Sistema de administración de bases de datos) para el programa que se encarga de crear y administrar la base de datos.11 Importancia de los enlaces dentro de una página web. como la información 29 . en forma tabular. los negocios. y los medios de información. La manera clásica de organizar los datos es representándolos en forma de renglones y columnas. aunque no con este nombre. Para hacer este tipo de enlaces hay que hacer dos operaciones: 1.4. se remonta a tiempos remotos en la historia. Los enlaces dentro de la misma página web ayudan a la navegación dentro de la misma.12 Bases de datos El concepto Base de Datos es uno de los más utilizados por cualquier persona que tenga contacto con las computadoras. y DBMS. y aun sin tener contacto con estas. con la introducción de las computadoras en el ámbito de la educación. Establecer marcadores a lo largo de la página (son los lugares a los que queremos saltar con los enlaces). Sin embargo. Poner enlaces que salten a los marcadores 4.

Esto representa una ventaja en comparación con otros lenguajes que se ejecutan en el propio navegador. Bien comencemos por el primero. escolares. Resumiendo: 30 . Qué ventajas son estas.1 ¿Qué es PHP? Qué es PHP y qué es MySQL. PHP presenta otras ventajas frente a otros lenguajes. a diferencia de otros lenguajes en los que se debe comprar el software necesario para su utilización. el que se ejecute el código desde el servidor representa una gran ventaja. precisión en los cálculos y obtención de informes fácilmente. 4. La principal es que todas nuestras páginas podrán ser vistas en cualquier ordenador –independientemente del navegador con que se cuenteya que el código se ejecuta en el servidor. Si bien. y no en las tradicionales hojas tabulares? Las principales: facilidad en el procesamiento de la información. La principal es que se trata de un software de programación gratuito y todo el mundo puede utilizarlo sin tener que pagar un coste por trabajar con él. médicos.financiera o contable.13. ¿Qué significa esto? Que un lenguaje de servidor es aquel que se ejecuta en el servidor donde las páginas se encuentran alojadas. etcétera). se está trabajando con bases de datos. Si los datos se encuentran estructurados. Por qué no ocurre esto (ver nuestras páginas desde cualquier ordenador) al ejecutarse el código desde el navegador: porque muchos navegadores no son capaces de entender todo el código y esto se ve reflejado en errores al mostrar el resultado de las páginas mostrando. PHP es un lenguaje de alto nivel que se ejecuta en el servidor.13 PHP Y MySQL 4. ¿Qué ventajas representa tener esta información en una computadora. posibilidad de organizar los datos conforme a criterios distintos. sin importar el tema (comerciales. gran velocidad de respuesta.

la que el mayor número de programadores en PHP eligen. 4. Es un lenguaje que combina potencia.2 ¿Qué es MySQL? Luego. así como la conexión de varios usuarios. permitiendo alcanzar un elevado nivel de integración con el navegador. Los sitios de mayor éxito están basados en el uso de este lenguaje. MySQL es una base de datos. Por algo será. versatilidad y sencillez de aprendizaje.  Se comunica perfectamente con HTML y JavaScript. Es un lenguaje de programación totalmente libre. qué es MySQL. MySQL soporta el lenguaje SQL. lo que en el ámbito informático se conoce como open source. Además.13. por si decide modificarlo para adaptarlo a sus necesidades específicas. tan necesarias para gran cantidad de proyectos modernos. 31 .  Permite gestionar eficientemente cualquier elemento de una página Web. Pero no sólo eso. Esto quiere decir que usted podrá disponer de la última versión completamente gratis.  Ningún otro lenguaje de programación está tan extendido en Internet. puede disponer libremente de código fuente original del lenguaje.   Es un lenguaje en constante evolución.  Gestiona con eficacia bases de datos.

trabajar con el lenguaje de programación de páginas Web PHP representa muchas ventajas ya que es muy potente y muy extenso. que se puede decir de la combinación del lenguaje de programación PHP y la base de datos MySQL.Qué ventajas presenta MySQL. sería desaprovechar un gran número de ventajas que nos ofrece el lenguaje. 32 .  Es un gestor de base de datos sensiblemente más rápido y eficiente que la mayoría de los que hay en el mercado. Una de las grandes ventajas de esta combinación es que PHP dispone de una amplia lista de funciones para ser utilizadas con la base de datos MySQL. muchos de los cuales. aparte de que en la Internet existe gran cantidad de documentación. Como comentario vale la pena comentar que existen libros que pueden brindar este soporte. Como se ha podido ver. además son de pago. La principal (al igual que PHP) es que es una base de datos gratuita y puede ser utilizada por cualquier usuario sin costo alguno. este no será su caso. Resumiendo:  Al igual que PHP. en específico la base de datos MySQL. Ahora bien. pero el no trabajar con una base de datos.  Permite una gran versatilidad a la hora de almacenar y gestionar todo tipo de datos. Aunque existen licencias de pago. destinadas a grandes usuarios que necesitan un soporte técnico especializado. tanto en inglés como en español. se trata de una herramienta open source. PHP y MySQL son utilizados en conjunto en un gran número de páginas Web debido a la potencia que se consigue al ejecutar estas dos aplicaciones juntas.

que implementa el protocolo HTTP/1. etc. es extremadamente fácil de configurar. La mayoría de los sitios que se visitan a diario están corriendo sobre este servidor. 4. 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 página solicitada). GNU/Linux. El servidor HTTP Apache es un software (libre) servidor HTTP de código abierto para plataformas Unix (BSD. Macintosh y otras.14 Una IP especial: 127. si solicitamos un documento.4. Cuando un usuario se conecta a Internet y solicita una página Web a través de su barra de direcciones. Por otra parte. Como vemos. o cualquier recurso a esta dirección. En este ordenador está funcionando un programa que se conoce. de hardware y software. cada elemento de una arquitectura cliente-servidor se compone. Windows. genéricamente como servidor Web.0. Por una parte es gratuito. 33 .1 Esta dirección se conoce como de bucle local o localhost. por lo tanto. muy seguro ante los ataques en la red. Las razones son varias. Además.15 El servidor Apache El servidor Apache (http://www.0.11 y la noción de sitio virtual. es uno de los servidores más robustos que existen. Así pues.apache. en realidad lo estamos solicitando a nuestro propio ordenador. podemos decir que un servidor es un ordenador que almacena páginas Web y también un programa que se encarga de entregar dichos documentos a los clientes que lo soliciten. que lo busca en una carpeta determinada (aquella que se ha definido como localhost). Este programa busca la página solicitada en el disco duro del servidor y se la envía al cliente. No se tiene que pagar nada para emplearlo.org) es el servidor Web más extendido en Internet. Cualquier plataforma del mundo (cualquier sistema operativo) sabe que. página Web. Por analogía. Identifica siempre al ordenador con el que estamos trabajando.). lo que hace es establecer contacto con el ordenador que tiene almacenada esa página Web.

y la tribu Apache fue la última en rendirse al que pronto se convertiría en gobierno de EEUU. Su nombre se debe a que Behelendorf eligió ese nombre porque quería que tuviese la connotación de algo que es firme y enérgico pero no agresivo.16 Macromedia Dreamweaver 8 Macromedia Dreamweaver 8 es un componente que proporciona una plataforma para el desarrollo y la distribución de servicios Web. Era. pero más tarde fue reescrito por completo. Apache. Alcanzó su máxima cuota de mercado en 2005 siendo el servidor empleado en el 70% de los sitios Web en el mundo. Apache presenta entre otras características mensajes de error altamente configurables.Cuando comenzó su desarrollo en 1995 se basó inicialmente en código del popular NCSA HTTPd 1. 34 . (Estadísticas históricas y de uso diario proporcionadas por Netcraft2). bases de datos de autenticación y negociado de contenido. o explotar por los usuarios locales malévolos en las disposiciones de recibimiento compartidas que utilizan PHP como módulo de Apache. Sin embargo. algunas se pueden accionar remotamente en ciertas situaciones.3. Además Apache consistía solamente en un conjunto de parches a aplicar al servidor de NCSA. es el servidor HTTP más usado. Apache tiene amplia aceptación en la red: desde 1996. El servidor Apache se desarrolla dentro del proyecto HTTP Server (httpd) de la Apache Software Foundation. 4. a patchy server (un servidor "parcheado"). pero fue criticado por la falta de una interfaz gráfica que ayude en su configuración. La mayoría de las vulnerabilidades de la seguridad descubiertas y resueltas tan sólo pueden ser aprovechadas por usuarios locales y no remotamente. y en esos momentos la preocupación de su grupo era que llegasen las empresas y "civilizasen" el paisaje que habían creado los primeros ingenieros de Internet. sin embargo ha sufrido un descenso en su cuota de mercado en los últimos años. en inglés.

4. páginas y aplicaciones Web y que además permite trabajar en un entorno de edición visual sin necesidad de escribir código. también es posible crear el código manualmente gracias a las numerosas herramientas y funciones relacionadas a la codificación. Sí bien Macromedia Dreamweaver 8 es un editor profesional para diseñar. compañía que fue comprada en 2005 por Adobe Systems. Originalmente fue desarrollado por Macromedia. codificar y desarrollar sitios. Macromedia Fireworks 8 es un complemento que permite a Macromedia Dreamweaver 8 diseñar páginas Web de alta calidad.17 Macromedia Fireworks Fireworks es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash). pero con más parecido a un taller destinado para el manejo híbrido de gráficos vectoriales con Gráficos en mapa de bits y que ofrece un ambiente eficiente tanto para la creación rápida de prototipos de sitios Web e interfaces de usuario. Y es aquí donde se pueden crear conexiones a sitios PHP. el desarrollo de aplicaciones Web dinámicas que interactúan con bases de datos es otra de las ventajas de Dreamweaver 8. Por otra parte. Esto se consigue utilizando las herramientas visuales de composición logrando un desarrollo rápido de aplicaciones de Internet y un amplio soporte para la creación de código.Dreamweaver 8 permite la creación y administración de sitios Web profesionales así como potentes aplicaciones de Internet. como para la creación y Optimización de Imágenes para web. Otra de las ventajas de trabajar con Macromedia Dreamweaver 8 es que se pueden crear conexiones con bases de datos. 35 .

transformaciones. razón dorada.18 Inkscape Inkscape es un editor de gráficos vectoriales de código abierto. EPS. de usar y de mejorar. 4. texto. clones. El objetivo principal de Inkscape es crear una herramienta de dibujo potente y cómoda. razón áurea. trazos. operaciones complejas con trazos. totalmente compatible con los estándares XML. PNG. Inkscape también soporta meta-datos Creative Commons. y estando seguros de que Inkscape sea fácil de aprender. SVG y CSS. edición de nodos. También queremos mantener una próspera comunidad de usuarios y desarrolladores usando un sistema de desarrollo abierto y orientado a las comunidades. marcadores. edición de XML directo y mucho más. y TIFF y exporta PNG asi como muchos formatos basados en vectores. 4. vectorización de archivos gráficos. gradientes. usando el estándar de la W3C: el formato de archivo Scalable Vector Graphics (SVG).6 36 . divina proporción. texto en trazos. patrones y agrupamientos. mezclas de canales alfa. Las características soportadas incluyen: formas. JPEG. con capacidades similares a Illustrator. CorelDraw o Xara X. alineación de textos.Fireworks está disponible de forma individual o integrado en Adobe CS3/CS4/CS5 y por tanto ha sido diseñado para integrarse con otros productos de Adobe. Puede importar formatos como Postscript. capas. sección áurea o simplemente Golden Ratio es una fórmula matemática un tanto compleja que se concreta en el número phi (φ): Φ=(1+√5) ≈1.19 Proporción áurea La proporción áurea.61803 Aunque puede expresarse de forma más simple como proporción 1:1. como Dreamweaver y Flash. Freehand.

Fue aplicada desde la antigüedad como patrón geométrico y estético. Distribución del encabezado (Proporción áurea) 37 . A continuación se muestra de forma gráfica el resultado de cumplir con esta áurea proporción. al coincidir como esquema en algunos modelos de la Naturaleza: plantas. animales. La distribución del encabezado quedaría así: Ilustración 3. pero también el mismo cuerpo humano. también se aplica al diseño de páginas web. es la base de los números de Fibonacci. Además.

Distribución de una página de internet (Proporción áurea) 38 .Este es un ejemplo de la distribución de la página en general: Ilustración 4.

Las lámparas miden aproximadamente 2 metros y medio. Ilustración 5. se tomó como logotipo a estas porque son representativas del café. La parte más ancha se encuentra en la parte de abajo y la parte más angosta está pegada al techo.5.2 Logotipo de la página El logotipo de la página simula alguna de las lámparas que se encuentran en las salas del Café Tumbao. Logotipo del sitio 39 . Es decir casi llegan al piso de las salas. A continuación se describen las lámparas para que quede claro el por qué del logo. Las lámparas son una especie de conos elaborados con aros alámbricos y forrados con tela o papel periódico. Desarrollo 5.1 Título de la página Café Tumbao 5.

Tumbao: Liga que nos llevará a la página que nos presentará información sobre el Café Tumbao. Secciones: Tumbao. La estructura de árbol o jerárquica se da de la siguiente manera: a partir de una página de bienvenida o portal (raíz) se abrirán las secciones que a su vez estas nos ligaran al contenido de las páginas. Mapa del sitio 5. Estructura del sitio: Raíz: Página de bienvenida. Galería. 40 .5. Talleres.4 Estructura del sitio La estructura del sitio web para el Café Tumbao estará definida de la siguiente manera: estructura de árbol o jerárquica. Inicio: Mostrará una fotografía del café. Es la portada dentro del sitio. Carta. Calendario y Contacto.3 Mapa del sitio Ilustración 6.

Contacto: Esta liga nos llevará a la sección de contacto entre la página del Café Tumbao y los visitantes del sitio. Galería: El sitio contendrá una página con la galería de imágenes y es esta liga la que nos lleva a esta parte del sitio. Calendario: Esta página contendrá un calendario de eventos que se presentarán en foro del Café Tumbao. Talleres: El Café Tumbao dentro de sus actividades tiene varios talleres artísticos y es aquí donde se mostrará información acerca de ellos. 41 . Enlace con la base de datos: Aquí sólo 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.Carta: Esta liga nos llevará a la página en que se muestra la carta de alimentos del Café Tumbao.

42 . Primera pantalla que aparece al ingresar al sitio. al dar clic en cualquiera de las imágenes (ya sea la fotografía o el logotipo del sitio) se ingresará a la pantalla en la que muestran las ligas para interactuar dentro del sitio. Ilustración 7.5.5 Pagina principal Esta es la primera pantalla que se mostrará al ingresar al sitio.

los diseñadores industriales y de moda. dependiendo de su longitud de onda (del color en concreto) produciendo diferentes sensaciones de las que normalmente no somos conscientes. al fin. Calendario. Galería. etcétera. Desde hace años se han hecho todo tipo de pruebas para analizar las sensaciones que sugieren los colores. Contacto. las ligas que muestra son: Inicio. El efecto que producen los colores funciona. son bien conscientes de ello y utilizan los colores para asociarlos coherentemente al tipo de producto que quieren hacer llegar. y. Carta. Pantalla principal del sitio. Talleres. Pero la gente que trabaja en agencias de marketing y publicidad.6 Los colores El color es una parte del espectro lumínico. 5. los asesores de imagen de empresa. es energía vibratoria. Tumbao. Esta energía afecta de diferente forma al ser humano. 43 .Al dar clic sobre cualquiera de las imágenes (el logotipo o la fotografía) se mostrará la siguiente pantalla. Ilustración 8.

ante todo intenta comunicar y lo hace con palabras. etcétera. 44 . normalmente las pautas seguidas con los colores no son aleatorias. El gris se usó de color de fondo de las pantallas. El círculo y la imagen de la taza están formados por el negro y el naranja. Gris. Este color da estabilidad. de comunidad. que son las imágenes que se muestran de forma vertical en la parte izquierda. con imágenes y. Las ligas. Por su parte. El naranja se usó porque esta relacionado entre otras cosas con los alimentos. sus radiaciones calman los dolores neurálgicos y resuelven algunos casos de fatiga nerviosa. el negro se usó para dar un gran contraste entre la forma de la taza el vapor y el fondo. con colores. en primera instancia. El fondo de estas imágenes (ligas) es verde. contienen los siguientes colores. El naranja es el color de fondo y el negro es para la imagen de la taza. de empresa.¿Y qué es un sitio web si no un escaparate personal. insomnio. Verde. se usó de fondo porque (entre otras explicaciones de la psicología de los colores) es un excitante emotivo que favorece la digestión. El verde es un sedativo que dilata los capilares y tiene un efecto reductivo de la presión. etcétera? Además de muchas otras funciones que cada sitio pueda tener. se usó para dar formalidad al banner. A continuación se da una justificación de los colores que se usaron en el diseño del sitio. Inspira la creatividad y simboliza el éxito. Cuando un sitio web está diseñado por profesionales con sólidos conocimientos de diseño gráfico.

la elegancia y la formalidad.El color de la tipografía es negro para que contraste y resalte el nombre de las ligas. Para el texto de las pantallas que se encuentran dentro del marco principal se usó la tipografía “Times New Roman”. 5. Por otra parte el color negro está asociado al poder.7 La tipografía Para el diseño del sitio se usaron dos tipografías: Para el logo y las ligas se usó la tipografía “mmmm Coffee” con el objeto de usar una tipografía creativa que atrajera la atención de los visitantes del sitio. 45 . Esto con el objeto de usar u na tipografía clara que permitiera a los visitantes leer sin ningún problema la información que la página le brinda.

46 . El naranja es el color de fondo y el negro es para la imagen de la taza. se usó para dar formalidad al banner. Los colores que se usaron son por las razones siguientes: El naranja se usó porque está relacionado entre otras cosas con los alimentos. el negro se usó para dar un gran contraste entre la forma de la taza el vapor y el fondo. El banner tiene un formato . se usó de fondo porque (entre otras explicaciones de la psicología de los colores) es un excitante emotivo que favorece la digestión. por ejemplo en la pantalla que aparece después de llenar el formulario de contacto.8 Banner El banner que a continuación se presenta es el que se usará dentro del sitio en ciertos lugares estratégicos. Por su parte. Ilustración 9.5.GIF y es animado. el negro y el naranja. Banner para el sitio. El banner está formado por dos colores.

A continuación se muestran la manera en que estás cabeceras se insertaron haciendo uso de Dreamweaver.9 Cabeceras En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños de letra) por medio de las etiquetas <h1><h2><h3><h4><h5> y <h6>.html 1. 4. En el apartado de la vista diseño insertamos en este caso el título del texto que es “Carta”. A continuación se muestra una imagen que nos señala los pasos descritos. Después de haber seleccionado el texto vamos a la barra de propiedades y ahí configuramos la cabecera. que es el equivalente a la etiqueta <h1>. En la barra de propiedades de la vista diseño vamos a configurar la cabecera de nuestro título. Para este sitio las cabeceras que se utilizaron fue la etiqueta <h1>. Abrimos el fichero en Dreamweaver. (La imagen que se muestra adelante tiene abiertas las vistas código y diseño de Dreamweaver). todas con su respectiva etiqueta de cierre. En la parte superior izquierda de la barra nos aparece la opción “Formato” y seleccionamos “Encabezado 1”. Estos son todos los pasos que hay que seguir para agregar los encabezados en nuestros ficheros. En todas las pantallas que se muestran en el área principal de los marcos se utilizó el mismo formato para los títulos de las pantallas y para el texto. Como ya se mencionó anteriormente todos los ficheros guardan el mismo formato. 47 . En este caso se muestra como se desarrolló la cabecera del fichero Carta. 3. Lo primero que se debe hacer es seleccionar el texto al cual le vamos a aplicar el tamaño de las cabeceras.5. 2.

48 . Cabeceras.Se selecciona el texto En el apartado Formato de la Barra de propiedades seleccionamos Encabezado 1 Ilustración 10.

La tabla se inserto en el fichero calendario. Inserción de una Tabla.html 2.html para mostrar las fechas de eventos de lugar. Abrimos nuestro fichero calendario.10 Tablas A continuación se muestra de manera detallada la forma en que se insertó la tabla usada en nuestro sitio haciendo uso de la herramienta Dreamwaver. 1.5. En el menú Insertar seleccionamos la opción Tabla Ilustración 11. 49 .

Configuración de una tabla. es decir: número de filas.3. ancho de la tabla. etc. En la ventana que nos aparece al seleccionar esta opción configuraremos nuestra tabla. Para este caso seleccionaremos 3 filas y dos columnas con un ancho de 600 y un grosor de borde de 2 pixeles. de columnas. Ilustración 12. 50 .

Después de haber configurado nuestra tabla la llenamos con los datos correspondientes. Ilustración 13. Llenando una tabla. en este caso la fecha del evento la pondremos en la columna de la izquierda y el nombre del evento en la derecha.4. 51 .

11. En primer lugar se necesitarán dos imágenes. inmediatamente seleccione Objetos de Imagen y en el menú emergente elija Imagen de sustitución. Después de conseguir las dos imágenes necesarias para aplicar este comportamiento interactivo se necesitará ir al menú principal del programa y elegir la opción Insertar.5.11 Imágenes de sustitución y Álbum web 5. tal como muestra la siguiente imagen. es decir.1 Imagen de sustitución La imagen de Sustitución describe un comportamiento interactivo que se activa simplemente al pasar el cursor del mouse encima de la imagen en cuestión. una que estará en estado OFF o Apagado. la cual actuará cuando el cursor del mouse no esté encima de la imagen. esto quiere decir que se hará presente siempre y cuando el cursor del mouse esté encima de la imagen con el comportamiento interactivo. la segunda imagen solo actuará en estado ON o Encendido. cuando se desliza por encima el cursor del mouse sobre la imagen ésta cambiará por otra imagen. 52 .

Imagen original: Esta imagen será la que actuará en estado OFF. 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 sustitución) Texto Alternativo: 53 .Ilustración 14. Es importante marcar esta casilla de verificación. Imagen de sustitución: Esta imagen será la que actuará en estado ON Carga previa de imagen de sustitución. ya que permite que se incluya automáticamente en la carga de la página la(s) imagen(es) de sustitución (las del tipo ON). En este instante rellenaremos el cuadro de diálogo Insertar imagen de sustitución. Nombre de la imagen: Servirá para tener una referencia de la imagen que presenta un comportamiento interactivo. Ruta para localizar la inserción de una imagen de sustitución. A continuación se describirá brevemente cada campo.

en este caso nos enviara al fichero que muestra la pantalla de inicio: untitled-8. ir a URL: En este campo seleccionamos el fichero al cual nos enviará al dar clic sobre la imagen de sustitución.html Ilustración 15. Este campo es opcional. Imágenes de sustitución para el sitio web del Café Tumbao 54 .Este campo se refiere al efecto que se le inserta a las imágenes que permite mostrar un texto después de permanecer el cursor del mouse por pocos segundos encima de la imagen en cuestión. Configuración de una imagen de sustitción. Al hacer clic.

55 .Ilustración 16. A continuación se describe paso a paso la creación del álbum web. 5. El primer paso es crear una carpeta llamada Álbum en la que se guardarán las imágenes que se mostrarán y dentro de esta carpeta se creará otra llamada thumbnails que es donde se guardarán las imágenes en formato pequeño. 1. Imagen de sustitución para el sitio. Creación de carpetas para el álbum web.11. Ilustración 17.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 permitía por el uso de marcos.

56 . Ilustración 18. El tamaño al que se reducirá la imagen es de 150 por 113 pixeles. En este fichero insertaremos los thumbnails que nos servirán como liga para mostrarnos en otro fichero la imagen ampliada. En este caso se usó Fireworks para la reducción de las imágenes que se mostrarán. Lo primero es abrir la imagen correspondiente de la carpeta thumbails en Fireworks. El segundo paso es crear los thumbnails necesarios para la creación del sitio. 3.html.2. El siguiente paso es abrir en Dreamweaver nuestro fichero que tiene como nombre galería. Reduciendo las imágenes en Fireworks para los thumbnails. A continuación se muestra un ejemplo de cómo se crea un thumbnail con Fireworks.

Ilustración 19. Thumbnails insertado. Ilustración 20. El siguiente paso es crear nuestros ficheros con las imágenes ampliadas. que son las que nos mostrará cuando demos clic sobre los thumbnails. 57 . Inserción de imágenes desde la carpeta thumbnails. 4.

Imágenes ampliadas. 58 .Ilustración 21. Álbum y Siguiente. Ilustración 22. Cada imagen llevará en la parte de abajo las ligas Atrás. Ligas de las imágenes.

a continuación se muestra el resultado final en dos imágenes.html para crear las ligas de los thumbnails con el fichero correspondiente que contiene la imagen ampliada. Luego de haber seguido estos pasos ha quedado el álbum web.5. 59 . Ligas de los thumbnails. la primera muestra los thumbnails y la segunda muestra un imagen ampliada. Después de haber guardado un archivo con su correspondiente imagen ampliada vamos nuevamente a nuestro fichero galeria. 6. Ilustración 23.

60 . Galería de imágenes: ampliaciones. Ilustración 25. Galería de imágenes: thumbnails.Ilustración 24.

Ilustración 26. o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. 1. El segundo paso es crear en un archivo nuevo nuestra hoja de estilos con la extensión . que en este caso se llamará estilos. 2. o cómo se va a imprimir. En este caso nuestra hoja de estilos nos servirá para manipular el color de fondo de la pantalla y el color de la tipografía. El primer paso fue crear el código html.cafetumbao. A continuación se muestra como ejemplo el código del fichero tumbao.css. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.html.co. Este es el código: 61 .12 CSS Hojas de Estilo en Cascada (Cascading Style Sheets). A continuación se describe la forma en que se creó la hoja de estilos para el sitio web www. en este caso el código se creó de forma automática ya que se usó Dreamweaver para el diseño de las páginas del sitio web.5.html.css. es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla. Código HTML del fichero tumbao.cc.

3. 62 . El último paso es agregar el código correspondiente en nuestros archivos . Esta liga de código 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. Ilustración 28. Código que liga nuestros ficheros HTML con la hoja de estilos.html para ligarlos con nuestra hoja de estilos. En la siguiente imagen se muestra la línea de código que liga nuestros ficheros con estilos.Ilustración 27. Código de la hoja de estilos.css.

Alcanzó su máxima cuota de mercado en 2005 siendo el servidor empleado en el 70% de los sitios web en el mundo. y en esos momentos la preocupación de su grupo era que llegasen las empresas y "civilizasen" el paisaje que habían creado los primeros ingenieros de internet. Apache.5. bases de datos de autenticación y negociado de contenido. pero fue criticado por la falta de una interfaz gráfica que ayude en su configuración. Apache tiene amplia aceptación en la red: desde 1996.Macintosh y otras. GNU/Linux.13 Configuración de servidor web personal 5. Su nombre se debe a que Behelendorf quería que tuviese la connotación de algo que es firme y enérgico pero no agresivo. Era. Cuando comenzó su desarrollo en 1995 se basó inicialmente en código del popular NCSA HTTPd 1. El servidor Apache se desarrolla dentro del proyecto HTTP Server (httpd) de la Apache Software Foundation. a patchy server (un servidor "parcheado"). Apache presenta entre otras características altamente configurables. Además Apache consistía solamente en un conjunto de parches a aplicar al servidor de NCSA. Microsoft Windows. es el servidor HTTP más usado. y la tribu Apache fue la última en rendirse al que pronto se convertiría en gobierno de EEUU. sin embargo ha sufrido un descenso en su cuota de mercado en los últimos años. en inglés.13.1 1 y la noción de sitio virtual. que implementa el protocolo HTTP/1.3. pero más tarde fue reescrito por completo. etc.). 63 .1 Introducción El servidor HTTP Apache es un servidor web HTTP de código abierto para plataformas Unix (BSD.

13.5. Debemos de dar clic en el botón “Next” Ilustración 29. Asistente de instalación.2 Desarrollo 1. En seguida nos aparecerá el asistente de instalación del programa indicándonos los componentes que se instalarán. 64 . El primer paso es abrir dar clic en apache 2triad desde nuestro disco de instalación.

2. Ilustración 30. pero es recomendable que dejemos la que nos da el asistente por default. Después de esto nos indicará la ruta en la que se instalará el programa. Podemos cambiar esta ruta. 65 . Ruta de instalación.

Ilustración 31. Después de haber ingresado la contraseña nos pedirá que aceptemos las condiciones de licencia del producto. Después de haber confirmado la ruta de instalación nos pide que entremos una contraseña. Condiciones de licencia. 66 . Contraseña. 4.3. Es importante que memoricemos esta contraseña ya que será la que luego usaremos para hacer las conexiones de los ficheros con la base de datos. Ilustración 32.

Ilustración 34. Inica el proceso de instalación. Debemos presionar el botón “Aceptar”. Los archivos han sido extraidos a la ruta correspondiente. Luego de haber aceptado las condiciones de licencia del producto si iniciará el proceso de instalación de Apache 2Triad. Enseguida una ventana nos pedirá que aceptemos la extracción de Apache a la carpeta correspondiente. 67 . Ilustración 33.5. 6.

En la siguiente pantalla que se muestra debemos ingresar la contraseña que tecleamos en la ventana anterior correspondiente. Ilustración 36. Al terminar el proceso se nos mostrará la siguiente ventana indicándonos que se ha configurado exitosamente. Ilustración 35. Presionamos el botón aceptar y enseguida el equipo se reiniciará de forma automática. Termina el proceso de instalación. 8. Ingresar nuevamente la contraseña. 68 .7.

o que utilizarán características propias de este servidor web.5. 69 .3 Conclusiones Apache es usado principalmente para enviar páginas web estáticas y dinámicas en la World Wide Web. Apache es usado para muchas otras tareas donde el contenido necesita ser puesto a disposición en una forma segura y confiable. Muchas aplicaciones web están diseñadas asumiendo como ambiente de implantación a Apache.13.

14 Dirección Virtual 5.171.com en lugar de con un número extraño del tipo 213.1 Introducción Una dirección IP es un conjunto de 4 números de 0 a 255 separados por puntos.201 y poder montar un servidor sin complicaciones independientemente de si tenemos o no una IP estática.14. 70 . que identifica a una computadora en una red (un conjunto de computadores conectados entre sí). como TuNombre.218. Un mismo computador tendrá asignada una IP por cada red a la que esté conectado. El servicio de DNS dinámica de No-IP permite identificar tu PC con un nombre de dominio fácil de recordar.no-ip.5.

71 . vaya al link No_ip Free y en seguida a Sign-Up Now! para tramitar nuestro registro de manera gratuita. En la barra superior del sitio. Ilustración 37. Pantalla principal del sitio no-ip.14.com 1.2 Desarrollo Primero debemos Ingresar al sitio www.no-ip.5.

Ingresamos los datos correspondientes que se no solicitan en el formulario Ilustración 39. Registro en el sitio. Formulario de registro. 3.2. 72 . Ingresar la cuenta de correo con la que se va a registrar Ilustración 38.

Ilustración 40.4. Mensaje que nos envía no-ip a nuestro correo para confirmar el registro. Registro satisfactorio en no-ip. 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. Ilustración 41. 73 .

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

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

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

Después de haber instalado con el programa con el asistente debemos ejecutarlo y configurarlo para que pueda redireccionarnos con la ip estática virtual. Ilustración 46. 9. Ingresamos nuestro usuario y contraseña. 77 . Instalación del software de no-ip.8. Nos aparecerá la siguiente ventana y es aquí donde ingresaremos el correo electrónico y la contraseña con que nos registramos en no-ip. Instalamos el programa con el asistente Ilustración 45.com para que nos redireccione con nuestro alias y pueda ser redireccinada nuestra ip virtual.

contará con una IP por la que es conocida y referenciada por los demás equipos de la red.Ejecutar. al contrario de las IPs de una red local que podemos asignar nosotros mismos. 78 . escribimos cmd para abrir la consola. e ipconfig en la consola para mostrar la configuración IP actual). Esta IP.3 Conclusiones Muy a parte de su tamaño Internet no deja de ser otra red.14. viene dada por el ISP (proveedor de servicio a internet) y podemos consultarla en Windows utilizando el comando ipconfig en la consola (Inicio .5. por el hecho de estar conectada a ésta. por lo que es evidente que toda computadora.

15. Sería necesario utilizar http://66. Esta abstracción hace posible que cualquier servicio (de red) pueda moverse de un lugar geográfico a otro en la red Internet. a términos memorizables y fáciles de encontrar.5.15 Registro de dominio 5.1 Introducción Un dominio de Internet es una red de identificación asociada a un grupo de dispositivos o equipos conectados a la red Internet.com).102. El propósito principal de los nombres de dominio en Internet y del sistema de nombres de dominio (DNS). Sin la ayuda del sistema de nombres de dominio.7. 79 . los usuarios de Internet tendrían que acceder a cada servicio web utilizando la dirección IP del nodo (Ej. aun cuando el cambio implique que tendrá una dirección IP diferente.104 en vez de http//:www.google. es traducir las direcciones IP de cada nodo activo en la red.

Ilustración 47.co.2 Desarrollo Antes de generar nuestro nombre de dominio nos debemos registrar en el sitio. Pantalla principal del sitio co.15. 80 .CC.cc.5. Ingrearemos al sitio con la siguiente dirección: www.cc y en la pantalla principal en la parte superior izquierda daremos clic en la liga que dice: Crear una cuenta ahora. En este caso lo haremos en uno llamado CO.

después de llenarlo nos enviarán un mensaje a nuestro correo con una liga a la que deberemos de dar clic para confirmar el registro . Registro de usuario. 81 . Ilustración 48.Enseguida nos enviara al siguiente formulario que debemos de llenar.

Cc (en este caso cafetumbao).. Damos clic en el botón “comprobar disponibilidad” Ilustración 49.cc y escribir el nombre de dominio que deseamos en el apartado correspondiente al centro de la página entre www y Co.Ingresar al sitio co. 82 . Comprobación de disponibilidad del nombre de dominio.Creando nuestro nombre de dominio gratuito 1.

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.2.. Esta pantalla nos indica si el nombre de dominio está disponible o no. Ilustración 50. 83 .

. Ilustración 51. 84 . Acceso a nuestra cuenta.3. Es la siguiente pantalla que nos envía.Para continuar con el registro debemos darnos de alta con nuestro nombre de usuario y contraseña.

Después de haber accedido a nuestra cuenta nos aparecerá la siguiente pantalla indicándonos que hemos obtenido un nuevo dominio de forma satisfactoria y que tenemos un plazo no mayor a 48 horas para configurar el dominio. Ilustración 52. Nombre de dominio creado.. 85 .4.

Selección de nuestro nombre de dominio para configurarlo.Para configurar el nombre de dominio debemos entrar a nuestra cuenta y seleccionar el nombre de dominio que hemos creado.. Ilustración 53.5. 86 .

y esto se hace en la siguiente pantalla. etcétera. por lo que si pasado un tiempo no se está contento con ese hosting.Cc. 87 . Es por esta razón que si se trata de una empresa que le fuera factible pagar por un nombre de dominio esto sería preferible.3 Conclusiones La mayoría de los dominios gratuitos los ofrecen que brindan espacio web gratuito. empezar a subir posiciones otra vez..15.6. Es resulta muy malo para el posicionamiento de buscadores.Y lo que debemos de configurar para nuestro nombre de dominio son los DNS. pues supone empezar de nuevo en la promoción del dominio. 5. Estos son los pasos que debemos seguir para registrar y configurar un nombre de dominio de forma gratuita en Co. Configruación de DNS. que es a la que nos envía después de haber seleccionado el nombre de dominio correspondiente. al cambiar a otra empresa se tendrá que cambiar de dirección web. conseguir enlaces. Ilustración 54.

5.16 Redireccionamiento

5.16.1 Introducción

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 redirección 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 continuación 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”.

Ilustración 55. mydomain.com

89

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

Ilustración 56. Registro.

90

Ilustración 57.Y por último llenaremos los campos que se nos solicitan en la siguiente pantalla. Después de haber hecho esto se nos enviará un mensaje a nuestro correo para que confirmemos el registro. Llenar la forma con nuestros datos. 91 .

no-ip. Para hacer esto ya debemos contar con nuestro nombre de dominio y el registro y la instalación del software de www. Al logearnos en el sitio nos enviará a la siguiente pantalla.Luego de habernos registrado en mydomain.com debemos iniciar con el proceso de redireccionamiento. 1. 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. Ilustración 58. 92 . Dar clic en Manage Service Domains.com.

. 93 .2. En esta debemos presionar el botón “Add Domains” para agregar un nuevo dominio. Add Domains. Ilustración 59.Después de haber dado clic en esta liga nos enviará la siguiente pantalla.

Ilustración 61. Dar clic en Add Services. En la siguiente pantalla debemos agregar el nombre de dominio en el cuadro correspondiente. 94 . Ilustración 60. Agreagamos el dominio que redireccionaremos. Después de esto se mostrará la siguiente pantalla. Después de esto presionamos el botón Add que se encuentra debajo del cuadro e iniciamos con el proceso de configuración..3.Se mostrará un proceso en el que se verifica si otro usuario no ha registrado ya ese dominio. 4. En ella debemos dar clic en la liga “Add Services”.

5. En esta pantalla damos clic en Continue 95 . En la siguiente pantalla que aparezca debemos presionar el botón “Continue”. Ilustración 62.

En la siguiente pantalla marcamos la casilla Registration Agreguemet”. Ilustración 63. Aceptamos en la casilla de registro y damos clic en Continue 96 .6. introducimos un correo electrónico válido y presionamos el botón “Continue” en la siguiente pantalla.

Damos clic en Place Order 97 .7. Después de esto debemos esperar unos cuantos segundos para que el proceso termine. El proceso ha terminado. Después de esto en la siguiente pantalla deberemos presionar el botón “Place order” . Ilustración 64.

A continuación se muestra paso a paso lo que debemos hacer. Los últimos pasos que quedan son los de redireccionamiento de nombre de dominio. 98 . Por último en la siguiente pantalla daremos clic en el botón “Goto my Account”. Esto para que al teclear el nombre de dominio en la barra de dirección de nuestro navegador web nos vincule a nuestro servidor. Damos clic en el botón Goto my Account. Ilustración 65.8.

Manage Domain Services. 99 .1. esto se encuentra dentro del recuadro “Domain Tools” . En la pantalla de panel de control de nuestra cuenta debemos dar clic en la pestaña Hosting & Services. En esta categoría deberemos de dar clic en la liga “Manage Domain Services” del dominio que vamos a redireccionar. Ilustración 66.

3 Conclusiones Es de suma importancia redireccionar el nombre de dominio con nuestro sitio web para que los motores de búsqueda nos tengan localizados y así conseguir que los usuarios accedan a nuestro sitio web. Ilustración 67. en este caso el alias que estamos usando en no-ip. 3. Ingresar el alias de no-ip.16. 5. Esta es la pantalla que nos mostrará.2. Después de estos pasos se nos avisa que el trámite se ha terminado correctamente y que debemos espera al menos una hora para que los cambios tengan efecto. Aquí debemos de ingresar el alias del servidor web. 100 .

El objetivo de la creación 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. El nombre de la base de datos que se creó fue registrados y creamos dentro de ella una tabla que se llama usuarios. Ilustración 68.17 Bases de datos A continuación se documenta la creación de la base de datos generada con PHP MySQL.Para que los usuarios puedan quedar registrados en nuestra web es necesario crear una base de datos.El primer paso es crear el formulario con Dreamwaver para que los usuarios se registren en nuestra web. 1. Creación del formulario con Dreamwaver. 2. 101 ..5.. En ella se almacenarán los datos del usuario.

0. Dirección IP 127.1 102 .0.El primer paso para crear la base de datos es abrir nuestro navegador y en la barra de dirección escribir la dirección IP 127.1 para poder acceder a la siguiente pantalla.0.0. Ilustración 69. Navegador.

Cuando nos encontremos dentro de esta pantalla debemos dar clic en la liga phpmyadmin/ para poder ingresar a MySQL. Contraseña: 12345678 Ilustración 70. Al momento de dar clic nos pedirá el usuario y contraseña. que para este caso son: Nombre de usuario: root. Necesitamos ingresar nuestro usuario y contraseña para crear una base de datos. 103 .

104 . Ilustración 71. En esta pantalla crearemos nuestra base de datos que como ya lo mencionamos se llamará registrados.Después de haber ingresado estos datos nos encontraremos dentro de MySQL. Creación de una base de datos con MySQL.

105 . Creación de una tabla.Al momento de dar clic en el botón “crear” nos enviará a la siguiente pantalla y es aquí donde crearnos una tabla que tendrá por nombre usuarios. Ilustración 72.

Campos.Después de hacer clic en el botón “continúe” nos enviará a la siguiente pantalla que es donde daremos de alta los campos de nuestra tabla. Ilustración 73. 106 .

107 .Después de esto habrá quedado creada nuestra base de datos en MySQL Ilustración 74. Base de datos creada con MySQL.

php. 108 . para que el usuario quede registrado. Código en PHP que inserta los datos capturados en nuestro formulario en la base de datos creada. este fichero será el encargado de recibir los datos del formulario e insertarlos en la base de datos. Ilustración 75.El siguiente paso es crear un fichero que en este caso llevará por nombre registro. A continuación se muestra el código que se encarga de la conexión entre el formulario y la base de datos.

estudiar a los usuarios a los que va dirigido y después poner manos a la obra. Un sitio web de calidad deberá ser el resultado de una excelente integración entre el programador y el diseñador web. que es con la que interactuarán los usuarios. Diseñar y programar un sitio web es una tarea minuciosa que merece un cuidadoso trabajo previo antes de que el diseñador y el programador web empiecen a trabajar directamente en la computadora en la creación del sitio. El diseñador web debe ser una persona capaz de combinar los componentes para producir un sitio de calidad. Esta usabilidad y funcionalidad se debe aplicar a la interfaz. Por otra parte el programador deberá ser capaz de lograr una conexión funcional en el acceso y transacciones con las bases de datos. un sitio web usable y funcional. por lo tanto. 109 . Conclusiones Un sitio web es el vínculo entre un organismo (de cualquier tipo) y su público. La navegación entre las páginas y la usabilidad son factores determinantes para el buen funcionamiento de un sitio. Determinar la estructura del sitio. es decir. la calidad del sitio web es determinante entre estos dos factores.6.

htm http://es.wikipedia.wikipedia.wikipedia.com/passim/p20-tec/pg2050ci.7.org/wiki/Dirección_IP 110 . Bibliografía y referencias de sitios web consultados Bibliografía Creación de un portal con PHP y MySQL Jacobo Pavón Puertas Alfaomega Tercera edición Domine PHP y MySQL Programación dinámica en el lado del servidor José López Quijado Alfaomega Primera edición Dreamweaver 8 César Pérez Alfaomega Primera edición Fundamentos de bases de datos Silberschatz | Korth | Sudarshan McGraw-Hill Quinta edición Sitios web http://www.paralibros.org/wiki/Transmission_Control_Protocol http://es.org/wiki/Conexión_a_Internet http://es.

todoexpertos.htm 111 .cl/disenodepaginasweb.com/es/reference/tags.wikipedia.org/wiki/File_Transfer_Protocol http://www.html http://www.html http://es.com/Main/PaginaWebConceptoYElementos http://www.htmlquick.inkscape.php http://es.hooping.org/?lang=es http://despuesdeg.org/wiki/Rich_Internet_Applications http://www.aspx http://www.webusable.mitecnologico.net/faq-formatos-imagenes.com/categorias/casa-yjardin/decoracion/respuestas/909804/psicologia-de-los-colores http://www.com/2008/12/29/aplica-la-proporcion-aurea-al-diseno-deuna-pagina-web/ www.wikipedia.com/coloursMean.http://forums.remote-exploit.superhosting.org/guias-y-tutoriales/30479-envenenamiento-arpnotas.