Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

INTRODUCCIN WEB

Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

ndice
Introduccin web...................................................................................................................................................3
1. Conceptos bsicos..................................................................................................................................3
1.1. Servidor-cliente, navegador.......................................................................................................3
1.2. Elementos de una pgina web...................................................................................................4
1.3. Pginas estticas y dinmicas...................................................................................................4
Las pginas estticas..........................................................................................................5
Las pginas dinmicas........................................................................................................5
Lenguajes de lado servidor..................................................................................................5
Lenguajes de lado cliente....................................................................................................6
2. Estndares..............................................................................................................................................7
2.1. W3C..........................................................................................................................................7
2.2. XML..........................................................................................................................................7
Para qu se usa el XML?...................................................................................................8
2.3. HTML........................................................................................................................................8
2.4. XHTML......................................................................................................................................9
Por qu XHTML?...............................................................................................................9
2.5. CSS.........................................................................................................................................11
2.6. Validacin................................................................................................................................11
2.7. Scripts.....................................................................................................................................12
2.8. Sitios web...............................................................................................................................13
Diferencias entre pginas web y portales web.....................................................................13

Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

Introduccin web.
1. Conceptos bsicos.
1.1. Servidor-cliente, navegador.
Los clientes web son navegadores como Firefox, Chrome, Opera, Safari, Internet Explorer, etc.
Las pginas web internamente se estructuran como archivos de texto que, al ser transferidos al
ordenador o al dispositivo del usuario, pueden ser interpretados con sentido por un navegador
web.
Para que los navegadores puedan entender correctamente las pginas web, stas utilizan un conjunto de normas denominadas HTML. El lenguaje HTML se emplea para definir la estructura de la
informacin contenida en una pgina web.
Los navegadores solicitan una pgina web (o cualquier recurso) a un servidor web mediante una
URL.
Los servidores web contienen pginas web que pueden ser consultadas por cualquier usuario
para acceder a informacin e incluso interactuar con ellas, comportndose como verdaderas
aplicaciones.
Adems de los archivos de estructura (HTML), los servidores contienen otros archivos que pueden ser interpretados por el navegador como las hojas de estilo (CSS), imgenes, vdeos, audios,
animaciones flash, pdf, etc., y cualquier otro archivo que se quiera descargar. Cada uno de esos
archivos tiene su propia direccin nica (URL).
La mayora de los servidores pueden trabajar con pginas web normales, en formato HTML, o
emplear otros sistemas dinmicos, como PHP, que les permiten generar pginas web en tiempo
real, empleando bases de datos y otros tipos de tecnologas.

Mozilla Firefox

Opera

Chrome

Safari

Internet Explorer

Netscape Navigator

Avant Browser

Maxthon

Seamonkey

Flock

Konqueror

K-Meleon

Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

1.2. Elementos de una pgina web.

Una pgina web se compone de un archivo HTML que contiene el contenido y la estructura de
la pgina, pero tambin se compone de muchos otros elementos como elementos multimedia
(imgenes, audios, vdeos, animaciones), hojas de estilo (CSS) para darle formato a la web, scripts
para aadir funcionalidad, etc.

1.3. Pginas estticas y dinmicas.

Cuando se pincha un enlace, se realiza una peticin de un archivo HTML a un servidor. Esta peticin la realiza el navegador (el cliente) que a su vez interpreta el archivo HTML y lo muestra.
El navegador solo puede interpretar el HTML y otros formatos como imgenes, vdeos, o archivos
pdf, flash, javascript, java, etc. Pero si no es capaz de procesar el formato, lo que hace es almacenar el archivo (descargar).

Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

Pero aunque las pginas siempre se interpretan en HTML, y es as como las recibe el navegador,
no siempre se solicitan una pgina en HTML porque no siempre se almacena tal cual en el servidor. Las pginas web pueden ser estticas o dinmicas:

Las pginas estticas.

Son aquellas que se construyen y almacenan en el servidor y se va a mandar siempre igual en

cada peticin del usuario.

Las pginas dinmicas.

Son pginas que se construyen en el servidor ante una peticin del cliente. stas pueden ser modificadas atendiendo a parmetros que pase el usuario, a una base de datos o a otros elementos.
Tienen una estructura base y una serie de Scripts (trozos de cdigo) que generan los contenidos,
los cuales pueden cambiar en cada peticin. Es el propio servidor quien ejecuta e interpreta estos
scripts para luego enviar al cliente (navegador) la informacin construida en forma de archivo
HTML totalmente legible por l.
Resumiendo, el contenido esttico se implementa mediante pginas html que se pueden crear con
un simple editor de texto. El contenido dinmico requiere una aplicacin web.
Aunque existen diferentes Scripts segn el lenguaje en el que estn construidos. Se pueden dividir
en dos segn donde sern ejecutados:

Lenguajes de lado servidor

