introducción tecnologías web
- 1. ntroducción Tecnologías Web Primero que nada la web es una idea que creció con base en la internet, antes de la web la manera de obtener la información de internet era muy complicada pues tenias que tener muchos conocimientos sobre sistemas operativos o programas, pero cuando la web entra en juego introduce el idioma universal de busqueda que una vez que ya la información esté disponible se pueda acceder a ella desde cualquier computadora, de cualquier país, por cualquier persona. La web es la manera más sofisticada de ofrecer información, la forma más potente para tener acceso a la inmensa cantidad de información del internet. La arquitectura para esto está formada por un cliente y un servidor, las tecnologías que maneja el cliente son por ejemplo internet explorer, mozillafirefox, opera, tecnologias de programacionhtml, C++, Java Script? etc. Las tecnologías de un servidor son motores java, php, internet information server entre otros. Los hipertextos son enlaces a otros documentos uno puede seguir y seguir investigando sobre el tema que le guste gracias a estos hipertextos que nos hacen la vida masfacil y es asi que las tecnologías web han rediseñado nuestra manera en que usamos la internet y encontramos lo que buscamos Tecnologías Web Federico Peinado Introducción Este material para un curso de HTML, CSS y programación web ha sido creado originalmente para el seminario de Tecnologías Web de Ing. Técnica en Informática de Gestión e Ing. Técnica en Informática de Sistemas de la Facultad de Informática UCM. Estas diapositivas son material original creado por Iván Martínez Ortíz y Luis Hernández Yáñez. Agradezco que se envíe cualquier comentario, sugerencia o corrección sobre este material a email-federicopeinado.com Contenidos básicos Información relativa al curso 2009/2010: Presentación del seminario (PDF)
- 2. Material docente: Tema 1: Introducción al desarrollo web (PDF) Tema 2: HTML, el idioma de Internet (Parte 1, PDF) Tema 2: HTML, el idioma de Internet (Parte 2, PDF) Tema 3: XHTML (PDF) Tema 4: CSS, hojas de estilo en cascada (PDF) Tema 5: JavaScript, scripting en el cliente (Parte 1, PDF) Tema 5: JavaScript, scripting en el cliente (Parte 2, PDF) Tema 5: JavaScript, scripting en el cliente (Parte 3, PDF) Tema 6: El servidor web Apache HTTPD (PDF) Tema 7: PHP (PDF) Tema 7: Proyecto de prueba en PHP (ZIP), esqueleto básico de un proyecto de prueba en PHP donde la base de datos, el usuario y la clave se llaman 'prueba' y falta añadir algún fichero como el CSS para hacerlo ejecutable. Para simplificar la instalación de Apache, el motor de PHP y otras aplicaciones de utilidad (como el gestor de bases de datos MySQL) se aconseja a los alumnos utilizar XAMPP, paquete que agrega estas aplicaciones y muchas otras. Más información aquí: Primeros pasos con XAMPP en Windows, Preguntas frecuentes sobre XAMPP en Windows, Ejemplo de un pequeño desarrollo con XAMPP (PDF) que enseña cómo crear una base de datos en MySQL a través del sencillo interfaz llamado phpMyAdmin. Contenidos adicionales Para estudiar estos temas (HTML + CSS, JavaScript y PHP) paso a paso y con ayuda de ejercicios es aconsejable realizar este Curso de la Escuela Complutense Latinoamericana sobre Programación para Internet (ZIP con los contenidos y ejemplos del CD oficial del año 2007). HTML, XHTML y otras tecnologías web HTML es el lenguaje utilizado para crear páginas web. Una página web no es más que un documento de texto al que se le han añadido una serie de marcas (también llamadas etiquetas), conceptualmente similares a los estilos que se pueden aplicar al
- 3. texto desde un programa como Microsoft Word. Algunos ejemplos de marcas son: <p></p>, <img />, <form></form>. Sin embargo, a diferencia de los estilos en un texto, las marcas sirven para dar estructura a la página web, asignando un significado muy concreto al texto comprendido entre ellas. Por ejemplo la marca <p> sirve para delimitar un párrafo de texto, y hay otras marcas para incrustar imágenes y otros elementos en la página web. Este mecanismo de estructuración de documentos mediante marcas permite procesar (de manera simple) las páginas web utilizando aplicaciones software, como por ejemplo un navegador web. Un navegador no es más que una aplicación software que entiende una serie de protocolos y estándares, entre ellos el HTML, de modo que cuando recibe una página web va interpretando las distintas marcas HTML que contiene. El resultado de este procesamiento será desde modificar la barra de título del navegador para mostrar el título de la página a resaltar el texto con una fuente de letra más grande, o mostrarlo en negrita, etc. El lenguaje XHTML es una reformulación del lenguaje HTML utilizando el metalenguaje llamado XML. Este metalenguaje está pensado para definir otros lenguajes, especificando el conjunto de marcas que se van a utilizar para dar estructura a un documento cualquiera. Como desarrolladores, al usar XML elegimos que marcas definen nuestro lenguaje de marcado, en vez de utilizar un conjunto preestablecido de ellas, como el que tiene HTML. Dado que existen numerosas librerías para el procesamiento de documentos XML, el desarrollo de aplicaciones software (como los navegadores web) se ha visto simplificado. Asimismo, las reglas que definen la estructura de un documento son más simples de modo que los procesadores de documentos necesitan menos muchos menos recursos (ventaja aprovechada por los navegadores web de los dispositivos móviles, por ejemplo).
- 4. Una de las mejoras establecidas con XHTML es la división estricta entre contenido y presentación, cosa que no ocurría en HTML. El dialecto de XHTML llamado XHTML Strict obliga a que la asignación del formato de presentación se haga de manera separada mediante hojas de estilo CSS. Esta separación tiene las siguientes ventajas: La gestión del estilo de todo el sitio web está localizada en un punto concreto: las hojas de estilo. De este modo, es posible modificar todo el estilo del sitio (y mantenerlo coherente siempre) sin tener que editar una a una todas sus páginas. Se pueden tener varios estilos definidos para el mismo sitio web. Podemos ofrecer a los usuarios de nuestro sitio web la posibilidad de seleccionar el conjunto de colores y estilos (tema) del sitio web. Esto también permite dar soporte a la navegación desde múltiples dispositivos, de manera que según donde se tenga que mostrar la página (tamaño de pantalla, tipo de dispositivo...) las páginas se rendericen de una manera u otra (no es lo mismo, por ejemplo, mostrar la web en un navegador que sacarla por impresora). ZVON.org recopila referencias a numerosas especificaciones de tecnologías web, como HTML, CSS, XML, XSLT, etc. IBM DeveloperWorks ofrece una lista de tutoriales y artículos sobre muchas tecnologías en la sección Web Development/Technical Library. DevGuru proporciona información sobre HTML, XHTML, CSS, JavaScript, etc. W3Schools proporciona información sobre HTML, XHTML, CSS (con bastantes ejemplos), JavaScript y PHP. Mozilla Developer Center ofrece estándares de tecnologías web en general y especificaciones particulares para Mozilla Firefox (sobre HTML, DOM, CSS, JavaScript, etc.).
- 5. DZone proporciona noticias, artículos y tutoriales, generalmente con información muy actualizada. Sus RefzCards (chuletas para el desarrollador) son bastante populares y puedes descargarse gratuitamente tras registrarse en la web. Algunos libros recomendados: Molly E. Holzschlag - La biblia de HTML 4. Anaya Multimedia (2000) Michael J. Young - XML paso a paso. McGraw-Hill (2001) CSS Las hojas de estilo en cascada (CascadeStyleSheets o CSS) complementan al XHTML permitiendo definir la presentación de las páginas web. Una hoja de estilo es un conjunto de reglas, de modo que si la condición de la regla es cierta para una etiqueta, entonces las opciones de estilo se aplican al contenido de dicha etiqueta. Entre otras cosas, las reglas CSS permite cambiar fuentes (tipo y tamaño), colores, etc. Una de las características más potentes de las CSS es la capacidad de definir la posición y distribución de las marcas HTML. A través de los modos de posicionamiento y el modelo de caja, las reglas CSS permiten definir la distribución de los contenidos que se van a presentar en una página web, sin necesidad de usar los marcos (frames) de HTML. El uso de las CSS para definir la distribución de las páginas permite la creación de sitios web accesibles a la vez que atractivos. Algunos ejemplos de sitios web que hacen un uso extensivo de las CSS para definir el posicionamiento y el estilo de sus páginas: Universidad Complutense de Madrid y Facultad de Informática. Podéis utilizar las opciones que aparecen en la parte superior de la página para probar cómo se puede ver la página con distintas CSS. Además si tenéis instalado el plugin Web Developer podéis deshabilitar la aplicación de las CSS (para comprobar la diferencia con el HTML simple).
- 6. A ListAppart contiene información relativa al desarrollo de sitios web tanto desde el punto de usabilidad como de accesibilidad. Podéis probar la opción de "vista preliminar" del navegador para que veáis como se imprimiría la página. Quirksmode recopila información relevante sobre el uso de las CSS. Además de tutoriales y ejemplos recopila una guía de compatibilidad (y trucos) de las hojas CSS para los navegadores más populares. Esta información es de gran utilidad para diseñar sitios web de modo que su aspecto sea el mismo en estos navegadores. Molly E. Holzschlag es diseñadora web, y proporciona tutoriales y artículos sobre diseño web y CSS. JavaScript JavaScript permite añadir comportamiento dinámico a tus páginas web. Hasta ahora, las páginas web simplemente eran contenidos estáticos (invariables). Sin embargo, las aplicaciones web actuales modifican sus contenidos según el usuario interactúa con la aplicación. Existen dos posibilidades a la hora de añadir "dinamismo": hacerlo en el lado del servidor o del cliente. El dinamismo en el servidor, requiere de un servidor web inteligente (i.e. con soporte de programación, por ejemplo PHP) que genere páginas web según el usuario interactúe con los formularios y los enlaces que se le presentan. El dinamismo en el lado del cliente requiere un navegador inteligente (i.e. con soporte de programación, por ejemplo JavaScript). Los navegadores actuales permiten ejecutar scripts (guiones) escritos en un lenguaje de programación (habitualmente JavaScript, aunque Internet Explorer también soporte otros como VBScript). Estos scripts representan programas que se ejecutan dentro del navegador que permiten tanto acceder al navegador (modificar el tamaño de la ventana, abrir nuevas ventanas, etc.) como modificar el contenido de la página.
- 7. El lenguaje JavaScript es un lenguaje de programación de propósito general que ha sido adoptado como lenguaje específico para este propósito. Este lenguaje tiene características imperativas (if-then-else, bucles, funciones, etc.) y orientadas a objetos (se pueden crear clases y objetos). Aunque inicialmente fue creado por los desarrolladores del navegador Netscape, en la actualidad existe un estándar internacional llamado ECMAScript que define la sintáxis del lenguaje y un conjunto de objetos predefinidos del lenguaje. Cabe destacar que el lenguaje ActionScript (utilizado para desarrollar aplicaciones en Flash) es una ligera extensión del estándar ECMAScript, de modo que los conocimientos y destrezas que obtengas sobre lo uno te servirán para lo otro. Finalmente, el lenguaje JavaScript/ECMAScript también puede usarse en ciertos casos para comunicarse con el servidor web y para desarrollar plugins/macros para aplicaciones de escritorio. ECMAScript.org proporciona información actualizada sobre las especificaciones de ECMAScript. La aparición del concepto de la Web 2.0 ha promovido el desarrollo de un gran número de librerías y frameworks para JavaScript. Estas librerías simplifican el desarrollo de aplicaciones web que hacen un uso extensivo del JavaScript no solo para modificar el aspecto de las páginas web sino también para comunicarse con el servidor web. Respecto a la modificación del aspecto y contenidos de las páginas web, estas herramientas simplifican el trabajo del desarrollador ofreciendo un amplio conjunto de utilidades. Además facilitan el desarrollo sobre múltiples navegadores ya que tienen en cuenta sus particularidades a la hora de procesar el código JavaScript. Mozilla Firefox tienen numerosos addons que simplifican el desarrollo web en sus distintos aspectos, de los que se aconsejan: DOMInspector, que permite navegar/modificar el árbol DOM de cualquier página cargada en Firefox. Se puede utilizar tanto para depurar páginas web que estemos
- 8. desarrollando, como para aprender como están diseñadas páginas web que consideremos interesantes. WebDeveloper, también llamado la "navaja suiza", puede considerarse la herramienta básica para depurar CSS y para depurar aplicaciones de servidor que utilizan cookies para gestionar las sesiones con los usuarios. Firebug, consola que permite depurar código JavaScript. Existen numerosas liberías que simplifican enormemente el trabajo del programador de JavaScript, de las que se aconsejan: JQuery Prototype Dojo Mochikit Scriptaculous Y posiblemente otras como Mootools o Yahoo UI (YUI) Respecto a la comunicación con el servidor, en la actualidad la técnica más utilizada es AJAX (Asynchronous JavaScript and XML). Esta técnica se basa en la existencia de un objeto JavaScript (XMLHttpRequest) con el que se puede interactuar desde los scripts de la página para poder realizar peticiones a un servidor web (envío y recepción de información). Al igual que en el caso anterior, hay librerías que simplifican el desarrollo de aplicaciones web que utilicen esta técnica ofreciendo un API de programación más simple. Un libro recomendado: Paul McFredies- JavaScript: Edición especial. Pearson Educación - Prentice Hall (2002) Apache El servidor HTTP Apache es un servidor web HTTP de código abierto para múltiples plataformas, que implementa el protocolo HTTP/1.1 y la noción de sitio virtual.
- 9. Apache HTTPD ofrece la distribución oficial del servidor web Apache HTTPD, su código fuente y toda la documentación correspondiente. Apachefriends proporciona paquetes de instalación para Windows (y también Linux) del servidor web Apache, con PHP y base de datos en MySQL, todo junto y de configuración muy sencilla. ONLAMP.com está promocionado por la editorial O'Reilly que trata temas de Apache, seguridad informática y mundo Linux entre otros. Estos ejercicios de instalación y configuración de Apache (PDF) son de utilidad para practicar conceptos básicos sobre servicio de sitios web y seguridad. PHP PHP (PHP Hypertext Pre-processor) es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas. Es usado principalmente en interpretación del lado del servidor (server-side scripting) pero también puede ser utilizado en la creación de otro tipo de aplicaciones. PHP.net permite descargar el motor PHP oficial, y contiene el manual y la documentación de referencia. PHP Extensions and ApplicationRepository (PEAR) es un framework para poder instalar componentes (en código PHP) y aplicaciones que pueden ser tomadas como base para nuestros propios proyectos. PHP ExtensionCommunity Library (PECL) es un repositorio de extensiones del motor PHP (desarrolladas en C) mantenidas por la comunidad de aficionados, pero no directamente incluidas en la distribución oficial.
- 10. PHPRO.org contiene mini-tutoriales cubriendo numerosos aspectos de complejidad media y avanzada sobre PHP. IBM DeveloperWorks Open Source ofrece también numerosos tutoriales sobre la tecnología PHP. ONLAMP.com tiene también una sección de PHP con muchos artículos, incluyendo un conjunto de tutoriales para crear un mini-framework Modelo-Vista-Controlador (MVC) en PHP. Smarty es un motor de plantillas en PHP que simplifica el procesamiento habitual de páginas HTML hecho desde PHP. Los motores de plantillas fueron muy utilizados hasta la aparición de los frameworks PHP, que en la actualidad incluyen estos motores de plantillas. CodeIgniter es uno de los muchos frameworks PHP que surgieron como consecuencia del éxito de deframeworks Java como Struts. CodeIngniter es considerado fácil de usar gracias a las funcionalidades que ofrecen otros como CakePHP, ZendFramework, Seagull y Prado. Un libro recomendado: H.E. Williams y D. Lane: Web Database Applications with PHP and MySQL. O'Reilly (2004) Copyright © 2009 por Federico Peinado ¡Atención, con intención de evitar el spam, el símbolo @ ha sido cambiado por - en las direcciones de correo