PROCEDIMIENTO PARA INSERTAR COLORES, IMÁGENES Y

VÍNCULOS EN EL DISEÑO DE LAS PAGINAS WEB

Hilda Gisela Umaña Carvajal.

Marzo 2018.

Institución Educativa Técnica Simón Bolívar.

Arauca.
Informática.
 Dedicatoria

Dedico este trabajo al profesor Jogni Nieves por habernos enseñado y

preparado para nuestro futuro.
 Contenido
Página Web __________________________________________________________________________ 5
GIF (formato de intercambio de gráficos): ________________________________________________ 6
JPEG (grupo conjunto de expertos fotográficos): ___________________________________________ 6
PNG (grupo de red portable): __________________________________________________________ 6
PAGINAS WEB ESTÁTICAS ___________________________________________________________ 7
Ventajas _____________________________________________________________________________ 7
PAGINAS WEB DINÁMICAS __________________________________________________________ 8
VENTAJAS __________________________________________________________________________ 8
DESVENTAJAS ______________________________________________________________________ 8
Nota importante _______________________________________________________________________ 9
El diseño web fijo _____________________________________________________________________ 9
El diseño web fluido o diseño web líquido __________________________________________________ 9
El diseño web elástico _________________________________________________________________ 10
Páginas más utilizadas _________________________________________________________________ 11
Lista de referencias ___________________________________________________________________ 13
 Lista de figuras

imagen 1: buscador más popular del mundo (Google) _______________________________________ 12

imagen 2 la red social más utilizada (Facebook) ____________________________________________ 12
imagen 3 la página web de entretenimiento (YouTube) ______________________________________ 13
Página Web

Una página web, o página electrónica, página digital, o ciber página es un documento

información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces,

imágenes y muchas otras cosas, adaptada para la llamada Word Wide Web (WWW) y que

puede ser accedida mediante un navegador web. Esta información se encuentra

generalmente en formato HTML o XHTML, y puede proporcionar acceso a otras páginas

web mediante enlaces de hipertexto. Frecuentemente también incluyen otros recursos como

pueden ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.

Las páginas web pueden estar almacenadas en un equipo local o en un web remoto. El

servidor web puede restringir el acceso únicamente a redes privadas, por ejemplo, en

una intranet corporativa, o puede publicar las páginas en la World Wide Web. El acceso a

las páginas web es realizado mediante una transferencia desde servidores, utilizando

el protocolo de transferencia de hipertexto (HTTP).

El diseño web es una actividad que consiste en la planificación, diseño, implementación y

mantenimiento de sitios web. No es simplemente la implementación del diseño convencional

ya que se abarcan diferentes aspectos como el diseño gráfico web, diseño de interfaz y

experiencia de usuario, como la navegabilidad, interactividad, usabilidad, arquitectura de la

información; interacción de medios, entre los que podemos

mencionar audio, texto, imagen, enlaces, video y la optimización de motores de búsqueda. A

menudo muchas personas trabajan en equipos que cubren los diferentes aspectos del

proceso de diseño, aunque existen algunos diseñadores independientes que trabajan solos

aprenda a insertar, editar, reemplazar y cambiar el tamaño de imágenes

Las imágenes forman parte integrante de un sitio web, proporcionando contexto

adicional a los visitantes del sitio. Aunque existe una amplia variedad de
formatos de archivos gráficos, los formatos GIF, JPEG y PNG son los

habitualmente utilizados en páginas web. Los formatos de archivo GIF y JPEG

son compatibles con las páginas web y pueden verse en la mayoría de los

navegadores. El texto siguiente proporciona más información sobre estos

formatos de archivo:

GIF (formato de intercambio de gráficos):

los archivos GIF utilizan un máximo de 256 colores y son los mejores para

visualizar imágenes de tonos discontinuos. Los archivos GIF son ideales para

visualizar grandes áreas de color homogéneo, como barras de navegación,

botones, iconos, logotipos u otras imágenes con colores y tonos uniformes.

