Antecedentes históricos y relevantes de la web

¿Qué ES EL INTERNET?

como una "red de redes", una red que no sólo interconecta computadoras, sino que
interconecta redes de computadoras entre sí.
Una red de computadoras es un conjunto de máquinas que se comunican a través de
algún medio (cable coaxial, fibra óptica, radiofrecuencia, líneas telefónicas, etc.) con el
objeto de compartir recursos.

el Internet sirve de enlace entre redes más pequeñas y permite ampliar su cobertura al
hacerlas parte de una "red global". Esta red global tiene la característica de que utiliza un
lenguaje común que garantiza la intercomunicación de los diferentes participantes; este
lenguaje común o protocolo (un protocolo es el lenguaje que utilizan las computadoras al
compartir recursos) se conoce como TCP/IP.

Internet es un acrónimo de INTERconected NETworks (Redes interconectadas).

Para otros, Internet es un acrónimo del inglés INTERnational NET, que traducido al español
sería Red Mundial.

¿Qué es la web?

En informática, la World Wide Web (WWW) o Red informática mundial comúnmente

conocida como la web, es un sistema de distribución de documentos de hipertexto o
hipermedias interconectados y accesibles vía Internet. Con un navegador web, un usuario
visualiza sitios web compuestos de páginas web que pueden contener texto, imágenes,
vídeos u otros contenidos multimedia, y navega a través de esas páginas
usando hiperenlaces

Los principales navegadores:

• Los navegadores de Internet son el programa que permite acceder a la web.

• Su aparición en 1991, los navegadores han evolucionado considerablemente, a la vez que

la propia web.

• Netscape: apareció en 1994 y hasta 1997 fue el navegador más popular.

• Internet Explorer: Microsoft presentó Internet Explorer en agosto de 1995, basándose en

una versión de Mosaic. Internet Explorer 1 no estaba incluido en Windows 95, pero ante el
éxito de Netscape y la creciente popularidad de la web, Microsoft pisó el acelerador.
 • Opera: Opera es un navegador que comenzó en 1994 como proyecto de investigación de
Telenor, una compañía telefónica Noruega, pero que desde 1995 desarrolla la compañía
Opera Software.

• Mozilla: Mozilla era el apodo del navegador Netscape dentro de la misma empresa
Netscape. En enero de 1998 Netscape anunció que liberaba el código fuente de su
navegador y el proyecto de continuar el desarrollo de ese código recibió el nombre de
Mozilla.

• Firefox: Firefox es el navegador creado por la Fundación Mozilla y es continuación del

navegador Mozilla, que a su vez es continuación del navegador Netscape. Firefox 1.0 se
publicó en noviembre de 2004 y su objetivo es permitir que la web sea pública, abierta y
accesible.

• Chrome: Es un navegador creado en 2008 por Google a partir de WebKit, el motor de

renderizado del navegador Safari, aunque desde la versión 28 (julio de 2013) utiliza el
motor Blink en vez de WebKit (artículo de lwn.net explicando los motivos de esta
decisión).

• El diseño web

• Actividad que consiste en la planificación, diseño e implementación de sitios web.

• Requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la

información y la interacción de medios como el audio, texto, imagen, enlaces y vídeo.

• El diseño web ha visto amplia aplicación en los sectores comerciales de Internet

especialmente en la World Wide Web.

Diseño web aplicado

El diseño de páginas web se trata de realizar un documento con información hiperenlazado con
otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una
pantalla de computador, en papel, en un teléfono móvil, etc).

Estos documentos o páginas web pueden ser creadas:

• Creando archivos de texto en HTML, PHP, Asp, Aspx, JavaScript, JSP, Python, Ruby.

• Utilizando un programa WYSIWYG o WYSIWYM de creación de páginas.

• Utilizando lenguajes de programación del lado servidor, para generar la página web

Etapas

Para el diseño de páginas web debemos tener en cuenta tres etapas:

• El diseño visual de la información que se desea editar. En esta etapa se trabaja
distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros
objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar
sobre el computador se realice un boceto o pre diseño sobre el papel. Esto facilitará tener
un orden claro sobre el diseño.

• Estructura y relación jerárquica de las páginas del sitio web. Una vez que se tiene el boceto
se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los
vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los
enlaces que aparecen subrayados en este documento y otros de Wikipedia son ejemplos
de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información
relacionada.

• Posicionamiento en buscadores o SEO. Ésta consiste en optimizar la estructura del

contenido para mejorar la posición en que aparece la página en determinada búsqueda.
Etapa no gustosa por los diseñadores gráficos, porque a diferencia del texto, aún para el
año 2012 no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos.

• La web semántica

• La web semántica por un uso lógico de los elementos según el significado para el que
fueron concebidas. Por ejemplo se utilizará el elemento <P> para marcar párrafos,
y<TABLE> para tabular datos. De esta forma se utiliza el documento HTML únicamente
para contener, organizar y estructurar la información y las hojas de estilo CSS para indicar
como se mostrará dicha información en los diferentes medios (como por ejemplo,
una monitor de computadora, un teléfono móvil, impreso en papel, leída por
un sintetizador de voz, etc.). Por lógica, esta metodología beneficia enormemente
la accesibilidad del documento.