Son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor y
que se envan al cliente en un formato comprensible para l. Son los que construyen las pginas
dinmicas. Por ejemplo:
PHP, JSP, ASP, .NET, Python, Ruby, ColdFusion, Perl, Servlet, CGI
En este caso, no se enva al cliente el cdigo fuente, slo el resultado de la ejecucin de los
scripts.

Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

Lenguajes de lado cliente

Son trozos de cdigos que se envan al cliente para que sea el propio navegador (o plugins) el
que los interprete. Es decir, el navegador no solo interpreta el HTML o elementos multimedia sino
tambin trozos de cdigo como el Java y el JavaScript los cuales son simplemente incluidos en el
cdigo HTML.
HTML, CSS, Java, JavaScript, VBScript, ActiveX, Applets, Flash
Aunque estas pginas pueden ser visualmente dinmicas e interactivas, por ejemplo: cargando
contenidos bajo demanda del usuario, slo se habla de pginas dinmicas cuando se ejecuta el
cdigo en el lado del servidor.
Sin necesidad de tener lenguajes del lado del servidor, se pueden construir las pginas estticas
de forma que se pueden modificar contenidos sin recargar la pgina. Esto se puede hacer mediante marcos (no recomendable) o mediante la tecnologa AJAX.
AJAX: Asynchronous JavaScript And XML. Es una tecnologa que permite hacer aplicaciones
(normalmente con JavaScript) que se ejecutan en el navegador y se comunica con el servidor en
segundo plano. De esta forma es posible realizar cambios sobre las pginas sin necesidad de
recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.
Aplicacin web: Es un trmino bastante ambiguo que podemos resumir en aplicaciones que se
pueden ejecutar desde el navegador. Es decir, son aplicaciones instaladas en un servidor en el
que mediante el navegador podemos interactuar (ver, insertar, modificar, borrar datos,) con ellas.
En general suelen llevar programacin tanto para ejecutar en el lado del cliente como en el del
servidor. Y en el lado del servidor suelen incluir una base de datos para almacenar el contenido.
Los ejemplos de aplicaciones web pueden ser tan dispares como: clientes de correo web, buscadores, portales web o gestores de contenido (Wordpress, Joomla, drupal), repositorios de contenido (vdeos, msica), noticias, redes sociales, tiendas online, subastas, encuestas, chats, calendarios, documentos en lnea, juegos online, e-learning, mapas,

Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

2. Estndares
HTML (HyperText Markup Language - Lenguaje de Marcado de HiperTexto) y CSS (Cascading Style Sheets - Hojas de Estilo en Cascada) son dos de las principales tecnologas
para la creacin de pginas web. HTML proporciona la estructura de la pgina, CSS el diseo,
para una variedad de dispositivos. Junto con los grficos y los scripts son la base de las pginas
y aplicaciones web.

2.1. W3C.
El Consorcio W3C (World Wide Web) es una comunidad internacional donde las organizaciones
miembro, personal a tiempo completo y el pblico en general trabajan conjuntamente para desarrollar estndares web.
La principal actividad del W3C es desarrollar protocolos y directrices que aseguren el crecimiento
de la web a largo plazo. Los estndares del W3C definen las partes claves que hacen que la World
Wide Web funcione.
Pgina oficial: http://www.w3c.org
Pgina oficial en Espaa: http://www.w3c.es/

2.2. XML.
XML (eXtensible Markup Language Lenguaje de Marcado eXtensible) es un formato
simple para la representacin de estructuras de informacin basado en texto: documentos, datos,
libros, transacciones, facturas, y mucho ms. Fue derivado del SGML ( Standard Generalized
Markup Language - Lenguaje de Marcado) para hacerlo ms adecuado para el uso en la web.

Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

Para qu se usa el XML?

XML es uno de los formatos ms utilizados para compartir informacin estructurada: entre aplicaciones, entre personas, entre equipos y personas, tanto a nivel local como por la red.
<biblioteca>

<libro numero=652>

<nombre>Don Quijote de la mancha</nombre>

<autor>Miguel de Cervantes</autor>

</libro>

<libro numero=834>

<nombre>Drcula</nombre>
<autor>Bram Stoker</autor>

</libro>

</biblioteca>

2.3. HTML.
HTML (HyperText Markup Language - Lenguaje de Marcado de HiperTexto) es el lenguaje
para describir la estructura de las pginas web. HTML ofrece a los creadores los medios para:
a) Publicar documentos online con cabeceras, textos, tablas, listas, fotos, etc.
b) Recupera informacin online a travs de los enlaces de hipertexto, con un clic de botn.
c) Disear formularios para realizar transacciones con servicios remotos, para hacer bsqueda
de informacin, hacer reservas, ordenar productos, etc.
d) Incluir hojas de clculo, vdeos, sonidos y otras aplicaciones directamente en sus documentos.

Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

