Your SlideShare is downloading. ×
Proyecto hacia la web 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Proyecto hacia la web 3

3,948
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,948
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CONTENIDOSLISTA DE FIGURAS .............................................................................................................................. ixLISTA DE TABLAS .............................................................................................................................. xiiiLISTA DE CÓDIGOS ............................................................................................................................ xvLISTA DE ACRÓNIMOS .................................................................................................................... xviiPREFACIO ............................................................................................................................................ xxiCapitulo 1: Introducción ........................................................................................................................... 1 1.1 OBJETIVOS ................................................................................................................................... 2 1.2 REQUISITOS.................................................................................................................................. 2Capitulo 2: Navegadores web ................................................................................................................... 3 2.1 PAPEL DE LOS NAVEGADORES DENTRO DE LA WEB ....................................................................... 3 2.2 HISTORIA DE LOS NAVEGADORES ................................................................................................. 4 2.3 MOTORES DE RENDERIZADO ........................................................................................................ 6 2.3.1 Webkit ................................................................................................................................... 7 2.3.2 Gecko.................................................................................................................................... 8 2.4 MOZILLA FIREFOX ....................................................................................................................... 9 2.4.1 Ventajas e Inconvenientes..................................................................................................... 9 2.5 GOOGLE CHROME ...................................................................................................................... 10 2.5.1 Ventajas e Inconvenientes................................................................................................... 10 2.6 SAFARI ....................................................................................................................................... 11 2.6.1 Ventajas e Inconvenientes................................................................................................... 11 2.7 OPERA ........................................................................................................................................ 12 2.7.1 Ventajas e Inconvenientes................................................................................................... 12 2.8 INTERNET EXPLORER ................................................................................................................. 12 2.8.1 Ventajas e Inconvenientes................................................................................................... 13 2.9 COMPARATIVAS ENTRE IE, OPERA, SAFARI, CHROME Y FIREFOX .............................................. 13 2.10 TEST ACID3 .............................................................................................................................. 16 2.11 CONCLUSIONES ........................................................................................................................ 17 2.11.1 Tendencia .......................................................................................................................... 18Capitulo 3: Tecnologías de desarrollo .................................................................................................... 21 3.1 TECNOLOGÍAS PARA EL DESARROLLO DE APLICACIONES DESDE EL LADO DEL CLIENTE............. 21 3.1.1 HTML / XHTML ................................................................................................................. 22 3.1.1.1 Uso ............................................................................................................................ 22 3.1.1.2 Sintaxis ...................................................................................................................... 23 3.1.1.3 Ejemplo ..................................................................................................................... 23 3.1.1.4 Ventajas ..................................................................................................................... 24 3.1.1.5 Desventajas................................................................................................................ 24 3.1.1.6 Enlace a la API .......................................................................................................... 25 3.1.2 CSS ..................................................................................................................................... 25 3.1.2.1 Uso ............................................................................................................................ 25 3.1.2.2 Sintaxis ...................................................................................................................... 25 3.1.2.3 Ejemplo ..................................................................................................................... 26 3.1.2.4 Ventajas ..................................................................................................................... 26 3.1.2.5 Desventajas................................................................................................................ 27 3.1.2.6 Enlace a la API .......................................................................................................... 27 3.1.3 JavaScript ........................................................................................................................... 27 3.1.3.1 Uso ............................................................................................................................ 27 3.1.3.2 Sintaxis ...................................................................................................................... 28 3.1.3.3 Ejemplo ..................................................................................................................... 28 3.1.3.4 Ventajas ..................................................................................................................... 29 3.1.3.5 Desventajas................................................................................................................ 29 i
  • 2. 3.1.3.6 Enlace a la API .......................................................................................................... 29 3.1.4 AJAX ................................................................................................................................... 29 3.1.4.1 Uso ............................................................................................................................ 29 3.1.4.2 Ejemplo ..................................................................................................................... 30 3.1.4.3 Ventajas ..................................................................................................................... 32 3.1.4.4 Desventajas................................................................................................................ 32 3.1.4.5 Enlace a la API .......................................................................................................... 32 3.1.5 jQuery................................................................................................................................. 32 3.1.5.1 Uso ............................................................................................................................ 32 3.1.5.2 Sintaxis ...................................................................................................................... 33 3.1.5.3 Ventajas ..................................................................................................................... 34 3.1.5.4 Desventajas................................................................................................................ 34 3.1.5.5 Enlace a la API .......................................................................................................... 34 3.2 TECNOLOGÍAS PARA EL DESARROLLO DE APLICACIONES DESDE EL LADO DEL SERVIDOR. ......... 34 3.2.1 PHP .................................................................................................................................... 34 3.2.1.1 Uso ............................................................................................................................ 35 3.2.1.2 Sintaxis ...................................................................................................................... 35 3.2.1.3 Ejemplo ..................................................................................................................... 35 3.2.1.4 Ventajas ..................................................................................................................... 36 3.2.1.5 Desventajas................................................................................................................ 37 3.2.1.6 Enlace a la API .......................................................................................................... 37 3.2.2 JSP...................................................................................................................................... 37 3.2.2.1 Uso ............................................................................................................................ 38 3.2.2.2 Sintaxis ...................................................................................................................... 38 3.2.2.3 Ejemplo ..................................................................................................................... 38 3.2.2.4 Ventajas ..................................................................................................................... 41 3.2.2.5 Desventajas................................................................................................................ 41 3.2.2.6 Enlace a la API .......................................................................................................... 41 3.2.3 Python ................................................................................................................................ 41 3.2.3.1 Uso ............................................................................................................................ 41 3.2.3.2 Sintaxis ...................................................................................................................... 42 3.2.3.3 Ejemplo ..................................................................................................................... 42 3.2.3.4 Ventajas ..................................................................................................................... 43 3.2.3.5 Desventajas................................................................................................................ 43 3.2.3.6 Enlace a la API .......................................................................................................... 43 3.3 CONCLUSIONES .......................................................................................................................... 43 3.3.1 Tendencia............................................................................................................................ 44Capitulo 4: Gestores de contenidos ........................................................................................................ 47 4.1 CARACTERIZACIÓN DE LOS GESTORES DE CONTENIDOS ............................................................ 48 4.2 MÓDULOS DE LOS GESTORES DE CONTENIDOS ........................................................................... 49 4.2.1 Creación y edición de contenidos....................................................................................... 50 4.2.1.1 Plantillas .................................................................................................................... 50 4.2.1.2 Gestión documental ................................................................................................... 51 4.2.1.3 Contenidos complementarios .................................................................................... 51 4.2.2 Gestión de validación y distribución de contenidos ........................................................... 51 4.2.3 Publicación de contenidos ................................................................................................. 52 4.2.4 Gestión del ciclo de vida de los contenidos........................................................................ 53 4.2.5 Portal manager .................................................................................................................. 54 4.2.6 Integración con datos de negocio ...................................................................................... 54 4.2.7 Herramientas de comunicación.......................................................................................... 55 4.2.8 Arquitectura general .......................................................................................................... 55Capitulo 5: Aplicaciones .......................................................................................................................... 57 5.1 ANALIZADORES.......................................................................................................................... 58 5.1.1 Google Analytics ............................................................................................................... 59 5.1.2 Características de Google Analytics .................................................................................. 59 5.1.2.1 Estadísticas sobre la inversión publicitaria................................................................ 59
  • 3. 5.1.2.2 Seguimiento de canales de tráfico y elementos multimedia ...................................... 60 5.1.2.3 Informes personalizados para estadísticas específicas .............................................. 61 5.1.2.4 Gestión para compartir y comunicar la información ................................................. 61 5.1.2.5 Consulta de datos ...................................................................................................... 615.2 BLOGS ........................................................................................................................................ 61 5.2.1 Blogger ............................................................................................................................... 62 5.2.2 Características de Blogger................................................................................................. 62 5.2.2.1 Diseño personalizado ................................................................................................ 62 5.2.2.2 Interfaz fácil de usar .................................................................................................. 63 5.2.2.3 Añadir fotografías y vídeos ....................................................................................... 63 5.2.2.4 Posibilidades económicas con AdSense .................................................................... 63 5.2.2.5 Ampliar el número de seguidores .............................................................................. 64 5.2.2.6 Comentarios de nuestros lectores .............................................................................. 64 5.2.2.7 Notificaciones de entrada nueva................................................................................ 64 5.2.2.8 Un único identificado de usuario (ID) ....................................................................... 64 5.2.2.9 Múltiples idiomas ...................................................................................................... 64 5.2.2.10 Páginas .................................................................................................................... 64 5.2.2.11 Versatilidad para publicar entradas .......................................................................... 64 5.2.2.12 Múltiples usuarios para contribuir ........................................................................... 65 5.2.2.13 Plugins ..................................................................................................................... 655.3 CAPTCHAS .............................................................................................................................. 65 5.3.1 reCAPTCHA ....................................................................................................................... 65 5.3.2 Características de reCAPTCHA......................................................................................... 66 5.3.2.1 Anti spam .................................................................................................................. 66 5.3.2.2 Digitalización de libros ............................................................................................. 665.4 GESTORES DE CONTENIDO ......................................................................................................... 66 5.4.1 WordPress ........................................................................................................................... 68 5.4.2 Características de WordPress ............................................................................................ 68 5.4.2.1 Lugar de instalación .................................................................................................. 68 5.4.2.2 Núcleo Flexible ........................................................................................................ 68 5.4.2.3 Fechas UTC ............................................................................................................... 68 5.4.2.4 Compresión gzip ....................................................................................................... 68 5.4.2.5 Administración de usuarios ...................................................................................... 68 5.4.2.6 Perfiles de usuario .................................................................................................... 69 5.4.2.7 Fácil instalación y actualización................................................................................ 69 5.4.2.8 Generación dinámica de páginas ............................................................................... 70 5.4.2.9 Idiomas ...................................................................................................................... 70 5.4.2.10 Feeds ...................................................................................................................... 70 5.4.2.11 Links permanentes ................................................................................................... 70 5.4.2.12 Comunicación entre portales ................................................................................... 70 5.4.2.13 Temas ...................................................................................................................... 70 5.4.2.14 Diseño vía plantillas ................................................................................................ 70 5.4.2.15 Editor de archivos y plantillas ................................................................................. 70 5.4.2.16 Etiquetas de plantillas.............................................................................................. 71 5.4.2.17 Plugins ..................................................................................................................... 71 5.4.2.18 Protección con contraseña ....................................................................................... 71 5.4.2.19 Mensajes programados ............................................................................................ 71 5.4.2.20 Mensajes con múltiples páginas .............................................................................. 71 5.4.2.21 Carga de archivos/imágenes ................................................................................... 71 5.4.2.22 Categorías ............................................................................................................... 71 5.4.2.23 Salvar borradores y autoguardado ........................................................................... 71 5.4.2.24 Previsualizar entradas ............................................................................................. 71 5.4.2.25 Herramientas de actualización................................................................................. 715.5 SISTEMAS DE COMENTARIO ........................................................................................................ 71 5.5.1 Disqus................................................................................................................................. 72 5.5.2 Características de Disqus .................................................................................................. 73 5.5.2.1 Conexión entre conversaciones ................................................................................. 73
  • 4. 5.5.2.2 Identidad del comentarista......................................................................................... 73 5.5.2.3 Difundir discursiones ................................................................................................ 73 5.5.2.4 Potencia y facilidad de gestión .................................................................................. 73 5.5.2.5 Anti-Spam ................................................................................................................. 73 5.5.2.6 Importancia de los comentaristas .............................................................................. 735.6 ADMINISTRADORES DE BASES DE DATOS.................................................................................... 73 5.6.1 phpMyAdmin ...................................................................................................................... 74 5.6.2 Características de phpMyAdmin ........................................................................................ 75 5.6.2.1 Compatibilidad con MySQL. .................................................................................... 75 5.6.2.2 Mantenimiento .......................................................................................................... 75 5.6.2.3 Importar contenido de la base de datos ..................................................................... 75 5.6.2.4 Exportar contenido de la base de datos ..................................................................... 75 5.6.2.5 Búsquedas ................................................................................................................. 75 5.6.2.6 Formatos .................................................................................................................... 755.7 HERRAMIENTAS DE DOCUMENTACIÓN ....................................................................................... 75 5.7.1 phpDocumentor .................................................................................................................. 76 5.7.2 Características de phpDocumentor.................................................................................... 76 5.7.2.1 Amplia gama de formatos.......................................................................................... 76 5.7.2.2 Versatilidad de acceso ............................................................................................... 76 5.7.2.3 Soporta JavaDoc........................................................................................................ 76 5.7.2.4 Edición ...................................................................................................................... 765.8 EDITORES ................................................................................................................................... 77 5.8.1 Dreamweaver ..................................................................................................................... 77 5.8.2 Características de Dreamweaver ....................................................................................... 77 5.8.2.1 Páginas accesibles ..................................................................................................... 77 5.8.2.2 Compatibilidad con CMS integrada .......................................................................... 77 5.8.2.3 Inspección de CSS..................................................................................................... 78 5.8.2.4 Sugerencias de código de clase personalizada de PHP ............................................. 78 5.8.2.5 Compatibilidad con Subversion Mejorada ................................................................ 785.9 SCRIPTS PARA FUENTES DE TEXTO ............................................................................................. 78 5.9.1 Cufón .................................................................................................................................. 79 5.9.2 Características de Cufón .................................................................................................... 80 5.9.2.1 Reemplazo de texto ................................................................................................... 80 5.9.2.2 No necesita ningún plugin ......................................................................................... 80 5.9.2.3 Compatible y fácil ..................................................................................................... 80 5.9.2.4 Rápido ....................................................................................................................... 80 5.9.2.5 Accesibilidad ............................................................................................................. 805.10 PANELES PARA HOSPEDAJE WEB ............................................................................................... 80 5.10.1 cPanel ............................................................................................................................... 81 5.10.2 Características de cPanel ................................................................................................ 81 5.10.2.1 Creación directa y resguardo de nuestra web ......................................................... 81 5.10.2.2 Copias de seguridad ................................................................................................ 81 5.10.2.3 Análisis y estadísticas .............................................................................................. 81 5.10.2.4 Seguridad................................................................................................................. 81 5.10.2.5 Facilidades para desarrolladores ............................................................................. 81 5.10.2.6 Multilingüe .............................................................................................................. 815.11 SEGUIDORES DE INCIDENCIAS .................................................................................................. 83 5.11.1 Get Satisfaction ................................................................................................................ 83 5.11.2 Características de Get Satisfaction .................................................................................. 83 5.11.2.1 Moderación.............................................................................................................. 83 5.11.2.2 Control de nuestros servicios web y de la comunidad interesada en nuestros servicios................................................................................................................................. 84 5.11.2.3 Widgets .................................................................................................................... 85 5.11.2.4 Opciones de integración .......................................................................................... 85 5.11.2.5 Soporte..................................................................................................................... 855.12 FOROS ...................................................................................................................................... 85 5.12.1 vBulletin ........................................................................................................................... 86
  • 5. 5.12.2 Características de vBulletin ............................................................................................. 87 5.12.2.1 Web y base de datos independientes........................................................................ 87 5.12.2.2 Administración ........................................................................................................ 87 5.12.2.3 Edición y personalización ....................................................................................... 87 5.12.2.4 Jerarquía ilimitada ................................................................................................... 87 5.12.2.5 Miembros ................................................................................................................ 875.13 WIKIS ....................................................................................................................................... 87 5.13.1 MediaWiki ........................................................................................................................ 88 5.13.2 Características de MediaWiki .......................................................................................... 88 5.13.2.1 Nombres, títulos y encabezados .............................................................................. 88 5.13.2.2 Páginas de discusión................................................................................................ 88 5.13.2.3 Formulas .................................................................................................................. 88 5.13.2.4 Plantillas y temas ..................................................................................................... 89 5.13.2.5 Plugins ..................................................................................................................... 89 5.13.2.6 Usuarios y páginas ................................................................................................. 89 5.13.2.7 Lineas de tiempos y categorías ................................................................................ 895.14 GALERÍAS DE IMÁGENES .......................................................................................................... 89 5.14.1 Coopermine ...................................................................................................................... 89 5.14.2 Características de Coopermine ........................................................................................ 91 5.14.2.1 Usuarios y gestión de imágenes .............................................................................. 91 5.14.2.2 Aspecto visual ......................................................................................................... 91 5.14.2.3 Optimización del código ......................................................................................... 915.15 VISUALIZADORES DE VÍDEO ..................................................................................................... 91 5.15.1 YouTube ............................................................................................................................ 92 5.15.2 Características de YouTube .............................................................................................. 92 5.15.2.1 Inserción de vídeo ................................................................................................... 92 5.15.2.2 Vídeos públicos o privados ..................................................................................... 92 5.15.2.3 Suscripciones........................................................................................................... 92 5.15.2.4 Grabar de cámara web ............................................................................................. 92 5.15.2.5 Cuenta de usuario .................................................................................................... 93 5.15.2.6 Compartir actividad ................................................................................................. 93 5.15.2.7 Canales .................................................................................................................... 93 5.15.2.8 Editor de vídeo ........................................................................................................ 935.16 WIDGETS .................................................................................................................................. 93 5.16.1 AddThis............................................................................................................................. 94 5.16.2 Características de AddThis .............................................................................................. 94 5.16.2.1 Compartición inteligente ......................................................................................... 94 5.16.2.2 Gran cantidad de servicios para compartir .............................................................. 94 5.16.2.3 Multilingüe .............................................................................................................. 94 5.16.2.4 Privacidad y Seguridad............................................................................................ 94 5.16.2.5 Interfaz personalizable ............................................................................................ 94 5.16.2.6 Estadísticas .............................................................................................................. 94 5.16.2.7 Integración con Flash .............................................................................................. 955.17 ESHOPS .................................................................................................................................... 95 5.17.1 Magento............................................................................................................................ 95 5.17.2 Características de Magento ............................................................................................. 95 5.17.2.1 Tienda online con añadidos ..................................................................................... 95 5.17.2.2 Búsqueda y sindicación ........................................................................................... 97 5.17.2.3 Tarifas ...................................................................................................................... 97 5.17.2.4 Pago ......................................................................................................................... 97 5.17.2.5 Presentación y estadísticas ...................................................................................... 97 5.17.2.6 Web Services API .................................................................................................... 97 5.17.2.7 Productos virtuales .................................................................................................. 97 5.17.2.8 Opciones de productos definidas por clientes ......................................................... 97 5.17.2.9 Paquetes de Productos ............................................................................................. 97 5.17.2.10 Soporte de impuestos............................................................................................. 975.18 CONCLUSIONES ........................................................................................................................ 97
  • 6. 5.18.1 Aplicaciones más usadas por categoría ........................................................................... 97 5.18.2 Aplicaciones más usadas en general ................................................................................ 98 5.18.3 Tendencia.......................................................................................................................... 99 5.18.3.1 Tendencia al alza ..................................................................................................... 99 5.18.3.2 Tendencia a mantenerse ........................................................................................... 99 5.18.3.3 Tendencia al declive ................................................................................................ 99Capitulo 6: Implementación ................................................................................................................. 101 6.1 ACCESIBILIDAD ........................................................................................................................ 103 6.2 ENTORNO Y HERRAMIENTAS DE TRABAJO ................................................................................ 103 6.2.1 Tecnologías....................................................................................................................... 103 6.2.2 Editor web ........................................................................................................................ 104 6.2.3 Aplicaciones ..................................................................................................................... 104 6.2.4 Navegadores ..................................................................................................................... 104 6.2.5 Servidor local ................................................................................................................... 105 6.2.6 Depurador ........................................................................................................................ 105 6.2.7 Complementos .................................................................................................................. 106 6.3 ARCHIVOS Y CARPETAS DE UNA WEB ....................................................................................... 108 6.4 MAPA CONCEPTUAL DE UNA WEB ............................................................................................. 109 6.5 PRE-MAQUETACIÓN ................................................................................................................. 110 6.5.1 Propuestas gráficas .......................................................................................................... 112 6.5.2 Distribución del contenido ............................................................................................... 112 6.5.3 Dibujo de la web en un editor de imágenes ..................................................................... 114 6.6 MAQUETACIÓN ........................................................................................................................ 114 6.6.1 Cimientos.......................................................................................................................... 114 6.6.2 Cuerpo base ..................................................................................................................... 115 6.6.3 Añadiendo más detalles al estilo de la web ...................................................................... 116 6.6.3.1 Incluir CSS en el mismo documento HTML ........................................................... 117 6.6.3.2 Definir CSS en un archivo externo.......................................................................... 117 6.6.3.3 Incluir CSS en los elementos HTML ...................................................................... 117 6.7 INTERACCIÓN, ANIMACIÓN Y EFECTOS (JS).............................................................................. 119 6.7.1 Fecha para el copyright ................................................................................................... 119 6.7.2 Efecto de iluminado y apagado para los idiomas ............................................................ 120 6.7.3 Ajuste de la página para pantallas pequeñas................................................................... 120 6.7.4 Sustitución de imagen por animación GIF....................................................................... 121 6.7.5 Navegación animada en el menú...................................................................................... 122 6.8 CONTENIDO DINÁMICO ............................................................................................................ 122 6.8.1 Formulario de contacto .................................................................................................... 123 6.9 OPTIMIZANDO LA WEB ............................................................................................................. 124 6.9.1 Eliminar enlaces rotos...................................................................................................... 124 6.9.2 Eliminar CSS desde JS ..................................................................................................... 124 6.9.3 Combinar CSS externo ..................................................................................................... 124 6.9.4 Combinar JS externo ........................................................................................................ 124 6.9.5 JS no necesario al final del sitio ...................................................................................... 124 6.9.6 Activar compresión........................................................................................................... 125 6.9.7 Indicar fecha de expiración.............................................................................................. 126 6.9.8 Cache en cabeceras .......................................................................................................... 126 6.9.9 Compactar CSS ................................................................................................................ 126 6.9.10 Compactar HTML .......................................................................................................... 128 6.9.11 Compactar JS ................................................................................................................. 128 6.9.12 Minimizar el tamaño de las respuestas .......................................................................... 129 6.9.13 Reducir DNS................................................................................................................... 130 6.9.14 Minimizar redirecciones ................................................................................................. 130 6.9.15 Optimizar imágenes........................................................................................................ 130 6.9.16 Optimizar el orden del CSS y el JS ................................................................................. 130 6.9.17 Descargas paralelas ....................................................................................................... 131 6.9.18 CSS en la cabecera ......................................................................................................... 131 6.9.19 Eliminar CSS no usado .................................................................................................. 131
  • 7. 6.9.20 URL única ...................................................................................................................... 131 6.9.21 Escalado adecuado para las imágenes .......................................................................... 131 6.9.22 Solo cookies en donde sea necesario ............................................................................. 131 6.9.23 Set de caracteres en la cabecera .................................................................................... 132 6.9.24 Especificar el tamaño de las imágenes .......................................................................... 132 6.9.25 Selectores CSS eficientes ................................................................................................ 132 6.10 VERIFICANDO LAS TECNOLOGÍAS .......................................................................................... 132 6.10.1 Verificación del HTML ................................................................................................... 132 6.10.2 Verificación del CSS ....................................................................................................... 134 6.11 DANDO DE ALTA NUESTRO SITIO EN LOS BUSCADORES .......................................................... 135 6.12 VISIBILIDAD ........................................................................................................................... 136 6.12.1 Información del sitio ..................................................................................................... 137 6.12.1.1 Sitemap .................................................................................................................. 138 6.12.1.2 Acceso de rastreadores .......................................................................................... 139 6.12.1.3 Enlaces del sitio .................................................................................................... 140 6.12.1.4 Cambio de dirección.............................................................................................. 140 6.12.1.5 Configuración ........................................................................................................ 140 6.12.2 Su sitio en la web............................................................................................................ 141 6.12.2.1 Consultas de búsquedas ......................................................................................... 141 6.12.2.2 Enlaces a su sitio ................................................................................................... 141 6.12.2.3 Palabras clave ........................................................................................................ 141 6.12.2.4 Enlaces internos..................................................................................................... 141 6.12.2.5 Estadísticas de suscriptor....................................................................................... 142 6.12.3 Diagnósticos ................................................................................................................... 142 6.12.3.1 Software malintencionado ..................................................................................... 142 6.12.3.2 Errores de rastreo .................................................................................................. 142 6.12.3.3 Estadísticas de rastreo ........................................................................................... 142 6.12.3.4 Sugerencias en HTML........................................................................................... 142 6.12.4 Labs ................................................................................................................................ 143 6.12.4.1 Explorar como Googlebot ..................................................................................... 143 6.12.4.2 Sidewiki................................................................................................................. 144 6.12.4.3 Rendimiento del sitio ............................................................................................ 144 6.12.4.4 Sitemap de vídeo ................................................................................................... 144 6.13 GOOGLE ANALYTICS .............................................................................................................. 144 6.13.1 Intelligence ..................................................................................................................... 147 6.13.2 Usuarios ......................................................................................................................... 147 6.13.3 Fuentes de tráfico ........................................................................................................... 147 6.13.4 Contenido ....................................................................................................................... 148 6.13.5 Algunas estadísticas ....................................................................................................... 149 6.14 CONCLUSIONES ...................................................................................................................... 149Capitulo 7: Nuevas Tecnologías ............................................................................................................ 151 7.1 HTML5 ................................................................................................................................... 151 7.1.1 Características fundamentales ......................................................................................... 152 7.1.1.1 Geolocalización ....................................................................................................... 152 7.1.1.2 Web Workers ........................................................................................................... 152 7.1.1.3 Cache para aplicaciones web ................................................................................... 152 7.1.1.4 Canvas ..................................................................................................................... 152 7.1.1.5 Vídeo ....................................................................................................................... 153 7.1.2 Diferencias entre (X)HTML5 y (X)HTML ........................................................................ 153 7.1.2.1 Nuevas etiquetas ...................................................................................................... 154 7.1.2.2 Etiquetas eliminadas ................................................................................................ 155 7.2 CSS 3 ....................................................................................................................................... 155 7.2.1 Características fundamentales ......................................................................................... 155 7.2.1.1 @font-face ............................................................................................................... 155 7.2.1.2 Bordes ..................................................................................................................... 156 7.2.1.3 Sombras ................................................................................................................... 156 7.2.1.4 Fondos avanzados ................................................................................................... 157
  • 8. 7.2.1.5 Otras propiedades importantes ................................................................................ 157 7.2.1.6 Selector de atributos ................................................................................................ 157 7.3 WEBM ..................................................................................................................................... 158 7.3.1 VP8 ................................................................................................................................... 158 7.3.2 Vorbis................................................................................................................................ 158 7.4 WEBGL.................................................................................................................................... 158 7.5 CONCLUSIONES ........................................................................................................................ 159Capitulo 8: conclusiones ........................................................................................................................ 161 8.1 ¿QUÉ NAVEGADOR PREDOMINARÁ EN LA WEB 3.0? ................................................................ 161 8.2 ¿QUÉ TECNOLOGÍAS PREDOMINARÁN EN LA WEB 3.0? ............................................................ 162 8.3 ¿QUÉ APLICACIONES PARA EL DESARROLLO WEB PREDOMINARÁN EN LA WEB 3.0?................ 165 8.3.1 Editores de código ............................................................................................................ 165 8.3.2 Analizadores de código .................................................................................................... 166 8.3.3 Analizadores de visitas ..................................................................................................... 166 8.3.4 Gestores de contenido ...................................................................................................... 166 8.3.5 Widgets ............................................................................................................................. 167 8.3.6 Otros ................................................................................................................................. 167 8.4 ¿QUÉ USO SE LE DARÁ A LA WEB 3.0?...................................................................................... 168 8.4.1 Extensión del escritorio hacia Internet ............................................................................ 169 8.4.2 Extensión de Internet hacia el escritorio.......................................................................... 170 8.4.3 Libertad de uso ................................................................................................................. 170REFERENCIA ......................................................................................................................................... A
  • 9. LISTA DE FIGURASFigura 2.1: Navegadores web más utilizados. .......................................................................................... 6Figura 2.2: Gráfica comparativa del uso de navegadores. ...................................................................... 6Figura 2.3: Webkit frente a Gecko ............................................................................................................ 7Figura 2.4: Captura de pantalla de Firefox 4 ........................................................................................... 9Figura 2.5: Captura de pantalla de Google Chrome 6 .......................................................................... 10Figura 2.6: Captura de pantalla de Safari.............................................................................................. 11Figura 2.7: Captura de pantalla de Opera 10.5 ..................................................................................... 12Figura 2.8: Captura de pantalla de Internet Explorer 8 ....................................................................... 13Figura 2.9: Opera, Chrome y Safari pasan el test ................................................................................. 17Figura 2.10: Firefox 3.7 no pasa el test ................................................................................................... 17Figura 2.11: Internet Explorer 8 no pasa el test ..................................................................................... 17Figura 2.12: Tendencia de popularidad de los navegadores web ......................................................... 19Figura 3.1: Modelo de cliente servidor ................................................................................................... 21Figura 3.2: Logo de validación del W3C para HTML 4.01 .................................................................. 22Figura 3.3: Logo de validación del W3C para XHTML 1.0 .................................................................. 22Figura 3.4: Logo de validación del W3C para CSS 2.0 ......................................................................... 25Figura 3.5: Logo de JavaScript (no dispone de uno homologado) ...................................................... 27Figura 3.6: Jerarquía DOM ..................................................................................................................... 28Figura 3.7: Logo de AJAX (no dispone de uno homologado) ............................................................... 29Figura 3.8: Cliente servidor en modelo de aplicación clásica y en modelo de aplicación AJAX ....... 30Figura 3.9: Logo de jQuery ..................................................................................................................... 32Figura 3.10: Logo de PHP........................................................................................................................ 34Figura 3.11: Logo de JSP ......................................................................................................................... 37Figura 3.12: Logo de Python ................................................................................................................... 41Figura 3.13: Tendencia de popularidad de las tecnologías en el lado del cliente ................................ 44Figura 3.14: Tendencia de popularidad de las tecnologías en el lado del servidor ............................. 45Figura 5.1: Captura de pantalla de Google Analytics ........................................................................... 60Figura 5.2: Captura de pantalla de Blogger ........................................................................................... 63Figura 5.3: Captura de pantalla de reCAPTCHA ................................................................................. 65Figura 5.4: Captura de pantalla de WordPress ..................................................................................... 69Figura 5.5: Captura de pantalla de Disqus ............................................................................................ 72Figura 5.6: Captura de pantalla de phpMyAdmin ................................................................................ 74Figura 5.7: Captura de pantalla de phpDocumentor ............................................................................ 76Figura 5.8: Captura de pantalla de Dreamweaver ................................................................................ 78Figura 5.9: Captura de pantalla de Cufón ............................................................................................. 79Figura 5.10: Captura de pantalla de cPanel ........................................................................................... 82Figura 5.11: Captura de pantalla de Get Satisfaction ........................................................................... 84Figura 5.12: Captura de pantalla de vBulletin ...................................................................................... 86 ix
  • 10. Figura 5.13: Captura de pantalla de MediaWiki ................................................................................... 88Figura 5.14: Captura de pantalla de Coppermine ................................................................................. 90Figura 5.15: Captura de pantalla de YouTube ....................................................................................... 92Figura 5.16: Captura de pantalla de AddThis ....................................................................................... 94Figura 5.17: Captura de pantalla de Magento ....................................................................................... 96Figura 6.1: Captura de pantalla de la web que realizaremos 1/3 ....................................................... 102Figura 6.2: Captura de pantalla de la web que realizaremos 2/3 ....................................................... 102Figura 6.3: Captura de pantalla de la web que realizaremos 3/3 ....................................................... 102Figura 6.4: Captura de pantalla de gotAPI .......................................................................................... 103Figura 6.5: Captura de pantalla de Notepad++ ................................................................................... 104Figura 6.6: Captura de pantalla de la consola de errores de Firefox ................................................. 105Figura 6.7: Firebug para Firefox .......................................................................................................... 106Figura 6.8: Capturas de sugerencias de PageSpeed al analizar un sitio web .................................... 107Figura 6.9: Visualización del tiempo de carga de los elementos de nuestro sitio con PageSpeed .... 107Figura 6.10: Captura de pantalla de FireFTP ..................................................................................... 108Figura 6.11: Ejemplo de estructura de archivos y carpetas para un sitio web .................................. 109Figura 6.12: Mapa conceptual ............................................................................................................... 109Figura 6.13: Código maquetado tipo HTML5 en HTML ................................................................... 111Figura 6.14: Buenas prácticas para el maquetado básico ................................................................... 111Figura 6.15: Propuestas de aspecto ....................................................................................................... 112Figura 6.16: Esquema de maquetado de nuestra web ......................................................................... 113Figura 6.17: Imagen de la web con las distintas partes marcadas...................................................... 114Figura 6.18: Contenedor de 12 columnas (máximo) ............................................................................ 116Figura 6.19: Año de fecha actual ........................................................................................................... 119Figura 6.20: Idioma apagado e idioma activo ...................................................................................... 120Figura 6.21: Botón de vista (vista completa activada) ......................................................................... 120Figura 6.22: Imagen de la web para el caso de una pantalla menor a 960 pixeles ............................ 120Figura 6.23: Efecto de desplazamiento del recuadro azul con bordes redondeados ......................... 122Figura 6.24: Formulario de contacto .................................................................................................... 123Figura 6.25: Resultado de compresión gzip.......................................................................................... 126Figura 6.26: CSS Drive - CSS Compressor (Advanced Mode) ........................................................... 127Figura 6.27: JavaScript Compressor .................................................................................................... 129Figura 6.28: Optimización de imágenes ............................................................................................... 130Figura 6.29: Verificación para el tipo de documento ........................................................................... 133Figura 6.30: Sello que certifica que nuestra web cumple el estándar XHTML 1.0 estricto ............. 134Figura 6.31: Verificación para el tipo de estilo ..................................................................................... 134Figura 6.32: Sugerir un sitio a Google .................................................................................................. 135Figura 6.33: Demostrar la propiedad del sitio ..................................................................................... 136Figura 6.34: Panel de Google Webmaster Tools ................................................................................... 137Figura 6.35: Herramientas de “Información del sitio” ....................................................................... 138
  • 11. Figura 6.36: Generador XML de Sitemaps .......................................................................................... 138Figura 6.37: Sitio con enlaces internos en las búsquedas de Google .................................................. 140Figura 6.38: Herramientas de “Su sitio en la web” ............................................................................. 141Figura 6.39: Herramientas de Diagnóstico ........................................................................................... 142Figura 6.40: Herramientas para hacer pruebas .................................................................................. 143Figura 6.41: Crear un nuevo perfil del sitio web en Google Analytics ............................................... 145Figura 6.42: Panel de Google Analytics ................................................................................................ 146Figura 6.43: Intelligence (alertas automáticas) .................................................................................... 147Figura 6.44: Usuarios ............................................................................................................................. 147Figura 6.45: Fuentes de tráfico .............................................................................................................. 148Figura 6.46: Contenido .......................................................................................................................... 148
  • 12. LISTA DE TABLASTabla 2.1: Motores de renderizado web más comunes ............................................................................ 7Tabla 2.2: Información general ............................................................................................................... 14Tabla 2.3: Soporte de sistemas operativos .............................................................................................. 14Tabla 2.4: Consumo de memoria (inicio 20 tabs, 3.8GiB DDR3) ......................................................... 14Tabla 2.5: Consumo de CPU (inicio 20 tabs, Core2Duo a 2.13GHz) .................................................... 15Tabla 2.6: Características del navegador ............................................................................................... 15Tabla 2.7: Características de accesibilidad ............................................................................................. 15Tabla 2.8: Soporte de tecnologías web .................................................................................................... 16Tabla 2.9: Soporte de protocolos ............................................................................................................. 16Tabla 3.1: Diferencias básicas entre HTML y XHTML ........................................................................ 23Tabla 3.2: Lenguajes de programación vistos para la web ................................................................... 44Tabla 5.1: Analizadores ............................................................................................................................ 58Tabla 5.2: Blogs ......................................................................................................................................... 62Tabla 5.3: CAPTCHAs ............................................................................................................................. 65Tabla 5.4: Gestores de contenido ............................................................................................................. 66Tabla 5.5: Sistemas de comentario .......................................................................................................... 72Tabla 5.6: Administradores de bases de datos ........................................................................................ 74Tabla 5.7: Herramientas de documentación ........................................................................................... 75Tabla 5.8: Editores .................................................................................................................................... 77Tabla 5.9: Scripts para fuentes de texto .................................................................................................. 79Tabla 5.10: Paneles para hospedaje web ................................................................................................ 80Tabla 5.11: Seguidores de incidencias ..................................................................................................... 83Tabla 5.12: Foros ...................................................................................................................................... 85Tabla 5.13: Wikis ...................................................................................................................................... 87Tabla 5.14: Galerías de imágenes ............................................................................................................ 89Tabla 5.15: Visualizadores de vídeo ........................................................................................................ 91Tabla 5.16: Widgets .................................................................................................................................. 93Tabla 5.17: EShops ................................................................................................................................... 95Tabla 5.18: Aplicaciones más usadas por categoría ............................................................................... 98Tabla 5.19: Aplicaciones más usadas en general .................................................................................... 98 xiii
  • 13. LISTA DE CÓDIGOSCódigo 3.1: Página web básica vacía en XHTML ................................................................................. 23Código 3.2: Página web básica en XHTML ........................................................................................... 24Código 3.3: Regla básica de estilo para los encabezados de primer orden de una página ................. 25Código 3.4: Página web básica con enlace externo al estilo .................................................................. 26Código 3.5: Regla básica de estilo para el cuerpo de una página ......................................................... 26Código 3.6: Escritura de una frase en el documento (X)HTML .......................................................... 28Código 3.7: Botón en página XHTML que al pulsarlo muestra el cuadrado de 5 .............................. 28Código 3.8: Archivo de texto plano donde se encuentra un código para cargar con AJAX ............... 31Código 3.9: Página en la que se utiliza AJAX ........................................................................................ 31Código 3.10: Obtención de un archivo de texto plano del servidor mediante AJAX .......................... 31Código 3.11: Cambio del contenido del elemento seleccionado por el pasado por parámetro ........... 33Código 3.12: Mensaje de alerta cuando se clica un enlace ................................................................... 33Código 3.13: Escritura en la página de una cadena............................................................................... 35Código 3.14: Escritura en el cuerpo de la página del contenido de una variable ............................... 35Código 3.15: Formulario para interactuar con el usuario .................................................................... 35Código 3.16: Escritura en la página de una cadena............................................................................... 38Código 3.17: Escritura en el cuerpo de la página de un saludo acompañado de la fecha actual ....... 39Código 3.18: Página con formulario que invoca a un servlet ............................................................... 39Código 3.19: Servlet que devuelve una página con los parámetros recogidos en un formulario ....... 40Código 3.20: Descriptor de despliegue para la publicación de un servlet ............................................ 40Código 3.21: Escritura en la página de una cadena............................................................................... 42Código 3.22: Captura de una imagen con una webcam ........................................................................ 42Código 3.23: Escritura en el cuerpo de la página de un saludo acompañado de la fecha actual ....... 42Código 6.1: Tipo de documento, codificación y enlaces para 960 Grid System ................................ 115Código 6.2: Etiquetas y atributos para el cuerpo base de nuestra web ............................................. 115Código 6.3: CSS incluido en el propio documento HTML.................................................................. 117Código 6.4: CSS enlazado desde un archivo externo ........................................................................... 117Código 6.5: CSS incluido directamente en el propio elemento HTML .............................................. 117Código 6.6: Superposición de estilos en cascada .................................................................................. 118Código 6.7: Enlace a nuestro CSS ......................................................................................................... 118Código 6.8: Algunas de las reglas de nuestro estilo para la web ......................................................... 118Código 6.9: Actualizar el copyright con el el año actual ..................................................................... 119Código 6.10: Efecto de apagado e iluminado ....................................................................................... 120Código 6.11: Ajuste de la web a la pantalla .......................................................................................... 121Código 6.12: Intercambio de atributos HTML .................................................................................... 121Código 6.13: Uso del plugin LavaLamp ............................................................................................... 122Código 6.14: Estilo para recuadro azul con bordes redondeados ...................................................... 122Código 6.15: Código para crear un formulario de contacto ............................................................... 123 xv
  • 14. Código 6.16: Único archivo externo con todo el CSS combinado (960.css, estilo.css, etc) ................ 124Código 6.17: Único archivo externo con todo el JS combinado ( jquery-1.4.2.js, menu.js, etc) ....... 124Código 6.18: Archivo externo con el JS combinado que necesita cargarse al principio ................... 124Código 6.19: Archivo externo con todo el JS combinado que podemos cargar a posterior ............. 125Código 6.20: Opción 1 - Indicar compresión en el archivo de configuración ".htaccess" ................ 125Código 6.21: Opción 2 – Inicio compresión gzip en archivo PHP ...................................................... 125Código 6.22: Fin compresión gzip en archivo PHP ............................................................................. 125Código 6.23: Fecha de expiración para recursos estáticos .................................................................. 126Código 6.24: Cache no habilitada ......................................................................................................... 126Código 6.25: Enlace a CSS compactado ............................................................................................... 126Código 6.26: Aspecto del CSS compactado ......................................................................................... 127Código 6.27: Enlace al JavaScript compactado ................................................................................... 128Código 6.28: Aspecto del JavaScript compactado ............................................................................... 128Código 6.29: Sintaxis solicitud HTTP ................................................................................................... 129Código 6.30: Solicitud HTTP ................................................................................................................. 129Código 6.31: Orden para estilos y scripts ............................................................................................. 130Código 6.32: Set de caracteres en la cabecera ...................................................................................... 132Código 6.33: Declaración del tipo de documento para XHTML 1.0 estricto..................................... 133Código 6.34: Declaración del tipo de documento para HTML 5 ........................................................ 134Código 6.35: Código que no cumple con la especificación CSS 2.1 .................................................... 135Código 6.36: Parte del código del Sitemap de nuestro sitio ................................................................ 139Código 6.37: Robots ............................................................................................................................... 139Código 6.38: ¿Qué ve el rastreador de Google? ................................................................................... 143Código 6.39: Seguimiento de Google Analytics .................................................................................... 145Código 7.1: Incluir lienzo en HTML5 ................................................................................................... 152Código 7.2: Incluir vídeo en HTML5 .................................................................................................... 153Código 7.3: Documento HTML 4.01 similar a HTML5 ..................................................................... 153Código 7.4: Documento HTML 5 básico............................................................................................... 154Código 7.5: Elegir la fuente de texto que queramos ............................................................................ 156Código 7.6: Bordes redondeados con imágenes ................................................................................... 156Código 7.7: Sombras .............................................................................................................................. 156Código 7.8: Múltiples fondos ................................................................................................................. 157Código 7.9: Selección de elemento según atributo ............................................................................... 158
  • 15. LISTA DE ACRÓNIMOSAJAX - Asynchronous Javascript And XMLANSI - American National Standards InstituteAPI - Application Programming InterfaceASP - Active Server PagesBOM - Byte Order MarkBSD - Berkeley Software DistributionCAPTCHA - Completely Automated Public Turing test to tell Computers and Humans ApartCDMA - Code Division Multiple AccessCERN - Conseil Européen pour la Recherche NucléaireCHM - Microsoft Compiled HTML HelpCMS - Content Management SystemCPU - Central Processing UnitCRM - Customer Relationship ManagementCSS - Cascading Style SheetsCSV - Comma Separated ValuesDHTML - Dynamic HTMLDNS - Domain Name SystemDOM - Document Object ModelDTD - Document Type DefinitionECMA - European Computer Manufacturers AssociationERP - Enterprise Resource PlanningFAQ - Frequently Asked QuestionsFF - FireFoxFTP - File Transfer ProtocolGIF - Graphics Interchange FormatGIMP - GNU Image Manipulation ProgramGMT - Greenwich Mean TimeGNU - GNUs Not UnixGPL - General Public LicenseGSM - Global System for Mobile CommunicationsGZIP - GNU ZIPHTML - HyperText Markup LanguageHTTP - Hypertext Transfer ProtocolHTTPS - HTTP SecureID - IdentificationIDN - Internationalized Domain NameIE - Internet ExplorerIP - Internet Protocol
  • 16. IRC - Internet Relay ChatISO - International Organization for StandardizationJ2EE - Java 2 Platform Enterprise EditionJPEG - Joint Photographic Experts GroupJS - JavaScriptJSP - JavaServer PagesKDE - K Desktop EnvironmentLAMP - Linux Apache MySQL PHPLDAP - Lightweight Directory Access ProtocolLGPL - Lesser General Public LicenseMAC - Media Access ControlMathML - Mathematical Markup LanguageMPL - Mozilla Public LicenseMSN - MicroSoft NetworkNASA - Nacional Aeronautics and Space AdministrationNCSA - National Center for Supercomputing ApplicationsNNTP - Network News Transport ProtocolO - OperaOCR - Optical Character RecognitionOpenGL - Open Graphics LibraryOpenGL ES - OpenGL for Embedded SystemsPDF - Portable Document FormatPHP - Hypertext PreProcessorPNG - Portable Network GraphicsQBE - Query By ExampleRAM - Random Access MemoryRFID - Radio Frequency IDentificationRIA - Rich Internet ApplicationRSS - Really Simple SyndicationSEO - Search Engine OptimizationsIFR - scalable Inman Flash ReplacementSMF - Simple Machines ForumSMIL - Synchronized Multimedia Integration LanguageSQL - Structured Query LanguageSSL - Secure Sockets LayerSVG - Scalable Vector GraphicsURL - Uniform Resource LocatorUTF - Unicode Transformation FormatVP8 - Video comPression format version 8W3C - World Wide Web Consortium
  • 17. WAMP - Windows Apache MySQL PHPWaSP - Web Standards ProjectWP - WordPressWSGI - Web Server Gateway InterfaceWYSIWYG - What You See Is What You GetXHTML - eXtensible Hypertext Markup LanguageXML - eXtensible Markup LanguageXPCOM - Cross Platform Component Object ModelXSL - eXtensible Stylesheet LanguageXSLT - eXtensible Stylesheet Language TransformationsXSS - Cross Site ScriptingXUL - XML based User interface Language
  • 18. PREFACIOEste proyecto fue elegido por el interés personal sobre el estado de tecnologíaspara el desarrollo de aplicaciones web y su implementación. Se le ofrece laposibilidad al lector de adentrarse en ambos campos, con los siguientes capítulosque comprenden la documentación propia del trabajo realizado.En el Capítulo 1, se ofrece una breve introducción sobre la historia y el conceptode web. Se exponen cuales fueron los objetivos y requisitos para la realizacióndel proyecto.En el Capítulo 2, se centra en las aplicaciones de escritorio dedicadas a lanavegación por Internet. Se detallan todos los navegadores webs más extendidos,comparándolos y viendo las ventajas e inconvenientes entre ellos, se les aplicanpruebas y se analiza su popularidad y tendencia de uso.En el Capítulo 3, se analizan las tecnologías de macado de texto, estilo einteracción más utilizadas para el desarrollo web, detallando su uso y la sintaxisbásica a la vez que se ofrecen ejemplos sencillos para su compresión. Al final, serealizan pruebas para ver su popularidad y perspectiva de futuro.En el Capítulo 4, se explica la gestión de contenidos web mediante el uso degestores de contenidos.En el Capítulo 5, se describen aquella aplicaciones web que pueden ser usadascomo herramientas para crear una aplicación web final o integradas para añadiruna funcionalidad extra. Además, observaremos la popularidad y uso tratando depronosticar el futuro que les espera.En el Capítulo 6, se basa en los capítulos anteriores para la realización de unaimplementación real paso a paso desde el planteamiento inicial sobre tipo depágina buscamos hasta su mantenimiento y promoción.En el Capítulo 7, se describen las nuevas tecnologías de desarrollo que triunfaránen Internet en los próximos años.En el Capítulo 8, se ofrecen un resumen de las ideas más importantes y lasconclusiones. xxi
  • 19. Capítulo 1 “La verdad es que yo no creo en nada de lo que me promete Internet o la Web, no creo en la promesa del mundo feliz. Pero pienso que eso no me impide conocer qué son esas tecnologías ni tampoco utilizarlas, lo cierto es que algo muy loco se está generando y nosotros tenemos el privilegio de experimentar ese cambio.” ~ Alejandro PiscitelliCAPITULO 1: INTRODUCCIÓNE l termino Web 2.5 se refiere al estado actual de desarrollo de las tecnologías y aplicaciones en Internet. Desde sus orígenes en 1969 “La Red de Redes” no ha parado de evolucionar, ha pasado de ser una red unidireccional para lecturas desde servidores (Web 1.0), a convertirse en una red social bidireccional dondelos usuarios aparte de leer datos pueden escribir, interactuar y colaborar de multitud deformas. La Web 2.0 o Web Social, a diferencia de su predecesora, gestiona los datos demanera dinámica y mantiene los servicios de Internet actualizados usando lastecnologías web (1). La Web 3.0 o Web Semántica, es la web dinámica en la que sesepara el contenido de la interacción y el aspecto visual. El estado actual de transiciónse denomina Web 2.5. El estudio de las tecnologías y herramientas pertenecientes a laWeb 2.5, las aplicaciones que se pueden crear con ellas y las lineas futuras (hacia laWeb 3.0), serán la base del contenido que abarcaremos en este proyecto.La idea de la Web (década de los 40) es anterior a la creación de Internet y se definió como unentramado de información distribuida con una interfaz que permitiera el acceso. Sin embargo,no fue hasta principios de los 90 cuando Tim Berners Lee creó los 3 elementos básicos de laWeb: el navegador web, el servidor web y la página web (2), a los que unió los enlaces de texto(hipervínculos de texto) para la navegación, idea que sacó de observar una libreta que usabapara añadir y mantener referencias de cómo funcionaban los ordenadores en el CERN(Organización Europea para la Investigación Nuclear, del francés).Antes de la Web, la manera de obtener los datos por Internet era caótica: había un sinfínde maneras posibles por lo que había que conocer múltiples programas y sistemasoperativos. La Web introduce un concepto fundamental: la posibilidad de lecturauniversal, que consiste en que una vez que la información esté disponible, se puedaacceder a ella desde cualquier ordenador, desde cualquier país, por cualquier personaautorizada, usando un único y simple programa (el navegador web).1.1ObjetivosEl objetivo de este proyecto es el estudio del estado actual de las tecnologías para el desarrolloweb así como de su evolución, tratando de establecer el escenario que se vislumbra para unfuturo próximo: la Web 3.0.Para ello, se va a documentar la planificación, creación y mantenimiento de un entorno Web PÁGINA 1 DE 172
  • 20. actual. En un primer lugar se abordarán los navegadores web para acceder a Internet, seguidodel estudio y comparación de las tecnologías existentes, luego analizaremos las aplicacionespara el desarrollo web y por último se realizará un ejemplo práctico basándonos en losconclusiones de los capítulos anteriores.1.2RequisitosPara llevar a cabo estos objetivos es necesario partir de una serie de requisitos fundamentales: ___________________________________________________________________ Evitar las particularidades de los navegadores web (Internet Explorer, Firefox, Opera, etc) ydependencias del software propietario tanto con sistemas operativos (Windows en servidoresweb: .NET no es portable sin MONO) como en extensiones web (Silverlight también deMicrosoft). ___________________________________________________________________ La necesidad de estudiar las tecnologías y aplicaciones web independientes del navegador web ydel sistema operativo (en cliente y servidor) fue tomada como requisito para permitir la totalcompatibilidad con cualquier entorno, dejando de esta forma al usuario la total libertad deelección. ___________________________________________________________________ El uso de tecnologías libres al alcance de cualquier desarrollador y el empleo de herramientassencillas con resultados profesionales son los requisitos básicos para este proyecto. Relacionadocon lo anterior se encuentra la ausencia de dependencias de software propietario, es decir,abarcaremos como requisito el estudio de tecnologías libres, autosuficientes e independientescon una gran comunidad de ayuda al desarrollo.Optar por esta filosofía de desarrollo tiene unas repercusiones legales inmediatas, y económicas,tanto para uso personal como comercial.
  • 21. Capítulo 2 “The big dispute between the government and Microsoft concerns the Internet "browser," which is the piece of software that puts a message on your computer screen informing you that the Internet is currently busy and you should try again later. As you can imagine, the potential market for this service is huge, so Microsoft would like you to use its browser, and not somebody elses.” ~ Dave BarryCAPITULO 2: NAVEGADORES WEBU n navegador web es un programa que permite visualizar la información que contiene una página web. El navegador nos permite acceder a la Web 2.5, es decir, al conjunto de aplicaciones y recursos web que pueden facilitarnos infinidad de tareas y mantenernos en contacto con personas en todo el mundo.El navegador web es uno de los programas más importante de un equipo. Pasamos unagran parte de nuestro tiempo conectados a Internet con el navegador. Cuando realizamosbúsquedas, chateamos, enviamos mensajes de correo electrónico, realizamos compras,accedemos a nuestro banco online, leemos las noticias y vemos vídeos online, lohacemos a través de un navegador.La funcionalidad básica de un navegador web es permitir la visualización dedocumentos de texto, posiblemente con recursos multimedia incrustados. Losdocumentos pueden estar ubicados en la computadora en donde está el usuario o en unservidor.El navegador interpreta el código, HTML (Lenguaje de Marcado de Hipertexto)generalmente, en el que está escrita la página web y lo presenta en pantalla permitiendoal usuario interactuar con su contenido y navegar hacia otros lugares de la red.2.1Papel de los navegadores dentro de la webMuchos de nosotros no somos conscientes de toda la tecnología que hay detrás de Internet. Nide porque se nos ofrece de manera gratuita. Entre dichas tecnologías tenemos: ___________________________________________________________________ HTML, que le da estructura y contenido a la página. ___________________________________________________________________ CSS (Hojas de Estilo en Cascada), le da presentación a una página. ___________________________________________________________________ JavaScript, permite funcionalidad extra y que la página sea interactiva (menús, animaciones, ..). ___________________________________________________________________ Fuentes, las letras que se usan para los textos. PÁGINA 3 DE 172
  • 22.  ___________________________________________________________________ Formatos de Imágenes (JPEG, PNG,…) que comprimen la información de una imagen para podertener un uso eficiente de la red.Todas y cada una de estas tecnologías son de libre uso y acceso. Este es el corazón de Internet yla razón por la que ha crecido de una forma tan sorprendente. Millones de páginas y sitios en lared son creados todos los días gracias a esto.¿Qué hubiera pasado con Internet si tuviéramos que comprar un navegador de Internet? o¿Pagar peaje por cada página que visitamos? o ¿Pagar miles de euros por la tecnología paracrear un sitio o usar el correo electrónico?La web es innegablemente mejor después de que Mozilla entró al mercado de navegadores, yhabría sido imposible hacer esto si hubieran existido pagos multimillonarios por licencias parael manejo de HTML, CSS, JavaScript, o alguna otra.2.2Historia de los navegadoresEl primer navegador, desarrollado en el CERN a finales de 1990 y principios de 1991 por TimBerners Lee, era bastante sofisticado y gráfico, pero sólo funcionaba en estaciones NeXT.El navegador Mosaic, que funcionaba inicialmente en entornos UNIX sobre X11, fue el primeroque se extendió debido a que pronto el NCSA (Centro Nacional de Aplicaciones deSupercomputación de Estados Unidos) preparó versiones para Windows y Macintosh. Sinembargo, poco más tarde entró en el mercado Netscape Navigator que rápidamente superó encapacidades y velocidad a Mosaic (3). Este navegador tiene la ventaja de funcionar en casi todoslos UNIX, así como en entornos Windows.Internet Explorer (anteriormente Spyglass Mosaic) fue la apuesta tardía de Microsoft para entraren el mercado. En los últimos años se ha vivido una auténtica explosión del número denavegadores, que ofrecen cada vez mayor integración con el entorno de ventanas en el que seejecutan. Netscape Communications Corporation liberó el código fuente de su navegador,naciendo así el proyecto Mozilla.Finalmente Mozilla fue reescrito desde cero tras decidirse a desarrollar y usar como base unnuevo conjunto de widgets (mini aplicaciones) multiplataforma basado en el lenguaje deetiquetado ML (Lenguaje de Marcas eXtensible) y al que se le llamaría XUL. Esto hizo quetardara bastante más en aparecer de lo previsto inicialmente, apareciendo una versión 1.0 degran calidad y para muchísimas plataformas a la vez el 5 de junio del 2002.A finales de 2004 aparece en el mercado Firefox, una rama de desarrollo de Mozilla quepretende hacerse con parte del mercado de Internet Explorer. Se trata de un navegador másligero que su hermano mayor.El 2 de Septiembre del 2008 vio la luz el tercer navegador más utilizado en Internet: GoogleChrome. (4)(5)
  • 23. CAPÍTULO 2Los navegadores web más usados son aquellos que presentan mejores prestaciones o que vienenpor defecto integrados con el sistema operativo o cualquier otro dispositivo (6). Estosnavegadores son: Mozilla Firefox, Opera, Google Chrome, Safari e Internet Explorer (por ordende aparición en la Figura 2.1). Figura 2.1: Navegadores web más utilizados.Actualmente el porcentaje de uso de dichos navegadores está cambiando (Figura 2.2). Lamayoría de usuarios al poseer sistemas operativos Windows usaban el Internet Explorer queviene integrado con el sistema, sin embargo la variedad de navegadores existentes en elmercado y las deficiencias que presenta en navegador de Windows han hecho que los usuariosbusquen en Internet una solución mejor. Firefox actualmente le está quitando cuotas de uso aInternet Explorer, seguido por Chrome y Safari. Aunque este último también debe su existo no ala elección del propio usuario sino ha que viene integrado con el sistema de Apple: el Mac OS. Figura 2.2: Gráfica comparativa del uso de navegadores.2.3Motores de renderizadoUn motor de renderizado es software que toma contenido marcado (en TML, ML, etc.) y lashojas de estilo (como SS, XSL, etc.) y luego muestra el contenido maquetado en pantalla.En la siguiente tabla vamos a mostrar una comparativa de los motores más usados segúncreador, licencia, navegador conocido que hace uso del motor y lenguaje de programación en elque está desarrollado.PÁGINA 6 DE 172
  • 24. CONCLUSIONES Tabla 2.1: Motores de renderizado web más comunes Motor Creador Licencia Navegador Lenguaje KHTML KDE GNU LGPL Konqueror C++ MPL, GNU GPL, Mosaic / Netscape / Gecko GNU LGPL Mozilla Firefox C++ Mozilla Foundation tri-license Presto Opera Software Propietaria Opera C++ Webkit Safari, GNU LGPL, BSD- (basado en Webkit Foundation C++ style Google Chrome KHTML) Mosaic/ Trident Propietaria Internet Explorer ? MicrosoftVistas algunas características de KHTML (Konqueror), Gecko (FF), Presto (O), Webkit(Chrome) y Trident (IE), nos centraremos en los dos más poderosos Gecko y Webkit. Figura 2.3: Webkit frente a Gecko2.3.1 WebkitWebkit es un motor de render HTML de código abierto, desarrollado por Apple basándose en elcódigo del proyecto KTHML. Webkit es un motor sumamente sencillo, reconocido por teneruna base de código ordenada y limpia, cumplir estrictamente con los estándares web (HTML,XHTML, CSS, etc), y usar poca memoria para su funcionamiento (7). Por estos motivos Webkites una opción muy popular para implementar navegadores, entre otros usos.Webkit fue usado en principio en el navegador Safari y luego en el iPhone, pero variosproveedores conocidos también lo utilizan: Adobe, Nokia, Trolltech entre otros. Webkit tambiénse usa en una gran cantidad de navegadores menos conocidos, como son iCab, Omniweb,Shiira, y Epiphany. Más recientemente, Google eligió a Webkit para su plataforma movilAndroid, y para su navegador de escritorio Chrome.El consenso entre los desarrolladores es claro: Webkit es un motor excelente que permiteutilizarlo en muchos casos prácticos. Webkit está en todos lados, y gana popularidad a pasosagigantados. PÁGINA 7 DE 172
  • 25. CAPÍTULO 22.3.2 GeckoGecko, creado originalmente por Netscape, tiene una cantidad de código enorme y no muyprestigiosa. Gecko siempre fue poderoso, pero todas sus impresionantes características eran acosta de tamaño, complejidad y uso (y abuso) de memoria. En consecuencia, Gecko no eraapropiado para entornos restringidos, en donde agregar funcionalidad no resulta una prioridad.Una de los principales motivos que aumentan la complejidad del código de Gecko es que, enrealidad, apunta a ser mucho más que un motor HTML. El objetivo inicial de Mozilla eraextremadamente ambicioso: la suit original de Mozilla incluía un navegador, un programa demail y noticias, una herramienta de diseño web, y un cliente de chat. Además de renderizarHTML, Gecko brinda un framework para la creación de interfaces de usuario basadas en XML(llamada XUL), y provee de servicios para soportar extensiones en el navegador, las cuales sonuna de las características más valiosas de Firefox.XPCOM (Modelo Componente Objeto Multiplataforma) que permite dividir el software enpartes para su desarrollo y después ensamblarlo, es otra de las fuentes de complejidad en elcódigo de Gecko. XPCOM le permitió a Gecko ser completamente modular. Sin embargo,muchos desarrolladores lo adoptaron con demasiado entusiasmo, y usaron XPCOM en lugaresdonde no era tan apropiado. Scott Collins, desarrollador de Mozilla, comentó que el usoexcesivo de XPCOM fue uno de los mayores errores de Mozilla.Gecko todavía es complejo, pero se superaron muchas de sus debilidades históricas (8). Geckorecibió mejoras masivas para Firefox 3, con muchos cambios que mejoran la experiencia denavegación.Gecko 1.9 mejora el soporte de SVG (Gráficos Vectoriales Escalables), lo que permite algunascaracterísticas interesantes, como hacer un zoom de todos los componentes de la página.También se mejoraron algoritmos internos, permitiendo a Gecko pasar el test Acid2 (pruebaspara superar las tecnologías web básicas, posteriormente en este capítulo veremos el Acid3).Además, Mozilla logró disminuir drásticamente el uso de memoria, superando a Safari y Opera.Gecko también soporta algunos elementos de CSS 3 (ya implementados en Webkit), y tiene unamejor rendimiento al renderizar páginas. Por otro lado, Mozilla está preparando a TraceMonkey,su nuevo motor JavaScript que promete grandes mejoras.Por otro lado, es importante destacar que muchas de las características de Gecko estádemostrando resultar útil a los proveedores externos. Se están construyendo muchasaplicaciones en XUL, con resultandos impresionantes. Incluso se puede usar a Firefox 3 comoun entorno de ejecución XUL, por lo que es posible crear aplicaciones ricas con XUL yJavascript, y distribuirlas directamente por Internet. También estamos viendo aplicacionescomplejas para Firefox distribuidas como extensiones.Desde un punto de vista técnico, Gecko es una opción muy sólida frente a Webkit por surenderizado, escalabilidad y soporte de algunas páginas que no se adecuan al estándar web.Mozilla además tiene los recursos, la experiencia y el apoyo de la comunidad para llevar aGecko a nuevos rumbos.Gecko está igualando a Webkit en rendimiento y bajo uso de memoria, y a la vez cuenta conalgunas ventajas únicas que no se encuentran en ningún otro motor como puede ser el granabanico de extensiones complejas, y que sería difícil agregarlas a Webkit. (9)2.4Mozilla FirefoxFirefox es un navegador web desarrollado por la fundación Mozilla que ofrece adaptabilidad,seguridad, estabilidad y velocidad. Es fácil, gratuito y abierto. Firefox tiene más de 6.000extensiones, es el navegador más personalizarle y es capaz de soportar páginas que salgan delPÁGINA 8 DE 172
  • 26. estándar web. Figura 2.4: Captura de pantalla de Firefox 42.4.1 Ventajas e InconvenientesLas ventajas de Firefox son su gran cantidad de extensiones y plugins. Son pequeños programasque amplían las funciones del navegador, desarrollados por programadores independientes.Firefox cumple sobradamente los estándares web (10), es el navegador más seguro y además esmultiplataforma, sirve para cualquier sistema operativo.Entre los escasos inconvenientes se encuentra el consumo de memoria. Si al navegar se abrenmuchas pestañas o ventanas con multitud de extensiones y plugins ejecutándose a la vez elrendimiento cae; es un problema pendiente de solucionar en próximas versiones.Derivado de lo anterior existen problemas de rendimiento y estabilidad, pero es debido a un usomasivo de la multifunción de Firefox.2.5Google ChromeChrome es un navegador web desarrollado por Google para los sistemas operativos másextendidos, ejecuta aplicaciones y páginas web a gran velocidad. Inicio, carga y búsquedarápida. Es fácil, gratuito y abierto. Dispone de una interfaz para dar mayor protagonismo a laweb y sus pestañas se ejecutan como aplicaciones independientes.
  • 27. Figura 2.5: Captura de pantalla de Google Chrome 62.5.1 Ventajas e InconvenientesLas ventajas de Chrome son su rapidez y consumo de poca memoria. Las páginas web carganmás deprisa y se pueden abrir muchas pestañas a la vez, sin que se agote la memoria. Disponede una interfaz simple y minimalista. Todo lo superfluo se ha eliminado, de modo que hasta losprincipiantes lo encontrarán fácil de usar. Robusto y seguro (11). Se pueden hacer varias cosas ala vez (editar una imagen online, estar chateando por Facebook, etc), y si una página web secuelga no afecta a otras ventanas o pestañas, que continúan funcionando de formaindependiente.Entre los escasos inconvenientes se encuentra incompatibilidades debido a que su motor esWebkit; solo cumple el estándar web. Algunas páginas web antiguas pueden no versecorrectamente con Chrome, hasta que sus propietarios las arreglen o rediseñen.Su interfaz puede resultar poco convencional. Su aspecto minimalista puede inducir a laconfusión, especialmente entre quienes están acostumbrados a lo tradicional y no quieraninnovaciones.Por último la carencia de extensiones. En las primeras versiones, Google Chrome no se podíaampliar mediante módulos, es algo que históricamente ha permitido hacer más versátiles a todoslos navegadores.2.6SafariSafari es un navegador web de código cerrado desarrollado por Apple para Mac pero que en la
  • 28. actualidad soporta alguno de los sistemas operativos más extendidos. Figura 2.6: Captura de pantalla de Safari2.6.1 Ventajas e InconvenientesSafari tiene las mismas ventajas e inconvenientes que hereda de Webkit (12) y comparte conChrome; es rápido pero no soporta absolutamente todas las webs.Entre sus ventajas podemos destacar el aspecto cuidado que caracteriza a los productos deApple.Entre los inconvenientes la carencia de extensiones y algunos fallos de seguridad entre los quedestaca el autorelleno de datos que viene activado por defecto, una herramienta muy potente querecopila nuestros datos desde el ordenador y nos facilita el relleno de formularios en Internetpero que puede ser usada por software malicioso y webs atacantes para robarnos informaciónpersonal.2.7OperaOpera es un navegador web de código cerrado y multiplataforma desarrollado por OperaSoftware. La aplicación es gratuita desde su versión 8.50, habiendo sido previamente shareware(software de evaluación) y, antes de su versión 5.0, únicamente de pago.
  • 29. Figura 2.7: Captura de pantalla de Opera 10.52.7.1 Ventajas e InconvenientesEntre sus ventajas se encuentra la velocidad, la seguridad y una cuidada interfaz (13). Opera estáintegrado en algunas consolas de videojuegos.Entre sus escasos puntos negativos está su lentitud en el renderizado con respecto a aquellosnavegadores que usan Gecko y Webkit.2.8Internet ExplorerInternet Explorer es un navegador web de código cerrado desarrollado por Microsoft para elsistema operativo Microsoft Windows desde 1995. Ha sido el navegador web más utilizadodesde 1999, con un pico máximo de cuota de utilización del 95% durante el 2002 y 2003 en susversiones 5 y 6. Esa cuota de mercado ha disminuido paulatinamente debido a una renovadacompetencia por parte de otros navegadores, principalmente Mozilla Firefox.
  • 30. Figura 2.8: Captura de pantalla de Internet Explorer 82.8.1 Ventajas e InconvenientesLa mayor ventaja es que al ser el más difundido (14), todas las webs funcionan correctamentecon él. Su privilegiada posición en el mercado durante años ha hecho que cualquier página webse compruebe siempre para su funcionamiento en Explorer.Entre los inconvenientes se encuentran las vulnerabilidades, que tardan en corregirse. Losconstantes agujeros de seguridad de Explorer son ya una tradición.Existe una pobre gestión de los estándares Web. Tradicionalmente Microsoft ha “reinventado”los estándares a su conveniencia, de modo que quienes crean las páginas web han de tratar aExplorer como un si fuera un caso especial, toda una pérdida de tiempo y recursos.Además, se caracteriza por un ciclo de versiones y revisiones lento.2.9Comparativas entre IE, Opera, Safari, Chrome y FirefoxA continuación vamos a mostrar una serie de tablas (15) en las que comparamos losnavegadores vistos (en sus versiones estables de principios del 2010) según los siguientesaspectos : ___________________________________________________________________ Soporte de sistemas operativos ___________________________________________________________________ Consumo de memoria
  • 31.  ___________________________________________________________________ Consumo de CPU ___________________________________________________________________ Características del navegador ___________________________________________________________________ Características de accesibilidad ___________________________________________________________________ Soporte de tecnologías web ___________________________________________________________________ Soporte de protocolos Tabla 2.2: Información general IE Opera Safari Chrome Firefox Opera Mozilla Creador Microsoft Apple Google Software Fundation 1º Edición 01/08/95 08/12/96 23/06/03 15/09/09 26/09/02 Última versión 8.0.6001.18702 10.10 4.0.1 4.0.249.78 3.6.0 estable Coste Gratuito Gratuito Gratuito Gratuito Gratuito Libre: MPL, GNU Licencia No libre No libre No libre Libre: BSD GPL, GNU LGPL tri-license Motor Trident Presto Webkit Webkit Gecko Tabla 2.3: Soporte de sistemas operativos IE Opera Safari Chrome Firefox Windows Si Si Si Si Si Mac OS Si Si Si Si Si Linux No Si No Si Si FreeBSD No Si No No Si Tabla 2.4: Consumo de memoria (inicio 20 tabs, 3.8GiB DDR3) IE Opera Safari Chrome Firefox RAM 833.7 MB 369.3 MB 379.4 MB 614.8 MB 217.4 MB Tabla 2.5: Consumo de CPU (inicio 20 tabs, Core2Duo a 2.13GHz) IE Opera Safari Chrome Firefox
  • 32. CPU 54,80% 11,30% 15,00% 13,40% 43,20% Tabla 2.6: Características del navegador IE Opera Safari Chrome FirefoxAdministrador Si Si Si Si Side marcadores Gestor de Si Si Si Si Si descargas Cliente de No Si No No Si BitTorrentAdministrador Si Si Si Si Side contraseñasAdministrador Si Si Si Si Side formularios Corrección No Si Si Si Si ortográfica Barra deherramientas Si Si Si Si Si de motor de búsqueda Tabla 2.7: Características de accesibilidad IE Opera Safari Chrome FirefoxNavegación Si Si Si Si Sipor pestañasAnti pop-up Si Si Si Si Si Búsqueda Si Si Si Si Si incremental Bloqueo de No Si No Si Si publicidad Zoom de Si Si Si Si Si página Acceso Si Si Si Si Si HTML Tabla 2.8: Soporte de tecnologías web IE Opera Safari Chrome Firefox CSS 2 Si Si Si Si Si
  • 33. Frames Si Si Si Si Si Java Si Si Si Si Si Javascript Si Si Si Si Si XSLT Si Si Si Si Si XHTML Si Si Si No Si MathML No Si No No Si XForms No Si No No No RSS Si Si Si No Si Atom Si Si Si No Si Tabla 2.9: Soporte de protocolos IE Opera Safari Chrome Firefox Email No Si No No No FTP Si Si Si Si Si NNTP No Si No Si Si SSL Si Si Si Si Si IRC No Si No No Si Gopher No No No No Si IDN Si Si Si Si Si data: URL No Si Si Si Si2.10 Test Acid3Aunque gracias a las especificaciones de la Tabla 2.8 sabemos que tecnologías soportan cadanavegador web vamos a realizar pruebas online mediante el Test Acid3 (16). La parte principalde Acid3 esta escrita en ECMAScript (JavaScript), y consiste de 100 subpruebas divididas enseis grupos, llamados "buckets", más cuatro pruebas especiales (0, 97, 98 y 99). ___________________________________________________________________ Bucket 1: DOM Traversal, DOM Range, HTTP ___________________________________________________________________ Bucket 2: DOM2 Core y DOM2 Events ___________________________________________________________________ Bucket 3: DOM2 Views, DOM2 Style, Selectores de CSS3 y Media Queries ___________________________________________________________________ Bucket 4: Comportamiento de tablas HTML y formularios cuando son manipulados por scripts yDOM2 HTML ___________________________________________________________________ Bucket 5: Pruebas de la competición Acid3, (SVG, HTML, SMIL, Unicode...) ___________________________________________________________________ Bucket 6: ECMAScript
  • 34. El único requerimiento de la prueba es que el navegador tenga la configuración de formapredeterminada. El renderizado final debe mostrar un 100/100 y además no sólo debe seridéntico al de referencia sino que además la animación debe ser fluida (la prueba no debe tomarmás de 33 milisegundos). Figura 2.9: Opera, Chrome y Safari pasan el test Figura 2.10: Firefox 3.7 no pasa el test Figura 2.11: Internet Explorer 8 no pasa el testActualmente sólo navegadores basados en WebKit (con excepción de Opera, basado en Presto)han logrado superar la prueba Acid3. Opera fue el primer navegador que obtuvo una puntuaciónde 100/100, siendo logrado en una compilación de la versión 10 de Opera. Fue seguido por unaversión de WebKit, específica de Safari 4 Beta, haciendo que este fuera el segundo en pasar estaprueba y por último Google Chrome en su versión 4 basado en el Webkit de Chromium.2.11 ConclusionesEl navegador nos permite acceder y usar el conjunto de aplicaciones y recursos que forman laWeb 2.5; es uno de los software más usado en una computadora. Nuestra experiencia conInternet depende exclusivamente de nuestra conexión y del navegador web por lo que siendoeste último gratuito es importante hacer una buena elección en base a las prestaciones que puedaofrecernos.A lo largo de los años este software ha sido impuesto por compañías de desarrollo de sistemasoperativos privativos. En la actualidad existen multitud de navegadores y poco a poco seimponen aquellos que ofrecen un mejor rendimiento.Nos hemos embarcado en un breve recorrido histórico sobre los navegadores, hemos comentadolos motores de renderizado web, los navegadores más extendidos y hemos detallado mediantetablas y pruebas sus características y consumo de recursos.
  • 35. Como conclusión final Chrome es el más rápido y de los que más consume al usar un procesopor pestaña. Firefox el más ligero y versátil aunque con muchas extensiones puede hacerse muypesado. Opera es el pionero en pasar el test Acid3 y en ofrecer con su interfaz una mejorexperiencia al usuario. El aspecto de Opera y la navegación por pestañas han sido adoptados porChrome, Safari y Firefox. Respecto a Safari comparte las ventajas de Webkit con Chrome peroel “toque MAC” le ha hecho restar puntos en seguridad. Por último, Internet Explorer es elnavegador que menos protocolos soporta y el que peor integra las tecnologías web (prometeigualar a Firefox en su versión 9), no obstante como viene integrado con el sistema operativomás extendido es el navegador más usado y los desarrolladores web siempre prueban las cosaspara que funcionen en IE.2.11.1 TendenciaPara terminar con el apartado de conclusiones vamos a utilizar la herramienta Google Insightspara ver la tendencia de los navegadores web más usados. Esta herramienta nos proporcionainformación sobre el comportamiento de los usuarios, respondiendo algunas preguntas sencillascomo: ___________________________________________________________________ qué es lo que están buscando ___________________________________________________________________ qué popularidad tiene lo que se busca ___________________________________________________________________ cuáles son los intereses del usuario ___________________________________________________________________ cuáles son las perspectivas en cuanto a un futuro cercanoLas búsquedas se pueden hacer por términos, localizaciones y plazos temporales. Se puedenincluir condiciones o los términos de la búsqueda, filtros dependiendo de la tipología delestudio, y categorías (17). Nosotros simplemente introduciremos el nombre de los navegadores,seleccionaremos la categoría “Internet” para que no quepa duda en la ambigüedad de lasbúsquedas, haremos una búsqueda a nivel mundial e incluiremos el margen total de tiemposposible, es decir, desde que se contaba con estadísticas de los términos (mediados de 2003)hasta el máximo previsto por la tendencia (mediados de octubre de 2011).A la vista de los resultados mostrados en la Figura 2.12 apreciamos que tanto IE como Safarihan mantenido y mantienen su popularidad a lo largo del tiempo. Prácticamente en la mismalinea hasta 2008 se encontraba Opera que, pese a ser el navegador menos usado de los máspopulares, tiene una leve tendencia al alza a partir de dicha fecha. Por otro lado, con unatendencia bastante elevada al alza desde sus orígenes se encuentra Firefox con uno de suspuntos cumbres en el lanzamiento de su versión 3.0. Para terminar Chrome con una previsiónque tiende a igualar la popularidad de Firefox.Sin duda, mientras no exista un navegador absolutista como ocurrió en tiempos pasados, quepueda condicionar la manera de evolucionar la red, la variedad y lucha por ofrecer la mejorexperiencia en Internet a los usuarios nos beneficia a todos siempre que sea libre.Intentando vaticinar un futuro de cara a la Web 3.0 podría arriesgarme a pronosticar según losdatos estudiados y las pruebas realizadas que la mayor parte del mercado se lo llevarán Chromey Firefox (hechos por y para los usuarios), seguidos de los fieles incondicionales de Apple yMicrosoft con Safari (que aprovechará las mejoras de Webkit proporcionadas por la comunidad)e Internet Explorer respectivamente y por último el pionero Opera con su cuota fija deseguidores.
  • 36. Figura 2.12: Tendencia de popularidad de los navegadores web
  • 37. CAPÍTULO 2 Capítulo 3 “Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” ~ Martin FowlerCAPITULO 3: TECNOLOGÍAS DE DESARROLLO uando hablamos de tecnologías de desarrollo web nos referimos al conjunto deC lenguajes de programación disponibles para el desarrollo de la web. Actualmente existen diferentes lenguajes de programación para desarrollar aplicaciones para la web, estos han ido surgiendo debido a las necesidades y tendencias que hanaparecido a lo largo de la evolución de Internet.En los albores de Internet, la mayoría de usuarios buscaban en la web una base deconocimientos global. En aquella época se dieron soluciones mediante lenguajesdiseñados para programar web estáticas, es decir, contenido fijo de solo lectura. Amedida que paso el tiempo las tecnologías fueron desarrollándose, surgieron nuevasnecesidades por parte de los usuarios entre ellas la necesidad de poder interactuar con laweb. Esto dio lugar al uso de lenguajes de programación para construir web dinámicas.En los siguientes apartados vamos a ver los lenguajes de programación más empleadosen la web agrupados según su uso sea para la creación de páginas desde el lado delcliente o desde el lado del servidor. Figura 3.1: Modelo de cliente servidor3.1Tecnologías para el desarrollo de aplicaciones desde el lado del clienteEstas tecnologías permiten el desarrollo de aplicaciones que se ejecutan en el cliente, esdecir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona PÁGINA 21 DE 172
  • 38. con el servidor en segundo plano. De esta forma es posible realizar cambios sobre laspáginas sin necesidad de recargarlas, lo que significa aumentar la interactividad,velocidad y usabilidad en las aplicaciones.Dentro de las tecnologías desde el lado del cliente (Figura 3.1) podemos distinguir: ____________________________________________________________ Tecnologías para maquetación del contenido en donde nos centraremos enHTML/XHTML ____________________________________________________________ Tecnologías para presentación del contenido en donde nos centraremos en el CSS. ____________________________________________________________ Tecnologías para interacción y realización de funciones complejas donde nos centraremosen JavaScript y sus variantes (AJAX, jQuery, etc) por ser las más sencilla y extendidas ala vez que versátiles y potentes.3.1.1 HTML / XHTMLHTML es un lenguaje de etiquetado para la elaboración de páginas web (18). Desde elsurgimiento de Internet se han publicado sitios web gracias al lenguaje HTML. Es usado paradescribir la estructura y el contenido de una web. HTML se escribe en forma de etiquetas,rodeadas por corchetes angulares (<etiqueta>). También permite describir la apariencia de undocumento e incluir otros elementos tales como scripts. Figura 3.2: Logo de validación del W3C para HTML 4.01XHTML es el lenguaje pensado para sustituir a HTML como estándar para las páginas web. Ensu versión 1.0, XHTML es solamente la versión XML1 de HTML, por lo que tiene,básicamente, las mismas funcionalidades, pero cumple las especificaciones más estrictas deXML (19). Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr unaweb semántica, donde la información, y la forma de presentarla estén claramente separadas. Figura 3.3: Logo de validación del W3C para XHTML 1.0Tanto para html como para xhtml los archivos pueden tener las extensiones “.htm, .html”.3.1.1.1 UsoLa gran mayoría de páginas web hacen uso del HTML ya que es el estándar web paramaquetado de contenido por defecto, sin embargo, aunque es raro, podemos encontrar webshechas sin html por ejemplo con Adobe Flash (lenguaje ActionScript para crear websanimadas): juegos, salas de chats, portfolios online; estás tienen el problema de que losbuscadores no las detectan y por lo general y cada vez más suelen incluir partes de html.1 XML es un Lenguaje de Etiquetado Extensible muy simple, pero estricto que juega un papel fundamental en el intercambio de una gran variedad de datos. Es un lenguaje muy similar a HTML pero su función principal es describir datos y no mostrarlos como es el caso de HTML. XML es un formato que permite la lectura de datos a través de diferentes aplicaciones.
  • 39. 3.1.1.2 SintaxisLa sintaxis se define mediante un conjunto de etiquetas que nos permiten dar formato alcontenido. Todas las etiquetas se definen mediante su nombre clave entre los símbolos de menory mayor a modo de corchetes: ___________________________________________________________________ <etiqueta> Apertura de la etiqueta. ___________________________________________________________________ </etiqueta> Cierre de la etiqueta.A la hora de usar HTML o XHTML tenemos que tener en cuenta que HTML permite etiquetarde muchas formas y XHTML solo de una, ya que pretende crear una concordancia para extenderel formato. A continuación vemos algunos usos comunes en HTML que no permite XHTML. Tabla 3.1: Diferencias básicas entre HTML y XHTML HTML XHTML Todos los nombres de etiquetas y <IMG SRC="" /> <img src="" /> atributos van en minúsculas Todos los valores de los atributos entre <img src=foto.png /> <img src="foto.png" /> comillas Todos los atributos deben tener un <input type /> <input type="ckeckbox /> valor Todas las etiquetas deben estar <li> <li> </li> cerradas Todas las etiquetas vacías deben estar <br> <br/> cerradas con / al final3.1.1.3 EjemploPara crear un documento HTML tenemos que incluir como mínimo la etiqueta html. Código 3.1: Página web básica vacía en XHTML<html> <!-- Inicio del documento HTML --> <head> <!-- Cabecera donde van metadatos, enlaces a hojas de estilos para presentación, etc --> </head> <body> <!-- Cuerpo donde va el contenido de la página → </body></html>Dentro del cuerpo del documento HTML existen una gran variedad de etiquetas para definir elmaquetado del documento, por ejemplo: <b></b> para poner el texto que enmarcado en negritao <p></p> para definir que el interior enmarcado es un párrafo.Pongamos un ejemplo real que muestre un página web básica. Si se observa el código fuente, sepueden distinguir tres partes bien diferenciadas, un ejemplo de una página básica sería realizadacon el Código 3.2. Código 3.2: Página web básica en XHTML
  • 40. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”“http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd”><html> <head> <title>The Internet</title> </head> <body> The Internet is the first thing that humanity has built that humanity doesnt understand, thelargest experiment in anarchy that we have ever had. </body></html>En primer lugar se encuentra la definición del tipo de documento (DTD), el cual se especificacon la etiqueta <!DOCTYPE. Seguidamente se encuentra la etiqueta <html></html> queespecifica el principio y fin del documento HTML. Entre las etiquetas de principio y fin deldocumento se ubican las etiquetas correspondientes al encabezado y cuerpo del documentocuyas etiquetas correspondientes son <head></head> y <body></body>.Con la etiqueta <head></head> se delimita la cabecera del documento que suele contenerinformación sobre el documento como título, idioma, palabras clave, autor, etc. La informaciónque se especifique en la cabecera no es mostrada por el navegador al usuario con la únicaexcepción de la etiqueta <title></title>, la cual sirve para especificar el titulo del documento yes visualizada en la barra de titulo de la ventana correspondiente al programa navegador.Con la etiqueta <body></body>, se delimita el cuerpo del documento, que es el contenedor paratodos los elementos visibles para el usuario, como párrafos, imágenes, listas, etc.3.1.1.4 Ventajas ___________________________________________________________________ Sencillo, permite describir hipertexto. ___________________________________________________________________ Texto presentado de forma estructurada y agradable. ___________________________________________________________________ No necesita de grandes conocimientos cuando se cuenta con un editor de páginas web oWYSIWYG (aplicación para escribir documentos viendo directamente el resultado final). ___________________________________________________________________ Archivos pequeños. ___________________________________________________________________ Despliegue rápido. ___________________________________________________________________ Lenguaje de fácil aprendizaje. ___________________________________________________________________ Lo admiten todos los exploradores.3.1.1.5 Desventajas ___________________________________________________________________ Lenguaje estático. ___________________________________________________________________ La interpretación de cada navegador puede ser diferente. ___________________________________________________________________ Guarda muchas etiquetas que pueden resultar inservibles y dificultan la corrección. ___________________________________________________________________ El diseño es más lento.
  • 41.  ___________________________________________________________________ Las etiquetas son muy limitadas.3.1.1.6 Enlace a la API ___________________________________________________________________ Especificación HTML 4.01: http://www.w3.org/TR/REC-html40/ ___________________________________________________________________ Especificación XHTML 1.0: http://www.w3.org/TR/xhtml1/3.1.2 CSSCSS (Cascading Style Sheets, en Inglés) es un lenguaje simple que describe cómo se va apresentar un documento (20). Esta forma de descripción de estilos ofrece a los desarrolladores elcontrol total sobre el estilo y formato de sus documentos. La idea que se encuentra detrás deldesarrollo de CSS es separar la estructura de un documento de su presentación. Figura 3.4: Logo de validación del W3C para CSS 2.03.1.2.1 UsoCSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de lapresentación. CSS permite a los desarrolladores web controlar el estilo y el formato de múltiplespáginas web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en laCSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.Aunque se pueden encontrar páginas (normalmente antiguas) en las que no exista un estilodefinido o el estilo está introducido por HTML (algo que no se debe hacer) en su gran mayoríatodas los sitios web disponen de su declaración de hojas de estilos.3.1.2.2 SintaxisCSS usa un conjunto de reglas, la regla tiene dos partes: un selector y la declaración. A su vez ladeclaración está compuesta por una propiedad y el valor que se le asigne. Código 3.3: Regla básica de estilo para los encabezados de primer orden de una páginah1 { color: red; } /* selector { propiedad: valor } */Los selectores básicos son: ___________________________________________________________________ Nombre de etiqueta para etiquetas (X)HTML. ___________________________________________________________________ Carácter . para clases: .tipo1 { color: red } ___________________________________________________________________ Carácter # para elementos únicos: #elemento { color: red }Los selectores pueden ser aplicables a: ___________________________________________________________________ Etiquetas: <h1></h1> ___________________________________________________________________ G
  • 42. rupos pertenecientes a una clase mediante el atributo “class”: <img class=“tipo1” /> ___________________________________________________________________ Elementos únicos mediante el atributo “id”: <p id=“elemento”>...</p>Las reglas pueden incluirse de varias formas: ___________________________________________________________________ En la propia etiqueta del elemento mediante el atributo “style”. ___________________________________________________________________ En la página mediante la etiqueta <style></style>. ___________________________________________________________________ En un archivo externo mediante la etiqueta <link />.En el Capítulo 6: Implementación, entraremos en más detalle en cuanto a las formas de definirel estilo.3.1.2.3 EjemploPongamos un ejemplo real que aplique un CSS a una página web. En el ejemplo tenemos undocumento XHTML junto con el enlace a la hoja de estilos CSS. A la parte visible deldocumento que se corresponde con la etiqueta <body></body> se le esta aplicando un estilocaracterizado por un margen automático y una anchura de 960 píxeles.En el Código 3.4 mostramos el contenido del documento XHTML (index.html) con el enlace aldocumento que contiene la hoja de estilos y en el Código 3.5 el contenido del archivo CSS(style.css). Código 3.4: Página web básica con enlace externo al estilo<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <link rel="stylesheet" href="css/style.css"/> <!-- enlace a la hoja de estilo --> <title></title> </head> <body></body></html> Código 3.5: Regla básica de estilo para el cuerpo de una páginabody { margin: auto; /* márgenes en modo automático */ width: 960px; /* ancho igual a 960 pixeles */}3.1.2.4 Ventajas ___________________________________________________________________ Mayor control de la presentación de la web al poder tener todo el código CSS aparte. ___________________________________________________________________ P
  • 43. ueden mostrarse distintas hojas de estilo según el dispositivo que estemos utilizando (versiónimpresa, versión móvil, leída por un sintetizador de voz…) o dejar que el usuario elija. ___________________________________________________________________ Las novedades de CSS3 nos permiten ahorrarnos tiempo y trabajo al poder seguir varias técnicas(bordes redondeados, sombra en el texto, sombra en las cajas, etc) sin necesidad de usar uneditor gráfico.3.1.2.5 Desventajas ___________________________________________________________________ Existen limitaciones que CSS 2.x todavía no permite, por ejemplo, la alineación vertical de capas,las sombras, los bordes redondeados… ___________________________________________________________________ El uso de las tablas nos permitía crear diseños complejos de forma mucho más sencilla queutilizando CSS, aunque CSS3 está intentando facilitar dicho trabajo.3.1.2.6 Enlace a la API ___________________________________________________________________ Guía de Referencia CSS 2.1: http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/3.1.3 JavaScriptJavaScript es un lenguaje interpretado, multiplataforma y parcialmente orientado a objetos. Esutilizado para acceder a objetos en aplicaciones (21). Se utiliza en el desarrollo de páginas webpermitiendo el desarrollo de interfaces de usuario mejoradas y páginas dinámicas. Figura 3.5: Logo de JavaScript (no dispone de uno homologado)Los archivos JavaScript tienen la extensión “.js”.3.1.3.1 UsoEl código JavaScript puede enlazarse o añadirse a las páginas web proporcionando un controltotal y dinámico sobre ellas. Con JavaScript podemos controlar todos los elementos que formanuna página web. Debido a la gran variedad de páginas webs, para evitar incompatibilidades, elW3C diseñó un estándar denominado DOM2 (modelo de objetos del documento, en inglés) queespecifica la jerarquía de los elementos que forman una página web y que pueden ser accedidospara interactuar con ellos mediante JavaScript. Además JS, también permite controlar (hastacierto punto) los navegadores.Está influido por Java y Python y es el lenguaje de scripts más extendido en la red gracias a susencillez y versatilidad. Hoy en día cualquier página con un mínimo de interacción incluye esta2 DOM es una especificación para la representación de datos XML (22). Por extensión, DOM también se puede utilizar para manipular documentos XHTML y HTML. Técnicamente, DOM es una API de funciones que se pueden utilizar para manipular las páginas XHTML de forma rápida y eficiente. DOM transforma internamente el documento original en una estructura más fácil de manejar formada por una jerarquía de nodos. De esta forma, DOM transforma el código HTML/XML en una serie de nodos interconectados en forma de árbol. El Modelo de Objetos del Documento (DOM) permite ver el mismo documento de otra manera, describiendo el contenido del documento como un conjunto de objetos que un programa Javascript puede actuar sobre ellos.
  • 44. tecnología: Vimeo, YouTube, USTREAM, devianART, Blogger, Picasa, etc. Figura 3.6: Jerarquía DOM3.1.3.2 SintaxisJavaScript para realizar una acción sobre un elemento tiene dos partes: un selector y la funcióncon sus parámetros. A su vez podemos usar las funciones definidas por defecto en el lenguaje ocrear funciones tan complejas como queramos. Código 3.6: Escritura de una frase en el documento (X)HTMLdocument.write("Hola Mundo"); // selector.función(parámetros) ___________________________________________________________________ El código JavaScript puede incluirse de varias forma: ___________________________________________________________________ En la propia etiqueta del elemento mediante atributos como: “onclick”, “onload”, etc. ___________________________________________________________________ En la página mediante la etiqueta <script></script>. ___________________________________________________________________ En un archivo externo mediante la etiqueta <link />.3.1.3.3 EjemploPongamos un ejemplo real donde tengamos el documento XHTML junto con el códigoJavaScript. Código 3.7: Botón en página XHTML que al pulsarlo muestra el cuadrado de 5<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title>Cuadrado de 5</title> <script type="text/javascript"> // código JavaScript en la cabecera function cuadrado(numero) { // función cuadrado al que le pasamos una variablenumero return numero * numero; }// devolvemos el cuadrado de la variable de entrada </script>
  • 45. </head> <body> <!-- botón que al pulsarlo muestra por pantalla el resultado de la función al pasarle un 5 --> <input type="button" Value=" ejemplo2 " onClick="alert(cuadrado(5))"/> </body></html>En este ejemplo hemos insertado un botón en la página web que al clicarlo enlaza con unafunción JavaScript que devuelve el cuadrado del número que le pasemos. Por pantalla semostrará el número en un mensaje de alerta (alert).3.1.3.4 Ventajas ___________________________________________________________________ Lenguaje interpretado seguro y fiable. ___________________________________________________________________ El código Javascript se ejecuta en el cliente.3.1.3.5 Desventajas ___________________________________________________________________ Código visible por cualquier usuario. ___________________________________________________________________ El código debe descargarse completamente. ___________________________________________________________________ Atacantes maliciosos pueden inyectar secuencias de comandos del lado del cliente en páginas webvisitadas por otros usuarios, comúnmente denominado problema XSS (problema basado en lasvulnerabilidades del sistema de validación de HTML).3.1.3.6 Enlace a la API ___________________________________________________________________ API JavaScript: http://krook.org/jsdom/3.1.4 AJAXAjax (JavaScript asíncrono y XML) es una técnica de desarrollo web para crear aplicacionesinteractivas (23). No es una tecnología en sí mismo. En realidad, se trata de varias tecnologías Figura 3.7: Logo de AJAX (no dispone de uno homologado)independientes.Las tecnologías que forman AJAX son: ___________________________________________________________________ XHTML y CSS, para crear una presentación basada en estándares. ___________________________________________________________________ DOM, para la interacción y manipulación dinámica de la presentación. ___________________________________________________________________ X
  • 46. ML para el intercambio y la manipulación de información. ___________________________________________________________________ XMLHttpRequest, para el intercambio asíncrono de información. ___________________________________________________________________ JavaScript, para unir todas las demás tecnologías.3.1.4.1 UsoBásicamente, la principal virtud de AJAX está en la potencia que se le puede extraer al trabajoasíncrono de peticiones al servidor. Estamos acostumbrados a un modelo de interacciónsincrónica basada en clic-petición-presentación, clic-petición-presentación. Con AJAX lainteracción pasa a ser asíncrona. Cada vez que se hace clic no necesariamente se establece unaconexión con el servidor.AJAX hace de intermediario entre el servidor y el usuario (Figura 3.8), anticipando peticionesde datos al servidor, de modo que cuando el usuario hace un clic determinado, AJAX ya tienelistos esos datos y los muestra directamente, sin tener que volver a hacer una petición al servidory su consecuente espera.Ahí está la clave precisamente, en que ciertos procesos se muestran en la página sin retardoalguno, pues mientras el usuario miraba unos datos en la pantalla, AJAX le ha estadopreparando los siguientes que iba a necesitar. Figura 3.8: Cliente servidor en modelo de aplicación clásica y en modelo de aplicación AJAXJavaScript es el lenguaje interpretado en el que normalmente se efectúan las funciones dellamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest.Por ejemplo, cuando leemos el correo en Gmail y abrimos un mensaje que forma parte de unacadena de mensajes con alguien sólo se nos muestra el último mensaje recibido del emisor.Mientras nosotros leemos ese mensaje Gmail va cargando el resto de mensajes de esaconversación, de forma que cuando pulsamos en la opción de expandir los mensajes vemos quese carga inmediatamente y que la URL no varía. No solo gran parte de las aplicaciones deGoogle (por ejemplo Gmail, Google Groups, Google Suggest o Google Maps) usa AJAX,
  • 47. también podemos encontrarla en aplicaciones como Flickr, Amazon‟s, etc.3.1.4.2 EjemploPongamos un ejemplo real que remplace un texto de un página web por el de un archivo detexto cuando se haga clic sobre un enlace. El archivo de texto será solicitado por AJAX.Tenemos un archivo denominado text.txt (Código 3.8 ), una página donde utilizaremos AJAX(Código 3.9) y un script donde la variable XML HTTP Request se encarga de hacer la peticiónHTTP3 (Código 3.10) para obtener dicho archivo. Las peticiones XML HTTP es la base deAJAX. Código 3.8: Archivo de texto plano donde se encuentra un código para cargar con AJAX<script type="text/javascript"> function replace() { // busca el identificador “elemento” y sustituye el contenido de su etiqueta document.getElementById(“elemento”).innerHTML = "Hello, <b>AJAX</b> world!";}</script> Código 3.9: Página en la que se utiliza AJAX<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head></head><body> <!-- referencia al código que cargaremos con AJAX --> <p><a href="javascript:replace()">Remplazar texto</a></p> <!-- elemento de la página donde apreciaremos el cambio --> <div id="elemento">¡Hola mundo!</div></body></html> Código 3.10: Obtención de un archivo de texto plano del servidor mediante AJAX<script type="text/javascript">var http = false;if(navigator.appName == "IE") { http = new ActiveXObject("Microsoft.XMLHTTP"); // para Internet Explorer siempre es especial} else { http = new XMLHttpRequest(); // variable para hacer petición HTTP usando XML para los datos}http.open("GET", "text.txt"); // obtemos el archivo de texto plano del servidorhttp.onreadystatechange=function() { if(http.readyState == 4) { // si ha habido problemas alert(http.responseText); // mostramos la respuesta mediante un mensaje emergente }}http.send(null); //cerramos la conexión con el servidor</script>Básicamente declaramos una una variable (http) de tipo XMLHttpRequest() para realizar lapetición (http.open("GET", "text.txt")) del contenido de “texto.txt” cargandola en la página web.Al final comprobamos que no ha habido problemas y cerramos la conexión (http.send(null);).Cabe destacar que para el caso único y exclusivo de Internet Explorer (IE) tenemos que hacer3 Protocolo mediante el cual se transfieren las páginas web a un ordenador.
  • 48. uso de un tipo de objeto para hacer peticiones HTTP por medio de XML especifico deMicrosoft.La combinación de la manipulación del DOM (elementos de la página web) con elXMLHttpRequest nos da AJAX. En una página sin AJAX habríamos cargado todo de golpemediante una única petición HTTP, en el ejemplo hemos hecho dos peticiones una para cargar laparte de la página que el usuario puede ir leyendo y otra para obtener el código para reemplazarel texto.3.1.4.3 Ventajas ___________________________________________________________________ La experiencia de usuario en la navegación es mucho más rica. Ya no se refresca la páginaconstantemente al interactuar con ella. ___________________________________________________________________ El tiempo de espera para una petición se reduce. El usuario al hacer un pedido (request) alservidor, no se envía toda la página. ___________________________________________________________________ Por la misma razón anterior el trafico al servidor se reduce.3.1.4.4 Desventajas ___________________________________________________________________ Problemas si el usuario ha deshabilitado el uso de JavaScript en su navegador. ___________________________________________________________________ Demasiado código Ajax hace lento el navegador. A más Ajax, más uso de código JavaScript dellado del navegador, por consiguiente mayor trabajo del navegador (estás mismas desventajas seaplican a JavaScript).3.1.4.5 Enlace a la APIAJAX no dispone de un conjunto de métodos propios en forma de guía ya que AJAX es unconjunto de tecnologías web, así que daremos una referencia a una buena documentación. ___________________________________________________________________ Referencia documentación JAX: https://developer.mozilla.org/en/JAX3.1.5 jQueryjQuery es una biblioteca Javascript que permite simplificar la manera de interactuar con losdocumentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y Figura 3.9: Logo de jQueryagregar interacción con la tecnología AJAX a páginas web. (24)3.1.5.1 UsoA la hora de enriquecer una página web con componentes de la llamada Web 2.0, como efectosdinámicos, Ajax, interacción, interfaces de usuario avanzadas, etc; jQuery es una herramientaimprescindible para desarrollar todas estas cosas sin tener que complicarte con los niveles másbajos del desarrollo, ya que muchas funcionalidades ya están implementadas, o bien las libreríasdel framework te permiten realizar la programación mucho más rápida y libre de errores.Todas las mejoras de la Web 2.0, que en un principio puede ser muy atractivas, también tienen
  • 49. un coste en tiempo de desarrollo de los proyectos. Sin un framework como jQuery, el tiempo decreación y depuración de todos esos componentes sería mucho mayor, pero aun así nadie diceque todo sea instalar el sistema y empezar correr. Sin embargo, lo más complicado de jQuery esaprender a usarlo, igual que pasa con cualquier otro framework Javascript. Requerirá deldesarrollador habilidades avanzadas de programación, así como el conocimiento, al menosbásico, de la programación orientada a objetos. Una vez aprendido las ventajas de utilizarlocompensarán más que de sobra el esfuerzo. JavaScript en comparación con otros lenguajes esmuy sencillo y concretamente la biblioteca jQuery facilita mucho más algunos de sus procesos.Está biblioteca es sin duda de las más utilizadas en Internet pudiendo encontrarla en gran partede las aplicaciones de Google, Twitter, Match, WordPress, Drupal, RoundCube, etc.3.1.5.2 SintaxisLa sintaxis de jQuery es prácticamente la misma que la de JavaScript, los únicos cambios sonrespecto a los selectores que incluye los mismos que los de CSS y respecto a las funciones quetrae nuevas funciones para facilitar algunas tareas repetitivas comunes en la programación conJavaScript. Código 3.11: Cambio del contenido del elemento seleccionado por el pasado por parámetro$(“#elemento”).html("Hola Mundo"); // $(selector).función(parámetros);Los selectores básicos son: ___________________________________________________________________ Mismo elemento: $(this). o $. ___________________________________________________________________ Nombre de etiqueta (X)HTML: $(“p”). ___________________________________________________________________ Carácter . para clases: $(“.tipo1”). ___________________________________________________________________ Carácter # para elementos únicos: $(“#elemento”).El código jQuery puede incluirse de las mismas formas que JavaScript siempre y cuando seincluya su librería. Código 3.12: Mensaje de alerta cuando se clica un enlace<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title>Prueba de jQuery</title> <script type="text/javascript" src="jquery.js"></script> <!-- librería jQuery --> <script type="text/javascript"> $(document).ready(function (){ // cuando el documento este cargado completamente $("a").click(function (){ alert("Presionaste un <a>");}); // asignamos el clic a las etiquetas<a> </script></head><body> <a href="#"> ¡Presioname! </a></body></html>
  • 50. Como se puede observar en el Código 3.12, se ha añadido “$(document).ready()”. Pues todo loque este dentro del ready() sera ejecutado cuando el árbol DOM del documento este creado.Es una manera de saber cuando empezar a ejecutar nuestro código Javascript y saber quepodemos acceder a todos los elementos de la pagina y que no queda ninguno por serinicializado.Con jQuery podemos hacer muchas cosas de una manera muy sencilla, como por ejemplo: ___________________________________________________________________ Insertar o eliminar elementos. ___________________________________________________________________ Modificar las propiedades de los elementos, (class, id, value…) o su contenido. ___________________________________________________________________ Asignar funciones mediante eventos. ___________________________________________________________________ Peticiones AJAX. ___________________________________________________________________ Animaciones.3.1.5.3 Ventajas ___________________________________________________________________ Simple control de eventos. ___________________________________________________________________ Excelente manipulación del DOM. ___________________________________________________________________ Facilidad de desarrollo.3.1.5.4 Desventajas ___________________________________________________________________ No dispone de Widgets. Se pueden hacer pero la librería no los proporciona.3.1.5.5 Enlace a la API ___________________________________________________________________ API jQuery: http://api.jquery.com/3.2Tecnologías para el desarrollo de aplicaciones desde el lado del servidor.Estas tecnologías permiten el desarrollo de aplicaciones que se ejecutan en el servidor (Figura3.1), es decir, el servidor genera la página web según la petición manteniendo una comunicaciónsíncrona. De esta forma se aumenta la seguridad de la página y el uso de aplicaciones máscomplejas.Dentro de las tecnologías desde el lado del servidor nos centraremos en: ___________________________________________________________________ PHP y JSP por ser las tecnologías más extendidas. ___________________________________________________________________ Python por su potencia y sencillez.3.2.1 PHPPHP (Preprocesador de Hipertexto) es un lenguaje interpretado de propósito generalampliamente usado, diseñado especialmente para desarrollo de web dinámicas y que puede serincrustado dentro de código HTML (25). Generalmente se ejecuta en un servidor web, tomando
  • 51. el código en PHP como su entrada y creando páginas web como salida. Puede ser desplegado enla mayoría de los servidores web y en casi todos los sistemas operativos y plataformas. Además,su soporte en páginas de hospedaje es más barato que el de otras tecnologías como pueden serJSP (Java de Sun Oracle) o ASP (.Net de Microsoft). Figura 3.10: Logo de PHPLos archivos PHP tienen la extensión “.php”.3.2.1.1 UsoPHP es el lenguaje más usado en la actualidad para el desarrollo de aplicaciones web debido alcosto de los servidores que lo soportan, la comunidad y similitud con lenguajes básicos deprogramación como C. Lo usan Facebook, Tuenti, WordPress, Joomla, phpBB, etc.3.2.1.2 SintaxisLa sintaxis de PHP es muy parecido a cualquier otro lenguaje interpretado escrito en Perl o C,aunque consta de sus particularidades (Código 3.13). El código de PHP dentro de la propiapágina está incluido en tags especiales aunque también podemos enlazarlo desde el exterior odejarlo básicamente que genere el (X)HTML desde el servidor. Código 3.13: Escritura en la página de una cadenaecho "Hola Mundo"; // muestra en la página la cadena de texto “Hola mundo”El código PHP puede incluirse de varias forma: ___________________________________________________________________ En la página mediante las etiquetas: <script>...</script>,<?...?>,<?php...?>,<%...%>. ___________________________________________________________________ En un archivo externo mediante la etiqueta <script src=“url”></script>.3.2.1.3 EjemploPongamos un ejemplo real que incluya un texto en una página web. Las páginas que incluyancódigo PHP aunque incluyan en su mayoría HTML (fuera del propio PHP), deberán llevar laextensión “php”. Código 3.14: Escritura en el cuerpo de la página del contenido de una variable<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- XHTML --><html> <!-- el DOCTYPE siempre es de marcado aunque la extensión sea .php --><head></head> <body> <? $mensaje = “Mensaje de prueba”; // declaración de variable a la que le asignamos unacadena echo ($mensaje); ?> // mostramos por pantalla </body></html>En el ejemplo del Código 3.14 hemos declarado una variable (mensaje) que contiene una cadena
  • 52. de texto que mostramos en la página web usando “echo”. Así de sencillo, podemos generarpartes de la página web o incluso la página web completa, según nuestras necesidades. Ahoravamos ver un ejemplo más completo en el que la página sea dinámica, es decir, una vezrealizada la página el usuario podrá interactuar con ella para cambiar su contenido (Código3.15). Código 3.15: Formulario para interactuar con el usuario<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title>Ejemplo de uso simple en envío y recepción de parámetros con PHP</title></head><body><?php // si existe la variable $_POST[comida]if (isset($_POST[comida])) { // entonces muestra la comida favorita echo Hola, .$_POST[nombre]., tu comida favorita es: . $_POST[comida]; } else { // si no, muestra un formulario solicitando la comida favorita?><form method="POST" action="<?php echo $_SERVER[PHP_SELF]; ?>"> ¿Cuál es tu nombre? <input type="text" name="nombre" /> <!-- entrada para escribir el nombre --> ¿Cuál es tu comida favorita? <select name="comida"> <!-- opciones para seleccionar comida --> <option value="Spaguetis">Spaguetis</option> <option value="Asado">Asado</option> <option value="Pizza">Pizza</option> </select> <input type="submit" name="muestra" value="Seguir" /> <!-- entrada para aceptar los datos --></form><?php } // fin del bloque else?></body></html>En el ejemplo anterior caso de que alguien haya insertado los datos con anterioridad losaludamos mostrando su nombre y comida favorita (echo Hola, .$_POST[nombre]., tu comidafavorita es: . $_POST[comida];). En caso de que los datos no estén guardados en el servidormostramos en la web un formulario para que el visitante nos indique su nombre y seleccione sucomida favorita de entre 3 posibles opciones para almacenarlos. $_SERVER[PHP_SELF]; nosretorna el valor del nombre de archivo del código PHP que se esté ejecutando actualmente,relativo a la raiz del sitio. Entonces si estoy visualizando a http://www.uma.es/index.php lavariable $_SERVER[PHP_SELF] me arrojará /index.php que es donde guardaremos los datos.Todas las variables en PHP llevan el símbolo de dólar como prefijo (ejemplo: $variable1,$variable2, $variable3...,$variableN), los tipos de variable no es necesario declararlas, ya que amedida que se usan en la aplicación el servidor reconoce de que tipo son. Para mostrar unacadena (en inglés string) debe estar dentro de comillas dobles o simples (ejemplo: "HolaMundo", Lo que quiero mostrar). Cabe destacar que si se desea mostrar el símbolo " o debeencerrarse en el otro tipo de comillas ("......", ..."...) o usarse un escape (, ").Toda línea de instrucción siempre termina en un punto y coma (;), al igual que el lenguaje C.Para insertar un comentario de una sola línea, debe empezar por // o por #. El resto de la línea es
  • 53. tratado entonces como un comentario. Para insertar un bloque de comentario, de una o máslíneas, se utiliza la combinación /* y */, por ejemplo: /* <comentarios> */Para ejecutar las páginas PHP, se necesita un servidor web que soporte PHP. Hoy en día casi latotalidad de servidores soportan PHP pero es necesario ver la compatibilidad entre versiones.3.2.1.4 Ventajas ___________________________________________________________________ Hostings baratos. ___________________________________________________________________ Muy fácil de aprender. ___________________________________________________________________ Se caracteriza por ser un lenguaje muy rápido. ___________________________________________________________________ Soporta en cierta medida la orientación a objeto. Clases y herencia. ___________________________________________________________________ Es un lenguaje multiplataforma: Linux, Windows, entre otros. ___________________________________________________________________ Capacidad de conexión con la mayoría de los manejadores de base de datos: MysSQL,PostgreSQL, Oracle, MS SQL Server, entre otras. ___________________________________________________________________ Capacidad de expandir su potencial utilizando módulos. ___________________________________________________________________ Posee documentación en su página oficial la cual incluye descripción y ejemplos de cada una desus funciones. ___________________________________________________________________ Es libre, por lo que se presenta como una alternativa de fácil acceso para todos. ___________________________________________________________________ Incluye gran cantidad de funciones. ___________________________________________________________________ No requiere definición de tipos de variables ni manejo detallado del bajo nivel.3.2.1.5 Desventajas ___________________________________________________________________ Se necesita instalar un servidor web. ___________________________________________________________________ Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser más ineficiente amedida que las solicitudes aumenten de número. ___________________________________________________________________ La legibilidad del código puede verse afectada al mezclar sentencias HTML y PHP. ___________________________________________________________________ La programación orientada a objetos es aún muy deficiente para aplicaciones grandes. ___________________________________________________________________ Dificulta la modularización. ___________________________________________________________________ Dificulta la organización por capas de la aplicación. ___________________________________________________________________ Cada cual programa a su manera y hace que sea muy difícil mantener el código de terceraspersonas.
  • 54.  ___________________________________________________________________ Existen muchas versiones de PHP con incompatibilidades entre sí.3.2.1.6 Enlace a la API ___________________________________________________________________ API PHP: http://www.php.net/manual/es/funcref.php3.2.2 JSP (Servidor de Páginas para Java) es una tecnología Java diseñada especialmente para desarrollarweb dinámicas y que puede ser incrustado dentro de código HTML. Generalmente se ejecuta enun servidor web, tomando el código en Java como su entrada y creando páginas web comosalida. Puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemasoperativos y plataformas. Es una alternativa a PHP. Figura 3.11: Logo de JSPLos archivos JSP tienen la extensión “.jsp”.3.2.2.1 UsoJSP puede considerarse como una manera alternativa, y simplificada, de construir servlets4. Espor ello que una página JSP puede hacer todo lo que un servlet puede hacer. Cada versión de laespecificación de JSP está fuertemente vinculada a una versión en particular de la especificaciónde servlets. JSP no nos da nada que no pudierámos en principio hacer con un servlet. Pero esmucho más conveniente escribir (y modificar) HTML normal que tener que hacer un billón desentencias “println” que generen HTML. Además, separando el formato del contenido podemosponer diferentes personas en diferentes tareas. Por ejemplo, varios expertos en diseño depáginas web pueden construir el HTML, y los programadores de servlets dedicarseexclusivamente al contenido dinámico.El funcionamiento general de la tecnología JSP es que el servidor de aplicaciones interpreta elcódigo contenido en la página JSP para construir el código Java del servlet a generar (26). Esteservlet será el que genere el documento (típicamente HTML) que se presentará en la pantalla delnavegador del usuario. Entre muchas de las posibles aplicaciones tenemos páginas de bancos,juegos online, gestores de contenidos, chats, etc.3.2.2.2 SintaxisLa sintaxis de JSP es la sintaxis de Java ya que es código Java (Código 3.16). El código de JSPdentro de la propia página está incluido en varias etiquetas especiales. Código 3.16: Escritura en la página de una cadenaSystem.out.println("Hola Mundo"); // muestra en la página la cadena de texto “Hola mundo”El código JSP está formado por distintas partes: ___________________________________________________________________ Directivas. Las directivas JSP son instrucciones procesadas por el motor JSP cuando la página JSPse traduce a un servlet. Las directivas les dicen al motor JSP que incluya ciertos paquetes yclases. Las directivas están encerradas entre etiquetas de directiva <%@ ... %>. Por ejemplo:4 Los servlets son pequeñas aplicaciones Java que se ejecutan en un servidor web.
  • 55. <%@ page import="javax.naming.*" %> ___________________________________________________________________ Declaraciones. Las declaraciones JSP nos permiten configurar variables para su uso posterior enexpresiones o scriptlets. También podemos declarar variables dentro de expresiones o enscriptlets en el momento de usarlas. Las declaraciones van encerradas entre etiquetas dedeclaración <%! ... %>. Por ejemplo: <%! String text; %> ___________________________________________________________________ Expresiones. La expresiones JSP nos permiten recuperar dinámicamente o calcular valores ainsertar directamente en la página JSP. Las expresiones van encerradas entre etiquetas deexpresión <%= ... %>. Por ejemplo: <%= getDate() %> ___________________________________________________________________ Scriptles. Los scriptlets JSP nos permiten embeber segmentos de código java dentro de unapágina JSP. El codigo embebido se inserta directamente en el servlet generado que se ejecutacuando se pide la página. Los Scriptlets van encerradas entre etiquetas <% ... %>. Por ejemplo:<% int m = 40; System.out.println("jspService m = " + m); %>3.2.2.3 EjemploPongamos un ejemplo real que incluya un texto en una página web (Código 3.17). Las páginasque incluyan código JSP aunque incluyan en su mayoría HTML (fuera del propio JSP), deberánllevar la extensión “jsp”. Código 3.17: Escritura en el cuerpo de la página de un saludo acompañado de la fecha actual<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- XHTML --><%@ page import="java.util.*" %> <!-- importamos toda la librería útil de java --><html> <head></head><body><%! Date theDate = new Date(); // nueva variable que contiene la fecha Date getDate() { // función que muestra un mensaje por pantalla antes de devolver la fecha System.out.println( "Estamos dentro del metodo getDate()" ); return theDate; }%>¡Hola! La hora es <%= getDate() %></body></html>Podemos generar partes de la página web o incluso la página web completa, según nuestrasnecesidades. Ahora vamos ver un ejemplo más completo pero en vez del uso propiamente deJSP en el código de la página web, vamos a realizar una página HTML (Param.html) queincluirá un formulario a rellenar por el usuario (Código 3.18). Cuando éste pulse el botón de"Enviar", se llamará a un servlet (ParamServlet.java) que recogerá los datos tecleados ygenerará una "página dinámica" como respuesta, con los datos y que será mostrada de nuevo alcliente que desencadenó el proceso. Para que exista un servlet atento a las peticiones que levayan llegando, tendremos instalado e iniciado el contenedor de servlets (Tomcat) al queconfiguraremos un archivo (web.xml) donde deben figurar todos los servlets disponibles para suejecución. Código 3.18: Página con formulario que invoca a un servlet<!-- Param.html Lectura de parámetros con formularios + servlets --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- HTML-->
  • 56. <HTML><HEAD><TITLE>Param.html</TITLE></HEAD><BODY> // podemos escribir en mayúsculas<H2>Introduce tus datos:</H2> <!-- Formulario HTML que invocará a un servlet --> <FORM NAME="FORM1" METHOD="POST" ACTION="http://localhost:8080/misServlets/ParamServlet"> // dirección del servlet a invocar Nombre: <INPUT TYPE=TEXTBOX NAME="NOM" VALUE=""> Edad: <INPUT TYPE=TEXTBOX NAME="EDA" VALUE=""> <INPUT TYPE=SUBMIT VALUE="Enviar">// no es necesario el cierre de algunasetiquetas </FORM></BODY></HTML>Observemos unos cuantos puntos importantes. En la página incluimos un formulario rellenable.Comienza con <FORM...> y termina con </FORM>. En él se indica que los datos se enviaránmediante el "Método POST" al servlet, cuyo nombre es "ParamServlet" (Código 3.19) y está enun directorio llamado "misServlets", en el contenedor Tomcat. Dicho contenedor está en elmismo ordenador ya que el nombre del servidor que lo alberga es "localhost". Esa llamada alservlet se producirá en cuando el usuario pulse el botón "Enviar"en <INPUT TYPE=SUBMIT>.La página la colocamos en la carpeta "misServlets" (o el nombre decidido para este fin). Código 3.19: Servlet que devuelve una página con los parámetros recogidos en un formularioimport java.io.*; /* importamos librerías de entrada salida */import javax.servlet.*; /* importamos librerías para servlet, aquí va incluida la propia paraHTML*/public class ParamServlet extends HttpServlet { // creamos servlet public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { res.setContentType("text/html"); // tipo de documento PrintWriter pw = res.getWriter(); // obtenemos un objeto Print Writer para enviar respuesta pw.println("<HTML><HEAD><TITLE>Parámetros leidos</TITLE></HEAD>"); pw.println("<BODY>"); pw.println("<H2>Leyendo parámetros desde un formulario html</H2><P>"); pw.println("Te llamas " + req.getParameter("NOM") + "<BR>"); // obtenemos parámetros pw.println("y tienes " + req.getParameter("EDA") + " años<BR>"); pw.println("</BODY></HTML>"); pw.close(); }}Por último nos queda escribir el descriptor de despliegue (Código 3.20), elemento necesarioantes de que pueda invocarse cualquier servlet y que describe cada uno de ellos. Este fichero sedebe llamar web.xml. Código 3.20: Descriptor de despliegue para la publicación de un servlet<?xml version="1.0" encoding="ISO-8859-1"?><!-- tipo de aplicación web jsp --><web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">
  • 57. <!-- nombre y descripción del descriptor de despliegue --> <display-name>Servlets básico</display-name> <description>Servlets de ejemplo</description> <!-- publicación de nuestros servlets --> <servlet> <servlet-name>ParamServlet</servlet-name> <servlet-class>ParamServlet</servlet-class> </servlet> <!-- indicamos que servlet debe ser llamado por una dirección dada por el cliente --> <servlet-mapping> <servlet-name>ParamServlet</servlet-name> <!-- nombre --> <url-pattern>/ParamServlet</url-pattern> <!-- dirección --> </servlet-mapping></web-app>}Para ejecutar las páginas JSP, se necesita un servidor web con un contenedor web que cumplacon las especificaciones de JSP y de Servlet. Tomcat es una completa implementación dereferencia para las especificaciones Java Servlet y JSP.Cuando el usuario pulse el botón enviar del formulario, se envía la "petición" del usuario. Elcontenedor recibe la petición y buscará el servlet en la lista de los posibles en nuestro descriptorweb.xml. Si todo está bien, será encontrado e invocado, ejecutando el método POST (que escomo el main), ya que así se indicaba en la etiqueta <FORM> de la página HTML. El métodoPost() tiene dos argumentos. El primero representa la "petición" del cliente (usuario remoto) ycon el nombre de HttpServletRequest; el segundo es la "respuesta" que generará el servlet haciael cliente en la forma del objeto HttpServletResponse. El servlet, lo primero, ha de indicar eltipo de información que se va a emitir (html) y luego forma un objeto asociado con el navegadorweb del cliente para imprimir allí los resultados, por medio del método getWriter(). Extraerá losdatos de los cuadro de texto (el nombre y la edad) mediante los métodos getParameter() y sededicará a formar la página HTML dinámica. Una vez terminada, se cierra (close) y es enviadaautomáticamente.3.2.2.4 Ventajas ___________________________________________________________________ Ejecución rápida del servlets. ___________________________________________________________________ Crear páginas del lado del servidor. ___________________________________________________________________ Multiplataforma. ___________________________________________________________________ Código bien estructurado. ___________________________________________________________________ Integridad con los módulos de Java. ___________________________________________________________________ La parte dinámica está escrita en Java. ___________________________________________________________________ Permite la utilización se servlets.3.2.2.5 Desventajas ___________________________________________________________________ Los hostings en Java son más caros. ___________________________________________________________________ La curva de aprendizaje es mayor. No es tan fácil de aprender como PHP, pero a la larga dará
  • 58. mayores frutos.3.2.2.6 Enlace a la API ___________________________________________________________________ API JSP: http://java.sun.com/products/jsp/2.1/docs/jsp-2_1-pfd2/index.html3.2.3 PythonPython es un poderoso lenguaje de programación interpretado. Su sintaxis simple, clara ysencilla; el tipado dinámico, el gestor de memoria, la gran cantidad de librerías disponibles y lapotencia del lenguaje, entre otros, hacen un poderoso lenguaje para el desarrollo web. Figura 3.12: Logo de PythonLos archivos Python tienen la extensión “.py”.3.2.3.1 UsoAlgunos casos de éxito en el uso de Python son Google, Yahoo, la NASA, Industrial Light &Magic, y todas las distribuciones Linux, en las que Python cada vez representa un tanto porciento mayor de los programas disponibles. Aunque Python tenía deficiencias a la hora derendimiento ya no es problema ya que enmascara otros lenguajes, un ejemplo de uso es el dePython con Ogre3D (motor gráfico de videojuegos) donde podemos programar la aplicaciónentera con Python. Para cosas a más bajo nivel Python usa por debajo un modulo para C/C++ uotros lenguajes. Existen muchas de las aplicaciones web de Google que están escritas conPython y uno de los mejores gestores de contenidos que existe (Plone) también está escrito ensu totalidad en Python. (27)3.2.3.2 SintaxisLa sintaxis de Python es minimalista deshaciéndose de todo aquello que no sea necesariamenteimprescindible (Código 3.21). El código de Python dentro de la propia página está incluido entags especiales. Código 3.21: Escritura en la página de una cadenaprint "Hola Mundo"; // muestra en la página la cadena de texto “Hola mundo”El código Python se puede incluir en la página con varias etiquetas: ___________________________________________________________________ Mediante su etiqueta propia {% ... %}. ___________________________________________________________________ Mediante la etiqueta común que también comparten PHP, JSP y ASP: <% ... %>3.2.3.3 EjemploLlegados a este punto si comparamos el ejemplo del Código 3.21 con el de la sintaxis de PHP enel Código 3.13, podemos observar similitudes a la hora de mostrar mensajes, sin embargo alcontrario que PHP, Python es minimalistas en todos los aspectos. Pongamos un ejemplo realcapturar una cámara web (Código 3.22). Código 3.22: Captura de una imagen con una webcam
  • 59. from VideoCapture import Device # de la librería para captura de video importamos el dispositivocam = Device() # nueva variable de dispositivo de capturacam.saveSnapshot(image.jpg) # hacemos foto y guardamos la imagenEn el ejemplo anterior capturamos una imagen desde la cámara web cuando ejecutamos estescript en la página web.Al ser Python uno de los lenguajes de programación más versátiles se usa también paraconstruir sitios web, es una perfecta alternativa a PHP. Con algunos de sus sus módulos cómo el“WSGI Reference Module” podemos comenzar a escribir el código sin preocuparte por cualservidor web vamos a utilizar (Apache u otro).Veamos ahora un ejemplo sencillo similar al que vimos para JSP con el Código 3.17 en elcalculamos y mostramos la fecha actual mediante Python (Código 3.23). Código 3.23: Escritura en el cuerpo de la página de un saludo acompañado de la fecha actual<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- XHTML -->{% import time %} <!-- importamos está librería para la fecha --><html> <head></head><body> ¡Hola! Hoy es es {% print datetime.date.today() %}</body></html>3.2.3.4 Ventajas Lenguaje de propósito general. Gran cantidad de funciones y librerías. Sencillo y rápido de programar. Multiplataforma. Licencia de código abierto (Opensource). Orientado a Objetos. Portable.3.2.3.5 Desventajas Tecnología menos usada de las vistas Falta de documentación de los WebFrameworks3.2.3.6 Enlace a la API ___________________________________________________________________ API Python: http://docs.python.org/library/ ___________________________________________________________________ Frameworks para el desarrollo web: http://wiki.python.org/moin/WebFrameworks3.3ConclusionesLas tecnologías web nos permite crear las aplicaciones web. El conjunto de aplicaciones webactuales, es decir, la Web 2.5 y el futuro la Web 3.0 dependen directamente de las posibilidadesque nos ofrecen estas tecnologías para el desarrollo. Las tecnologías básicas de la que parte todaaplicación web son HTML y CSS para el etiquetado del contenido y el aspecto respectivamente,seguidas de uno o varios lenguajes de programación interpretados tales como JavaScript, PHP oJSP entre otros.
  • 60. A lo largo de los años estas tecnologías se han ido perfeccionando. En la actualidad existenmultitud de opciones de desarrollo de aplicaciones web, dependiendo del proyecto seráconveniente elegir una tecnología u otra pero por lo general lo más usado en la Web 2.5 esprecisamente lo hemos visto.Nos hemos embarcado en un breve recorrido histórico sobre las tecnologías, hemos comentadolos lenguajes de etiquetado y los interpretados más extendidos tanto desde el lado del clientecomo del servidor, con sus ventajas e inconvenientes. A continuación mostraremos una tablacomparativa donde tratamos aspectos de uso, tipo de programación y expresividad. Yterminaremos mostrando gráficos de popularidad actual y tendencia para los lenguajes quehemos tratado en comparación con el resto (hemos explicado los que más se usan y los que másse usarán). Tabla 3.2: Lenguajes de programación vistos para la web Uso Tipo de Programación Expresividad Imperativa, Orientada a objetos, Funcional, JS Web - Cliente **** Reflexiva Imperativa, Orientada a objetos, de PHP Web - Servidor *** Procedimientos, Reflexiva Aplicación, Imperativa, Orientada a objetos, Genérica, JSP *** Web - Servidor Reflexiva General, Imperativa, Orientada a objetos, Orientada aPython Aplicación, ***** aspectos, Funcional Reflexiva Web - Servidor3.3.1 TendenciaPara terminar con el apartado de conclusiones vamos a utilizar, al igual que hicimos en elcapitulo anterior y en los siguiente, la herramienta Google Insights para ver la tendencia en estecaso de las tecnologías web estudiadas.Vamos a introducir el nombre de las tecnologías vistas más otras existentes en el mercadomenos usadas y/o privativas para poder comparar la tendencia. Seleccionaremos la categoría“Internet” para que no quepa duda en la ambigüedad de las búsquedas, haremos una búsqueda anivel mundial e incluiremos el margen total de tiempos posible, es decir, desde que se contabacon estadísticas de los términos (mediados de 2003) hasta el máximo previsto por la tendencia(mediados de octubre de 2011).Para el caso de los tecnologías desde el lado del cliente compararemos los lenguajes deprogramación y frameworks estudiados y añadiremos algunas de las tecnología propietarias másusadas: ___________________________________________________________________ JavaScript (no necesitamos instalar nada) ___________________________________________________________________ jQuery (necesitamos enlazar la librería) ___________________________________________________________________ Applets de Java (necesitamos máquina virtual de Java) ___________________________________________________________________ ActionScript (necesitamos Adobe Flash Player instalado, propietario de Adobe) ___________________________________________________________________ S
  • 61. ilverlight (necesitamos instalarlo, propietaria de Microsoft) Figura 3.13: Tendencia de popularidad de las tecnologías en el lado del clienteA la vista de los resultados mostrados en la Figura 3.13 apreciamos la fuerte popularidad que hatenido JavaScript desde sus orígenes y como ha ido cayendo independientemente delsurgimiento de sus tecnologías competidoras. Cabe destacar que parte de la caída queapreciamos en JavaScript se debe a la delegación de funcionalidad en algunas de sus propiaslibrerías como jQuery. En la predicción tiende a estabilizarse gracias al uso conjunto conHTML5 que veremos en el último capítulo y que le está proporcionando popularidad. Por otrolado, observamos como las tecnologías de Apple y Sun: ActionScript (Flash/Flex) y los Appletsse mantienen mientras que Silverlights tiene una ligera tendencia a incrementar su popularidadgracias a las promociones de Microsoft.Además, debemos destacar que la tecnología de Flash, es decir, ActionScript debería haberrepresentado una cuota mayor (normalmente se suele buscar por Flash) ya que tiene el dominioabsoluto en cuanto a contenedor de formatos de vídeo en Internet.Sin duda, la competencia es buena pero tanto para Flash como para Silverlight necesitamosinstalar software a parte y pagar por su desarrollo cuando podemos hacer las mismas cosas conJavaScript directamente o algunos de sus librerías o frameworks. Quizás la parte de contenedorde vídeo que también integra Flash es la que hechariamos en falta. pero para eso ha surgido porfin un contenedor libre de vídeo/audio el WebM y formatos libres de calidad como VP8. Estástecnologías junto con otras las veremos en el último capítulo.Intentando vaticinar un futuro de cara a la Web 3.0 podríamos arriesgarnos a pronosticar segúnlos datos estudiados y las pruebas realizadas que la mayor parte del mercado se lo llevaránJavaScript y sus bibliotecas y frameworks, seguidos de Flash que apoya los formatos librescomo VP8, siempre y cuando se utilice su contenedor. Para terminar pronosticamos que latecnología de Silverlight seguirá al alza algunos años pero levemente aprovechando también latirada de ASP que seguramente ofrezca cada vez más facilidades de integrar e interactuar conSilverlight. De todas formas, Silverlight reducirá su cuota notablemente cuando pase de modapor oponerse Microsoft tanto al formato libre de vídeo VP8 como al contenedor WebM. Lamayoría de desarrolladores en Internet son independientes, libres y siempre buscarán lasmejores alternativas sin costes.Para el caso de las tecnologías en el lado del servidor compararemos las tecnologías estudiadasjunto con alguna propietaria: ___________________________________________________________________ PHP
  • 62.  ___________________________________________________________________ JSP de Java ___________________________________________________________________ ASP de .NET (necesitamos servidores Windows, propietaria de Microsoft) ___________________________________________________________________ Python Figura 3.14: Tendencia de popularidad de las tecnologías en el lado del servidorA la vista de los resultados mostrados en la Figura 3.14 apreciamos la fuerte popularidad que hatenido PHP desde sus orígenes y como ha ido cayendo independientemente del surgimiento desus tecnologías competidoras. Lo mismo ocurre para ASP pero con una caida más abruptallegando a sobrepasar su popularidad a mediados del 2008 por Python. En la predicción PHPtiende a estabilizarse gracias al gran conjunto de aplicaciones gratis que usan PHP y que ha díade hoy tienen tendencia de seguir aumentando su popularidad, nos referimos a los CMSs(Sistemas de Gestión de Contenidos), Blogs, Wikis y Foros hechos en PHP más usados enInternet y que veremos en el siguiente capítulo. Por otro lado JSP parece mantener supopularidad aunque por debajo de ASP que es su competidor más directo.Un dato curioso que podemos apreciar es que no existe previsión para Python, muchascompañías están apostando por está tecnología por su potencia y sencillez pero es sin dudaGoogle el que más está influyendo últimamente. Concretamente el código de Google estáescrito en Python y en Java, no sabemos el por qué pero Google nos oculta dicha predicción.Intentando vaticinar un futuro de cara a la Web 3.0 podríamos arriesgarnos a pronosticar segúnlos datos estudiados y las pruebas realizadas que la mayor parte del mercado se lo llevarán PHPy Python, seguidos de JSP.
  • 63. CAPÍTULO 2 Capítulo 4 “First we thought the PC was a calculator. Then we found out how to turn numbers into letters with ASCII - and we thought it was a typewriter. Then we discovered graphics, and we thought it was a television. With the World Wide Web, weve realized its a brochure.” ~ Douglas AdamsCAPITULO 4: GESTORES DE CONTENIDOSU n sistema de gestión de contenido ( CMS) permite la creación y administración de contenidos principalmente en páginas Web. Se trata de una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio, permitiendo manejar de manera independiente el contenido y el diseño. Así, esposible manejar el contenido y darle en cualquier momento un diseño distinto al sitiosin tener que darle formato al contenido de nuevo, además de permitir la fácil ycontrolada publicación en el sitio a varios editores.Un sistema de gestión de contenidos (CMS) permite la gestión dinámica de contenido,incluyendo texto y gráficos, y contenidos 3D como mapas y escenas virtuales. En laspáginas HTML estáticas, cada vez que quiere introducirse un cambio o unaactualización en la página web, el generador de contenidos tiene que descargar lapágina, editarla y volverla a actualizar en el servidor. Únicamente el administrador ousuarios con los mismos permisos pueden actualizar la página. En un sistema CMSdinámico, sólo es necesario actualizar la página durante la instalación inicial del CMS.Si se desea añadir un nuevo contenido, basta utilizar un buscador web ordinario y clicarpara incluir nuevos contenidos.El contenido debe ser aprobado por el administrador del sistema o el grupo de personasencargadas del mantenimiento, que serán los que aprueben dicho contenido.Un CMS incluye herramientas de autor para la generación de contenidos, de modo quelos usuarios sin conocimientos informáticos avanzados puedan generar dichoscontenidos de una forma sencilla. Para ello, se suelen utilizar editores WYSIWYG, enlos que el usuario ve y edita el resultado final directamente. Estos sistemas hacentransparente el código de las páginas, simplificando enormemente el proceso decreación y edición. También se suelen ofrecer herramientas más avanzadas parausuarios con mayores conocimientos, permitiéndoles por ejemplo, editar códigodirectamente.Para llevar a cabo la gestión de documentos, se utiliza una base de datos que almacenalos documentos junto a información de control de documentos (versiones, autores,fechas,...), preferencias de usuarios, estructura de navegación,...Existen hoy en día un gran número de sitios y portales en Internet de gran interés PÁGINA 47 DE 172
  • 64. dedicados a abordar el tema de la gestión de contenidos Web, por lo que remitimos aellos para un conocimiento más profundo de la situación del mercado actual. Entretodos ellos se incluyen, dentro de los de carácter general: CMS Watch(http://www.cmswatch.com/), CMS Matrix (http://www.cmsmatrix.org/), CMSDirectory(http://www.cmsdirectory.com/), Clueful Consulting(http://www.clueful.com.au/cmsdirectory/) o, en el caso español, CMS-Spain.com(http://www.ecm-spain.com/). Entre los dedicados con exclusividad a los WCM desoftware libre, pueden citarse: cmsInfo.org (http://www.cmsinfo.org/), La-grange.net(http://www.la-grange.net/cms) u OpensourceCMS (http://www.opensourcecms.com/).A la hora de elegir un CMS, existen diferentes alternativas tanto de productoscomerciales como de software libre. En la web http://www.cmsmatrix.org/, se puedencomparar las principales características de los productos existentes. Se han desarrolladonumerosas alternativas, aunque la modularidad de los CMS permite la utilización desoluciones genéricas. Dentro del software libre, destacan OpenCms (www.opencms.org)y MySource Matriz (http://matrix.squiz.co.uk).4.1Caracterización de los gestores de contenidosLos gestores de contenidos a menudo intentan cubrir un amplio espectro de necesidadesde distribución de información, por lo que incorporan múltiples herramientas quepermiten la distribución de los contenidos gestionados a través de diversos canales,formatos y sistemas de gestión.La mayor parte de los gestores de contenidos existentes se centran en la construcción deportales para internet, si bien ofrecen muchas posibilidades en cuanto a distribución decontenidos por distintos canales. No obstante este capítulo se centraráfundamentalmente en el estudio de los gestores de contenidos para la construcción deportales en internet.En la construcción de portales en internet, a menudo resulta ambiguo hablar de “gestorde contenidos” dado que su uso puede estar especializado en una o varias líneas sindejar por ello de estar orientado a la gestión y difusión de información: ____________________________________________________________ Gestión de contenido optimizado para internet (texto, imágenes). ____________________________________________________________ Gestión de contenido multimedia. ____________________________________________________________ Gestión documental. ____________________________________________________________ Gestión de portales. ____________________________________________________________ Gestión de tramitación y workflow. ____________________________________________________________ Gestión de trabajo colaborativo. ____________________________________________________________ Gestión de sistemas de comercio electrónico. ____________________________________________________________ Herramientas de soporte a la web 2.0.
  • 65. No es raro encontrar herramientas que cubran varios de estos ámbitos, sin embargo esmás habitual el uso de herramientas específicas para cada uno de ellos.Sin embargo, además del objetivo propiamente funcional del gestor de contenidos, esnecesario tener en cuenta los siguientes aspectos a la hora de evaluar el tipo de gestor autilizar o desarrollar. CMSMatrix (http://www.cmsmatrix.org) presenta los siguientesaspecto a la hora de evaluar las distintas herramientas: ____________________________________________________________ Requisitos del sistema: Servidor de aplicaciones, servidor web, base de datos,licenciamiento, sistema operativo. ____________________________________________________________ Seguridad: Sistemas de auditoría, integración con sistemas de autenticación, granularidadde los privilegios, soporte de protocolos seguros. ____________________________________________________________ Soporte: Curva de aprendizaje, documentación, soporte online, disponibilidad de APIs dedesarrollo. ____________________________________________________________ Facilidad de uso: Elaboración de contenidos con editor WYSIWYG y uso de drag-n-drop, asistentes para incorporación de elementos multimedia, lenguaje de macros,asistentes, correctores ortográficos, plantillas… ____________________________________________________________ Rendimiento: Uso de memorias cachés, balanceo de carga, replicación de bases de datos,exportación a contenidos estáticos. ____________________________________________________________ Gestión: Gestión de publicidad, programación de publicación de contenidos, gestión deportales, uso de temas, estadísticas, sindicación de contenidos, opciones deinteroperabilidad, workflow, uso de metadatos… ____________________________________________________________ Herramientas incluidas: blog, chat, wiki, gestión de contactos, foros, gestión dedocumentos, gestión de eventos, calendario, FAQ (Preguntas Frecuentes), gráficos,galerías, seguimiento de proyectos, motor de búsqueda… ____________________________________________________________ Soporte a comercio electrónico: Sistema de afiliación, medios de pago, gestión deinventario, carrito de la compra…4.2Módulos de los gestores de contenidosLos módulos software que se pueden encontrar en las herramientas de gestión decontenidos son los siguientes: ____________________________________________________________ Content Manager: - Creación y edición de contenidos - Gestión de validación y distribución de contenidos (workflow) - Publicación de contenidos - Gestión del ciclo de vida de los contenidos ____________________________________________________________ Portal manager:
  • 66.  ___________________________________________________________________ Módulo de integración con datos de negocio (soportados en bases de datos relacionales,archivos XML, etc) ____________________________________________________________ Herramientas de comunicación hacia y entre usuariosA continuación se detallan someramente las funcionalidades que incluyen cada unos deestos módulos:4.2.1 Creación y edición de contenidosLas herramientas permiten la definición de tipos de contenidos, los cuales pueden estarformados por múltiples tipos de campos (cadenas, fechas, imágenes, textoenriquecido,...) incluso se pueden anidar tipos de contenido para conseguir tiposcompuestos.A los tipos de contenidos se les asocian los workflows (flujos de trabajo) que seaplicarán a todos los contenidos que se generen de dicho tipo.Los tipos de contenidos permiten la inclusión de campos de tipo maestro-detalle. Estemecanismo se utiliza para solucionar el problema de los contenidos multiidioma.Los usuarios pueden crear y editar contenidos accediendo a la aplicación cliente yañadiéndolos a través de los formularios de cada uno de los tipos de contenidos queexisten. Además se puede permitir que desde la vista previa de presentación del Portalse pueda acceder a la gestión de los contenidos, ofreciendo así al usuario varios modosde acceder al repositorio y modificar los contenidos viendo sobre la marcha el resultadoque obtiene en el portal por el que ha accedido a los mismos.4.2.1.1 PlantillasTambién se pueden crear contenidos a través de plantillas de documentos externos(como podrían ser documentos de paquetes ofimáticos), si bien lo habitual es que lossistemas ofrezcan unas plantillas predefinidas.Como se ha mencionado es interesante que el gestor de contenidos permita hacer unavista previa de cómo quedará el contenido en el portal destino de publicación. Para ello,hay que asociar a los tipos de contenidos las plantillas que los transforman en páginasHTML (lenguaje usado por todos los navegadores de internet para visualizarinformación).Existen un tipo de plantillas bastante extendidas: las plantillas XSL.XSL es una familia de lenguajes basados en el estándar XML que permite describircómo la información contenida en un documento XML cualquiera debe sertransformada o formateada para su presentación en un medio.Normalmente los gestores de contenidos no incluyen editores de plantillas XSL, peroéstas se pueden desarrollar con cualquier aplicación de edición de texto o usandoprogramas destinados al diseño de páginas web (como por ejemplo el popularDreamweaver).XML es un metalenguaje extensible de etiquetas usado para almacenar los datos oinstrucciones que se definan para cada uso particular. En el caso que nos ocupa el XMLalmacenaría los contenidos concretos a visualizar, así como otros metadatos, que encombinación con la plantilla XSL ofrecerían al usuario final la informacióncorrectamente formateada.Dado que lo habitual es que el almacén de la información sea una base de datos, los
  • 67. gestores de contenidos generan en tiempo de ejecución (bien sea en modo batch uonline) los XML y los combinan con las XSL sin necesidad de que existan físicamenteunos archivos XML.4.2.1.2 Gestión documentalAlgunos sistemas permiten incluir como parte de los contenidos archivos anexos alobjeto de ponerlos disponibles para la descarga del usuario. Sin embargo, más allá de lasimple descarga, algunos son capaces de integrar documentos externos en un sistema degestión documental propio, permitiendo reutilizar parte del contenido para generarnuevos contenidos. Esto suele ser especialmente relevante en entornos corporativos y ensistemas de gestión del conocimiento.Independientemente del uso o no de documentos complementarios, algunos gestores decontenidos intentan realizar una auténtica gestión documental con la información quelos usuarios almacenan. Para ello implementan sistemas de catalogación de lainformación que permiten organizarla de acuerdo a taxonomías y categorías, o usandosimples técnicas de etiquetado que pueden estar más o menos sistematizadas.4.2.1.3 Contenidos complementariosBajo este epígrafe podemos considerar todos aquellos elementos que el sistema ofrece alusuario final para ampliar la información del contenido que está visualizando. Estainformación adicional puede ir desde otros contenidos ofrecidos como enlaces hasta lainclusión de promociones relacionadas con el contenido.Para ello algunas herramientas permiten clasificar a los visitantes del portal en gruposlógicos y así determinar qué tipo de contenido es más apropiado para determinadossegmentos y así promocionar contenidos y realizar ofertas a los clientes adecuados.En estos casos es de vital importancia que el sistema disponga de estrategias para elcontrol de los enlaces entre la información, de forma que cuando algún contenido dejede estar disponible se reorganicen todos los enlaces al mismo.4.2.2 Gestión de validación y distribución de contenidosPor gestión de contenidos debemos entender todas aquellas operaciones a realizar paraque los contenidos puedan ser editados y formateados.Entre las operaciones a realizar están la de la creación y asignación de roles para lacreación y edición de contenidos, roles para su posible traducción, validación yoperativa para su distribución.La gestión se sofistica más cuando un contenido concreto a mostrar al usuario final nose puede manipular como un elemento atómico dentro del gestor, sino que requiere laintervención de varias personas para su redacción, traducción o validación.Para todo ello existen herramientas que permiten la gestión de roles, asignación deusuarios a los mismos y definición de tareas a realizar sobre los tipos de contenidos.Los circuitos de traducción, validación, distribución y publicación se definen a través desistemas de workflow sobre los roles o usuarios.En función de la complejidad de dichos circuitos se pueden hacer necesarias utilidadespara modelar visualmente los workflow o incluso APIs para que personal especializadoprograme los flujos de trabajo necesarios.Es recomendable que estos flujos generen definiciones de procesos en formato xpdl, quees un estándar de definición de workflows, lo cual facilita cualquier migración posterior(si fuera necesaria) a otros sistemas de workflow que soporten el estándar xpdl.
  • 68. Estos workflows sirven para determinar los procesos por los que deben pasar losdiferentes contenidos en función de su tipo. Por lo que los gestores de contenidosdefinen una matriz en la que asignan unas operaciones sobre unos tipos de contenidos aunos roles o usuarios concretos.Con todo ello aparece implícitamente el concepto de tarea a realizar por cada usuariodentro del workflow cuando éste se activa. Por tanto es útil que cuando los usuarios seconectan a la aplicación dispongan de una lista de temas pendientes en función de suparticipación en los diferentes flujos definidos en el sistema.Por otro lado algunas herramientas incorporan una consola de administración desde laque se puede ver el estado en el que se encuentran los diferentes workflows activos.Desde los workflows también se pueden activar eventos de notificación para losusuarios, como por ejemplo enviar emails cuando un contenido de un determinado tipoha sido creado, etc.4.2.3 Publicación de contenidosLa publicación de contenidos se lleva a cabo mediante la utilización de los servicios deentrega de contenidos.Las áreas principales de los servicios de entrega son la entrega del contenido a través dediversos canales y el análisis de logs y datos de los sites.Si bien la gestión de los contenidos está centralizada, la publicación de los mismospuede ser distribuida. Se puede permitir mantener múltiples portales publicando loscontenidos de muchas formas diferentes, por ejemplo, se pueden publicar contenidosactualizando las bases de datos de explotación de las aplicaciones del cliente. Tambiénpuede publicar copiando ficheros en distintos formatos (HTML, JSP, texto, XML, etc.)en los sistemas de ficheros de los diferentes servidores en los que se ejecutan nuestrossitios web o aplicaciones.La publicación en bases de datos está pensada principalmente para que el cliente notenga que cambiar sus bases de datos de explotación, siendo el gestor de contenidos elque se adapta a los modelos de datos del cliente para poder realizar la publicación decontenidos en dichos repositorios de explotación.El entorno de publicación no necesita necesariamente acceso a la base de datos centraldel repositorio (funcionamiento offline), pero sí a una base de datos o sistema deficheros con los datos publicados en dicho entorno, pudiéndose automatizar losprocesos de publicación entre diferentes entornos de publicación (pruebas,preproducción y producción) desde las propias definiciones de workflows.Para la publicación se pueden usar agentes de publicación, que son programas que seejecutan en servidores de aplicaciones. Estos agentes son especialmente importantes siel sistema debe mantener una alta disponibilidad, pues automatizan la distribución decontenidos entre todos los sistemas que conforman el clúster de alta disponibilidad.La distribución de los contenidos de los portales se organiza en "canales", que suelen sercarpetas donde se ubican los diferentes contenidos. Es una organización jerárquica quese puede mostrar en la web o en otro medio de diferentes formas según la plantilla quese asigne a su representación.Cada canal puede presentar restricciones en cuando al tipo de contenido o formato (porejemplo por algunos canales no se puede transmitir vídeo, o sólo un texto de tamañolimitado). Para ello en la definición de las plantillas se puede limitar la libertad deacción de los diferentes roles para asignar los contenidos a los huecos habilitados en laplantilla para los mismos. El usuario al indicar qué contenidos deben ir en cada hueco
  • 69. de la plantilla puede además definir las reglas para la selección de los contenidos amostrar.Como apoyo a la gestión de contenidos en distintos canales algunos sistemas incorporanunos filtros de contenidos que son capaces de adaptar el contenido para cada canal. Estatécnica es muy utilizada en gestores de contenidos de vídeo, donde el vídeo original sealmacena en alta calidad, pero luego se distribuye automáticamente en distintascalidades en función del canal de distribución.La entrega de contenidos es el proceso de presentar al usuario final los contenidos quehan sido publicados. Hay múltiples formas de realizar la entrega de contenidos, entre lasque destacan: ____________________________________________________________ Generación de portales basados en lenguajes de script dinámicos (JSP, PHP, ASP). ____________________________________________________________ Generación de portales 100% en HTML. ____________________________________________________________ Uso de una API para la obtención de los contenidos gestionados. ____________________________________________________________ Para el caso de aplicaciones basadas en tecnología J2EE se pueden generar portletspublicados en portales gestionados por otra herramienta.La solución más eficaz desde el punto de vista de la velocidad de visualización decontenidos es la generación del portal 100% en HTML, pero esta alternativa sólo esfactible si los contenidos no tienen una alta frecuencia de cambio.En el otro extremo están los contenidos que se obtienen en tiempo real, lo que obliga auna mayor carga de proceso a los sistemas de visualización.Existen soluciones intermedias que suelen basar su funcionamiento en el uso de cachésde almacenamiento intermedio, siendo sobre todo útiles cuando la visualización serealiza desde clientes pesados (una caché ubicada en el propio cliente permitiría lavisualización de contenidos offline, cosa que no es posible en ningún otro caso).4.2.4 Gestión del ciclo de vida de los contenidosDesde el punto de vista de la generación y edición de los contenidos, y más allá de lodefinido en el workflow, algunos gestores de contenidos incorporan un sistema decontrol de versiones que permite recuperar versiones previas de los contenidos, asícomo la comparación entre versiones diferentes de los mismos. Este sistema permite elbloqueo de los contenidos durante su edición para evitar que un mismo contenido seamodificado a la vez por más de un usuario. Sin embargo lo habitual es que el control deversiones se incorpore en herramientas de gestión documental o en herramientas detrabajo colaborativo.Desde el punto de vista de la explotación de los contenidos, existen herramientas quepermiten consultar información de acceso a los sites y sus contenidos. Estasherramientas permiten diferentes tipos de consultas, informes y gráficas de accesos porcontenidos, tipos de contenidos, etc.Para obtener toda esta información se utilizan los logs propios de los servidores web yse cruzan con los logs propios de las APIs del gestor de contenidos, para así conseguir lainformación de acceso a las páginas de un site y a sus contenidos (esto último no sepuede conseguir analizando sólo los logs de los servidores web).
  • 70. Una vez los contenidos han caducado, pueden desaparecer o pasar a formar parte de unrepositorio o una hemeroteca. Para acceder tanto a estos contenidos como a losactualmente vigentes, es importante que tanto los gestores como los usuarios finalesdispongan de un buscador de contenidos que permita su rápida localización yvisualización.4.2.5 Portal managerCuando se desea publicar los contenidos en más de un portal es importante disponer deuna funcionalidad adicional de gestión de portales.Los gestores de portales suelen ser los encargados de gestionar la disposición losaccesos a la información estructurando los sistemas de menús o de acceso a los sistemasde categorización de los contenidos.Estas herramientas se complementan con las de generación de comunidades oherramientas de Web 2.0, pues todo ello dota de mayor versatilidad a los portales. Sinembargo el factor fundamental consiste en disponer de una consola centralizada quepermita la gestión de todos los portales, la gestión de acceso a los contenidos y lagestión de usuarios y grupos para cada uno de los portales.En estas herramientas se permite la generación de los elementos de navegación (menús),las páginas, los estilos, temas y la gestión de los Portlets (en caso de arquitecturasJAVA) de cada uno de los portales gestionados.Desde la administración central del sistema se pueden crear administradores de cadauno de los portales, para delegar la administración de los diferentes portales.4.2.6 Integración con datos de negocioLos sistemas de gestión de contenidos suelen tener que integrarse con otros sistemas deinformación, sobre todo si están orientados al mercado corporativo.La mayor parte de los gestores son capaces de integrarse con sistemas de autenticaciónde usuarios tipo LDAP (Protocolo Ligero de Acceso a Directorios), de tal manera que labase de usuarios gestores del sistema se obtiene desde una fuente externa.Más allá de la autenticación existen sistemas que incorporan diversos medios deintegración con CRMs (Administración basada en la Relación con los Clientes) o ERPs(Planificación de Recursos Empresariales) de tal forma que se pueda realizar tanto unaexplotación de los datos obtenidos desde el portal como una publicación de loscontenidos extraídos de esos sistemas.Otra característica destacada es la capacidad de acceder a repositorios virtuales. Sepueden modelar tipos de contenidos sobre repositorios existentes, sin llegar aincorporarlos físicamente en la base de datos del gestor de contenidos.4.2.7 Herramientas de comunicaciónMuchos gestores de contenidos incorporan herramientas de comunicación entre usuariosque van desde las mensajería más básica, foros y chats hasta las herramientascolaborativas propias de la Web 2.0.Estas herramientas, aunque en un principio son ajenas al resto del funcionamiento delgestor de contenidos, se pueden integrar mediante sistemas de búsqueda que permitan alos usuarios localizar información adicional a la originalmente publicada. Esto conllevauna gestión adicional de políticas de acceso y control de los contenidos.
  • 71. 4.2.8 Arquitectura generalLa arquitectura funcional de los sistemas de gestión de contenidos contempla lossiguientes elementos. ____________________________________________________________ Servidor central para el soporte de las aplicaciones ____________________________________________________________ Base de datos central relacional, documental o ambas ____________________________________________________________ Clientes de gestión, ligeros o pesados. ____________________________________________________________ Clientes ligeros o pesados para el usuario final. ____________________________________________________________ Opcionalmente base de datos en las estaciones de gestión. ____________________________________________________________ Opcionalmente base de datos en las estaciones reproductoras.
  • 72. CAPÍTULO 2 Capítulo “Software is like sex: its better when its free” 5 ~ Linus TorvaldsCAPITULO 5: APLICACIONES ntes de adentrarnos en este capítulo es necesario matizar el concepto deA aplicación web. Podemos definir dos conceptos, el de aplicación web de uso final, es decir, aquella aplicación que está lista para ser usada a través de Internet y el de aplicación web como herramienta para crear una aplicación webfinal. De entre estos dos conceptos estamos interesados en el segundo, las aplicacionesweb de cara a la producción y realización de la Web 3.0. Estas aplicaciones no son másque uno o varios conjuntos de tecnologías web combinadas de tal forma que nosproporcionan una capa superior de abstracción para asegurarnos el correctofuncionamiento de la o las tecnologías vistas en el capítulo anterior.Todas estas aplicaciones que nos facilitan el uso de las tecnologías web puedenclasificarse en un conjunto de diecisiete categorías: ____________________________________________________________ Analizadores ____________________________________________________________ Blogs ____________________________________________________________ CAPTCHAs ____________________________________________________________ CMS ____________________________________________________________ Sistemas de comentario ____________________________________________________________ Administradores de bases de datos ____________________________________________________________ Herramientas de documentación ____________________________________________________________ Editores ____________________________________________________________ Script para fuentes de texto ____________________________________________________________ P PÁGINA 57 DE 172
  • 73. aneles para hospedaje web ____________________________________________________________ Seguidores de incidencias ____________________________________________________________ Foros ____________________________________________________________ Wikis ____________________________________________________________ Galerías de imágenes ____________________________________________________________ Visualizadores de vídeo ____________________________________________________________ Widgets ____________________________________________________________ EshopsPara el estudio de estas aplicaciones se han realizado una series de mediciones ycomparaciones de uso en Internet empleando el analizador de tecnologías webWappalyzer. Gracias a una comunidad en aumento de 75.993 usuarios que incorporanWappalyzer en Firefox se puede obtener una idea de las aplicaciones de desarrollo webmás empleadas en Internet (28). Concretamente, la información mostrada en la tablas escorrespondiente al número de instalaciones de aplicaciones para web correspondiente almes de Junio de 2010.A continuación se describen la lista de categorías de aplicaciones web junto con losdatos obtenidos. Los datos obtenidos nos dan una aproximación del uso de la aplicacióngracias a que nos facilita el número de sitios web que incorporan la aplicación, númerode usuarios que hacen uso de la aplicación y páginas vistas que integran la aplicación.Asimismo para cada una de las categorías se describe la aplicación más usada.5.1AnalizadoresLos Analizadores son aplicaciones que ofrecen servicios de estadísticas para sitios web.Entre los tres Analizadores más importantes encontramos a Google Analytics, Quantcasty StatCounter. El primero y el último tienen la misma funcionalidad ofrecen serviciossobre varios sitios web sin embargo, Google Analytics ofrece un servicio mucho máscompleto, robusto y personalizable y es por ello que es el número unoindiscutiblemente. Por otro lado, Quantcast es más usado para estadísticas de visitantesy crecimientos muchos sitios web, es decir, comparaciones masivas pero no tanpersonalizadas y configurables.A continuación en la Tabla 5.1, por orden de uso mostramos las aplicaciones más usadaspara el estudio estadístico de webs. Tabla 5.1: AnalizadoresOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 Google Analytics 80.0 % 581.726 45.5 % 113.850 80.8 % 3.337.381
  • 74. 2 Quantcast 8.6 % 62.828 19.9 % 50.379 10.0 % 413.821 3 StatCounter 2.7 % 19.668 7.1 % 18.057 1.6 % 66.163 4 Yandex.Metrika 2.0 % 14.639 4.2 % 10.759 1.7 % 71.836 5 XiTi 1.2 % 8.837 2.9 % 7.404 1.2 % 49.764 6 Site Meter 1.0 % 7.535 3.5 % 8.810 0.6 % 23.583 7 Clicky 0.8 % 5.814 2.8 % 7.028 0.5 % 22.087 8 chartbeat 0.7 % 5.351 4.3 % 10.947 1.0 % 39.381 9 Mint 0.6 % 4.576 2.3 % 5.916 0.3 % 14.059 10 Piwik 0.5 % 3.746 1.7 % 4.178 0.7% 28.462 11 ClickTale 0.5 % 3.499 2.0 % 5.145 0.4 % 17.071 12 Crazy Egg 0.3 % 2.480 1.4 % 3.448 0.2 % 7.566 13 Nedstat 0.2 % 1.783 0.6 % 1.547 0.6 % 23.375 14 Yahoo! Web Analytics 0.2 % 1.436 0.9 % 2.282 0.2 % 6.656 15 Kampyle 0.1 % 655 0.3 % 704 0.1 % 3.268 16 OneStat 0.1 % 645 0.4 % 959 0.1 % 2.841 17 AwStats 0.1 % 455 0.2 % 398 0.0 % 1.369 18 Snoobi 0.1 % 315 0.1 % 238 0.0 % 1.348 19 W3Counter 0.0 % 279 0.3 % 641 0.0 % 1.145 20 Gravity Insights 0.0 % 164 0.1 % 195 0.0 % 710 21 Web Optimizer 0.0 % 93 0.0 % 97 0.0 % 260 22 ConversionLab 0.0 % 89 0.0 % 84 0.0 % 329 23 Koego 0.0 % 61 0.0 % 63 0.0 % 146 24 VisualPath 0.0 % 52 0.0 % 49 0.0 % 1935.1.1 Google AnalyticsA grandes rasgos Google Analytics ofrece estadísticas sobre la inversión publicitaria,seguimiento de canales de tráfico y elementos multimedia, informes personalizados paraestadísticas especificas, gestión para compartir y comunicar la información, consulta de datosmediante gráficas, tablas, localización, etc y fiabilidad y facilidad de integración. (29)En la Figura 5.1 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.5.1.2 Características de Google Analytics5.1.2.1 Estadísticas sobre la inversión publicitariaGoogle Analytics ofrece seguimiento de ventas integrándose perfectamente con otros serviciosde Google como pueden ser AdWords y AdSense. Con AdWords, Google Analytics recopila losdatos posteriores a los clics sobre palabras clave, consultas de búsqueda y tipo de concordancia.Los informes de AdSense que vemos a través de Google Analytics muestran el contenido delsitio que genera más beneficios.
  • 75. Figura 5.1: Captura de pantalla de Google AnalyticsPor otro lado, para amortizar nuestra inversión publicitaria podemos realizar seguimientos decampañas por correo electrónico, usando anuncios de banner o anuncios convencionales,supervisar las transacciones en campañas y en palabras clave consultando los indicadores delatencia y de fidelización e identificando las mejores fuentes de ingresos para el sitio web.5.1.2.2 Seguimiento de canales de tráfico y elementos multimediaGoogle Analytics ofrece seguimiento de sitios web para móviles, aplicaciones para móviles ydispositivos móviles habilitados para web, incluidos los teléfonos de última generación y los nohabilitados para JavaScript.Podemos analizar a los usuario que visitan nuestro sitio y conocer su intención sabiendo québuscan realmente para poder anticiparnos lanzando ofertas.Además todas las estadísticas pueden compararse con las de otros sitios, es decir, usandoGoogle Analytics podemos observar si los indicadores de uso del sitio están por encima o pordebajo de los estándares del sector en el que se sitúa nuestra web.Asimismo, Google Analytics cuenta con herramientas para supervisar el uso de algunasaplicaciones web (Redes Sociales, Blogs...) y algunas tecnologías web (Ajax, Flash...).
  • 76. 5.1.2.3 Informes personalizados para estadísticas específicasGoogle Analytics permite que podamos analizar subconjuntos del tráfico del sitio.Seleccionando un informe personalizado predefinido, como "Tráfico de pago" o "Visitas conconversiones", o bien podemos crear un informe personalizado nuevo gracias a una herramientainterna que ofrece el propio Google Analytics. Una vez tengamos creado un informepersonalizado podemos guardarlo y editarlo como queramos.A la hora de enviar informes personalizados, Google Analytics permite mediante un panel envíoindividual o por grupos de los informes generados a personal interesado.También aparte de exportar los informes podemos desarrollar aplicaciones de cliente con el APIde exportación de datos de Google Analytics. Podemos personalizar el seguimiento de losvisitantes usando el propio API de seguimiento de Google Analytics.Google Analytics supervisa los informes y alerta automáticamente de los cambios importantesen los patrones de datos nada más entrar en la aplicación. También podemos configurar alertaspersonalizadas para que nos avise cuando se alcancen determinados umbrales.Por último, una vez generados los datos se pueden hacer análisis de forma avanzada usandotablas dinámicas, varias dimensiones y funciones de filtrado. Para exportarlo podremos hacerloa los formatos más extendidos: PDF, Excel, CSV, etc.5.1.2.4 Gestión para compartir y comunicar la informaciónGoogle Analytics nos permite programar o enviar correos electrónicos con informespersonalizados con la información que queramos compartir.5.1.2.5 Consulta de datosGoogle Analytics ofrece en todo momento gráficos dinámicos que añaden un sofisticadoanálisis de varias dimensiones a la mayoría de los informes generados. Podemos seleccionar losindicadores del eje "x" y del eje "y", y el tamaño y el color del cuadro, y observar la interacciónde dichos indicadores en el tiempo. Eligiendo indicadores a comparar y exponiendo lasrelaciones de datos podemos realizar consultas a medida.Consultando en el área de localización podemos ver de que orientación geográfica recibimosmás visitas para intentar adaptar nuestra web a las zonas geográficas que más nos interesen.Consultando el redireccionamiento de conversiones de nuestra web podremos saber qué páginasnos hacen perder visitas y hacia dónde se dirigen nuestros usuarios para, posteriormente,introducir las correcciones oportunas.Nada más entrar en Google Analytics podemos consultar un resumen de los indicadores sobredatos del historial o sobre el promedio de datos de nuestros sitios. En esta misma entradapodemos seleccionar entre los varias web que gestionemos con nuestra cuenta de GoogleAnalytics además, podremos comparar algunos datos con páginas externas.5.2BlogsLos Blogs son aplicaciones que pueden formar un sitio web completo o una parte, en ellos seofrece periódicamente información actualizada que recopila cronológicamente textos o artículosde uno o varios autores, apareciendo primero el más reciente. Entre las tres aplicaciones paracrear y gestionar Blogs más usadas encontramos a WordPress, Blogger y LiveJournal. Elprimero es realmente un Sistema de Gestión de Contenido (CMS en inglés) y es por ello que esaltamente configurable ofreciendo grandes posibilidades tanto para noveles como para expertosen desarrollo web. Por otro lado, Blogger y LiveJournal ofrecen menos funcionalidad debido aque están diseñados exclusivamente para la creación y gestión de Blogs, siendo Bloggerbastante más sencillo de usar que LiveJournal a la vez que robusto y manejable.A pesar de WordPress es el más usado de los tres vamos a describir a Blogger ya que en lacategoría de CMS vuelve a ganar WordPress y no queremos repetir aplicación pudiendo asícomentar una en cada categoría.
  • 77. A continuación en la Tabla , por orden de uso mostramos las aplicaciones más usadas para lacreación de blogs. Tabla 5.2: BlogsOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 WordPress 82.9 % 133,613 71.9 % 58,219 80.8 % 487,794 2 Blogger 11.8 % 18,960 17.7 % 14,360 10.0 % 51,631 3 LiveJournal 2.7 % 4,404 3.9 % 3,168 1.6 % 15,240 4 Tumblr 1.8 % 2,849 3.5 % 2,835 1.7 % 8,331 5 posterous 0.4 % 689 0.9 % 707 1.2 % 1,192 6 TypePad 0.3 % 559 2.0 % 1,620 0.6 % 3,175 7 Vox 0.0 % 67 0.1 % 61 0.5 % 1385.2.1 BloggerA grandes rasgos Blogger ofrece los servicios básicos que toda aplicación para la creación deblogs, tales como comentarios, enlaces, fotográficas, vídeos y redifusión sin embargo, adiferencia de otras aplicaciones que necesitan plugins, Blogger al estar fabricado por Googledispone de una integración con otros muchos productos de la compañía inherente a la creacióndel blog. También como otras grandes aplicaciones ofrece una comunidad gratuita para lacreación de Blogs. (30)En la Figura 5.2 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.5.2.2 Características de Blogger5.2.2.1 Diseño personalizadoBlogger dispone de un aplicación interna que ofrece muchas plantillas con las que resultabastante sencillo crear un blog de aspecto profesional. Además, nos permite personalizarcualquier plantilla. Podemos elegir entre cientos de imágenes de fondo y decenas de diseñosflexibles, y podemos también organizar los widgets arrastrándolos y soltándolos en la interfaz.Es posible añadir widgets (gadgets) como presentaciones, encuestas de usuario o inclusoanuncios de AdSense. También resulta bastante sencillo cambiar las fuentes y los colores. Parausuarios más expertos existe la posibilidad de controlar directamente parte del blog, es decir,editando el código CSS y HTML directamente.
  • 78. Figura 5.2: Captura de pantalla de Blogger5.2.2.2 Interfaz fácil de usarSin duda el triunfo de Blogger se debe a la sencillez de una interfaz fácil de usar que permite,entre otras opciones, cambiar fuentes, aplicar negrita o cursiva a tu texto y ajustar su color yalineación. Mientras creamos una nueva entrada del blog, Blogger la guarda automáticamente,sin interrumpir lo que estamos haciendo. También dispone de una opción de correctorortográfico fácil de utilizar y una forma sencilla de añadir etiquetas a nuestras entradas. Además,Blogger incluye un editor de HTML que nos permitirá personalizar por completo la aparienciade las entradas para los usuarios más avanzados.5.2.2.3 Añadir fotografías y vídeosPodemos añadir una foto fácilmente a una entrada de nuestro blog si hacemos clic en el icono deimagen en la barra de herramientas del editor de entradas. Las fotografías que subamos sealojarán en nuestra cuenta web de Picasa gratuita (creada automáticamente), desde dondepodemos organizarlas en álbumes y solicitar copias. Para añadir un vídeo a alguna de nuestrasentrada es igual de fácil; sólo tenemos que hacer clic en el icono de la película en la barra deherramientas del editor de entradas. Los vídeos subidos a través de Blogger se alojan en GoogleVídeo.5.2.2.4 Posibilidades económicas con AdSenseCon Blogger, podemos ganar dinero con solo publicar entradas de contenido original y decalidad acerca de nuestro temas favoritos. Blogger dispone de una pestaña exclusiva"Monetizar" que nos permite colocar anuncios de AdSense. Además, mediante el programaAmazon Associates de Blogger, podemos buscar en el catálogo de productos de Amazon yañadir enlaces a los productos que queramos recomendar para ganarnos una comisión cuandonuestros visitantes compren.5.2.2.5 Ampliar el número de seguidoresBlogger dispone de un widget denominado "Seguidores" que podemos añadir a nuestro diseñopara que los lectores puedan realizar un seguimiento de nuestro blog. Gracias a dicho widget,los visitantes sólo tendrán que hacer clic en el enlace "Seguir este blog" para añadir nuestro blogal escritorio de Blogger o a la cuenta de Google Reader (sindicación). También es posible añadir
  • 79. nuestra imagen y perfil a nuestro blog.5.2.2.6 Comentarios de nuestros lectoresLos lectores pueden hacer comentarios útiles y oportunos en cualquiera de nuestras entradas denuestro blog de forma sencilla. Se pueden hacer los comentarios justo debajo de la entrada, yasea en una ventana emergente o en una página independiente.5.2.2.7 Notificaciones de entrada nuevaTus lectores pueden escoger suscribirse a los feeds de tu blog y se les avisará siempre quepubliques una entrada nueva en el blog. También puedes personalizar lo que compartes en elfeed de tu blog y configurarlo para que envíe por correo electrónico las entradas nuevasautomáticamente a direcciones o listas de distribución concretas.5.2.2.8 Un único identificado de usuario (ID)Como también puede ocurrir con Google Analytics y otros productos de Google podemosacceder a Blogger con nuestra Cuenta de Google; que también nos da acceso a Gmail, iGoogle,orkut, etc.; tendríamos un nombre de usuario y contraseña menos que recordar. La dirección denuestro blog también puede utilizarse como OpenID para ofrecerte una única identidad digitalen la web. Como nuestro blog puede aceptar comentarios de usuarios con OpenID además demiembros registrados de Blogger, será más fácil para todos nuestros visitantes dejar comentariosy participar en nuestras conversaciones.5.2.2.9 Múltiples idiomasBlogger está disponible actualmente en 41 idiomas, entre los que se incluyen: alemán, chino,coreano, español, francés, inglés, italiano, japonés, neerlandés y portugués. Los hablantes deárabe, hebreo y persa pueden utilizar Blogger con la pantalla y el formato de derecha aizquierda. También al igual que antes usando el conjunto de aplicaciones adicionales de Google,las aplicaciones de Google para idiomas.5.2.2.10 PáginasCon la función Páginas de Blogger, podemos crear páginas nuevas vinculadas a nuestro blog(página principal). Por ejemplo, podemos crear una página “Acerca de este blog” o una página“Contacto” de manera similar a como escribimos una entrada nueva en un blog, y hacer que losenlaces a esas páginas aparezcan como pestañas en la parte superior de nuestro blog o en lacolumna lateral. Anteriormente esta función no estaba disponible pero debido a que los blogsson cada vez más complejos se incluyo al más puro estilo de una página web normal.5.2.2.11 Versatilidad para publicar entradasEn Blogger, podemos publicar entradas en el blog de varias formas. Tenemos la posibilidad deusar el teléfono móvil o una dirección de correo electrónico de Mail-to-Blogger. Tambiénpodemos usar el Widget para publicar entradas de Blogger para editar y publicar entradasdirectamente desde la página principal personalizada de iGoogle.5.2.2.12 Múltiples usuarios para contribuirCon Blogger, es fácil crear un blog con varios usuarios, que permita que varios usuarios deBlogger contribuyan a un único blog. Para ello seleccionaremos qué miembros tienen autoridadadministrativa y quiénes son sólo autores. También podemos elegir que nuestro blog sea privadoy restringir quién puede verlo.5.2.2.13 PluginsPodemos elegir entre una serie de aplicaciones de terceros que se integran con Blogger para quenos resulte aún más fácil publicar. A través de code.blogger.com podemos crear nuestro propiosplugins para Blogger.
  • 80. 5.3CAPTCHAsLos CAPTCHAs (Prueba de Turing Pública y Automática para Diferenciar Ordenadores deHumanos) son tests para averiguar si nos visita una máquina o una persona. La prueba consistebásicamente en que el visitante de la web introduzca un conjunto de caracteres que se muestranen una imagen distorsionada que aparece en pantalla.A continuación en la Tabla 5.3, por orden de uso mostramos las aplicaciones más usadas para lacreación de CAPTCHAs. Tabla 5.3: CAPTCHAsOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 reCAPTCHA 94.0 % 4,515 97.4 % 13,410 98.3 % 29,356 2 Mollom 6.0 % 288 2.6 % 351 1.7 % 5125.3.1 reCAPTCHALa aplicación reCAPTCHA ofrece dos funciones protección contra spam y digitalización delibros. (31)A continuación en la Figura 5.3, se muestra una captura de la aplicación para posteriormenteproseguir con la descripción de sus características más destacadas. Figura 5.3: Captura de pantalla de reCAPTCHA5.3.2 Características de reCAPTCHA5.3.2.1 Anti spamLa función de control Anti spam (contenido basura) es la que realmente nos ofrece lafuncionalidad como aplicación web a integrar con otras ya que permite controlar entre máquinay persona, por ejemplo a la hora de escribir comentarios, suscribirse a noticias, crear cuentas dee-mail, etc.5.3.2.2 Digitalización de librosLa digitalización de libros es la verdadera función para la que fue creada reCAPTCHA(actualmente propiedad de Google). Con reCAPTCHA se pretende digitalizar los librosescaneado revisando los términos que no han podido convertirse a texto mediante el escaneocon el sistema OCR (Reconocimiento Óptico de Caracteres).De manera distribuida mediante CAPTCHAs los usuarios ayudarán a descifrar los términos queel sistema OCR no ha sido capaz de averiguar, permitiendo validar la fiabilidad de los términosintroducidos por los usuarios, y que actualmente reCaptcha está colaborando de esta manera en
  • 81. la digitalización de libros y documentos del Internet Archive.5.4Gestores de contenidoUn sistema de gestión de contenido ( CMS) permite la creación y administración de contenidosprincipalmente en páginas web. Se trata de una interfaz que controla una o varias bases de datosdonde se aloja el contenido del sitio, permitiendo manejar de manera independiente el contenidoy el diseñoA continuación en la Tabla 5.4, por orden de uso mostramos las aplicaciones más usadas para lacreación de páginas web. Tabla 5.4: Gestores de contenidoOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 WordPress 54.9 % 133,613 42,7 % 58.219 37,4 % 487,794 2 Joomla 16.9 % 41,110 18,3 % 24.952 26,2 % 341,893 3 Drupal 13.0 % 31,568 17,9 % 24,352 20,3 % 265,159 4 TYPO3 6.2 % 15,186 6,3 % 8,560 9,1 % 119,199 5 DataLife Engine 2.6 % 6,427 3,6 % 4,848 1,8 % 23,461 6 Movable Type 1.5 % 3,686 2,5 % 3,421 0,7 % 9,033 7 1C-Bitrix 1.1 % 2,593 1,7 % 2,356 0,9 % 11,384 8 XOOPS 0.4 % 1,001 0,7 % 918 0,4 % 5,418 9 Plone 0.4 % 979 0,7 % 943 0,3 % 4,195 10 SPIP 0.4 % 966 0,6 % 826 0,2 % 2,754 11 TYPOlight 0.3 % 784 0,4 % 557 0,6 % 7,662 12 eZ Publish 0.3 % 735 0,4 % 554 0,3 % 4,090 13 posterous 0.3 % 689 0,5 % 707 0,1 % 1,192 14 CMS Made Simple 0.3 % 673 0,4 % 540 0,3 % 4,099 15 DotNetNuke 0.3 % 623 0,4 % 573 0,2 % 2,680 16 e107 0.2 % 539 0,3 % 423 0,2 % 3,154 17 Squarespace 0.2 % 448 0,3 % 442 0,1 % 1,203 18 PHP-Fusion 0.1 % 359 0,2 % 296 0,1 % 1,326 19 s9y 0.1 % 293 0,2 % 291 0,0 % 545 20 MODx 0.1 % 259 0,2 % 262 0,0 % 969 21 Amiro.CMS 0.1 % 259 0,2 % 210 0,0 % 1,130 22 WebGUI 0.1 % 145 0,1 % 146 0,0 % 616 23 MaxSite CMS 0.1 % 127 0,1 % 120 0,0 % 371 24 InstantCMS 0.1 % 126 0,1 % 101 0,0 % 1,085
  • 82. 25 Kentico CMS 0.0 % 64 0,0 % 62 0,0 % 270 26 SiteEdit 0.0 % 60 0,0 % 59 0,0 % 144 27 webEdition 0.0 % 58 0,0 % 60 0,0 % 382 28 Swiftlet 0.0 % 53 0,0 % 1,435 0,0 % 3,315 29 Papaya CMS 0.0 % 36 0,0 % 30 0,0 % 259 30 S.Builder 0.0 % 30 0,0 % 31 0,0 % 55 31 Textpattern CMS 0.0 % 28 0,0 % 29 0,0 % 80 32 BIGACE 0.0 % 23 0,0 % 27 0,0 % 57 33 2z Project 0.0 % 20 0,0 % 19 0,0 % 29 34 openEngine 0.0 % 15 0,0 % 18 0,0 % 40 35 Moogo 0.0 % 8 0,0 % 8 0,0 % 9 36 Koobi 0.0 % 4 0,0 % 4 0,0 % 6 37 WebPublisher 0.0 % 3 0,0 % 3 0,0 % 10 38 Kolibri CMS 0.0 % 1 0,0 % 1 0,0 % 1Entre las tres aplicaciones para crear y gestionar webs más usadas encontramos a WordPress,Joomla y Drupal. El primero es el CMS más usado gracias a sus facilidades de diseño yusabilidad. Sin embargo, si buscamos cargas de datos más rápidas y seguras tendríamos quedestacar en primer lugar a Drupal algo más complejo de usar y menos personalizable. Por otrolado algo por detrás en cuanto a las posibilidades comentadas se encuentra Joomla, otro gestorde contenidos basado en PHP con una comunidad fiel.El mercado lo domina PHP sin embargo, el mejor CMS de todos no está escrito en PHP sino enPython, nos referimos a Plone un gestor de contenidos que nos ofrece todas las posibilidadesinimaginables en cuanto a desarrollo web, sin embargo cuenta con el handicap de que esnecesario “hacer un Máster” para ponerlo en marcha y aprovechar todo su potencial.Los últimos CMS Adwards (año 2009) fueron conseguidos por WordPress, Drupal y Plone,habrá que ver que ocurre para finales de año pero según siguen las cosas parece que no va habergrandes cambios.5.4.1 WordPressA grandes rasgos WordPress (WP) ofrece una avanzada plataforma semántica de publicaciónpersonal orientada a la estética, los estándares web y la usabilidad. Ofrece facilidad de manejo yadministración, dispone de herramientas para la promoción de nuestro sitio, está orientado a lapersonalización del diseño, dispone de múltiples herramientas para la creación de contenidos,permite localizar archivos y búsqueda, controlar discusiones y comentarios y crear y manejarcolecciones de enlaces. (32)En la Figura 5.4 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.5.4.2 Características de WordPress5.4.2.1 Lugar de instalaciónWordPress ofrece la posibilidad de acceder y modificar cualquier aspecto de nuestro sitio web,pudiendo instalarlo también en un computador local, o en una Intranet.
  • 83. 5.4.2.2 Núcleo FlexiblePodemos elegir tener el conjunto de archivos de WordPress en cualquier directorio. Por ejemplo,podemos desear que nuestra página se muestre en http://ejemplo.com (o el directoriopublic_html cuando se accede por FTP), y desear almacenar los archivos relacionados conWordPress en http://example.com/wordpress (public_html/wordpress).5.4.2.3 Fechas UTCWordPress permite fijar la hora como diferencia del Tiempo Universal Coordinado, para que asítodos los elementos relacionados con el tiempo (hora y fecha de los comentarios, por ejemplo)sean guardados con la hora GMT, que es un estándar universal. Entre algunas ventajas, estoayuda a mostrar la hora correcta en nuestra página, incluso si el servidor donde está alojada seencuentra ubicado en otra zona horaria.5.4.2.4 Compresión gzipWordPress comprime el contenido cuando el navegador lo soporta y el servidor tiene activado elmodulo correspondiente.5.4.2.5 Administración de usuariosWordPress, para limitar el acceso a personas que colaboran en la página web, usa un sistema deniveles de usuario; por lo que podemos restringir la capacidad de usuarios individuales de crearo modificar contenido de nuestro sito web, cambiando los niveles de usuario.
  • 84. Figura 5.4: Captura de pantalla de WordPress5.4.2.6 Perfiles de usuarioCada usuario registrado en nuestro sistema puede definir un perfil, con detalles como sudirección de correo electrónico, cuentas de mensajería instantánea, etc. Los usuarios tambiénpueden controlar la forma en que su información es mostrada.5.4.2.7 Fácil instalación y actualizaciónWordPress, en comparación con el resto de CMS es el más rápido, simple y fácil de instalar, ensolo 3 pasos correspondientes a datos personales, contacto y nombre de base de datos a crear.Asimismo, WordPress permite actualizar a la última versión de forma automática o mediante unclic en la pantalla principal de administración.5.4.2.8 Generación dinámica de páginasNo es necesario reconstruir todas sus páginas cada vez que actualiza su bitácora, o cambia algúndetalle de la misma. Todas las páginas son generadas al utilizar la base de datos y las plantillascada vez que su bitácora es solicitada por un visor. Esto significa que actualizar su bitácora, o sudiseño es tan rápido como sea posible, y el espacio de almacenamiento requerido en el servidor
  • 85. es mínimo.5.4.2.9 IdiomasWordPress usa el método gettext para que la traducción sea un proceso muy fácil de realizar einstalar.5.4.2.10 FeedsWordPress soporta de forma total las especificaciones RSS 1.0, RSS 2.0 y ATOM. Así, losvisitantes a nuestra web tienen más facilidades para suscribirse y seguir el curso de lasdiferentes páginas y secciones.5.4.2.11 Links permanentesLas direcciones para todas las páginas en nuestra web pueden estar de acuerdo a un estándarlibre de estorbos; y todos los vínculos entre páginas son cambiados automáticamente y de formatransparente, y de una forma entendible tanto para humanos como para máquinas (incluyendomotores de búsqueda). Esto es muy importante ya que las direcciones limpias son esencialespara la optimización de resultados en los motores de búsqueda, y para la comodidad de lapersona que visita nuestra página. Un ejemplo de esto podría ser: es.empresasoluciones ówww.empresa.comessoluciones en vez de www.empresa.comp_documento.php?id=46205.4.2.12 Comunicación entre portalesEn Internet cada vez está todo más interconectado, WordPress permite enviar y recibirPingBacks y TrackBacks, dos formas muy versátiles de señalar temas en común para armar unagran red de conocimiento.5.4.2.13 TemasWordPress permite cambiar su aspecto radicalmente usando los temas (también llamadosthemes, en inglés o plantillas) y estilos ya disponibles. También podemos crear y compartir lostemas que creemos.5.4.2.14 Diseño vía plantillasWordPress usa plantillas para generar las páginas dinámicamente. Podemos controlar lapresentación del contenido usando la herramienta Editor de Plantilla y las etiquetas de plantillaque incluye WordPress por defecto.5.4.2.15 Editor de archivos y plantillasCada instalación de WordPress viene con un editor que podemos utilizar para editar nuestrasplantillas (CSS + HTML + PHP), y otros archivos relacionados de WordPress, de forma similara como se usan los navegadores sin tener que preocuparnos por la carga y descarga de archivospara editarlos.5.4.2.16 Etiquetas de plantillasLas etiquetas de plantillas hacen más fácil diseñar el contenido e información exhibida ennuestra web permitiendo a los administradores noveles del sitio una mayor abstracción delcódigo PHP.5.4.2.17 PluginsLos Plugins extienden la funcionalidad principal de nuestra web. Existe extensionesprácticamente para cualquier cosa implementadas por terceros o desarrolladores de WordPress.5.4.2.18 Protección con contraseñaWordPress permite proteger páginas, secciones, entradas incluso la página completarestringiendo los accesos por medio de contraseñas.
  • 86. 5.4.2.19 Mensajes programadosPodemos escribir un mensaje en una fecha determinada, y hacer que se haga visible en unafecha futura automáticamente.5.4.2.20 Mensajes con múltiples páginasWordPress permite dividir mensajes en varias páginas cuando estos son muy largos5.4.2.21 Carga de archivos/imágenesPodemos subir archivos e imágenes, y vincularlos a nuestras páginas o colocarlos en ellas.Además tenemos la opción de crear miniaturas de las imágenes.5.4.2.22 CategoríasPodemos organizar artículos en categorías, y subcategorías...5.4.2.23 Salvar borradores y autoguardadoPodemos guardar páginas, artículos sin terminar o hacerlo de forma automática y publicarloscuando estén listo.5.4.2.24 Previsualizar entradasAntes de poner cualquier cosa en la página podemos ver una vista previa de como quedará.5.4.2.25 Herramientas de actualizaciónPodemos publicar contenido en nuestra página no solo a través del navegador web sino quetambién podemos hacerlo usando el escritorio de nuestro PC, el teléfono móvil entre otrasmuchas interfaces.5.5Sistemas de comentarioUn sistema de comentario permite la creación y administración de discursos sobre un temaespecifico en una página web.A continuación en la Tabla 5.5, mostramos la aplicación más usadas para la creación y gestiónde comentarios. Tabla 5.5: Sistemas de comentarioOrde Páginas Aplicación Sitios web Usuariosn uso Vistas % Cantidad % Cantidad % Cantidad 1 Disqus 100 % 4,506 100 % 5,965 100 % 11,4305.5.1 DisqusA grandes rasgos Disqus ofrece un servicio online a través de su API para crear y gestionarcomentarios. Puede ser integrado en cualquier tipo de página web permitiendo además enlazarcomentarios con otros comentarios creados usando Disqus desde otra página web diferente. Laaplicación está implementada en Python a través del framewok web Django. (33)En la Figura 5.5 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.
  • 87. Figura 5.5: Captura de pantalla de Disqus5.5.2 Características de Disqus5.5.2.1 Conexión entre conversacionesEs posible que varias conversaciones relacionadas con nuestro sitio web no se produzcanrealmente en nuestra página. Usando Disqus podemos enlazar con la web en la que se estánproduciendo los comentarios e incluirlos en nuestra web. Buscando comentarios y menciones delugares tales como Twitter, FriendFeed, Digg y YouTube solo tendremos que incluir el enlace yclicar sobre mostrar con nuestros comentarios.5.5.2.2 Identidad del comentaristaDisqus permite reconocer a los comentaristas e incluso que estos elijan su identidad a través desu ficha en Facebook, OpenID, o Twitter.5.5.2.3 Difundir discursionesPodemos permitir que nuestros comentaristas propaguen fácilmente la discusión en redessociales, impulsando un nuevo tráfico hacia nuestro sitio. Además, ofrece aceleración para ladistribución de nuestro contenido mediante la observación de la eficacia con la que una palabraclave viaja a través del suministro de noticias de una determinada red social.5.5.2.4 Potencia y facilidad de gestiónEl sistema de gestión de comentarios tiene más utilidades que el simple manejo de discusionescon eficacia. Disqus tiene un potente panel de moderación y esta diseñado exclusivamente para
  • 88. los comentarios. Características tales como moderar varios sitios que poseamos que incorporenDisqus, varios moderadores, acciones en bloque, y las decisiones automatizadas hacen a Disqusuna herramienta muy eficaz para la gestión y creación de comentarios.5.5.2.5 Anti-SpamDisqus nos permite disfrutar de los beneficios de su herramienta Anti-Spam para que nosdeshagamos automáticamente de comentarios basura, es decir, aquellos comentariospublicitarios o no relacionados con la temática de la discusión que pretenden pasardesapercibidos para auto-promocionarse en nuestro sitio.5.5.2.6 Importancia de los comentaristasGracias a la capacidad de verificar los perfiles de los comentaristas podemos rastrear acomentaristas influyentes dentro y fuera de nuestro sitio. Con Disqus es posible seguir aaquellos comentaristas con reputación mundial en muchas webs.5.6Administradores de bases de datosUn software para administración de una bases de datos permite manejar la administración de unsistema de gestión de bases de datos a través de una páginas web, utilizando Internet. Entre lascaracterísticas generales permite crear y eliminar bases de datos, crear, eliminar y alterar tablas,borrar, editar y añadir campos.A continuación en la Tabla 5.6, por orden de uso mostramos las aplicaciones más usadas para lagestión de bases de datos en Internet. Tabla 5.6: Administradores de bases de datosOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 phpMyAdmin 98.6 % 3,911 98.6 % 3,633 98.0 % 9,449 2 phpPgAdmin 1.0 % 39 1.0 % 37 0,5 % 53 3 BigDump 0,3 % 11 0,3 % 11 1,2 % 120 4 SQL Buddy 0,1 % 5 0,1 % 5 0,2 % 205.6.1 phpMyAdminA grandes rasgos phpMyAdmin permite manejar la administración de MySQL (sistema para lagestión de base de datos). phpMyAdmin es compatible con una amplia gama de operaciones deMySQL. Las operaciones más frecuentes son el apoyo de la interfaz de usuario (administrarbases de datos, tablas, campos, relaciones entre índices, usuarios, permisos, etc), además tiene lacapacidad de ejecutar cualquier sentencia SQL directamente. (34)En la Figura 5.4 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.
  • 89. Figura 5.6: Captura de pantalla de phpMyAdmin5.6.2 Características de phpMyAdmin5.6.2.1 Compatibilidad con MySQL.Compatibilidad con las principales características de MySQL. Navegación y borrado de basesde datos, tablas, vistas, campos e índices. Crear, copiar, eliminar, alterar y cambiar el nombre debases de datos, tablas, campos e índices. Posibilidad de ejecutar, editar y marcar cualquiersentencia SQL, incluso por lotes de consultas. Además permite administrar usuarios yprivilegios de MySQL.5.6.2.2 MantenimientoMantenimiento de las bases de datos y tablas según la configuración del servidor.Administración de múltiples servidores. Gestión de procedimientos almacenados ydisparadores.5.6.2.3 Importar contenido de la base de datosphpMyAdmin permite importar datos de CSV y SQL5.6.2.4 Exportar contenido de la base de datosExiste una gran variedad de tipos de datos a los que podemos exportar, tales como CSV, SQL,XML, PDF, ISO / IEC 26300 - OpenDocument Text y hojas de cálculo, Word, Excel, LATEXentre otros.5.6.2.5 BúsquedasBúsqueda a nivel global en una base de datos o un subconjunto de la misma. AdemásphpMyAdmin permite la creación de consultas complejas utilizando preguntas entre distintas
  • 90. bases de datos (QBE).5.6.2.6 FormatosphpMyAdmin permite transformaciones de los datos almacenados en cualquier formatoutilizando un conjunto de funciones predefinidas, como por ejemplo mostrar BLOB-data paramostrar datos como imagen o enlace de descarga.5.7Herramientas de documentaciónUna herramienta de documentación para el caso concreto de tecnologías web es una herramientade programación que genera documentación destinada a los programadores (documentación dela API) o los usuarios finales (guía), que se genera a partir del comentario del código.A continuación en la Tabla mostramos la aplicación más usada para documentar en la web. Tabla 5.7: Herramientas de documentaciónOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 phpDocumentor 100 % 51 100 % 57 100 % 725.7.1 phpDocumentorA grandes rasgos phpDocumentor permite generar documentación de código abierto escrito enPHP. Automáticamente analiza el código fuente PHP y produce la API de lectura ydocumentación del código fuente en una variedad de formatos. phpDocumentor genera ladocumentación en base al estándar formal PHPDoc (adaptación de javadoc para php). (35)En la Figura 5.7 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.
  • 91. Figura 5.7: Captura de pantalla de phpDocumentor5.7.2 Características de phpDocumentor5.7.2.1 Amplia gama de formatosPhpDocumentor genera documentación en HTML, PDF (directamente), CHM (con ventanas deayuda del compilador) y XML DocBook.5.7.2.2 Versatilidad de accesoDispone de una interfaz web y la interfaz de línea de comandos. Además las salidas dedocumentación son totalmente personalizables usando plantillas.5.7.2.3 Soporta JavaDocReconoce la documentación JavaDoc extendiéndola con unas etiquetas especiales para PHP.5.7.2.4 EdiciónPermite enlaces automáticos, diagramas de herencia de clases y reemplazar documentos demanera inteligente. Genera documentación sobre la base de varios conjuntos de acceso privado,permite referencias cruzadas, cambiar el marcado de los elementos, etc.5.8EditoresUna editor web (Web editor, en inglés) es una aplicación diseñada con el fin de facilitar lacreación de páginas web. Actualmente el editor más usado para creación web es un editor detexto plano, el Notepad++, sin embargo en la actual clasificación nos referimos a aquelloseditores más visuales, es decir, los editores WYSIWYG que como ya vimos son aquellos quepermiten abstraernos un poco más de los entresijos de la tecnología usada para centrarnos en loque queremos mostrar y la estética final. También existen editores online gratuitos y ofrecidospor las propias compañías donde tenemos contratado el hospedaje de nuestra web.
  • 92. A continuación en la Tabla 5.8, por orden de uso mostramos las aplicaciones WYSIWYG másusadas para edición web.Orde Páginas Aplicación Sitios web Usuariosn uso Vistas % Cantidad % Cantidad % Cantidad 1 Dreamweaver 84,0 % 22,601 81,1 % 16,253 89,3 % 95,843 2 Frontpage 16,0 % 4,319 18,9 % 3,799 10,7 % 11,492 Tabla 5.8: Editores5.8.1 DreamweaverA grandes rasgos Dreamweaver cumple perfectamente el objetivo de diseñar páginas conaspecto profesional, soporta gran cantidad de tecnologías, tales como, hojas de estilo, capas,JavaScript para crear efectos e interactividades e inserción de archivos multimedia. Ademássoporta la creación de páginas dinámicas con acceso a bases de datos y se integra perfectamentecon otras herramientas de Adobe. (36)En la Figura 5.8 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.5.8.2 Características de Dreamweaver5.8.2.1 Páginas accesiblesDreamweaver permite a los diseñadores y desarrolladores crear sitios web basados enestándares. Podemos previsualizar páginas web dinámicas y contenido local mediantenumerosas herramientas de visualización, diagnóstico y comparación.5.8.2.2 Compatibilidad con CMS integradaTenemos compatibilidad con las pruebas y creaciones de diversos marcos de trabajo de sistemasde gestión de contenido como WordPress, Joomla y Drupal.
  • 93. Figura 5.8: Captura de pantalla de Dreamweaver5.8.2.3 Inspección de CSSPodemos observar en detalle el estilo de nuestra web y cambiar las propiedades de CSS sinnecesidad de leer el código ni utilizar otra utilidad.5.8.2.4 Sugerencias de código de clase personalizada de PHPMuestra sintaxis adecuadas de las funciones de PHP personalizadas para escribir el código deforma más precisa.5.8.2.5 Compatibilidad con Subversion MejoradaGestione los archivos de sitios de forma eficaz en entornos con control de versiones y decolaboración gracias a una compatibilidad mejorada con el sistema de control de versionesSubversion.5.9Scripts para fuentes de textoUn script para fuentes de texto (Font script, en inglés) permite usar el tipo de letra que queramossin que nos preocupemos por las fuentes de texto que tiene instalada el visitante a nuestrapágina.Cuando creamos una página web con unas determinadas tipografías hay que tener en cuenta quenuestros usuarios pueden no tener el mismo conjunto de fuentes instaladas en su ordenador.Todas las versiones de HTML anteriores a HTML5 no permiten integrar la fuente con el códigoasí que, tendremos que asegurarnos de algún modo de que el contenido se maquete con un tipode letra adecuado. Para ello se seleccionan tipos de letras alternativas de forma que tengamos enúltima instancia un tipo de letra soportada por todos los navegadores y sistemas operativos. Porejemplo, podemos definir fuentes concretas como Arial o Helvetica, o simplemente definir una
  • 94. familia sans-como serif o monospace dejando que el navegador seleccione la fuente por defecto.Las fuentes y familias mencionadas son soportadas al 100% en otro caso, tendremos que haceruso de un script para fuentes de texto.A continuación en la Tabla , por orden de uso mostramos las aplicaciones más usadas para lacreación de scripts para fuentes de texto. Tabla 5.9: Scripts para fuentes de textoOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 cufon 51,0 % 9,572 46,4 % 9,689 52,9 % 42,389 2 sIFR 37,7 % 7,066 41,8 % 8,732 40,3 % 32,301 3 Typekit 11,3 % 2,114 11,8 % 2,461 6,7 % 5,3825.9.1 CufónA grandes rasgos Cufón nos permite poder usar la tipografía deseada sin preocuparnos poraquellos tipos de fuentes que estén instaladas en la máquina del visitante de nuestra web.Además permite añadir gradientes y estilos. Para usarlo podemos usar un generador online obajar el programa, a través de uno de los dos elegiremos las características de nuestras fuentes ygeneraremos un código Javascript que incluiremos en aquellas partes del HTML dondequeramos ver la tipografía elegida. (37)En la Figura 5.9 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas. Figura 5.9: Captura de pantalla de Cufón5.9.2 Características de Cufón5.9.2.1 Reemplazo de textoCufón es una librería javascript que permite reemplazar el tipo de letra (fuente) que por defectousan los navegadores. Una de las característica CSS más requerida por los diseñadores es laposibilidad de personalizar las fuentes de los sitios web. Actualmente la única forma real de
  • 95. hacer esto es confiar en Flash, ya sea construyendo todo el sitio con este programa o utilizandoel script sIFR.Cufon es una interfaz web que reemplaza a sIFR (sustituidor de elementos de texto por textoFlash), evitando tener que utilizar software de propietario y optando, en su lugar, porcanvas/VML (Lenguaje de Marcado Vectorial usado a través de la etiqueta canvas del HTML)para lograr la misma meta. Técnicamente, Cufón es una interface web que crea una fuente SVGpartiendo de la fuente de nuestra tipografía utilizando un renderizador JavaScript.5.9.2.2 No necesita ningún pluginTodo lo necesario para utilizar Cufón ya está disponible por defecto en el navegador de tusvisitantes. Esto se debe a que en lugar de requerir Flash, Cufón se basa en JavaScript.5.9.2.3 Compatible y fácilFunciona en IE, Firefox y Safari, necesitando escasa o directamente ninguna configuración.5.9.2.4 RápidoCarga casi instantáneamente sin tener que soportar el “parpadeo” que usualmente seexperimenta con sIFR.5.9.2.5 AccesibilidadCufon de cara al posicionamiento (seo) de nuestros contenidos, es totalmente válidointerprentando nuestros textos como xhtml válido.5.10 Paneles para hospedaje webUn panel para hospedaje web (Hosting panel, en inglés) o también conocido como panel decontrol permite llevar a cabo el mantenimiento y monitorización de nuestra página a través de lacompañía con la que contratamos el hospedaje.A continuación en la Tabla , por orden de uso mostramos las aplicaciones más usadas comopaneles para hospedaje web. Tabla 5.10: Paneles para hospedaje webOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 cPanel 75,2 % 3,363 75,9 % 3,089 72,6 % 24,177 2 Plesk 20,9 % 934 20,5 % 833 21,7 % 7,238 3 DirectAdmin 3,9 % 174 3,7 % 150 5,6 % 1,8645.10.1 cPanelA grandes rasgos cPanel nos permite básicamente las mismas funciones que el resto de paneles,es decir, estadísticas de visitas, detalles sobre el ancho de banda usado, manejo de archivos,configuración de la cuenta de email, manejo de bases de datos, manejo de usuarios de FTP,acceso a cuentas del servidor y manejo de subdominio entre otras. (38)En la Figura 5.10 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.
  • 96. 5.10.2 Características de cPanel5.10.2.1 Creación directa y resguardo de nuestra webcPanel permite cargar y gestionar páginas web, pudiendo usarlo para instalación de aplicacionesbasadas en web como CMS (WordPress), blogs, comercio electrónico (osCommerce) y foros(phpBB), simplemente respondiendo a unas pocas preguntas sencillas en la interfaz de cPanel.5.10.2.2 Copias de seguridadUna vez realizada nuestra web cPanel facilita hacer copias de seguridad de datos y protecciónde contenido con un simple asistente de copia de seguridad.5.10.2.3 Análisis y estadísticasPodemos generar y ver estadísticas sobre los visitantes, visualizar el ancho de banda ycomprobar errores de registros para localizar enlaces rotos y otros problemas. Muchos SEOprefieren cPanel debido a la cantidad de información que aporta sobre el tráfico web. Podemosgenerar estadísticas web usando tres generadores de estadísticas diferentes.5.10.2.4 SeguridadcPanel dispone de protección contra virus, los propietarios del sitio pueden incluso prevenirotras páginas web. Podemos proteger el ancho de banda, disponer de contraseña para protegerlas áreas de un sitio, y establecer cPanel para prohibir automáticamente a un usuario quecomparta una contraseña con una zona restringida de la web.5.10.2.5 Facilidades para desarrolladoresPodemos ver fácilmente la configuración de un servidor PHP, instalar Ruby Gems, personalizarpáginas de error y detallar cómo se sirve el contenido.5.10.2.6 MultilingüeSegún la localización o la definición del usuario cPanel permite a los webmasters utilizar cPanelen árabe, bengalí, portugués brasileño, chino, neerlandés, Inglés, francés, alemán, hindi, ruso,japonés, portugués o español.
  • 97. Figura 5.10: Captura de pantalla de cPanel5.11 Seguidores de incidenciasUn seguidor de incidencias administra y mantiene listas de incidencias. Permite crear, actualizar
  • 98. y resolver incidentes reportados por usuarios sobre nuestra página web.A continuación en la Tabla 5.11, por orden de uso mostramos las aplicaciones más usadas parala recogida y seguimiento de incidencias. Tabla 5.11: Seguidores de incidenciasOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 Get Satisfaction 32,4 % 1,371 48,5 % 3,059 23,3 % 7,577 2 Trac 25,6 % 1,081 19,3 % 1,217 20,1 % 6,543 3 Redmine 15,7 % 662 11,9 % 748 23,4 % 7,624 4 MantisBT 14,1 % 595 10,2 % 644 26,8 % 8,736 5 Bugzilla 11,9 % 504 9,8 % 618 6,2 % 2,025 6 Flyspray 0,4 % 17 0,3 % 17 0,1 % 405.11.1 Get SatisfactionA grandes rasgos Get Satisfaction nos permite mejorar el soporte de nuestra web y recogercomentarios. Además permite unificar las interacciones de los clientes a través de nuestra páginaweb, Facebook, Twitter, blogs y aplicaciones móviles. (39)En la Figura 5.11 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.5.11.2 Características de Get Satisfaction5.11.2.1 Moderación ___________________________________________________________________ Get Satisfaction permite gestionar al número de empleados dedicados a la moderación de temaspara el soporte de los servicios de nuestra web. ___________________________________________________________________ Permite trabajar con temas concretos pudiendo compartir, actualizar, combinar correspondencia,archivo, redirigir, mover, eliminar o importar. ___________________________________________________________________ A la hora de las repuestas de soporte, permite retirarlas una vez se ha solucionado la incidencia,restaurar y promover/degradar en base a la respuesta oficial. ___________________________________________________________________ Respecto a los productos y etiquetas de nuestra web, permite eliminar las asociaciones presentesen un tema concreto para el que se ofrece soporte. ___________________________________________________________________ Permite añadir automáticamente empleados para dar soporte a Get Satisfaction.
  • 99. Figura 5.11: Captura de pantalla de Get Satisfaction5.11.2.2 Control de nuestros servicios web y de la comunidad interesada en nuestros servicios ___________________________________________________________________ Get Satisfaction permite administrar datos de la empresa (información básica, logotipos...) y denuestros productos (añadir, borrar, editar). ___________________________________________________________________ Posibilita configurar las opciones de entrada a través de las que puede acceder nuestra comunidad
  • 100. (como Facebook, Google, etc) ___________________________________________________________________ Permite inicio de sesión único a través de Fastpass5.11.2.3 WidgetsGet Satisfaction dispone de widgets para: fichas de votos, investigación, lista de temas,categoría y productos específicos.5.11.2.4 Opciones de integraciónIntegración con Zendesk, Facebook, Pivotal, Salesforce, Twitter, Parature, CRM, etc.5.11.2.5 SoporteCon Get Satisfatction podemos disponer de soporte desde la propia comunidad de GetSatisfaction, vía email y a través de una cuenta de administración.5.12 ForosUn foro es una aplicación web que da soporte a discusiones u opiniones en línea. Hay diferentestipos de foros disponibles: exclusivos, de noticias, debate único, abiertos a todos y de preguntasy respuestas. Para un uso general el foro suele ser un lugar abierto donde cualquiera puedeempezar un nuevo tema de debate cuando quiera y todos pueden calificar los mensajes.Normalmente, cada persona plantea un tema y cualquiera de los usuarios pueden responder acualquier tema. Todos los mensajes llevan adjunta la foto del autor o la foto por defecto quevienen en nuestro perfil cuando nos hacernos usuarios del foro.Respecto a las discursiones estas se pueden ver anidadas, por rama, o presentar los mensajesmás antiguos o los más nuevos primero. Los administradores pueden mover fácilmente losmensajes y temas de discusión entre distintas partes del foros y en caso de que se adjuntenimágenes estas se mostraran dentro de los mensajes.A la hora de búsquedas y seguimiento de mensajes, podemos activar un canal RSS y el númerode artículos a incluir. Permite búsquedas, seguimiento de mensajes leídos/no leídos en los foroscon resaltado que permite ver todos los mensajes nuevos rápidamente y controlar cómo sonmostrados (por foro, por usuario o por sitio).A continuación en la Tabla 5.12, por orden de uso mostramos las aplicaciones más usadas parala creación, mantenimiento y gestión de foros. Tabla 5.12: ForosOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 vBulletin 49,4 % 22,818 48,6 % 21,796 47,3 % 146,859 2 phpBB 28,4 % 13,125 27,6 % 12,372 31,1 % 96,578 3 SMF 12,0 % 5,527 12,6 % 5,660 13,1 % 40,500 4 IPB 7,4 % 3,418 8,1 % 3,629 6,6 % 20,520 5 punBB 0,9 % 436 1,2 % 535 0,5 % 1,705 6 MyBB 0,9 % 417 0,9 % 394 0,7 % 2,298 7 FluxBB 0,4 % 164 0,5 % 209 0,3 % 998 8 Vanilla 0,3 % 122 0,3 % 134 0,1 % 439
  • 101. 9 YaBB 0,2 % 97 0,2 % 110 0,1 % 268 10 MiniBB 0,0 % 22 0,0 % 22 0,0 % 49 11 XMB 0,0 % 19 0,0 % 17 0,0 % 505.12.1 vBulletinA grandes rasgos vBulletin es un software para crear foros en internet que ofrece gran capacidadde adaptación en múltiples plataformas con gran flexibilidad para añadir modificaciones.vBulletin, a diferencia de otros sistemas de foros tales como phpBB o SMF es de pago peroofrece una administración más completa, el phpBB es mas sencillo pero también más cómodo yligero. (40)En la Figura 5.12 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas. Figura 5.12: Captura de pantalla de vBulletin5.12.2 Características de vBulletin5.12.2.1 Web y base de datos independientesvBuelletin permite tener la web y la base de datos en servidores distintos. Podemos usar URLsamigables e integrar de manera automática el mapa del sitio.5.12.2.2 AdministraciónvBulletin trae un panel de control donde podemos realizar operaciones de moderación del foro,ver registros y estadísticas y usar el programador de tareas para solventar tareas repetitivas demantenimiento del foro.
  • 102. 5.12.2.3 Edición y personalizaciónTodo el foro puede ser configurado usando un editor WYSIWYG integrado, permiten incluir enel foro de manera directa o usando código HTML: álbumes de fotos, FAQ, calendario, opcionesde pago para suscriptores (PayPal, WorldPay, NOCHEX and Authorize.net),eventos, encuestas,videos (Youtube, Vimeo, Hulu, Dailymotion, Google, Metacafe). Además, disponemos de unpotente gestor de plantillas e idiomas.5.12.2.4 Jerarquía ilimitadaEs posible disponer de varios foros, subforos, sub-subforos, etc; pudiendo configurar un sistemade permisos por zonas.5.12.2.5 MiembrosPara gestionar y comunicar con los miembros (dependiendo de nuestro rol) disponemos de listasde usuarios por reputación, búsquedas avanzadas, visualización de miembros online, lista deamigos, mensajes privados y perfiles.5.13 WikisUna wiki es una aplicación web que es un sitio web cuyas páginas web pueden ser editadas pormúltiples voluntarios a través del navegador web. Los usuarios pueden crear, modificar o borrarun mismo texto que comparten. El uso principal de las wikis suele ser el de ofrecerdocumentación y definiciones aportadas por múltiples usuarios.A continuación en la Tabla 5.13, por orden de uso mostramos las aplicaciones más usadas parala creación, mantenimiento y gestión de wikis. Tabla 5.13: WikisOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 MediaWiki 80,4 % 4,949 94,4 % 20,584 % 94,3 % 81,277 2 DokuWiki 19,1 % 1,174 5,5 % 1,192 % 5,7 % 4,873 3 WikkaWiki 0,5 % 30 0,2 % 36 % 0,1 % 515.13.1 MediaWikiA grandes rasgos MediaWiki nos permite compartir y generar contenidos de maneracolaborativa. Fue creado y desarrollado para Wikipedia pero su facilidad de uso y funciones hanhecho que sea la herramienta wiki más usada en la actualidad. Aunque no parece en la lista unaopción más potente que MediaWiki sería TikiWiki, las caracteristicas principales de esta últimacomparada con MediaWiki son las funciones básicas de los CMS centralizadas para la creacióny gestión de Wikis. (41)En la Figura 5.13 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.
  • 103. Figura 5.13: Captura de pantalla de MediaWiki5.13.2 Características de MediaWiki5.13.2.1 Nombres, títulos y encabezadosA diferencia de los wikis clásicos, los nombres de las páginas no tienen porqué estar enCamelCase, lo que permite tener nombres más naturales. Además, el espacios de nombrespermiten separar páginas de distintos tipos. Así, se puede tener un espacio de nombres paraartículos, otro para plantillas, otro para debates, etc. que el software trata de distinta forma.5.13.2.2 Páginas de discusiónCada página del wiki tiene una página de discusión propia, dedicada a hablar de su mejora uotros fines. Además, existen listas de seguimiento, de tal forma que cada usuario pueda seguirlos cambios en los artículos de su interés.5.13.2.3 FormulasMediaWiki dispone de soporte de TeX, para visualizar fórmulas matemáticas. Las fórmulaspueden mostrarse de varias formas, según las capacidades del navegador.5.13.2.4 Plantillas y temasPodemos usar plantillas personalizadas con parámetros y temas o pieles ("skins") por cadausuario para configurar la parte estética.5.13.2.5 PluginsMediaWiki incorpora un sistema de plugins que permite extender fácilmente el software. Losplugins instalados se listan automáticamente en "Páginas especiales".5.13.2.6 Usuarios y páginasEs posible bloquear temporalmente usuarios o páginas. Admite varios niveles de usuario, asícomo la posibilidad de que sólo los usuarios registrados puedan editar, o de impedir el registrode más usuarios.
  • 104. 5.13.2.7 Lineas de tiempos y categoríasPodemos crear líneas de tiempos a través de código wiki y usar su sistema de categoríasjerárquico, para crear listados de artículos o de "thumbnails" de imágenes.5.14 Galerías de imágenesUna galería de imágenes es una aplicación web que nos permite visualizar aquellas imágenesque subamos a nuestra web de una manera personalizada y configurable. Las funcionesnormales son las de mostrar con algún efecto, a un tamaño determinado, según una calidad ycon notas que describan datos específicos de la imagen.A continuación en la Tabla 5.14 mostramos la aplicación más usada como galería de imágenesen la web. Tabla 5.14: Galerías de imágenesOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 Coppermine 100 % 338 100 % 310 100 % 2,9985.14.1 CoopermineA grandes rasgos Coopermine Photo Gallery es una galería de fotos avanzada, de fácil uso y consoporte para otros tipos de archivos (media/datos). La galería puede ser privada, accesible solo ausuarios registrados o disponible para todos los visitantes de su sitio web. Si el administrador lopermite, los usuarios pueden subir imágenes a través de su navegador (se crean en el momentode la subida miniaturas e imágenes de tamaño intermedio), valorarlas, agregar comentarios eincluso enviar postales. El administrador decide cuáles de las características mencionadas sonaccesibles para los usuarios registrados y no registrados. (42)
  • 105. Figura 5.14: Captura de pantalla de CoppermineEn la Figura 5.14 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.
  • 106. 5.14.2 Características de Coopermine5.14.2.1 Usuarios y gestión de imágenesLos archivos de imagen son almacenados en álbumes y los álbumes pueden estar agrupados encategorías, las cuales, a su vez, pueden agruparse bajo categorías padre. Coopermine soportamúltiples usuarios y provee al administrador de las herramientas necesarias para determinar quégrupo de usuarios puede o no puede realizar distintas acciones, como por ejemplo: crearálbumes personales y cargar imágenes en ellos (o borrarlas), enviar postales, escribircomentarios, valorar las imágenes, etc. Los usuarios también pueden subir imágenes a losálbumes públicos si el administrador lo admite.5.14.2.2 Aspecto visualCoppermine posee un sistema de selección de temas por parte del usuario y varios temas pre-instalados. También admite el uso de múltiples idiomas y contiene su propia bibliotecaidiomática. Esto permite que sus usuarios usen la galería en su idioma preferido.5.14.2.3 Optimización del códigoCoppermine genera dinámicamente el código html necesario para mostrar las categorías,categorías, álbumes e imágenes. Esto reduce drásticamente la cantidad de archivos y espacioque nuestra galería necesitaría utilizando HTML estándar. El script instalador (install.php)instala y permite comenzar a utilizar la galería de una manera rápida y sencilla.5.15 Visualizadores de vídeoUn visualizador de vídeo nos permite integrar en nuestra en nuestra página vídeos para podervisualizarlos. Existen visualizadores internos o externos, los primeros visualizan los vídeosalojados en nuestra propia página y los externos hacen uso de la velocidad y capacidad dehospedaje de servidores específicos de vídeo. Por lo general, para páginas personales o depequeña empresa el uso de visualizadores externos será la opción acertada según calidad yprecio cero.A continuación en la Tabla 5.15, por orden de uso mostramos las aplicaciones más usadas parala visualización de vídeo a través de servidores externos. Tabla 5.15: Visualizadores de vídeoOrden Páginas Aplicación Sitios web Usuarios uso Vistas Cantid % Cantidad % % Cantidad ad 1 YouTube 83,8 % 35,151 80,2 % 28,927 85,9 % 79,004 2 Vimeo 13,8 % 5,804 16,4 % 5,927 11,8 % 10,836 3 blip.tv 2,4 % 1,008 3,4 % 1,221 2,3 % 2,0895.15.1 YouTubeA grandes rasgos YouTube es un sitio en el cual los usuarios pueden subir y compartir vídeos.Los enlaces a vídeos de YouTube pueden ser también puestos en blogs, redes sociales o portalesusando la API disponible o incrustando cierto código HTML. (43)En la Figura 5.15 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.
  • 107. Figura 5.15: Captura de pantalla de YouTube5.15.2 Características de YouTube5.15.2.1 Inserción de vídeoLos usuarios pueden insertar vídeos de YouTube en cuentas de MySpace y Facebook, blogs yotros sitios web donde cualquier persona pueda verlos.5.15.2.2 Vídeos públicos o privadosLos usuarios pueden elegir entre emitir sus vídeos de forma pública o compartirlos de formaprivada con sus amigos o familiares una vez subidos.5.15.2.3 SuscripcionesLos usuarios pueden realizar un seguimiento de los nuevos vídeos de sus usuarios favoritos y/ode canales de reproducción.5.15.2.4 Grabar de cámara webLos usuarios que dispongan de software Flash y de una cámara web pueden grabar de formainstantánea en el sitio vídeos normales o respuestas en vídeo en vez de tener que realizar lagrabación primero y subir después los vídeos.5.15.2.5 Cuenta de usuarioPodemos detallar una descripción general de nuestra persona, configurar un perfil, personalizarla página principal de YouTube (tenemos que estar logeados), detallar la calidad dereproducción de vídeos por defecto, el subtitulado y los comentarios.5.15.2.6 Compartir actividadPodemos realizar actividades en YouTube como por ejemplo, marcar un vídeo como favorito,subirlo o puntuarlo y compartirlas en redes sociales como Facebook o Twitter.
  • 108. 5.15.2.7 CanalesLos canales en YouTube se asemejan a los canales de televisión pudiendo incluir o nopublicidad. Todo el mundo puede tener un canal en YouTube donde presentar sus vídeosfavoritos, promociones, etc.5.15.2.8 Editor de vídeoLos usuarios disponen de un sencillo editor de vídeo que permite cortar, fusionar y realizartransiciones entre muchas de sus funciones. Es posible crear cierta interacción con los vídeos ydisponer de subtitulado en varios idiomas.5.16 WidgetsUn widget (mini aplicación) nos permite realizar cualquier tipo de aplicación a pequeña escalasus objetivos son los de dar fácil acceso a funciones frecuentemente usadas y proveer deinformación visual.A continuación en la Tabla 5.16, por orden de uso mostramos las widgets más usados paraañadir a un sitio web. Tabla 5.16: WidgetsOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 AddThis 57,8 % 50,500 51,2 % 42,849 60,5 % 199,178 2 ShareThis 15,6 % 13,668 17,2 % 14,384 12,5 % 41,130 3 Google Maps 14,4 % 12,602 15,4 % 12,861 15,5 % 50,925 Google Friend 4 9,5 % 8,344 12,5 % 10,445 9,4 % 31,004 Connect 5 Meebo 1,4 % 1,184 2,4 % 1,978 1,5 % 4,963 6 MyBlogLog 1,3 % 1,107 1,4 % 1,130 0,5 % 1,7705.16.1 AddThisA grandes rasgos AddThis es un acceso a una serie de marcadores para poder compartir nuestrositio web con redes sociales, blogs o cualquier otro sitio de Internet. (44)En la Figura 5.16 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.
  • 109. Figura 5.16: Captura de pantalla de AddThis5.16.2 Características de AddThis5.16.2.1 Compartición inteligenteLa aplicación es capaz de detectar cual es el mejor servicio para el usuario y ofrecerlo primero.Por ejemplo si el usuario usa bastante Facebook, AddThis puede rastrear su huella y ofrecer quecomparta la página que se quiere compartir en Facebook.5.16.2.2 Gran cantidad de servicios para compartirAddThis tiene la colección de servicios para compartir más extensa que existe permitiendocompartir nuestro sitio en prácticamente cualquier plataforma sin ningún problema.5.16.2.3 MultilingüeAddThis traduce automáticamente a más de 50 lenguas.5.16.2.4 Privacidad y SeguridadAddThis soporta SSL/HTTPS.5.16.2.5 Interfaz personalizablePodemos cambiar los colores, tamaños, añadir nuestra marca, etc.5.16.2.6 EstadísticasPodemos tener todo tipo de estadísticas sobre el contenido que más le interesa a los usuarioscompartir de nuestra página, sitios de interés para hacer comparticiones, etc.5.16.2.7 Integración con FlashAddThis no solo se integra con páginas normales sino que se integra a la perfección con vídeos,aplicaciones y páginas hechas con Flash.5.17 EShopsUn eshop o web shop (página para comercio electrónico, del Inglés) nos permite realizarcompras online en tiempo real y sin intermediarios.A continuación en la Tabla 5.17, por orden de uso mostramos las EShop más usados para venderproductos por Internet.
  • 110. Tabla 5.17: EShopsOrden Páginas Aplicación Sitios web Usuarios uso Vistas % Cantidad % Cantidad % Cantidad 1 Magento 36,0 % 3,632 37,4 % 3,033 38,7 % 31,674 2 osCommerce 35,2 % 3,559 31,8 % 2,574 42,0 % 34,397 3 xtCommerce 9,5 % 961 9,1 % 738 5,5 % 4,536 4 Zen Cart 8,5 % 854 9,6 % 774 4,2 % 3,415 5 Prestashop 6,0 % 602 6,6 % 531 6,4 % 5,278 6 Ubercart 2,8 % 282 3,3 % 264 2,0 % 1,631 7 openCart 0,8 % 84 0,9 % 70 0,5 % 376 8 CubeCart 0,5 % 51 0,6 % 51 0,3 % 216 9 CS Cart 0,5 % 46 0,5 % 42 0,3 % 249 10 VP-ASP 0,3 % 26 0,3 % 22 0,1 % 101 11 osCSS 0,0 % 1 0,0 % 1 0,0 % 15.17.1 MagentoA grandes rasgos Magento ofrece una plataforma para el comercio electrónico con múltiplesfunciones, flexibilidad y control sobre la presentación y el contenido. Podemos controlar desdetodas las facetas de nuestra tienda online hasta la comercialización de promociones. (45)En la Figura 5.17 se muestra una captura de la aplicación. Ahora vamos a proseguir con ladescripción de sus características más destacadas.5.17.2 Características de Magento5.17.2.1 Tienda online con añadidosMagento permite la gestión de tiendas múltiples en un sólo panel de control, dispone de apoyopara la localización de los idiomas y divisas.
  • 111. Figura 5.17: Captura de pantalla de Magento5.17.2.2 Búsqueda y sindicaciónPodemos configurar atributos de motores de búsqueda amigable, como direccionespersonalizables y mapas de sitio generados automáticamente. Además, disponemos de RSS paranuevos productos.
  • 112. 5.17.2.3 TarifasLa aplicación permite la fijación de precios diferenciados, lo que permite los descuentos porcantidad y establecer tarifas en los envíos de las paqueterías más populares en tiempo real.5.17.2.4 PagoMagento se integración con muchas pasarelas de pago incluyendo PayPal y authorize.net,permite ventas cruzadas y el pago en una sola página.5.17.2.5 Presentación y estadísticasDisponemos de una interfaz muy cuidada con un sistema de información de productos quepermite organizarlos y crear estadísticas. Además, para las imágenes de los productos podemosañadir marcas de agua y hacer una pequeña edición.5.17.2.6 Web Services APIMagento facilita la integración de software de terceros. El API se agrega para los módulos decatálogo, clientes y ventas.5.17.2.7 Productos virtualesLos vendedores tienen la posibilidad de vender productos electrónicos en sus tiendas, los cualesno requieren información de envío, mantenimiento e inventario.5.17.2.8 Opciones de productos definidas por clientesEsta funcionalidad permite a los clientes definir texto, imágenes, etc. para los productos.5.17.2.9 Paquetes de ProductosPodemos crear paquetes de productos y así extender aún más las opciones disponibles deproductos en Magento.5.17.2.10 Soporte de impuestosLas reglas de impuestos están agregadas al núcleo.5.18 Conclusiones5.18.1 Aplicaciones más usadas por categoríaHemos visto cada una de las categorías generales de aplicaciones existentes para usar en nuestrositio web o como nuestro sitio web. En cada una de las categorías hemos vistos las aplicacionesmás usadas, a continuación y a modo de resumen en la Tabla 5.18 mostramos las aplicacionesmás usadas por cada una de las categorías vistas. Tabla 5.18: Aplicaciones más usadas por categoríaCategoría AplicaciónAnalizadores Google AnalyticsBlogs WordPressCAPTCHAs reCAPTCHACMS WordPressSistemas de comentario DisqusAdministradores de bases de datos phpMyAdmin
  • 113. Herramientas de documentación phpDocumentorEditores DreamWeaverScripts para fuentes de texto cufonPaneles para hospedaje web cPanelSeguidores de incidencias Get SatisfactionForos vBulletinWikis MediaWikiGalerías de Imágenes CoppermineVisualizadores de vídeo YouTubeWidgets AddThisComercio electrónico Magento5.18.2 Aplicaciones más usadas en generalDel conjunto de total de aplicaciones usadas existen ciertas categorías cuyas aplicaciones apenasse usan respecto al resto. Un ejemplo de esto puede ser Coppermine en Galería de Imágenes,que a pesar de ser una aplicación muy completa suele ser sustituida por Lightboxs (plugin paramostrar imágenes) (46), NextGEN Gallery (plugin para WordPress) (47), etc. En la Tabla 5.19mostramos las aplicaciones más usadas a modo general pudiendo haber varias de una mismacategoría. Tabla 5.19: Aplicaciones más usadas en generalCategoría AplicaciónAnalizadores Google AnalyticsBlogs, CMSs WordPressAnalizadores QuantcastWidgets AddThisCMSs JoomlaPodemos apreciar que las aplicaciones más usadas por los webmaster son aquellas que sirvenpara la gestión de contenidos y los analizadores. El primero nos facilita el trabajo de manteneractualizado nuestro sitio y el segundo nos permite comparar el comportamiento de los usuariosde forma que podamos mejorar aspectos de nuestra web.5.18.3 TendenciaPara la gran mayoría de aplicaciones que ocupan el primer puesto en su categoría la tendenciasuele ir al alza o mantenerse, seguidas en algunos casos muy de cerca por los puestosconsecutivos de la lista. A continuación detallamos aquellas aplicaciones que tienen unatendencia de popularidad al alza, mantenida o por el contrario su popularidad está decayendo.Esto nos puede ayudar a optar por algunas aplicaciones en detrimento de otras. Las aplicacionesmás populares por lo general tendrán mayor documentación y soporte, ya que es lo que en ellasla gente esta interesada y ante una demanda habrá una respuesta. Por otro lado, puedeconvenirnos a largo plazo usar aquellas aplicaciones menos populares pero que tengan unatendencia al alza respecto a otras que estén decayendo de forma que podamos acertar a la hora
  • 114. de adaptar nuestro sitio para las previsiones.5.18.3.1 Tendencia al alza ___________________________________________________________________ Google Analytics ___________________________________________________________________ WordPress ___________________________________________________________________ reCAPTCHA ___________________________________________________________________ Disqus ___________________________________________________________________ Cufón ___________________________________________________________________ Get Satisfaction ___________________________________________________________________ YouTube ___________________________________________________________________ AddThis ___________________________________________________________________ Magento5.18.3.2 Tendencia a mantenerse ___________________________________________________________________ cPanel ___________________________________________________________________ vBulletin ___________________________________________________________________ MediaWiki5.18.3.3 Tendencia al declive ___________________________________________________________________ phpMyAdmin ___________________________________________________________________ phpDocumentor ___________________________________________________________________ DreamWeaver ___________________________________________________________________ Coppermine
  • 115. CAPÍTULO 2 Capítulo 6 “Tell me and I forget. Teach me and I remember. Involve me and I learn.” ~ Benjamin FranklinCAPITULO 6: IMPLEMENTACIÓNI maginemos que nuestro sitio web es una biblioteca en el centro de nuestra ciudad. En el Capítulo 2 vimos cómo acceder a la web, es decir, los vehículos que nos transportaran a nosotros y a nuestros usuarios a nuestra biblioteca. En el Capítulo 3 vimos con qué hacer la web, es decir, los ladrillos y el cemento para construirnuestra biblioteca. En el Capítulo 4 vimos como administrar y gestionar el contenido, esdecir, la administración y gestión de los libros de nuestra biblioteca. Y en el Capítulo 5acabamos de ver como facilitarnos ciertas tareas básicas en la construcción y/omantenimiento para no tener que hacerlas de cero, es decir, en nuestro símil con labiblioteca serían el mobiliario, la calefacción, el sistema de seguridad, etc. En estecapítulo vamos a usar todo lo visto anteriormente más aquellas herramientas y atajosque nos pueden ayudar en el proceso de la implementación de nuestra web. (48)En la Figura 6.1 a la 6.4 mostramos las capturas finales de lo que conseguiremos. Acontinuación los pasos que seguiremos para la realización de nuestra web: ____________________________________________________________ Estudio de la accesibilidad ____________________________________________________________ Búsqueda del entorno y herramientas de trabajo adecuados ____________________________________________________________ Estructura de archivos y carpetas para organizar la web ____________________________________________________________ Mapa conceptual para definir y aclarar los contenidos ____________________________________________________________ Pre-maquetación e ideas de diseño ____________________________________________________________ Maquetación ____________________________________________________________ Interacción y creación de animaciones y efectos ____________________________________________________________ Contenido dinámico ____________________________________________________________ Optimización para la velocidad de carga PÁGINA 101 DE 172
  • 116.  ____________________________________________________________ Verificación de que las tecnologías cumplen el estándar ____________________________________________________________ Dar de alta nuestro sitio en los principales buscadores ____________________________________________________________ Optimización para los motores de búsqueda ____________________________________________________________ Estadísticas y marketing Figura 6.1: Captura de pantalla de la web que realizaremos 1/3 Figura 6.2: Captura de pantalla de la web que realizaremos 2/3
  • 117. Figura 6.3: Captura de pantalla de la web que realizaremos 3/36.1AccesibilidadAntes de ponerse a crear una web hay que plantearse a quién va a ir dirigida y que tipode recursos vamos a ofrecer en ella. Por lo general, hacer una página web se consideraalgo relativamente fácil de abordar pero no siempre es así, habría que puntualizar quedependiendo del resultado que busquemos puede convertirse en algo tan complejo o tansimple como cualquiera de nuestras aplicaciones software instaladas en nuestroordenador. Desde lo más sencillo que podemos encontrar, algo tan trivial como mostraruna página en blanco con texto plano, hasta lo más complejo como pueden seraplicaciones ofimáticas completas, juegos en 3D en tiempo real, geolocalización, etc.6.2Entorno y herramientas de trabajo6.2.1 TecnologíasTal como vimos en capítulos anteriores, existen una gran variedad de tecnologías. Paraeste ejemplo vamos a usar las siguiente tecnologías: ____________________________________________________________ XHTML (contenido) ____________________________________________________________ CSS (aspecto) ____________________________________________________________ JavaScript (interacción y animación) ____________________________________________________________ jQuery (interacción y animación) ____________________________________________________________ PHP (contenido desde el servidor y gestión de formularios)Para el desarrollo de estás tecnologías vamos a apoyarnos en sus APIs y/oespecificaciones, a través de una página web que las recopila (Figura 6.4). (49)
  • 118. Figura 6.4: Captura de pantalla de gotAPI6.2.2 Editor webDesde la parte de aplicaciones vamos a optar por Notepad++ (Windows) (50) o Kate(Linux) (51) como editor web frente a FrontPage, DreamWeaver y otros editores onlinecomo los que ofrecen algunos servicios de hospedaje. El Notepad++ (Figura 6.5) y elKate no fueron incluidos en las aplicaciones web como tal ya que se tratan de editoresde texto plano, sin embargo gracias a la flexibilidad y potencia que los caracteriza, a queson muy ligeros, gratis y ofrecen un control total desde la raíz del código, hemos optadopor uno de ellos al igual que muchos otros desarrolladores web.
  • 119. Figura 6.5: Captura de pantalla de Notepad++6.2.3 AplicacionesOtras aplicaciones que vamos a usar son el Google Analytics para hacer análisis ymejorar el servicio, Google Webmasters Tool para optimizar la página web y GoogleMaps para incluir la situación en donde se puede adquirir el producto.6.2.4 NavegadoresVamos a instalar varios navegadores para ver que la página se renderiza sin problemasen todos ellos, ya que no podemos caer en la tentación de obligar a nuestros usuarios ausar un navegador específico. Los navegadores que vamos a usar son Firefox (Gecko),IE7 e IE8 (Trident), Opera (Presto), Chrome y Safari (Webkit).6.2.5 Servidor localPara el contenido dinámico o aquellas implementaciones que se ejecutan en el servidornecesitaremos instalar un servidor local, en nuestro caso usaremos WAMP (Windows) oLAMP (Linux). (52)Realmente WAMP/LAMP es el acrónimo usado para describir un sistema deinfraestructura de internet con las siguientes herramientas: ____________________________________________________________ Windows/Linux, como sistema operativo. ____________________________________________________________ Apache, como servidor web.
  • 120.  ____________________________________________________________ MySQL, como gestor de bases de datos. ____________________________________________________________ PHP (generalmente), Perl, o Python, como lenguajes de programación.El uso de un WAMP/LAMP permite servir páginas html a internet, además de podergestionar datos en ellas.6.2.6 DepuradorPara poder depurar el código, visualizar posibles alarmas o errores en el html, js, css...etc; usaremos la consola de errores del Firefox (Figura 6.6). Figura 6.6: Captura de pantalla de la consola de errores de FirefoxEn el ejemplo de la Figura 6.6. solo tenemos advertencias debido a que el navegador noreconoce las propiedades de los bordes redondeados especificada en CSS3 (nuevaversión de las hojas de estilo en cascada que se está desarrollando).6.2.7 ComplementosAlgo que tampoco puede faltar a un desarrollador web es el Firebug (Figura 6.7) (53), unañadido para Firefox que nos permite inspeccionar al detalle el código fuente y elfuncionamiento de nuestro sitio web, localizando e incluso depurando cualquier error obug al instante.La extensión abre una ventana a modo de consola en el navegador, donde muestra losposibles errores en el código XML, JavaScript o CSS. También podemos inspeccionarel código HTML de la web examinando objeto por objeto toda la web, repasar el diseñoy echar un vistazo a todos los datos del DOM de nuestro documento web. Básicamente
  • 121. tenemos la misma funcionalidad que en la consola del apartado anterior pero de formamás detallada (pestaña “Console” en la Figura 6.7) más las nuevas funciones que hemoscomentado (pestañas: CSS, Scripts, DOM, etc). Figura 6.7: Firebug para FirefoxAdemás, es altamente recomendable usar con Firebug: Google Page Speed (54). PageSpeed (Figura 6.8) se añade a Firebug y nos permite evaluar el rendimiento de nuestraspáginas web y para obtener sugerencias sobre cómo mejorarlas.Page Speed lleva a cabo varias pruebas en nuestro código de interfaz de usuario y en laconfiguración de nuestro servidor web. Estas pruebas se basan en un conjunto deprácticas recomendadas que se conocen por mejorar el rendimiento de las páginas web.Si ejecutamos Page Speed en nuestro sitio obtenemos un número de puntuaciones paracada página, así como sugerencias útiles sobre cómo mejorar su rendimiento.
  • 122. Figura 6.8: Capturas de sugerencias de PageSpeed al analizar un sitio webEl uso de Page Speed nos permite: explorar nuestro sitio de forma más rápida, mantenerel interés en nuestro sitio de los usuarios de Internet, reducir el ancho de banda y loscostes de alojamiento, y en general mejorar la Web. Figura 6.9: Visualización del tiempo de carga de los elementos de nuestro sitio con PageSpeedOtro complemento para Firefox que nos puede ser de gran utilidad es el servidor FTPpara subir nuestro sitio al servicio de hospedaje contratado. Entre las varias alternativas,
  • 123. concretamente FireFTP (Figura 6.10) es ligero y fácil de usar. (55) Figura 6.10: Captura de pantalla de FireFTPLlegados a este punto, configurado el entorno de trabajo nos podemos poner adesarrollar la web.6.3Archivos y carpetas de una webEmpecemos por el principio, toda página web bien hecha tiende a tener organizado lostipos de archivo por carpeta. Aunque la estructura, a veces depende del recurso queusemos, como en este caso tenemos total control vamos a estructurar los tipos dearchivo tal y como se muestra en la Figura 6.11 donde tenemos las carpetas: ____________________________________________________________ en: páginas .html o php en inglés ____________________________________________________________ es: páginas .html o php en español ____________________________________________________________ css: hojas de estilos .css ____________________________________________________________ js: JavaScript .js ____________________________________________________________ img: imágenes y gif animados ____________________________________________________________ pdf: documentos en PDFLa estructura anterior es una posible organización de los elementos de una página web.
  • 124. La página principal de toda web se llama “index”, es el documento que permite accedera todo el contenido, el elemento raíz. El resto son carpetas que se encargan dealmacenar el contenido en los distintos idiomas, el estilo, las imágenes, el JavaScript,los documentos en PDF , etc. Figura 6.11: Ejemplo de estructura de archivos y carpetas para un sitio web6.4Mapa conceptual de una webSabiendo a qué tipo de personas va ir dirigida la página y que tipo de recursos vamos aofrecer es necesario estructurar la web, es decir, organizar las distintas partes delcontenido. Esto nos ayudará a tener una idea global de la magnitud del proyecto, aorganizarnos y obtener una página web de mayor calidad. Figura 6.12: Mapa conceptualLos pasos para obtener una página de calidad en cuanto a contenido y son: ____________________________________________________________ Crear un sitio con una jerarquía y enlaces de texto claros. Se debe poder acceder a todas
  • 125. las páginas desde al menos un enlace de texto estático. ____________________________________________________________ Tenemos que ofrecer a los usuarios un mapa del sitio con enlaces que conduzcan a lassecciones importantes del mismo. Si el mapa del sitio contiene un número de enlacesdemasiado elevado, es preferible dividirlo en varias páginas. ____________________________________________________________ Una página debe contener un número razonable de enlaces. ____________________________________________________________ Debemos crear un sitio útil con mucha información y redactar páginas que describan elcontenido con claridad y exactitud. ____________________________________________________________ A la vez que creemos el mapa conceptual tenemos que pensar en las palabras que podríanintroducir los usuarios para localizar nuestras páginas y asegurarnos de que esaspalabras estén incluidas en nuestro sitio. ____________________________________________________________ Es recomendable utilizar texto en lugar de imágenes para mostrar nombres, contenido oenlaces importantes. El rastreador de Google no reconoce el texto integrado enimágenes. Si usamos imágenes para contenido textual, deberemos utilizar el atributo"ALT" para incluir algunas palabras de texto descriptivo. ____________________________________________________________ Tenemos que asegurarnos de que los elementos <title> (título) y los atributos "alt"(descripción de una imagen) de nuestro sitio sean descriptivos y precisos. ____________________________________________________________ Cuando estemos creando la jerarquía de páginas del sitio si decidimos utilizar páginasdinámicas (es decir, si la URL contiene el carácter "?"), hay que tener en cuenta que notodas las arañas de los motores de búsqueda rastrean tanto páginas dinámicas comopáginas estáticas. Es recomendable que los parámetros sean cortos y reducidos ennúmero.Una vez decidida la jerarquía de páginas del sitio, las partes dinámicas y estáticas, y lasdescripciones y palabras importantes pasamos a la pre-maquetación.6.5Pre-maquetaciónTeniendo claro el contenido que queremos ofrecer, pasamos a la parte de maquetación ypresentación. El diseño que tiene una página web es muy similar al de impresión(revistas, libros, etc.) pudiendo trasladarse cualquier cosa que dibujemos a HTML yCSS. Por lo general, ese traslado es sencillo, el mayor inconveniente proviene de lacomplejidad de cara a la optimización, es decir, legibilidad y posicionamiento,compatibilidad con navegadores y versiones de estos y velocidad de carga de datos.Para nuestra implementación vamos a basarnos en las recomendaciones de maquetadopara HTML5 (Figura 6.13). Realmente el maquetado y las nuevas etiquetas que lodefinen del HTML5 surgió de la necesidad y práctica común que se daba en HTML(Figura 6.13). Además, al hacerlo así ya nos vamos adaptando a los nuevos cambios delmañana.
  • 126. Figura 6.13: Código maquetado tipo HTML5 en HTMLEn la Figura 6.14 podemos observar una manera más conceptual de la idea quebuscamos en el estándar HTML5 para nuestro maquetado. Figura 6.14: Buenas prácticas para el maquetado básico
  • 127. 6.5.1 Propuestas gráficasEn primer lugar es conveniente hacer varias propuestas gráficas (Figura 6.15) delaspecto que queremos conseguir con la página web que estemos realizando. Según elámbito en el que nos encontremos es conveniente buscar páginas del mismo tipo paradarnos ideas de diseño, caso de no tener mucha experiencia en el tema. Figura 6.15: Propuestas de aspecto6.5.2 Distribución del contenidoCon las ideas claras sobre que aspecto queremos conseguir antes de dibujar la páginaque buscamos, pasamos a la distribución del contenido. Para la distribución delcontenido vamos a partir de páginas formadas por columnas estándar (entre 1-4), con unancho total de la página de 960 pixeles. Se ha elegido 960 pixeles porque hace a nuestrositio más versátil a la hora de la visualización en la mayoría de configuraciones depantalla. Para la estructura de la página, utilizaremos un framework CSS denominado960 Grid System. (56)Al estar utilizando la estructura de cajas de 960 Grid System tendremos que ajustarnos alos límites del lienzo a la hora de realizar el dibujo de la web.Puede ser conveniente realizar por medio de cajas un esquema con los elementosprincipales de la estructura que estamos buscando (Figura 6.16). Los elementos queforman dicha estructura se detallan a continuación pudiendo observarlo en mayordetalle en el dibujo de nuestra página web en la Figura 6.17. Es conveniente quetengamos las ideas claras desde el principio para que nos centremos mejor en la partecreativa y de interacción con el usuario. ____________________________________________________________ Menú superior. Corresponde a la barra superior negra con degradado que contiene la partede navegación y opciones de la interfaz, lo forman: Navegación, Idiomas, Vista yPowered by. ____________________________________________________________ Navegación. Aparece de derecha a izquierda, permite la navegación por la web, consta deenlaces a las páginas principales de Inicio, Producto, Empresa y Contacto. ____________________________________________________________ Idiomas. Hace referencia al número de lenguas en los que está disponible la página.
  • 128. Figura 6.16: Esquema de maquetado de nuestra web ____________________________________________________________ Vista. Nos permite conmutar entre 2 tipos de vista: normal o compacta. ____________________________________________________________ Powered by. Enlace principal a la página de inicio y a la empresa que desarrolla elproducto. ____________________________________________________________ Logo. Hace referencia a la página principal y contiene el logo del producto, a la vez queuna frase resumen de lo que hace. Esta formado por una textura gris que se repite. ____________________________________________________________ Submenú. Corresponde a la barra gris consecutiva al logo, es un menú adicional paranavegar a través de la página Producto. ____________________________________________________________ Paneles, formado por 2 subpaneles: Contenido a la izquierda que contiene la mayoría dela información y Destacar. ____________________________________________________________ Contenido, panel principal encargado de albergar el grosor de contenido de la página. ____________________________________________________________ Destacar, muestra información puntual del producto y enlaza al lugar interno de la páginadonde se encuentra. ____________________________________________________________ Fondo. Se refiere al fondo azul animado de la página. ____________________________________________________________ Menú Inferior. Corresponde a la barra inferior negra con degradado que contiene la misma
  • 129. navegación que aparecía en el Menú Superior más el Copyright, y en logo de validaciónde XHTML. ____________________________________________________________ Ir Arriba. Es un botón que aparece en la parte de abajo de la página que nos permitevolver a la parte superior. Solo aparece cuando es necesario.6.5.3 Dibujo de la web en un editor de imágenesTeniendo el esquema del maquetado y habiendo definido las partes internas ya podemos dibujarla página (Figura 6.17) con nuestro editor de imágenes preferido.Dibujaremos todo por capas de forma que luego podamos exportarlo por separado o leer confacilidad su información para poder incluirla en el CSS: ___________________________________________________________________ Los logos, iconos, dibujos, esquemas complejos, estados de botones, etc; los exportaremos talcual al formato apropiado (png, jpg o gif) ___________________________________________________________________ Los tipos de letra, colores, posiciones de los elementos y algún que otro efecto podremos pasarlodirectamente copiando la información tal cual aparece en nuestro editor de imágenes comopuede ser Gimp a nuestro editor de texto avanzado como puede ser Kate. Figura 6.17: Imagen de la web con las distintas partes marcadas6.6MaquetaciónComo hemos comentado en el apartado anterior, el siguiente paso es trasladar la imagen pintadaen Gimp (57) o Photohop (58) a nuestra página web.6.6.1 CimientosAntes de empezar a escribir código en nuestro editor deberemos asegurarnos que el tipo decodificación es UTF-8 sin BOM: ___________________________________________________________________ El BOM es una marca que se introduce al principio de un documento para indicar el tipo decodificación que usamos, pero que actualmente está en desuso debido a que puede darnosincompatibilidades con algunos navegadores y herramientas (por ejemplo la compresión gzip
  • 130. que veremos más adelante no funciona con el BOM). ___________________________________________________________________ Por defecto en Windows se usa ANSI, que no es sino un ASCII: tenemos un número limitado decaracteres. Por otro lado, Unicode dispone de todos los caracteres que existen en todas laslenguas del mundo. De esta forma, si usamos Unicode para nuestra página, todos los usuarios decualquier región o idioma podrán acceder sin problemas. Unicode es independiente de laplataforma, del programa y del sistema operativo y viene por defecto en Linux. Así quecodificaremos con UTF-8 que es simplemente una manera de usar Unicode. (59)Terminado los ajustes en el editor empezamos ha escribir el código. El primer paso, es definir eltipo de documento e indicar la codificación (Código 6.1), luego enlazamos a los cimientos de lamaquetación añadiendo los enlaces correspondiente al framework CSS: 960 Grid System. Código 6.1: Tipo de documento, codificación y enlaces para 960 Grid System<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Documento XHTML --><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><!-- Tipo de codificación --><!-- Hoja de Estilos →<link rel="stylesheet" href="css/reset.css"/> <!-- Resetea el estilo por defecto impuesto por algunosnavegadores --><link rel="stylesheet" href="960.css"><!-- Clases y identificadores para las columnas y cajas de960 Grid System --></head>6.6.2 Cuerpo baseLo siguiente es crear la estructura que habíamos desarrollado en el editor de imágenes en elcuerpo del código html (Código 6.2). Como ya comentamos vamos a usar 960 Grid System,concretamente la clase “container_12” que es una fila de 960 pixeles de ancho con un máximode 12 columnas básicamente y los “grid” que serán las cajas que irán en la fila ocupando unancho determinado. Código 6.2: Etiquetas y atributos para el cuerpo base de nuestra web<body><!-- Barra Menú Superior --><div id="barra-menu-superior"> <!-- Contenedor con la textura de un pixel de ancho que se repite --> <div class="container_12"> <!-- Contenedor de 960 pixeles centrado en el anterior--> <div class="grid_5"> <!-- Navegación --> </div> <!-- Caja para navegación --> <div class="grid_3"> <!-- Idiomas --> <!-- Vista --> </div><!-- Otro tipo decaja --> <div class="grid_4"> <!--Powered by--> </div> <!-- Otro tipo de caja --> </div> <!-- A mayor número en la caja mayor espacio ocupa dentro del container_!2 --></div><!-- Barra Logo --><div class="hide-top-panel" id="barra-logo" > <!-- Contenedor con la habilidad de ocultarse --> <div class="container_12"> <!-- Logo --> </div> <!-- Ocupamos los 960 pixeles enteros --></div> <!-- Todas las barras tienen una textura que se repite ocupando el ancho de la pantalla --><!-- Barra Submenú --><div id="barra-submenu"> <!-- Esta barra puede o no contener un submenú --> <div class="container_12"> <!-- Submenú --> </div><!-- Si lo tiene ocupara 960 pixeles --></div><!--Paneles-->
  • 131. <div id="panel" class="container_12"> <!-- Contenedor de 12 columnas (960 pixeles) --> <div class="grid_8"> <!-- Contenedor de caja que ocupa 8 columnas --> <div id="panel-contenido-top"></div> <div id="panel-contenido-middle"> <!-- Contenido --> </div> <div id="panel-contenido-bottom"></div> </div> <div class="grid_4" id="sidebar"> <!-- Contenedor de caja que ocupa 4 columnas --> <!-- Destacar --> </div></div><!-- Si no hay superposición los números de las cajas tienen que sumar 12 si queremos elmax --><!-- Fondo --><div class="hide-bottom-panel" id="fondo"></div><!-- Contenedor con la habilidad de ocultarse --><!-- Barra Submenú --><div class="hide-bottom-panel" id="barra-menu-inferior"> <!-- Contenedor que puede ocultarse --> <div class="container_12"> <!-- Contenedor de 12 columnas (960 pixeles) --> <div class="grid_5"><!-- Navegación --> </div> <div id="copyright" class="grid_3"> <!-- Copyright --> </div> <div id="copyright" class="grid_3"> <!-- Validación --> </div> </div><!-- En este caso no ocupamos el máximo, dejamos huecos, 5 + 3 + 3 != 12 --></div><!-- Ir Arriba --><div><a title="To Top" href="#" id="toTop">^ Top</a></div> <!-- Aparece en el pie de la página--></body>Debido al diseño de la estructura la mayoría de los elementos son elementos de bloque (div) alos cuales se les aplica el framework 960. Aquellos elementos que pertenezcan a la clase“container” tendrán unas propiedades comunes caracterizada por el número de columnas(container_12, 12 columnas) y aquellos que aparte tengan como identidad un “grid” se refierena la caja concreta. Por ejemplo, para nuestro contenedor de 12 (Figura 6.18) columnastendríamos los siguientes casos de combinaciones de cajas o cuadriculas (grid) posibles. Figura 6.18: Contenedor de 12 columnas (máximo)
  • 132. 6.6.3 Añadiendo más detalles al estilo de la webAunque es una primera implementación se han declarado ya algunos estilos. Siempreincluiremos el CSS de alguna de las 3 formas que existen según nos convenga. Una de lasprincipales características de CSS es su flexibilidad y las diferentes opciones que ofrece pararealizar una misma tarea. Las tres opciones existentes para incluir CSS en un documento HTMLse detallan con nuestro ejemplo a continuación:6.6.3.1 Incluir CSS en el mismo documento HTMLLos estilos se definen en una zona específica del propio documento HTML (Código 6.3). Seemplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera deldocumento (sólo dentro de la sección <head>). Código 6.3: CSS incluido en el propio documento HTML<head> <style> <!-- Hoja de estilos --> *{ margin:0;padding:0 }<!-- margen y relleno a 0 pixeles para todo los elementos --> body{ background-color:#fff; } <!-- color de fondo del cuerpo del documento a blanco --> </style></head>6.6.3.2 Definir CSS en un archivo externoEn este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginasHTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivosimple de texto cuya extensión es .css Se pueden crear todos los archivos CSS que seannecesarios y cada página HTML puede enlazar tantos archivos CSS como necesite. Código 6.4: CSS enlazado desde un archivo externo<head> <link rel="stylesheet" href="960.css"/> <!-- Enlace a la Hoja de Estilos --></head>6.6.3.3 Incluir CSS en los elementos HTMLEl último método para incluir estilos CSS en documentos HTML para casos muy específicos.Esto desaprovecha una de las cualidades más importantes del CSS que es la portabilidad peropuede ser necesario para dar formato a un elemento concreto de la página. Código 6.5: CSS incluido directamente en el propio elemento HTML<body> <div style="margin-top: 4px"></div> <!-- margen superior de 4 pixeles--></body>Además, podemos combinar varias reglas CSS teniendo en cuenta que ante declaraciones delmismo tipo siempre prevalece la última que se carga y en caso de tener declaraciones distintasse sumarían una a una formando una nueva regla CSS. De la definición anterior viene lo de “encascada” porque se van superponiendo prevaleciendo la última. Para que entendamos mejor elconcepto de cascada veamos el Código . En este código la regala de la clase “grid_5” tenía unadeclaración con la propiedad del margen puesta a 0 pixeles, al ponerle en siguiente lugar 4pixeles estamos sustituyendo una declaración por otra.
  • 133. Código 6.6: Superposición de estilos en cascada<body> <div class=“grid_5” style="margin-top: 4px"></div> <!-- margen superior de 4 pixeles--></body>Teniendo una base de elementos html para decorar creamos en un archivo aparte para el estilo.Este archivo se llamará “estilo.css” y quedará enlazado (Código 6.7) de igual forma que ocurriócon el framework “960.css”. Código 6.7: Enlace a nuestro CSS<body> <link rel="stylesheet" href="estilo.css"/> <!-- Enlace a la Hoja de Estilos --></body>Hemos vistos las formas que usaremos para incluir el CSS en nuestra página, en el siguienteejemplo de código (Código 6.8) definimos y explicamos algunas de las reglas de nuestra hoja deestilos: “estilo.css”. Código 6.8: Algunas de las reglas de nuestro estilo para la web* { /* Reseteamos el margen y el relleno para todos los elementos */ margin: 0; /* márgenes a 0 pixeles */ padding: 0; /* relleno a 0 pixeles */}body { /* definimos colores y formato del texto para el cuerpo de la página */ background-color: #ffffff; /* color de fondo */ color: #000; /* color para el texto */ font: 80%/185 verdana, sans-serif; /* tamaño de fuente respecto al tamaño de la página, fuentede texto por defecto vernanda y sans-serif por si no existiera la fuente anterior en el ordenadordonde se renderiza la página */ letter-spacing: 1px; /* ajustamos el espacio entre letras a 1px */ text-align:justify; /* justificamos el texto */}a { /* quitamos cualquier tipo de decoración para los enlaces */ outline: none; /* eliminamos lineas exteriores */ text-decoration:none; /* eliminamos cualquier tipo de decoración par el texto, como porejemplo: subrayado para los enlaces y color azul */ border:none; /* eliminamos bordes */}#barra-menu-superior { /* creación de nuestra barra con degradado para contener los elementos del menú superior */ background: transparent url( "../img/barra-menu-superior.png" ); /* textura con transparenciaque en caso de ser menor que el ancho que definimos con “width” se repite hasta ocuparlo */ height: 33px; /* altura que estamos buscando */ width: 100% ; /* ocupamos ancho de la página */ top: 0px; /* situamos arriba del todo pegando al borde del navegador */ left: 0px; /* situamos a la izquierda del todo pegando al borde del navegador */ display: block; /* mostramos como bloque que se caracterizan porque introducen un salto delinea de
  • 134. cara al siguiente elemento, es decir, ocupan una linea entera */ position: relative; /* posición relativa al elemento que lo contiene */ z-index:2; /* nivel de capa, es decir, en caso de tener elementos que se superpongan, el quetenga un valor más alto de z-index se verá sobre el resto */}#logo { /* elemento que define nuestro logo */ position: relativo; top: 15px; /* lugar que ocupa respecto al elemento que lo contiene */ background: transparent url( "../img/logo.png" ) no-repeat center center; /* el fondo delelemento en si será nuestro logo con trasparencia centrado y sin repetirse */ height: 75px; /* altura del logo */ width: 156px; /* anchura del logo */}En la mayoría de elementos que forman la estructura web están definidos gráficamente por unaimagen que se repite de fondo y se adapta a la pantalla, una posición en la página, un tipo devisualización y el nivel de capa que representa respecto al resto de elementos, es decir,superposición.El CSS en si es mucho más complejo pero no se ha puesto en su totalidad ya que se pretendeque se capte únicamente la idea básica para poder implementar páginas web en general.6.7Interacción, animación y efectos (JS)En este apartado vamos a comentar algunas de las interacciones creadas con JavaScript parafacilitar la lectura del contenido, animar algunos objetos, realizar algunos efectos sobreimágenes, etc.6.7.1 Fecha para el copyrightBuscamos que se inserte automáticamente el año actual al lado del texto del copyright (Figura Figura 6.19: Año de fecha actual6.19).Para todos los elementos de la clase “year” introducimos el año actual (Código 6.9). Código 6.9: Actualizar el copyright con el el año actual$(document).ready(main); // cuando se hayan cargado todos los elemento del HTML empezamosfunction setCopyrightYear() { // definimos una función para introducir el año actual $(".year").html(new Date().getFullYear()); // lee el año y lo pone en la parte del Copyright.}function main() { // función principal que es llamada cuando el documento está listo setCopyrightYear(); // llamamos a la función para poner el año actual}
  • 135. 6.7.2 Efecto de iluminado y apagado para los idiomasBuscamos un efecto de iluminación para el idioma (Figura 6.20). Figura 6.20: Idioma apagado e idioma activoPara todos los elementos de la clase “fade” introducimos el efecto de apagado suave cuando elratón esta fuera del elemento y de encendido cuando el ratón está encima (Código 6.10). Código 6.10: Efecto de apagado e iluminado$(document).ready(function(){// lo de verificar que el documento está cargado lo podemos hacersolo// una vez e introducir todas las funciones que lo necesiten dentro $(".fade").fadeTo("slow", 0.3); // al cargar la página ponemos la opacidad al 30% en loselementos de // la clase $(".fade").hover(function(){ // cuando el cursor del ratón esté encima de los elementos de laclase $(this).fadeTo("slow", 1.0); // ponemos la opacidad al 100% },function(){ // cuando el cursor del ratón está fuera $(this).fadeTo("slow", 0.3); // pone la opacidad al 30% });});6.7.3 Ajuste de la página para pantallas pequeñas Figura 6.21: Botón de vista (vista completa activada) Figura 6.22: Imagen de la web para el caso de una pantalla menor a 960 pixelesBuscamos ocultar ciertas partes para pantallas pequeñas (6.22).
  • 136. Para aquellas configuraciones de pantalla que tengan una altura menor a 960 pixeles: ocultamosel fondo, la parte del logo y el menú inferior de manera progresiva (Código 6.11). Código 6.11: Ajuste de la web a la pantalla$(function() { // lanzamos función directamente (esto ocurre cuando no definimos ningún nombre)// Modo Automático if (screen.height<960) { // si la altura de la pantalla es menor de 960 pixeles $(".hide-top-panel").css("display","none"); // ocultamos los elementos que pertenezcan a laclase $(".hide-bottom-panel").css("display","none"); //ocultamos los elementos de la clase $(".change-view").html("<img title="Vista completa" src="img/view-off.png" />"); // // cambiamos mensaje y el botón a ojo cerrado (indica vista incompleta) } else { // si la pantalla es mayor de 960 pixeles $(".hide-top-panel").css("display","visible"); // mostramos los elementos con esta clase $(".hide-bottom-panel").css("display","visible"); // mostramos los elementos de esta otraclase $(".change-view").html("<img title="Vista simple" src="img/view-on.png" />"); //cambiamos // mensaje y el botón a ojo abierto (indica vista completa) }// Modo Manual $(".change-view").click(function() { // cuando cliquemos el botón con aspecto de ojo if ($(".hide-top-panel").is(":visible")) { // si uno de los paneles está visible $(".hide-top-panel").slideUp(1000,"easeInBack"); // ocultamos moviendo hacia arriba enun // periodo de 1 segundo con el efecto “easeInBack” $(".hide-bottom-panel").slideUp(1000,"easeInBack"); // ocultamos de igual forma $(".change-view").html("<img title="Vista completa" src="img/view-off.png" />"); // // cambiamos aspecto y mensaje del botón } else { // si el panel de ejemplo está oculto (si está uno están todos) $(".hide-top-panel").slideDown(1000,"easeOutBack"); // mostramos moviendo haciaabajo en // un periodo de 1 segundo con el efecto “easeOutBack” $(".hide-bottom-panel").slideDown(1000,"easeOutBack"); // mostramos de igual modo $(".change-view").html("<img title="Vista simple" src="img/view-on.png" />"); // // cambiamos aspecto y mensaje del botón }});});El resultado sería la visualización únicamente de los elementos imprescindibles. No obstante elusuario puede conmutar entre los dos tipos de vista en cualquier momento usando el botón conapariencia de ojo.6.7.4 Sustitución de imagen por animación GIFBuscamos sustituir un archivo de imagen por otro de animación.Tenemos una imagen fija en JPEG y una animación de esa imagen en GIF (varias imágenesconsecutivas formando un movimiento). Por defecto se visualizará la imagen fija creando elefecto animado cuando pongamos el cursor sobre el área de la imagen (Código 6.12). Código 6.12: Intercambio de atributos HTML$(function() { $("#animation").hover(function(){ // cuando estemos sobre el elemento animación $(this).attr("src","../img/logo-animado.gif"); / cambiamos el atributo de la fuente de laimagen por
  • 137. // el de la imagen animada }, function(){ // cuando el ratón salga del área del elemento $(this).attr("src","../img/logo.jpg"); //devolvemos la imagen que estaba por defecto en elatributo // fuente });});6.7.5 Navegación animada en el menúBuscamos una cuadrado azul con bordes redondeados que permanezca en el fondo del nombrede la página en la que nos encontramos (dentro de nuestro sitio). Además, dicho recuadro semoverá de forma continua y adaptándose en tamaño al situarnos en las otras partes de la Figura 6.23: Efecto de desplazamiento del recuadro azul con bordes redondeadosnavegación (Figura 6.23).Para este caso vamos a usar un plugin hecho en JavaScript que nos permite conseguir el efectodeseado (Código 6.13). Bastará con cambiar los parámetros para el tipo y la velocidad (fx espeed, respectivamente) según nos guste más. Código 6.13: Uso del plugin LavaLamp$(.lavaLampNoImage).lavaLamp({ // aplicación del plugin a la clase con nombre similar fx: "backout"; // el tipo de efecto al pasar de una palabra a otra speed: 700; // la velocidad al pasar de un elemento a otro la pondremos a 700 milisegundos});Cabe destacar que en este y otros ejemplos JavaScript siempre la parte del aspecto es parte delCSS, es decir, que el hecho de tener un recuadro azul con bordes redondeados es porque se haespecificado en “estilo.css” de tal forma. Código 6.14: Estilo para recuadro azul con bordes redondeados.lavaLampNoImage li.back { background-color: #007edf; // el tipo de color azul que queremos top: 4px; // posición superior width: 6px; // ancho (aunque luego se adaptará) height: 23px; // altura z-index: 8; // capa que estara por encima de todas aquellas que no tengan z-indez o z-index < 8 position: absolute; // posición respecto al cuerpo de la página border-radius: 10px; // declaración para bordes redondeados según CSS3 -webkit-border-radius: 10px; // declaración para bordes redondeados según Webkit -moz-border-radius: 10px; // declaración para bordes redondeados según Mozilla (Gecko) -khtml-border-radius: 10px; // declaración para bordes redondeados según KHTML -ms-border-radius: 10px; // declaración para bordes redondeados según Microsoft (Trident)}El JavaScript da para mucho más, nosotros en su mayoría lo hemos usado para crear efectos pormedio de jQuery. Con esto se pretende que se capte únicamente la idea básica de algunas cosasque se pueden hacer a la hora de implementar nuestra web.
  • 138. 6.8Contenido dinámicoEn este apartado vamos a comentar una de las partes de la página web que se ha integrado en elservidor. El ejemplo es muy similar al que vimos en el apartado de PHP en el capítulo deTecnologías (3.15).6.8.1 Formulario de contactoHemos desarrollado un formulario (Figura 6.24) para que los visitantes de la web puedansolicitar información sobre los productos ofrecidos. Figura 6.24: Formulario de contactoLos formulario comienza con la etiqueta <form action="contacto.php" method="post/get"> .Con “action” indicamos el script que va procesar la información que recogemos en elformulario, mientras que “method” indicamos si el usuario del formulario va ha enviar datos (post ) o recogerlos ( get ). La etiqueta </form> indica el final del formulario. Código 6.15: Código para crear un formulario de contacto<?php$mail_destinatario = miemail@dominio.com; // indicamos el e-mail al que se mandará elformularioif (isset ($_POST[enviar])) { // si existe la variable $_POST[enviar], es decir, se guardaron losdatos $headers .= "From: ".$_POST[email]. "rn"; // enviamos a nuestro e-mail if ( mail ($mail_destinatario, $_POST[asunto], "Nombre: ".$_POST[nombre]." Asunto: ".stripcslashes ($_POST[asunto])."n Mensaje :n ".stripcslashes ($_POST[mensaje]), $headers)) echo Su mensaje a sido enviado.;else // si no se pudieron recoger los datos no podemos enviar echo Error.; }echo // escribimos el código HTML para el formulario<form action="?" method="post"> // mediante post enviamos los datos al servidor <label for="nombre">Nombre: </label> <input name="nombre" size="50" maxlength="80" type="text"><br> <label for="email">Email : </label> <input name="email" size="50" maxlength="60" type="text"><br> <label for="asunto">Asunto : </label> <input name="asunto" size="50" maxlength="60" type="text"><br> <label for="mensaje">Mensaje : </label>
  • 139. <textarea name="mensaje" cols="31" rows="5"></textarea> <label for="enviar"> <input name="enviar" value="Enviar consulta" type="submit"></label> </form>;?>6.9Optimizando la webUna vez escrito todo el contenido, maquetada la web y definido todos los estilos podemos usarPageSpeed (Figura 6.8) para optimizar la web. Bastará con ejecutar el complemento de Firebugen la página que queremos analizar. Por lo general, para optimizar cualquier página web serecomienda seguir las siguientes prácticas.6.9.1 Eliminar enlaces rotosSi eliminamos los "enlaces rotos", esto es, las solicitudes que se traducen en respuestas 404/410,evitamos desperdiciarlas.6.9.2 Eliminar CSS desde JSLas expresiones CSS o propiedades dinámicas consisten en expresiones javascript incluidas envalores de propiedades CSS. Su uso incide en el rendimiento de la renderización. Esta regla seaplica a los usuarios de Internet Explorer < 8. puesto que en la versión 8 están deprecadas.6.9.3 Combinar CSS externoEl objetivo es evitar realizar muchas peticiones, cuanto más CSS externos, más solicitudes.Google recomienda usar hasta un máximo de 3 archivos externos. Nosotros usaremos 1 archivoexterno (Código 6.16), pero puede convenirnos usar alguno más en caso de tener páginas queapenas compartan reglas de estilo. Incluir CSS que no es necesario también ralentiza la páginatenemos que buscar un compromiso entre cantidad de reglas no comunes y máximo de archivosentre los que repartirlas. Código 6.16: Único archivo externo con todo el CSS combinado (960.css, estilo.css, etc)<link rel="stylesheet" href="../css/full.style.css"/> <!-- todo el css en un mismo archivo -->6.9.4 Combinar JS externoCombinar scripts externos en la menor cantidad de archivos posibles, puesto que retrasan ladescarga de otros recursos. Google recomienda usar hasta un máximo de 2 archivos externos. Código 6.17: Único archivo externo con todo el JS combinado ( jquery-1.4.2.js, menu.js, etc)<script type="text/javascript" src="../js/full.script.js"></script> <!-- todo el js en un mismoarchivo -->6.9.5 JS no necesario al final del sitioRetrasar la carga de funciones JavaScript que no son necesarias en la carga inicial de la página,reducen la descarga inicial, permitiendo que otros recursos sean descargados en paralelo, yaceleran la ejecución y el tiempo de visualización. Así que cogeremos el JavaScript del enlaceexterno del Código 6.17 y lo partiremos en 2 partes enlazándolo según el Código 6.18 y 6.19. Código 6.18: Archivo externo con el JS combinado que necesita cargarse al principio
  • 140. <head>...<script type="text/javascript" src="../js/full.top.script.js"></script></head> Código 6.19: Archivo externo con todo el JS combinado que podemos cargar a posterior<body>….<script type="text/javascript" src="../js/full.bottom.script.js"></script></body>6.9.6 Activar compresiónUtilizar la compresión GZIP es una gran mejora que podemos realizar para acelerar la descargade nuestras webs. En las imágenes y PDF no se utilizará GZIP ya que estos ya estáncomprimidos. Con esta compresión podríamos reducir el peso entre un 70% y 90%, es muyinteresante para reducir el tiempo de descarga y el tráfico mensual de nuestro hosting (serviciode alojamiento web).La mayoría de navegadores soportan GZIP, y los que no, cargan la página sin compresión con loque no tendremos ningún problema con navegadores antiguos.Para activar GZIP en servidores Apache, debemos de tener el módulo mod_deflate o mod_gzipy añadir al archivo .htaccess (nombre por defecto del archivo de configuración de directorios deApache) según el Código 6.20. Código 6.20: Opción 1 - Indicar compresión en el archivo de configuración ".htaccess"php_flag zlib.output_compresión On # activamos compresiónphp_value zlib.output_compression_level 2 # indicamos nivel de compresiónTambién lo podemos hacer en PHP directamente incluyendo en los archivos .php al inicio delcódigo (Código 6.21). Código 6.21: Opción 2 – Inicio compresión gzip en archivo PHP<? ob_start(”ob_gzhandler”); ?> <!-- inicio compresión -->Y al final de nuestros archivo PHP ponemos la linea de código del Código 6.22. Código 6.22: Fin compresión gzip en archivo PHP<? ob_end_flush(); ?> <!-- fin compresión -->En nuestro ejemplo vamos a usar la segunda opción pese a tener poco contenido dinámico enPHP ya que se nos denegó el acceso a al “.htaccess” durante la realización de laimplementación. El hecho de usar tanto la primera como la segunda opción nos obliga a cambiarla extensión de nuestro archivos de “.html” a “.php”, además si estamos haciendo pruebas enlocal necesitaremos configurar un servidor para poder visualizar las páginas. Una buenarecomendación para instalar un servidor en local sería el uso de WAMP (Windows) o LAMP(Linux).Aplicando una compresión simple gzip llegamos a comprimir un 72.6 % (Figura 6.25). (60)
  • 141. Figura 6.25: Resultado de compresión gzip6.9.7 Indicar fecha de expiraciónIndicar una fecha de expiración (Código 6.23) en la cabecera http para recursos estáticos,permite que el explorador de prioridad a los recursos descargados, en lugar de volver adescargarlos, con lo que no hay tráfico de red. Código 6.23: Fecha de expiración para recursos estáticos<meta http-equiv="expires" content="Wed, 09 Aug 2011 08:21:57 GMT" />6.9.8 Cache en cabecerasHabilitando la caché en la cabecera http (Código 6.24) para recursos estáticos, permite que alexplorador realizar las descargas de dichos recursos desde un servidor proxy (intermediarioentre cliente y servidor final) cercano, en lugar de un servidor de origen remoto. Por defecto sino indicamos nada la cache está activa. Código 6.24: Cache no habilitada<meta http-equiv="Pragma" content="no-cache" />6.9.9 Compactar CSSCompactar las hojas de estilo CSS puede ahorrarnos algunos bytes que pueden parecerinsignificantes pero que no lo son tanto cuando comenzamos a multiplicar por el numero devisitantes. Código 6.25: Enlace a CSS compactado<link rel="stylesheet" href="../css/full.style.min.css"/>Básicamente se suprimen espacios, comentarios y saltos de lineas (Código 6.26). Código 6.26: Aspecto del CSS compactado*{margin:0;padding:0}body{background-color:#fff;color:#000;font:80%/185% verdana,sans-serif;letter-spacing:1px;text-align:justify}...
  • 142. Para hacerlo de manera automática usamos en primer lugar CSS Compressor (Advanced Mode)de CSS Drive (Figura 6.26) (61) para configurar las opciones de compresión y para eliminar lossaltos de linea que pudieran haber quedado usamos CSS Compressor de Arantius (62). Existenuna gran variedad de compresores nos hemos decidido por estos por la cantidad de opciones einterfaz de la que disponen. Figura 6.26: CSS Drive - CSS Compressor (Advanced Mode)En el primer paso (CSS Compressor de CSS Drive) conseguimos una compresión del 19%. ___________________________________________________________________ Original size: 19137 bytes ___________________________________________________________________ Compressed size: 15594 bytes ___________________________________________________________________ S
  • 143. avings: 3543 bytes (19%)En el segundo y último paso (CSS Compressor de Arantius) conseguimos reducir aún más lacompresión pudiendo llegar a reducir el resultado anterior a un 6.36%. ___________________________________________________________________ Original size: 15594 bytes ___________________________________________________________________ Compressed size: 14342 bytes ___________________________________________________________________ Savings: 3543 bytes (6.36%)6.9.10 Compactar HTMLCompactar el código HTML, incluyendo el JavaScript y css embebidos puede ahorrar, delmismo modo, algunos bytes de datos, velocidad de descarga y tiempo de ejecución. Noobstante, puesto que en el HTML tenemos solo el contenido (como buena web semántica) paraeste caso vamos a dejarlo como lo tenemos. Si quisiéramos comprimirla lo haríamos de igualforma que hicimos con el CSS.6.9.11 Compactar JSSimilar a los anteriores, compactar correctamente nuestras bibliotecas JavaScript se traducedirectamente no solo en un ahorro de transferencia de archivos sino también en mejores tiemposde carga, siguiendo con la misma idea, cuanto menos pesa nuestro sitio mas rápido podrá serdescargado. Código 6.27: Enlace al JavaScript compactado<head>...<script type="text/javascript" src="js/full.top.script.min.js"></script></head><body>...<script type="text/javascript" src="js/full.bottom.script.min.js"></script></body>Básicamente se suprimen espacios, comentarios y saltos de lineas como ocurría con el CSS peroademás podemos codificar unas variables por otras más cortas y pasar de texto plano (ASCII) abase 64 (Código 6.28). Ganamos en compresión y protección de nuestros algoritmos enJavaScript (aunque es posible recuperarlo, mientras mayor sea el código más difícil será surecuperación y reutilización de algoritmos embebidos concretos). Código 6.28: Aspecto del JavaScript compactado/;o.1q=o.2j={68:12(E,H){E=E||19;6(E.1g){11[0]=E;11.17=1;11.3l=E;14 11}6(1k E==="1O"){15G=D.2T(E);Para hacerlo de manera automática usamos otra herramienta online denominada OnlineJavaScript Compressor (Figura 6.27), el nombre no es muy original pero nos facilita de unamanera eficaz la compresión que queremos. (63)
  • 144. Figura 6.27: JavaScript Compressor6.9.12 Minimizar el tamaño de las respuestasManteniendo las cookies (variables en el navegador) y las cabeceras de las peticiones lo másreducidas posibles aseguramos que una petición http pueda ser incluida en un solo paquete. Sinembargo el único caso en el que tendremos control sobre las peticiones HTTP es cuandorealizamos las peticiones asíncronas por medio de AJAX.Una solicitud HTTP posee la sintaxis que mostramos en el Código 6.29. Código 6.29: Sintaxis solicitud HTTPMÉTODO VERSIÓN URL<crlf>ENCABEZADO: Valor<crlf>. . . ENCABEZADO: Valor<crlf>Línea en blanco <crlf>CUERPO DE LA SOLICITUDUn posible ejemplo de solicitud HTTP sería el siguiente (Código 6.30). Código 6.30: Solicitud HTTPGET http://es.kioskea.net HTTP/1.0 Accept : Text/html If-Modified-Since : Saturday, 4-September-2010 14:37:11 GMT User-Agent : Mozilla/3.7 (compatible; MSIE 8.0; Windows 7)Para el caso del Código 6.30, las cabeceras que tenemos son reducidas (negrita), sin embargopara nuestra implementación no vamos a hacer peticiones HTTP ya que no usaremos AJAX.
  • 145. 6.9.13 Reducir DNSReducir el número de nombres de dominios únicos, desde donde los recursos son descargados,reduce el número de resoluciones de DNS (sistema de nombre de dominio, es decir, servidorescon asociaciones de números de identificación de sitios web “66.249.92.104” al texto quepodemos entender “www.google.com”) que el explorador debe realizar. Para nuestro caso solotendremos 3 nombres asociados: el del sitio en sí, el de Google Maps y el del sello de validaciónde W3C de página web que pasa el estándar XHTML 1.0.Cabe destacar que reducir el numero de resoluciones DNS por lo general no será ventajosopuesto que la velocidad de nuestro servidor está limitada y puede convenirnos cargar de maneraconvinada elementos alojados en fuentes externas (imágenes, vídeos, js, etc) a la vez quecargamos la otra parte de elementos desde nuestro servidor. Esto lo veremos más adelante conDescargas paralelas.6.9.14 Minimizar redireccionesMinimizar redirecciones HTTP desde una URL a otra, reduce el tiempo de espera para losusuarios. No obstante no es nuestro caso (sitio nuevo), sin embargo esto puede ocurrir alcambiar de servidor ya que es necesario para no perder el posicionamiento en buscadores (entreotros mucho factores) redireccionar desde el servidor anterior al nuevo hasta que losrastreadores de Google, Yahoo, Ask, etc; hayan indexado el nuevo lugar de la página. Si nohacemos esto corremos el riesgo de que nos saquen de la lista o de que perdamos puntuacionesal intentar dar de alta una página que ya estaba registrada en los buscadores.6.9.15 Optimizar imágenesEl formato y la compresión correctas pueden ahorrar muchos bytes de información. Pero no esnecesario que nos molestemos en calcularlo porque Page Speed ya lo hace por nosotros (Figura6.28), puesto que lleva a cabo un análisis y no solo te informa del ahorro en bytes que podremos Figura 6.28: Optimización de imágenesobtener, sino que también nos optimiza la imagen permitiendo su visualización y descarga.6.9.16 Optimizar el orden del CSS y el JSOrdenar las hojas de estilo y los scripts externos, permite mejor paralelización de las descargasy acelera el tiempo de visualización del explorador. La recomendación es incluir primero losestilos y después los scripts (Código 6.31). Código 6.31: Orden para estilos y scripts<head>...<!-- Hoja de Estilos --><link rel="stylesheet" href="../css/full.style.min.css"/><!-- Scripts --><script type="text/javascript" src="../js/full.top.script.min.js"></script></head>
  • 146. 6.9.17 Descargas paralelasServir recursos desde cuatro o cinco nombres de dominio diferentes, aumenta la paralelizaciónde descargas. La paralización ya lo vimos con anterioridad y no solo puede resultar beneficiosapara la aumentar la velocidad de descarga sino que permite ahorrarnos dinero si nuestro servidornos cobra por tasa máxima de descarga (los hospedajes en España tienen limite de ancho debanda los hospedajes de Norte América no). Una buena recomendación para páginas conmuchos recursos y/o medianamente grandes es el uso de servidores gratuitos de imágenes (ej:Imageshack), descargas (ej: Megaupload), vídeo (ej: YouTube) para albergar nuestro contenido.6.9.18 CSS en la cabeceraDebemos colocar los estilos en la cabecera de nuestro html, dentro del <head></head> deldocumento y es mas eficiente utilizar la etiqueta <link> que la inclusión vía @import. Estarecomendación influye en el tiempo de renderizado de la página. Esto lo hicimos con al empezara trabajar con el CSS, por lo general, las buenas prácticas y el cumplimiento de los estándaresweb hará que la optimización sea mínima en la fase final.6.9.19 Eliminar CSS no usadoEste punto indica que tenemos estilos en el css que no usamos, pudiendo acceder al catálogo delos mismos. Si estuviésemos en el entorno como el de PMD (analizador del código fuente deJava) podríamos decir que está regla es controvertida, puesto que si tenemos todos los estilosdel nuestro sitio en un solo fichero y se cachea en el navegador, ganaríamos en tráfico de red,solo que la primera descarga sería más "pesada".6.9.20 URL únicaEs importante servir un recurso desde una URL única, para eliminar los bytes duplicados dedescarga. Si necesitamos referenciar un recurso desde más de una ubicación dentro de la página,por ejemplo, una imagen, que ambas hagan referecia a la misma ubicación, para que la segundaesté cacheada. Esto lo cumplimos pues estamos haciendo referencia a nuestros recursos segúnen la jerarquía de carpetas que nos encontramos (html, es, en, etc).6.9.21 Escalado adecuado para las imágenesEl redimensionado correcto de las imágenes puede ahorrar muchos bytes. No debemos solicitaruna imagen de tamaño superior al que queremos mostrar, a no ser que nos encontremos en lasituación de la recomendación anterior. Las redimensiones las hacemos con nuestro editor deimágenes preferido.6.9.22 Solo cookies en donde sea necesarioLos recursos estáticos como imágenes, js y css, no deben ir acompañados de cookies, puestoque no hay interacciones del usuario sobre los mismos. Podemos reducir la latencia sirviendodichos recursos desde un dominio que no sirva cookies. No hemos necesitado almacenar ningúntipo de variable en el navegador por lo tanto no hemos hecho uso de cookies.6.9.23 Set de caracteres en la cabeceraEl set de caracteres para documentos para XML y HTML es Unicode (también conocido comoISO 10646). Esto significa que los navegadores HTML y los procesadores XML deben operarcomo si utilizaran Unicode internamente. Pero esto no significa que los documentos debantransmitirse en Unicode. Siempre que el cliente y el servidor se pongan de acuerdo acerca de lacodificación, pueden utilizar cualquier tipo de codificación que pueda convertirse a Unicode.Especificar un set de caracteres (charset) en la cabecera para los documentos HTML (Código6.32) permite al navegador comenzar a ejecutar los scripts inmediatamente ya que no necesitacalcular la codificación para estos. Código 6.32: Set de caracteres en la cabecera
  • 147. <meta http-equiv="content-type" content="text/html; charset=utf-8" />6.9.24 Especificar el tamaño de las imágenesEspecificar las dimensiones de las imágenes utilizando height y width facilita un renderizadomás rápido, puesto que elimina la necesidad de repintar la página.6.9.25 Selectores CSS eficientesHay selectores CSS que son más eficientes que otros, básicamente porque depende del ámbito,en la generación del árbol DOM el parser tendrá que recorrer un número menor o mayor denodos. Está desaconsejado el uso de selectores universales (*), de etiquetas como claves, y deadyacencia. No obstante para el formateado inicial de la página hemos usado selectoresuniversales para quitar las particularidades de algunos navegadores.6.10 Verificando las tecnologíasUna vez optimizado nuestro sitio el siguiente paso es la validación de las tecnologías usadas,concretamente validaremos las de marcado de texto (XHTML para nuestro caso) y el estilo(CSS 2.1 para nuestro caso). Respecto al resto de tecnologías, es decir, JavaScript y PHP nonecesitamos validarlas ya que la Consola de Errores se encargó de mostrarnos cualquier error.La consola de errores no detecta el tipo de marcado de texto, ni el tipo de texto especifico parael cual estamos estamos definiendo nuestro sitio, simplemente que encarga de mostrar si hayerrores de HTML y CSS en general pero no para XHTML 1.0 estricto por ejemplo ya queexisten una gran variedad de tipos de marcado. Los problemas derivados de la heteregenoidadde la web desde sus inicios ha dejado de manifiesto la necesidad de tener un estándar quepermita una programación e interpretación aplicable a cualquier plataforma, navegador yusuario. De esto modo, el Consorcio World Wide Web (W3C por sus siglas en inglés) fundadorde la WWW ha venido sacando una serie de estándares para la maquetación correcta de una weben marcado de texto.6.10.1 Verificación del HTMLLos estándares HTML los podemos encontrar en la página oficial de W3C, además deherramientas muy útiles para verificar que nuestro sitio se encuentra dentro de los estándares dela marcado (Figura 6.29). (64)
  • 148. Figura 6.29: Verificación para el tipo de documentoEsta herramienta de validación tiene tres formas de operar: ___________________________________________________________________ Por la dirección de nuestra página. ___________________________________________________________________ Subiendo el archivo HTML (por ejemplo) que queremos validar. ___________________________________________________________________ Poniendo directamente el código a validar dentro de un campo de texto.Vamos a dejar los parámetros por defecto, es decir, detección del tipo de codificaciónautomática y del tipo de documento. Una vez introducido y validado nuestro código (Figura6.30), nos mostrará los errores y su ubicación con lo que podremos iniciar la corrección parallevar a nuestro sitio dentro del estándar web.En una primera validación para nuestro caso habíamos pasado satisfactoriamente el estándarpara XHTML 1.0 estricto (Código 6.33), pero puesto que como veremos en el tema detecnologías: el paso de XHTML 1.0 estricto a HTML 5 es inmediato; básicamente hemos hecholos cambios oportunos para que nuestro sitio cumpliera la nueva versión del estándar delmarcado de texto (Código 6.34). No obtenemos errores, únicamente un aviso de que laherramienta de verificación para HTML 5 es experimental. Sin embargo cabe destacar que noestamos aprovechando prácticamente ninguna de las ventajas del HTML 5, solo hemoscambiado la definición del tipo de documento para HTML 5. Código 6.33: Declaración del tipo de documento para XHTML 1.0 estricto<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> Código 6.34: Declaración del tipo de documento para HTML 5
  • 149. <!DOCTYPE html>Una vez validado el sitio, el Validador W3C nos ofrece la posibilidad de añadir a nuestra páginaun sello que certifica la estandarización de nuestra web. El sello dispone de un enlace que Figura 6.30: Sello que certifica que nuestra web cumple el estándar XHTML 1.0 estrictopermite hacer la validación en tiempo real de nuevo.Las ventajas más importante de tener una web validada son las siguientes: ___________________________________________________________________ Carga más rápida ante menos código extraño. ___________________________________________________________________ Adaptación a múltiples plataformas y navegadores. ___________________________________________________________________ Prepara nuestra web ante cualquier cambio en los navegadores. ___________________________________________________________________ Homogeneiza la visibilidad de nuestra web. ___________________________________________________________________ Permite un mejor acceso de los buscadores y por tanto, mayor trafico.6.10.2 Verificación del CSSPara el caso de validación del estilo del documento el proceso sería igual solo que disponemosde opciones especificas para el estilo (Figura 6.31), como por ejemplo el medio para el que serenderizan. (65) Figura 6.31: Verificación para el tipo de estiloEn nuestro caso cumplimos con el estándar CSS 2.1, únicamente tenemos errores debido al uso
  • 150. de algunas propiedades propias de los navegadores (Código 6.35). Concretamente hacemos usode los bordes redondeados, propiedad especificada en CSS 3 pero que algunos navegadores webimplementaron mientras salía el estándar. Hay que tener en cuenta de que si hacemos uso de unapropiedad para el estilo de un navegador deberíamos buscar una igual o similar en el resto denavegadores para que la página se vea igual independientemente. Además también incluimos lapropia del estándar para cuando los navegadores la tengan implementada. Código 6.35: Código que no cumple con la especificación CSS 2.1border-radius: 10px; /* CSS 3 */-webkit-border-radius: 10px; /* Chrome, Safari, navegadores basados en Webkit */-moz-border-radius: 10px; /* Firefox, navegadores basados en Gecko */-khtml-border-radius: 10px; /* Konqueror, navegadores basados en KHTML (próximamente sepasarán a Webkit) */-ms-border-radius: 10px; /* Internet Explorer 7 o superior, navegadores basados en Trends */En la actualidad existen una gran cantidad de páginas derivadas de la ausencia del cumplimientode los estándares en los inicios de Internet. Motores como Gecko (Firefox) y Trends (InternetExplorer) con un pasado común (Nestcape)y Presto (Opera) mantienen la posibilidad derenderizar estás páginas fueras del estándar, concretamente para FF e IE el modo de renderizadose denomina “quirks mode” (modo raro). Sin embargo, otros motores más modernos comoWebkit (Chrome) se limitan básicamente al cumplimento del código permitiendo disponer de unmotor más potente y ligero y con un código más limpio.6.11 Dando de alta nuestro sitio en los buscadoresEn este momento vamos a dar de alta nuestro sitio en los buscadores más importantes para quesalga en las listas de búsqueda cuando se este buscando algo relacionado con lo que ofrecemos.Existen dos formas de añadir un sitio a un buscador, con el método tradicional de “sugerirdirección”, es decir manualmente (Figura 6.32) y mediante enlaces de páginas ya indexadas queapuntan a nuestrositio. (66)Sugerir un sitio aun motor debúsqueda tiene el Figura 6.32: Sugerir un sitio a Google
  • 151. inconveniente de que puede demorar varios meses. Por otra parte, es mucho mas efectivo (porsu velocidad) para aparecer en los buscadores más importantes, recibir un link (hipervínculo oenlace) de algún sitio que ya esté en los buscadores. De esta forma cuando Google, Yahoo oMSN Search visiten dicha web seguirán el link hacia nuestro sitio y lo almacenarán en sus basesde datos. Cuantos más links se consigan más rápida será la inclusión.Lo más normal es que una vez hecho los enlaces a nuestro sitio tarde un par de semanas enindexarse, durante ese tiempo podemos ir añadiendo las aplicaciones para la mejora, control,mantenimiento y marketing que veremos en el próximo apartado.6.12 VisibilidadSugerido nuestro sitio a los principales buscadores de Internet vamos a añadir una serie deaplicaciones para nuestro sitio mientras lo dan de alta. En este primer caso usaremos GoogleWebmasters Tools (67) que nos brinda la posibilidad de adaptar y configurar la visibilidad denuestro sitio en Internet. Aunque influye directamente sobre las directrices de Google, lasoptimizaciones que haremos también valdrán para el resto de buscadores (siempre que hayamosdado de alta nuestro sitio en ellos también). Estamos hablando de la optimización para motoresde búsqueda común mente conocida como SEO.Google Webmasters Tools, aunque es una aplicación web, no la vimos dentro del capítulo deaplicaciones simplemente porque su carácter no es añadir funcionalidad a la propia web sinomejorarla optimizándola para su visibilidad, no es una aplicación que forma parte de nuestrositio web y/o que el usuario de nuestra web pueda usar.Para usar esta fabulosa herramienta que nos ofrece de manera gratuita Google es necesario crearuna cuenta de Google y añadir un sitio (lógicamente tendremos que ser el webmaster). Lospasos para demostrar que somos el webmaster del sitio a Google Webmasters Tools son:1. ___________________________________________________________________ Accedemos a https://www.google.com/webmasters/tools/ desde nuestra cuenta de Google.2. ___________________________________________________________________ Le damos al botón “Añadir sitio” e introducimos la URL de nuestro sitio.3. ___________________________________________________________________ Nos ofrecen varios métodos de verificación, nosotros usaremos por ejemplo el primero que esmediante meta tag (Figura 6.33). Lo copiamos y añadimos a la cabecera de nuestra páginaprincipal (index). Cuando este listo hacemos clic en “Verificar”
  • 152. Figura 6.33: Demostrar la propiedad del sitioUna vez verificado nuestro sitio podremos acceder a un gran número de herramientas que nosofrece Google (Figura 634), los grupos de herramientas son: ___________________________________________________________________ Panel (resumen de Información básica, Indexación, Diagnósticos, etc) ___________________________________________________________________ Mensajes (de servicios contratados con Google, alertas, etc) ___________________________________________________________________ Información del sitio ___________________________________________________________________ Su sitio en la Web (indexación) ___________________________________________________________________ Diagnósticos ___________________________________________________________________ Labs (pruebas)
  • 153. Figura 6.34: Panel de Google Webmaster ToolsPor defecto se nos muestra el panel del sitio (Figura 6.34), que no es más que un resumen de losdatos más relevantes: errores de rastreo (páginas no encontradas), importancia de las palabrasclaves que ha encontrado Google, consultas en el buscador que han llevado hasta nuestro sitio,etc.En los siguientes apartados veremos en detalle cada una de las herramientas por grupos.6.12.1 Información del sitioDentro de “Información del sitio” (Figura 6.35) tenemos las herramientas básicas para informara Google sobre nuestra web. En este apartado y por lo general con sitios nuevos que creemosserá fundamental el uso del “Sitemaps” para que se indexe el mapa del sitio y “Acceso derastreadores” para crear recomendaciones de actuación para los rastreadores de los buscadores,no obstante explicaremos cada una de las herramientas que componen el apartado. Figura 6.35: Herramientas de “Información del sitio”
  • 154. 6.12.1.1 SitemapEn el apartado de información del sitio lo primero que haremos es enviar un Sitemap parainformar a Google acerca de las páginas de su sitio que no podríamos detectar de otro modo. UnSitemap es un fichero normalmente con extensión xml o gz (gzip) que se aloja en el directorioraíz de nuestra web y contiene información para el motor de búsqueda de las diferentes páginasque componen todo nuestro sitio web. A diferencia de un Mapa web, este no es visible paranuestros visitantes tan solo para los buscadores. Para generarlo vamos a usar una herramientaonline (Figura 6.36) aunque también es muy sencillo hacerlo manualmente. Por lo generalusaremos la herramienta online (68) y luego haremos pequeños cambios manuales. Figura 6.36: Generador XML de SitemapsEl Sitemap que nos devuelve (Código 6.36) hace referencia a cada una de las páginas de nuestrositio con su dirección, periodicidad en los cambios y prioridad o importancia respecto al resto depáginas. Código 6.36: Parte del código del Sitemap de nuestro sitio<url> <!-- página de nuestro sito --><loc>http://www.hermesmarinas.com/index.php</loc> <!-- localización de la página dentro del sito--><changefreq>monthly</changefreq> <!-- frecuencia con la que la página cambia --><priority>1.00</priority> <!-- importancia respecto al resto de páginas de nuestro sitio (1.00-0.00) --></url>−
  • 155. <url> <!-- producto es menos importante que la página principal --><loc>http://www.hermesmarinas.com/es/producto.php</loc><changefreq>monthly</changefreq><priority>0.80</priority></url>...Una vez tengamos el Sitemap generado lo subimos a nuestro servidor de hospedaje y loenviamos a Google (Wembasters Tools / Información del sitio / Sitemaps)6.12.1.2 Acceso de rastreadoresContinuando en este mismo apartado de información del sitio vamos a configurar el archivorobots. El archivo robots.txt (Código 6.37) es un fichero de texto que dicta unasrecomendaciones para los robores de los motores de búsqueda encargados de indexar laspáginas (conocidos también como rastreadores, arañas, etc). Para nuestro caso lo hemosconfigurado de manera similar para todas las arañas. Código 6.37: Robots# Nombre del robot. Hemos decidido que sea una configuración validad para todosUser-agent: *# En principio permitimos todo para después concretar que partes denegamosAllow: /# Partes prohibidas para las arañas (rastreadores)Disallow: /es/data/Disallow: /es/data/contact.phpDisallow: /en/data/Disallow: /en/data/contact.php# Donde se encuentra nuestro sitemapSitemap: http://www.hermesmarinas.com/sitemap.xmlEl fichero robots.txt es posible generarlo de forma manual o directamente con Google(Wembasters Tools / Información del sitio / Acceso a Rastreadores) que nos permite hacerpruebas de funcionamiento. Tenemos que ponerlo en la raíz de nuestro sitio (al igual que elSitemap). En este caso no tenemos la opción de enviarlo se detectará automáticamente, peropara subirlo deberemos hacerlo a través de nuestra cuenta FTP (por ejemplo usando FireFTP).En caso de indicar en el robots el Sitemap no necesitaríamos indicárselo a Google como hicimosen el apartado anterior. El robots.txt tiene que ir siempre en el directorio raíz del sitio, elSitemaps nos obligatorio que este alojado allí pero si altamente recomendable.6.12.1.3 Enlaces del sitioLos enlaces del sitio son enlaces a las zonas internas de nuestro sitio. No todos los sitios tienenenlaces del sitio, por lo general lo incorporan aquellas web con un volumen tal de páginas queGoogle cree oportuno mostrarla en la indexación por zonas (Figura 6.37) para facilitarle elacceso al usuario. Google genera estos enlaces automáticamente, pero podemos eliminarlos si lodeseamos. Para nuestro caso al no ser lo suficientemente grande el sitio no tenemos enlacesinternos a nuestro sitio.
  • 156. Figura 6.37: Sitio con enlaces internos en las búsquedas de Google6.12.1.4 Cambio de direcciónEste herramienta es útil si estamos pensado en cambiar el sitio a un dominio nuevo, utilizandoestá herramienta informamos a Google de nuestra URL nueva. Esto nos permitirá actualizarnuestro índice (indexación) más rápidamente y facilitará la transición a los usuarios de nuestrositio. No lo vamos a usar ya que acabamos de dar de alta la página en un buen servidor dehospedaje y no ha pasado el tiempo suficiente como para estudiar nuevas ofertas de alojamiento.6.12.1.5 ConfiguraciónEsta herramienta permite indicar la zona geográfica, el dominio preferido para nuestro sitio y lafrecuencia de rastreo de los rastreadores. ___________________________________________________________________ Zona geográfica. Si nuestro sitio está orientado a usuarios de una determinada ubicación,podemos proporcionar información a Google para determinar cómo aparece el sitio en losresultados de búsqueda y a mejorar estos resultados en las consultas geográficas. Esta función sepuede utilizar únicamente en sitios con un dominio de nivel superior neutro, como .org o .com,puesto que los dominios específicos de país, como .ie o .fr, ya están asociados a un país o a unaregión. Si no deseamos que nuestro sitio se asocie a una ubicación, seleccionaremos "Ninguno".Para nuestro podríamos seleccionar España, pero vamos a dejarlo a nivel global puesto quenuestro sitio no esta dirigido a ese público concreto. ___________________________________________________________________ Dominio preferido. El dominio preferido es aquel que nos gustaría utilizar para indexar laspáginas de nuestro sitio web. Si especificamos nuestro dominio preferido comohttp://www.nuestrositioweb.es y Google detecta un enlace a nuestro sitio en el formatohttp://nuestrositioweb.es, lo tratará como http://www.nuestrositioweb.es . Asimismo, Googletendrá en cuenta nuestra preferencia cuando muestre las URL en sus resultados de búsqueda. ___________________________________________________________________ Frecuencia de rastreo. Los rastreadores de Google tienen como objetivo rastrear el mayor númerode páginas de su sitio en cada visita sin colapsar el ancho de banda de nuestro servidor.Podemos cambiar la frecuencia de rastreo (el tiempo que emplea Googlebot para rastrear elsitio) de los sitios que están en el nivel raíz o en un subdominio como, por ejemplo,www.nuestrositioweb.com y http://subdominio.nuestrositioweb.com. Al configurar la frecuenciade rastreo de nuestrositoweb.com, se incluirá todo el dominio, por lo que no tendremos queestablecer un valor para los subdominios (por ejemplo, http://subdominio.nuestrositioweb.com)de forma independiente (a menos que deseemos configurar de forma explícita una frecuencia derastreo diferente para un subdominio determinado con respecto al resto del dominio). El nuevovalor que indiquemos será válido durante los próximos 90 días. Para nuestro caso vamos a dejarla opción de recomendada, es decir, dejamos que Google establezca la frecuencia de rastreo quecree apropiada.6.12.2 Su sitio en la webDentro de “Su sitio en la web” (Figura 6.38) tenemos las herramientas básicas para conocer agrandes rasgos la importancia de nuestro sitio en Internet. Este apartado toma mayor
  • 157. importancia una vez que la página ha sido indexada y rastreada en varias ocasiones ya que nosmuestras estadísticas, evoluciones, etc. Figura 6.38: Herramientas de “Su sitio en la web”6.12.2.1 Consultas de búsquedasEste herramienta muestras aquellas búsquedas, palabras y combinaciones de palabras que hanllevado a los usuarios del buscador hasta nuestro sitio web. Una página bien posicionada seráaquella cuyas consultas de búsqueda coincidan con las palabras claves que definen nuestro sitio.6.12.2.2 Enlaces a su sitioEsta herramienta muestra los enlaces a nuestro sitio. Normalmente si es un sitio nuevo tendrápocos o ningún enlace reconocido por Google. En nuestro caso no aparecen enlaces a nuestrositio.6.12.2.3 Palabras claveEsta herramienta muestra las palabras clave más habituales que ha encontrado Google al rastrearnuestro sitio. Estas palabras clave deben representar el tema principal del sitio. Para nuestrocaso las palabras claves coinciden con la temática de nuestro sitio. En caso contrario, podríamosenfocar o redactar el contenido de otra forma para conseguir las palabras que más definennuestro sito.6.12.2.4 Enlaces internosEste herramienta nos ayuda a conocer que páginas de nuestro sitio apuntan a otras páginas denuestro propio sitio.6.12.2.5 Estadísticas de suscriptorUn suscriptor es un usuario que está fidelizado a nuestro sitio, es decir, dispone de unadispositivo (semilla de suscriptor, feed) que le avisarle de cuando se ha cambiado algo en lapágina para que vuelva a visitarla. Para nuestro caso no tenemos ningún tipo de “feed” para quelos usuarios se puedan suscribir a nuestro sitio, por lo que, no nos aparece nada en estáherramienta.6.12.3 DiagnósticosDentro de “Diagnósticos” (Figura 6.39) tenemos las herramientas básicas para conocer agrandes rasgos la importancia de nuestro sitio en Internet. Este apartado toma mayorimportancia una vez que la página ha sido indexada y rastreada en varias ocasiones ya que nosmuestras estadísticas, evoluciones, etc.
  • 158. Figura 6.39: Herramientas de Diagnóstico6.12.3.1 Software malintencionadoEsta herramienta muestras si tenemos albergado en nuestro sitio de manera conciente oinconciente software malintencionado, tales como spam, virus, etc; que pudiera extenderse aaquellos usuarios que visiten nuestra sitio. Para nuestro caso no aparece ningún softwaremalintencionado como era de esperar.6.12.3.2 Errores de rastreoEsta herramienta muestra los enlaces rotos a nuestro sitio. Estos enlaces rotos pueden serenlaces mal escritos en el código HTML o páginas, archivos, etc mal ubicados. Para nuestrocaso no tenemos errores de rastreo. Por lo general, si hacemos uso de la Consola de Errores queexplicamos en apartados anteriores y vamos renderizando las páginas que vamosimplementando reduciremos los posibles errores de rastreo.6.12.3.3 Estadísticas de rastreoEsta herramienta muestra actividad de los rastreadores de Google en los últimos 90 días. Puedeservirnos para configurar la frecuencia de rastreo que vimos en apartados anteriores(Información del sitio/Configuración/Frecuencia de rastreo). Si nuestro servidor no sesobrecarga puede convenirnos aumentar la frecuencia de rastreo si nuestro sitio sufre cambiosconstantemente.6.12.3.4 Sugerencias en HTMLEsta herramienta muestra errores en el HTML, problema de contenido en nuestro sitio. Alrastrear Googlebot nuestro sitio, busca cualquier posible problema relacionado con el contenidode las páginas que lo componen como, por ejemplo, metadescripciones o etiquetas de títuloproblemáticas, duplicadas o ausentes. Estos problemas no impedirán que nuestro sitio aparezcaen los resultados de búsqueda de Google, pero si prestamos atención a estos elementos,podremos proporcionar a Google más información e incluso ayudarle a atraer más tráfico hacianuestro sitio. Por ejemplo, el texto de las metadescripciones y del título puede aparecer en losresultados de búsqueda y los usuarios tienden a hacer clic en texto descriptivo porque les resultamás útil. Para nuestro caso no tenemos problemas y/o errores en el HTML. Por lo general,haciendo uso de la Consola de Errores durante la implementación y del Verificador W3C notendremos problemas.6.12.4 LabsDentro de “Labs” (Figura 6.40) tenemos las herramientas básicas para hacer pruebas connuestro sitio web.
  • 159. Figura 6.40: Herramientas para hacer pruebas6.12.4.1 Explorar como GooglebotCon la herramienta Explorar como Googlebot, podemos saber exactamente cómo ve una páginaun rastreador (Código 6.38) según el tipo de rastreador (para web, para dispositivo móvil, etc).Introduciendo la URL que deseemos recuperar o dejando el campo en blanco para recuperar lapágina principal. Para nuestro caso la recuperación es perfecta, Google ve la página tal cual laimplementamos.URL: http://www.hermesmarinas.com/Fecha: Fri Oct 08 08:50:51 PDT 2010Tipo de robot de Google: Web (Hemos hecho la recuperación de como lo haría para PC normal) Código 6.38: ¿Qué ve el rastreador de Google?HTTP/1.1 200 OK // No ha habido problemas al hacer la petición de la página web al servidorDate: Fri, 08 Oct 2010 15:50:52 GMT // FechaServer: Apache // Tipo de servidor donde tenemos alojada la páginaX-Powered-By: PHP/5.2.14 // Versión de PHP soportada por el servidorContent-Encoding: gzip // CompresiónVary: Accept-Encoding // Aceptada la compresiónContent-Length: 3323 // Longitud del contenidoKeep-Alive: timeout=2, max=99 // Periodos de conexiónConnection: Keep-Alive // Mantiene la conexión según los periodos anterioresContent-Type: text/html // El tipo de marcado de texto es HTML…// A partir de aquí vendría el código de la página tal cual lo implementamos (caso de que laexploración haya sido correcta)6.12.4.2 SidewikiGoogle Sidewiki permite que los usuarios añadan información útil en cualquier página web.Esta herramienta se utiliza para crear una entrada del propietario de la página especial para elsitio web. Si somos el dueño o webmaster, pdemos publicar una entrada especial de Sidewiki enlas páginas de nuestro sitio. Podemos publicar una entrada maestra para todo el sitio o crearentradas de páginas específicas para atraer a nuestros usuarios. Estas entradas especialesaparecerán con un fondo verde sobre otras entradas en la parte superior de la barra lateral deSidewiki.Es necesario tener la Sidewiki instalado aparte para poder usarlo desde Google WebmasterTools. Para nuestro caso no lo tenemos instalado porque básicamente usamos GoogleWebmaster Tools en su mayoría para mejorar la página en su conjunto, para el buscador deGoogle de manera primordial y de forma secundaria para otros buscadores. No usamosWebmaster Tools para añadir aplicaciones propias para añadir comentarios como puede resultarSidewiki porque para ello hay otros medios como ya vimos en el tema de aplicaciones.
  • 160. 6.12.4.3 Rendimiento del sitioEsta herramienta muestra estadísticas sobre el rendimiento de nuestro sitio. Podemos utilizaresta información para mejorar la velocidad del sitio y para ofrecer un servicio más rápido a losusuarios.En una primera visión general del rendimiento tenemos que las páginas de nuestro sitio tardanuna media de 2,1 segundos en cargarse (actualizado el 23/08/2010). El tiempo de carga mediode nuestro sitio es más rápido que el del 66% de los sitios.Cabe mencionar que la información que da está herramienta es bastante escasa pero nos da unavisión global. Concretamente para el rendimiento del sitio, para la optimización ya usamos enapartados anteriores el Page Speed con el que evaluamos el rendimiento de nuestras páginas yobtuvimos sugerencias sobre cómo mejorarlas. Por tanto, mejorar la velocidad media de 2.1segundos por páginas es bastante complicado ya que nuestra página está optimizada, esa mediade carga se debe al gran volumen de imágenes y animaciones de las que disponemos.6.12.4.4 Sitemap de vídeoYa vimos lo que era un Sitemap, por lo que un Sitemap de vídeo básicamente lo que hace esusar la extensión de Google para incluir vídeo con el protocolo de Sitemap de forma que faciliteinformación al buscador acerca del contenido de los vídeos de nuestro sitio. Contiene todos losvídeos con la ubicación y prioridad. Para nuestro caso no usamos contenido de vídeo por lo queno será necesario realizar ningún Sitemap de vídeo.6.13 Google AnalyticsHabiendo hecho las optimizaciones propias con Google Wemasters Tools y estando indexadonuestro sitio (aunque no es necesario, pero se recomienda para obtener más tráfico) vamos aañadir una de las aplicaciones más importantes que vimos en el Capítulo 5. Concretamente nosreferimos a una aplicación para el análisis y el marketing: Google Analytics.Google Analytics es sin duda la mejor aplicación web para ofrecernos estadísticas sobre nuestrositio. Como ya comentamos en el Capítulo de Aplicaciones, Google Analytics, nos ofreceestadísticas sobre la inversión publicitaria, el tráfico, elementos multimedia, etc. Nos vamos acentral principalmente en como incluirlo en nuestra página y muy por encima en los grupos deinforme.Para usar esta fabulosa herramienta que nos ofrece de manera gratuita Google es necesariologearnos y añadir un sitio. Los pasos para añadir un sitio a Google Analytics son lossiguientes:1. ___________________________________________________________________ Accedemos a http://www.google.es/analytics desde nuestra cuenta de Google.2. ___________________________________________________________________ Le damos al enlace “Añadir perfil del sitio web” e introducimos la URL de nuestro sitio eligiendola opción de “Añadir un perfil para un dominio nuevo” (Figura 6.41).3. ___________________________________________________________________ El último paso es copiar el código de seguimiento que nos aparece al añadir el nuevo sitio web.Este código tiene que ir en todas las páginas de nuestro sito sobre las que queremos realizar unseguimiento con Google Analytics. ___________________________________________________________________ Antes del fragmento de código de seguimiento de la sección <head> del código HTML. ___________________________________________________________________ Después tanto del fragmento de código de seguimiento como de todo el contenido de la página(por ejemplo al final del cuerpo del código HTML). Nosotros optaremos por esta opción(Código 6.39) por ser la mejor para la carga de la página. En apartados anteriores vimos quetodos los scripts que no sean estrictamente necesarios van al final de la página web.
  • 161. Figura 6.41: Crear un nuevo perfil del sitio web en Google Analytics Código 6.39: Seguimiento de Google Analytics...<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src=" + gaJsHost + "google-analytics.com/ga.jstype=text/javascript%3E%3C/script%3E"));try {var pageTracker = _gat._getTracker("UA-10788966-3"); // Identidad del perfilpageTracker._trackPageview();} catch(err) {}</script></body>La verificación del nuevo perfil para nuestro sitio por parte Google Analytics no esinmediata podrá tardar varios días. Una vez verificado el sitio podremos acceder a ungran número de herramientas sobre estadísticas ordenadas por grupos: Panel (resumen de las estadísticas más importantes) Intelillenge (alertas automáticas sobre las estadísticas) Usuarios (visitantes, perfiles técnicos, segmentación de usuarios) Fuentes de tráfico (fuentes que enviaron visitas, palabras clave) Contenidos (número de visitas de cada página, contenido principal, análisis denavegación) Objetivos (metas conseguidas)
  • 162. Figura 6.42: Panel de Google AnalyticsPor defecto se nos muestra el panel (Figura 6.42), que no es más que un resumen de los datosmás relevantes: número de visitas, páginas más visitadas, uso del sitio, etc.Vamos a comentar de manera muy superficial los grupos de informes estadísticos ya que GoogleAnalytics es demasiado extenso y en su mayoría se enfoca al marketing que aunque tiene algoque ver con la visibilidad de nuestro sitio se sale del ámbito general de estudio de estedocumento.6.13.1 IntelligenceEn este informe se muestra una lista de las alertas automáticas y personalizadas de las métricasdiarias dentro del periodo seleccionado. Dichas alertas pueden ser debidas a una reducción delnúmero de visitas, promedio de tiempo en el sitio, etc. Por defecto, solo tenemos activada lasalertas pos número de visitantes (primera gráfica del la Figura 6.42) pero podemos añadir tantascomo queramos. Además, podemos visualizar las alertas diarias, semanales y mensuales (Figura6.43), obteniendo de esta forma el cambio en las alertas a lo largo del tiempo según lasmodificaciones en nuestro sitio web.
  • 163. Figura 6.43: Intelligence (alertas automáticas)6.13.2 UsuariosEn este informe se muestra cuántos usuarios han visitado nuestro sitio web y cuánto tiempo handedicado a interactuar con el contenido. El informe ofrece (Figura 6.44) una perspectiva deltráfico que nos permite centrarnos en las características de distintos segmentos de usuarios quevisitan el sitio, y examinar los diferentes factores que conforman la calidad de las visitas (esdecir, el promedio de páginas vistas, el tiempo que el usuario pasa en el sitio o el porcentaje derebote). Figura 6.44: Usuarios6.13.3 Fuentes de tráficoEn este informe se muestra una descripción de las distintas fuentes que envían tráfico a nuestrositio web. El informe ofrece (Figura 6.45) un gráfico con las tendencias del tráfico, mientrasque el diagrama y las tablas reflejan los elementos que impulsan dichas tendencias. Elparámetro "Tráfico directo" indica las visitas de los usuarios que han hecho clic en un marcadorpara acceder a nuestro sitio web o que han introducido la dirección URL directamente en elnavegador. "Sitios de referencia" muestra las visitas procedentes de otro sitio web. El indicador"Motores de búsqueda" refleja las visitas que proceden de una página de resultados de un motorde búsqueda.
  • 164. Figura 6.45: Fuentes de tráfico6.13.4 ContenidoEn este informe se ofrece (Figura 6.46) un resumen del volumen de páginas vistas, así como unalista de las páginas ("Contenido principal") que más han influido en estas visitas. Las "Páginasde acceso" permiten supervisar los porcentajes de rebote en las principales páginas de destino.Es recomendable que modifiquemos aquellas páginas que presentan un índice de reboteelevado. Figura 6.46: Contenido6.13.5 Algunas estadísticasA continuación mostramos una pequeña parte de las estadísticas que hemos obtenido de GoogleAnalytics y que nos mostrarán si necesitamos mejorar la página, seguir con la misma filosofíade marketing o tomar algunas decisiones concretas sobre nuestros objetivos. ___________________________________________________________________ El porcentaje de cambios que hemos hecho en nuestro sito con respecto al mes anterior a
  • 165. mejorado nuestros informes un 249,02% ___________________________________________________________________ El 60% del tráfico hacia nuestro sitio es directo (URL en la barra de direcciones del navegador). ___________________________________________________________________ El 25% del tráfico se debe a motores de búsqueda (Google, Yahoo, etc). ___________________________________________________________________ El 15% del tráfico se debe a sitios de referencia (enlaces a nuestro sitio). ___________________________________________________________________ El último mes ha habido un aumento del número de visitas. ___________________________________________________________________ El numero total de visitas en todo el mes ha sido de 154. ___________________________________________________________________ De ese total de visitas prácticamente la mitad han sido de usuarios que han vuelto a entrar.Tenemos un total de 77 usuarios. ___________________________________________________________________ Las páginas vistas por los usuarios han sido 409. No es que tengamos tantas páginas,simplemente es te resultado es el múltiplo de páginas vistas por cada uno de los usuarios. ___________________________________________________________________ La mayoría de los usuarios ven 2 páginas y media. ___________________________________________________________________ Las páginas más visitadas son las que más nos interesan ___________________________________________________________________ En el 60% de las visitas los usuarios han salido de nuestro sitio desde la página que accedieron(porcentaje de rebote). ___________________________________________________________________ Casi la mitad de las visitas se debieron a usuarios nuevos. ___________________________________________________________________ La mayoría de usuarios que entraron usaban Firefox desde Windows y Safari desde Mac. ___________________________________________________________________ Sabemos que un alto porcentaje de visitas se hicieron usando conexión a internet por cable. ___________________________________________________________________ España es el país que genera más tráfico hacia nuestra página, concretamente las grandesciudades costeras. ___________________________________________________________________ El idioma principal de los visitantes es el español.Por lo general, no tendríamos porque cambiar ninguna página de nuestro sitio aunque siemprese puede mejorar u ofrecer nuevas experiencias a nuestros usuarios. Nuestras inversiones estánteniendo resultados directos en lo que se refiere a las perspectivas que buscábamos con nuestrositio (negocio).6.14 ConclusionesEn este capítulo hemos visto los pasos a seguir para realizar una web con las tecnologías,aplicaciones vistas cumpliendo el estándar del W3C y con un pie en el futuro cercano deldesarrollo. Sin embargo, una buena base donde construir y ofrecer algo no es nada si noofrecemos un contenido interesante y de calidad sin esperas para el usuario. Por ello, hemosestudiado también como crear buenos contenidos (mapa conceptual) separados del estilo y lainteracción (web semántica), optimizando la descarga (PageSpeed) y entendiendo lo que los
  • 166. usuarios quieren (Analytics).El contenido es muchísimo más importante que el continente, el ofrecer a los usuarios lo quebuscan sin engañarlos es la base para la visibilidad en los buscadores, es la regla fundamentaldel SEO (69). Aunque nuestra página tenga irregularidades, si el contenido es claro y de calidadpuntuaremos positivamente en nuestra visibilidad. Cabe destacar que eso no quita de quepáginas con irregularidades en el estándar y falta de optimizaciones de carga puntúennegativamente en el posicionamiento.Volviendo al ejemplo con el que hemos documentado la implementación web, podríamosenmarcar nuestro sitio dentro de la Web 3.0 ya que: el contenido está separado del aspectovisual y existe contenido dinámico e interacción.Nuestra web se centra fundamentalmente en mostrar información al usuario pero si hubiésemosquerido hacer una aplicación (por ejemplo un editor de textos online) los pasos hubieran sido losmismos. El único cambio hubiese sido: ___________________________________________________________________ Aumento en el desarrollo de algoritmos complejos usando los lenguajes de programación vistospara la web ___________________________________________________________________ Aumento del contenido dinámico y uso del servidorCentrarse en el desarrollo concreto de una aplicación compleja se sale del margen de estudioque no es otro que la web y su futuro. No obstante y como hemos dicho con antelación, muchasaplicaciones de escritorio pueden desarrollarse online y en un futuro próximo podrán realizarsehasta aquellas que siempre han requerido de un sobremesa de alta gama.
  • 167. CAPÍTULO 2 Capítulo 7 “Nuestro destino ejerce su influencia sobre nosotros incluso cuanto todavía no hemos aprendido su naturaleza; nuestro futuro dicta las leyes de nuestra actualidad.” ~ Friedrich NietzscheCAPITULO 7: NUEVAS TECNOLOGÍAS omenzamos este libro con la introducción y definición del termino Web 3.0, queC no fue otro que el de la Web Semántica. Aunque actualmente existen varias definiciones para este concepto y no existe consenso, el cambio fundamental es la separación del contenido del resto de elementos. Junto con ese cambioacompañan también nuevos usos y herramientas online más complejas gracias a lastecnologías y aplicaciones para el desarrollo que hemos estudiado. A lo largo de todoslos capítulos hemos ido recorriendo el estado actual de la Web intentando ver latendencia de cara a la nueva versión. Después de los temas tratados, podemos hacernosuna idea de que navegadores, tecnologías y aplicaciones para el desarrollo continuaránen la Web 3.0. Pero la cosa no acaba ahí, actualmente y arropados por Google se estánafianzando nuevas poderosas tecnologías. Para hacernos una idea de lo que se nosavecina, en este capítulo introduciremos: ___________________________________________________________________ HTML5 como maquetado sustituto del HTML 4.01 ___________________________________________________________________ CSS 3 como estilo sustituto del CSS 2.1 ___________________________________________________________________ WebM como contenedor multimedia sustituto de Flash ___________________________________________________________________ WebGL como generador 3D sustituto de VRML7.1HTML5HTML5 es la nueva versión del lenguaje de etiquetado para la elaboración de páginas web.Básicamente a simple vista podemos apreciar que se han acortado declaraciones, se han añadidoetiquetas con nuevas y/o complejas posibilidades y se han eliminado otras. Sin embargo, lacualidad fundamental del HTML5 con respecto a sus antecesores es que se presenta como unaplataforma para integrar perfectamente cualquier tipo de aplicación online. (70)7.1.1 Características fundamentales7.1.1.1 GeolocalizaciónLa geolocalización o ubicación geográfica ya se está utilizando en toda la web hoy en día.Muchos sitios web muestran su ubicación actual, localización de establecimientos, información PÁGINA 153 DE 172
  • 168. como el tiempo o las noticias locales. Actualmente existe una API que usando HTML5 yJavaScript permite definir la información de ubicación con el interfaz de alto nivel (GPS)asociado con el dispositivo desde donde establecemos la conexión. Según el tipo de conexióndesde donde accedemos a la red, podemos incluir la direcciones IP, RFID, WiFi y Bluetooth,direcciones MAC e identificadores GSM/CDMA entre otros muchos tipos de datos personalespara que nos muestre información de utilidad personal relativa a nuestra ubicación. Todo estosiempre y cuando se cuente con la autorización del usuario.7.1.1.2 Web WorkersAl realizar operaciones avanzadas en un navegador web, tanto página web donde se ejecuta(servidor), así como para el navegador web (cliente) se sobrecargan pudiendo en ocasionesquedarse colgado y dejar la interfaz del usuario sin responder hasta que esté terminada laoperación. Sin embargo, gracias a HTML5 hay una manera para hacer frente a este problemausando Web Workers. (71)(72)Básicamente, los Web Workers ofrecen la posibilidad de cargar un archivo JavaScript de formadinámica y, a continuación disponer de un código para ejecutar el proceso que ralentiza en unproceso de fondo, de forma que no afecte a la interfaz de usuario, ni a su nivel de respuesta.Con esta característica de HTML5 podemos seguir haciendo lo que queramos, seleccionar cosa,hacer clic, etc mientras que todos los cálculos del sitio web se realizan de fondo.7.1.1.3 Cache para aplicaciones webEsta cache tiene la capacidad de almacenar aplicaciones web como por ejemplo de correoelectrónico a nivel local y acceder a ella sin tener que conectarse a Internet o instalar un clienteexterno como Outlook o Thunderbird. Actualmente, podemos encontrar una de las mejoresimplementaciones de las especificaciones de HTML5 para aplicaciones de caché con GoogleGears que nos permite acceder a Gmail sin conexión.En este concepto radica uno de los usos principales de la Web 3.0 que veremos en el últimocapítulo.7.1.1.4 CanvasGracias a la nueva etiqueta canvas podemos dibujar y renderizar imágenes directamente en laweb por medio de un lienzo (Código 7.2). Es como si tuviéramos un editor de imágenes onlineal que le podemos sacar el máximo partido añadiéndole funcionalidades extras a nuestro gustopor medio de JavaScript. Esto permite crear videojuegos, animaciones complejas, interfacesavanzados, etc. Código 7.1: Incluir lienzo en HTML5<canvas>Tu navegador no soporta el elemento canvas</canvas>En el Código 7.1 tenemos un ejemplo simple que toma las dimensiones del elemento canvas pordefecto (300x150 pixeles), pero si lo deseamos podemos especificar por medio de atributos“width” y “height”.7.1.1.5 VídeoGracias a la nueva etiqueta de vídeo es muy sencillo incluir cualquier vídeo en nuestra web(Código 7.2) pudiendo incluso crear algunos efectos con JavaScript. Estableciendo la URL delarchivo podríamos visualizar cualquier formato y además sin ningún tipo de plugin (nonecesitamos más Adobe Flash para vídeos). Realmente es igual que hacíamos para el casoconcreto de la etiqueta imagen. Código 7.2: Incluir vídeo en HTML5<video src=“willow.mp4”>Tu navegador no soporta el elemento video</video>
  • 169. En el Código 7.1 tenemos un ejemplo simple que toma los valores del elemento vídeo pordefecto, pero si lo deseamos podemos especificar por medio de atributos el tipo de control, lasdimensiones, etc.7.1.2 Diferencias entre (X)HTML5 y (X)HTMLLa quinta versión del HTML a efectos de maquetado comparada con HTML tiene tresdiferencias básicas (Código 7.3 y 7.4): ___________________________________________________________________ HTML5 tiene nuevos elementos de bloque específicos cuyo carácter es puramente semántico. Ennuestra implementación teníamos que usar identificadores para dar ese carácter semántico a losdiv. ___________________________________________________________________ HTML5 tiene nuevos elementos con distintas funcionalidades: vídeo, canvas, etc. ___________________________________________________________________ HTML5 a eliminado muchas etiquetas y atributos que estaban en desuso. Código 7.3: Documento HTML 4.01 similar a HTML5<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- tipo de documento --><html> <!-- en HTML 4.01 podemos escribir en minúsculas o mayúsculas --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- codificación --> </head> <body> <div id="header"> <!-- cabecera --> <h1>Nuestro sitio</h1> </div> <div id="nav"> <!-- menú de navegación --> <ul> <li>Inicio</li> <li>Productos</li> <li>Contacto</li> </ul> </div> <div id=section> <!-- sección, contenido--> <h1>Nuestro articulo</h1> <!-- artículo--> <p>...</p> <!-- párrafo--> </div> <div id="footer"> <!-- pié de página--> <p>...</p> </div> </body></html> Código 7.4: Documento HTML 5 básico<!DOCTYPE html> <!-- tipo de documento más simple --><html> <head> <meta charset="utf-8"> <!-- tipo de codificación más corta--> </head> <body>
  • 170. <header> <!-- div semántico para la cabecera --> <h1>Nuestro sitio</h1> </header> <nav> <!-- div semántico para la navegación --> <ul> <li>Inicio</li> <li>Productos</li> <li>Contacto</li> </ul> </nav> <section> <!-- div semántico para una sección--> <h1>Nuestro articulo</h1> <!-- artículo--> <article> <!-- div semántico para una artículo de la sección--> <p>...</p> <!-- párrafo--> </article> </section> <footer> <!-- div semántico para el pié de página--> <p>...</p> </footer> </body></html>7.1.2.1 Nuevas etiquetasHasta ahora hemos visto las etiquetas de canvas y video dentro de las característicasfundamentales del HTML5: ___________________________________________________________________ <canvas> para mostrar gráficos renderizados en tiempo real ___________________________________________________________________ <video> para añadir vídeo.También tenemos las etiquetas básicas para del maquetado que son las mismas que introdujimosen el Capítulo de Implementación en la Figura 6.14: ___________________________________________________________________ <header> para representa la cabecera (saludo inicial, logo de empresa, etc). ___________________________________________________________________ <nav> para representa la sección de navegación (menú). ___________________________________________________________________ <article> para declarar un trozo del contenido como artículo (articulo en periódicos, entradas enblogs, etc ). ___________________________________________________________________ <section> para indicar una sección genérica. ___________________________________________________________________ <aside> para contenido que se relaciona muy levemente con el resto. ___________________________________________________________________ <footer> para representar el pié de página (autor, copyright, etc).Además, existen otras etiquetas como por ejemplo: ___________________________________________________________________ <dialog> para representar conversaciones. ___________________________________________________________________ <
  • 171. audio> para añadir audio. ___________________________________________________________________ <embed> para incluir plugins. ___________________________________________________________________ <meter> para indicar medidas ___________________________________________________________________ <time> para mostrar fechas y/o tiempo. ___________________________________________________________________ <details> para mostrar información adicional.7.1.2.2 Etiquetas eliminadasTodas las etiquetas encargadas del estilo se han eliminado delegando esta función al CSS.Además, de las propias de los frames que iban en contra de la definición de sitio webobstaculizando a los rastreadores, ya que el contenido con un frame se trocea en distintosdocumentos HTML incompletos.A continuación mostramos algunas de las etiquetas eliminadas de HTML5 y que tampocodeberíamos usar en otras versiones del HTML: ___________________________________________________________________ acronym ___________________________________________________________________ basefont ___________________________________________________________________ center ___________________________________________________________________ dir ___________________________________________________________________ font ___________________________________________________________________ frame ___________________________________________________________________ isindex7.2CSS 3CSS3 es la nueva versión del lenguaje de hojas de estilo en cascada para la elaboración depáginas web. Básicamente a simple vista podemos apreciar que se ha extendido lafuncionalidad, se han añadido nuevas propiedades, efectos y selectores a los ya existentes enCSS2.1. (73)7.2.1 Características fundamentales7.2.1.1 @font-face@font-face nos permite especificar las fuentes de texto en línea para mostrar texto en nuestraspáginas web (Código 7.5). Al permitirnos que proporcionemos nuestras propias fuentes, seelimina la necesidad de depender de un número limitado de fuentes de usuarios instaladas en losequipos.Antes para solucionar la ausencia de fuentes necesitábamos poner varias fuentes alternativas porsi alguna de ellas no estaba en el equipo del visitante o bien como vimos en el apartado deaplicaciones, usar una aplicación como Cufón para generar la tipografía.
  • 172. Código 7.5: Elegir la fuente de texto que queramos@font-face { font-family: “DejaVu Sans”; /* nombre de la fuente */ src: url("font/dejavusans.ttf"); /* dirección donde se encuentra la fuente */}Con el ejemplo del Código 7.5 podremos usar para cualquier tipo de tipografía que definamos lafuente “DejaVu Sans”.7.2.1.2 BordesLas nuevas propiedades para los bordes nos permiten personalizar aún más los bordes de loselementos HTML (Código 7.6). Una de las propiedades más solicitadas es la de poderincorporar imágenes y redondear las esquinas: ___________________________________________________________________ border-image: para poner una imagen al borde. ___________________________________________________________________ border-radius: para redondear bordes. Código 7.6: Bordes redondeados con imágenesdiv { border-image: url(img/floresdecolores.png); /* imagen que llena los bordes */ border-radius: 20px; /* radio */}Gracias al ejemplo del Código 7.6 podremos ver todos los elementos de bloque tipo “div” conbordes redondeados y flores de colores (la imagen). En nuestro ejemplo de página webutilizamos la propiedad “border-radius” que existe especifica para cada navegador. Estápropiedad al igual que muchas otras aún no están implementadas en todos los navegadores.7.2.1.3 SombrasLas sombras era otra de las deficiencias de la anterior versión de hojas de estilo en cascada. Parael caso de elementos de bloque se solucionaba superponiendo imágenes o creando el montajecompleto con nuestro editor de imágenes. Por otro lado, si buscábamos sombras para nuestrotexto solo podíamos hacerlo usando herramientas como Cufón. Ahora, gracias a CSS3 esposible añadirle este efecto a los elementos HTML (Código 7.7). ___________________________________________________________________ box-shadow: para poner una sombra propia de marcos. ___________________________________________________________________ text-shadow: para poner sombra al texto. Código 7.7: Sombrasdiv { box-shadow: 10px 10px 5px #ccc; /* sombra gris para los div*/}p{ text-shadow: 3px 3px 5px red; /* sombra roja para el texto de los párrafos */}Según observamos en el ejemplo de Código 7.7, la forma de configurar la sombra es similarpara los marcos que para el texto. En primer lugar tenemos el desplazamiento horizontal y
  • 173. vertical, seguidos del desenfoque y el color de nuestra sombra. Cabe mencionar que estaspropiedades no posicionan la sombra, para tal caso deberemos usar la propiedad de relleno opadding.7.2.1.4 Fondos avanzadosHasta ahora con las versiones anteriores del CSS era posible poner un único fondo dentro de unelemento HTML. Está funcionalidad se extiende pudiendo añadir múltiples fondos (Código7.8), situarlos y escalarlos: ___________________________________________________________________ background-origin: para indicar la posición del fondo ___________________________________________________________________ background-clip: para indicar si el fondo superpone al borde y por donde ___________________________________________________________________ background-size: para indicar el tamaño Código 7.8: Múltiples fondosbody { background: url(body-top.png) top left no-repeat, /* fondo arriba a la izquierda */ url(nicegirl.png) top 11px no-repeat, /* fondo arriba despegado 15px */ url(body-bottom.png) bottom left no-repeat, /* fondo abajo a la izquierda */}Con las nuevas propiedades del background es posible hacer composiciones de imágenes paracrear fondos a medida sin pasar por el editor de imágenes.7.2.1.5 Otras propiedades importantesEnte otras muchas de las propiedades importantes que caracterizan al CSS3 tenemos: ___________________________________________________________________ opacity: para darle un nivel de transparencia al objeto. ___________________________________________________________________ rgba: para definir colores RGB con canal alfa (opacidad). ___________________________________________________________________ resize: para definir si un objeto puede cambiar o no de tamaño y de que forma.7.2.1.6 Selector de atributosAnteriormente con CSS 2.1, solo podíamos seleccionar por elemento HTML, y por los atributosde identificador y clase, ahora se han introducido el resto de atributos. Podemos buscarcualquier tipo de atributo y seleccionarlo según su contenido: ___________________________________________________________________ [atributo^=unvalor]: para seleccionar elementos cuyo atributo empiezan por “unvalor”. ___________________________________________________________________ [atributo$=unvalor]: para seleccionar elementos cuyo atributo terminan por “unvalor”. ___________________________________________________________________ [atributo*=unvalor]: para seleccionar elementos cuyo atributo tienen “unvalor”. Código 7.9: Selección de elemento según atributo*[title*="MTRT"] { background: white;}
  • 174. Para el ejemplo del Código 7.9 todos los elementos que contengan dentro del título la cadena“MTRT” tendrán un fondo blanco.7.3WebMWebM es un contenedor multimedia (audio/vídeo) que podemos usar por ejemplo cuandoinsertemos cualquier tipo de contenido multimedia en nuestro sitio HTML5. Podemos compararWebM con Flash o AVI con la única salvedad de que en su interior solo alberga formatos libres.Por el contrario Flash si albergará todo tipo de formatos pero con la pega de que para usar FLVtendremos que pagar. (74)La base que hace grande a WebM es que alberga en su interior el formato de vídeo VP8 (75) ypara audio Vorbis (76).7.3.1 VP8Las características principales de VP8 son: ___________________________________________________________________ Códec libre de patentes y de código abierto. ___________________________________________________________________ Ganancia significativa en eficacia de compresión. A grandes rasgos podríamos reducir un vídeo enformato H.264 a la mitad de compresión con VP8 sin apreciar a penas cambios. ___________________________________________________________________ Decodificación menos compleja computacionalmente que su antecesor VP7 o H.264 (privativos).Su complejidad es factible para dispositivos portátiles. ___________________________________________________________________ Calidad comparable a la de H.264.7.3.2 VorbisLas características principales de Vorbis son: ___________________________________________________________________ Códec libre de patentes y de código abierto. ___________________________________________________________________ Mayor calidad que algunos de sus competidores (MP3, AAC, etc) para tasas de codificaciónmayores de 180 kbps.7.4WebGLWebGL nos brinda la posibilidad de traer gráficos en 2D y 3D para la Web mediante el elementocanvas de HTML5 y una API JavaScript. Dicha API usa una implementación de OpenGL ES2.05. WebGL es la evolución de X3D que a su vez es la evolución de VRML. (77)Las características fundamentales son: ___________________________________________________________________ Creación de objetos 2D y 3D. ___________________________________________________________________ Añadir colores. ___________________________________________________________________ Trasladar objetos y crear animaciones. ___________________________________________________________________ I5 OpenGL ES es una variante reducida de la librería gráfica OpenGL para dispositivos con recursos limitados. Además, la versión 2.0 permite a los usuarios implementar funcionalidades por parte del usuario, una gran ventaja pero que elimina la compatibilidad hacia atrás.
  • 175. ncorporar texturas a partes de los objetos. ___________________________________________________________________ Iluminación y efectos de iluminación. ___________________________________________________________________ Texturas animadas.7.5ConclusionesA día de hoy, las nuevas tecnologías estudiadas son apoyadas y/o surgen de la mano de Google.seguidas del apoyo de grandes y medianas compañías como Apple, Adobe, Opera Software yfundaciones como Mozilla. Por supuesto, con las peculiaridades de cada uno. Por ejemplo,Apple busca liberar a sus usuarios de la necesidad de usar Flash y Adobe busca que Flash sea elcontenedor favorito a usar con VP8. También las empresas de videojuegos están altamenteinteresadas en el desarrollo de WebGL.Sin duda, las nuevas aplicaciones web vendrán de la mano de HTML5 y sus nuevas etiquetas.La quinta versión del HTML tan solo es la punta del iceberg, debajo lo sustentarán las nuevastecnologías vistas CSS3 (para el estilo), WebM (para el contenido multimedia), WebGL (para elmundo 2/3D) y las consolidadas como JavaScript que se hará aún más fuerte.Hace unos años parecía que teníamos mucho camino por delante, por ejemplo la especificacióndel HTML5 estaba prevista para su uso en el 2022 y al resto de tecnologías le faltaban módulospor implementar. Sin embargo, en el trascurrir del 2008/2010 han ocurrido una series deacontecimientos (liberación de VP8, implementación de canvas, estandarizaciones, etc) queunido a la carrera de los navegadores por la implementación del HTML5, han traído montonesde webs que ya implementan algunas funciones de estas nuevas tecnologías. De seguir latendencia en esta exponencial, parece que en apenas unos años tendremos este gran poder anuestro alcance.
  • 176. CAPÍTULO 2 Capítulo 8 “The future belongs to those who believe in the beauty of their dreams” ~ Eleanor RooseveltCAPITULO 8: CONCLUSIONESL a Web 3.0 se refiere al uso que haremos de la web en los próximos años. Esa versión de la web dispondrá de las tecnologías y aplicaciones que hemos estudiado, prevaleciendo una tendencia en todas ellas hacia el uso de software libre. La Web debe y tiene que ser libre.El carácter fundamental de la Web 3.0 será, el de una web semántica en la queprevalezcan los estándares frente a los intereses privativos de algunas compañías.Gracias a una implementación de la web en la que se separa el contenido del resto y aluso de tecnologías totalmente compatibles, eliminamos las principales barreras haciauna Web versátil, extensible y dinámica; compatible con cualquier tipo de navegador ydispositivo.8.1¿Qué navegador predominará en la Web 3.0?Actualmente, Google Chrome es el navegador más rápido pero el que más recursosconsume, además de no permitirnos ver todas las páginas (solo aquellas que cumplenlos estándares web). Mozilla Firefox es el más ligero y versátil aunque con muchasextensiones puede hacerse pesado. Opera es el pionero en el cumplimiento deestándares y del cuál están copiando la interfaz gráfica el resto de navegadorespopulares, sin embargo es el más lento en cargar las páginas. Safari comparte el mismomotor que Google Chrome y también es muy potente pero muestra deficiencias deseguridad. Internet Explorer es el navegador que menos protocolos soportaba y el quepeor integraba las tecnologías web, pero es en la versión 9 actual cuando por fin se estáigualado al resto de navegadores en el soporte de tecnologías.De cara a la Web 3.0 podríamos vaticinar según los datos estudiados y las pruebasrealizadas que la mayor parte del mercado se lo llevarán Google Chrome. ____________________________________________________________ Google Chrome cada vez dispone de más extensiones, de hecho, las extensiones másimportantes de Mozilla Firefox ya han sido exportadas al navegador de Google eincluso integradas por defecto en el propio software. Es el caso, por ejemplo, deAdBlock (para evitar ver publicidad en la Web) y Firebug (para desarrollo web, visto enel Capítulo de Implementación). ____________________________________________________________ Google Chrome no solo está respaldado por una gran compañía sino por cualquiera que PÁGINA 163 DE 172
  • 177. quiera colaborar, ya que surge de un proyecto de código abierto denominado Chromium.Además, su motor es libre. ____________________________________________________________ Los equipos y dispositivos cada vez disponen de más recursos por lo que aprovechamoslas ventajas de que Chrome asigne a cada pestaña un proceso independiente (un cuelguede una aplicación web no afecta al resto). ____________________________________________________________ Google dispone de cada vez mayor número de dispositivos que incorporen sus sistemasoperativos. Se espera que para el 2011 el 80% de los móviles vendidos dispongan deAndroid como sistema operativo para móviles, por lo que Chrome (en una versión másreducida) ocupará esa cuota de navegadores web para móviles. Google permitirá otrosnavegadores, pero al igual que ocurre con IE en Windows, al venir por defecto con elsistema operativo muchos usuarios se atendrán a él si ni siquiera plantearse el cambio.Algo parecido puede ocurrir en el mundo de los televisores, tablets PC, los netbook,portatiles y sobremesas, pues Google pretende lanzar en breve Chrome OS, un sistemaoperativo de código abierto basado en Linux y orientado al uso de la web (la mayoríade usuarios tienen que tienen un ordenador lo usan para el correo, las redessociales,...etc.). ____________________________________________________________ Google Chrome dispone del motor de renderizado web más rápido que existe hasta lafecha (Webkit). ____________________________________________________________ Cada vez existen menos páginas que no cumplan los estándares por lo que vandespareciendo los sitios con los que Google Chrome da problemas (el problema no esde Google Chrome sino de los sitios que están mal implementados). ____________________________________________________________ Google Chrome tiene el motor JavaScript más rápido que existe (V8), únicamente loiguala la nueva versión del motor JavasScript de Mozilla Firefox (SpiderMonkey 1.7). ____________________________________________________________ Google Chrome es el navegador que más área de visualización deja a la web.Google Chrome pretende incorporar los elementos que favorecen las cuotas de mercadoal restos de competidores, a la vez que aporta funciones propias que ninguno otroimplementa. El resto de posiciones, en orden decreciente es para: Internet Explorer,Firefox y Safari. Sobre Opera básicamente podemos decir que terminarádesapareciendo, a menos que mejore los tiempos de renderizado, libere su código y/opermita que no le coman terreno en los dispositivos que traen por defecto navegadoresde fábrica (Opera solía venir incluido en muchos dispositivos pero cada vez le estánperdiendo más terreno).8.2¿Qué tecnologías predominarán en la Web 3.0?Actualmente, el HTML, el CSS2.1, JavaScript y ActionScript (Flash) son las tecnologías másextendidas en el lado del cliente. El HTML es la tecnología base para la creación de páginasweb, permitiéndonos maquetar el contenido. Cualquier sitio hecho íntegramente con cualquierotra tecnología tiene que generar al final HTML. Por otra parte, el CSS es la tecnología basepara la creación del estilo de las páginas web, aunque también es posible definir el aspectográfico con atributos del propio HTML o el uso de JavaScript, Flash, etc.Con la potencia propia de un lenguaje de programación, el JavaScript es la tecnología que
  • 178. permite enriquecer las páginas web añadiéndole la capacidad de realizar funciones máscomplejas e interactuar de una forma más dinámica con el usuario. ActionScript básicamentenos permite lo mismo que JavaScript, aunque su uso más extendido en la web es el decontenedor de vídeo.De cara a la Web 3.0 podríamos vaticinar según los datos estudiados y las pruebasrealizadas que la mayor parte del mercado en el lado del cliente se lo llevará elconjunto formado por: HTML5, CSS3 y JavaScript. Para el caso de las nuevas versionesdel HTML y el CSS no tendremos rivales (únicamente las versiones anteriores), por otrolado para el caso de JavaScript si existen rivalidades (ActionScript, SilverLight, Appletsde Java, etc) (Figura 3.13). ____________________________________________________________ Uno de los nombres que se le dio a la Web 3.0: Web Semántica; proviene de la tendenciaen la separación del contenido del diseño. Esta tendencia permite escalar de manera másordenada todo el contenido que se está generando en la web, a su vez permite mejorar lainteracción con otras tecnologías, el soporte y expansión en cualquier plataforma. En laquinta versión, el HTML se ha reinventado, se ha hecho más estricto para mejorar lacompatibilidad, ha eliminado muchas de sus etiquetas y atributos (la mayoría en desusoo dedicados al estilo de la página) y ha añadido etiquetas puramente semánticas comopueden ser <nav> para la navegación o <footer> para el pie de página que permitenestructurar de manera más clara el contenido. ____________________________________________________________ El CSS en su tercera versión se reafirma de forma contundente como tecnologíaindiscutible para dotar de estilo al HTML. CSS3 subsana las deficiencias de susversiones anteriores incorporando: fuentes internas que no dependan del cliente, bordesredondeados (evitamos imágenes de bordes redondeados), sombras (anteriormente pormedio de imágenes, JavaScript), composiciones complejas de fondo, etc. Además,extiende el uso de selectores dentro del código HTML e incorpora algunas interaccionesque anteriormente solo podían hacerse mediante un lenguaje de programación comopudiera ser JavaScript o ActionScript (por ejemplo la interacción con el ratón segúnatributos). ____________________________________________________________ El HTML está extendiendo sus posibilidades, permitiendo subsanar las deficiencias desus versiones pasadas. Con la quinta versión podemos incluir: vídeos (no necesitamos nicodecs, ni plugins), contenido 2D y 3D dinámico (edición de imágenes, videojuegosonline). Además, entre otras muchas posibilidades, podemos hacer uso deGeolocalizadores para mostrar nuestra posición en tiempo real (meteorología, noticias ycomercios de la zona), Web Workers para realizar varios procesos en paralelo (cálculoscomplejos mientras el usuario interactúa con la web) y cache para aplicaciones web.Esto último, nos permite trabajar con nuestras herramientas de Internet favoritas sinnecesidad de conexión (por ejemplo el uso de Gmail como si se tratase de Thunderbirdo Outlook). ____________________________________________________________ La funcionalidad extra que permite la quinta versión del HTML viene de la mano deJavaScript. JavaScript se consolida aún más como tecnología libre del lado del clientefrente a ActionScript (Adobe) y SilverLight (Microsoft). ____________________________________________________________ ActionScript y SilverLight son lenguajes de programación privativos y requieren de unsoftware adicional (plugins para el navegador). ____________________________________________________________ Los Applets de Java se encuentran en una tendencia al desuso desde hace tiempo, además
  • 179. requieren de una máquina virtual en el cliente, no obstante aún quedan muchasaplicaciones que hacen uso de está tecnología. ____________________________________________________________ JavaScript, a diferencia del resto, dispone de motor interno en los navegadores quepermite su ejecución (interprete). ____________________________________________________________ Con JavaScript es posible generar contenido dinámico (propio de las tecnologías del ladodel servidor), uno de los ejemplos para dicho fin se consigue a través del uso de AJAX(JavaScript asíncrono y XML). ____________________________________________________________ El mayor mercado que tiene ActionScript es por medio del uso de Flash comocontenedor. Para evitar perder mercado, Adobe pretende incorporar en su contenedor elformato libre de vídeo VP8, sin embargo Apple, ha decido no reproducir contenidoFlash por su “ineficiencia y vulnerabilidades de seguridad”. A principios de Noviembresalió la herramienta Skyfire para los iOS (sistema operativo para móviles de Apple) yMAC OS, que permite transformar cualquier vídeo de Flash a HTML5.El conjunto de HTML5, CSS3, JavaScript y la jerarquía DOM (DHTML) se fusionanpara crear aplicaciones ricas en Internet (RIA) de última generación. El nuevo DHTMLincorpora todas las posibilidades que aportan el resto de tecnologías. Básicamente, coneste conjunto podemos no solo crear cualquier aplicación, efecto o interacción que nospermita ActionScript, SilverLight o los Applets sino que extiende las posibilidades(incluyendo funciones propias que solo se podían hacer en el servidor), lacompatibilidad entre plataformas y a coste 0 para el desarrollador web. El resto deposiciones, en orden decreciente es para: ActionScript, SilverLight y los Applets. Sobrelos Applets básicamente podemos decir que terminarán desapareciendo, aunque aúnquedan muchas aplicaciones web (sobre todo chats) con este tipo de tecnología Java,normalmente también te permiten elegir ejecutar la aplicación en Flash (ActionScript).En el otro lado de la nube, la tecnología más extendida en el lado del servidor es el PHP, sinembargo para un marco más cerrado donde prevalece el uso comercial de grandes empresasdestaca JSP y ASP como tecnologías más extendidas. El PHP, JSP, ASP, Python, Ruby, etc; sonlas tecnología base para la creación de páginas dinámicas, permitiéndonos generar el contenidoque el usuario desea desde el servidor. Cualquier sitio que requiera un mínimo de gestión decontenidos necesita del uso de estás tecnologías.En el lado del servidor, podríamos vaticinar de cara a la Web 3.0 que el mercado se lo llevaráPHP y JSP, seguidos por Python como una fuerte promesa para el futuro (Figura 3.14). ____________________________________________________________ ASP es un lenguaje de programación privativo. ____________________________________________________________ PHP, JSP, Python y Ruby son libres. ____________________________________________________________ PHP es multiplataforma. ____________________________________________________________ ASP requiere de servidores Windows, aunque se puede hacer multiplataforma a través deMONO (proyecto de código abierto, multiplataforma para la implementación deMicrosoft .NET). ____________________________________________________________ JSP requiere de la máquina virtual de Java y ASP requiere de la máquina virtual deMONO.
  • 180. Por lo general en proyectos grandes las empresas buscan el soporte, respaldo y fama deotras empresas de proporciones similares. Algunas multinacionales del softwareobligaban indirectamente a que los consumidores adoptasen sus tecnologías, de talforma que los desarrolladores tuvieran que pagar por el uso y desarrollo de estás.Además, dichas tecnologías solían ser cerradas por lo que cualquier compatibilidad osoporte con una tecnología libre estaba baneada. La situación actual está cambiado, lastecnologías cerradas se están abriendo a la integración con tecnologías libres, y estás asu vez tienen acogida por grandes empresas, fundaciones y multinacionales. Porejemplo, en el caso de algunas de las tecnologías de Oracle (JSP) y Micrososft (ASP),tanto JSP como ASP permiten hacer lo mismo, no existen limitaciones por parte dellenguaje, la fortaleza radica en la capacidad de las librerías disponibles. ¿Entonces cuálelegir?, lógicamente aquella que no te ponga límites en el desarrollo, ni tasas por su uso,una tecnología libre, multiplataforma y de código abierto, una tecnología “de todos y denadie” que permite colaborar y mejorarla entre todos. Por lo tanto, queda totalmentedesmarcado ASP, aunque aún con fuerza perdurara por debajo del resto de tecnologías, amenos que Microsoft cambie su filosofía.Actualmente, tenemos que PHP seguido de JSP serán el futuro inmediato, y lastecnologías del estilo de Python y Ruby el futuro. Estas últimas tienen grandessimilitudes en cuanto a sintaxis limpia, código legible y sencillez, y cada vez poseenmás librerías e integración con otras tecnologías, pero es Python claramente la que tienemayor cabida tanto en el marco de Internet como en el de aplicaciones de escritoriodebido a su aparición 3 años anterior a Ruby (influido por Python).Resumiendo, en el lado del cliente: HTML5, CSS3 y JavaScript son el futuro, estánapoyados íntegramente por la comunidad de desarrolladores de Internet y lasmultinacionales. Aunque en principio no estaba prevista la recomendación del uso deHTML5 hasta el 2022 (fecha en la que estará totalmente listo), las grandes necesidadesy guerra entre el soporte de tecnologías están haciendo que esta fecha se adelante. En laactualidad tenemos aplicaciones sorprendentes hechas en HTML5 y soportadas por losnavegadores de última generación.Para el caso del lado del servidor: PHP, Python son el futuro, están apoyadosíntegramente por la comunidad, pero además Google aporta un apoyo extra a Python (dehecho Google contrato a su creador). Aunque PHP le saca mucha ventaja a Python, seprevee que para el 2020 sus usos sean equiparables seguidos de Ruby y JSP.8.3¿Qué aplicaciones para el desarrollo web predominarán en la Web 3.0?Actualmente, las aplicaciones para el desarrollo (creación, mantenimiento y mejora) másutilizadas según los estudios realizados son editores de código, analizadores, gestores decontenidos y widgets (Tabla 5.19). Estas aplicaciones pueden ser de escritorio, estar integradasen el navegador o en la propia web dependiendo si forman parte de ella o no.8.3.1 Editores de códigoActualmente, dentro de los editores de código para la web tenemos: Notepad++ y Kate entre losmás usados. Son editores ligeros y libres, de texto y código que soportan muchos lenguajes deprogramación. El mayor inconveniente que tienes es el hecho de que no son multiplataforma,Notepad++ es para Microsoft Windows y Kate para GNU/Linux. En la otra cara, la mayorventaja el soporte de lenguajes, el marcado y la personalización del área de trabajo. Ambosprevalecerán en sus respectivas plataformas sin embargo de decantarnos por uno de ellos seríaNotepad++: ___________________________________________________________________ P
  • 181. ermite buscar/remplazar en todos los documentos abiertos. Muy útil para cambios masivos declases, direcciones, etc. ___________________________________________________________________ Posee indicadores de cierre/apertura de etiquetas por defecto para HTML. ___________________________________________________________________ Detecta partes de código de un mismo archivo resaltando la sintaxis. Por ejemplo en undocumento de PHP que contenga: HTML, CSS y JavaScript. ___________________________________________________________________ Recarga archivos automáticamente.Las alternativas ha estos editores de código serían los editores de escritorio WYSIWYG como elDreamWeaver o el FrontPage, actualmente en desuso. Estos por lo general solían ensuciarmucho el código de cara a una optimización final en la carga de la página y el rendimiento SEO,además de dificultar la programación e integración con tecnologías del lado del servidor, noobstante actualmente están mejorando bastante.Normalmente estos editores los suelen usar personas con corta experiencia en desarrollo web,aunque suelen ser muy útiles en la incorporación de plantillas y desarrollos guiados por elpropio programa. El futuro inmediato lo marcaran editores del tipo de Notepad++, pero sin dudalos triunfadores serán los editores WYSIWYG online que compaginan distintos niveles deabstracción y profundización en el código, como los que ya ofrecen algunos servidores ygestores de contenido de manera gratuita. Un ejemplo puede ser el editor que trae por defecto elconocido gestor de contenidos Wordpress.8.3.2 Analizadores de códigoCuando hablamos de analizadores nos referimos a aquellos que permiten analizar el código decualquier página. Actualmente, entre el conjunto de aplicaciones existentes (por lo generalonline y/o integradas con el navegador) destaca Firebug. La sola recomendación de estáherramienta “quita un puesto de trabajo”. Esta herramienta no tienen rival alguno, de hecho yase están integrando herramientas de este tipo de serie con los navegadores. Básicamente, comoya vimos en el capítulo de implementación, permite editar, depurar y monitorizar el HTML,CSS y JavaScript, pudiendo extenderse para la evaluación y mejora de cargas con Pagespeed yrendimiento SEO.Su tendencia en el uso es abrumadora, y ya existen peticiones por parte de la comunidad para: ___________________________________________________________________ Soporte de las tecnologías del lado del servidor ___________________________________________________________________ Detección de otras aplicaciones para el desarrollo web (tal como hace Wappalyzer)8.3.3 Analizadores de visitasActualmente, Google Analytics es la aplicación web que más podemos encontrar integrada encualquier portal, blog o foro. Sus incontables y detalladas estadísticas sobre visitas hacen ha estáaplicación desmarcarse del resto de competidoras y la proclaman como herramienta base para elmarketing y estudio de visitas. No obstante, muchas veces se suele combinar su uso conQuantcast (dentro de la misma índole).8.3.4 Gestores de contenidoActualmente, el CMS más popular es Wordpress. Dicho puesto, ganado a pulso, ha sido graciasa una edición sencilla, alta personalización y a la existencia de multitud de temas gratuitos paracambiar su apariencia. Hace tiempo que se ha desmarcado a sus competidores más directoJoomla y Drupal, incluso está solventando las deficiencias de seguridad que poseía en susprimeras versiones.Día a día se iguala en prestaciones y seguridad a Drupal, e incluso a Plone (el CMS más potente
  • 182. del mercado). Aunque el camino es largo, por ahora, la gran multitud de prestaciones,configuraciones y servicios son añadidas por software de terceros (lo que puede resultar unaventaja ya que con una gran comunidad como es la de Wordpress permite la aparición de nuevasideas y dentro de una sana competencia).Como conclusión, por un lado Plone (una gran promesa) va a contar con el empuje que va asufrir Python en la web, sin embargo su dificultad de uso y configuración terminarán porhacerlo desaparecer. En el otro lado, tanto Drupal como Joomla se mantiene estables, intentanadaptarse a las pautas de Wordpress pero un núcleo bastante cerrado y una tediosa interfazhacen que incluso muchos de sus actuales usuarios migren.8.3.5 WidgetsWidgets, Gadgets, Plugins, muchas veces tienden a confundirse entremezclando sussignificados. Definiendo un Widget (o Gadget) como una aplicación de tamaño menor al de unplugin (ambos tienen la característica de que no se pueden ejecutar por si solos), en la actualidadencontramos el Widget por excelencia de la Web Social: AddThis. Este widget nos permitecompartir páginas web con otras páginas web normalmente redes sociales como Facebook yTwitter o en servidores de marcadores como Delicius.AddThis sigue al alza y no posee competidor alguno. Sencillo y fácil de integrar facilita laposibilidad de tener una red más interconectada y recoger aquellos lugares que más nos gustas(indexación orgánica)8.3.6 OtrosEn las conclusiones y tendencias vistas en el Capítulo 5, vimos los widgets, CMSs,analizadores y editores con una tendencia al alza, mantenimiento o en pleno declive de cara a unfuturo próximo. Pero, ¿qué ocurre con el resto de cara a la Web 3.0? Bueno, obviando lasaplicaciones que acabamos de ver, en la Web 3.0 continuarán: ___________________________________________________________________ reCAPTCHA o similares para validaciones ya que es una manera muy sencilla de evitar hackeosy spam masivo. ___________________________________________________________________ Disqus para comentarios básicos. Algunas desarrolladores suelen montar un gestor de contenidoscompleto cuando las necesidades del cliente son mínimas, Disqus resuelve necesidades básicasde feedbacks. ___________________________________________________________________ Magento, aunque con tendencia al alza, podría desaparecer quedando absorbido o convertido enun añadido para CMSs. ___________________________________________________________________ YouTube, no peligra aunque en la actualidad el dominio por la visualización de vídeos en Internetestá reñida. Por una parte, la BBC al frente de otras muchas corporaciones intentan evitar queYouTube, Vimeo, etc. se apoderen del formato televisivo en Internet (la televisión ordinaria seencuentra en decadencia) y están preparando lo que será “la televisión a la carta”, sin embargoGoogle ha dado un paso por delante lanzando su primer televisor en conjunto con Sony.También existe otro tipo de frente a la conquista del dominio multimedia en la red. El triunfo deSpotify (“música a la carta con publicidad”) ha inspirado a una compañía Sueca en la creaciónde Voddler (actualmente en Beta disponible en Estados Unidos y en Suecia) para lavisualización de “películas a la carta” pudiendo elegir el usuario donde ver la publicidad(obligatoria) a lo largo de la reproducción del film y con la ventaja de necesitar únicamente unnavegador (Spotify usa una aplicación de escritorio exclusivamente para Mac y Windows). ___________________________________________________________________ cPanel se mantendrá como herramienta para la gestión y control de hostings aunque en un futurolejano podría cambiar su ubicación debido a la reubicación y uso de los servidores (Apartado8.4).
  • 183.  ___________________________________________________________________ MediaWiki aunque con competidores mejores como TikiWiki, sigue al alza por su gran acogida,sencillez y gestión. Quizás el mayor inconveniente de TikiWiki sea el gran número de funcionesy configuraciones que lo hacen acercarse aún más a un CMS de carácter global. ___________________________________________________________________ phpBB es una apuesta para la creación de foros muy potente y aunque su popularidad a bajadobastante, equiparandose a aplicaciones para la creación de foros propietarias como vBulletin, esuna apuesta segura para el futuro pese a recibir menos instalaciones mensuales que vBulletin enlos últimos meses. ___________________________________________________________________ GetSatisfactión permite mejorar un producto, una web o un servicio de manera orgánica, es decir,mediante una interfaz sencilla y adaptada de la cuál se surte el propio usuario para aportar ideas,hacer preguntas y establecer sus estados de satisfacción. GetSatisfactión no tiene rival en cuantoa sencillez y manejo, y su beneficios son inmediatos, el único inconveniente que tiene es que esuna herramienta propietaria. La comunidad no puede mejorarla y los desarrolladores quequieran integrarla tienen que comprarla. Las alternativas libre son Trac (Python), Redmine(Ruby), sin embargo la presentación de conclusiones de los usuarios están sobrecargadas yescatimando la interfaz gráfica a tablas e infinidad de pestañas. Es de esperar, que comosolución surjan adaptaciones de estas aplicaciones algo más amigables, de hecho dichasaplicaciones se usan para mejorase a si mismo y uno de los temas candentes del “día a día” sonlas peticiones de los usuarios hacia una migración de la interfaz al más puro estilo deGetSatisfaction.Para concluir, entre aquellas famosas aplicaciones que no nos acompañaran en la Web 3.0,debido a que han sido o están siendo suplantadas por otras, poseen interfaces y prestacionesobsoletas y/o carecen del apoyo necesario de la comunidad, encontramos: phpDocumentor,Coppermine, etc. Y entre las que sufrirán una gran remodelación: phpMyAdmin.8.4¿Qué uso se le dará a la Web 3.0?En primer lugar surgirá un cambio de ubicación de las webs. Con seguridad, gracias aequipos cada vez más potentes y mayores velocidades de conexión, los servicios dehostings irán desapareciendo, quedando dicho uso delegado a los propios equipos de losdesarrolladores y/o dueños de las webs. Únicamente, para el caso de bases de datosdesproporcionadas como pudiera ser el soporte del historial de un gobierno, datos delcolectivo ciudadano, universidades, etc; existirían servidores ultra-potentes pero condedicación exclusiva.En segundo lugar, se indexará menos pero de más calidad pasando del uso derastreadores al uso de personas, buscadores orgánicos como mayores decisores en elPagerank y el posicionamiento. Del mismo modo y directamente relacionado con loanterior, se extenderán por todo la red los analizadores de satisfacción deusuarios/clientes.En tercer lugar, todo tendrá cabida en Internet y estará perfectamente interconectadopudiendo formar distintos tipos de subredes según categorías, hablamos del “Internet delas cosas” que surge a partir de la posibilidad de extensión de la IP (IPv6). El hecho detener cualquier objeto y alimento identificado y localizado, habilitando la posibilidad deun acceso/control telemático permitirá un cambio en la gestión global de nuestro planetaque además favorecerá la sostenibilidad de este. ____________________________________________________________ Se evitarían perdidas de objetos ____________________________________________________________ Se facilitaría la reutilización de recursos (piezas de dispositivos, material reciclado, etc)
  • 184.  ____________________________________________________________ Se podría controlar de manera exhaustiva las emisiones de gases. Por ejemplo accediendoa un supuesto dispositivo de carácter público encargado de contabilizar las emisiones deun vehículo y estableciendo unos límites. ____________________________________________________________ Se ahorrarían transportes innecesarios gracias a la teleasistencia y uso de cualquierutensilio en destino vía Internet, etc.Otro de los cambios que merecen la pena comentar, y que sin duda ya está teniendocabida en nuestros días, define dos filosofías/tendencias de uso en las que se delimitanlos límites entre donde empieza y acaba el dispositivo del usuario e Internet. La primeratendencia de uso se refiere a la de extensión del escritorio del cliente, donde todas lasaplicaciones locales están interconectadas entre si en la máquina local del usuario y a suvez conectadas con la nube de Internet (nombre común para el conjunto de servicios yaplicaciones proporcionados por los distintos proveedores). La segunda tendencia es lade extensión de la nube hacia el escritorio del cliente, donde cada una de lasaplicaciones de escritorio habituales son sustituidas por aplicaciones web e integradasgracias a la cache para aplicaciones de HTML5.Los máximos precursores de ambas tendencias son KDE y Google. KDE para laextensión del escritorio hacia Internet, con su escritorio por defecto en distribucionesGNU/Linux como Debian. Y Google para la extensión de Internet hacia el escritorio,con su sistema Chrome OS que basado en GNU/Linux tiene como función principalarrancar el navegador de Google Chrome y usar las aplicaciones de Google como Gmailsustituyendo a Thunderbird, Google Docs sustituyendo a OpenOffice, etc. Para el casode la última tendencia aun está todo “muy verde”, no obstante vamos a compara ambasviendo sus ventajas e inconvenientes.8.4.1 Extensión del escritorio hacia InternetVentajas: ____________________________________________________________ Aprovechamiento de los recursos y potencia del equipo del cliente. ____________________________________________________________ Mayor protección de datos. ____________________________________________________________ Acceso a datos en cualquier momento.Inconvenientes: ____________________________________________________________ Instalación y permisos para aplicaciones. ____________________________________________________________ Incompatibilidades entre plataformas.8.4.2 Extensión de Internet hacia el escritorioVentajas: ____________________________________________________________ No sería necesario buscar software para instalarlo.
  • 185.  ____________________________________________________________ Inexistencia de incompatibilidades entre plataformas. ____________________________________________________________ Soporte y mejora centralizada de aplicaciones. ____________________________________________________________ Aprovechamiento de los recursos y potencia del equipo del cliente. Gracias a las nuevastecnologías como WebGL que hacen uso directamente de los recursos del equipo.Inconvenientes: ____________________________________________________________ Ausencia de aplicaciones para equipos que no tengan un primer acceso a Internet. Unavez bajada la aplicación se guardaría e iría actualizando según fuera necesario.8.4.3 Libertad de usoLas ventajas de una son los inconvenientes de la otra y viceversa. Ambas tenencias,pretenden un uso cooperativo, amplio y libre por parte de la comunidad de Internet conuna economía sostenible basada en el soporte que se da y no en la imposición detecnologías cerradas de pago.Según la valoración de uno de los padre de la web, Tim Berners Lee, la situación actualde Internet está condicionada por el debate sobre la neutralidad, amenazada porempresas y gobiernos, y el paulatino aumento de poder de empresas proveedoras delservicios y compañías como Facebook o Apple.Por ejemplo, en el caso de Facebook, la red social más grande. Millones de usuariosestán conectados todo el día, y digamos que integren dentro de su aplicación unbuscador. Los usuarios no saldrán más de ahí. Provocando que las empresas denprioridad a exponer su información ahí. Esto obligaría a todos a exponer su informaciónporque nadie va a querer quedarse atrás. No es que tenga que ser dueño del mundoGoogle, es que Facebook es dueño de nuestros datos, vende información a terceros, estámal programado: constantes errores de grabación en la base de datos, errores encontadores de amigos, si redimensionas la ventana no se adaptan los marcos, etc; hastaTuenti que es una copia está mejor hecho y encima ahora pretende incorporar publicidadanimando nuestras páginas personales sin nuestro consentimiento. Ahora todo el mundose preocupa por los links que se enlazan en cada pagina, pero después todos en apenasunos años nos preocuparemos por tener el “cuanto gustas en Facebook”.En un artículo para Scientific American, Berners Lee reflexiona sobre el origen y losfines de Internet para animar a los usuarios a que no permitan que las empresas se hagancon el control de la Red. El usuario medio de Facebook, Apple, Windows es inexperto ypasivo, la gente no lucha hasta que no tienen “la soga al cuello”, se olvidan de lo quelucharon otros y se acomodan. Tenemos que exigir nuestros derechos, el punto departida de este texto es la premisa de que la idea que dio vida a Internet fue la depermitir que "cualquier persona pudiese compartir información con cualquier otra, encualquier lugar libremente".Con este punto de partida, Berners Lee y los otros padres de Internet crearon un sistemapara permitir la conexión de una red de ordenadores que hoy conocemos como Internet.Deja claro que desde su origen esta creación se ha basado en "principios igualitarios,que han fomentado que miles de personas hayan formado parte de la World Wide Web".Para Berners Lee, la situación actual está poniendo en serio peligro estos principios deInternet. La primera amenaza viene derivada por la amenaza de la neutralidad de la red.
  • 186. El científico pone nombre y apellidos a l s culpables de esta amenaza: "Los proveedoresde Internet están siendo tentados para frenar el tráfico a los sitios con los que no hanhecho acuerdos".El experto no solo tira piedras contra los operadores sino también contra lasadministraciones: "Los gobiernos totalitarios y democráticos están monitorizando loshábitos online de las personas, poniendo en peligro importantes derechos humanos",añade. Vivimos en una dictadura camuflada donde gobiernos, medios y multinacionalesnos manejan a nuestro antojo. El último que tiene cabida en cualquier asunto es elpueblo, tan solo hay que ver los acontecimientos ocurridos tras las filtraciones deWikiLeaks (entre finales de noviembre y principios de diciembre de 2010) que hadesembocado en una batalla cibernética en la que hackers luchan por la "libertad" (78).Una solución inmediata para que el pueblo posea el poder de una vez por todas sería lademocracia participativa descentralizada a través de Internet donde el estado sea unmero ejecutor del poder de pueblo. Los ciudadanos haciendo uso de la Web 3.0 podríanproponer leyes y acciones con un peso en su votación en base a: estudios, antecedentes,logros y trabajo de cara al tema en cuestión.De no hacer nada, las consecuencias de estas intervenciones de empresas y gobiernos enla Red suponen atentar contra los principios fundacionales de Internet, defiende, hasta elpunto que "podríamos perder la libertad de conectarnos con cualquiera en cualquiersitio". Pero la gente no le dará importancia hasta que sea demasiado tarde.El riesgo está presente, y Berners Lee explica por qué los usuarios deben defender susderechos: "La web es de los usuarios. Es un recurso público. Se trata de un órgano vitalpara la democracia, un canal de comunicación que hace posible una comunicación conel mundo".Además del cerco a la neutralidad por parte de operadores y gobiernos, según BernersLee, la segunda amenaza viene grupos o empresas que están alterando elfuncionamiento de Internet.El británico se centra en dos casos concretos. En primer lugar critica a las redes socialesque aislan la información publicada. El caso más conocido, y que el propio autor cita, esel de Facebook. La red social no permite que sus usuarios puedan hacer uso de sus datosexportándolos a otros espacios. Hace unas semanas surgió Diaspora, una red de códigoabierto donde los usuarios deciden que hacer con sus datos, cuando y como, sinembargo no podemos hacer una migración. Para Berners Lee, los usuarios deben serdueños de sus datos y deben poder hacer uso de ellos. Limitar el empleo de estos datoses limitar las libertades dentro de la Red, lo que supone ir contra los principios de losque habla el autor. "Los grandes sitios de redes sociales pretenden aislar la informaciónpublicada por los usuarios respecto al resto de la Web", enfatiza.El segundo caso concreto al que alude es el de liberar las formas de creación y acceso alos contenidos. En este sentido se refiere de forma clara a Apple (cada vez másextendido en Europa). Berners Lee critica la política de la empresa norteamericana deapostar por estándares cerrados. Un sistema capitalista, totalitario no tiene cabida enInternet. La inteligencia humana tiende a la sostenibilidad y trabajo de todos para unbien común. Como ejemplo, de estándares cerrados por parte de Apple, esta pone suscontenidos en formato exclusivo en iTunes. "No utilizar estándares abiertos provoca lacreación de mundos cerrados. Estándares abiertos impulsan la innovación". Launiversidad también debería apoyar esto, poco a poco parece que se está consiguiendopese a focos puntuales de profesores que prepararon un año apuntes y llevan 40dándolos igual, exigiendo uso de tecnologías privativas y obligando a su uso a susalumnos.
  • 187. Además, Berners Lee apuesta por la descentralización a la hora de innovar, ya que "esotra característica importante del diseño". "Nadie tiene que obtener la aprobación de unaautoridad central para agregar una página o hacer un enlace", opina. "Ladescentralización ha hecho de la posible innovación y continuará haciéndolo en elfuturo". La innovación surge de la imaginación que es infinita y la única continuidadhacia el progreso de la sociedad.Así, apostando por una Internet abierta, Berners Lee también defiende el empleo delprotocolo HTML5 como herramienta que ayudará al progreso. Será una herramienta quepermita a los usuarios desarrollar contenidos de forma libre y debe tomarse comomodelo para el futuro. Además, asegura que "las tecnologías de base Web debe estardisponibles de forma gratuita" con el fin de contribuir a este desarrollo.Traducción con aportes personal de la entrevistas realizadas a Tim Berners Lee en “ScientificAmerican” (79) y “TheRegister” (80). Nada expresa mejor mis sentimientos y conclusionespara el uso de la web. Long Live the Web: A Call for Continued Open Standards and Neutrality Libertad de uso GnS
  • 188. CAPÍTULO 2REFERENCIA(1)___________________________________________________________________ OReilly, Tim. "What Is Web 2.0". http://oreilly.com/web2/archive/what-is-web-20.html.September 30, 2005. [consulta: 20/09/2009](2)___________________________________________________________________ Cailliau, Robert (who help Tim Berners Lee to invent the web). "A Short History of the Web".http://www.livinginternet.com/w/wi_lee.htm. November 2, 1995. [consulta: 21/09/2009](3)___________________________________________________________________ Andreessen, Marc. "NCSA Mosaic Technical Summary".http://www.livinginternet.com/w/wi_mosaic.htm. February 20, 1993. [consulta: 20/09/2009](4)___________________________________________________________________ Wilson, Brian. "Browser Timelines". http://www.blooberry.com/indexdot/history/browsers.htm.[consulta: 06/11/2009](5)___________________________________________________________________ Knolinski, Ed. “Timeline of Web Browsers”. http://en.wikipedia.org/wiki/Browser_timeline.[consulta: 06/11/2009](6)___________________________________________________________________ Awio Web Services LLC. "Web Browser Market Share".http://www.w3counter.com/globalstats.php. [consulta: 08/11/2009](7)___________________________________________________________________ Mac OS Forge. "Webkit Official Wiki". http://trac.webkit.org/wiki. [consulta: 08/11/2009](8)___________________________________________________________________ Mozilla Fundation. "Gecko Official FAQ". https://developer.mozilla.org/en/Gecko_FAQ.[consulta: 08/11/2009](9)___________________________________________________________________ Paul, Ryan. "Why Mozilla is committed to Gecko as WebKit popularity grows".http://arstechnica.com/open-source/news/2008/09/mozilla-committed-to-gecko. September 9,2008. [consulta: 08/11/2009](10) __________________________________________________________________ Mozilla Fundation. "Firefox Features". http://www.mozilla-europe.org/en/firefox/features/.[consulta: 17/12/2009](11) __________________________________________________________________ Google. "Chrome Features". http://www.google.com/chrome/intl/en/more/features.html.[consulta: 17/12/2009](12) __________________________________________________________________ Apple. "Safari Features". http://www.apple.com/safari/what-is.html. [consulta: 18/12/2009](13) __________________________________________________________________ Opera Software. "Opera Features". http://www.opera.com/browser/features/. [consulta:18/12/2009](14) __________________________________________________________________ Microsoft. "Internet Explorer Features". http://www.microsoft.com/windows/internet-explorer/features/. [consulta: 19/12/2009](15) __________________________________________________________________ S A
  • 189. teve Chapel, Jerry Object, VMS Mosaic, Tar Mairon, Mabdul and Tedickey (main contributors)."Comparison of Web Browsers". http://en.wikipedia.org/wiki/Comparison_of_web_browser.[consultas: continuas](16) __________________________________________________________________ The Web Standards Project (WaSP). "Acid 3 Tests". http://acid3.acidtests.org/. [consulta:19/12/2009](17) __________________________________________________________________ Google. "Insights for Search". http://www.google.com/insights/search/. [consultas: continuas](18) __________________________________________________________________ W3C Recommendation. "HTML 4.01 Specification". http://www.w3.org/TR/REC-html40/.December 24, 1999. [consulta: 30/3/2010](19) __________________________________________________________________ W3C Recommendation. "XHTML™ 1.0 The Extensible HyperText Markup Language (SecondEdition)". http://www.w3.org/TR/xhtml1/. August 1, 2002. [consultas: continuas](20) __________________________________________________________________ W3C Candidate Recommendation. "Cascading Style Sheets Level 2 Revision 1 (CSS 2.1)Specification". http://www.w3.org/TR/CSS2/ . September 8, 2009. [consultas: continuas](21) __________________________________________________________________ Mozilla Fundation. "JavaScript Documentation". https://developer.mozilla.org/en/javascript.October 22, 2010. [consultas: continuas](22) __________________________________________________________________ W3C. "Document Object Model". http://www.w3.org/DOM/. January 19, 2005. [consulta:20/2/2010](23) __________________________________________________________________ Eguíluz Pérez, Javier. "Introducción a AJAX". http://www.librosweb.es/ajax/index.html. Junio 7,2008. [consulta: 1/4/2010](24) __________________________________________________________________ jQuery Project. "jQuery Documentation". http://docs.jquery.com/. [consultas: continuas](25) __________________________________________________________________ Mehdi Achour, Friedhelm Betz, Antony Dovgal y más contribuidores. “Manual de PHP desde elSitio Oficial”. http://docs.php.net/manual/es/. Octubre 22, 2010. [consulta: 3/4/2010](26) __________________________________________________________________ Oracle Sun Developer Network. "JavaServer Pages Technology Documentation".http://java.sun.com/products/jsp/docs.html. [consulta: 4/4/2010](27) __________________________________________________________________ Pilgrim, Mark. "Dive Into Python - Python from novice to pro".http://diveintopython.org/toc/index.html. May 20, 2004. [consulta: 4/4/2010](28) __________________________________________________________________ Elbert F (with the funding of AOE media). "Wappalyzer". http://wappalyzer.com/stats/.[consultas: continuas](29) __________________________________________________________________ Google. "Google Analytics". http://www.google.com/analytics/index.html. [consultas: continuas](30) __________________________________________________________________ Google. "Blogger". http://www.blogger.com/. [consulta: 11/6/2010]
  • 190. (31) __________________________________________________________________ Ryan Boren, Mark Jaquith, Matt Mullenweg (who made first released), Andrew Ozz, PeterWestwood. "WordPress". http://wordpress.org/. [consultas: constantes](32) __________________________________________________________________ Google. "Digitizing Books One Word at a Time". http://www.google.com/recaptcha/learnmore.[consulta: 13/6/2010](33) __________________________________________________________________ Disqus. "Disqus". http://disqus.com/. [consulta: 13/6/2010](34) __________________________________________________________________ Marc Delisle, Michal Čihař, Sebastian Mendel and Herman van Rink. “phpMyAdminDocumentation”. http://www.phpmyadmin.net/home_page/docs.php. [consulta: 14/6/2010](35) __________________________________________________________________ Joshua Eichorn and Greg Beaver. "phpDocumentor". http://www.phpdoc.org/. [consulta:14/6/2010](36) __________________________________________________________________ Adobe. "DreamWeaver Features". http://www.adobe.com/products/dreamweaver/features/.[consulta: 16/6/2010](37) __________________________________________________________________ Kinnunen, Simo. "Cufón Documentation". http://github.com/sorccu/cufon/wiki/. [consulta:18/6/2010](38) __________________________________________________________________ cPanel. "cPanel Features". http://www.cpanel.net/products/cpanelwhm/software-releases.html.[consulta: 18/6/2010](39) __________________________________________________________________ Get Satisfaction. “Get Satisfaction Features”. http://getsatisfaction.com/explore/features.[consulta: 18/6/2010](40) __________________________________________________________________ vBulletin Solutions. "vBulletin Features". http://www.vbulletin.com/index.php?do=features.[consulta: 19/6/2010](41) __________________________________________________________________ MediaWiki. "MediaWiki Documentation". http://www.mediawiki.org/wiki/Documentation.[consulta: 20/6/2010](42) __________________________________________________________________ Coppermine Photo Gallery. "Coppermine Documentation". http://documentation.coppermine-gallery.net/en/. [consulta: 20/6/2010](43) __________________________________________________________________ Google. "YouTube Features". http://code.google.com/intl/en-EN/apis/youtube/overview.html.[consulta: 20/6/2010](44) __________________________________________________________________ AddThis. "AddThis Features". http://www.addthis.com/features. [consulta: 20/6/2010](45) __________________________________________________________________ Magentto. "Magento Features". http://www.magentocommerce.com/services/overview. [consulta:21/6/2010](46) __________________________________________________________________ N
  • 191. ieto, Andrés. "Colección de lightbox". http://www.anieto2k.com/2007/09/19/coleccion-de-clones-de-lightbox-para-todos/. Septiembre 19, 2007. [consulta: 5/7/2010](47) __________________________________________________________________ Rabe, Alex. "NextGEN Gallery". http://alexrabe.de/category/nextgengallery/. [consulta: 5/7/2010](48) __________________________________________________________________ Interfaces Hombre Máquina Avanzados S.L. "Sitio Web del Capítulo de Implementación".http://www.hermesmarinas.com/. [consultas: continuas](49) __________________________________________________________________ LogPerspective. “gotAPI”. http://www.gotapi.com/. [consultas: constantes](50) __________________________________________________________________ Don HO. "Notepad++". http://notepad-plus-plus.org/. [consulta: 5/7/2010](51) __________________________________________________________________ Christoph Cullmann, Dominik Haumann, Joseph Wenninger, Milian Wolff, Erlend Hamberg,Bernhard Beschow and Anders Lund. "Kate Editor". http://kate-editor.org/. [consulta: 5/7/2010](52) __________________________________________________________________ Bourdon, Romain. "WampServer Introduction". http://www.wampserver.com/en/presentation.php.[consulta: 6/7/2010](53) __________________________________________________________________ Mozilla Fundation. "FireBug". http://getfirebug.com/. [consulta: 5/7/2010](54) __________________________________________________________________ Google. "PageSpeed". http://code.google.com/intl/en-EN/speed/page-speed/. [consulta: 5/7/2010](55) __________________________________________________________________ Čuvalo, Mime. "FireFTP". http://fireftp.mozdev.org/. [consulta: 6/7/2010](56) __________________________________________________________________Smith, Nathan. "960 Grid System". http://960.gs/. [consulta: 10/7/2010](57) __________________________________________________________________ The Gimp Team. "Gimp". http://www.gimp.org/. [consulta: 10/7/2010](58) __________________________________________________________________ Adobe. "Photoshop". http://www.adobe.com/products/photoshop/photoshopextended/. [consulta:10/7/2010](59) __________________________________________________________________ The Unicode Consortium. "Byte Order Mark (BOM) FAQ". http://unicode.org/faq/utf_bom.html.[consulta: 12/7/2010](60) __________________________________________________________________ GIDNetwork. "GZIP Test Tool". http://www.gidnetwork.com/tools/gzip-test.php. [consulta:12/7/2010](61) __________________________________________________________________ CSS Drive. "CSS Compressor (Advanced Mode)".http://www.cssdrive.com/index.php/main/csscompressoradvanced/. [consulta: 12/7/2010](62) __________________________________________________________________ Lieuallen, Anthony. "CSS Compressor de Arantius". http://tools.arantius.com/css-compressor.[consulta: 12/7/2010](63) __________________________________________________________________ E
  • 192. dwards, Dean. “Online Javascript Compressor”. http://javascriptcompressor.com/. [consulta:29/7/2010](64) __________________________________________________________________ W3C. "Markup Validation Service". http://validator.w3.org/. [consultas: constantes](65) __________________________________________________________________ W3C. "CSS Validation Service". http://jigsaw.w3.org/css-validator/. [consultas: constantes](66) __________________________________________________________________ Google. "Add URL". http://www.google.com/addurl/. [consulta: 10/9/2010](67) __________________________________________________________________ Google. "Google Wembasters Tools". https://www.google.com/webmasters/tools/. [consultas:constantes](68) __________________________________________________________________ XML Sitemaps. "Sitemap Generator". http://www.xml-sitemaps.com/. [consulta: 14/9/2010](69) __________________________________________________________________ Google Dirson. "Términos SEO". http://google.dirson.com/posicionamiento.net/seo/. [consultas:constantes](70) __________________________________________________________________ Pilgrim, Mark. "Dive Into HTML5". http://diveintohtml5.org/. [consultas: constantes](71) __________________________________________________________________ The Web Hypertext Application Technology. "Web Workers Draft Recommendation". Octubre13, 2010. [consulta: 16/10/2010](72) __________________________________________________________________ Pilgrim, Mark. "An Implausibly Illustrated Introduction to HTML5 Web Workers"http://wearehugh.com/public/2010/08/html5-web-workers/. Octubre 15, 2010. [consulta:16/10/2010](73) __________________________________________________________________ WebFlux. "Everything You Need To Know about CSS3". http://www.css3.info/. [consulta:15/10/2010](74) __________________________________________________________________ Google. "WebM Project". http://www.webmproject.org/. [consulta: 17/10/2010](75) __________________________________________________________________ Rayburn, Dan. "Debunking Myths, Questioning VP8s Quality". [consulta: 17/10/2010](76) __________________________________________________________________ Cibustos. "Una comparativa entre Mp3, WMA, AAC, VQF y Ogg Vorbis".http://www.algodemusica.com/es/articulos/comparativa. [consulta: 18/10/2010](77) __________________________________________________________________ Google. "WebGL Samples". http://code.google.com/p/webglsamples/. [consulta: 10/10/2010](78) __________________________________________________________________ Cuen, David. “WikiLeaks: se desató la primera guerra en internet” (BBC Mundo)http://www.bbc.co.uk/mundo/noticias/2010/12/101209_0921_wikileaks_guerra_guerrillas_anonymous_4chan_hackers_hactivists_dc.shtml Diciembre 9, 2010 [consulta: 9/12/2010](79) __________________________________________________________________ Berners-Lee, Tim. “Long Live the Web: A Call for Continued Open Standards and Neutrality”(Scientific American). http://www.scientificamerican.com/article.cfm?id=long-live-the-web
  • 193. Noviembre 22, 2010 [consulta: 30/11/2010](80) __________________________________________________________________ Berners-Lee, Tim. “Facebook „threatens‟ web future” (TheRegister).http://www.theregister.co.uk/2010/11/20/berners_lee_says_facebook_a_thret_to_web/Noviembre 11, 2010 [consulta: 30/11/2010]