JPEG (grupo conjunto de expertos fotográficos):

es el nombre de un comité de expertos que creó un estándar de compresión y

codificación de archivos de imágenes fijas. (w-ictea, 2018)A medida que

aumenta la calidad de un archivo JPEG, también lo hace su tamaño y su tiempo

de descarga. Comprimiendo un archivo JPEG puede conseguirse un equilibrio

adecuado entre la calidad de la imagen y el tamaño de archivo.

PNG (grupo de red portable):

el formato de archivo PNG es un sustituto sin patente del GIF, que admite

imágenes con color indexado, escala de grises y color verdadero, así como
compatibilidad con las transparencias, mediante canal alfa. Los archivos PNG

conservan la información de capa, vector, color y efectos, como las sombras

paralelas. Además, todos los elementos son siempre completamente editables.

Los archivos deben tener la extensión de nombre de archivo

PAGINAS WEB ESTÁTICAS

Los sitios Web estáticos son aquellos sitios enfocados principalmente a mostrar

una información permanente, donde el navegante se limita a obtener dicha

información, sin que pueda interactuar con la página Web visitada, las Web

estáticas están construidas principalmente con hipervínculos o enlaces (links)

entre las páginas Web que conforman el sitio, este tipo de Web son incapaces

de soportar aplicaciones Web como gestores de bases de datos, foros,

consultas on line, e-mails inteligentes… (web and macros, 2018)

Ventajas

. son económicas para crearlas

. su diseño es vistoso e incluyendo las imágenes y el texto con el cual queremos

informar a los navegantes

. se puede crear fácilmente sin necesidad de ningún tipo de programación

especial

. son sencillas, rápidas, cómodas.

Desventajas:
. la gran desventaja es que su actualización es muy dificultosa

. no se utilizan base de datos

. portabilidad, funcionan en cualquier servidor

. tipos de acceso optimo, tarda muy poco en cargarse

. mínimos requerimientos técnicos para su operación

. no se requiere ninguna instalación ni configuración de software

PAGINAS WEB DINÁMICAS

Una web dinámica es aquella que contiene aplicaciones dentro de la propia web, otorgando mayor

interactividad con el navegante. Ejemplos de aplicaciones dinámicas son encuestas y votaciones, foros de

soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención a la

cliente personalizada

VENTAJAS

. fácil actualización

. disponible variedad de plantillas y códigos adicionales para el sistema

. uso de base de datos para gestionar el contenido

DESVENTAJAS

. necesita de php mysql funcionando en el servidor

. tiempo, aunque mínimo, degeneración de la web

. dificultad de migración de servidor

. posibilidad de agujeros de seguridad que puedan comprometer nuestro sitio,

sobre todo si no estamos actualizados con últimas versiones.

Nota importante:

“Es importante no confundir multimedia e interactividad, con páginas dinámicas.

Una página web estática puede ser multimedia (contener varios tipos de medios

vídeo, sonido, imágenes...) e interactiva a través de enlaces e hipervínculos, sin

ser dinámica por ella”. (pagia web estatica y dinamica, 2016)

En las páginas dinámicas, el contenido suele generarse en el momento de

visualizarse, pudiendo variar por tanto este, mientras que en las estáticas el

contenido suele estar predeterminado.

Lo importante de esta clasificación entre dinámicas y estáticas, es que una página web estática la vamos a

poder almacenar fácilmente, mientras que una dinámica no será así.

En el diseño web existen fundamentalmente 4 tipos de diseños.

El diseño web fijo, o fixed web design en inglés, es, con diferencia, el más

utilizado de la Internet, y es aquel que permanece inalterable sea cual sea el

dispositivo donde se visualiza el sitio web. Es indiferente al tamaño de la pantalla

y a la anchura del navegador web que la visualiza. Sean cuales sean las

características del dispositivo, pantalla o navegador, siempre se visualiza el

mismo tamaño preestablecido por el diseñador web en píxeles.

