Diseño Web 01

Curso de Curso de Webmaster IWebmaster I

Diseño Web Básico Diseño Web Básico

Introducción al Introducción al Diseño para la Diseño para la World Wide WebWorld Wide Web

Conceptos Básicos: Conceptos Básicos: InternetInternet

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.

Conceptos Básicos: Conceptos Básicos: Correo electrónicoCorreo 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.

Conceptos Básicos: Conceptos Básicos: FTPFTP

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.

Conceptos Básicos: Conceptos Básicos: World Wide WebWorld 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.

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: Conceptos Básicos: World Wide WebWorld Wide Web

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-servidormodelo 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: Conceptos Básicos: Características de la WebCaracterísticas de la Web

Arquitectura del Web:Arquitectura del Web:Modelo Cliente - ServidorModelo Cliente - Servidor

El Cliente WebEl 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.


El Cliente WebEl 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.

El Servidor WebEl Servidor WebEs 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.


Conceptos Básicos: Conceptos Básicos: Transferencia de Paginas webTransferencia de Paginas web

1. El usuario especifica en el cliente web la dirección de la pagina.

2. El cliente establece una conexión con el servidor web3. El cliente solicita la pagina o el objeto deseado.4. 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.

5. Se cierra la conexión


Cliente Web

Usuario

Petición Pagina

Pagina solicitadao código error Servidor Web

Docs, HTMLDocs, HTMLImágenesImágenes

Sonido, videoSonido, video


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.

Conceptos Básicos: Conceptos Básicos: Protocolos de comunicaciónProtocolos 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

Conceptos Básicos: Conceptos Básicos: ProtocolosProtocolos

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

Conceptos Básicos: Conceptos Básicos: Hyper Text Transfer ProtocolHyper 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.

Conceptos Básicos: Conceptos Básicos: Las URL’sLas 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).


La estructura de una URL puede ser de la siguiente forma:

Protocolo ://Dirección

del Servidor

Situación del

Recurso


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.


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

Tratamiento de Tratamiento de Imágenes DigitalesImágenes Digitales

Diseño y Desarrollo Diseño y Desarrollo de Portales y Web de Portales y Web

SitesSites

Imagen Digital:Imagen Digital:¿Que es Digitalizar?¿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.

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: Imagen Digital: Tipos de Imágenes DigitalesTipos de Imágenes Digitales

(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: Imagen Digital:

Pixel (Pixture Element)Pixel (Pixture Element)

Imagen Digital:Imagen Digital:Graficos VectorialesGraficos 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.

Imagen Digital:Imagen Digital:Imágenes de mapa de bitsImá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.

Imagen Digital:Imagen Digital:Imágenes de mapa de bitsImá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

Imagen Digital:Imagen Digital:Imágenes VectorialImágenes Vectorial

El principal inconveniente de las imágenes vectoriales es su falta de eficacia para representar imágenes de tipo fotográfico

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: Conceptos Básicos: Profundidad de BitsProfundidad de Bits

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.


Profundidad de 1 bit - 2 colores

Profundidad de 2 bits - 4 colores




Profundidad de 24 bits - 16.777.216 colores

Profundidad de 32 bits - 4.294.967.296 colores


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: Conceptos Básicos: ResoluciónResolución

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: Conceptos Básicos: Formatos de ImagenFormatos de Imagen

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: Conceptos Básicos: Formato JPEGFormato JPEG

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: Conceptos Básicos: Formato GIFFormato GIF

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: Conceptos Básicos: Código RGBCódigo RGB

Código RGB: Código RGB: Sistemas Hexadecimal y DecimalSistemas Hexadecimal y Decimal

El modelo RGB utiliza dos sistemas para representar los colores:

Sistema decimal: 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

Código RGB: Código RGB: Sistemas Hexadecimal y DecimalSistemas 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)

Código RGB: Código RGB: Sistema DecimalSistema 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

Código RGB: Código RGB: Sistema HexadecimalSistema 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.

Código RGB: Código RGB: Sistema HexadecimalSistema Hexadecimal

Cada color se expresa:

##XXXXYYYYZZZZ

Donde:

XX: representa el color Rojo

YY: representa el color Verde

ZZ: representa el color Azul Ejemplo: #00FF55

Código RGB:Código RGB:Consideraciones FinalesConsideraciones 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

Imagen Digital:Imagen Digital:Optimización de la InformaciónOptimizació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

Imagen Digital:Imagen Digital:Optimización de la InformaciónOptimizació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

Ilustración Digital:Ilustración Digital:Optimización de fotografías digitalesOptimizació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

Ilustración Digital:Ilustración Digital:Optimización de archivos GIF estaticosOptimizació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

Animaciones:Animaciones:Optimización 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)

Technology

Diseño Web 01