ENTORNO DEL DISEO WEB

Objetivo de la unidad
Con el estudio de competente para:

esta unidad uste d ser

Describir los conceptos y trminos elementales relacionados con las pginas web, que le ayudarn a una mejor comprensin del rea de diseo web.

Introduccin a Diseo Web

1. Entorno del Diseo Web

1.1

Definicin de Diseo Web

Diseo Web es la actividad que consi ste en la planifica cin, diseo e implementacin de sitios web y pginas web. Requiere de navegabilidad, interactividad, usabilidad, arquitectura de la informacin y la interaccin de medios como el audio, texto, imagen y vdeo. Un buen diseo con contenidos co rrectamente elaborados, aume nta la eficiencia de la web como canal de comunicaci n para el intercambio d e datos por medio de la Internet. A continuacin estudiaremos conceptos bsicos relaci pginas web. onados con las

1.2 Conceptos bsicos 1.2.1 Internet Internet es la interconexin descentralizada de redes de computadoras implementada en un conjunt o de protocolos. Sus orgenes se rem ontan a 1969, cuando se estableci la pr imera conexin de computadoras, llamada ARPANET. Veamos otro c oncepto de Intern et: Es un conjunt o de redes de ordenadores y equipos fsicamente unidos mediante cables que conectan puntos de todo el mundo1. Estos ca bles pueden ser cables de red local, telefnicos convencionales, digitales y canales de fibra ptica. El acceso a los diferentes ordenadores y equipos que estn conectados a Internet puede ser pblico o tener cierto grado de
1 http://huacho.info/blogs/index.php

Introduccin a Diseo Web

limitantes. Lo interesante es que ca da da se encuentr an ms recursos disponibles por medio de Internet, como por ejemplo, t elfono, radio, televisin, imgenes de satlites o cmaras de trfico, servicios de bancos, etc. Hay que tener presente que Internet no es sinnimo de World Wide Web pues WWW es parte de Internet, si endo uno de los muchos servicios ofertados.

- Servicios de Internet Al analizar los servicios ms usados en Internet encontramos el Correo Electrnico, World Wide We b, FTP, Grupos de Noticias, IRC y Servicios de Telefona. El Correo Electrnico nos permite enviar cartas escritas con el ordenador a otras p ersonas que tengan acceso a la Red en cualquier parte del mundo y con un mnimo costo en co mparacin al correo normal. Las cartas quedan acumuladas en Inte rnet hasta el momento en que el destinatario las solicita. La World Wide Web, se trata de un sistema de distribucin de informacin por m edio de Pginas Web, las cuales contienen te xto y grficos. A partir de la invenci n de la WWW, muchas personas se conectan para entretenerse y cada d a ms personas tienen Internet en su hogar. El FTP (File Transfe r Protocol) nos permite enviar ficheros de dato s por Internet a cualquier parte del mundo. Estos ficheros se refiere n por ejemplo a archivos de texto, inform es, fotografas. Por medio de este protocolo el administrador de un Sitio Web sube los contenidos. Los Grupos de Noticias son el servicio ms apropiado para entablar debate sobre temas tcnicos. Se basa en el servicio de Correo Electrnico y funciona similar a un foro. El servicio IRC (Internet Relay Chat) nos permite comunicarnos por medio de texto, e n una conversacin en tiempo real con una o varia s personas. Los Servicios de Telefona nos perm iten establecer una comunicacin con voz entre dos personas conectadas a Internet a cualquier parte del mundo.
3

Introduccin a Diseo Web

1.2.2 Web 2 Web 2.0 se refiere a una segunda generacin de Web basada en comunidades de usuarios que colaboran en el intercambio gil de informacin, como por ejemplo las redes sociales, blogs y wikis. Los sitios Web 2.0 actan como puntos de encuentro, en donde los mensajes quedan grabados en una base de datos que puede ser modificada por cualquier usuario, puede aadirle, cambiar o borrar la informacin presentada.

1.2.3 World Wide Web World Wide Web llamada tambin la "Web", es un sistema de documentos de hipertexto enlazados y accesibles a travs de Internet, como se dijo anteriormente, pueden contener texto, imgenes, vdeos u otros contenidos multimedia, por medio de los cuales el usuario navega a travs de ellas usando hiperenlaces.