Con HTML, los creadores describen la estructura de las pginas usando marcas. Los elementos
del lenguaje etiquetan partes del contenido tales como prrafo, lista, tabla ...
El formato de HTML tiene la siguiente estructura:
<etiqueta atributo=valor> contenido </etiqueta>
Dentro del contenido puede haber anidadas otras etiquetas HTML.
Se parece a XML pero no es tan estricto.
Ejemplo:
<p class=moreinfo>For more information see the <a href=http://www.example.com/report>final
report</a>.</p>

2.4. XHTML.
XHTML es una variante de HTML que usa la sintaxis de XML (eXtensible Markup Languague).
XHTML tiene todos los elementos que HTML, pero la sintaxis es ligeramente diferente.
XHTML es HTML con unas restricciones ms estrictas propias del XML.

Por qu XHTML?
a) Mejor procesamiento.
b) Mantenimiento ms sencillo.
c) Hacia la web semntica.

Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

XML: HTML y XHTML: https://www.youtube.com/watch?v=EDTgmwVNGjs

Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

11

2.5. CSS.
CSS (Cascading Style Sheets - Hojas de Estilo en Cascada) es el lenguaje para describir la
presentacin de pginas web, incluyendo colores, disposicin y fuentes. Permite adaptar la presentacin a dispositivos de diferentes tipos, tales como pantallas grandes o pequeas o impresoras.
CSS es independiente de HTML y puede ser usado con algunos lenguajes de marcas basados
en XML. La separacin entre HTML y CSS hace que sea ms fcil el mantenimiento de los sitios,
compartiendo hojas de estilos en las pginas y pginas a medida para entornos diferentes. Esto se
conoce como la separacin de la estructura (o contenido) de la presentacin.
Ejemplo:
p.moreinfo { font-style: italic }

2.6. Validacin.
W3C proporciona una herramienta web para poder validar el archivo HTML segn la versin indicada.
http://validator.w3.org/
Es recomendable validar por:
a) Compatibilidad con navegadores: si no est validado, el navegador lo puede interpretar
como quiera.
b) Menor cantidad de condicionales: no tiene que hacerse indicaciones de estilo especficas
para cada navegador.
c) Mantenimiento: con cdigos limpios es ms fcil retomar el trabajo o que otra persona lo haga.
d) Profesionalidad: es un smbolo de calidad.

Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

12

2.7. Scripts.
Un script es un cdigo que no necesita preprocesamiento (compilacin) antes de ser ejecutado.
En el contexto de los navegadores web, script suele referirse a cdigos escritos en JavaScript que
son ejecutados por el navegador cuando la pgina es descargada, o en respuesta a un evento
lanzado por el usuario.
Los scripts pueden hacer las pginas web ms dinmicas. Por ejemplo, sin necesidad de recargar una nueva versin de una pgina se puede modificar el contenido, aadir o enviar contenido
(DHTML, AJAX).
El interface de script ms bsico desarrollado en W3C es el DOM (Document Object Model
Modelo de Objetos de Documentos), que permite a los programas y scripts acceder dinmicamente y actualizar el contenido, estructura y estilo de los documentos. Las especificaciones DOM
forman el ncleo de DHTML.
Por tanto, los desarrolladores pueden hacer que los usuarios o eventos modifiquen el DOM para
hacer interfaces ms interactivas.
Un nmero cada vez mayor de interfaces avanzados han ido estandarizndose, por ejemplo,
XMLHttpRequest hace posible cargar contenido adicional desde la web sin cargar un nuevo documento, es el ncleo de AJAX.
La API de Geolocalizacin permite que la posicin actual de los usuarios sea disponible a las aplicaciones basadas en navegadores.
Varias APIs hacen que la integracin de aplicaciones web con los sistemas locales de ficheros y
almacenamiento (storage seamless).
Ms all de esto, los scripts cada vez ms permiten a los desarrolladores crear un puente entre los
navegadores y la plataforma que se est ejecutando, haciendo posible, por ejemplo, crear pginas
web que incorporan informacin desde el entorno de usuario, tal como localizacin actual, detalles
de la libreta de contacto, etc. Esta interactividad adicional hace a las pginas web comportarse
como una aplicacin de software tradicional. A estas pginas web se les llama frecuentemente
Aplicaciones Web.

Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

13

2.8. Sitios web.

