Trabajo Modificado de Tutulacion

SECRETARA DE EDUCACIN CULTURA Y DEPORTE CENTRO AMERICANO DE ESTUDIOS SUPERIORES
CLAVE: 04MSU0017L
DISEO PRELIMINAR DE UN PORTAL DE INTERNET PARA PUBLICITAR LOS SERVICIOS DE LA EMPRESA COLORADOMX
ELIAZAR MARIANO MUCUL JOEL ROBERTO MAY DEL RIVERO
CD. DEL CARMEN, CAM., MXICO OCTUBRE DE 2011
SECRETARA DE EDUCACIN CULTURA Y DEPORTE CENTRO AMERICANO DE ESTUDIOS SUPERIORES

CLAVE: 04MSU0017L
DISEO PRELIMINAR DE UN PORTAL DE INTERNET PARA PUBLICITAR LOS SERVICIOS DE LA EMPRESA COLORADOMX
TESINA QUE EN OPCIN AL GRADO DE
LICENCIADO EN INFORMTICA
PRESENTAN:
ELIAZAR MARIANO MUCUL JOEL ROBERTO MAY DEL RIVERO
ASESOR: M.C. JOS LUIS VZQUEZ VILA
CD. DEL CARMEN, CAM., MXICO OCTUBRE DE 2011
DEDICATORIA
Antes que nada quiero darle gracias a dios por permitirme terminar un objetivo ms en mi vida y gracias por darme el honor de brindarles a mis PADRES el orgullo de verme graduado.
Este trabajo esta dedicado a esas personas que siempre fueron, son y sern un gran apoyo en mi vida. A mis padres por todo el apoyo incondicional y emocional durante toda mi vida. A toda mi familia, que con altos y bajos siempre de una forma u otra son un gran respaldo. A todas esas personas que me apoyaron y siempre han estado conmigo en las buenas como en las malas.
A todos les quisiera decir muchas cosas en gratitud, pero son tantas cosas que no se por donde, ni por quien empezar, por eso a todas esas personas le doy las GRACIAS.
Eliazar Mariano Mucul
DEDICATORIA
Primero quiero dar gracias a Dios por darme la oportunidad de estar aqu concluyendo una meta ms en mi vida, y por tener a mis padres a mi lado, agradecindoles con el orgullo de verme titulado.
Le doy gracias a mis padres por el apoyo moral que eh obtenido en todo este tiempo.
Le agradecemos a los amigos que en el lapso de estos meses brindaron su entusiasmo por creer en nosotros.
Les ofrezco mi gratitud a las personas que estuvieron cerca m.
A todos les brindo las gracias por estar conmigo en las buenas y las malas
Joel Roberto May Del Rivero
NDICE
Pg. Introduccin .. I ndice de figuras y tablas ........... VIII CAPTULO I CONCEPTOS BSICOS DE RED 1 Conceptos bsicos de red ......... 2 1.1 Internet ...... 2 1.2 Modelo OSI ..... 3 1.2.1 Las capas del Modelo OSI .... 3 1.3 5 Conjunto de protocolos TCP/IP y direccionamiento .... 1.3.1 Modelo TCP/IP .. 5 1.3.2 La capa de Aplicacin . 5 1.3.2.1 Dominio DNS . 6 1.3.2.2 Dominio FTP ...... 7 1.3.2.3 Dominio HTTP ...... 7 1.3.2.4 Dominio SMTP ... 8 1.3.2.5 Dominio SNMP ... 8 1.3.2.6 Dominio Telnet ... 8 1.3.3 La capa de Transporte ...... 9 1.3.4 La capa de Internet ..... 9 1.3.5 La capa de interfaz de red ... 10 1.3.6 Configuracin del Protocolo TCP/IP ....... 11 1.4 Redes ... 11 1.4.1 Redes de rea local (LAN) ... 11 1.4.2 Redes de rea amplia (WAN) ..... 12 1.4.3 Redes de rea metropolitana (MAN) ... 13 1.4.4 Reses privadas virtuales (VPN) .. 14 1.5 Navegadores WEB ..... 15 1.6 Equipos de transmisin ... 16 1.6.1 El Hub .......... 16 1.6.2 El Swhitch ..... 17 1.6.3 El Router ..... 17 1.6.4 El Repetidor ... 19 CAPTULO II FUNDAMENTOS DE HTML Y CSS 2 Fundamentos de HTML y CSS ... 21 2.1 Fundamentos del Lenguaje de Marca de Hipertexto HTML 21 2.1.1 Elementos bsicos de HTML . 22 2.1.2 Estructura ..... 22
Pg. 2.1.3 Titulares ..... 23 2.1.4 Atributos del texto ........ 23 2.1.5 Lneas horizontales ........ 24 2.1.6 Listas ...... 24 2.1.7 Tablas ...... 25 2.1.8 Colores ...... 26 2.1.9 Enlaces .. 27 2.1.10 Imgenes ......... 27 2.1.11 Marquesinas .............................................................. 28 2.1.12 Formularios .... 28 2.1.13 Frames .. 30 2.2 Fundamentos de Hojas de Estilo en Cascada CSS ..... 30 2.2.1 Principales elementos en el desarrollo de CSS ... 31 2.2.2 La sintaxis ..... 31 2.2.3 Definicin de una hoja . 32 2.2.4 Definicin de estilos por medio de clases 32 2.2.5 Definicin de estilos por medio de Id. ..... 33 2.2.6 Propiedades de los estilos de listas .... 34 2.2.7 Unidades de medidas ..... 34 2.2.8 Propiedades de color y fondo ..... 35 2.2.9 Propiedades de la fuente .. 36 2.2.10 Propiedades del texto 36 2.2.11 Propiedades del contorno de los elementos ... 37 CAPTULO III RECURSOS Y DISEO DEL PROTOTIPO WEB 3 Recursos y Diseo del prototipo Web ....... 39 3.1 Definicin de los recursos .. 39 3.1.1 Recursos personales .................................................... 39 3.1.2 Recursos materiales 40 3.1.3 Recursos Financieros 41 3.2 Diseo preliminar del portal Web para la Empresa Coloradomx 43 3.2.1 La Empresa ..... 43 3.2.2 Inicio . 44 3.2.3 Servicio 45 3.2.4 Portafolio ..... 51 3.2.5 Contctenos ... 52 Conclusin ............................................................................................ 53 Trabajos Futuros 55 Glosario ........ 56 Bibliografa ........... 60
Pg. Fuentes Electrnicas ...... 60 Enciclopedias .... 62
INTRODUCCIN
El presente proyecto es una recopilacin de datos relacionados con las redes de computadoras, la publicidad por Internet y la programacin en lenguaje HTML y Css; siendo su objetivo el desarrollo de un portal Web para la empresas coloradomx. Este proyecto va ha tener como caracterstica la Publicidad en Internet que consiste en dirigir la publicidad efectiva, y relativamente barata. Se usa una combinacin de varias estrategias, incluyendo imgenes y reseas en pginas Web relacionadas, hipervnculos, grupos de noticias, anuncios por correo electrnico, etctera.
Las Empresas cada vez ms estn confiando en los medios electrnicos para la publicidad, ya que son de fcil acceso y edicin.
La publicidad en Internet consiste en banners, pantallas en miniatura, newsletters (boletines informativos), etc., a los que estn expuestos los usuarios de Internet al utilizar los servicios que ah se ofrecen.
En la actualidad existen millones de empresas
corporativas de servicio,
gubernamentales, pblicas, anunciadas en Internet, en este proyecto mencionamos las Web mas concurridas en Ciudad del carmen y las direcciones de otras como antecedentes para anunciar la empresa Coloradomx en Internet.
Islavirtual.com.mx
es un portal Web que tiene 7 aos de estar en lnea sin
interrupcin y puntualmente cada semana llevando el mensaje de distintos anunciantes a la sociedad carmelita, a quien le proporciona entretenimiento e informacin a travs de una lectura amena, sencilla y positiva.
Sus departamentos de editorial y diseo grfico profesional junto a su sistema informtico, son la garanta de que su mensaje llegar a manos de los lectores, posibles clientes, quienes buscan en Islavirtual.com.mx para obtener informacin y un gran porcentaje los visita en esta Isla (Bernat G. 2009).
Por otro lado, Isladelcarmen.com, es una compaa 100% carmelita que busca servir de vnculo entre los habitantes de esta isla que tienen acceso a Internet y promover a Cd. del Carmen ante el mundo aprovechando las posibilidades de comunicacin que ofrece Internet. Como un primer esfuerzo en el cumplimiento de su misin, desde principios del ao 2002 est publicado este portal en Internet.
isladecarmen.com aprovecha su experiencia en la creacin y mantenimiento de sitios Web al prestar a la iniciativa privada los servicio de diseo y construccin de pginas Web. (<www.isladelcarmen.com>)
Otro sitio, jovenescarmelitas.com, es un portal Web con foros de discusin. Este portal esta dirigido de igual manera a la comunidad carmelita principalmente a los jvenes, que tienen algo que opinar. En este portal se encuentran:
Foros de expresin Pasatiempos Negocios en lnea
(<www.jovenescarmelitas.com.mx>)
www.tiendas-megasis.info es un portal que est registrado desde el 2002 la Web de la compaa megasis, cuyos clientes potenciales radican en ciudad del Carmen y pueden visitar el sitio consultando los servicios. Los clientes pueden encontrar en el portal informacin de los productos, promociones, servicios, ofertas, catalogo de productos en lnea, etc., poniendo a la disponibilidad del cliente un medio de comunicacin directo con la empresa para establecer los contratos de compra y venta ahorrando tiempo y dinero en la demanda de sus productos (< www.tiendasmegasis.info>).
La empresa Compumax es una de empresa que provee servicios a un nmero determinado de empresas en ciudad del Carmen. Se cuanta con un sitio en el cual se puede estar en comunicacin y consultar los servicios de la misma en lnea
ahorrando de esta manera tiempo laboral. (< www.compumax.com.mx>)
(<www.cactuz.com.mx>) Es el sitio de una empresa de publicidad y diseo
en
Internet, empresa que radica en la ciudad de Mxico el cual ofrece sus servicios a empresas con diferentes giros y personas fsicas. Esta empresa tiene publicado sus servicios en lnea as como una seccin para el contacto con sus clientes.
Una
parte
fundamental
de
esta
informacin
es
que
la
pagina
Web
www.cactuz.com.mx esta siendo consultada desde Ciudad del carmen cuando la empresa esta ubicada en la ciudad de Mxico, esta informacin es tomada en cuenta ya que al elaborarse el proyecto de la empresa Coloradomx tambin podr ser consultada en distintos puntos de la republica Mexicana.
Otras Direcciones de Internet como antecedentes en ciudad del carmen son: www.carmenhoy.com www.portal-ciudaddelcarmen.com www.ciudaddelcarmen.com.mx www.carmen.gob www.rinconcarmelita.com www.surestecarmen.com www.unacar.mx
Todas estas empresas anunciadas en Internet tienen algo en comn, brindar informacin, anunciar sus productos y servicios, no solo a nivel local sino que pueden ser vistas a nivel internacional gracias a la existencia del Internet y el uso de los diferentes servidores de uso general y los servidores conocidos como hostings.
La Empresa Coloradomx ofrece a sus clientes servicios de serigrafa, diseo y creacin de escenografas. Sin embargo los servicios que ofrece esta empresa a sus clientes solo se ha dado a conocer por medio del contacto personal y de recomendaciones de aquellos a quienes se les ha realizado algn servicio. Sin
embargo, la empresa no se ha proyectado en ningn medio de comunicacin, por lo que solo se demandan trabajos eventuales y su cartera de clientes es limitada.
Debido a la falta de presentacin en los medios de comunicacin, un gran porcentaje de la poblacin de Ciudad del Carmen no conoce an los servicios que ofrece la empresa Coloradomx. En este trabajo se propone el diseo preliminar de un portal en Internet de servicio y publicidad para la empresa Coloradomx.
Hoy en da existen millones de empresas que se conocen por medio del Internet ofreciendo sus servicios de manera local, nacional y mundial, por eso, en base al problema antes descrito, a los antecedentes sealados y las ventajas mencionadas, nos plateamos la siguiente pregunta de investigacin.
Cmo dar a conocer la empresa Coloradomx en Ciudad del Carmen para provocar un incremento en su cartera de clientes?
Por lo que se justifica de acuerdo a que durante los ltimos aos se ha producido un gran avance en el desarrollo de pginas Web como un tipo de Informacin y comunicacin donde darse a conocer es muy rpido y sencillo debido a la alta accesibilidad de millones de usuarios que hoy en da existe en Internet. En base a la problemtica mencionada de la empresa Coloradomx, es evidente la necesidad del desarrollo de este proyecto donde se propone el diseo preliminar de un portal en Internet de servicio y publicidad para la empresa Coloradomx. Por medio del
lenguaje HTML y CSS donde se publicarn los servicios que brinda esta empresa a sus clientes, as como las actualizaciones de la misma ya que esta no cuenta con algn tipo de publicidad en los diversos medios de comunicacin.
Dado que se contempla la posibilidad de una contratacin individual y/o institucional,
Individual: personas fsicas de estudios medios y superiores, preferentemente profesionales, empresarios y todos ellos usuarios de Internet.
Institucional: Organizaciones privadas y publicas de todo tipo, a las cuales se podra realizar cualquier trabajo de los servicios que brindamos.
Con este proyecto abriremos un gran camino para dar a conocer la empresa Coloradomx de manera local en Ciudad del Carmen, Nacional e Internacionalmente.
No necesitamos una Pgina Web muy sofisticada, pero s que transmita una imagen profesional, con informacin clara y actualizada de nuestros productos y servicios, que nos permita lograr nuestros objetivos y, sobre todo, que nos permita el contacto y comunicacin con nuestros clientes actuales y potenciales.
El objetivo principal de este proyecto es el disear un portal Web para difundir los servicios que ofrece la empresa Coloradomx y de esta manera incrementar la cartera de clientes. Para lo que se necesitara:
Dar a conocer la empresa Coloradomx. Clasificar los servicios que ofrece la empresa. Crear el programa en cdigo HTML y CSS para el diseo de la Web. Disear secciones para consultas de usuarios. Crear link para interactuar en la pagina Web en las Diversas secciones que se realizaran Crear galera de trabajos realizados para motivacin del cliente Mantener comunicacin con los clientes
La pgina Web diseada se evaluar de manera simulada para analizar su funcionamiento. Tomando en cuenta los conocimientos para la elaboracin de este proyecto es necesario tener en cuenta lo siguiente metodologa para su aplicacin:
Estudiar los conceptos fundamentales del diseo en paginas Web Aprender el cdigo HTML y CSS a ejecutar
Programar el cdigo HTML y CSS Evaluar el funcionamiento de la pagina Web Obtener conclusiones sobre el resultado obtenido Plantear trabajos futuros
El proyecto que se propone llevara como nombre Diseo preliminar de un portal de Internet para publicitar los servicios de la Empresa Coloradomx el cual contara del siguiente contenido:
Introduccin. Analizaremos los antecedentes realizados sobre proyectos anteriores y de que manera impactaron justificando de esta manera la propuesta del proyecto determinando su alcance.
Captulo 1.- Conceptos bsicos de red. En este capitulo mencionaremos los fundamentos tericos sobre redes informticas para analizar y entender el flujo de informacin del proyecto sobre Internet.
Captulo 2.- Fundamentos HTML y CSS. mencionaremos los Fundamentos bsicos del lenguaje HTML y CSS los cuales se aplicaran para la elaboracin de la pagina Web lo anterior estar respaldado bibliogrfica. con su respectiva referencia
Captulo 3.- Recursos y Diseo preliminar del prototipo de la pgina Web. Se analizaran los recursos con los que cuenta la empresa Coloradomx para el seguimiento del portal web, as mismo, en este capitulo se ilustrar el prototipo diseado del portal web.
NDICE DE FIGURAS Y TABLAS TABLAS Pg. 4 8 28 37 38 38 39 41 44 45
Tabla 1.1 Tabla 1.2 Tabla 2.1 Tabla 2.2 Tabla 2.3 Tabla 2.4 Tabla 2.5 Tabla 3.1 Tabla 3.2 Tabla 3.3
Capas del Modelo OSI (Organizacin Internacional de Normalizacin) .. Descripcin de Dominio http ... Tabla de colores HTML Propiedades de color y Fondo Propiedades de fuentes Propiedades del texto . Propiedades del contorno de los elementos .. Personal Actual de la compaa Coloradomx .. Empresas de servicio de hosting Costos de fabricacin ...
FIGURAS
Figura 1.1 Figura 1.2 Figura 1.3 Figura 1.4 Figura 1.5 Figura 1.6 Figura 1.7 Figura 1.8 Figura 1.9 Figura 1.10 Figura 1.11 Figura 2.1 Figura 3.1 Figura 3.2 Figura 3.3 Figura 3.4 Figura 3.5 Figura 3.6 Figura 3.7 Figura 3.8
Capa de aplicacin del modelo TCP/IP Capa de Transporte del modelo TCP/IP Capa de Internet del modelo TCP/IP Capas de red del protocolo TCP/IP Componentes de una red Lan Componentes de una red Wan Estructura de una red MAN
.. ..
...
Pg. 6 10 10 11 13 14 15 18 18 20 20 31 43 43 45 46 47 47 48 49
.......
....
.. ..
El Hub ... El Switch .... El Router .... El Repetidor ... formulario ejemplo .. Propiedades del sistema de las computadoras de Coloradomx .. Seleccin de dominio .. Contacto masther .. Quines Somos? ... Nuestra Misin ... Nuestra Visin ... Pgina de Inicio . Servicios .
Figura 3.9 Figura 3.10 Figura 3.11 Figura 3.12 Figura 3.13 Figura 3.14 Figura 3.15 Figura 3.16 Figura 3.17 Figura 3.18 Figura 3.19 Figura 3.20
Servicio Offset Servicio de serigrafa .. Servicio de rotulacin . Servicio de escenografa .. Servicio de sellos .. Servicio de publicidad . Servicio de imagen corporativa ..... Servicio de diseo grafico ... Servicio de diseo Web . Portafolio . Portafolio escenografa .... Contctenos
49 50 50 51 51 52 52 53 53 54 54 55
CAPTULO I CONCEPTOS BSICOS DE RED
1 Conceptos bsicos de red
En este modulo conoceremos los conceptos bsicos y lo que se necesita para que una pagina Web funcione en Internet y pueda ser consultada por usuarios en distintos puntos geogrficos por medio de terminales denominadas computadora
1.1 Internet En (Flix, 2000, p.11) se define Internet como una red internacional de ordenadores compuesta a su vez por otras redes de datos, tanto publicas como privadas, que pueden comunicarse entre si mediante conmutacin de paquetes.
Internet es un conjunto descentralizado de redes de comunicacin interconectadas, que utilizan la familia de protocolos TCP/IP (Transmission Control Protocol/Internet Protocol), garantizando que las redes fsicas heterogneas que la componen funcionen como una red lgica nica, de alcance mundial.
<http://es.wikipedia.org/wiki/Acceso_a_internet>
Segn
Franco
I.
(2007,
<http://www.monografias.com/trabajos14/internet-
hist/internet-hist.shtml>) Internet se inici como un proyecto de defensa de los Estados Unidos. A finales de los aos 60, la ARPA (Advanced Researching Project Agency, Agencia de Investigacin de Proyectos Avanzados) del Departamento de Defensa defini el protocolo TCP/IP. Aunque parezca extrao, la idea era garantizar mediante este sistema la comunicacin entre lugares alejados en caso de un ataque nuclear. Ahora el protocolo TCP/IP sirve para garantizar la transmisin de los paquetes de informacin entre lugares remotos, siguiendo cualquier ruta disponible.
En la red existen equipos denominados host, estos equipos se encargan de dar servicios a los clientes en la red. Marcelo C. (2004). En la actualidad es muy frecuente encontrar en los medios de comunicacin de masa (tanto televisin, como radio y prensa) definiciones de Internet como las siguientes:
Internet es una red de redes Internet es la sper autopista de la informacin
1.2 Modelo OSI
Virtualmente, todas las redes que estn en uso hoy en da, estn basadas de algn modo en el modelo OSI (Organizacin Internacional de Normalizacin). El modelo OSI fue desarrollado en 1984 por la organizacin internacional de estndares, llamada ISO, el cual se trata de una federacin global de organizaciones representando a aproximadamente 130 pases.
El ncleo de este estndar es el modelo de referencia OSI, una normativa formada de siete capas que define las diferentes fases por las que deben pasar los datos para viajar de un dispositivo a otro sobre una red de comunicaciones.
La utilidad de esta normativa estandarizada viene al haber muchas tecnologas, fabricantes y compaas dentro del mundo de las comunicaciones, y al estar en continua expansin, se tuvo que crear un mtodo para que todos pudieran entenderse de algn modo, incluso cuando las tecnologas no coincidieran. De este modo, no importa la localizacin geogrfica o el lenguaje utilizado. Todo el mundo debe atenerse a unas normas mnimas para poder comunicarse entre si. Esto es sobre todo importante cuando hablamos de la red de redes, es decir, Internet. <http://www.ordenadores-y-portatiles.com/modelo-osi.html>
1.2.1 Las capas del modelo OSI
El modelo de referencia OSI es un marco que se puede utilizar para comprender cmo viaja la informacin travs de una red. El modelo de referencia OSI explica de qu manera los paquetes de datos viajan de varias capas a otro dispositivo de una red, aun cuando el remitente y el destinatario poseen diferentes tipos de medios de red.
En el modelo de referencia OSI, hay siete capas numeradas, cada una de las cuales ilustra una funcin red especfica. Ver tabla 1.1 (Cisco Certified, 2001, P.45).
Tabla 1.1 Capas del Modelo OSI (Organizacin Internacional de Normalizacin)
Transmisin binaria: Cables, conectores, Fsica 1 voltaje, Enlace de datos 2 Control directo de enlaces, acceso a los medios: provee transferencia
velocidades de transmisin de datos
confiable de datos a travs de los medios. Conectividad y seleccin de ruta entre sistemas. Direccionamiento lgico de mejor esfuerzo
Direccionamiento de red y determinacin de la mejor ruta: Red 3 provee transferencia
Conexin de extremo a extremo: se ocupa de aspectos de trasporte de datos. Confiabilidad de trasporte de
confiable de datos a travs de Transporte 4 datos. Establecer, mantener, terminar los medios. Conectividad y seleccin sistemas Comunicacin establece, entre administra sesiones host: y entre Presentacin 6 de rutas entre circuitos virtuales. Deteccin de fallas y control de flujo de informacin de recuperacin Representacin de datos: Garantiza que los datos sean legibles para el sistema datos y receptor, negocia reestructura la sintaxis los de
Sesin 5
termina
aplicaciones
transferencia. Proceso aplicaciones: servicios Aplicacin procesos 7 de de de red a
suministra red a los LAS 7 CAPAS DEL MODELO OSI
aplicaciones
(como, por ejemplo, correo electrnico, Transferencia de archivos y emulacin de terminales.)
Fuente: Cisco Certified Network Associate version 3.1 (2001)
Divide la comunicacin de red en partes ms pequeas y fciles de manejar. Normaliza los componentes de red para permitir el desarrollo y el soporte de los productos por diferentes fabricantes. Permite a los distintos tipos de hardware y software de red comunicarse entre s. Evita que los cambios en una capa afecten las otras capas. Divide la comunicacin de red en partes ms pequeas para simplificar el aprendizaje.
1.3 Conjunto de protocolos TCP/IP y direccionamiento
1.3.1 Modelo TCP/IP Adems del ingls, impredecible para los usuarios, los ordenadores conectados a la Internet necesitan un lenguaje comn para intercambiar informacin.(Garca, et al., 1996, p.2)
TCP es un protocolo orientado a conexin. Mantiene un dilogo entre el origen y el destino mientras empaqueta la informacin de la capa de aplicacin en unidades denominadas segmentos. Orientado a conexin no significa que existe un circuito entre los computadores que se comunican. Significa que segmentos de la Capa 4 viajan de un lado a otro entre dos hosts para comprobar que la conexin exista lgicamente para un determinado perodo. (Cisco Certified, 2001, P.48).
El modelo TCP/IP tiene las siguientes cuatro capas:
Capa de aplicacin. Capa de transporte Capa de Internet Capa de acceso a la red
1.3.2 La capa de aplicacin
Los protocolos TCP/IP que admiten transferencia de archivos, correo electrnico y conexin remota probablemente sean los ms familiares para los usuarios de la Internet (tal como se ilustra en la figura 1.1). Estos protocolos incluyen las siguientes aplicaciones:
Sistema de denominacin de dominios (DNS) Protocolo de transferencia de archivos (FTP)
Protocolo de transferencia de hipertexto (HTTP) Protocolo simple de transferencia de correo (SMTP) Protocolo simple de administracin de red (SNMP) Telnet
(Cisco Certified, 2001, P.48).