• También existen páginas dinámicas, las cuales permiten interacción entre la web y el
visitante, proporcionándole herramientas tales como buscadores, chat, foros, sistemas
de encuestas, etc.

• Accesibilidad

• El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga

• que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas.
Para conseguir estos objetivos de accesibilidad se han desarrollado pautas como las
del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.

• HTML,

• HyperText Markup Language Es un estándar que sirve de referencia para la elaboración

de páginas web en sus diferentes versiones, define una estructura básica y un código para
la definición de contenido de una página web, como texto, imágenes, etc. Es un estándar a
 cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías
ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Es el lenguaje
con el que se definen las páginas web.

• Elementos
• Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades
básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para
que se considere válido al documento HTML. Un elemento generalmente tiene una
etiqueta de inicio (por ejemplo, <nombre-de-elemento>) y una etiqueta de cierre (por
ejemplo, </nombre-de-elemento>). Los atributos del elemento están contenidos en la
etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (por
ejemplo, <nombre-de-elemento atributo="valor">Contenido</nombre-de-
elemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una
etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en
HTML.
• CSS

Las hojas de estilo en cascada o (Cascading Style Sheets, o sus siglas CSS) hacen referencia a un
lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato)
de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas
webs escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de
documentos XML, incluyendo SVG y XUL.

La información de estilo puede ser adjuntada como un documento separado o en el mismo

documento HTML. En este último caso podrían definirse estilos generales en la cabecera del
documento o en cada etiqueta particular mediante el atributo "<style>".

El URL es una cadena de caracteres con la cual se asigna una dirección única a cada uno de los
recursos de información disponibles en la Internet. Existe un URL único para cada página de cada
uno de los documentos de la World Wide Web, para todos los elementos de Gopher y todos los
grupos de debate USENET, y así sucesivamente.

El URL de un recurso de información es su dirección en Internet, la cual permite que

el navegador la encuentre y la muestre de forma adecuada. Por ello el URL combina el nombre del
ordenador que proporciona la información, el directorio donde se encuentra, el nombre del archivo,
y el protocolo a usar para recuperar los datos para que no se pierda alguna información sobre
dicho factor que se emplea para el trabajo.

Podemos entender que una URI = URL + URN

El URL es una cadena de caracteres con la cual se asigna una dirección única a cada uno de los
recursos de información disponibles en la Internet. Existe un URL único para cada página de cada
uno de los documentos de la World Wide Web, para todos los elementos de Gopher y todos los
grupos de debate USENET, y así sucesivamente.
Tipos de imágenes y formatos

imágenes vectoriales

 Las imágenes vectoriales son imágenes constituidas por objetos geométricos autónomos
(líneas, curvas, polígonos,...), definidos por ciertas funciones matemáticas (vectores) que
determinan sus características (forma, color, posición,...)

Imágenes de mapa de bits.

 Las imágenes de mapa de bits están formadas por una serie de puntos (píxeles), cada uno
de los cuales contiene información de color y luminosidad. Salvando la diferencia,
podemos compararla con un mosaico y sus teselas.

GIF: Graphics Interchange Format

 Formato bastante antiguo desarrollado por Compuserve con el fin de conseguir archivos
de tamaño muy pequeños. Admite solo 256 colores por lo que no es adecuado para
imágenes fotográficas pero si es muy apropiado para logotipos, dibujos, etc. Permite crear
animaciones (gif animado) y transparencias. Gif utiliza sistemas de compresión
"propietarios" y tiene derechos de utilización.

JPEG:Joint Photographic Experts Group

 Es uno de los formatos más conocido y usado para fotografías digitales ya que admite
millones de colores. Lo admiten la mayor parte de las cámaras fotográficas y escáneres y
es muy utilizado en páginas web, envío de fotografías por correo electrónico,
presentaciones multimedia y elaboración de vídeos de fotografías.

 JPEG admite distintos niveles de compresión, de forma que:

 A más compresión menor calidad y archivos más pequeños (menos Kbytes)

 A menos compresión mayor calidad y archivos más grandes (más Kbytes)

 La compresión que hace JPEG, es con pérdidas y afecta a la calidad de imagen, La

compresión que hace JPEG, es con pérdidas y afecta a la calidad de imagen. Cada vez que
se abre y manipula una foto JPEG en un ordenador, la imagen al comprimirse y
descomprimirse se degrada, por lo que conviene no guardarlas en JPEG si se van a
modificar En este caso usar TIFF o BMP para editarlas y convertirlas a JPEG al final. Si no
queda más remedio que editar en JPEG, manipularlas con cuidado y no excesivamente.

PNG

 PNG (siglas en inglés de Gráficos de Red Portátiles, pronunciadas "ping") es un formato

gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a
patentes. Este formato fue desarrollado en buena parte para solventar las deficiencias del
 formato GIF y permite almacenar imágenes con una mayor profundidad de contraste y
otros importantes datos.

 Las imágenes PNG usan la extensión .png y han obtenido un tipo MIME (image/png)
aprobado el 14 de octubre de 1996.

