diseño web 01
TRANSCRIPT
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.
Arquitectura del Web:Arquitectura del Web:Modelo Cliente - ServidorModelo Cliente - Servidor
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.
Arquitectura del Web:Arquitectura del Web:Modelo Cliente - ServidorModelo Cliente - Servidor
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
Conceptos Básicos: Conceptos Básicos: Transferencia de Paginas webTransferencia de Paginas web
Cliente Web
Usuario
Petición Pagina
Pagina solicitadao código error Servidor Web
Docs, HTMLDocs, HTMLImágenesImágenes
Sonido, videoSonido, video
Conceptos Básicos: Conceptos Básicos: Transferencia de Paginas webTransferencia 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.
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).
Conceptos Básicos: Conceptos Básicos: Las URL’sLas URL’s
La estructura de una URL puede ser de la siguiente forma:
Protocolo ://Dirección
del Servidor
Situación del
Recurso
Conceptos Básicos: Conceptos Básicos: Las URL’sLas 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.
Conceptos Básicos: Conceptos Básicos: Las URL’sLas 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
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.
Conceptos Básicos: Conceptos Básicos: Profundidad de BitsProfundidad de Bits
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: Conceptos Básicos: Profundidad de BitsProfundidad de Bits
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)