Tecnología Web 2.0. MÓDULO IV: Tecnologías y frameworks de desarrollo de software libre

Transcripción

1 Tecnología Web 2.0 MÓDULO IV: Tecnologías y frameworks de desarrollo de software libre

2 Objetivos Identificar servicios web 2.0 Tecnologías subyacentes Aplicaciones mashup Dominar definiciones, términos y conceptos Plataformas de desarrollo RIA Conocimiento de CMS más populares Técnicas de producción de diseño gráfico web Claves para obtener buenos diseños

3 Índice

4 Índice

5 HTML lenguaje de marcado y de presentación no es un lenguaje de programación me permite construir documentos basados en hipertexto (HyperTextMarkupLanguage) que circulan entre un cliente y servidor por medio del protocolo HTTP (HyperTextTransferProtocol) durante un tiempo es más que aceptable pero...

6 HTML Pronto pasa a ser insuficiente No se puede interactuar con el servidor Aparecen los primeros scripts para propocionar dichar interactuación objetivo = desarrollar todo tipo de aplicaciones bajo el medio de internet y aprovechar sus ventajas (en ese momento y hasta ahora, extendiéndose a aplicaciones de escritorio) Comienzo con la creación de intranets...

7 Tecnologías de desarrollo debemos diferenciar entre: tecnologías del lado del cliente (es éste quien renderiza el HTML y ejecuta los scripts) JavaScript, CSS, Flash, Applets, ActiveX,... tecnologías del lado del servidor CGI, ASP, PHP, JSP, ColdFusion,...

8 Tecnologías en el cliente JavaScript muy popular y más utilizado ofrece buena compatibilidad con navegadores paso natural después de XHTML/HTML para elementos de interfaz, distintos efectos y validaciones, aunque admite usos más complejos uso de DOM

9 Tecnologías en el cliente DOM Conjunto de objetos predefinidos que permite acceder a todos los elementos de una página y características del navegador Realmente es una API Enfoque orientado a objetos que permite acceder a una jerarquía de elementos de un documento web Problema: no todos los navegadores utilizan el mismo, dando problemas de compatibilidad Solución: debe considerarse independiente de los scripts y adoptar un modelo estándar único Actualmente se está en el desarrollo de ese estándar

10

11 Tecnologías en el cliente Conociendo y utilizando en profundidad DOM con JavaScript podemos aumentar considerablemente la interactividad de una documento, pero no a nivel de datos DHTML surge con ese concepto y la aparición de nuevos tags (capas). No es un lenguaje sino una capacidad de los navegadores. Dentro del concepto de DHTML también se engloba CSS

12 Tecnologías en el cliente Por lo tanto, DHTML no es más que una mejora de HTML utilizando: CSS para la presentación JavaScript para scripts en cliente DOM representa una jerarquía de objetos en el documento Lightbox JS o Reflection JS

13 Tecnologías en el cliente CSS (Cascade Style Sheet) separación de aspectos de presentación, formato,... añade nuevas prestaciones al XHTML/HTML también para diseño del layout centralizar estos aspectos personalización o diferentes versiones proceso de depuración del diseño fácil con cliente mantenimiento y posterior rediseño

14 Tecnologías en el cliente CSS (Cascade Style Sheet) el modelo en cascada de CSS donde colocar mi CSS (link, style y font) selectores de clase e ID redefinición de etiquetas el modelo de caja de CSS frente a <td> gran esfuerzo PSD2CSS ver enlaces y archivos de interés

15 Tecnologías en el cliente Applets de Java Ofrecen una mayor funcionalidad a nivel de operaciones que JavaScript Es una mini-aplicación Java embebida en el código XHTML/HTML Necesita de una máquina virtual (JVM) Multiplataforma Ver ejemplo

16 Tecnologías en el cliente ActiveX Es el mismo concepto que el de los applets pero basados en tecnología propietaria de Microsoft Uso de objetos que proporciona COM (Component Object Model) En desuso

17 Tecnologías en el cliente Flash también podría entrar en esta categoría pero hablaremos de esta tecnología en un punto aparte