Figura 1.1 Capa de aplicacin del modelo TCP/IP
Fuente: (Cisco Certified, 2001, P.178).
1.3.2.1 Dominio DNS (Comer 1995, p.573) (Domain Name System) sistema de bases de datos distribuida en lnea y utilizado para transformar nombres de maquina en direccin IP que pueden leer los usuarios. Los servidores DNS, a travs de Internet, implantan un espacio de nombres jerrquico que permite a las localidades contar con libertad para asignar nombres de maquinas y direcciones. DNS tambin soporta transformaciones separadas entre distintos correos y direcciones IP. La individualizacin de los emisores y receptores en Internet se conocen como DNS (Domain Name System. Sistema de Nombres de Dominio), los cuales pueden tener los siguientes identificadores:
edu educacin gov administracin estatal mil ejercito
com organizacin comercial
net compaa de soporte de red org otras organizaciones pas cdigo ISO del pas
1.3.2.2 Dominio FTP (File Transfer Protocolor) protocolo estndar de alto nivel del TCP/IP que sirve para transferir archivos de una maquina a otra. El FTP utiliza al TCP (Comer 1995, p.576). Permite las transferencias bidireccionales de archivos binarios y archivos ASCII. (Cisco Certified, 2001, P.178). Estos modos determinan la codificacin que se usa para el archivo de datos que cuando termina la transferencia de archivos, la conexin de datos se termina automticamente. El propsito principal de FTP es transferir archivos desde un computador hacia otro copiando y moviendo archivos desde los servidores hacia los clientes, y desde los clientes hacia los servidores.
1.3.2.3 Dominio HTTP
El Protocolo de transferencia de hipertexto (http: Hypertext Transfer Protocol) funciona con la WWW, que es la parte de crecimiento ms rpido y ms utilizada de Internet. Un navegador de Web es una aplicacin cliente/servidor, lo que significa que requiere que haya tanto un componente de cliente como de servidor para que funcione. Las pginas Web se crean con un lenguaje de formato denominado Lenguaje de etiquetas por hipertexto (HTML: Hypertext Markup Language). HTML dirige a un navegador de Web en una pgina Web en particular para crear el aspecto de la pgina de forma especfica. (Cisco Certified, 2001).
En el URL http://www.cisco.com/edu/, los caracteres "http://" le indican al navegador cul es el protocolo que debe utilizar. La segunda parte, "WWW", es el nombre de host o nombre de una mquina determinada con una direccin IP determinada. La ltima parte identifica la carpeta especfica que contiene la pgina web por defecto en el servidor, ver tabla 1.2.
Tabla 1.2 Descripcin de Dominio http

