02 Introducción Web

8/19/2019 02 Introducción Web

1/15

Asignatura: TÉCNICAS DE PRODUCCIÓN Y EDICIÓN DIGITAL II

Profesor: DAVID LOZANO

INTRODUCCIÓN WEB


2/15

Índice



Introducción web. .................................................................................................................................................3

1. Conceptos básicos. ................................................................................................................................3

1.1. Servidor-cliente, navegador. .....................................................................................................3

1.2. Elementos de una página web. .................................................................................................41.3. Páginas estáticas y dinámicas. .................................................................................................4

· Las páginas estáticas. ........................................................................................................5

· Las páginas dinámicas. ......................................................................................................5

· Lenguajes de lado servidor .................................................................................................5

· Lenguajes de lado cliente ...................................................................................................6

2. Estándares .............................................................................................................................................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. Validación. ..............................................................................................................................11

2.7. Scripts. ...................................................................................................................................12

2.8. Sitios web. .............................................................................................................................13

· Diferencias entre páginas web y portales web. ...................................................................13


3/15



3

Introducción web.

1. Conceptos básicos.

1.1. Servidor-cliente, navegador.

Los clientes web son navegadores como Firefox, Chrome, Opera, Safari, Internet Explorer, etc.

Las páginas web internamente se estructuran como archivos de texto que, al ser transferidos alordenador o al dispositivo del usuario, pueden ser interpretados con sentido por un navegadorweb.

Para que los navegadores puedan entender correctamente las páginas web, éstas utilizan un conjunto de normas denominadas HTML. El lenguaje HTML se emplea para definir la estructura de lainformación contenida en una página web.

Los navegadores solicitan una página web (o cualquier recurso) a un servidor web mediante unaURL.

Los servidores web contienen páginas web que pueden ser consultadas por cualquier usuariopara acceder a información e incluso interactuar con ellas, comportándose como verdaderasaplicaciones.

Además de los archivos de estructura (HTML), los servidores contienen otros archivos que pue-den ser interpretados por el navegador como las hojas de estilo (CSS), imágenes, vídeos, audios,animaciones flash, pdf, etc., y cualquier otro archivo que se quiera descargar. Cada uno de esosarchivos tiene su propia dirección única (URL).

La mayoría de los servidores pueden trabajar con páginas web normales, en formato HTML, oemplear otros sistemas dinámicos, como PHP, que les permiten generar páginas web en tiemporeal, empleando bases de datos y otros tipos de tecnologías.

Mozilla Firefox Opera Chrome Safari Internet Explorer Netscape Navigator

Avant Browser Maxthon Seamonkey Flock Konqueror K-Meleon


4/15



4

1.2. Elementos de una página web.

Una página web se compone de un archivo HTML que contiene el contenido y la estructura dela página, pero también se compone de muchos otros elementos como elementos multimedia

(imágenes, audios, vídeos, animaciones), hojas de estilo (CSS) para darle formato a la web, scriptspara añadir funcionalidad, etc.

1.3. Páginas estáticas y dinámicas.

Cuando se pincha un enlace, se realiza una petición de un archivo HTML a un servidor. Esta peti-ción 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 imágenes, vídeos, o archivospdf, flash, javascript, java, etc. Pero si no es capaz de procesar el formato, lo que hace es almace-

nar el archivo (descargar).


5/15



5

Pero aunque las páginas siempre se interpretan en HTML, y es así como las recibe el navegador,no siempre se solicitan una página en HTML porque no siempre se almacena tal cual en el servi-dor. Las páginas web pueden ser estáticas o dinámicas:

• Las páginas estáticas.

Son aquellas que se construyen y almacenan en el servidor y se va a mandar siempre igual encada petición del usuario.

• Las páginas dinámicas.

Son páginas que se construyen en el servidor ante una petición del cliente. Éstas pueden ser mo-dificadas atendiendo a parámetros que pase el usuario, a una base de datos o a otros elementos. Tienen una estructura base y una serie de Scripts (trozos de código) que generan los contenidos,los cuales pueden cambiar en cada petición. Es el propio servidor quien ejecuta e interpreta estosscripts para luego enviar al cliente (navegador) la información construida en forma de archivoHTML totalmente legible por él.

Resumiendo, el contenido estático se implementa mediante páginas html que se pueden crear conun simple editor de texto. El contenido dinámico requiere una aplicación web.

