El documento proporciona una introducción a los conceptos básicos de diseño web, incluyendo definiciones de Internet, correo electrónico, FTP, la World Wide Web y sus características. Explica conceptos como cliente-servidor, transferencia de páginas web, protocolos de comunicación, URL, tipos de imágenes digitales como mapas de bits y vectoriales, y formatos como JPEG y GIF. También cubre temas como profundidad de bits, resolución, el código RGB y la optimización de imágenes.

1. Curso de Webmaster I Diseño Web Básico Introducción al Diseño para la World Wide Web

2. Conceptos Básicos: Internet Internet es una red que enlaza centenares de miles de redes locales heterogéneas. El nexo común de todos los sistemas que integran la red Internet es el uso de los protocolos de comunicaciones TCP\IP. Estos protocolos son la base de la infraestructura que permite el intercambio de la información (documentos, datos, etc...)de forma virtualmente independiente de los sistemas en que esta se encuentra almacenada.

3. Conceptos Básicos: Correo electrónico Es uno de los servicios de mayor uso en Internet En la actualidad la gran mayoría de usuarios de la Web poseen una cuenta de webmail en servidores como hotmail o yahoo.

4. Conceptos Básicos: FTP El FTP (File Transfer Protocol) nos permite enviar ficheros de datos por Internet. Este servicio permite almacenar grandes cantidades de información en espacios virtuales diseñados específicamente para tal fin. Todos los servicios de hospedaje Web ofrecen la posibilidad de enviar los archivos que conforman los sitios Web por medio de este protocolo.

5. Conceptos Básicos: World Wide Web La World Wide Web, o WWW como se suele abreviar, se inventó a finales de los 80 en el CERN, el Laboratorio de Física de Partículas más importante del Mundo. Se trata de un sistema de distribución de información tipo revista. En la Red quedan almacenadas lo que se llaman Páginas Web, que no son más que páginas de texto con gráficos o fotos.

6. El concepto inicial de paginas hipertexto, se ha convertido en la actualidad en un completo sistema hipermedia, en el que se puede acceder a imágenes, sonidos, videos, etc... Lo cual ha aumentado notablemente el atractivo de la web. Conceptos Básicos: World Wide Web

7. El proyecto Web ha basado su éxito en un diseño muy acertado de todos sus componentes, que, a partir de su relativa simplicidad, permite la construcción de sofisticados sistemas de información. Esta basado en un modelo cliente-servidor estricto, en el que los intercambios de información entre clientes y servidores se realizan a través de sencillas peticiones. Conceptos Básicos: Características de la Web

8. Arquitectura del Web: Modelo Cliente - Servidor El Cliente Web El cliente Web es un programa con el que interactúa el usuario para solicitar a un servidor web el envió de las paginas de información. Este programa se encarga de acceder al servidor y transferir las paginas siguiendo el protocolo HTTP. Las paginas que se reciben son documentos codificados en lenguaje HTML.

9. Arquitectura del Web: Modelo Cliente - Servidor El Cliente Web Los clientes acceden a un documento a través de su URL (Universal Resource Locator), que permite asignar una dirección a casi cualquier recurso disponible en Internet. Las URLs son muy similares a los paths de acceso a un documento en la estructura de directorios de un ordenador, salvo que contienen, además, la dirección Internet del ordenador que proporciona el documento.

10. El Servidor Web Es un programa que esta “escuchando” permanentemente las solicitudes de conexión mediante el protocolo HTTP. Si se encuentra en su sistema de archivos el documento HTML solicitado por el cliente, lo envía y cierra la conexión. En caso contrario, se envía un código de error y libera la conexión. El servidor se encarga también de controlar los aspectos de seguridad, comprobando si el usuario tiene acceso a los documentos. Arquitectura del Web: Modelo Cliente - Servidor

11. Conceptos Básicos: Transferencia de Paginas web El usuario especifica en el cliente web la dirección de la pagina. El cliente establece una conexión con el servidor web El cliente solicita la pagina o el objeto deseado. El servidor envía dicha pagina u objeto ( si no existe, devuelve un código de error) y el cliente inicia sus labores de interpretación del código HTML. Se cierra la conexión