http:// Le indica WWW. cisco.com //edu/ la Identifica la carpeta donde se encuentra la pgina Web en el del Servidor. Adicionalmente ya que se especifico un nombre, el navegador grgara la pagina por defecto identificada por el Servidor
al Identifica el nombre Representa que de host o el nombre entidad un aparato dominio Web
ordenador
tipo de protocolo de se debe usar
determinado
1.3.2.4 Dominio SMTP
Los servidores de correo electrnico se comunican entre s usando el Protocolo simple de transferencia de correo (SMTP) para enviar y recibir correo. El protocolo SMTP transporta mensajes de correo electrnico en formato ASCII usando TCP. (Cisco Certified, 2001).
1.3.2.5 Dominio SNMP
El Protocolo simple de administracin de red (SNMP: Simple Network Management Protocol) es un protocolo de la capa de aplicacin que facilita el intercambio de informacin de administracin entre dispositivos de red. El SNMP permite que los administradores de red administren el rendimiento de la red, detecten y solucionen los problemas de red y planifiquen el crecimiento de la red. El SNMP usa UDP como su protocolo de capa de transporte.
1.3.2.6 Dominio Telnet
Segn Jimnez C. (2008, <http://www.monografias.com/trabajos7/tcp/tcp.shtml>) Una conexin mediante Telnet permite acceder a cualquiera de los servicios que la mquina remota ofrezca a sus terminales locales. De esta manera se puede abrir una sesin (entrar y ejecutar comandos) o acceder a otros servicios especiales: como por ejemplo consultar un catlogo de una biblioteca para buscar un libro, leer un peridico electrnico, buscar informacin sobre una persona, etc.
1.3.3 La capa de Transporte
En Chvez J.C. (2003, <http://www.emagister.com/tutorial/. publicaciones>) la principal tarea de la capa de transporte es proporcionar la comunicacin entre un programa de aplicacin y otro. ver figura 1.2
Ejecuta: Servicios de transporte desde el host origen hacia el host destino. Forma una conexin lgica entre los puntos finales de la red. Brinda transporte de extremo a extremo.
Figura 1.2 Capa de Transporte del modelo TCP/IP
Fuente: (Cisco Certified, 2001,P.179)
1.3.4 La capa de Internet
La capa Internet maneja la comunicacin de una mquina a otra (tal como se muestra en la figura 1.3). sta acepta una solicitud para enviar un paquete desde la capa de transporte junto con una identificacin de la mquina. La capa Internet tambin maneja la entrada de datagramas, verifica su validez y utiliza un algoritmo de ruteo para decidir si el datagrama debe procesarse de manera local o debe ser transmitido. Para el caso de los datagramas direccionados hacia la mquina local, el software de la capa de red de redes borra el encabezado del datagrama y selecciona, de entre varios protocolos de transporte, un protocolo con el que
manejar el paquete. Chvez J.C. (2003, <http://www.emagister.com/tutorial/. publicaciones>)

Figura 1.3 Capa de Internet del modelo TCP/IP
1.3.5 La capa de Interfaz de red
Capa de interfaz de red. El software TCP/IP de nivel inferior consta de una capa de interfaz de red responsable de aceptar los datagramas IP y transmitirlos hacia una red especfica. Una interfaz de red puede consistir en un dispositivo controlador (por ejemplo, cuando la red es una red de rea local a la que las mquinas estn conectadas directamente) o un complejo subsistema que utiliza un protocolo de enlace de datos propios (por ejemplo, cuando la red consiste de conmutadores de paquetes que se comunican con anfitriones. Chavez J. C. (2003,
<http://www.emagister.com/tutorial/. publicaciones>). Ver figura 1.4

Figura 1.4 Capas de red del protocolo TCP/IP
1.3.6 Configuracin del protocolo TCP/IP
El Protocolo de control de transporte/protocolo Internet (TCP/IP) es un conjunto de protocolos o reglas desarrollados para permitir que los computadores que cooperan entre s puedan compartir recursos a travs de una red. Para habilitar TCP/IP en la estacin de trabajo, sta debe configurarse utilizando las herramientas del sistema operativo. Ya sea que se utilice un sistema operativo Windows o Mac, con el proceso ping.
1.4 Redes
Las redes surgieron a partir que se pretendan unir entre s un gran nmero de computadoras, esto resultaba difcil por cuestiones econmicas. Estas redes se dividen segn su conectividad.
1.4.1 Redes de rea local (LAN)
Una LAN es un segmento de red que tiene conectadas estaciones de trabajo y servidores o un conjunto de segmentos de red interconectados, generalmente dentro de la misma zona. Por ejemplo un edificio. DSousa C. (1993-1998) Microsoft Corporation. Figura 1.5
Las LAN constan de los siguientes componentes: Computadores Tarjetas de interfaz de red Dispositivos perifricos Medios de networking Dispositivos de networking
Algunas de las tecnologas comunes de LAN son: Ethernet
Token Ring FDDI

Figura 1.5 Componentes de una red Lan
Fuente: Cisco Certified Network Associate version 3.1 (2001, P.29)
1.4.2 Redes de rea amplia (WAN)
Las WAN interconectan las LAN, que a su vez proporcionan acceso a los computadores o a los servidores de archivos ubicados en otros lugares (ver figura 1.6). Como las WAN conectan redes de usuarios dentro de un rea geogrfica extensa, permiten que las empresas se comuniquen entre s a travs de grandes distancias. (Cisco Certified, 2001, P.32) Las WAN estn diseadas para realizar lo siguiente:
Operar entre reas geogrficas extensas y distantes. Posibilitar capacidades de comunicacin en tiempo real entre usuarios. Brindar recursos remotos de tiempo completo, conectados a los servicios locales. Brindar servicios de correo electrnico, World Wide Web, transferencia de archivos y comercio electrnico.
Figura 1.6 Componentes de una red Wan
Algunas de las tecnologas comunes de WAN son: Mdems Red digital de servicios integrados (RDSI) Lnea de suscripcin digital (DSL - Digital Subscriber Line) Frame Relay Series de portadoras para EE.UU. (T) y Europa (E): T1, E1, T3, E3 Red ptica sncrona (SONET )
1.4.3 Redes de rea metropolitana (MAN)
Este tipo de redes es una versin ms grande que la LAN y que normalmente se basa en una tecnologa similar a esta, La principal razn para distinguir una MAN con una categora especial es que se ha adoptado un estndar para que funcione, que equivale a la norma IEEE. (Institute of Electrical and Electronics Engineers). (Ferrer N. (2009,<http://aprendaredmanunerg.blogspot.com/ >) Las redes MAN tambin se aplican en las organizaciones, en grupos de oficinas corporativas cercanas a una ciudad, estas no contiene elementos de conmutacin, los cuales desvan los paquetes por una de varias lneas de salida potenciales. Estas redes pueden ser pblicas o privadas. (Ferrer N. (2009,
<http://aprendaredmanunerg.blogspot.com/ >)
Una red MAN es una red que se expande por pueblos o ciudades y se interconecta mediante diversas instalaciones pblicas o privadas, como el sistema telefnico o los suplidores de sistemas de comunicacin por microondas o medios pticos (ver figura 1.7). DSousa C. (1993-1998) Microsoft Corporation.
Figura 1.7 Estructura de una red MAN
1.4.4 Redes Privadas Virtuales (VPN)
Una VPN es una red privada que se construye dentro de una infraestructura de red pblica, como la Internet global. Con una VPN, un empleado a distancia puede acceder a la red de la sede de la empresa a travs de Internet, formando un tnel seguro entre el PC del empleado y un router VPN en la sede. Los tipos de redes (VPN) son: VPN de acceso: Las VPN de acceso brindan acceso remoto a un trabajador mvil y una oficina pequea/oficina hogarea (SOHO), a la sede de la red interna o externa, mediante una infraestructura compartida. Las VPN de acceso usan tecnologas analgicas, de acceso telefnico, RDSI, lnea de
suscripcin digital (DSL), IP mvil y de cable para brindar conexiones seguras a usuarios mviles, empleados a distancia y sucursales. Redes internas VPN: Las redes internas VPN conectan a las oficinas regionales y remotas a la sede de la red interna mediante una infraestructura compartida, utilizando conexiones dedicadas. Las redes internas VPN difieren de las redes externas VPN, ya que slo permiten el acceso a empleados de la empresa. Redes externas VPN: Las redes externas VPN conectan a socios comerciales a la sede de la red mediante una infraestructura compartida, utilizando conexiones dedicadas. Las redes externas VPN difieren de las redes internas VPN, ya que permiten el acceso a usuarios que no pertenecen a la empresa.
1.5 Navegadores Web
Un navegador Web o navegador de Internet es el programa que permite visualizar los contenidos de las pginas Web en Internet. Tambin se conoce con el nombre de browser. Algunos ejemplos de navegadores Web o browsers son: Internet Explorer, Netscape Navigator, Opera, etc. < http://antivirus.interbusca.com/glosario/navegador.html>
Los ms conocidos son el Explorer de Microsoft, Mosaic y el Netscape de Netscape Communications Corporation en Estados Unidos y otros pases. Tienen capacidades diferentes y es importante cuando se crea una pgina Web, adems de un buen diseo, tener en cuenta la compatibilidad, es decir, programar pginas de modo que las acepte cualquier Navegador.
Netscape es el que soporta ms y mejores efectos, incluido programas embebidos en el propio texto (versin 2.0 en adelante), escritos en lenguaje Java (algo muy parecido al lenguaje C), que son interpretados por el visualizador, y que permiten realizar pginas "inteligentes". Lora V. (2008 <
http://www.monografias.com/trabajos5/laweb/laweb.shtml>)
Conectndose a Internet, con un visualizador Netscape o Explorer, adems de ver documentos HTML se puede recibir y enviar correo electrnico, recibir y enviar NEWS (noticias), visitar los servidores GOPHER (servidores de ficheros), y acceder a servidores FTP (ms servidores de ficheros) tanto en entrada como en salida, todo ello con el mismo programa. Tambin, como no, se pueden imprimir los documentos visualizados. Casi todos suelen ser " WYSIWYG". Lora V. (2008 <
http://www.monografias.com/trabajos5/laweb/laweb.shtml>) What you see is what you get, Manipulacin directa e Interfaces de usuario basados en iconos. Aimacaa C (2008, < http://www.monografias.com/trabajos6/inus/inus.shtml>)
1.6 Equipos de transmisin
Dependiendo del tipo de red y su tamao, por lo general se utilizan uno de los tres concentradores: Hubs, Switchs o routers.
1.6.1 El Hub
El hub (concentrador) es el dispositivo de conexin ms bsico. Es utilizado en redes locales con un nmero muy limitado de mquinas (ver figura 1.8). No es ms que una toma mltiple RJ45 que amplifica la seal de la red (base 10/100).
En este caso, una solicitud destinada a una determinada PC de la red ser enviada a todas las PC de la red. Esto reduce de manera considerable el ancho de banda y ocasiona problemas de escucha en la red. Los hubs trabajan en la primera capa del modelo OSI. Vialfa C. (2008 < http://es.kioskea.net/faq/sujet-656redes-concentrador-hub-conmutador-switch-y-router#5-mayor-informacion#5mayor-informacion>)
Figura 1.8 El Hub
Fuente: Vialfa C. (2008 < http://es.kioskea.net/faq/sujet-656-redes-concentrador-hub-conmutadorswitch-y-router#5-mayor-informacion#5-mayor-informacion>)
1.6.2 El Switch
Un switch, es un dispositivo de la capa 2. De hecho, el switch se denomina puente multipuerto, as como el hub se denomina repetidor multipuerto (figura 1.9). La diferencia entre el hub y el switch es que los switches toman decisiones basndose en las direcciones MAC (Control de medio de acceso) y los hubs no toman ninguna decisin. Como los switches son capaces de tomar decisiones, as hacen que la LAN sea mucho ms eficiente. Los switches hacen esto "conmutando" datos slo desde el puerto al cual est conectado el host correspondiente. Bottiroli A.
Este elimina las eventuales colisiones de paquetes (una colisin aparece cuando una mquina intenta comunicarse con una segunda mientras que otra ya est en comunicacin con sta, la primera reintentar luego). (2009, <
http://www.monografias.com/trabajos7/swich/swich.shtml>)
Figura 1.9 El Switch
1.6.3 El Router
Un router es un dispositivo de interconexin de redes informticas que permite asegurar el enrutamiento de paquetes entre redes o determinar la ruta que debe tomar el paquete de datos. Vialfa C. (2008 < http://es.kioskea.net/faq/sujet-656-
redes-concentrador-hub-conmutador-switch-y-router#5-mayor-informacion#5mayor-informacion>)
Un router es un conmutador de paquetes que opera en el nivel de red del modelo OSI. Sus principales caractersticas son:
Proporcionan un control del trfico y funciones de filtrado a nivel de red, es decir, trabajan con direcciones de nivel de red, como por ejemplo, con direcciones IP.
Permiten interconectar tanto redes de rea local como redes de rea extensa. Son capaces de rutear dinmicamente, es decir, son capaces de seleccionar el camino que debe seguir un paquete en el momento en el que les llega, teniendo en cuenta factores como lneas ms rpidas, lneas ms baratas, lneas menos saturadas, etc.
Los routers son ms ``inteligentes'' que los switches, pues operan a un nivel mayor lo que los hace ser capaces de procesar una mayor cantidad de informacin.
Feria G. (2008 < http://www.monografias.com/trabajos13/modosi/modosi.shtml>)
El router equivale a un PC gestionando varias conexiones de red (los antiguos routers eran PCs). Los routers son compatibles con NAT, lo que permite utilizarlos para redes ms o menos extensas disponiendo de gran cantidad de mquinas y poder crear correctamente sub-redes. Tambin tienen la funcin de cortafuegos (firewall) para proteger la instalacin. (Ver figura 1.10)
Figura 1.10 El Router
1.6.4 El repetidor
Un repetidor es un dispositivo sencillo utilizado para regenerar una seal entre dos nodos de una red (figura 1.11). De esta manera, se extiende el alcance de la red. El repetidor funciona solamente en el nivel fsico (capa 1 del modelo OSI), es decir que slo acta sobre la informacin binaria que viaja en la lnea de transmisin y que no puede interpretar los paquetes de informacin.
Figura 1.11 El Repetidor
CAPTULO II FUNDAMENTOS DE HTML Y CSS
2 Fundamentos de HTML y CSS
CSS (Hojas de Estilo en Cascada, Cascading Style Sheets), se utiliza para dar estilo a documentos HTML y XML (lenguaje de marcas ampliable), separando el contenido de la presentacin. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de mltiples pginas Web al mismo tiempo.
2.1 Fundamentos de Lenguaje de Marca de Hipertexto HTML
Las pginas Web son los documentos con los que se construye la Web. Una pgina Web es un documento escrito en lenguaje HTML que es procesado por el navegador Web. Las pginas Web se disean para ser accedidas fundamentalmente a travs de Internet.
La mayora de las etiquetas del lenguaje HTML son semnticas. La interpretacin de las etiquetas es realizada por el navegador Web. El lenguaje HTML es extensible, se le pueden aadir caractersticas, etiquetas y funciones adicionales para el diseo de pginas Web, generando un producto vistoso, rpido y sencillo. El lenguaje de marca de hipertexto (HTML, Hipertext Markup Lenguaje) es el lenguaje de marcas que se utiliza actualmente para construir una pgina Web. (Ignacio, Santos, Molina, 2001, p.5) En el Word Wide Web, HTML se utiliza para indicar a los exploradores Web como estructurar y mostrar las paginas Web. Adems, es un lenguaje muy sencillo que se presenta en forma estructurada, con vnculos que se conectan con otros documentos o fuente de informacin sobre temas relacionados, tambin permite insertar grficos, sonidos, listas, tablas, formularios, pelculas, entre otros ms. (Ignacio, et al., 2001, p.5)
Las instrucciones HTML dividen el texto en un documento en bloques denominados (elementos o directivas) se pueden dividir en dos grandes categoras, en primer lugar aquellos que dividen la informacin sobre el documento, como el titulo, las relaciones con otros y documentos. En segundo lugar, los que definen como se mostrar el cuerpo del documento en el explorador seleccionado. (Ignacio, et al., 2001, p.5).
De acuerdo con el modelo habitual cliente/servidor, para que se pueda tener acceso a un documento HTML desde cualquier punto en Internet, el documento debe colocarse en un servidor Web. De esta forma cualquier explorador o programa cliente puede conectarse al servidor Web que describe la direccin URL (Universal Resource Locutor, Localizador Universal de Recursos) de la pgina Web y ver su contenido. (Ignacio, et al., 2001, p.6)
A continuacin conoceremos los elementos bsicos para realizar una pgina Web que se utilizaron para realizar el proyecto del Diseo preliminar de un portal de Internet para publicitar los servicios de la Empresa Colorados.
2.1.1 Elementos bsicos de HTML
HTML. Se trata de un lenguaje para estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en tags (instrucciones que le dicen al texto como deben mostrarse) y atributos (parmetros que dan valor al tag). < www.uca.edu.sv/deptos/letras/sitio_pers/rsantos/document/lab_html.pdf > Ej. <tag> texto afectado </tag>
2.1.2 Estructura
Un documento HTML comienza y termina con la marca HTML. Esta marca indica que se trata de un documento de tipo HTML. Dentro del documento se distinguen dos zonas: el encabezamiento, (HEAD) y el cuerpo, (BODY). Se trata de una separacin
lgica entre la informacin relativa al documento y la informacin que contiene el documento en s.
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> (Gonzales, Cordero, 2001, p35)
2.1.3 Titulares
Se pueden utilizar distintos tipos de titulares para las distintas secciones de un documento. Para ello se usa el elemento Hn, siendo n un nmero del 1 al 6 que indica el nivel del titular. (Gonzles et al, 2001, p35) <Hn del 1 al 6 > Titular n </Hn del 1 al 6>
2.1.4 Atributos del texto
Mediante estos atributos determinamos el estilo de letra que tendr la presentacin del documento final. Martinez A. (1995 <http://www-
app.etsit.upm.es/~alvaro/manual/manual.html>)
<P> prrafo </P> <BR> retorno de carro <P ALING = RIGHT> prrafo alineado a izquierda </P> <P ALING = LEFT> prrafo alineado a derecha </P> <P ALING = JUSTYFIC> prrafo justificado </P> <B> texto en negrita </B> <L> texto en Itlica </L> <U> Texto Subrayado </U> <TT> Fuente maquina de escribir </TT>
<CENTER> texto centrado </CENTER> cualquier objeto dentro de esta marca aparecer centrado en la pantalla. (Gonzles et al, 2001, p.35) <FONT> valor del texto <FONT COLOR=?????> Color del texto <FONT SIZE= del 1 al 7> tamao de letra <FONT FACE= ??????> Tipo de letra
2.1.5 Lneas Horizontales
Una lnea horizontal se dibuja mediante el elemento vaco HR. <HR> lnea <HR SIZE=del 1 al n numero> lnea con grosor <HR WIDTH=del 1 al n numero> lnea con anchura (Gonzles et al, 2001, p.44)
2.1.6 Listas Segn (Gonzles et al, 2001, p.42) existen dos tipos de listas: la listas de definicin o glosario y las listas regulares (numeradas y sin numerar). Listas de definicin: Bernaus, blanco, las listas de definicin estn compuestas por dos elementos, el trmino a definir y su definicin(2000, p.45). <DL> sirve para crear una lista de definicin y <DT> el termino a definir <DD> definicin identificada. (Bernaus et al 2000, p 47). <DL> lista de definicin <DT>termino a definir </DT> <DD>Definicin identificada </DD> </DL> Listas regulares: <UL> identifica el inicio de una lista representada por vietas, cada vieta a su vez se representa con la instruccin <LI>. <OL> identifica el inicio de una lista representada numricamente, cada numeracin
se
representa
por
la
instruccin
<LI>.
Gallegos
A.
F,
(2008,
<
http://www.librosweb.es/>) <UL>lista de vietas <LI>Vietas</LI> </UL> <OL>Lista Numrica <LI>Numeracin</LI> </OL> Una lista solo puede contener elementos <LI>. A su vez, un elemento LI puede contener muchos elementos HTML: texto, imgenes, otras listas, prrafos, formularios etc. Por lo contrario no puede contener titulares. (Gonzles et al, 2001, p. 42)
2.1.7 Tablas
El elemento bsico de definicin de tabla es <TABLE> </TABLE> y en su interior se disponen los sub elementos <TR> para definir una fila (Row) <TH> para definir una cabecera (Header) <TD> para definir una celda de datos (Data). Estos sub elementos tambin han de llevar sus correspondientes cierres: </TR> </TH> </TD>.
Una tabla puede contener los siguientes atributos: BORDER Indica el ancho de los bordes de la tabla.
BGCOLOR da color a las celdas de una tabla BORDERCOLOR CELLSPACING Establece el color de los bordes de la tabla. Indica el nmero de pxels que separan una celda de otra.
CELLPADDING Indica los pxels de separacin entre el borde de la celda y su contenido. WIDTH ALIGN VALIGN sirve para controlar el ancho de toda la tabla o de sus columnas. Indica la alineacin horizontal de los datos dentro de las celdas. Indica la alineacin vertical de los datos dentro de las celdas.
La sintaxis para hacer una tabla HTML para es la siguiente:
<TABLE> <TR> <TD> celda(1,1) </TD> <TD> celda (1,2) </TD> </TR> <TR> <TD> celda(2,1) </TD> <TD> celda(2,2) </TD> </TR> <TR> <TD> celda(3,1) </TD> <TD> celda(3,2) </TD> </TR> </TABLE> < http://www.uv.es/jac/guia/ >
2.1.8 Colores
Los colores bsicos en el lenguaje html son los que se muestran en la siguiente tabla de colores.
Tabla 2.1 Tabla de colores HTML BLACK NAVY BLUE TEAL AQUA
LIME SILVER GRAY YELLOW GREEN OLIVE PURPLE RED MAROON WHITE FUCHSIA
Fuente: <http://ar.geocities.com/coloreshtml/>
2.1.9 Enlaces Segn (Bernaus et al 2000, p 47). Para definir un enlace utilizaremos el comando <A>, indicando a continuacin con la clusula HREF la direccin a la cual hace referencia el enlace. <A HREF=Documento a enlazar>descripcin del documento enlazado</A> <A HREF=inicio.html>Inicio</A> Existen dentro de una pgina Web tres tipos de enlaces:

De texto <A HREF=inicio.html>Inicio</A> De imagen <A HREF=inicio.html><IMG SRC=imgenes/inicio.jpg></A> Mixto <A HREF=inicio.html><IMG SRC=imgenes/inicio.jpg>Inicio</A>
(Bernaus et al 2000).
2.1.10 Imgenes
Las imgenes se colocan con el elemento IMG, que inserta la imagen y adapta el texto que la rodea para que no se solape con ella, el atributo SRC permite especificar el nombre del fichero donde se encuentra la imagen. La sintaxis bsica del elemento IMG es la siguiente. (Gonzales et al 2001) <IMG SRC=fichero de imagen WIDTH=anchura HEIGHT=altura ALING= alineacin> <IMG SRC=imgenes/inicio.jpg> <IMG SRC=imgenes/inicio.gif> <IMG SRC=imgenes/inicio.png>
Este tag no tiene tag de cierre
2.1.11 Marquesinas
Las marquesinas son palabras o textos que se desplazan de un lado a otro. La etiqueta para esto es <MARQUEE>, pero tambin podemos agregar diferentes atributos:
DIRECTION: Indica la direccin hacia donde se desplazar el texto, up (hacia arriba), down (abajo), left (izquierda) o right (derecha). WIDTH: Indica el ancho de la marquesina (en pixeles o porcentaje). HEIGTH: Indica el alto de la marquesina (en pixeles o porcentaje). SCROLLAMOUNT: Velocidad a la que se desplaza el texto. <MARQUEE SCROLLAMOUNT="3" WIDTH="300" HEIGTH="90"
DIRECTION="up">Texto<BR>desplazado<BR>hacia<BR>arriba</MARQUEE>
Hay un atributo ms, que sirve para mover el texto de derecha a izquierda y de izquierda a derecha, pero con este el texto no desaparece: alternate=behavior. <MARQUEE BEHAVIOR="alternate">Texto de derecha a izquierda y de izquierda a derecha</MARQUEE> Juszkiewicz L. (2005 <
http://www.monografias.com/trabajos30/manual-html/manual-html.shtml#marques>)
2.1.12 Formularios
La etiqueta para un formulario, es <FORM>, y sus atributos son los siguientes: METHOD: Indica el mtodo por el que se enviarn los datos. Existen 2: POST: Enva datos por la entrada estndar STDIO (utilizado normalmente). GET: Enva datos por medio de un URL (enlace). ACTION: Indica el mail a donde se enviarn los datos o el nombre del archivo.PHP o .ASP <FORM ACTION="mail[arroba]dominiio.com" METHOD="POST"></FORM> o
<FORM ACTION="form.php" METHOD="POST"></FORM>
Para enviar datos en un formulario se necesitan cuadros de texto. La etiqueta que se usa es <INPUT> (no tiene etiqueta de cierre) y tiene varios atributos: TYPE: Define el tipo de texto que se introduce en el cuadro, sus valores pueden ser: TEXT: Cualquier tipo de texto como el nombre, e-mail, direccin... PASSWOR: Se usa para ocultar las claves o datos confidenciales (al escribir en este, muestra *******. HIDDEN: Datos escondidos, asunto, e-mail de destino... BUTTON: Crea un botn. IMAGE: Hace que una imagen sea el enlace (la imagen se muestra con el atributo). SUBMIT: Enva el formulario. RESET: Borra los campos del formulario. VALUE: Indica el valor de un atributo o el nombre que se mostrar (en el cuadro). NAME: Nombre del campo. MAXLENGTH: Indica el nmero de caracteres mximo para escribir. SIZE: Indica el tamao del cuadro de texto.
La sintaxis para hacer un formulario en lenguaje HTML es la siguiente (figura 2.1): <FORM METHOD="post"> Nombre <INPUT TYPE=TEXT NAME="nombre" MAXLENGTH="10" SIZE="15"> Password <<INPUT TYPE ="PASSWOR" NAME="contrasea" MAXLENGTH ="10" SIZE="15"> <INPUT TYPE="SUBMIT" NAME="enviar" VALUE="Enviar"> <INPUT TYPE="RESET" NAME="Borrar" VALUE="Borrar Todo"> </FORM>
Figura 2.1 formulario ejemplo
Fuente: Juszkiewicz L. (2005 < http://www.monografias.com/trabajos30/manual-html/manualhtml.shtml#marques>)
2.1.13 Frames
En ingls, (marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de pginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizaderas. Los navegadores que lo implementan son el Netscape 2.0, y el Explorer 2.0 en adelante.
Una de sus caractersticas ms importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una pgina determinada. Esto se utiliza frecuentemente para tener un frame estrecho en la parte lateral (o superior) con un ndice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas pginas. De esta manera se facilita la navegacin entre las pginas, pues aunque se vaya pasando de unas a otras, siempre estar a la vista el ndice del conjunto. Sequera R. A. (2008 <
http://www.monografias.com/trabajos4/cursoweb/cursoweb.shtml>)
2.2 Fundamentos de Hojas de Estilo en Cascada 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. Esta forma de descripcin de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentacin. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de mltiples pginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectar a todas las pginas vinculadas a esa CSS en las que aparezca ese elemento. <http://conceptomarketing.com/2008/06/trucos-y-consejosde-diseno-web/css-para-principiantes.html>
2.2.1 Principales elementos en el desarrollo de CSS
Atributo: son palabras que se utilizan para indicar cual estilo queremos modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo "FONT", si es el fondo, el atributo "BACKGROUND", etc.
Valores: son para definir como vamos a modificar el atributo, o la propiedad que le daremos. Por ejemplo, si queremos que un tipo de letra sea rojo, usamos el atributo "FONT" y el valor "red".
Selectores: se usan para definir sobre cuales elementos HTML vamos a aplicar los estilos, si queremos definir un estilo para toda la pagina, debemos usar el selector "body" que se refiere a la etiqueta <BODY> del documento HTML. Hay tres tipos de selectores:
Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo.
Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre.
El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto "." seguido del nombre que le queramos poner a la clase, de esta forma: mi_clase.
Un ltimo es el selector universas si queremos inicializar las propiedades de todas las marcas HTML.
* { color:#0000aa; margin:0px; padding:0px;} Garca F. J (2008, <http://www.cristalab.com/tutoriales/tutorial-basico-de-css-c94l/>)
2.2.2 La sintaxis
Primero se coloca el selector, luego se abre una llave "{" y se empiezan a colocar los atributos, seguidos de dos puntos ":" y luego el valor seguido de punto y coma ";", al
final de todo se cierra el estilo para el selector con el cierre de llave "}". Se pueden definir tantos atributos con sus respectivos valores como se desee, separndolos con un espacio o un salto de linea. En CSS se deben escribir los atributos y valores con minsculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar. Garca F. J (2008, <http://www.cristalab.com/tutoriales/tutorial-basico-de-css-c94l/>)
2.2.3 Definicin de una Hoja
Es un archivo separado de la marca HTML que deber tener como extensin .CSS, este archivo contendr las reglas de estilos que se vern continuacin y que estarn separadas del archivo HTML. La ventaja fundamental es que con esto podemos aplicar las mismas reglas de estilo a parte o a todas las pginas del sitio Web.
<HTML> <HEAD> <TITLE> PRINCIPAL</TITLE> <LINK REL=STYLESHEET HREF=COLORADO.CSS TYPE=TEXT/CSS </HEAD> <BODY> </BODY>
2.2.4 Definicin de estilos por medio de clases
Una regla de estilo puede ser igual para un conjunto de marcas HTML, en esos casos conviene plantear una regla de estilo con un nombre genrico que posteriormente se puede aplicar a varias marcas de HTML. <
http://www.cssya.com.ar/>. La sintaxis para definir una clase aplicable a cualquier marca HTML es: La sintaxis de marca CSS es la siguiente: .resultado { color:#000000;
background-color:#ffff00; font-Stule:Italic;} La sintaxis de marca HTML es la siguiente: <H1 CLASS=resultado>Titular</H1>
2.2.5 Definicin de estilos por medio de Id.
La diferencia fundamental en la definicin de un estilo por medio de Id con respecto a las clases, es que slo podremos aplicar dicho estilo a una sola marca dentro de la pgina HTML. < http://www.cssya.com.ar/>La sintaxis para definir un estilo por medio de Id es:
La sintaxis de marca CSS es la siguiente: # cabecera { font-family: times new roman; font-size:30px; fext-align:center; color:#0000ff; background-color:#bbbbbb;} /* este es el documento colorado.css */
La sintaxis de marca HTML es la siguiente: <HTML> <HEAD> <TITLE> PRINCIPAL</TITLE> <LINK REL=STYLESHEET HREF=COLORADO.CSS TYPE=TEXT/CSS> </HEAD> <BODY> <DIV ID=cabecera> <H1>Titular</H1> <! Adquiere las propiedades del archivo colorado.css > </DIV> </BODY>
2.2.6 Propiedades de los estilos de listas
Las listas se utilizan para enumerar una serie de elementos, se utiliza la marca HTML UL (Unordered List), y cada item de la lista con la marca HTML LI (List Item). Las CSS nos permiten configurar las listas por medio de tres propiedades: < http://www.cssya.com.ar/> Se List-style-type le pueden asignar los siguientes valores:
none,disc,circle,square,decimal,decimal-leading zero,lowerroman,upper-roman, lower-alpha, upper-alpha.
List-style-position
se le pueden asignar los siguientes valores: incide, outside.
list-style-image
se le pueden asignar los siguientes valores: none, url.
ul.vacio{ list-style-type:none;}
La sintaxis de marca HTML es la siguiente <UL CLASS=vacio> <LI>Servicio</LI> </UL>
2.2.7 Unidades de medida
En CSS se disponen de las siguientes unidades de medidas: px {pxeles} em {altura de la fuente por defecto} ex {altura de la letra X} in {pulgadas} cm {centmetro} mm {milmetro} pt { puntos, 1 punto es lo mismo que 1/72 pulgadas} pc { picas, 1 pc es lo mismo que 12 puntos}
% {porcentaje} .pixel1{font-size:12px;} La sintaxis de marca HTML es la siguiente <P CLASS=pixel1>Este texto tiene 12px<p>
2.2.8 Propiedades de color y fondo
Los colores y el fondo en una pgina Web son muy importantes y la combinacin de ellos tambin, por eso en CSS existen distintas formas de combinar los colores, el fondo y plasmarlos en pantalla. Tabla 2.2
Tabla 2.2 Propiedades de color y Fondo
Propiedades background Definicin Esta propiedad se utiliza para definir el fondo de un elemento. Su valor puede ser transparent, un color o una direccin URL tambin es posible determinar si la imagen especificada como fondo se repetir, (repeat, repeat-x repeat-y no-repeat) en el siguiente ejemplo la imagen se repetir horizontalmente. BODY {background:url(fondo.gif)repeat-x} Realiza un desplazamiento de la imagen con respecto a la ventana si nos movemos por la pagina, (scroll,fixed) fija la posicin de la imagen dentro de la pagina (porcentaje, longitud, left, right, center, top, middle bottom). En la siguiente lnea hemos situado la imagen centrada horizontalmente y aun 10% del margen: BODY {background: url(fondo-gif) fixed center 10%} color Establece el color utilizado para el elemento. Podemos definir el color con su nombre en ingles o como un color RGB as por ejemplo el color azul seria blue o RGB (0,0255). Background-color Determina el color de fondo, pudiendo ser sus valores el color a utilizar o trasparent si se desea un fondo transparente. Background-image Background-repeat Indica la imagen a utilizar de fondo. Sus valores pueden ser none o url (nombreimagen). Esta propiedad nos permite especificar si la imagen se repartir para llenar todo el fondo. Los valores son repeat, repeat-x (se repetir horizontalmente), repeat-y (se repetir verticalmente), no repeat. Backgroundattachment Backgroundposition Indica si la imagen quedara fija en el fondo o si se desplazara junto con el contenido de la pgina. Los posibles valores de esta propiedad son scroll y fixed. Determina la posicin de la imagen de fondo. Esta posicin puede especificarse utilizando porcentajes, una longitud determinada o con los valores top, center, bottom, left, right.
Fuente: Aprenda hacer paginas web (Curso de Iniciacin) (2000, P.165-166)
2.2.9 Propiedades de la Fuente
En la tabla (tabla 2.3) se especifican las propiedades mas utilizadas en la marca CSS como propiedades para las fuentes.
Tabla 2.3 Propiedades de fuentes
Propiedades Font-family Definicin Determina la familia de fuentes que se utilizara ( gill ,helvetica, sans-serif, serif ,suersiva, fantasy ,monospace)) Font size Modifica el tamao del tipo de letra utilizado el tamao puede establecerse en modo absoluto (XXsmall, X-small, small,mdium, large, X-large, XX-large), relativo al tamao estndar (large, smaal), en puntos (ej. 12pt) o porcentaje (ej.175%). Font-style Font-variant Determina el formato de la fuente (normal, Italia, oblique) Indica una variacin de la familia de fuentes seleccionadas siendo los valores, posible normal y smallcaps. Font-weight font Ancho de la fuente (normal, bold, bolder,leighter, 100, 200, 300, 400, 500, 600, 700, 800, 900). Esta propiedad es una forma simplificada de especificar todos los atributos anteriores.
Fuente: Aprenda hacer paginas web (Curso de Iniciacin) (2000, P.165)
2.2.10 Propiedades del texto
Las propiedades del texto se refieren a la decoracin del mismo y se pueden hacer con los comandos que en la siguiente tabla se mencionan.
Tabla 2.4 Propiedades del texto
Propiedades letter-spacing Definicin Determina el espacio entre letras, siendo sus posibles valores los mismo que para la propiedad Word-spacing line-height text-aling text-decoration Establece el interlineado (ej.1.4) por una longitud (ej 1.4em) o un porcentaje Define la alineacin de un texto (left, right,center,justify). Esta propiedad se utiliza para concretar el tipo de decoracin que se asigna a un texto (underline, overline, line-through, blink, none). taxt-trasform Modifica la apariencia de un texto, se utiliza para convertir a maysculas o minsculas un texto (capitalize, uppercase, middle, bottom, text-bottom, porcentaje). tertical-aling Esta propiedad se emplea para establecer la alineacin vertical de un elemento (baseline, sub, super, top, text-top, middle, bottom, text-bottom, porcentaje). Word spacing Indica el espacio entre palabras. Suvalor puede ser: normal o una longitud.
Fuente: Aprenda hacer paginas web (Curso de Iniciacin) (2000, P.166-167)
2.2.11 Propiedades del contorno de los elementos
En la siguiente tabla (tabla 2.5) se especifican las propiedades del contorno de los elementos visibles para el usuario final.
Tabla 2.5 Propiedades del contorno de los elementos
Propiedades border Definicin Se trata de cuatro propiedades border-left, border-right, border-top border-bottom que se utilizan para definir los bordes de una caja. Sus valores son: ancho, estilo, url y color. El ancho puede ser: thin, mdium, trick, o un valor numerico y estilo: none, dotted, dashed, solid, double, groove, ridge, inset, outset. La siguiente lnea definira un borde solido con una lnea gruesa de color rojo. H1{broker: solid tic red} border-top-width Establece el ancho del borde superior. Puede especificarse el tamao o utilizar el tamao predeterminado Thin, mdium o thick border-right-widht Establece el ancho del borde derecho. Puede. Puede especificarse el tamao o utilizar el tamao predeterminado Thin, mdium o thick border-bottom-widht Establece el ancho del borde Inferior. Puede. Puede especificarse el tamao o utilizar el tamao predeterminado Thin, mdium o thick border-left-widht Establece el ancho del borde izquierdo. Puede. Puede especificarse el tamao o utilizar el tamao predeterminado Thin, mdium o thick border -widht Establece el ancho del borde. Puede. Puede especificarse el tamao o utilizar el tamao predeterminado Thin, mdium o thick border -top border-right border-bottom border-left border-color border-style Permite especificar el estilo, color y ancho del borde superior. Determina el estilo, color y ancho del borde derecho. Determina el estilo, color y ancho del borde inferior. Esta propiedad permite especificar el estilo, color y ancho del borde izquierdo Determina el color del borde. Especifica el tipo o estilo del borde. Los posibles valores son: none, dotted, dashed, solid, double, groove, ridge, inset, outset. clear height margin Este elemento determina si un elemento puede tener elementos flotantes a su alrededor Establece la altura del objeto Se trata de cuatro propiedades margin-left, margin-right, margin-top, margin-bottom que se utiliza para definir los mrgenes de una caja padding Establece la separacin entre el borde y el contenido de una ca pueden ser padding-top, padding-right, padding-left, padding-bottom. widht display Determina el ancho del objeto. Indica como debe visualizarse un elemento en la pgina. Los valores de estas propiedades son: block, inline, list-item, none
Fuente: Aprenda hacer paginas web (Curso de Iniciacin) (2000, P.167-168-169)
CAPTULO III RECURSOS Y DISEO DEL PROTOTIPO WEB
3 Recursos y Diseo del prototipo Web
Tras definir conceptos bsicos de redes y de programacin de una pagina web, en este Captulo ilustraremos el diseo preliminar del portal web en construccin, el cual ser destinado a los distintos pblicos, quedando por parte de la empresa adjudicar al proyecto los recursos de personal, material, inversin y tiempo adecuados para garantizar al mismo posibilidades de xito.
3.1 Definicin de recursos
La empresa Coloradomx SA de CV con domicilio en la calle 42E esquina con 25 entre 31 y 19 num. 80, colonia. Benito Jurez tiene el sustento personal, material y financiero para que este proyecto sea puesto en marcha, recursos que son necesarios para su funcionamiento.
3.1.1 Recursos Personales
En la actualidad una pagina web al momento de ser publicada es como cualquier otro negocio en donde hay que atender al publico ya sea por medio de llamadas, correos o cualquier otro medio de comunicacin necesario. Debemos estudiar que quieren nuestros clientes para poder satisfacer sus expectativas; a dems de crear nuevos contenidos, contar con mantenimiento tcnico, as como la atencin de las ventas que puedan derivarse en lnea. En coloradomx, habiendo analizado los aspectos antes mencionados contamos con el personal capacitado para cumplir con las expectativas planteadas en este proyecto, ver Tabla 3.1.
Tabla 3.1 Personal Actual de la compaa Coloradomx
Puesto Gerente Diseador Grafico 1 Perfil Dueo de la Empresa Requiere grado de Diseador Grafico, conocimientos en elementos de la comunicacin, publicidad y Actividades Dueo de la Empresa Diseo y realizacin de imgenes, produce proyectos de comunicacin visual, desarrollar imgenes de identidad corporativas, productiva, educativa, etc., manejo de tcnicas con software grficos, desarrollo de diseo publicitarios, de campaas, sealizaciones etc. Diseo y realizacin de imgenes, produce proyectos de
herramientas tecnolgicas para el diseo grafico Diseador Grafico 2 Requiere grado de Diseador Grafico,
conocimientos en elementos de la comunicacin, publicidad y
comunicacin visual, desarrollar imgenes de identidad corporativas, productiva, educativa, etc., manejo de tcnicas con software grficos, desarrollo de diseo publicitarios, de campaas, sealizaciones etc. Realiza impresiones en diversas tcnicas igualando pinturas
herramientas tecnolgicas para el diseo grafico Impresor 1 Conocimiento en las tcnicas de impresin Impresor 2 Conocimiento en las tcnicas de impresin Secretaria Estudios medio superior
Realiza impresiones en diversas tcnicas igualando pinturas
Atender llamadas, levantar pedidos, atencin a clientes y proveedores.
Programador 1
Requiere
grado
de
estudios
en
Desarrollo de creacin de paginas web
informtica, programador web, flash, etc. Programador 2 Requiere grado de estudios en Desarrollo de creacin de paginas web
informtica, programador web, flash, etc.
3.1.2 Recursos Materiales
Para atender las necesidades del proyecto web en coloradomx se cuenta con el equipo informtico necesario, con las caractersticas especificadas en la figura 3.1 el cual es de uno de los equipos.
Figura 3.1 Propiedades del sistema de las computadoras de Coloradomx
3.1.3 Recursos Financieros
El portal web de la empresa coloradomx para poder visualizarse en Internet es necesario tener un dominio, o nombre de dominio el cual llevara
http://www.coloradomx.com.mx por disponibilidad del servicio (figura 3.2), de igual manera el servicio de hosting o alojamiento web.
Figura 3.2 Seleccin de dominio
Fuente: http://www.masther.com
Con estos datos en mano (host y el dominio) al contratar el servicio de hosting, la empresa contratista nos enviara algunos datos especficos como: Nombre de usuario y contrasea. DNS de los servidores que maneja la empresa de host. Direcciones IP de los servidores del host. Los puertos de los servidores. Vnculos de acceso a la cuenta, as como al panel de administracin del host.
Despus de analizar varias ofertas de servicio de hosting en las direcciones de la tabla 3.2 la empresa Coloradomx alojar el portal http://www.coloradomx.com.mx en los servidores de la empresa http://www.masther.com la cual ofrece el servicio
bsico con un costo de $ 1,990.00 pesos anuales que podemos contratar por medio del contacto en ciudad del carmen tal como lo muestra la tabla 3.2.
Tabla 3.2 Empresas de servicio de hosting
http://www.hostdime.com.mx http://www.mexagon.net http://www.masther.com http://internetworks.com.mx http://www.intermexico.net
Figura 3.3 Contacto masther
Fuente: http://www.masther.com
Por lo cual el costo total de la puesta en marcha del proyecto web ser de $ 9,990.00 tal como se especifica en la tabla 3.3
Tabla 3.3 Costos de fabricacin
Descripcin Hosting Costo de la pagina web terminada Costo total:
Costo 1,990.00 8,000.00 9,990.00
3.2 Diseo Preliminar del portal web para publicitar los servicios de la Empresa Coloradomx.
El portal Web esta diseado con colores llamativos y representativos de nuestra empresa con secciones para que nuestro cliente consulte nuestros servicios, conozca sobre nuestra empresa y se comunique con nosotros. Todo esto por medio de nuestros mens interactivos e imgenes que le ayudan a identificar la pagina en que se encuentra la cual estratgicamente se colocaron en las diversas secciones. Cada pagina esta diseada con la finalidad de trasportar a nuestro cliente a comunicarse por medio de nuestro formulario de contactos. A continuacin mostraremos las diversas secciones del prototipo de nuestro proyecto Web.
3.2.1 La empresa
En esta parte del proyecto Web se especifican las generalidades de la empresa para que el cliente se identifique con ella, tambin mostramos a los clientes nuestro perfil como empresa que somos, a que nos dedicamos y como surgi esta empresa. As como tambin nuestra misin y visin que tenemos para lograr la total satisfaccin de nuestros clientes Esta seccin del sitio web esta dividido en tres paginas como se muestra en las figuras 3.4, 3.5 y 3.6.
Figura 3.4 Quines Somos?
Figura 3.5 Nuestra Misin
Figura 3.6 Nuestra Visin
3.2.2 Inicio En el apartado de Inicio aparecer la siguiente leyenda: Les damos la ms cordial bienvenida a nuestros clientes invitndolos a navegar por nuestro sitio web y de tal
modo que conozcan ms sobre nosotros y de los servicios que ofrecemos. Ver Figura 3.7.
Figura 3.7 Pagina de Inicio
3.2.3 Servicios
En esta seccin se han plasmado un grupo de servicios y diseo creativo que proporciona soluciones efectivas a los problemas de comunicacin, arquitectura y creatividad de nuestros clientes, como se muestra en la Figura 3.8. Estos servicios pueden ser consultados individualmente en donde el cliente podr decidir que servicio le conviene mas para su mejor impacto en el mercado.
Los servicios que en esta seccin ofrecemos son los siguientes Offser (Figura 3.9) Serigrafa (Figura 3.10) Rotulacin (Figura 3.11) Escenografa (Figura 12) Sello (Figura 3.13) Publicidad (Figura 3.14) Imagen Corporativa (Figura 3.15)
Diseo Grafico (Figura 3.16) Diseo Web (Figura 3.17)

Figura 3.8 Servicios
Figura 3.9 Servicio Offset
Figura 3.10 Servicio de serigrafa
Figura 3.11 Servicio de rotulacin
Figura 3.12 Servicio de escenografa
Figura 3.13 Servicio de sellos
Figura 3.14 Servicio de publicidad
Figura 3.15 Servicio de imagen corporativa
Figura 3.16 Servicio de diseo grafico
Figura 3.17 Servicio de diseo Web
3.2.4 Portafolio
La seccin del portafolio fue diseada en la propuesta del portal web con el objetivo de incentivar a los clientes mostrndoles los trabajos que se han realizado y de esta manera tratar de llegar a ellos. (Ver figura 3.18)
Figura 3.18 Portafolio
En la figura 3.19 plasmamos una muestra del portafolio de la seccin de estenografa

Figura 3.19 Portafolio escenografa
3.2.4 Contctenos
Una portal Web que no permita comunicar a los usuarios con la empresa, quiere decir que es un portal web no terminado, es importante la comunicacin y la interaccin de la empresa con sus clientes, por eso en el portal de la empresa coloradomx pensamos en un formulario tal como se muestra en la figura 3.20, que permita la comunicacin con sus clientes y de esta manera ahorrar tiempo, dinero y trabajo.
Figura 3.20 Contctenos
CONCLUSIN
En el presente trabajo se ha realizado el diseo preliminar de
un portal web
orientado a proporcionar informacin de los servicios que ofrece la empresa Coloradomx, el objetivo del proyecto es difundir los servicios que ofrece la empresa Coloradomx y de esta manera incrementar la cartera de clientes.
Para el desarrollo de este portal se abordaron los conceptos bsicos de red, donde la finalidad es dar a conocer la red, como un mecanismo para compartir recursos, por lo cual se debern conectar los ordenadores, utilizando una serie de estndares y protocolos para su funcionamiento en una red y de esta manera acceder a la informacin por medio de sistemas informticos tal como el Internet.
La Internet
es una gran red
de grandes servidores en configuracin de
cliente/servidor, en donde el cliente manda una peticin al servidor que es respondida por ste y son interpretados en nuestra interfase, tal como suceder con el portal web de la empresa Coloradomx al ser alojada en un hosting. El sitio Web podr ser visualizado por medio de navegadores en cualquier ordenador al ingresar la direccin o nombre de dominio siguiente: http//:www.coloradomx.com.mx.
El diseo preliminar del portal de la empresa coloradomx se realizo con el lenguaje de programacin HTML y CSS. El lenguaje HTML fue aplicado para programar la informacin que se da a conocer en el portal, tal como las imgenes y el texto que ah se presenta, el leguaje CSS fue aplicado para dar forma y estilo al portal, tal y como ser visualizado por los usuarios en la internet.
Considerando los aspectos de programacin de los lenguajes aplicados en la solucin desarrollada en este proyecto se dividi nuestra web en zonas
informacionales en funcin de los criterios que hemos considerado para la promocin de servicio e identificacin de la empresa de la cual queremos representar en este portal. Los cinco apartados principales del portal web son:
El encabezado: en donde se muestra una imagen donde el usuario identifica la empresa de este portal. El margen derecho y el margen izquierdo: muestran informacin sobre publicidad, promociones e informacin sobre la empresa. en la zona central: un acceso rpido a los contenidos que ofrecen informacin sobre inters del cliente. El pie de del portal muestra informacin sobre contrataciones y solicitud de presupuestos.
El criterio que se sigui para estructurar el contenido de la pgina fue una distribucin por contenido, mediante la colocacin de mens independientes para que su acceso sea ms rpido.
Sin el fin de redundar, nuestro proyecto, cumple con las expectativas planteadas en los objetivos sealados, con esta aplicacin de sistema informtico logramos dar a conocer la empresa Coloradomx no solo localmente, tambin, nacionalmente por medio del portal web el cual se dise crendolo con programacin HTML y CSS en el que:
Se clasificaron los servicios que ofrece la empresa Coloradomx Se disearon secciones para consultas de usuarios Se crearon link para interactuar en la pagina Web en las diversas secciones Se crearon galera de trabajos realizados para motivacin del cliente Se logr mantener comunicacin con los clientes por medio de nuestro formulario de contactos.
Es digno de comentar que en los resultados del sistema de bsqueda Google la web del proyecto ocupara el primer lugar cuando se busque por nombre y se encuentre entre las primeras posiciones cuando se buscan temas relacionados con los servicios grficos.
Trabajos Futuros Un proyecto como el que aqu se presenta, destinado a ofrecer informacin por Internet, podra no tener fin. Los resultados obtenidos durante el desarrollo del presente trabajo han sido satisfactorios y concordantes en cuanto a efectividad. Sin embargo, en cuanto a este proyecto se han analizado determinadas cuestiones especficas, las cuales se plantean como trabajos futuros que se comentan seguidamente. Como trabajo inmediato, el diseo preliminar del portal web de la empresa Coloradomx se concluir en su totalidad. Adjunto a esto el servicio de hospedaje de hosting. En el concepto de diseo se plantea la aplicacin de diseo flash, esto es con el fin de ofrecer una interfaz ms grafica y atractiva para el cliente. De la misma manera se plantea el diseo de ventas en lnea. En la aplicacin de acondicionamiento en el portal web, se llevara acabo la realizacin de una base de datos, misma que servir para el registro de clientes, control de contactos y ventas en lnea. Un trabajo que seria de mucha utilidad y que complementaria el presente proyecto, es la implementacin de servidores web.
GLOSARIO
DNS. Domain Name System es una base de datos distribuida y jerrquica que almacena informacin asociadas a nombre de dominio en redes como internet.
Extranet. Red de comunicaciones mundial que agrupa redes internacionales, nacionales, regionales y locales.
Flash. Reproduce archivos multimediales, creados con Macromedia Flash.
FTP (file tranfer protocolo). protocolo estndar de alto nivel del TCP/IP que sirve para transferir archivos de una maquina a otra. El FTP utiliza al TCP.
Hub. Concentrador. Dispositivo que se utiliza tpicamente en topologa en estrella como punto central de una red, donde por ende confluyen todos los enlaces de los diferentes dispositivos de la red, HTTP es el protocolo que sirve de base para el intercambio de informacin en el sistema WWW.
Hub. Es el dispositivo que concentra los cables de una red local.
HTML. (Hipertext Markup Language lenguaje de marcacin de hipertexto) Lenguaje empleado para la realizacin de documentos de hipertexto e hipermedia.
Intranet. Es una red TCP/IP de una empresa u organizacin, que enlaza a empleado y miembros de una organizacin, etc. y su informacin, de tal manera, que aumenta la productividad de aquellos, facilita el acceso a la informacin y convierte a la navegacin por los recursos y aplicaciones de su entorno informtico.
INTERNET. Internet Networks, es decir: redes interconectadas.
LAN. (Local Area Network) red de rea local.
MAN. (Metropolitan Area Network) red de rea metropolitana.
Netscape. Casa desarrolladora de software, creadora de programas como el conocido navegador de internet Navigator, que ahora se distribuye junto con otras utilizadas (como el Messenger, para el correo electrnico, Collabra para los grupos de noticias y Composer para la creacin de pginas Web) bajo el nombre de Communicator.
OSI.
Modelo
de
interconexiones
de
sistemas
abiertos
(Open
Systems
Interconnection). Es un modelo terico de conexin de sistemas, estructurado en 7 capas (fsica, enlace, red, transporte, sesin, presentacin y aplicacin).
Protocolo. Trmino tomado del lenguaje diplomtico que se utiliza para designar las reglas y convenciones necesarias para intercambiar informacin en un sistema de telecomunicaciones.
Quicktime. Reproduce archivos de video; creado por Apple
Router. Enrutador (en ingls: router), ruteador o encaminador es un dispositivo de hardware para interconexin de red de ordenadores que opera en la capa tres (nivel de red).
Repetidor. Dispositivo sencillo utilizado para regenerar una seal entre dos nodos de una red.
Real Player. Reproduce archivos de audio
SMTP. Simple Mail Transport Protocol (Protocolo de Transporte de Correo Sencillo)
Switch. Un dispositivo de red que selecciona una va o circuito para el envo de una unidad de datos a su prximo destino.
SNMP. Simple Network Management Protocol (Protocolo de Gestin de Red Sencillo)
SMTP. Se utiliza para enviar correos en la red. Es llamado por el comando MAIL
SAN. (Storage Area Network) Una red de alta velocidad y destinada a fines especficos, la cual conecta diferentes dispositivos de almacenamiento de datos a los servidores. Un SAN puede brindar soporte y almacenamiento de archivos para locaciones mltiples o remotas.
Servidor. Ordenador de alta potencia que permanece conectado a una red 24 horas al da y que almacena datos que pueden ser recuperados desde otros ordenadores.
Telnet. Es el mtodo normal de conectarse a un servidor de la red. Permite la emulacin de varias terminales, pudiendo especificar el que se desee utilizar, o con opciones del comando o con las entradas del archivo de configuracin FTP.CFG.
Token Ring. Red en anillo con paso de testigo, utilizada en los sistemas AS/400 de IBM. El tas de transferencia es de 4 o 16 Mbits/s.
TCP/IP (siglas inglesas de Transmission Control Protocol/Internet Protocol). Conjunto de protocolos de comunicacin que son utilizados en Internet para poner en relacin unos ordenadores con otros.
VPN. Red Privada Virtual (RPV), en ingls Virtual Private Network (VPN), es una tecnologa de red que permite una extensin de la red local sobre una red pblica o no controlada, como por ejemplo Internet.
WAN. (Wide Area Network) Una red que sobrepasa los lmites de un edificio a otro a largas distancias.
WWW. World Wide Web (tambin llamada Web o W3) subconjunto de Internet en el que la informacin se presenta en pginas con formato HTML, las cuales tienen la ventaja de permitir saltar de unas pginas a otras mediante el llamado hipertexto, de forma tal que el usuario puede navegar entre pginas relacionadas con un simple clic del mouse (ratn).
BIBLIOGRAFA Born G. (2001), Compendium HTML con XHTML, DHTML, CSS, XML, XSL, WML, Mar combo. Cisco Certified Network Associate version 3.1 (2001) staky Flix M. (2000), Gua Visual: Internet Edicin 2000, Anaya Multimedia, Espaa. Garca F. J., Tramullas J. (1996), Internet y Ciberespacio: World Wide Web Fundamentos, navegacin y lenguaje de la red mundial de informacin, RA-MA, Madrid Espaa Snchez J. I., Santos G., Molina P. J.,(2001) HTML4 Iniciacin y Referencia, MCGraw-Hill, S.L. Mxico Bernaus A, Blnco J, (2000) Aprenda hacer pagina web. Curso de Iniciacin, Inforbook's, Espaa. Gonzlez J. M, Crdova J. M, (2001) Introduccin al Lenguaje HTML, McGrawHill, Espaa. Comer Doglas E., (1995), Redes de area local y TCP/IP, RA-MA, Madrid Espaa.
FUENTES ELECTRONICAS
(2007)Como funciona el Modelo OSI?. Obtenida el 22 de marzo de 2009 de http://www.ordenadores-y-portatiles.com/modelo-osi.html < http://antivirus.interbusca.com/glosario/navegador.html > < www.carmenhoy.com > < www.ciudaddelcarmen.com.mx > < www.portal-ciudaddelcarmen.com > < www.rinconcarmelita.com > < www.surestecarmen.com > < www.unacar.mx > <www.carmen.gob> Aimacaa C (2008). Interfaz de usuario. Obtenida el 4 de abril de 2009 de http://www.monografias.com/trabajos6/inus/inus.shtml Bernat. G. (2009) Nuestra Empresa . Obtenida el 22 de marzo de 2009 de
http://Islavirtual.com.mx Bottiroli A. (2009).Switch.Obtenida el 4 de abril de 2009 de
http://www.monografias.com/trabajos7/swich/swich.shtml Chvez J. C. (2003) Protocolos de Red: Protocolo TCP/IP. Obtenida el 28 de marzo de 2009 de http://www.emagister.com/tutorial/. Publicaciones Coria M. (2004). Internet. Obtenida el 27 de marzo de 2009, de
http://www.monografias.com/trabajos5/inter/inter.shtml Creative C.(2008). SAN (Red de rea de almacenamiento). Obtenida el 1 de abril de 2009 de http://es.kioskea.net/contents/surete-fonctionnement/san.php3 Feria G.(2008) Modelo OSI. Obtenida el 6 abril de 2009, de
http://www.monografias.com/trabajos13/modosi/modosi.shtml Ferrer N. (2009). Redes MAN. Obtenida el 1 de abril de 2009 de http://aprendaredmanunerg.blogspot.com/ Franco I.. (2007). Historia del Internet. Obtenida el 28 de marzo de 2009, de http://www.monografias.com/trabajos14/internet-hist/internet-hist.shtml Gallegos A.F.(2008). Fundamentos de CSS. Obtenida el 20 marzo de 2009, de http://d.scribd.com/docs/ymdaa8as4swj4mtf5ga.pdf Jimnez C. (2008). Aplicaciones del protocolo TCP/IP. Obtenida el 27 de Marzo de 2009 de http://www.monografias.com/trabajos7/tcp/tcp.shtml Gutirrez M. (2009). La primera pgina, el primer banner, la primera imagen... de Internet. Obtenida el 23 de marzo de 2009, de http://www.tufuncion.com/historiapagina-internet Importancia de la pagina Web. Obtenido el 24 de marzo de 2009 de www.redbusqueda.com Internet. Obtenida 27 de marzo 2009
http://es.wikipedia.org/wiki/Acceso_a_internet Lora V. C.(2008). Un sitio en Internet Qu es la web?. Obtenida el 1 de abril de 2009 de http://www.monografias.com/trabajos5/laweb/laweb.shtml
Salvatierra M. (2009). La Publicidad en Internet. Obtenida el 23 de marzo de 2009, de http://www.monografias.com/trabajos7/puin/puin.shtml#cara Sobre Isla del Carmen. Obtenida el 22 de marzo de 2009 de
http://Isladelcarmen.com.mx < www.uca.edu.sv/deptos/letras/sitio_pers/rsantos/document/lab_html.pdf > Martnez A. (1995). Manual Practico de html. Obtenida el 11 de abril de 2009, de http://www-app.etsit.upm.es/~alvaro/manual/manual.html Gallegos A.F.(2008). Fundamentos de HTML. Obtenida el 20 marzo de 2009, de http://d.scribd.com/docs/ymdaa8as4swj4mtf5ga.pdf < http://www.uv.es/jac/guia/ > Aula Fcil (2008) Curso de HTML. Obtenida el 16 de abril del 2009 <http://www.aulafacil.com/CursoHtml/temario.htm > <http://ar.geocities.com/coloreshtml/> Juszkiewicz L. (2005) Manual de HTML obtenida el 17 de abril de 2009, obtenida de html.shtml#marques Sequera R. A. (2008) Curso de diseo de pagina web. HTML. Obtenida el 18 de abril del 2009 de < http://www.monografias.com/trabajos30/manual-html/manual-
http://www.monografias.com/trabajos4/cursoweb/cursoweb.shtml> <http://conceptomarketing.com/2008/06/trucos-y-consejos-de-diseno-web/csspara-principiantes.html>
ENCICLOPEDIAS
D'Sousa C. (1999).Redes de comunicacin. En la Encarta 99. (1993-1998). Microsoft Corporation.
Enciclopedia Microsoft

Trabajo Modificado de Tutulacion

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Trabajo Modificado de Tutulacion

Загружено:

Авторское право:

Доступные форматы

SECRETARA DE EDUCACIN CULTURA Y DEPORTE CENTRO AMERICANO DE ESTUDIOS SUPERIORES

ELIAZAR MARIANO MUCUL JOEL ROBERTO MAY DEL RIVERO

CD. DEL CARMEN, CAM., MXICO OCTUBRE DE 2011

SECRETARA DE EDUCACIN CULTURA Y DEPORTE CENTRO AMERICANO DE ESTUDIOS SUPERIORES

TESINA QUE EN OPCIN AL GRADO DE

ELIAZAR MARIANO MUCUL JOEL ROBERTO MAY DEL RIVERO

ASESOR: M.C. JOS LUIS VZQUEZ VILA

CD. DEL CARMEN, CAM., MXICO OCTUBRE DE 2011

Eliazar Mariano Mucul

Les ofrezco mi gratitud a las personas que estuvieron cerca m.

Joel Roberto May Del Rivero

Pg. Fuentes Electrnicas ...... 60 Enciclopedias .... 62

En la actualidad existen millones de empresas

es un portal Web que tiene 7 aos de estar en lnea sin

Foros de expresin Pasatiempos Negocios en lnea

ahorrando de esta manera tiempo laboral. (< www.compumax.com.mx>)

(<www.cactuz.com.mx>) Es el sitio de una empresa de publicidad y diseo

Dado que se contempla la posibilidad de una contratacin individual y/o institucional,

NDICE DE FIGURAS Y TABLAS TABLAS Pg. 4 8 28 37 38 38 39 41 44 45

CAPTULO I CONCEPTOS BSICOS DE RED

1 Conceptos bsicos de red

Internet es una red de redes Internet es la sper autopista de la informacin

1.2 Modelo OSI

1.2.1 Las capas del modelo OSI

velocidades de transmisin de datos

Direccionamiento de red y determinacin de la mejor ruta: Red 3 provee transferencia

Conexin de extremo a extremo: se ocupa de aspectos de trasporte de datos. Confiabilidad de trasporte de

transferencia. Proceso aplicaciones: servicios Aplicacin procesos 7 de de de red a

suministra red a los LAS 7 CAPAS DEL MODELO OSI

(como, por ejemplo, correo electrnico, Transferencia de archivos y emulacin de terminales.)

Fuente: Cisco Certified Network Associate version 3.1 (2001)

1.3 Conjunto de protocolos TCP/IP y direccionamiento

El modelo TCP/IP tiene las siguientes cuatro capas:

Capa de aplicacin. Capa de transporte Capa de Internet Capa de acceso a la red

1.3.2 La capa de aplicacin

Sistema de denominacin de dominios (DNS) Protocolo de transferencia de archivos (FTP)

(Cisco Certified, 2001, P.48).

Fuente: (Cisco Certified, 2001, P.178).

edu educacin gov administracin estatal mil ejercito

com organizacin comercial

1.3.2.3 Dominio HTTP

Tabla 1.2 Descripcin de Dominio http

tipo de protocolo de se debe usar

Fuente: (Cisco Certified, 2001, P.237).

1.3.2.4 Dominio SMTP

1.3.2.5 Dominio SNMP

1.3.2.6 Dominio Telnet

1.3.3 La capa de Transporte

Fuente: (Cisco Certified, 2001,P.179)

1.3.4 La capa de Internet

manejar el paquete. Chvez J.C. (2003, <http://www.emagister.com/tutorial/. publicaciones>)

Fuente: (Cisco Certified, 2001, P.180).

1.3.5 La capa de Interfaz de red

<http://www.emagister.com/tutorial/. publicaciones>). Ver figura 1.4

Fuente: (Cisco Certified, 2001, P.181).

1.3.6 Configuracin del protocolo TCP/IP

1.4.1 Redes de rea local (LAN)

Algunas de las tecnologas comunes de LAN son: Ethernet

Token Ring FDDI

Fuente: Cisco Certified Network Associate version 3.1 (2001, P.29)

1.4.2 Redes de rea amplia (WAN)

Fuente: Cisco Certified Network Associate version 3.1 (2001, P.33)

1.4.3 Redes de rea metropolitana (MAN)

Fuente: Cisco Certified Network Associate version 3.1 (2001, P.33)