Aunque existen diferentes Scripts según el lenguaje en el que están construidos. Se pueden dividiren dos según donde serán ejecutados:

• Lenguajes de lado servidor

Son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor yque se envían al cliente en un formato comprensible para él. Son los que construyen las páginasdinámicas. Por ejemplo:

PHP, JSP, ASP, .NET, Python, Ruby, ColdFusion, Perl, Servlet, CGI …

En este caso, no se envía al cliente el código fuente, sólo el resultado de la ejecución de losscripts.


6/15



6

• Lenguajes de lado cliente

Son trozos de códigos que se envían al cliente para que sea el propio navegador (o plugins) elque los interprete. Es decir, el navegador no solo interpreta el HTML o elementos multimedia sino

también trozos de código como el Java y el JavaScript los cuales son simplemente incluidos en elcódigo HTML.

HTML, CSS, Java, JavaScript, VBScript, ActiveX, Applets, Flash …

Aunque estas páginas pueden ser visualmente dinámicas e interactivas, por ejemplo: cargandocontenidos bajo demanda del usuario, sólo se habla de páginas dinámicas cuando se ejecuta elcódigo en el lado del servidor.

Sin necesidad de tener lenguajes del lado del servidor, se pueden construir las páginas estáticasde forma que se pueden modificar contenidos sin recargar la página. Esto se puede hacer me-diante marcos (no recomendable) o mediante la tecnología AJAX.

AJAX: Asynchronous JavaScript And XML. Es una tecnología 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 páginas sin necesidad derecargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Aplicación web: Es un término bastante ambiguo que podemos resumir en “aplicaciones que sepueden ejecutar desde el navegador”. Es decir, son aplicaciones instaladas en un servidor en elque mediante el navegador podemos interactuar (ver, insertar, modificar, borrar datos,…) con ellas.

En general suelen llevar programación tanto para ejecutar en el lado del cliente como en el delservidor. 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, busca-dores, portales web o gestores de contenido (Wordpress, Joomla, drupal), repositorios de conteni-do (vídeos, música), noticias, redes sociales, tiendas online, subastas, encuestas, chats, calenda-rios, documentos en línea, juegos online, e-learning, mapas, …


7/15



7

2. Estándares

HTML (HyperText Markup Language - Lenguaje de Marcado de HiperTexto) y CSS (Cas-cading Style Sheets - Hojas de Estilo en Cascada) son dos de las principales tecnologías

para la creación de páginas web. HTML proporciona la estructura de la página, CSS el diseño,para una variedad de dispositivos. Junto con los gráficos y los scripts son la base de las páginasy aplicaciones web.

2.1. W3C.

El Consorcio W3C (World Wide Web) es una comunidad internacional donde las organizacionesmiembro, personal a tiempo completo y el público en general trabajan conjuntamente para desa-rrollar estándares web.

La principal actividad del W3C es desarrollar protocolos y directrices que aseguren el crecimientode la web a largo plazo. Los estándares del W3C definen las partes claves que hacen que la WorldWide Web funcione.

Página oficial: http://www.w3c.org

Página oficial en España: http://www.w3c.es/

2.2. XML.

XML (eXtensible Markup Language – Lenguaje de Marcado eXtensible) es un formatosimple para la representación de estructuras de información basado en texto: documentos, datos,libros, transacciones, facturas, y mucho más. Fue derivado del SGML ( Standard Generalized

Markup Language - Lenguaje de Marcado) para hacerlo más adecuado para el uso en la web.

http://www.w3c.org/http://www.w3c.es/http://www.w3c.es/http://www.w3c.org/


8/15



8

• ¿Para qué se usa el XML?

XML es uno de los formatos más utilizados para compartir información estructurada: entre aplica-ciones, entre personas, entre equipos y personas, tanto a nivel local como por la red.

Don Quijote de la mancha

Miguel de Cervantes

Drácula

Bram Stoker

2.3. HTML.

HTML (HyperText Markup Language - Lenguaje de Marcado de HiperTexto) es el lenguajepara describir la estructura de las páginas web. HTML ofrece a los creadores los medios para:

a) Publicar documentos online con cabeceras, textos, tablas, listas, fotos, etc.

b) Recupera información online a través de los enlaces de hipertexto, con un clic de botón.

c) Diseñar formularios para realizar transacciones con servicios remotos, para hacer búsquedade información, hacer reservas, ordenar productos, etc.

d) Incluir hojas de cálculo, vídeos, sonidos y otras aplicaciones directamente en sus documentos.