Es una coleccin de pginas web relacionadas dentro de un dominio de Internet.
A las pginas web se accede por la URL que normalmente tiene un nombre de dominio, una ruta
y un nombre de archivo, es decir, donde est la pgina web. Pero cuando accedemos a un sitio
web normalmente solo ponemos la direccin web o dominio. En este caso, el servidor sabe que
se debe enviar una pgina por defecto, normalmente se llama index.html aunque el nombre puede variar segn el servidor y la tecnologa (por ejemplo: index.php, default.asp, inicio.jsp, ). Esto
se puede configurar en el servidor web.
Una vez accedida a esta primera pgina o portada, nos movemos por el sitio web a travs de los
enlaces. Por tanto, las URL organizan las pginas de forma jerarqua. La forma de esa jerarqua
constituye la forma en la que los usuarios podrn navegar por nuestro sitio. Una mala jerarqua
puede confundir y perder al usuario en nuestro sitio web.
Internamente, los contenidos de un sitio web son ficheros y se organizan como tales en carpetas.
Esto es indiferente al usuario y se deben organizar de forma ptima para los desarrolladores de
la web. La organizacin en carpeta depender de las caractersticas del sitio web. Es decir, en un
sitio web sencillo, podemos tener todos los HTML en la carpeta raz /, las hojas de estilos en una
carpeta css, las imgenes en otra img y otros archivos que se puedan descargar en descargas. En cambio para un sitio web complejo con muchas secciones puede haber una mayor
organizacin.

Diferencias entre pginas web y portales web.

Una pgina web: tradicionalmente hace relacin a un documento en el internet, disponible para
ser ledo, con informacin de consulta de algn tipo, para una empresa, la informacin sobre quin
es, qu hace, qu productos o servicios comercializa y con quin comunicarse en caso de que el
lector desee hacerlo. Normalmente se contrata un diseo y el contenido se entrega para que sea
diagramado por la misma empresa o persona que elabora todo el diseo.
De una pgina web no se espera interaccin mayor con el usuario final o lector, lo que se espera
es que encuentre la informacin que creemos est buscando.
Una pgina web es altamente esttica y en la mayora de los casos desarrollada completamente
en HTML o FLASH que son lenguajes orientados a presentar informacin hacia el usuario final, lo
que significa que cuando las condiciones comerciales de la empresa cambien o se aadan nuevos
productos o servicios, debe llamarse nuevamente a quin desarroll la pgina original para que

Asignatura: TCNICAS DE PRODUCCIN Y EDICIN DIGITAL II

Profesor: DAVID LOZANO

14

haga los cambios y ajustes necesarios. A la larga esto amarra a la empresa al diseador o desarrollador de la pgina web.
Un Portal web: tambin es una pgina web o un conjunto de pginas web, pero orientado a
lograr la participacin del usuario final o lector, con el fin de obtener algo de l, podra ser informacin ms en detalle sobre s mismo para poder utilizarla luego en campaas personalizadas o
visitas personales dirigidas, puede ser el cierre de una venta, en este caso el portal podra ser una
tienda virtual que permita que el usuario final seleccione los productos o servicios, defina la forma
de pago y realice el pedido, es posible que el portal est dirigido a recibir la informacin de quejas
y reclamos por parte de los usuarios, que discrimine la persona responsable y le haga llegar la
informacin, lleve un control de la solicitud y finalmente a travs del mismo portal se haga conocer
al usuario el resultado correcto.
Pero tambin un portal es una herramienta que permite integrar soluciones para mltiples tipos de
usuarios de su empresa o negocio, sus clientes, proveedores, vendedores, tcnicos, ejecutivos,
ingenieros, personal de soporte y servicios administrativos y comparten entre todos, obviamente
con los niveles de autorizacin adecuada, la misma informacin, en lnea, que normalmente estar
almacenada en una base de datos a la que se accede a travs de aplicaciones, muchas veces
complejas que hacen de intercambiadores de informacin.
Un portal es mucho ms que una pgina web, porque es completamente dinmico, este dinamismo depende del tipo de informacin, grado de participacin y el nmero de usuarios finales. Un
portal no solo provee al usuario informacin, sino que la recopila, lo que se espera es que ste
interacte con la empresa.
Un portal normalmente est desarrollado en algn lenguaje ms poderoso y complejo que HTML,
puede ser PHP o Java, y normalmente est asociado a una base de datos que almacena tanto la
informacin que se quiere presentar como la que se obtiene del usuario del portal. Dicha informacin es totalmente aprovechable y en el caso de la empresa, la informacin que queremos
presentar se debe poder administrar desde un rea diseada para que un usuario comn dentro
de nuestra empresa, pueda actualizarla, modificarla, aadir nuevo contenido, de tipo que sea, sin
necesidad de expertos ya que entre otros el concepto de usuario abarca tambin a nuestro personal interno.
El desarrollo de un portal obviamente implica mucho ms esfuerzo que el desarrollar una pgina
web tradicional, y no se trata solo de diseo grfico, sino de un correcto anlisis de la empresa
para crear un concepto visual, y de contenido intercambiable que agregue a nuestra empresa ventajas competitivas, posicionamiento frente a la competencia, presencia permanente en la mente de
nuestros clientes, y en definitiva ms ingresos mientras se disminuyen los costos operativos.