- Funcionamiento de la Web Para la visualizacin de una pgina web no rmalmente se comienza tecleando la direc cin URL de la pgina en el nave gador, o bien siguiendo un enla ce de hipertexto. De esta manera el navegador despliega la informacin requerida y comienza una s erie de procesos para obtener datos, procesos que el usuario no ve. Paso uno: consiste en decodificar el nombre de la URL a una direccin IP usando la base de datos DNS. Con la direccin IP se localiza el servidor web en donde est la informacin. Paso dos: Es enviar una pet icin HTTP al servidor Web solicitando la informacin. En el caso de una pgina web tpica, la informacin es solicitada en el siguiente orden: texto HTML, grficos y otros ficheros. Paso tres: Despus de recibir del se rvidor la informacin solicitada, el navegador despliega la p gina tal y como lo describe el cdigo HTML, el CSS y otros lenguajes web.

Introduccin a Diseo Web

1.2.4 TCP/IP Existen varios protocolos de Internet que permiten la transmisin de datos entre redes de c omputadoras. El TCP (Protocolo de Control de Transmisin) y el IP (Protocolo de Internet), son los ms utilizados. El intercambio de datos no puede cr uzarse y t ener errores ya que todo est marcado por nmeros IP determinados, adems se realizan comprobaciones en cada bloque para que la informacin llegue completa. Existen ms de 100 protoc olos diferentes, entre ellos se encuentra el popular HTTP (HyperText Transfer Protocol), para acceder a las pginas web, el FTP (File Transfer Protocol) para transferencia de archivos, y el SMTP (Simple Mail Transfer Protocol) y el POP (Post Office Protocol) para correo electrnico.

1.2.5 Direcciones IP Las direcciones IP es la identificacin que se asigna a todo dispositivo conectado a Internet por ejemplo 45.332.232.976 ste acta como un nmero t elfono nico. Cuando es necesari o, por medio del DNS se ste nmero se convierte en palabras como www.infop.org.gt para que sea fcil de recordar. La direccin IP es la base de todas las mquinas y software sobre el que funciona Internet Al conectarse una computadora a I nternet est identificada por su direccin IP pues es la base del funci onamiento del Internet. Para los usuarios domsticos la IP es din mica no es fija, por lo que cada vez que se conecten a Internet ser distinta.

Introduccin a Diseo Web

1.2.6 Hosting El alojamiento we b (web hosting) es el servicio que provee a los usuarios de Internet un es pacio para poder almacenar informacin accesible va Web. Las com paas que proporcionan el espacio d e un servidor se les llaman We b Host. Por lo general el alojamiento se distingue entre gratuito y pagado, veamos los tipos que hay: Tipos de Alojamiento Web El alojamiento web se divide en seis tipos: gratuito s, compartidos, revendedores, servidores virtuales, servidores dedicados y de colocacin. a. Alojamiento gratuito: Estos servicios generalmente agregan publicidad en los sitios y tienen un espacio y trfico limitado. b. Alojamiento compartido (shared hosting) : En este tipo de servicio se alojan clientes de va rios sitios en un mismo servidor, gracias a la configuracin del pr ograma servidor web. Resulta una alternativa muy buena par a pequeos y medianos clientes, es un servicio econmico y tiene buen rendimiento. c. Alojamiento de imgenes: Este tipo de hospedaje se ofrece para guardar imgenes en internet, la mayora d e estos servicios son gratuitos y las pginas se valen de la publicidad coloca das en su pgina al subir la imagen. d. Alojamiento revendedor (reseller): Este servicio de alojamiento est diseado para grande s usuarios o personas que venden el servicio de Hosting a otras person as. Estos pa quetes cuentan c on gran cantidad de espacio y de dominios disponibles para cada cuenta. e. Servidores virtuales (VPS, Virtual Private Server) : mediante el uso de una mqui na virtual, la em presa ofrece el con trol de un ordenador aparentemente no compar tido. As se puede n administrar varios dominios de forma f cil y econmica, adems de elegir los programas que se ejecutan en el se rvidor. Por ello, e s el tipo de producto recomendado par a empresas de di seo y programacin web.

Introduccin a Diseo Web