9/15



9

Con HTML, los creadores describen la estructura de las páginas usando marcas. Los elementosdel lenguaje etiquetan partes del contenido tales como “párrafo”, “lista”, “tabla” ...

El formato de HTML tiene la siguiente estructura:

contenido

Dentro del contenido puede haber anidadas otras etiquetas HTML.

Se parece a XML pero no es tan estricto.

Ejemplo:

For more information see the finalreport.

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 más estrictas propias del XML.

• ¿Por qué XHTML?

a) Mejor procesamiento.

b) Mantenimiento más sencillo.

c) Hacia la web semántica.


10/15



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

https://www.youtube.com/watch?v=EDTgmwVNGjshttps://www.youtube.com/watch?v=EDTgmwVNGjs


11/15



11

2.5. CSS.

CSS (Cascading Style Sheets - Hojas de Estilo en Cascada) es el lenguaje para describir lapresentación de páginas web, incluyendo colores, disposición y fuentes. Permite adaptar la presen-

tación a dispositivos de diferentes tipos, tales como pantallas grandes o pequeñas o impresoras.

CSS es independiente de HTML y puede ser usado con algunos lenguajes de marcas basadosen XML. La separación entre HTML y CSS hace que sea más fácil el mantenimiento de los sitios,

compartiendo hojas de estilos en las páginas y páginas a medida para entornos diferentes. Esto seconoce como la separación de la estructura (o contenido) de la presentación.

Ejemplo:

p.moreinfo { font-style: italic }

2.6. Validación.

W3C proporciona una herramienta web para poder validar el archivo HTML según la versión indicada.

http://validator.w3.org/

Es recomendable validar por:

a) Compatibilidad con navegadores: si no está validado, el navegador lo puede interpretarcomo quiera.

b) Menor cantidad de condicionales: no tiene que hacerse indicaciones de estilo específicaspara cada navegador.

c) Mantenimiento: con códigos limpios es más fácil retomar el trabajo o que otra persona lo haga.

d) Profesionalidad: es un símbolo de calidad.

http://validator.w3.org/http://validator.w3.org/


12/15



12

2.7. Scripts.

Un script es un código que no necesita preprocesamiento (compilación) antes de ser ejecutado.En el contexto de los navegadores web, script suele referirse a códigos escritos en JavaScript que

son ejecutados por el navegador cuando la página es descargada, o en respuesta a un eventolanzado por el usuario.

Los scripts pueden hacer las páginas web más dinámicas. Por ejemplo, sin necesidad de recar-

gar una nueva versión de una página se puede modificar el contenido, añadir o enviar contenido(DHTML, AJAX).

El interface de script más básico desarrollado en W3C es el DOM (Document Object Model –Modelo de Objetos de Documentos), que permite a los programas y scripts acceder dinámica-mente y actualizar el contenido, estructura y estilo de los documentos. Las especificaciones DOMforman el núcleo de DHTML.

Por tanto, los desarrolladores pueden hacer que los usuarios o eventos modifiquen el DOM parahacer interfaces más interactivas.

Un número cada vez mayor de interfaces avanzados han ido estandarizándose, por ejemplo, XMLHttpRequest hace posible cargar contenido adicional desde la web sin cargar un nuevo docu-mento, es el núcleo de AJAX.

La API de Geolocalización permite que la posición actual de los usuarios sea disponible a las apli-caciones basadas en navegadores.

Varias APIs hacen que la integración de aplicaciones web con los sistemas locales de ficheros yalmacenamiento (storage seamless).

Más allá de esto, los scripts cada vez más permiten a los desarrolladores crear un puente entre losnavegadores y la plataforma que se está ejecutando, haciendo posible, por ejemplo, crear páginasweb que incorporan información desde el entorno de usuario, tal como localización actual, detallesde la libreta de contacto, etc. Esta interactividad adicional hace a las páginas web comportarsecomo una aplicación de software tradicional. A estas páginas web se les llama frecuentemente

“Aplicaciones Web”.


13/15



13

2.8. Sitios web.

Es una colección de páginas web relacionadas dentro de un dominio de Internet.

A las páginas web se accede por la URL que normalmente tiene un nombre de dominio, una rutay un nombre de archivo, es decir, donde está la página web. Pero cuando accedemos a un sitioweb normalmente solo ponemos la dirección web o dominio. En este caso, el servidor sabe quese debe enviar una página por defecto, normalmente se llama index.html aunque el nombre pue-