12. Conceptos Básicos: Transferencia de Paginas web Cliente Web Usuario Petición Pagina Pagina solicitada o código error Servidor Web Docs, HTML Imágenes Sonido, video

13. Conceptos Básicos: Transferencia de Paginas web Un detalle importante es que para cada objeto que se transfiere por la red se realiza una conexión independiente. Por ejemplo, si el cliente Web solicita una pagina que contiene dos imágenes integradas, se realizan tres conexiones: una para el documento HTML y dos para los archivos gráficos.

14. Conceptos Básicos: Protocolos de comunicación Los protocolos se pueden definir como una serie de reglas estándares definidas para la comunicación y transferencia de información en una red, no importando el tipo de plataforma de los elementos interconectados

15. Conceptos Básicos: Protocolos Los Protocolos más utilizados son: http el más común, característico del WWW. ftp para acceder a servidores ftp - telnet para iniciar una conexión a través de telnet.

16. Conceptos Básicos: Hyper Text Transfer Protocol El protocolo HTTP es un protocolo de transmisión sin estado. Quiere esto decir que cada conexión se realiza siempre de forma independiente de las demás. No se conserva por tanto información del estado correspondiente a conexiones anteriores.

17. Conceptos Básicos: Las URL’s Son las siglas de Universal Resource Locator , una dirección universal de recursos en el universo de información disponible en Internet. Cualquier información a la que un cliente Web accede es conocida por su URL. Las URLs definen, a través de un sencillo formato, la ubicación en la red de la información deseada. Por lo general, esta dirección incluye el protocolo de aplicación a emplear para recogerla, el nombre Internet del ordenador que lo proporciona, y por último, la situación dentro de ese ordenador (directorio y nombre de fichero).

18. Conceptos Básicos: Las URL’s La estructura de una URL puede ser de la siguiente forma: Situación del Recurso Dirección del Servidor :// Protocolo

19. Conceptos Básicos: Las URL’s Dirección del servidor: dirección IP o nombre DNS del servidor. Es el ordenador con cuyo servicio (http, ftp, gopher,...) se establece la comunicación. Situación: permite añadir información opcional, característica del protocolo, que se corresponde a la dirección del objeto requerido dentro de la estructura de información del propio servidor que lo ofrece.

20. Conceptos Básicos: Las URL’s EJEMPLOS: http://www.unican.es/ http://www.unican.es # Equivalente a la anterior http://ccpc5.unican.es/equipos/ http://ccpc5.unican.es/equipos/default.html http://www.uni.es/cgi-bin/apunta.exe?luis+romero http://midget.towson.edu:8000/home.html ftp://ftp.rediris.es/software/ ftp://ftp.unican.es/indice.txt

21. Tratamiento de Imágenes Digitales Diseño y Desarrollo de Portales y Web Sites

22. Imagen Digital: ¿Que es Digitalizar? Digitalizar es hacer que la información contenida en una imagen pase a ser de carácter numérico; es decir, a expresarse en dígitos. Con ello obtenemos una cuantificación perfecta de un valor y, en el color, de cualquier matiz.

23. Puesto que la información digital es discontinua, toda imagen de este tipo ha de estar dividida en unidades claramente identificables, que contengan cada una su parcela de información. A este respecto, existen dos tipos de imágenes digitales. Las creadas mediante píxeles o porciones gráficas de la imagen Las creadas mediante elementos definidos matemáticamente (Vectores) Imagen Digital: Tipos de Imágenes Digitales

24. (Pixture element). Contracción abreviada del término inglés. Se define como la superficie homogénea más pequeña y equivale al significado de un punto. Pixel se utiliza habitualmente para definir las características de la alta resolución en pantalla. Así, en el trc (tubo de rayos catódicos) de una computadora, cuadriculado por bits, los pixeles son los puntitos diminutos que componen la imagen. En un trc cuadriculado por caracteres, cada letra o símbolo ocupa un píxel Imagen Digital: Pixel (Pixture Element)

25. Imagen Digital: Graficos Vectoriales Las imágenes del tipo vectorial se representan con trazos geométricos, controlados por cálculos y fórmulas matemáticas , que toman algunos puntos de la imagen como referencia para construir el resto.