El diseño web fluido o diseño web líquido, fluid web design o liquid web

design, es aquel que tiende a ocupar todo el ancho de la pantalla, sea cual sea
el tamaño de esta. Es un tipo de diseño menos utilizado que el anterior, ya que

requiere de mucho más trabajo por parte del diseñador web y a que si no se

realiza correctamente su resultado puede resultar bastante atractivo para

tamaños de pantalla “normales” y pequeñas, pero cuando se emplean pantallas

de muchas pulgadas su estética resulta, cuanto menos, horrible, a no ser que se

utilicen técnicas como el uso de max-width para limitar el máximo ancho

aceptado por nuestro diseño. En este caso el diseñador web utiliza porcentajes

en lugar de píxeles para establecer los anchos de sus diseños, aunque también

se pueden emplear píxeles y medidas máximas y mínimas con min-width y max-

width. Por suerte es un tipo diseño que cada vez va tomando más terreno y va

sustituyendo al diseño fijo.

El diseño web elástico, elastic web design, es un tipo de diseño muy parecido

al fluido, sólo que en este caso el contenido también crece junto al ancho del

diseño para rellenar la pantalla. Es, con diferencia, un tipo de diseño

prácticamente residual y muy poco usable. Volvemos a lo mismo que en el caso

del diseño fluido, el diseño elástico puede resultar más o menos agradable en

tamaños de pantalla más o menos pequeños, pero cuando se utilizan pantallas

muy grandes el contenido se vuelve exageradamente irracional, por lo que salvo

contadas excepciones, no tiene ningún tipo de razón de ser. En este caso el

diseñador web utiliza em para fijar los anchos de su diseño web y del resto del

contenido que alberga. Es un tipo de diseño del que debemos alejarnos lo más

posible.
Por último, tenemos el diseño web sensible, o responsive web design en

inglés, que es un tipo de diseño que se transforma en función del tipo de

dispositivo o del ancho del navegador web que lo visualiza. De esta forma se

muestra un diseño web en dispositivos smartphones, otro diferente en

dispositivos tipo tabletas, y otro distinto en ordenadores. De esta forma el

diseñador web se asegura de que el contenido que visualizan los usuarios se

ajusta a las necesidades de su dispositivo y, aunque la información mostrada es

exactamente igual, sea cual sea el dispositivo que la visualiza, el diseño varía

sensiblemente para optimizar al máximo el acceso a la misma. En este caso el

diseñador web emplea diferentes hojas de estilo que cargará mediante el uso de

JavaScript en función de las necesidades que se establezcan, principalmente

ancho del navegador web y tipo de dispositivo. Este es el diseño que más en

auge está teniendo gracias al uso masivo de dispositivos smartphones y tabletas

en el uso diario de la Internet.

Páginas más utilizadas

1. Google

Siendo el buscador más popular del mundo, es lógico que esté a la

cabeza de las páginas web más visitadas. Google permite a los usuarios

de Internet encontrar al momento información de cualquier tema,

incluyendo páginas web, imágenes, vídeos, ofertas, etcétera.

 imagen 1: buscador más popular del mundo (Google)

2. Facebook

La red social por excelencia es también una de las páginas web más

visitadas del mundo. Algunos medios apuntan a que Facebook ha llegado

a superar en un par de ocasiones a Facebook en tráfico de usuarios. Y es

que si la página creada por Mark Zuckerberg es una de las más visitadas

es porque es capaz de conectar a personas de todo el mundo.

imagen 2 la red social más utilizada (Facebook)

3. YouTube

El podio de las páginas web más visitadas del mundo lo cierra Youtube.
 Este portal, que permite a los usuarios subir vídeo a Internet y

compartirlos, se creó en 2005 y desde entonces su popularidad no ha

dejado de crecer.

imagen 3 la página web de entretenimiento

(YouTube)

Lista de referencias

(w-ictea, 2018) (web and macros, 2018) (pagia web estatica y dinamica, 2016)