de variar según el servidor y la tecnología (por ejemplo: index.php, default.asp, inicio.jsp, …). Estose puede configurar en el servidor web.

Una vez accedida a esta primera página o portada, nos movemos por el sitio web a través de losenlaces. Por tanto, las URL organizan las páginas de forma jerarquía. La forma de esa jerarquíaconstituye la forma en la que los usuarios podrán navegar por nuestro sitio. Una mala jerarquíapuede 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 dela web. La organización en carpeta dependerá de las características del sitio web. Es decir, en un

sitio web sencillo, podemos tener todos los HTML en la carpeta raíz “/”, las hojas de estilos en unacarpeta “css”, las imágenes en otra “img” y otros archivos que se puedan descargar en “des-cargas”. En cambio para un sitio web complejo con muchas secciones puede haber una mayororganización.

• Diferencias entre páginas web y portales web.

Una página web: tradicionalmente hace relación a un documento en el internet, disponible paraser leído, con información de consulta de algún tipo, para una empresa, la información sobre quiénes, qué hace, qué productos o servicios comercializa y con quién comunicarse en caso de que ellector desee hacerlo. Normalmente se contrata un diseño y el contenido se entrega para que seadiagramado por la misma empresa o persona que elabora todo el diseño.

De una página web no se espera interacción mayor con el usuario final o lector, lo que se esperaes que encuentre la información que creemos está buscando.

Una página web es altamente estática y en la mayoría de los casos desarrollada completamenteen HTML o FLASH que son lenguajes orientados a presentar información hacia el usuario final, loque significa que cuando las condiciones comerciales de la empresa cambien o se añadan nuevos

productos o servicios, debe llamarse nuevamente a quién desarrolló la página original para que


14/15



14

haga los cambios y ajustes necesarios. A la larga esto “amarra” a la empresa al diseñador o desa-rrollador de la página web.

Un Portal web: también es una página web o un conjunto de páginas web, pero orientado a

lograr la participación del usuario final o lector, con el fin de obtener algo de él, podría ser infor-mación más en detalle sobre sí mismo para poder utilizarla luego en campañas personalizadas ovisitas personales dirigidas, puede ser el cierre de una venta, en este caso el portal podría ser unatienda 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 información de quejasy reclamos por parte de los usuarios, que discrimine la persona responsable y le haga llegar lainformación, lleve un control de la solicitud y finalmente a través del mismo portal se haga conoceral usuario el resultado correcto.

Pero también un portal es una herramienta que permite integrar soluciones para múltiples tipos deusuarios de su empresa o negocio, sus clientes, proveedores, vendedores, técnicos, ejecutivos,ingenieros, personal de soporte y servicios administrativos y comparten entre todos, obviamentecon los niveles de autorización adecuada, la misma información, en línea, que normalmente estaráalmacenada en una base de datos a la que se accede a través de aplicaciones, muchas vecescomplejas que hacen de intercambiadores de información.

Un portal es mucho más que una página web, porque es completamente dinámico, este dinamis-mo depende del tipo de información, grado de participación y el número de usuarios finales. Unportal no solo provee al usuario información, sino que la recopila, lo que se espera es que ésteinteractúe con la empresa.

Un portal normalmente está desarrollado en algún lenguaje más poderoso y complejo que HTML,puede ser PHP o Java, y normalmente está asociado a una base de datos que almacena tanto lainformación que se quiere presentar como la que se obtiene del usuario del portal. Dicha infor-mación es totalmente aprovechable y en el caso de la empresa, la información que queremospresentar se debe poder administrar desde un área diseñada para que un usuario común dentrode nuestra empresa, pueda actualizarla, modificarla, añadir nuevo contenido, de tipo que sea, sinnecesidad de expertos ya que entre otros el concepto de usuario abarca también a nuestro perso-nal interno.

El desarrollo de un portal obviamente implica mucho más esfuerzo que el desarrollar una páginaweb tradicional, y no se trata solo de diseño gráfico, sino de un correcto análisis de la empresapara crear un concepto visual, y de contenido intercambiable que agregue a nuestra empresa ven-tajas competitivas, posicionamiento frente a la competencia, presencia permanente en la mente denuestros clientes, y en definitiva más ingresos mientras se disminuyen los costos operativos.


15/15

02 Introducción Web

Documents

Transcript of 02 Introducción Web