26. Imagen Digital: Imágenes de mapa de bits Una imagen bitmap o mapa de bits, esta compuesta por pequeños puntos o pixeles con unos valores de color y luminancia propios. El conjunto de esos pixeles componen la imagen total.

27. Imagen Digital: Imágenes de mapa de bits Cuando variamos el tamaño de las imágenes bitmap , tenemos que tener en cuenta sus resoluciones , a fin de evitar pérdidas de información y, en definitiva, empeorar la calidad de la imagen

28. Imagen Digital: Imágenes Vectorial El principal inconveniente de las imágenes vectoriales es su falta de eficacia para representar imágenes de tipo fotográfico

29. Cada píxel o porción gráfica de una imagen debe ser considerado desde dos puntos de vista: Es una fragmento de la imagen digital en mapa de bits. Es una parte de la información que contiene la imagen. Como fragmento de la imagen, se identifica cuando la imagen se amplia, ya que tiene la forma de un cuadrado de color homogéneo. Como parte de la información, puede contener mayor o menor cantidad de bits. A esta cantidad, que es igual para todos los píxeles de una imagen, se la denomina profundidad de bits . Conceptos Básicos: Profundidad de Bits

30. Si la profundidad es de 1 bit, sólo existe la posibilidad de tener 2 colores. (1 / 0) Si la profundidad es de 2 bits, es posible tener 4 colores (00 / 01 / 10 / 11) Si la profundidad es de 3 bits, es posible tener 8 colores, etc Como cada bit puede ser sólo 0 / 1, la fórmula matemática para hallar el número de colores posible es la de elevar 2 a la potencia del número de bits que tengamos. Conceptos Básicos: Profundidad de Bits

31. Profundidad de 1 bit - 2 colores Profundidad de 2 bits - 4 colores Profundidad de 3 bits - 8 colores Profundidad de 4 bits - 16 colores Profundidad de 8 bits - 256 colores Profundidad de 24 bits - 16.777.216 colores Profundidad de 32 bits - 4.294.967.296 colores Conceptos Básicos: Profundidad de Bits

32. El concepto de resolución está relacionado con el detalle que una imagen puede tener al ser impresa o visualizada por otros medios. Se mide de la siguiente manera: En imágenes de bits , es el número de píxeles que hay por unidad lineal, cm o pulgada. En imágenes vectoriales , la resolución de la imagen depende del periférico que se use para imprimirla o verla. Conceptos Básicos: Resolución

33. Una imagen digital es una imagen que ha pasado por un proceso de conversión, para que pueda ser almacenada en forma de bits en un computador. La unidad mínima de una imagen digital es un píxel. La resolución de pantalla mide el número de píxeles a lo ancho y alto de la pantalla. Mientras más píxeles, mejor calidad. La resolución de colores describe el número de colores que pueden ser simultáneamente vistos en la pantalla al mismo tiempo. Un mayor número de colores produce imágenes que se ven más reales, pero al mismo tiempo aumente el espacio que ocupa la imagen en el disco Conceptos Básicos: Formatos de Imagen

34. Este es un formato estandarizado que permite compresión de imágenes. JPEG se diseño con el fin de poder comprimir imágenes a todo color o en escalas de grises que representaran fotografías o imágenes del mundo real. Las imágenes JPEG (de extensión JPEG o JPG) son más pequeñas que los GIF y por lo tanto mejores para su uso en el Web. Sin embargo, cuando se trata de imágenes simples o de pocos colores, con el formato GIF se consigue un resultado que mantendrá los colores "puros" del original de manera más acertada Conceptos Básicos: Formato JPEG

35. GIF (Graphic Interchange Format) El formato GIF fue desarrollado por CompuServe para proveer de un formato estándar que fuera independiente del tipo de máquina que se usara. El formato GIF está limitado a un máximo de 256 colores lo que es bastante razonable. En general se recomiendan para las imágenes simples. Pueden tener fondo transparente Los archivos GIF pueden ser estáticos o animados. Conceptos Básicos: Formato GIF