18 Tecnologías en el cliente En resumen, vemos que lo que nos ofrecen este tipo de tecnologías tampoco es suficiente para el desarrollo de aplicaciones comunes y más sofisticadas que sustituyan a las de escritorio

19 Tecnologías en servidor Ejecutan aplicaciones o código en el servidor que generan el XHTML/HTML Acceso a datos, manejo de ficheros,... es decir, ES un lenguaje de programación en toda regla Aparecen y surgen los lenguajes de servidor para transformar el contenido de la web de forma fundamental

20 Tecnologías en servidor Modelo Estático Servidor Cliente Web HTML Internet HTML

21 Tecnologías en servidor Modelo Dinámico Servidor Web Cliente LENGUAJE HTML Internet HTML

22 Tecnologías en servidor CGI tecnología usada durante mucho tiempo uso de Perl (generalmente) para escribir programas ejecutables que respondan a las peticiones del servidor fácil de implementar válidos para múltiples plataformas no apropiado para grandes desarrollos difícil de aprender con muchos problemas de rendimiento (por cada petición del cliente se lanza una instancia de la aplicación > a mayor conexiones menos rendimiento)

23 Tecnologías en servidor ASP (Active Server Pages) construída usando VBScript añade funcionalidades propias a las páginas muy sencillo de aprender simplifica mucho el acceso a BD enfoque híbrido HTML/Script que hace difícil separar la lógica de la presentación lentos (el script se interpreta cada vez que se solicita) ideal para aplicaciones de Intranet