f. Servidores dedicados: El t rmino servidor dedicado se refi ere a una forma avanzada de alojamiento we b en la cual el cliente alquila o compra un ordenador completo, y por tanto tiene el control completo y la responsabilidad de administrarlo. El cuidado fsico de la mquina y de la conectividad a Internet es tarea de la empresa de alojamiento, que suele tenerlo en un centro de datos. g. Colocacin (o housing): Este servicio consiste bsicamente en vender o alquilar un espacio fsico de un centro de datos para que el cliente coloque ah su propio ordenado r. La empresa le da la corri ente y la conexin a Internet, pero el ordenador servidor lo elige completamente el usuario (hasta el hardware)2. 1.2.7 Servidor Web Un servidor web es un programa que i mplementa el protocolo http. Este protocolo est diseado para tr ansferir pginas web no hay que confundirlo con un espacio fsico como los conceptos anteriores. Aplicaciones en el lado del cliente: el cliente web es el encargado de ejecutarlas en la mquina de l usuario. Son las aplicaciones tipo Java o Javascript: el servidor proporciona el cdigo de las aplicaciones al cliente y ste, mediante el navegador, las ej ecuta. Es necesario, por tanto, que el cliente disponga de un navegador con capacidad para ejecutar aplicaciones (tambin llamadas scripts). Aplicaciones en el lado del servi dor: el s ervidor web ejecuta la aplicacin; sta, una vez ejecutada, genera cierto cdigo HTML; el servidor toma este cdigo recin cre ado y lo enva al c liente por medio del protocolo HTTP. Al ejecutarse sta en el servidor y no en la mquina del cliente, ste no necesita ninguna capacidad adicional, como s ocurre en el caso de querer ejecutar aplicaciones javascript o java. As pues, cualquier cliente dotado de un navegador web bsico puede uti lizar este tipo de aplicaciones3. 1.2.8 DNS Los DNS (Domain Name Servers) son servidores que cuentan con la base de datos de identificacin de la direccin IP de las computadoras que se conectan a Internet y las decodifican a un nombre.

2 http://espanol.answers.yahoo.com/question 3 http://es.wikipedia.org/wiki/Servidor_web

Introduccin a Diseo Web

Un nombre de dominio se obtiene fci lmente un proveedor de Inter net. El proveedor del DNS verifica si el nombre que se desea no le pertenece a nadie con anterioridad y con el pa go de una cuot a se registra el nombre de dominio y nadie podr utilizar el mismo nombre registrado. - Las partes de un DNS El DNS est formado por dos etiquetas, separadas por puntos cuando se las escribe en f orma de texto en el navegador. Por ejemplo , www.ricardoarjona.com. La etiqueta ubicada a la derecha es el dominio de nivel superior (Top Level Domain), en nuestro ejemplo sera el .com. sta etiqueta nos puede decir a que pas perte nece la pgina o de que categora es, por ejemplo el .gt pertenece a Guatemala, el .it a Italia, .com a entidades comerciales, .edu a educacin, etc. Cada etiqueta a la izquierda especifica una subdivisin o subdominio lo cual expresa una dependencia relativa. El nombre del dominio no puede exced er 255 caracteres, pero normalmente son ms cortos.

1.2.9 URL El URL (Uniform Resource Locator / localizador uniforme de recurso) es una secuencia de caracteres que se utiliza para localizar documentos en Internet, osea es l a direccin comp leta que pe rmite que el navegador encuentre los documentos y los muestre en la pantalla. El URL est formado por el protocolo a usar, l uego por el nombre del ordenador que pr oporciona la inform acin, el directorio donde se encuentra y el nombre del fichero. Por ejemplo, ftp://www.cajita.com/sorpresa.exe especifica un fichero ejecutable que se debe encont rar usando el protocolo FTP; http://www.cajita.com/index.html especifica u na pgina web que se debe abrir usando el protocolo HTTP.

Introduccin a Diseo Web

1.2.10 HTML HTML (HyperText Markup Language / Lenguaje de Marcas Hipertextuales) es el formato estndar de las pgi nas web, es un lenguaje de marcacin que estructura textos y los presenta en forma de hipertexto, en cualquier navegador de Internet como Internet Exp lorer, Opera, Firefox, Netscape y Safari. El lenguaje HTML se puede e ditar o crear con cualquier editor de t extos bsico, adems est el prog rama Dreamweaver que es el ms utilizado en el mundo para especficamente la realizacin de sitios Web. Dreamweaver pertenece a los programas que se les conoce como editores WYSIWYG (What You See Is What Yo u Get / lo que ves es lo que obtienes). Estos editores muestran el resultado de lo que se est editando en tiempo real a medi da que se va desarrollando el documento. El lenguaje HTML est formado por etiquetas q ue son instrucciones de comienzo a final, p or medio de sta s etiquetas el navegador sabr qu texto, imgenes y otros elementos mostrar en la pantalla. Las etiquetas se identifican porque est encerradas entre los signos menor que y mayor que (<>). Cdigo fuente Para ver el leng uaje HTML d e una pgina de I nternet, en el navegador Internet Explorer o en Firef ox, hay que desplegar el me n Ver y luego elegir la opcin Cdigo fuente y se abrir el editor de texto configurado como predeterminado en el sistema con el cdigo fuente de la pgina que se est viendo en ese momento. Otra forma ms rpida consiste en hacer clic con el botn derecho del Mouse sobre la pgina web y elegir Ver cdigo fuente (View Source).