RAW

 es un formato de archivo digital de imágenes que contiene la totalidad de los datos de la

imagen tal y como ha sido captada por el sensor digital de la cámara fotográfica.

 El formato RAW generalmente lleva aplicada compresión de datos sin pérdida de

información.

 Debido a que contiene la totalidad de los datos de la imagen captada por la cámara y una
mayor profundidad de color (por lo general 36 a 48 bits/píxel), sus ficheros tienen un
tamaño de archivo muy grande, a pesar de que, generalmente, usan compresión.

 Las cámaras que guardan las fotos en otros formatos (TIFF y JPEG) Procesan la imagen
captada para dar una interpretación de ella (Balance de blanco, niveles de luminosidad,
contraste) En el formato RAW, los pixeles no se procesan y se mantienen en bruto para ser
procesados posteriormente por un software especifico conocido como “revelador RAW”

 Un Archivo RAW, no sufre ninguna compresión, por lo que mantiene el máximo detalle de
la imagen a costa de ocupar mucho espacio (Mbytes).

• Una imagen vectorial es una imagen digital, formada por objetos geométricos
independientes (segmentos, polígonos, arcos, etc.), cada uno de ellos definido por
distintos atributos matemáticos de forma, de posición, de color, etc.

• El interés principales de los gráficos vectoriales es poder ampliar el tamaño de una imagen
a voluntad sin sufrir la pérdida de calidad que sufren los mapas de bits. De la misma
forma, permiten mover, estirar y retorcer imágenes de manera relativamente sencilla. Su
uso también está muy extendido en la generación de imágenes en tres dimensiones tanto
dinámicas como estáticas.

• Todos los ordenadores actuales traducen los gráficos vectoriales a mapas de bits para
poder representarlos en pantalla al estar ésta constituida físicamente por píxeles.
Imagen bitman

• Una imagen en mapa de bis, ta, raster image o extensión .bmp (estos dos tomados del
inglés), o imagen ráster (un calco del inglés), es una estructura o fichero de datos que
representa una rejilla rectangular de píxeles o puntos de color, denominada matriz, que
se puede visualizar en un monitor, papel u otro dispositivo de representación.

• A las imágenes en mapa de bits se las suele definir por su altura y anchura (en píxeles) y
por su profundidad de color (en bits por píxel), que determina el número de colores
distintos que se pueden almacenar en cada punto individual, y por lo tanto, en gran
medida, la calidad del color de la imagen.

• Bitmap es, literalmente, un mapa de bits, es decir, la representación binaria en la cual un

bit o conjunto de bits corresponde a alguna parte de un objeto como una imagen o fuente.

Por ejemplo, en sistemas monocromáticos, un bit en el mapa de bits representa un pixel

en pantalla. Para la escala de grises o color, varios bits en el mapa de bits representan un
pixel o grupo de pixeles. El término también puede hacer referencia al área de memoria
que contiene el mapa de bits.

• Por lo general, un mapa de bits se asocia con objetos gráficos, fotografías o imágenes, en
los cuales los bits son una representación directa de la imagen de la figura. Sin embargo,
este tipo de mapa puede emplearse para representar y mantener un seguimiento de
cualquier cosa, donde a cada locación de bit se le asigna un valor o condición diferente.

Resolución

• La resolución de imagen es el número de píxeles mostrados por unidad de longitud

impresa en una imagen, que normalmente se mide en píxeles por pulgada (ppi, píxel per.
Inch)

• Las fotografías que se obtienen a partir de las cámaras digitales son mapas de bits, las
imágenes que captura un escáner también lo son; en estas imágenes la calidad máxima
que tienen (número de píxel por unidad de medida, píxeles/cm.,; píxeles/pulgada.) viene
determinada en el momento de crearlas por lo que no podremos ampliar la resolución o
número de píxeles por unidad posteriormente, es decir, no podremos ampliar su
resolución sin que la imagen se vea afectada, en general deformándose y perdiendo
nitidez, ya que se modifican los píxeles que las definen.

• La misma imagen en baja resolución, los píxeles se ven a simple vista y la ampliación de la
imagen es confusa. Es una imagen de 72 px. (Calidad baja).

• El tamaño de los píxeles determina la cantidad de detalle de la imagen; las dimensiones de

estos píxeles y el número de ellos es lo que da la calidad final (Alta, media ó baja).
• Se puede modificar el tamaño de los píxeles siempre y cuando los reduzcamos o hagamos
más pequeños, en este caso la imagen no se verá afectada ya que no estamos modificando
la información de los mismos, simplemente reducimos su tamaño.

• La resolución y el tamaño de archivo esta relacionada de forma proporcional. Por

ejemplo, una imagen de 1cm. por 1 cm. con una resolución de 72 p/cm. contiene un total
de 5.184 píxeles. Esa misma imagen con una resolución de 300p/cm. contendría un total
de 90.000 píxeles. Esta diferencia afecta al tamaño de archivo. En el caso de la impresión,
una resolución muy alta será lenta por el enorme espacio que ocupa, mientras que una
impresión con una resolución muy baja puede dar lugar a una pixelación en la imagen
(Tamaño demasiado grande de los píxeles).