36. Siglas de red, green, y blue, (rojo, verde y azul). RGB es un modelo de color utilizado normalmente para presentar color en los sistemas de video, cámaras, y monitores de ordenadores. Representa todos los colores como combinaciones de rojo, verde y azul claro. Es el modelo más utilizado para visualizar y trabajar con imágenes digitales en una pantalla. Conceptos Básicos: Código RGB

37. Código RGB: Sistemas Hexadecimal y Decimal El modelo RGB utiliza dos sistemas para representar los colores: Sistema decimal: Tres canales (rojo, verde y azul) representados por valores decimales que oscilan entre 0 y 255 Sistema hexadecimal: Conformado por dieciséis (16) valores 0 1 2 3 4 5 6 7 8 9 A B C D E F

38. Código RGB: Sistemas Hexadecimal y Decimal La mayoría de las paletas de color utilizadas en los programas de diseño grafico web utilizan de forma predeterminada el sistema hexadecimal para el trabajo con los colores Aunque también se puede usar el sistema decimal para expresar un color con exactitud La paleta de colores de Windows utiliza el sistema decimal para expresar los colores (ver Paint)

39. Código RGB: Sistema Decimal Cada color básico (rojo, verde o azul) esta representado por un valor que oscila entre 0 y 255 (256 tonos posibles) Rojo: 0-255 R= 55 Verde: 0-255 V= 205 Azul: 0-255 A= 150

40. Código RGB: Sistema Hexadecimal En este sistema el color se representa por medio de una combinación de 6 caracteres alfanuméricos. Cada par de caracteres, representa un color básico (R, V y A) en una escala de tonos que se expresa en un numero hexadecimal. Existen 256 tonos posibles para cada color.

41. Código RGB: Sistema Hexadecimal Cada color se expresa: # XX YY ZZ Donde: XX: representa el color Rojo YY: representa el color Verde ZZ: representa el color Azul Ejemplo: #00FF55

42. Código RGB: Consideraciones Finales Cada color básico (Rojo, verde o azul) tiene una profundidad de color de 8 bits que representan 256 colores. La profundidad de bits del modelo RGB es de 24 bits, lo que representa alrededor de 16 millones de colores. La fotografía digital utiliza el modelo RGB

43. Imagen Digital: Optimización de la Información Un concepto de vital importancia que debe tomarse en cuenta en todo momento en el diseño Web, es la optimización de los contenidos. La optimización se puede entender como la disminución al máximo del tamaño que ocupan en disco los archivos multimediales (entiéndase mapas de bits, audio y video) evitando en lo posible la perdida de calidad

44. Imagen Digital: Optimización de la Información Recuerde que uno de los principales objetivos que se busca al desarrollar un sitio para la web, es que las paginas y sus contenidos se puedan descargar en el menor tiempo posible, garantizando al usuario que utiliza conexiones de baja velocidad (dial-up) una correcta y eficiente visualización de la información hipermedial presentada

45. Ilustración Digital: Optimización de fotografías digitales El formato de mayor uso en la fotografía digital es el JPEG (Joint Photographic Experts Group) Este formato posee un algoritmo de compresión con perdida, que disminuye el tamaño del archivo y como consecuencia la calidad de la imagen. Macromedia Fireworks permite la optimización de este formato, manipulando la profundidad de color del archivo y los valores del algoritmo de compresión

46. Ilustración Digital: Optimización de archivos GIF estaticos El formato GIF utiliza como máximo 256 colores, que garantiza archivos de poco tamaño de archivo pero de poco detalle en fotografías. EL tamaño final del archivo es proporcional a la cantidad de colores de la paleta y a la resolución de la imagen Comúnmente se utiliza una resolución de 72 pix/pulg en el diseño Web, lo cual garantiza imágenes de calidad aceptable con bajo tamaño de archivo

47. Animaciones: Optimización Los formatos de mayor uso en el diseño Web para la representación de animaciones son: AniGIF: Variación del GIF, son archivos cuyo tamaño final depende de la cantidad de cuadros de animación y la calidad/resolución de los mismos. SWF: son las animaciones por excelencia que se utilizan ampliamente en la actualidad. Poseen un algoritmo de compresión propio que garantiza pequeños tamaños. Debe equilibrarse el uso de recursos multimediales en el diseño de este tipo de animaciones. (sonido, video, fotografías, etc)