Introduccin a Diseo Web

- XHTML El XHTML, (Extensible Hypertext Markup Language / lengua je extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estndar para las pginas web. XHTML es la versin XML de HTML, por lo que tiene, bsicamente, las mismas funcionalidades, pero cumple las especificaciones, ms estrictas, de XM L. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semntica, donde la informacin, y la forma de presentarla estn clarament e separadas. En este sentido, XHTML se rvira nicamente para transmitir la informacin que contiene un documento, dejando para hojas de estilo (como las hojas de estilo en cascada) y JavaScript su aspecto y diseo en distintos medios (computadoras, telfonos mviles, impresoras). La necesidad de una v ersin ms estricta de HTML se sinti principalmente porque el contenido de la World Wide Web ahora puede visualizarse desde numerosos disposit ivos (como mviles) aparte de los ordenadores tradicionales, donde no pueden dedicarse recursos suplementarios para afrontar la comp lejidad aadida de la sintaxis del HTML4. - DHTML Una pgina con HTML Dinmico es cu alquier pgina w eb en la que los scripts interactan con el us uario cambiando apariencia y funci ones de los objetos de la pgina. En una p gina cargada con DHTML, se ejecuta un cdigo que tiene efectos en los valores del lenguaje de definicin de la presentacin por ejemplo CSS, de esta manera el usuario ve un aspecto visual modificado en la informacin que se despliega en pantalla.

4 http://www.tourism4allnetwork.org/accesibilidad.php

10

Introduccin a Diseo Web

- XML El XML (Extensible Markup Language) es un metalenguaje extensible de etiquetas desarrollado por el Consorcio World Wide Web (W3C). El XML es una manera de definir lenguajes para diferentes necesidades como, permitir la compatibilidad entre sistemas para compartir la informacin de una manera fcil y segura. El XML no es un lenguaje en particul ar, si no es una tecnologa sencilla que tiene se une con otras que la complementan para crear posibilidades mayores. 1.2.11 CSS Las hojas de estilo en cascad a (Cascading Style Sheets) se utilizan para definir la presentacin de un docume nto estructurado escrito en HTML o XHTML. El objetivo de las CSS es separar la estructura de un documento de su presentacin, para que se puedan ser aplicadas con facilidad a varias pginas de un mis mo Sitio Web. La informacin de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. Ventajas de utilizar CSS Control centralizado de la presentacin de un Sitio web. Fcil actualizacin del mismo. Permite que los usuarios personalicen su hoja de estilo local, pueden configurar el tamao de letra. Un Sitio Web puede tener diferentes hojas de estilo a eleccin del usuario.

11

Introduccin a Diseo Web

1.2.12 RSS Es un formato de datos que se utiliz a para distribuir contenidos a suscriptores de un Sitio web. Las ltimas versiones de los principales navegadores permiten leer los RSS si n necesidad de software adicional, los alimentadores RSS pertenecen a la familia de los formatos XML por medio de los cuales se puede comp artir informacin d e una pgina a otra, a esto se le conoce como redifusin de la web. ste es e l icono c onvertido en estndar, que seala la presencia de feeds RSS. Por medio de los lectores de feeds se obt iene un resumen de todos los sitios que se desee, para que no sea necesario visi tar decenas de webs. Estos lectores pueden ser aplicaciones web, programas de correo electrnico o por del sistema operativo.

1.2.13 CMS Un Sistema de g estin de contenid os (Content Ma nagement System) permite la administracin y cre acin de contenidos por parte de los participantes, controla la base de datos donde se aloja el contenido del sitio web. Existen versiones gratuitas y propi etarias de CMS. El Administrador maneja de manera independiente el contenido y el diseo . Permite la publicacin a varios editores de forma fcil y controlada, creando diferentes niveles de usuarios. En muchos sitios con CMS una sola persona hace el papel de creador y editor.

12

Introduccin a Diseo Web

a. Tipos de CMS Hay diferentes CMS que los podemos agrupar segn el tipo de sitio que permiten gestionar. Como soluciones de comercio electrnico, blogs, portales, galeras, tambin estn los foros que permiten la discusin y opinin en lnea de los usuarios. Hay CMS tipo Wikis que consiste en que los usuarios externos puede n colaborar aportando informacin a los artculos. Tambin hay publicaciones digitales como peridicos, revistas, etc. Existen portales con CMS stos son sitios web con contenido y funcionalidad diversa que sirven como fuente de informacin a una comunidad. Principalmente estn dirigidos a resolver n ecesidades especficas de un grupo de personas o de acceso a la informacin y servicios de una institucin pblica o privada. b. LCMS Un LCMS (Learning Content Management System) se utiliza para crear y manejar el contenido de un progra ma de e ducacin normalmente en forma de mdulos. El LCMS puede se r integrado en un sistema LMS, o los dos pueden ser conectados por una interfaz. c. LMS El LMS (Learning Management System ) es un Sistema de Gestin de Aprendizaje que sirve para administ rar, distribuir y controlar las actividades de formacin presencial o e-Learning de una entida d educativa. Las funciones del LMS es crear usua rios, recursos y actividades de formacin, como foros de discusin y videoconferen cias. Tambin controlar y hace r seguimiento del proceso de a prendizaje, como evaluaciones e informes.

13

Introduccin a Diseo Web

1.2.14 e-Learning El e-Learning fomenta el uso de las TICs (Tecnologas de Informacin y Comunicacin), facilitando la creacin y di stribucin de contenidos, permite que los alumnos se adapte n a su ritmo de aprendizaje y disponibilidad de horario, sin lmites geogrficos. El e-Learning presenta las herramientas de aprendizaje permitiendo intercambiar opiniones de manera sincrnica o asncrona entre alumno s o entre alumnos y tutores de los cursos. La Plataforma de aprendiza je que se utiliza para el desarrollo de las actividades formativas es el LMS mencionado anteriormente. Cuando el e-learning es mezclado con clases y actividades pedaggicas presenciales se le llama b-learning o blended learning.

1.2.15 e-Commerce El Comercio electrnico, consiste en comprar y vender productos o servicios a travs del Internet y otras redes computacionales. Gracias a este sistema muchas empresas han optado por las in novaciones en transferencias financieras, gestin de cadenas de suministros, transacciones en lnea, intercambio el ectrnico de datos (EDI), sistemas de gestin de inventarios y otros. El e-Commerce es generalmente considerado como el aspecto de ventas de los e-Business o negocios electrnicos.

14

Introduccin a Diseo Web

1.2.16 e-Marketing La Mercadotecnia en Internet es el estudio de las tcnicas del uso de Internet para publicitar y vender productos y servicios. La Mercadotecnia en Internet incluye la publicidad por clic, los avisos en pginas we b, los envos de corre o masivos, el marketing en buscadores y la mercadotecnia de bitcoras (blogs). La Mercadotecnia en Internet es un componente del Comercio Electrnico. Puede incluir la gest in de contenidos, las relaciones pblicas, el servicio al cliente y las ventas. El e-Marketing est asociado con diversos modelos de negocio. Los principales incluyen el modelo Em presa a Empresa (B2B) y el modelo Empresa a Consumidor (B2C). El B2B ( por sus siglas en ingls Business to Business) consi ste en compaas que hacen ne gocio unas con otras, mientras que el B2C consiste en vender directamente al co nsumidor final. Un tercer y no tan comn modelo de negocio es el de usuario a usuario (P2P) donde los individuos intercambian bienes entre ellos. Un ejemplo de P2P es Bittorrent, que est construido sobre una plataforma de usuarios que comparten archivos o ficheros5.

5 http://es.wikipedia.org/wiki/Marketing_en_Internet

15

Introduccin a Diseo Web

ACTIVIDADES
Haciendo uso de las herramientas de comunicaci n plataforma, responde los mensajes enviados por tutora. de la

Sube tu fotografa personal, en el perfil del participante, guindote por el Instructivo para el manejo de la plataforma. Coloca en el Foro Glosario, la definicin de un trmino mencionado en la unidad, que no entiendas o que quieras aportar su concept o para uso de todos. Enviar a tutora un ejemplo de im presin de pantalla pegada en Word o PowerPoint de las siguientes bsquedas en Internet: - Identificar una pgina que ofrezca Web Host gratuito. - Pgina que contenga alimentador RSS con su cono respectivo. - Pgina con Blogs (excepto Blogger).

16