24 Tecnologías en servidor ASP.NET evolución de ASP que permite utilizar cualquiera de los lenguajes.net (C++, C#, VB.NET,...) resuelve casi todos los problemas de rendimiento de ASP (es compilado) más completo en funcionalidad y potente dependiente de la plataforma (al igual que ASP): IIS

25 Tecnologías en servidor JSP (Java Server Pages) concepto similar al de ASP pero con implementaciones Java destaca el concepto de servlet asegura mayor independencia de la plataforma y portabilidad lenguaje más robusto y totalmente orientado a objetos curva de aprendizaje alta y mayor esfuerzo para programar

26 Tecnologías en servidor PHP (PHP Hipertext Preprocessor) mismo enfoque que los anteriores pero con un lenguaje muy similar a C y Perl open source actualmente es de los más utilizados muy fácil de aprender y potente buena conectividad con bases de datos cada vez con más soporte a otras tecnologías (SWF, PDF,...) independiente de la plataforma abundante soporte

27 Tecnologías en servidor Modelo de arquitectura de aplicaciones CLIENT-SIDE PRESENTATION SERVER-SIDE PRESENTATION SERVER LOGIC DATA LOGIC MONITOR TRANSACCIONES MENSAJERÍA

28 Tecnologías en servidor Client-Side Presentation interfaz de usuario basado en HTML, excepto que: compleja interacción con el usuario imposibilidad de separar lógica y presentación Applets y ActiveX sólo en ocasiones puntuales y estrictamente necesarias RIA: caso especial

29 Tecnologías en servidor Server-Side Presentation se encarga de la generación dinámica del código HTML Transformación de la información a un esquema de representación adecuado al terminal o dispositivo cliente Principio: embeber código procedimental dentro del código HTML

30 Tecnologías en servidor Data Logic lógica de la aplicación que se ejecuta dentro de la Base de Datos, como procedimientos almacenados No permiten implementar toda la lógica de la aplicación de un sistema pero sí liberan carga Programación de acciones para cuando se añada, elimine, actualice o consulte un registro o conjunto de ellos

31 Tecnologías en servidor Server-Side Logic objetivo: que los programadores sólo se centren en definir e implementar la interfaz de usuario implementar la lógica de negocio Modelos de componentes distribuídos como COM+ y EJB La lógica a implementar básicamente se centra en: persistencia de la BD seguridad de acceso transacciones Relacionado directamente con el concepto de Servidores de Aplicaciones

32 Tecnologías en servidor Monitores de transacciones ejecución de componentes en el servidor que nos garantiza una integridad transaccional = todas las tareas de una operación compleja deben ejecutarse satifactoriamente o se restituye el estado original pagos, transacciones complejas con bases de datos,... Mensajería para crear aplicaciones que se comunican sobre líneas lentas o poco seguras

33 Tecnologías en servidor ASP JSP PHP aprendizaje medio mayor dificultad fácil de aprender demasiado dependiente de Microsoft comercial mantenimiento regular independiente de plataforma grandes proyectos buen mantenimiento potente proyectos de todo tipo buen soporte y comunidad todas tienen el mismo problema: separar la lógica de la presentación y los estándares

34 Tecnologías en servidor Modelo Vista Controlador nos ayuda a separar la lógica de programación de la presentación, o lo que es lo mismo: mantener separados el código del lenguaje del servidor y el código HTML este enfoque permite un mantenimiento mucho más accesible y práctico ya que: el diseñador sólo necesita manejar HTML y etiquetas vinculadas a datos el programador se centra en el código de la lógica de la aplicación se centralizan las clases y código común

35 Tecnologías en servidor Modelo Vista Controlador cómo se desarrolla con este patrón: dificultad de la separación uso de herramientas de generación automática que facilitan el proceso, aunque su mantenimiento posterior es bastante más complicado el objetivo es disponer de archivos separados para cada uno de los procesos/documentos

36 Tecnologías en servidor Modelo Vista Controlador Para cada una de las funcionalidades del sistema se obtienen dos/tres archivos:.html: presentación de los datos con etiquetas de enlace a datos.php: lógica de la aplicación.php: lógica que se encarga de enlazar clases y asociar todas las acciones a los eventos Agrupar clases generales, conexiones a base de datos, gestión del idioma, sesiones,...

37 Tecnologías en servidor Servidores de aplicaciones conectan usuario con datos de la compañía mediante una interfaz de usuario gráfica (generalmente basada en web) entre el front-end y back-end de la empresa proporciona la lógica de negocio para un programa de aplicación e integración con otros sistemas de la empresa

38 Tecnologías en servidor ofrece: operaciones sofisticadas de acceso a datos y sistemas de información corporativos gestión de la seguridad, balanceo de carga,... inconvenientes: más difíciles de programar costes superiores muy complejo para aplicaciones departamentales para proyectos grandes con necesidades de escalabilidad y disponibilidad máxima

39 Tecnologías en servidor Servidor Web Servidor de Aplicaciones ERP BD lógica de negocio sistemas heredados

40 Tecnologías en servidor

41 Conclusiones Se consiguen grandes avances en la programación a nivel de aplicaciones basada en la web, sobre todo a nivel de manejo de datos Asignaturas pendientes: presentación de datos (tablas, estructuras muy repetitivas, tipografías comunes y toscas, poca flexibilidad en los cambios de outputs de datos,...) procesamiento cliente-servidor pesado introducir estructuras y lenguajes más interesantes, ricos, que aporten valor,...

42 Conclusiones Microformatos CSS Ajax Formatos propietarios como Flash Todo esto impulsa el desarrollo de aplicaciones etiquetadas como web 2.0 (junto con APIS) Se puede ver como símil entre las tecnologías y los conceptos web1.0 y web2.0

43 Conclusiones

44 Microformato Planteamiento simple. Acoplamientos ligeros Forma simple de agregar significado semántico a un contenido legible por un humano y que para una máquina tan solo es texto plano. Para usar en XHTML para manipular la información. Permiten la representación de muchos tipos de información (eventos, direcciones, ubicaciones,...)

45 Microformato Formalizar distintas estructuras y que sean abiertas Zona de discusión y nuevas propuestas desde microformats.org

46 Microformato <p> Las aves anidaron en 52.48,-1.89 </p> Las aves anidaron en <span class="geo"> <span class="latitude">52.48</span>, <span class="longitude">-1.89</span> </span>

47 Microformato <div> <div>juan Pérez</div> <div>el Ejemplo S. A.</div> <div> </div> <a href=" </div> con marcado hcard pasaría a: <div class="vcard"> <div class="fn">juan Pérez</div> <div class="org">el Ejemplo S. A.</div> <div class="tel"> </div> <a class="url" href=" </a> </div>

48 Microformato Microformatos existentes: hatom hcalendar hcard hreview xfolk... Tengo significado, entonces tengo microformato

49 RSS Formato para depositar y recibir información de tipo noticias Para sitios que se actualizan con frecuencia (blogs, diarios, noticias,...) Se puede consultar la información sin tener que visitar el sitio Sindicación de contenidos = suscribirse a una fuente RSS.

50 RSS Relación con XML, Atom, RDF,... (explic.) RDF permite añadir significado a las páginas por medio de unos tripletes de la forma recursopropiedad-valor. sublenguaje de XML uno de los pilares de la web semántica

51 RSS PERMITE CREAR ILIMITADOS LENGUAJES define estructuras, y no etiquetas XML HTML plano, sin significado etiquetas predefinidas... SURGE COMO ASCENDIENTE da lugar a sublenguajes XHTML: adaptación de HTML a XML 1 RSS: sublenguaje para distribución de noticias tiene varias versiones: RSS 0.9 y 1.0 : RDF Site Summary (impl. de RDF) RSS 0.91: Rich Site Summary RSS 2.0: Really Simple Sindication Atom: sublenguaje para lo mismo que RSS, pero no es una versión de RSS. El objetivo es el mismo, pero más completo y mejor 3 2

52 XHTML DTD (definición de tipo de documento) Sección corta de código (DOCTYPE) Tiene que ver con el cumplimiento de estándares Le dice al navegador como debe tratar la página Por qué incluirla? para acelerar la carga en función del dispositivo la ausencia de DTD puede generar inconsistencias al interpretar el CSS u otro código

53 XHTML DTD (definición de tipo de documento) qué DTD escoger? XHTML 1.0 Transactional Diferencias más importantes respecto HTML 4.01 todas las etiquetas deben estar en minúsculas anidamiento de etiquetas correcto manejadores de evento en minúsculas (onmouseover) todos los elementos deben tener su etiqueta de cierre (</p>) los elementos que no tienen etiqueta de cierre terminan en /> todos los atributos entre comillas dobles (height= 100 )

54 XHTML DTD (definición de tipo de documento) Diferencias más importantes respecto HTML 4.01 caracteres especiales deben representarse por sus entidades correspondientes (& = &) JavaScript y estilos no deben estar rodeados de etiquetas de comentario HTML, ya que pueden ser ignorados Pregunta: qué bien le hace esto a mi sitio o a mi aplicación? nada. Todos los navegadores de hoy interpretan igual HTML Es una mera transición, un ejercicio de aprendizaje, pero conveniente hasta que llegue XHTML 2.0

55 XHTML Algunos DTD XHTML Mobile 1.0 (subconjunto para disp. mov.) HTML 4.01 de transición (menos estricto) HTML 4.01 estricto (no se va a utilizar XHTML) XHTML 1.0 estricto (excluye elementos deprec.) XHTML 1.0 de transición (permite el uso de elementos depreciados pero aplicando reglaje estricto de XHTML. La opción más común) XHTML 1.1 (muy estricto y exige MIME adecuado)

56 Conclusiones Ahora tengo potencia de datos y un modelo de enriquecer o transmitir valor con el contenido Falta otro empujón : interfaces más ricos reducir el procesamiento pesado de petición cliente-servidor

57 Ajax Asynchronous JavaScript And XML No es un lenguaje de programación Varias tecnologías unidas de manera muy potente: XHTML y CSS (presentación basada en estándares) DOM (visualización dinámica e interacción) XML y XSLT (intercambio y manipulación de datos) XMLHttpRequest (recuperación de datos asínc.) JavaScript que lo une todo

58 Ajax Permite crear aplicaciones con respuestas similares a las de aplicaciones de escritorio Ofrecer respuestas en tiempo real a peticiones de usuario Permite la comunicación entre página activa y servidor y luego actualizar contenido sin tener que recargar la página Agiliza la conexión entre usuario-navegador y aporta nuevas experiencias de interfaz en XHTML

59 Ajax Para un usuario final, el producto es la interfaz Uno de los componentes tecnológicos fundamentales de web 2.0, pero no quiere decir que algo implementado usando AJAX sea web 2.0 Ejemplos de uso: búsquedas, procesamiento de formularios, actualizaciones de datos en la página,... La clave: el objeto asíncrono en segundo plano entre cliente-servidor

60 Ajax

61 Ajax

62 Ajax Ajax: a new approach to web applications, Jesse James Garret, Feb 2005 cargo y renderizo la página. me mantengo mientras otros scripts en background van al servidor a buscar los datos para la actualización de la página. sólo mostrando/ocultando partes no hay el típico arranco-freno-arranco-freno...

63 Ajax Algunos ejemplos: Google Suggest Zuggest Reflection.js, Lightbox Netvibes

64 Ajax Frameworks: Rico jquery Script.aculo.us Prototype Dojo Toolkit Backbase, Aptana como IDEs Spry de Adobe

65 Flash Historia Basado en un motor de reproducción como plugin (Flash Player) SWF Format Múltiples usos (multimedia, animación, programación, videojuegos,...) Total libertad para diseñar Inconveniente: acceso a datos y otras funciones (streaming en servidor,...)

66 Flash Total libertad para crear Uso de scripts de terceros para aplicaciones de datos Banners, video (flv),... hoy es casi omnipresente ActionScript 3.0 muy potente Permitió el primer acercamiento al concepto de RIA Ver ejemplos de sus aplicaciones

67 Flash vs Ajax Lo bueno de Ajax Basada en XHTML, fácilemente estandarizable Accesible Integración con CSS Ligereza Javascript Motores de búsqueda

68 Flash vs Ajax Lo malo de Ajax El usuario puede haber deshabilitado el Javascript en el navegador Se depende de un objeto propiedad de Microsoft para las comunicaciones asíncronas. No es tan ligero como parece a primera vista Por mucho que se intente, el resultado final no es comparable al de una web en Flash.

69 Flash vs Ajax Lo bueno de Flash Player casi universal Calidad visual La única forma solvente de incluir animaciones, contenido interactivo, vídeo, audio,... Lenguaje de programación de alto nivel orientado a objetos, aunque también sea interpretado en el player

70 Flash vs Ajax Lo malo de Flash plug-in, propietario abusar de efectos y técnicas innecesarias integración con el botón de volver del navegador no es nada sencilla Poco accesible

71 Flex Elevar el concepto de RIA un paso más Calidad visual y mayor interacción junto con acceso a datos potente MXML para definición de interfaz ActionScript 3.0 para la lógica Bibliotecas de datos Gran interactividad Ventaja: carga en un player.

72 Flex Ejemplos de usos: datos gráficos y estadísticas en general, aplicaciones de cualquier tipo Modelo de programación diferente, al principio es complejo... siguiente paso...

73 AIR Objetivo: llevar las aplicaciones web al escritorio no es un poco contradictorio? Consiste en una máquina virtual que permite aprovechar los desarrollos realizados y ponerlos en el escritorio, sin necesidad de navegador y en algunos casos sin servidor Ventaja: no hay que hacer dos desarrollos distintos Desarrollas para web, entonces desarrollas para escritorio

74 AIR Ver catálogo de aplicaciones y desarrollos

75 HTML5+CSS3 Qué hay de nuevo? Algún ejemplo: Sketchpad Harmony

76 Mashups Aplicaciones que integran distintos contenidos y servicios procedentes de más de una fuente con el objetivo de crear algo nuevo y más rico Los primeros y más conocidos: basados en mapas de Google Otros: basados en fotografías, noticias, compras, vídeos, viajes,... Uno de los primeros y que refleja muy bien el concepto: HousingMaps

77 Mashups API (Application Programming Interface) Conjunto de funciones o métodos que el desarrollador de una aplicación ofrece a otros para que puedan interactuar con la aplicación original No hay que programar todo desde cero Flickr, Google, YouTube, ebay,... ver listado de proveedores de APIS

78 Tecnologías de desarrollo Qué será lo próximo? Las API van a ser muy importantes A nivel de interfaz: Catalyst Posiblemente, dentro de poco las aplicaciones web no serán tan similares

79 CMS cuándo emplearlos? ventajas e inconvenientes Joomla!, Wordpress, oscommerce, Drupal, Claroline, Moodle, Typo3, Movable Type, phpbb, Magento... máxima: no desarrollar nada que ya esté implementado y sea bueno, personalizable,... Recomendables cuando hay gran mantenimiento