proyecto hacia la web 3
DESCRIPTION
TRANSCRIPT
i
CONTENIDOS
LISTA DE FIGURAS .............................................................................................................................. ix
LISTA DE TABLAS .............................................................................................................................. xiii
LISTA DE CÓDIGOS ............................................................................................................................ xv
LISTA DE ACRÓNIMOS .................................................................................................................... xvii
PREFACIO ............................................................................................................................................ xxi
Capitulo 1: Introducción ........................................................................................................................... 1
1.1 OBJETIVOS ................................................................................................................................... 2
1.2 REQUISITOS .................................................................................................................................. 2
Capitulo 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 .......................................................................................................................... 18
Capitulo 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
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............................................................................................................................ 44
Capitulo 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 .......................................................................................................... 55
Capitulo 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
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 ...................................................................................................... 61
5.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 ..................................................................................................................... 65
5.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 ............................................................................................. 66
5.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 ................................................................................. 71
5.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
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 .............................................................................. 73
5.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 .................................................................................................................... 75
5.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 ...................................................................................................................... 76
5.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 ................................................................ 78
5.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 ............................................................................................................. 80
5.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 .............................................................................................................. 81
5.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..................................................................................................................... 85
5.12 FOROS ...................................................................................................................................... 85
5.12.1 vBulletin ........................................................................................................................... 86
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 ................................................................................................................ 87
5.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 ................................................................................ 89
5.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 ......................................................................................... 91
5.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 ........................................................................................................ 93
5.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 .............................................................................................. 95
5.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............................................................................................. 97
5.18 CONCLUSIONES ........................................................................................................................ 97
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 ................................................................................................ 99
Capitulo 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
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 ...................................................................................................................... 149
Capitulo 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
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 ........................................................................................................................ 159
Capitulo 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 ................................................................................................................. 170
REFERENCIA ......................................................................................................................................... A
ix
LISTA DE FIGURAS
Figura 2.1: Navegadores web más utilizados. .......................................................................................... 6
Figura 2.2: Gráfica comparativa del uso de navegadores. ...................................................................... 6
Figura 2.3: Webkit frente a Gecko ............................................................................................................ 7
Figura 2.4: Captura de pantalla de Firefox 4 ........................................................................................... 9
Figura 2.5: Captura de pantalla de Google Chrome 6 .......................................................................... 10
Figura 2.6: Captura de pantalla de Safari .............................................................................................. 11
Figura 2.7: Captura de pantalla de Opera 10.5 ..................................................................................... 12
Figura 2.8: Captura de pantalla de Internet Explorer 8 ....................................................................... 13
Figura 2.9: Opera, Chrome y Safari pasan el test ................................................................................. 17
Figura 2.10: Firefox 3.7 no pasa el test ................................................................................................... 17
Figura 2.11: Internet Explorer 8 no pasa el test ..................................................................................... 17
Figura 2.12: Tendencia de popularidad de los navegadores web ......................................................... 19
Figura 3.1: Modelo de cliente servidor ................................................................................................... 21
Figura 3.2: Logo de validación del W3C para HTML 4.01 .................................................................. 22
Figura 3.3: Logo de validación del W3C para XHTML 1.0 .................................................................. 22
Figura 3.4: Logo de validación del W3C para CSS 2.0 ......................................................................... 25
Figura 3.5: Logo de JavaScript (no dispone de uno homologado) ...................................................... 27
Figura 3.6: Jerarquía DOM ..................................................................................................................... 28
Figura 3.7: Logo de AJAX (no dispone de uno homologado) ............................................................... 29
Figura 3.8: Cliente servidor en modelo de aplicación clásica y en modelo de aplicación AJAX ....... 30
Figura 3.9: Logo de jQuery ..................................................................................................................... 32
Figura 3.10: Logo de PHP ........................................................................................................................ 34
Figura 3.11: Logo de JSP ......................................................................................................................... 37
Figura 3.12: Logo de Python ................................................................................................................... 41
Figura 3.13: Tendencia de popularidad de las tecnologías en el lado del cliente ................................ 44
Figura 3.14: Tendencia de popularidad de las tecnologías en el lado del servidor ............................. 45
Figura 5.1: Captura de pantalla de Google Analytics ........................................................................... 60
Figura 5.2: Captura de pantalla de Blogger ........................................................................................... 63
Figura 5.3: Captura de pantalla de reCAPTCHA ................................................................................. 65
Figura 5.4: Captura de pantalla de WordPress ..................................................................................... 69
Figura 5.5: Captura de pantalla de Disqus ............................................................................................ 72
Figura 5.6: Captura de pantalla de phpMyAdmin ................................................................................ 74
Figura 5.7: Captura de pantalla de phpDocumentor ............................................................................ 76
Figura 5.8: Captura de pantalla de Dreamweaver ................................................................................ 78
Figura 5.9: Captura de pantalla de Cufón ............................................................................................. 79
Figura 5.10: Captura de pantalla de cPanel ........................................................................................... 82
Figura 5.11: Captura de pantalla de Get Satisfaction ........................................................................... 84
Figura 5.12: Captura de pantalla de vBulletin ...................................................................................... 86
Figura 5.13: Captura de pantalla de MediaWiki ................................................................................... 88
Figura 5.14: Captura de pantalla de Coppermine ................................................................................. 90
Figura 5.15: Captura de pantalla de YouTube ....................................................................................... 92
Figura 5.16: Captura de pantalla de AddThis ....................................................................................... 94
Figura 5.17: Captura de pantalla de Magento ....................................................................................... 96
Figura 6.1: Captura de pantalla de la web que realizaremos 1/3 ....................................................... 102
Figura 6.2: Captura de pantalla de la web que realizaremos 2/3 ....................................................... 102
Figura 6.3: Captura de pantalla de la web que realizaremos 3/3 ....................................................... 102
Figura 6.4: Captura de pantalla de gotAPI .......................................................................................... 103
Figura 6.5: Captura de pantalla de Notepad++ ................................................................................... 104
Figura 6.6: Captura de pantalla de la consola de errores de Firefox ................................................. 105
Figura 6.7: Firebug para Firefox .......................................................................................................... 106
Figura 6.8: Capturas de sugerencias de PageSpeed al analizar un sitio web .................................... 107
Figura 6.9: Visualización del tiempo de carga de los elementos de nuestro sitio con PageSpeed .... 107
Figura 6.10: Captura de pantalla de FireFTP ..................................................................................... 108
Figura 6.11: Ejemplo de estructura de archivos y carpetas para un sitio web .................................. 109
Figura 6.12: Mapa conceptual ............................................................................................................... 109
Figura 6.13: Código maquetado tipo HTML5 en HTML ................................................................... 111
Figura 6.14: Buenas prácticas para el maquetado básico ................................................................... 111
Figura 6.15: Propuestas de aspecto ....................................................................................................... 112
Figura 6.16: Esquema de maquetado de nuestra web ......................................................................... 113
Figura 6.17: Imagen de la web con las distintas partes marcadas...................................................... 114
Figura 6.18: Contenedor de 12 columnas (máximo) ............................................................................ 116
Figura 6.19: Año de fecha actual ........................................................................................................... 119
Figura 6.20: Idioma apagado e idioma activo ...................................................................................... 120
Figura 6.21: Botón de vista (vista completa activada) ......................................................................... 120
Figura 6.22: Imagen de la web para el caso de una pantalla menor a 960 pixeles ............................ 120
Figura 6.23: Efecto de desplazamiento del recuadro azul con bordes redondeados ......................... 122
Figura 6.24: Formulario de contacto .................................................................................................... 123
Figura 6.25: Resultado de compresión gzip.......................................................................................... 126
Figura 6.26: CSS Drive - CSS Compressor (Advanced Mode) ........................................................... 127
Figura 6.27: JavaScript Compressor .................................................................................................... 129
Figura 6.28: Optimización de imágenes ............................................................................................... 130
Figura 6.29: Verificación para el tipo de documento ........................................................................... 133
Figura 6.30: Sello que certifica que nuestra web cumple el estándar XHTML 1.0 estricto ............. 134
Figura 6.31: Verificación para el tipo de estilo ..................................................................................... 134
Figura 6.32: Sugerir un sitio a Google .................................................................................................. 135
Figura 6.33: Demostrar la propiedad del sitio ..................................................................................... 136
Figura 6.34: Panel de Google Webmaster Tools ................................................................................... 137
Figura 6.35: Herramientas de “Información del sitio” ....................................................................... 138
Figura 6.36: Generador XML de Sitemaps .......................................................................................... 138
Figura 6.37: Sitio con enlaces internos en las búsquedas de Google .................................................. 140
Figura 6.38: Herramientas de “Su sitio en la web” ............................................................................. 141
Figura 6.39: Herramientas de Diagnóstico ........................................................................................... 142
Figura 6.40: Herramientas para hacer pruebas .................................................................................. 143
Figura 6.41: Crear un nuevo perfil del sitio web en Google Analytics ............................................... 145
Figura 6.42: Panel de Google Analytics ................................................................................................ 146
Figura 6.43: Intelligence (alertas automáticas) .................................................................................... 147
Figura 6.44: Usuarios ............................................................................................................................. 147
Figura 6.45: Fuentes de tráfico .............................................................................................................. 148
Figura 6.46: Contenido .......................................................................................................................... 148
xiii
LISTA DE TABLAS
Tabla 2.1: Motores de renderizado web más comunes ............................................................................ 7
Tabla 2.2: Información general ............................................................................................................... 14
Tabla 2.3: Soporte de sistemas operativos .............................................................................................. 14
Tabla 2.4: Consumo de memoria (inicio 20 tabs, 3.8GiB DDR3) ......................................................... 14
Tabla 2.5: Consumo de CPU (inicio 20 tabs, Core2Duo a 2.13GHz) .................................................... 15
Tabla 2.6: Características del navegador ............................................................................................... 15
Tabla 2.7: Características de accesibilidad ............................................................................................. 15
Tabla 2.8: Soporte de tecnologías web .................................................................................................... 16
Tabla 2.9: Soporte de protocolos ............................................................................................................. 16
Tabla 3.1: Diferencias básicas entre HTML y XHTML ........................................................................ 23
Tabla 3.2: Lenguajes de programación vistos para la web ................................................................... 44
Tabla 5.1: Analizadores ............................................................................................................................ 58
Tabla 5.2: Blogs ......................................................................................................................................... 62
Tabla 5.3: CAPTCHAs ............................................................................................................................. 65
Tabla 5.4: Gestores de contenido ............................................................................................................. 66
Tabla 5.5: Sistemas de comentario .......................................................................................................... 72
Tabla 5.6: Administradores de bases de datos ........................................................................................ 74
Tabla 5.7: Herramientas de documentación ........................................................................................... 75
Tabla 5.8: Editores .................................................................................................................................... 77
Tabla 5.9: Scripts para fuentes de texto .................................................................................................. 79
Tabla 5.10: Paneles para hospedaje web ................................................................................................ 80
Tabla 5.11: Seguidores de incidencias ..................................................................................................... 83
Tabla 5.12: Foros ...................................................................................................................................... 85
Tabla 5.13: Wikis ...................................................................................................................................... 87
Tabla 5.14: Galerías de imágenes ............................................................................................................ 89
Tabla 5.15: Visualizadores de vídeo ........................................................................................................ 91
Tabla 5.16: Widgets .................................................................................................................................. 93
Tabla 5.17: EShops ................................................................................................................................... 95
Tabla 5.18: Aplicaciones más usadas por categoría ............................................................................... 98
Tabla 5.19: Aplicaciones más usadas en general .................................................................................... 98
xv
LISTA DE CÓDIGOS
Código 3.1: Página web básica vacía en XHTML ................................................................................. 23
Código 3.2: Página web básica en XHTML ........................................................................................... 24
Código 3.3: Regla básica de estilo para los encabezados de primer orden de una página ................. 25
Código 3.4: Página web básica con enlace externo al estilo .................................................................. 26
Código 3.5: Regla básica de estilo para el cuerpo de una página ......................................................... 26
Código 3.6: Escritura de una frase en el documento (X)HTML .......................................................... 28
Código 3.7: Botón en página XHTML que al pulsarlo muestra el cuadrado de 5 .............................. 28
Código 3.8: Archivo de texto plano donde se encuentra un código para cargar con AJAX ............... 31
Código 3.9: Página en la que se utiliza AJAX ........................................................................................ 31
Código 3.10: Obtención de un archivo de texto plano del servidor mediante AJAX .......................... 31
Código 3.11: Cambio del contenido del elemento seleccionado por el pasado por parámetro ........... 33
Código 3.12: Mensaje de alerta cuando se clica un enlace ................................................................... 33
Código 3.13: Escritura en la página de una cadena............................................................................... 35
Código 3.14: Escritura en el cuerpo de la página del contenido de una variable ............................... 35
Código 3.15: Formulario para interactuar con el usuario .................................................................... 35
Código 3.16: Escritura en la página de una cadena............................................................................... 38
Código 3.17: Escritura en el cuerpo de la página de un saludo acompañado de la fecha actual ....... 39
Código 3.18: Página con formulario que invoca a un servlet ............................................................... 39
Código 3.19: Servlet que devuelve una página con los parámetros recogidos en un formulario ....... 40
Código 3.20: Descriptor de despliegue para la publicación de un servlet ............................................ 40
Código 3.21: Escritura en la página de una cadena............................................................................... 42
Código 3.22: Captura de una imagen con una webcam ........................................................................ 42
Código 3.23: Escritura en el cuerpo de la página de un saludo acompañado de la fecha actual ....... 42
Código 6.1: Tipo de documento, codificación y enlaces para 960 Grid System ................................ 115
Código 6.2: Etiquetas y atributos para el cuerpo base de nuestra web ............................................. 115
Código 6.3: CSS incluido en el propio documento HTML .................................................................. 117
Código 6.4: CSS enlazado desde un archivo externo ........................................................................... 117
Código 6.5: CSS incluido directamente en el propio elemento HTML .............................................. 117
Código 6.6: Superposición de estilos en cascada .................................................................................. 118
Código 6.7: Enlace a nuestro CSS ......................................................................................................... 118
Código 6.8: Algunas de las reglas de nuestro estilo para la web ......................................................... 118
Código 6.9: Actualizar el copyright con el el año actual ..................................................................... 119
Código 6.10: Efecto de apagado e iluminado ....................................................................................... 120
Código 6.11: Ajuste de la web a la pantalla .......................................................................................... 121
Código 6.12: Intercambio de atributos HTML .................................................................................... 121
Código 6.13: Uso del plugin LavaLamp ............................................................................................... 122
Código 6.14: Estilo para recuadro azul con bordes redondeados ...................................................... 122
Código 6.15: Código para crear un formulario de contacto ............................................................... 123
Código 6.16: Único archivo externo con todo el CSS combinado (960.css, estilo.css, etc) ................ 124
Código 6.17: Único archivo externo con todo el JS combinado ( jquery-1.4.2.js, menu.js, etc) ....... 124
Código 6.18: Archivo externo con el JS combinado que necesita cargarse al principio ................... 124
Código 6.19: Archivo externo con todo el JS combinado que podemos cargar a posterior ............. 125
Código 6.20: Opción 1 - Indicar compresión en el archivo de configuración ".htaccess" ................ 125
Código 6.21: Opción 2 – Inicio compresión gzip en archivo PHP ...................................................... 125
Código 6.22: Fin compresión gzip en archivo PHP ............................................................................. 125
Código 6.23: Fecha de expiración para recursos estáticos .................................................................. 126
Código 6.24: Cache no habilitada ......................................................................................................... 126
Código 6.25: Enlace a CSS compactado ............................................................................................... 126
Código 6.26: Aspecto del CSS compactado ......................................................................................... 127
Código 6.27: Enlace al JavaScript compactado ................................................................................... 128
Código 6.28: Aspecto del JavaScript compactado ............................................................................... 128
Código 6.29: Sintaxis solicitud HTTP ................................................................................................... 129
Código 6.30: Solicitud HTTP ................................................................................................................. 129
Código 6.31: Orden para estilos y scripts ............................................................................................. 130
Código 6.32: Set de caracteres en la cabecera ...................................................................................... 132
Código 6.33: Declaración del tipo de documento para XHTML 1.0 estricto..................................... 133
Código 6.34: Declaración del tipo de documento para HTML 5 ........................................................ 134
Código 6.35: Código que no cumple con la especificación CSS 2.1 .................................................... 135
Código 6.36: Parte del código del Sitemap de nuestro sitio ................................................................ 139
Código 6.37: Robots ............................................................................................................................... 139
Código 6.38: ¿Qué ve el rastreador de Google? ................................................................................... 143
Código 6.39: Seguimiento de Google Analytics .................................................................................... 145
Código 7.1: Incluir lienzo en HTML5 ................................................................................................... 152
Código 7.2: Incluir vídeo en HTML5 .................................................................................................... 153
Código 7.3: Documento HTML 4.01 similar a HTML5 ..................................................................... 153
Código 7.4: Documento HTML 5 básico............................................................................................... 154
Código 7.5: Elegir la fuente de texto que queramos ............................................................................ 156
Código 7.6: Bordes redondeados con imágenes ................................................................................... 156
Código 7.7: Sombras .............................................................................................................................. 156
Código 7.8: Múltiples fondos ................................................................................................................. 157
Código 7.9: Selección de elemento según atributo ............................................................................... 158
LISTA DE ACRÓNIMOS
AJAX - Asynchronous Javascript And XML
ANSI - American National Standards Institute
API - Application Programming Interface
ASP - Active Server Pages
BOM - Byte Order Mark
BSD - Berkeley Software Distribution
CAPTCHA - Completely Automated Public Turing test to tell Computers and Humans Apart
CDMA - Code Division Multiple Access
CERN - Conseil Européen pour la Recherche Nucléaire
CHM - Microsoft Compiled HTML Help
CMS - Content Management System
CPU - Central Processing Unit
CRM - Customer Relationship Management
CSS - Cascading Style Sheets
CSV - Comma Separated Values
DHTML - Dynamic HTML
DNS - Domain Name System
DOM - Document Object Model
DTD - Document Type Definition
ECMA - European Computer Manufacturers Association
ERP - Enterprise Resource Planning
FAQ - Frequently Asked Questions
FF - FireFox
FTP - File Transfer Protocol
GIF - Graphics Interchange Format
GIMP - GNU Image Manipulation Program
GMT - Greenwich Mean Time
GNU - GNU's Not Unix
GPL - General Public License
GSM - Global System for Mobile Communications
GZIP - GNU ZIP
HTML - HyperText Markup Language
HTTP - Hypertext Transfer Protocol
HTTPS - HTTP Secure
ID - Identification
IDN - Internationalized Domain Name
IE - Internet Explorer
IP - Internet Protocol
IRC - Internet Relay Chat
ISO - International Organization for Standardization
J2EE - Java 2 Platform Enterprise Edition
JPEG - Joint Photographic Experts Group
JS - JavaScript
JSP - JavaServer Pages
KDE - K Desktop Environment
LAMP - Linux Apache MySQL PHP
LDAP - Lightweight Directory Access Protocol
LGPL - Lesser General Public License
MAC - Media Access Control
MathML - Mathematical Markup Language
MPL - Mozilla Public License
MSN - MicroSoft Network
NASA - Nacional Aeronautics and Space Administration
NCSA - National Center for Supercomputing Applications
NNTP - Network News Transport Protocol
O - Opera
OCR - Optical Character Recognition
OpenGL - Open Graphics Library
OpenGL ES - OpenGL for Embedded Systems
PDF - Portable Document Format
PHP - Hypertext PreProcessor
PNG - Portable Network Graphics
QBE - Query By Example
RAM - Random Access Memory
RFID - Radio Frequency IDentification
RIA - Rich Internet Application
RSS - Really Simple Syndication
SEO - Search Engine Optimization
sIFR - scalable Inman Flash Replacement
SMF - Simple Machines Forum
SMIL - Synchronized Multimedia Integration Language
SQL - Structured Query Language
SSL - Secure Sockets Layer
SVG - Scalable Vector Graphics
URL - Uniform Resource Locator
UTF - Unicode Transformation Format
VP8 - Video comPression format version 8
W3C - World Wide Web Consortium
WAMP - Windows Apache MySQL PHP
WaSP - Web Standards Project
WP - WordPress
WSGI - Web Server Gateway Interface
WYSIWYG - What You See Is What You Get
XHTML - eXtensible Hypertext Markup Language
XML - eXtensible Markup Language
XPCOM - Cross Platform Component Object Model
XSL - eXtensible Stylesheet Language
XSLT - eXtensible Stylesheet Language Transformations
XSS - Cross Site Scripting
XUL - XML based User interface Language
xxi
PREFACIO
Este proyecto fue elegido por el interés personal sobre el estado de tecnologías
para el desarrollo de aplicaciones web y su implementación. Se le ofrece la
posibilidad al lector de adentrarse en ambos campos, con los siguientes capítulos
que comprenden la documentación propia del trabajo realizado.
En el Capítulo 1, se ofrece una breve introducción sobre la historia y el concepto
de web. Se exponen cuales fueron los objetivos y requisitos para la realización
del proyecto.
En el Capítulo 2, se centra en las aplicaciones de escritorio dedicadas a la
navegación por Internet. Se detallan todos los navegadores webs más extendidos,
comparándolos y viendo las ventajas e inconvenientes entre ellos, se les aplican
pruebas y se analiza su popularidad y tendencia de uso.
En el Capítulo 3, se analizan las tecnologías de macado de texto, estilo e
interacción más utilizadas para el desarrollo web, detallando su uso y la sintaxis
básica a la vez que se ofrecen ejemplos sencillos para su compresión. Al final, se
realizan 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 de
gestores de contenidos.
En el Capítulo 5, se describen aquella aplicaciones web que pueden ser usadas
como herramientas para crear una aplicación web final o integradas para añadir
una funcionalidad extra. Además, observaremos la popularidad y uso tratando de
pronosticar el futuro que les espera.
En el Capítulo 6, se basa en los capítulos anteriores para la realización de una
implementación real paso a paso desde el planteamiento inicial sobre tipo de
página buscamos hasta su mantenimiento y promoción.
En el Capítulo 7, se describen las nuevas tecnologías de desarrollo que triunfarán
en Internet en los próximos años.
En el Capítulo 8, se ofrecen un resumen de las ideas más importantes y las
conclusiones.
PÁGINA 1 DE 172
“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 Piscitelli
CAPITULO 1: INTRODUCCIÓN
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 donde
los usuarios aparte de leer datos pueden escribir, interactuar y colaborar de multitud de
formas. La Web 2.0 o Web Social, a diferencia de su predecesora, gestiona los datos de
manera dinámica y mantiene los servicios de Internet actualizados usando las
tecnologías web (1). La Web 3.0 o Web Semántica, es la web dinámica en la que se
separa el contenido de la interacción y el aspecto visual. El estado actual de transición
se denomina Web 2.5. El estudio de las tecnologías y herramientas pertenecientes a la
Web 2.5, las aplicaciones que se pueden crear con ellas y las lineas futuras (hacia la
Web 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 un
entramado 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 la
Web: 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 usaba
para 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ín
de maneras posibles por lo que había que conocer múltiples programas y sistemas
operativos. La Web introduce un concepto fundamental: la posibilidad de lectura
universal, que consiste en que una vez que la información esté disponible, se pueda
acceder a ella desde cualquier ordenador, desde cualquier país, por cualquier persona
autorizada, usando un único y simple programa (el navegador web).
1.1 Objetivos
El objetivo de este proyecto es el estudio del estado actual de las tecnologías para el desarrollo
web así como de su evolución, tratando de establecer el escenario que se vislumbra para un
futuro próximo: la Web 3.0.
Para ello, se va a documentar la planificación, creación y mantenimiento de un entorno Web
E
Capítulo
1
actual. En un primer lugar se abordarán los navegadores web para acceder a Internet, seguido
del estudio y comparación de las tecnologías existentes, luego analizaremos las aplicaciones
para el desarrollo web y por último se realizará un ejemplo práctico basándonos en los
conclusiones de los capítulos anteriores.
1.2 Requisitos
Para 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) y
dependencias del software propietario tanto con sistemas operativos (Windows en servidores
web: .NET no es portable sin MONO) como en extensiones web (Silverlight también de
Microsoft).
___________________________________________________________________ La necesidad de estudiar las tecnologías y aplicaciones web independientes del navegador web y
del sistema operativo (en cliente y servidor) fue tomada como requisito para permitir la total
compatibilidad con cualquier entorno, dejando de esta forma al usuario la total libertad de
elección.
___________________________________________________________________ El uso de tecnologías libres al alcance de cualquier desarrollador y el empleo de herramientas
sencillas con resultados profesionales son los requisitos básicos para este proyecto. Relacionado
con lo anterior se encuentra la ausencia de dependencias de software propietario, es decir,
abarcaremos como requisito el estudio de tecnologías libres, autosuficientes e independientes
con 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.
PÁGINA 3 DE 172
“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 else's.”
~ Dave Barry
CAPITULO 2: NAVEGADORES WEB
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 una
gran parte de nuestro tiempo conectados a Internet con el navegador. Cuando realizamos
búsquedas, chateamos, enviamos mensajes de correo electrónico, realizamos compras,
accedemos a nuestro banco online, leemos las noticias y vemos vídeos online, lo
hacemos a través de un navegador.
La funcionalidad básica de un navegador web es permitir la visualización de
documentos de texto, posiblemente con recursos multimedia incrustados. Los
documentos pueden estar ubicados en la computadora en donde está el usuario o en un
servidor.
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 permitiendo
al usuario interactuar con su contenido y navegar hacia otros lugares de la red.
2.1 Papel de los navegadores dentro de la web
Muchos de nosotros no somos conscientes de toda la tecnología que hay detrás de Internet. Ni
de 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.
U
Capítulo
2
___________________________________________________________________ Formatos de Imágenes (JPEG, PNG,…) que comprimen la información de una imagen para poder
tener 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 y
la razón por la que ha crecido de una forma tan sorprendente. Millones de páginas y sitios en la
red 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 para
crear un sitio o usar el correo electrónico?
La web es innegablemente mejor después de que Mozilla entró al mercado de navegadores, y
habría sido imposible hacer esto si hubieran existido pagos multimillonarios por licencias para
el manejo de HTML, CSS, JavaScript, o alguna otra.
2.2 Historia de los navegadores
El primer navegador, desarrollado en el CERN a finales de 1990 y principios de 1991 por Tim
Berners 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 primero
que se extendió debido a que pronto el NCSA (Centro Nacional de Aplicaciones de
Supercomputación de Estados Unidos) preparó versiones para Windows y Macintosh. Sin
embargo, poco más tarde entró en el mercado Netscape Navigator que rápidamente superó en
capacidades y velocidad a Mosaic (3). Este navegador tiene la ventaja de funcionar en casi todos
los UNIX, así como en entornos Windows.
Internet Explorer (anteriormente Spyglass Mosaic) fue la apuesta tardía de Microsoft para entrar
en el mercado. En los últimos años se ha vivido una auténtica explosión del número de
navegadores, que ofrecen cada vez mayor integración con el entorno de ventanas en el que se
ejecutan. 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 un
nuevo conjunto de widgets (mini aplicaciones) multiplataforma basado en el lenguaje de
etiquetado ML (Lenguaje de Marcas eXtensible) y al que se le llamaría XUL. Esto hizo que
tardara bastante más en aparecer de lo previsto inicialmente, apareciendo una versión 1.0 de
gran 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 que
pretende hacerse con parte del mercado de Internet Explorer. Se trata de un navegador más
ligero que su hermano mayor.
El 2 de Septiembre del 2008 vio la luz el tercer navegador más utilizado en Internet: Google
Chrome. (4)(5)
CAPÍTULO 2
PÁGINA 6 DE 172
Los navegadores web más usados son aquellos que presentan mejores prestaciones o que vienen
por defecto integrados con el sistema operativo o cualquier otro dispositivo (6). Estos
navegadores son: Mozilla Firefox, Opera, Google Chrome, Safari e Internet Explorer (por orden
de aparición en la Figura 2.1).
Actualmente el porcentaje de uso de dichos navegadores está cambiando (Figura 2.2). La
mayoría de usuarios al poseer sistemas operativos Windows usaban el Internet Explorer que
viene integrado con el sistema, sin embargo la variedad de navegadores existentes en el
mercado y las deficiencias que presenta en navegador de Windows han hecho que los usuarios
busquen en Internet una solución mejor. Firefox actualmente le está quitando cuotas de uso a
Internet Explorer, seguido por Chrome y Safari. Aunque este último también debe su existo no a
la elección del propio usuario sino ha que viene integrado con el sistema de Apple: el Mac OS.
2.3 Motores de renderizado
Un motor de renderizado es software que toma contenido marcado (en TML, ML, etc.) y las
hojas 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ún
creador, licencia, navegador conocido que hace uso del motor y lenguaje de programación en el
que está desarrollado.
Figura 2.1: Navegadores web más utilizados.
Figura 2.2: Gráfica comparativa del uso de navegadores.
CONCLUSIONES
PÁGINA 7 DE 172
Tabla 2.1: Motores de renderizado web más comunes
Motor Creador Licencia Navegador Lenguaje
KHTML KDE GNU LGPL Konqueror C++
Gecko Mosaic / Netscape /
Mozilla Foundation
MPL, GNU GPL,
GNU LGPL
tri-license
Mozilla Firefox C++
Presto Opera Software Propietaria Opera C++
Webkit
(basado en
KHTML)
Webkit Foundation GNU LGPL, BSD-
style
Safari,
Google Chrome C++
Trident Mosaic/
Microsoft Propietaria Internet Explorer ?
Vistas 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.
2.3.1 Webkit
Webkit es un motor de render HTML de código abierto, desarrollado por Apple basándose en el
código del proyecto KTHML. Webkit es un motor sumamente sencillo, reconocido por tener
una 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 Webkit
es 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 varios
proveedores conocidos también lo utilizan: Adobe, Nokia, Trolltech entre otros. Webkit también
se 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 movil
Android, y para su navegador de escritorio Chrome.
El consenso entre los desarrolladores es claro: Webkit es un motor excelente que permite
utilizarlo en muchos casos prácticos. Webkit está en todos lados, y gana popularidad a pasos
agigantados.
Figura 2.3: Webkit frente a Gecko
CAPÍTULO 2
PÁGINA 8 DE 172
2.3.2 Gecko
Gecko, creado originalmente por Netscape, tiene una cantidad de código enorme y no muy
prestigiosa. Gecko siempre fue poderoso, pero todas sus impresionantes características eran a
costa de tamaño, complejidad y uso (y abuso) de memoria. En consecuencia, Gecko no era
apropiado 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, en
realidad, apunta a ser mucho más que un motor HTML. El objetivo inicial de Mozilla era
extremadamente ambicioso: la suit original de Mozilla incluía un navegador, un programa de
mail y noticias, una herramienta de diseño web, y un cliente de chat. Además de renderizar
HTML, 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 son
una de las características más valiosas de Firefox.
XPCOM (Modelo Componente Objeto Multiplataforma) que permite dividir el software en
partes para su desarrollo y después ensamblarlo, es otra de las fuentes de complejidad en el
código de Gecko. XPCOM le permitió a Gecko ser completamente modular. Sin embargo,
muchos desarrolladores lo adoptaron con demasiado entusiasmo, y usaron XPCOM en lugares
donde no era tan apropiado. Scott Collins, desarrollador de Mozilla, comentó que el uso
excesivo 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). Gecko
recibió mejoras masivas para Firefox 3, con muchos cambios que mejoran la experiencia de
navegación.
Gecko 1.9 mejora el soporte de SVG (Gráficos Vectoriales Escalables), lo que permite algunas
caracterí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 (pruebas
para 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 una
mejor 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 muchas
aplicaciones en XUL, con resultandos impresionantes. Incluso se puede usar a Firefox 3 como
un entorno de ejecución XUL, por lo que es posible crear aplicaciones ricas con XUL y
Javascript, y distribuirlas directamente por Internet. También estamos viendo aplicaciones
complejas para Firefox distribuidas como extensiones.
Desde un punto de vista técnico, Gecko es una opción muy sólida frente a Webkit por su
renderizado, 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 a
Gecko a nuevos rumbos.
Gecko está igualando a Webkit en rendimiento y bajo uso de memoria, y a la vez cuenta con
algunas ventajas únicas que no se encuentran en ningún otro motor como puede ser el gran
abanico de extensiones complejas, y que sería difícil agregarlas a Webkit. (9)
2.4 Mozilla Firefox
Firefox 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.000
extensiones, es el navegador más personalizarle y es capaz de soportar páginas que salgan del
estándar web.
2.4.1 Ventajas e Inconvenientes
Las ventajas de Firefox son su gran cantidad de extensiones y plugins. Son pequeños programas
que 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 es
multiplataforma, sirve para cualquier sistema operativo.
Entre los escasos inconvenientes se encuentra el consumo de memoria. Si al navegar se abren
muchas pestañas o ventanas con multitud de extensiones y plugins ejecutándose a la vez el
rendimiento 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 uso
masivo de la multifunción de Firefox.
2.5 Google Chrome
Chrome es un navegador web desarrollado por Google para los sistemas operativos más
extendidos, ejecuta aplicaciones y páginas web a gran velocidad. Inicio, carga y búsqueda
rápida. Es fácil, gratuito y abierto. Dispone de una interfaz para dar mayor protagonismo a la
web y sus pestañas se ejecutan como aplicaciones independientes.
Figura 2.4: Captura de pantalla de Firefox 4
2.5.1 Ventajas e Inconvenientes
Las ventajas de Chrome son su rapidez y consumo de poca memoria. Las páginas web cargan
más deprisa y se pueden abrir muchas pestañas a la vez, sin que se agote la memoria. Dispone
de una interfaz simple y minimalista. Todo lo superfluo se ha eliminado, de modo que hasta los
principiantes lo encontrarán fácil de usar. Robusto y seguro (11). Se pueden hacer varias cosas a
la vez (editar una imagen online, estar chateando por Facebook, etc), y si una página web se
cuelga no afecta a otras ventanas o pestañas, que continúan funcionando de forma
independiente.
Entre los escasos inconvenientes se encuentra incompatibilidades debido a que su motor es
Webkit; solo cumple el estándar web. Algunas páginas web antiguas pueden no verse
correctamente con Chrome, hasta que sus propietarios las arreglen o rediseñen.
Su interfaz puede resultar poco convencional. Su aspecto minimalista puede inducir a la
confusión, especialmente entre quienes están acostumbrados a lo tradicional y no quieran
innovaciones.
Por último la carencia de extensiones. En las primeras versiones, Google Chrome no se podía
ampliar mediante módulos, es algo que históricamente ha permitido hacer más versátiles a todos
los navegadores.
2.6 Safari
Safari es un navegador web de código cerrado desarrollado por Apple para Mac pero que en la
Figura 2.5: Captura de pantalla de Google Chrome 6
actualidad soporta alguno de los sistemas operativos más extendidos.
2.6.1 Ventajas e Inconvenientes
Safari tiene las mismas ventajas e inconvenientes que hereda de Webkit (12) y comparte con
Chrome; es rápido pero no soporta absolutamente todas las webs.
Entre sus ventajas podemos destacar el aspecto cuidado que caracteriza a los productos de
Apple.
Entre los inconvenientes la carencia de extensiones y algunos fallos de seguridad entre los que
destaca el autorelleno de datos que viene activado por defecto, una herramienta muy potente que
recopila nuestros datos desde el ordenador y nos facilita el relleno de formularios en Internet
pero que puede ser usada por software malicioso y webs atacantes para robarnos información
personal.
2.7 Opera
Opera es un navegador web de código cerrado y multiplataforma desarrollado por Opera
Software. 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.
Figura 2.6: Captura de pantalla de Safari
2.7.1 Ventajas e Inconvenientes
Entre 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 aquellos
navegadores que usan Gecko y Webkit.
2.8 Internet Explorer
Internet Explorer es un navegador web de código cerrado desarrollado por Microsoft para el
sistema operativo Microsoft Windows desde 1995. Ha sido el navegador web más utilizado
desde 1999, con un pico máximo de cuota de utilización del 95% durante el 2002 y 2003 en sus
versiones 5 y 6. Esa cuota de mercado ha disminuido paulatinamente debido a una renovada
competencia por parte de otros navegadores, principalmente Mozilla Firefox.
Figura 2.7: Captura de pantalla de Opera 10.5
2.8.1 Ventajas e Inconvenientes
La mayor ventaja es que al ser el más difundido (14), todas las webs funcionan correctamente
con él. Su privilegiada posición en el mercado durante años ha hecho que cualquier página web
se compruebe siempre para su funcionamiento en Explorer.
Entre los inconvenientes se encuentran las vulnerabilidades, que tardan en corregirse. Los
constantes 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 a
Explorer 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.9 Comparativas entre IE, Opera, Safari, Chrome y Firefox
A continuación vamos a mostrar una serie de tablas (15) en las que comparamos los
navegadores vistos (en sus versiones estables de principios del 2010) según los siguientes
aspectos :
___________________________________________________________________ Soporte de sistemas operativos
___________________________________________________________________ Consumo de memoria
Figura 2.8: Captura de pantalla de Internet Explorer 8
___________________________________________________________________ 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
Creador Microsoft Opera
Software Apple Google
Mozilla
Fundation
1º Edición 01/08/95 08/12/96 23/06/03 15/09/09 26/09/02
Última
versión
estable
8.0.6001.18702 10.10 4.0.1 4.0.249.78 3.6.0
Coste Gratuito Gratuito Gratuito Gratuito Gratuito
Licencia No libre No libre No libre Libre: BSD
Libre:
MPL, GNU
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
CPU 54,80% 11,30% 15,00% 13,40% 43,20%
Tabla 2.6: Características del navegador
IE Opera Safari Chrome Firefox
Administrador
de marcadores Si Si Si Si Si
Gestor de
descargas Si Si Si Si Si
Cliente de
BitTorrent No Si No No Si
Administrador
de contraseñas Si Si Si Si Si
Administrador
de formularios Si Si Si Si Si
Corrección
ortográfica No Si Si Si Si
Barra de
herramientas
de motor de
búsqueda
Si Si Si Si Si
Tabla 2.7: Características de accesibilidad
IE Opera Safari Chrome Firefox
Navegación
por pestañas Si Si Si Si Si
Anti pop-up Si Si Si Si Si
Búsqueda
incremental Si Si Si Si Si
Bloqueo de
publicidad No Si No Si Si
Zoom de
página Si Si Si Si Si
Acceso
HTML Si Si Si Si Si
Tabla 2.8: Soporte de tecnologías web
IE Opera Safari Chrome Firefox
CSS 2 Si Si Si Si Si
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 Si
2.10 Test Acid3
Aunque gracias a las especificaciones de la Tabla 2.8 sabemos que tecnologías soportan cada
navegador web vamos a realizar pruebas online mediante el Test Acid3 (16). La parte principal
de Acid3 esta escrita en ECMAScript (JavaScript), y consiste de 100 subpruebas divididas en
seis 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 y
DOM2 HTML
___________________________________________________________________ Bucket 5: Pruebas de la competición Acid3, (SVG, HTML, SMIL, Unicode...)
___________________________________________________________________ Bucket 6: ECMAScript
El único requerimiento de la prueba es que el navegador tenga la configuración de forma
predeterminada. El renderizado final debe mostrar un 100/100 y además no sólo debe ser
idéntico al de referencia sino que además la animación debe ser fluida (la prueba no debe tomar
más de 33 milisegundos).
Actualmente 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ón
de 100/100, siendo logrado en una compilación de la versión 10 de Opera. Fue seguido por una
versión de WebKit, específica de Safari 4 Beta, haciendo que este fuera el segundo en pasar esta
prueba y por último Google Chrome en su versión 4 basado en el Webkit de Chromium.
2.11 Conclusiones
El navegador nos permite acceder y usar el conjunto de aplicaciones y recursos que forman la
Web 2.5; es uno de los software más usado en una computadora. Nuestra experiencia con
Internet depende exclusivamente de nuestra conexión y del navegador web por lo que siendo
este último gratuito es importante hacer una buena elección en base a las prestaciones que pueda
ofrecernos.
A lo largo de los años este software ha sido impuesto por compañías de desarrollo de sistemas
operativos privativos. En la actualidad existen multitud de navegadores y poco a poco se
imponen aquellos que ofrecen un mejor rendimiento.
Nos hemos embarcado en un breve recorrido histórico sobre los navegadores, hemos comentado
los motores de renderizado web, los navegadores más extendidos y hemos detallado mediante
tablas y pruebas sus características y consumo de recursos.
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 test
Como conclusión final Chrome es el más rápido y de los que más consume al usar un proceso
por pestaña. Firefox el más ligero y versátil aunque con muchas extensiones puede hacerse muy
pesado. Opera es el pionero en pasar el test Acid3 y en ofrecer con su interfaz una mejor
experiencia al usuario. El aspecto de Opera y la navegación por pestañas han sido adoptados por
Chrome, Safari y Firefox. Respecto a Safari comparte las ventajas de Webkit con Chrome pero
el “toque MAC” le ha hecho restar puntos en seguridad. Por último, Internet Explorer es el
navegador que menos protocolos soporta y el que peor integra las tecnologías web (promete
igualar a Firefox en su versión 9), no obstante como viene integrado con el sistema operativo
más extendido es el navegador más usado y los desarrolladores web siempre prueban las cosas
para que funcionen en IE.
2.11.1 Tendencia
Para terminar con el apartado de conclusiones vamos a utilizar la herramienta Google Insights
para ver la tendencia de los navegadores web más usados. Esta herramienta nos proporciona
información sobre el comportamiento de los usuarios, respondiendo algunas preguntas sencillas
como:
___________________________________________________________________ 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 cercano
Las búsquedas se pueden hacer por términos, localizaciones y plazos temporales. Se pueden
incluir condiciones o los términos de la búsqueda, filtros dependiendo de la tipología del
estudio, 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 las
búsquedas, haremos una búsqueda a nivel mundial e incluiremos el margen total de tiempos
posible, 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 Safari
han mantenido y mantienen su popularidad a lo largo del tiempo. Prácticamente en la misma
linea hasta 2008 se encontraba Opera que, pese a ser el navegador menos usado de los más
populares, tiene una leve tendencia al alza a partir de dicha fecha. Por otro lado, con una
tendencia bastante elevada al alza desde sus orígenes se encuentra Firefox con uno de sus
puntos cumbres en el lanzamiento de su versión 3.0. Para terminar Chrome con una previsión
que tiende a igualar la popularidad de Firefox.
Sin duda, mientras no exista un navegador absolutista como ocurrió en tiempos pasados, que
pueda condicionar la manera de evolucionar la red, la variedad y lucha por ofrecer la mejor
experiencia 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 los
datos estudiados y las pruebas realizadas que la mayor parte del mercado se lo llevarán Chrome
y Firefox (hechos por y para los usuarios), seguidos de los fieles incondicionales de Apple y
Microsoft 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 de
seguidores.
Figura 2.12: Tendencia de popularidad de los navegadores web
CAPÍTULO 2
PÁGINA 21 DE 172
“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”
~ Martin Fowler
CAPITULO 3: TECNOLOGÍAS DE DESARROLLO
uando hablamos de tecnologías de desarrollo web nos referimos al conjunto de
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 han
aparecido 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 de
conocimientos global. En aquella época se dieron soluciones mediante lenguajes
diseñados para programar web estáticas, es decir, contenido fijo de solo lectura. A
medida que paso el tiempo las tecnologías fueron desarrollándose, surgieron nuevas
necesidades por parte de los usuarios entre ellas la necesidad de poder interactuar con la
web. 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 empleados
en la web agrupados según su uso sea para la creación de páginas desde el lado del
cliente o desde el lado del servidor.
3.1 Tecnologías para el desarrollo de aplicaciones desde el lado del cliente
Estas tecnologías permiten el desarrollo de aplicaciones que se ejecutan en el cliente, es
decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona
C
Capítulo
3
Figura 3.1: Modelo de cliente servidor
con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las
pá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:
____________________________________________________________ T
ecnologías para maquetación del contenido en donde nos centraremos en
HTML/XHTML
____________________________________________________________ T
ecnologías para presentación del contenido en donde nos centraremos en el CSS.
____________________________________________________________ T
ecnologías para interacción y realización de funciones complejas donde nos centraremos
en JavaScript y sus variantes (AJAX, jQuery, etc) por ser las más sencilla y extendidas a
la vez que versátiles y potentes.
3.1.1 HTML / XHTML
HTML es un lenguaje de etiquetado para la elaboración de páginas web (18). Desde el
surgimiento de Internet se han publicado sitios web gracias al lenguaje HTML. Es usado para
describir 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 un
documento e incluir otros elementos tales como scripts.
XHTML es el lenguaje pensado para sustituir a HTML como estándar para las páginas web. En
su 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 de
XML (19). Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una
web semántica, donde la información, y la forma de presentarla estén claramente separadas.
Tanto para html como para xhtml los archivos pueden tener las extensiones “.htm, .html”.
3.1.1.1 Uso
La gran mayoría de páginas web hacen uso del HTML ya que es el estándar web para
maquetado de contenido por defecto, sin embargo, aunque es raro, podemos encontrar webs
hechas sin html por ejemplo con Adobe Flash (lenguaje ActionScript para crear webs
animadas): juegos, salas de chats, portfolios online; estás tienen el problema de que los
buscadores no las detectan y por lo general y cada vez más suelen incluir partes de html.
1XML 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.
Figura 3.2: Logo de validación del W3C
para HTML 4.01
Figura 3.3: Logo de validación del W3C
para XHTML 1.0
3.1.1.2 Sintaxis
La sintaxis se define mediante un conjunto de etiquetas que nos permiten dar formato al
contenido. Todas las etiquetas se definen mediante su nombre clave entre los símbolos de menor
y 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 etiquetar
de muchas formas y XHTML solo de una, ya que pretende crear una concordancia para extender
el 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
<IMG SRC="" /> <img src="" /> Todos los nombres de etiquetas y
atributos van en minúsculas
<img src=foto.png /> <img src="foto.png" /> Todos los valores de los atributos entre
comillas
<input type /> <input type="ckeckbox /> Todos los atributos deben tener un
valor
<li> <li> </li> Todas las etiquetas deben estar
cerradas
<br> <br/> Todas las etiquetas vacías deben estar
cerradas con / al final
3.1.1.3 Ejemplo
Para 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 el
maquetado del documento, por ejemplo: <b></b> para poner el texto que enmarcado en negrita
o <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, se
pueden distinguir tres partes bien diferenciadas, un ejemplo de una página básica sería realizada
con el Código 3.2.
Código 3.2: Página web básica en XHTML
<!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 doesn't understand, the
largest 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 especifica
con la etiqueta <!DOCTYPE. Seguidamente se encuentra la etiqueta <html></html> que
especifica el principio y fin del documento HTML. Entre las etiquetas de principio y fin del
documento se ubican las etiquetas correspondientes al encabezado y cuerpo del documento
cuyas etiquetas correspondientes son <head></head> y <body></body>.
Con la etiqueta <head></head> se delimita la cabecera del documento que suele contener
información sobre el documento como título, idioma, palabras clave, autor, etc. La información
que se especifique en la cabecera no es mostrada por el navegador al usuario con la única
excepción de la etiqueta <title></title>, la cual sirve para especificar el titulo del documento y
es 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 para
todos 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 o
WYSIWYG (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.
___________________________________________________________________ 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 CSS
CSS (Cascading Style Sheets, en Inglés) es un lenguaje simple que describe cómo se va a
presentar un documento (20). Esta forma de descripción de estilos ofrece a los desarrolladores el
control total sobre el estilo y formato de sus documentos. La idea que se encuentra detrás del
desarrollo de CSS es separar la estructura de un documento de su presentación.
3.1.2.1 Uso
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la
presentación. CSS permite a los desarrolladores web controlar el estilo y el formato de múltiples
páginas web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la
CSS 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 estilo
definido o el estilo está introducido por HTML (algo que no se debe hacer) en su gran mayoría
todas los sitios web disponen de su declaración de hojas de estilos.
3.1.2.2 Sintaxis
CSS usa un conjunto de reglas, la regla tiene dos partes: un selector y la declaración. A su vez la
declaració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ágina
h1 { 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
Figura 3.4: Logo de validación del
W3C para CSS 2.0
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 definir
el estilo.
3.1.2.3 Ejemplo
Pongamos un ejemplo real que aplique un CSS a una página web. En el ejemplo tenemos un
documento XHTML junto con el enlace a la hoja de estilos CSS. A la parte visible del
documento que se corresponde con la etiqueta <body></body> se le esta aplicando un estilo
caracterizado 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 al
documento 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ágina
body {
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
ueden mostrarse distintas hojas de estilo según el dispositivo que estemos utilizando (versión
impresa, 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 un
editor 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 que
utilizando 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 JavaScript
JavaScript es un lenguaje interpretado, multiplataforma y parcialmente orientado a objetos. Es
utilizado para acceder a objetos en aplicaciones (21). Se utiliza en el desarrollo de páginas web
permitiendo el desarrollo de interfaces de usuario mejoradas y páginas dinámicas.
Los archivos JavaScript tienen la extensión “.js”.
3.1.3.1 Uso
El código JavaScript puede enlazarse o añadirse a las páginas web proporcionando un control
total y dinámico sobre ellas. Con JavaScript podemos controlar todos los elementos que forman
una página web. Debido a la gran variedad de páginas webs, para evitar incompatibilidades, el
W3C diseñó un estándar denominado DOM2 (modelo de objetos del documento, en inglés) que
especifica la jerarquía de los elementos que forman una página web y que pueden ser accedidos
para interactuar con ellos mediante JavaScript. Además JS, también permite controlar (hasta
cierto punto) los navegadores.
Está influido por Java y Python y es el lenguaje de scripts más extendido en la red gracias a su
sencillez y versatilidad. Hoy en día cualquier página con un mínimo de interacción incluye esta
2DOM 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.
Figura 3.5: Logo de JavaScript (no
dispone de uno homologado)
tecnología: Vimeo, YouTube, USTREAM, devianART, Blogger, Picasa, etc.
3.1.3.2 Sintaxis
JavaScript para realizar una acción sobre un elemento tiene dos partes: un selector y la función
con sus parámetros. A su vez podemos usar las funciones definidas por defecto en el lenguaje o
crear funciones tan complejas como queramos.
Código 3.6: Escritura de una frase en el documento (X)HTML
document.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 Ejemplo
Pongamos un ejemplo real donde tengamos el documento XHTML junto con el código
JavaScript.
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 variable
numero
return numero * numero; }// devolvemos el cuadrado de la variable de entrada
</script>
Figura 3.6: Jerarquía DOM
</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 una
función JavaScript que devuelve el cuadrado del número que le pasemos. Por pantalla se
mostrará 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 web
visitadas por otros usuarios, comúnmente denominado problema XSS (problema basado en las
vulnerabilidades del sistema de validación de HTML).
3.1.3.6 Enlace a la API
___________________________________________________________________ API JavaScript: http://krook.org/jsdom/
3.1.4 AJAX
Ajax (JavaScript asíncrono y XML) es una técnica de desarrollo web para crear aplicaciones
interactivas (23). No es una tecnología en sí mismo. En realidad, se trata de varias tecnologías
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
Figura 3.7: Logo de
AJAX (no dispone de uno homologado)
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 Uso
Básicamente, la principal virtud de AJAX está en la potencia que se le puede extraer al trabajo
asíncrono de peticiones al servidor. Estamos acostumbrados a un modelo de interacción
sincrónica basada en clic-petición-presentación, clic-petición-presentación. Con AJAX la
interacción pasa a ser asíncrona. Cada vez que se hace clic no necesariamente se establece una
conexión con el servidor.
AJAX hace de intermediario entre el servidor y el usuario (Figura 3.8), anticipando peticiones
de datos al servidor, de modo que cuando el usuario hace un clic determinado, AJAX ya tiene
listos esos datos y los muestra directamente, sin tener que volver a hacer una petición al servidor
y su consecuente espera.
Ahí está la clave precisamente, en que ciertos procesos se muestran en la página sin retardo
alguno, pues mientras el usuario miraba unos datos en la pantalla, AJAX le ha estado
preparando los siguientes que iba a necesitar.
JavaScript es el lenguaje interpretado en el que normalmente se efectúan las funciones de
llamada 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 una
cadena 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 esa
conversación, de forma que cuando pulsamos en la opción de expandir los mensajes vemos que
se carga inmediatamente y que la URL no varía. No solo gran parte de las aplicaciones de
Google (por ejemplo Gmail, Google Groups, Google Suggest o Google Maps) usa AJAX,
Figura 3.8: Cliente servidor en
modelo de aplicación clásica y en modelo de aplicación AJAX
también podemos encontrarla en aplicaciones como Flickr, Amazon‟s, etc.
3.1.4.2 Ejemplo
Pongamos un ejemplo real que remplace un texto de un página web por el de un archivo de
texto 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ón
HTTP3 (Código 3.10) para obtener dicho archivo. Las peticiones XML HTTP es la base de
AJAX.
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 servidor
http.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 la
petició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 hacer
3Protocolo mediante el cual se transfieren las páginas web a un ordenador.
uso de un tipo de objeto para hacer peticiones HTTP por medio de XML especifico de
Microsoft.
La combinación de la manipulación del DOM (elementos de la página web) con el
XMLHttpRequest nos da AJAX. En una página sin AJAX habríamos cargado todo de golpe
mediante una única petición HTTP, en el ejemplo hemos hecho dos peticiones una para cargar la
parte de la página que el usuario puede ir leyendo y otra para obtener el código para reemplazar
el 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ágina
constantemente al interactuar con ella.
___________________________________________________________________ El tiempo de espera para una petición se reduce. El usuario al hacer un pedido (request) al
servidor, 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 del
lado del navegador, por consiguiente mayor trabajo del navegador (estás mismas desventajas se
aplican a JavaScript).
3.1.4.5 Enlace a la API
AJAX no dispone de un conjunto de métodos propios en forma de guía ya que AJAX es un
conjunto de tecnologías web, así que daremos una referencia a una buena documentación.
___________________________________________________________________ Referencia documentación JAX: https://developer.mozilla.org/en/JAX
3.1.5 jQuery
jQuery es una biblioteca Javascript que permite simplificar la manera de interactuar con los
documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y
agregar interacción con la tecnología AJAX a páginas web. (24)
3.1.5.1 Uso
A la hora de enriquecer una página web con componentes de la llamada Web 2.0, como efectos
dinámicos, Ajax, interacción, interfaces de usuario avanzadas, etc; jQuery es una herramienta
imprescindible para desarrollar todas estas cosas sin tener que complicarte con los niveles más
bajos del desarrollo, ya que muchas funcionalidades ya están implementadas, o bien las librerías
del 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
Figura 3.9: Logo de jQuery
un coste en tiempo de desarrollo de los proyectos. Sin un framework como jQuery, el tiempo de
creación y depuración de todos esos componentes sería mucho mayor, pero aun así nadie dice
que todo sea instalar el sistema y empezar correr. Sin embargo, lo más complicado de jQuery es
aprender a usarlo, igual que pasa con cualquier otro framework Javascript. Requerirá del
desarrollador habilidades avanzadas de programación, así como el conocimiento, al menos
básico, de la programación orientada a objetos. Una vez aprendido las ventajas de utilizarlo
compensarán más que de sobra el esfuerzo. JavaScript en comparación con otros lenguajes es
muy 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 parte
de las aplicaciones de Google, Twitter, Match, WordPress, Drupal, RoundCube, etc.
3.1.5.2 Sintaxis
La sintaxis de jQuery es prácticamente la misma que la de JavaScript, los únicos cambios son
respecto a los selectores que incluye los mismos que los de CSS y respecto a las funciones que
trae nuevas funciones para facilitar algunas tareas repetitivas comunes en la programación con
JavaScript.
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 se
incluya 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>
Como se puede observar en el Código 3.12, se ha añadido “$(document).ready()”. Pues todo lo
que 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 que
podemos acceder a todos los elementos de la pagina y que no queda ninguno por ser
inicializado.
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.2 Tecnologí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 (Figura
3.1), es decir, el servidor genera la página web según la petición manteniendo una comunicación
síncrona. De esta forma se aumenta la seguridad de la página y el uso de aplicaciones más
complejas.
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 PHP
PHP (Preprocesador de Hipertexto) es un lenguaje interpretado de propósito general
ampliamente usado, diseñado especialmente para desarrollo de web dinámicas y que puede ser
incrustado dentro de código HTML (25). Generalmente se ejecuta en un servidor web, tomando
el código en PHP como su entrada y creando páginas web como salida. Puede ser desplegado en
la 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 ser
JSP (Java de Sun Oracle) o ASP (.Net de Microsoft).
Los archivos PHP tienen la extensión “.php”.
3.2.1.1 Uso
PHP es el lenguaje más usado en la actualidad para el desarrollo de aplicaciones web debido al
costo de los servidores que lo soportan, la comunidad y similitud con lenguajes básicos de
programación como C. Lo usan Facebook, Tuenti, WordPress, Joomla, phpBB, etc.
3.2.1.2 Sintaxis
La 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 propia
página está incluido en tags especiales aunque también podemos enlazarlo desde el exterior o
dejarlo básicamente que genere el (X)HTML desde el servidor.
Código 3.13: Escritura en la página de una cadena
echo "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 Ejemplo
Pongamos un ejemplo real que incluya un texto en una página web. Las páginas que incluyan
código PHP aunque incluyan en su mayoría HTML (fuera del propio PHP), deberán llevar la
extensió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 una
cadena
echo ($mensaje); ?> // mostramos por pantalla
</body>
</html>
En el ejemplo del Código 3.14 hemos declarado una variable (mensaje) que contiene una cadena
Figura 3.10: Logo de PHP
de texto que mostramos en la página web usando “echo”. Así de sencillo, podemos generar
partes de la página web o incluso la página web completa, según nuestras necesidades. Ahora
vamos ver un ejemplo más completo en el que la página sea dinámica, es decir, una vez
realizada la página el usuario podrá interactuar con ella para cambiar su contenido (Código
3.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 lo
saludamos mostrando su nombre y comida favorita (echo 'Hola, '.$_POST['nombre'].', tu comida
favorita es: '. $_POST['comida'];). En caso de que los datos no estén guardados en el servidor
mostramos en la web un formulario para que el visitante nos indique su nombre y seleccione su
comida favorita de entre 3 posibles opciones para almacenarlos. $_SERVER['PHP_SELF']; nos
retorna 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 la
variable $_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 a
medida que se usan en la aplicación el servidor reconoce de que tipo son. Para mostrar una
cadena (en inglés string) debe estar dentro de comillas dobles o simples (ejemplo: "Hola
Mundo", 'Lo que quiero mostrar'). Cabe destacar que si se desea mostrar el símbolo " o ' debe
encerrarse 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
tratado entonces como un comentario. Para insertar un bloque de comentario, de una o más
lí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 la
totalidad 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 de
sus 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 a
medida 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 terceras
personas.
___________________________________________________________________ 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.php
3.2.2 JSP
(Servidor de Páginas para Java) es una tecnología Java diseñada especialmente para desarrollar
web dinámicas y que puede ser incrustado dentro de código HTML. Generalmente se ejecuta en
un servidor web, tomando el código en Java como su entrada y creando páginas web como
salida. Puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas
operativos y plataformas. Es una alternativa a PHP.
Los archivos JSP tienen la extensión “.jsp”.
3.2.2.1 Uso
JSP puede considerarse como una manera alternativa, y simplificada, de construir servlets4. Es
por ello que una página JSP puede hacer todo lo que un servlet puede hacer. Cada versión de la
especificación de JSP está fuertemente vinculada a una versión en particular de la especificación
de servlets. JSP no nos da nada que no pudierámos en principio hacer con un servlet. Pero es
mucho más conveniente escribir (y modificar) HTML normal que tener que hacer un billón de
sentencias “println” que generen HTML. Además, separando el formato del contenido podemos
poner diferentes personas en diferentes tareas. Por ejemplo, varios expertos en diseño de
páginas web pueden construir el HTML, y los programadores de servlets dedicarse
exclusivamente al contenido dinámico.
El funcionamiento general de la tecnología JSP es que el servidor de aplicaciones interpreta el
código contenido en la página JSP para construir el código Java del servlet a generar (26). Este
servlet será el que genere el documento (típicamente HTML) que se presentará en la pantalla del
navegador del usuario. Entre muchas de las posibles aplicaciones tenemos páginas de bancos,
juegos online, gestores de contenidos, chats, etc.
3.2.2.2 Sintaxis
La sintaxis de JSP es la sintaxis de Java ya que es código Java (Código 3.16). El código de JSP
dentro de la propia página está incluido en varias etiquetas especiales.
Código 3.16: Escritura en la página de una cadena
System.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 JSP
se traduce a un servlet. Las directivas les dicen al motor JSP que incluya ciertos paquetes y
clases. Las directivas están encerradas entre etiquetas de directiva <%@ ... %>. Por ejemplo:
4Los servlets son pequeñas aplicaciones Java que se ejecutan en un servidor web.
Figura 3.11: Logo de JSP
<%@ page import="javax.naming.*" %>
___________________________________________________________________ Declaraciones. Las declaraciones JSP nos permiten configurar variables para su uso posterior en
expresiones o scriptlets. También podemos declarar variables dentro de expresiones o en
scriptlets en el momento de usarlas. Las declaraciones van encerradas entre etiquetas de
declaración <%! ... %>. Por ejemplo: <%! String text; %>
___________________________________________________________________ Expresiones. La expresiones JSP nos permiten recuperar dinámicamente o calcular valores a
insertar directamente en la página JSP. Las expresiones van encerradas entre etiquetas de
expresión <%= ... %>. Por ejemplo: <%= getDate() %>
___________________________________________________________________ Scriptles. Los scriptlets JSP nos permiten embeber segmentos de código java dentro de una
página JSP. El codigo embebido se inserta directamente en el servlet generado que se ejecuta
cuando 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 Ejemplo
Pongamos un ejemplo real que incluya un texto en una página web (Código 3.17). Las páginas
que incluyan código JSP aunque incluyan en su mayoría HTML (fuera del propio JSP), deberán
llevar 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 nuestras
necesidades. Ahora vamos ver un ejemplo más completo pero en vez del uso propiamente de
JSP en el código de la página web, vamos a realizar una página HTML (Param.html) que
incluirá 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 y
generará una "página dinámica" como respuesta, con los datos y que será mostrada de nuevo al
cliente que desencadenó el proceso. Para que exista un servlet atento a las peticiones que le
vayan llegando, tendremos instalado e iniciado el contenedor de servlets (Tomcat) al que
configuraremos un archivo (web.xml) donde deben figurar todos los servlets disponibles para su
ejecució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-->
<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 algunas
etiquetas
</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án
mediante el "Método POST" al servlet, cuyo nombre es "ParamServlet" (Código 3.19) y está en
un directorio llamado "misServlets", en el contenedor Tomcat. Dicho contenedor está en el
mismo ordenador ya que el nombre del servidor que lo alberga es "localhost". Esa llamada al
servlet 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 formulario
import java.io.*; /* importamos librerías de entrada salida */
import javax.servlet.*; /* importamos librerías para servlet, aquí va incluida la propia para
HTML*/
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 necesario
antes de que pueda invocarse cualquier servlet y que describe cada uno de ellos. Este fichero se
debe 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">
<!-- 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 cumpla
con las especificaciones de JSP y de Servlet. Tomcat es una completa implementación de
referencia 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. El
contenedor recibe la petición y buscará el servlet en la lista de los posibles en nuestro descriptor
web.xml. Si todo está bien, será encontrado e invocado, ejecutando el método POST (que es
como el main), ya que así se indicaba en la etiqueta <FORM> de la página HTML. El método
Post() tiene dos argumentos. El primero representa la "petición" del cliente (usuario remoto) y
con el nombre de HttpServletRequest; el segundo es la "respuesta" que generará el servlet hacia
el cliente en la forma del objeto HttpServletResponse. El servlet, lo primero, ha de indicar el
tipo de información que se va a emitir (html) y luego forma un objeto asociado con el navegador
web del cliente para imprimir allí los resultados, por medio del método getWriter(). Extraerá los
datos de los cuadro de texto (el nombre y la edad) mediante los métodos getParameter() y se
dedicará a formar la página HTML dinámica. Una vez terminada, se cierra (close) y es enviada
automá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á
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.html
3.2.3 Python
Python es un poderoso lenguaje de programación interpretado. Su sintaxis simple, clara y
sencilla; el tipado dinámico, el gestor de memoria, la gran cantidad de librerías disponibles y la
potencia del lenguaje, entre otros, hacen un poderoso lenguaje para el desarrollo web.
Los archivos Python tienen la extensión “.py”.
3.2.3.1 Uso
Algunos 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 por
ciento mayor de los programas disponibles. Aunque Python tenía deficiencias a la hora de
rendimiento ya no es problema ya que enmascara otros lenguajes, un ejemplo de uso es el de
Python con Ogre3D (motor gráfico de videojuegos) donde podemos programar la aplicación
entera con Python. Para cosas a más bajo nivel Python usa por debajo un modulo para C/C++ u
otros lenguajes. Existen muchas de las aplicaciones web de Google que están escritas con
Python y uno de los mejores gestores de contenidos que existe (Plone) también está escrito en
su totalidad en Python. (27)
3.2.3.2 Sintaxis
La sintaxis de Python es minimalista deshaciéndose de todo aquello que no sea necesariamente
imprescindible (Código 3.21). El código de Python dentro de la propia página está incluido en
tags especiales.
Código 3.21: Escritura en la página de una cadena
print "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 Ejemplo
Llegados a este punto si comparamos el ejemplo del Código 3.21 con el de la sintaxis de PHP en
el Código 3.13, podemos observar similitudes a la hora de mostrar mensajes, sin embargo al
contrario que PHP, Python es minimalistas en todos los aspectos. Pongamos un ejemplo real
capturar una cámara web (Código 3.22).
Código 3.22: Captura de una imagen con una webcam
Figura 3.12: Logo de Python
from VideoCapture import Device # de la librería para captura de video importamos el dispositivo
cam = Device() # nueva variable de dispositivo de captura
cam.saveSnapshot('image.jpg') # hacemos foto y guardamos la imagen
En el ejemplo anterior capturamos una imagen desde la cámara web cuando ejecutamos este
script en la página web.
Al ser Python uno de los lenguajes de programación más versátiles se usa también para
construir 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 cual
servidor 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 el
calculamos 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 WebFrameworks
3.2.3.6 Enlace a la API
___________________________________________________________________ API Python: http://docs.python.org/library/
___________________________________________________________________ Frameworks para el desarrollo web: http://wiki.python.org/moin/WebFrameworks
3.3 Conclusiones
Las tecnologías web nos permite crear las aplicaciones web. El conjunto de aplicaciones web
actuales, es decir, la Web 2.5 y el futuro la Web 3.0 dependen directamente de las posibilidades
que nos ofrecen estas tecnologías para el desarrollo. Las tecnologías básicas de la que parte toda
aplicació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 o
JSP entre otros.
A lo largo de los años estas tecnologías se han ido perfeccionando. En la actualidad existen
multitud 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 es
precisamente lo hemos visto.
Nos hemos embarcado en un breve recorrido histórico sobre las tecnologías, hemos comentado
los lenguajes de etiquetado y los interpretados más extendidos tanto desde el lado del cliente
como del servidor, con sus ventajas e inconvenientes. A continuación mostraremos una tabla
comparativa donde tratamos aspectos de uso, tipo de programación y expresividad. Y
terminaremos mostrando gráficos de popularidad actual y tendencia para los lenguajes que
hemos tratado en comparación con el resto (hemos explicado los que más se usan y los que más
se usarán).
Tabla 3.2: Lenguajes de programación vistos para la web
Uso Tipo de Programación Expresividad
JS Web - Cliente Imperativa, Orientada a objetos, Funcional,
Reflexiva ****
PHP Web - Servidor Imperativa, Orientada a objetos, de
Procedimientos, Reflexiva ***
JSP Aplicación,
Web - Servidor
Imperativa, Orientada a objetos, Genérica,
Reflexiva ***
Python
General,
Aplicación,
Web - Servidor
Imperativa, Orientada a objetos, Orientada a
aspectos, Funcional Reflexiva *****
3.3.1 Tendencia
Para terminar con el apartado de conclusiones vamos a utilizar, al igual que hicimos en el
capitulo anterior y en los siguiente, la herramienta Google Insights para ver la tendencia en este
caso de las tecnologías web estudiadas.
Vamos a introducir el nombre de las tecnologías vistas más otras existentes en el mercado
menos 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 a
nivel mundial e incluiremos el margen total de tiempos posible, 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).
Para el caso de los tecnologías desde el lado del cliente compararemos los lenguajes de
programación y frameworks estudiados y añadiremos algunas de las tecnología propietarias más
usadas:
___________________________________________________________________ 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
ilverlight (necesitamos instalarlo, propietaria de Microsoft)
A la vista de los resultados mostrados en la Figura 3.13 apreciamos la fuerte popularidad que ha
tenido JavaScript desde sus orígenes y como ha ido cayendo independientemente del
surgimiento de sus tecnologías competidoras. Cabe destacar que parte de la caída que
apreciamos en JavaScript se debe a la delegación de funcionalidad en algunas de sus propias
librerías como jQuery. En la predicción tiende a estabilizarse gracias al uso conjunto con
HTML5 que veremos en el último capítulo y que le está proporcionando popularidad. Por otro
lado, observamos como las tecnologías de Apple y Sun: ActionScript (Flash/Flex) y los Applets
se mantienen mientras que Silverlights tiene una ligera tendencia a incrementar su popularidad
gracias a las promociones de Microsoft.
Además, debemos destacar que la tecnología de Flash, es decir, ActionScript debería haber
representado una cuota mayor (normalmente se suele buscar por Flash) ya que tiene el dominio
absoluto en cuanto a contenedor de formatos de vídeo en Internet.
Sin duda, la competencia es buena pero tanto para Flash como para Silverlight necesitamos
instalar software a parte y pagar por su desarrollo cuando podemos hacer las mismas cosas con
JavaScript directamente o algunos de sus librerías o frameworks. Quizás la parte de contenedor
de vídeo que también integra Flash es la que hechariamos en falta. pero para eso ha surgido por
fin un contenedor libre de vídeo/audio el WebM y formatos libres de calidad como VP8. Estás
tecnologí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ún
los datos estudiados y las pruebas realizadas que la mayor parte del mercado se lo llevarán
JavaScript y sus bibliotecas y frameworks, seguidos de Flash que apoya los formatos libres
como VP8, siempre y cuando se utilice su contenedor. Para terminar pronosticamos que la
tecnología de Silverlight seguirá al alza algunos años pero levemente aprovechando también la
tirada de ASP que seguramente ofrezca cada vez más facilidades de integrar e interactuar con
Silverlight. De todas formas, Silverlight reducirá su cuota notablemente cuando pase de moda
por oponerse Microsoft tanto al formato libre de vídeo VP8 como al contenedor WebM. La
mayoría de desarrolladores en Internet son independientes, libres y siempre buscarán las
mejores alternativas sin costes.
Para el caso de las tecnologías en el lado del servidor compararemos las tecnologías estudiadas
junto con alguna propietaria:
___________________________________________________________________ PHP
Figura 3.13: Tendencia de popularidad de las tecnologías en el lado del cliente
___________________________________________________________________ JSP de Java
___________________________________________________________________ ASP de .NET (necesitamos servidores Windows, propietaria de Microsoft)
___________________________________________________________________ Python
A la vista de los resultados mostrados en la Figura 3.14 apreciamos la fuerte popularidad que ha
tenido PHP desde sus orígenes y como ha ido cayendo independientemente del surgimiento de
sus tecnologías competidoras. Lo mismo ocurre para ASP pero con una caida más abrupta
llegando a sobrepasar su popularidad a mediados del 2008 por Python. En la predicción PHP
tiende a estabilizarse gracias al gran conjunto de aplicaciones gratis que usan PHP y que ha día
de 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 en
Internet y que veremos en el siguiente capítulo. Por otro lado JSP parece mantener su
popularidad 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, muchas
compañías están apostando por está tecnología por su potencia y sencillez pero es sin duda
Google 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ún
los datos estudiados y las pruebas realizadas que la mayor parte del mercado se lo llevarán PHP
y Python, seguidos de JSP.
Figura 3.14: Tendencia de popularidad de las tecnologías en el lado del servidor
CAPÍTULO 2
PÁGINA 47 DE 172
“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, we've realized
it's a brochure.”
~ Douglas Adams
CAPITULO 4: GESTORES DE CONTENIDOS
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í, es
posible manejar el contenido y darle en cualquier momento un diseño distinto al sitio
sin tener que darle formato al contenido de nuevo, además de permitir la fácil y
controlada 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 las
páginas HTML estáticas, cada vez que quiere introducirse un cambio o una
actualización en la página web, el generador de contenidos tiene que descargar la
página, editarla y volverla a actualizar en el servidor. Únicamente el administrador o
usuarios con los mismos permisos pueden actualizar la página. En un sistema CMS
diná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 clicar
para incluir nuevos contenidos.
El contenido debe ser aprobado por el administrador del sistema o el grupo de personas
encargadas del mantenimiento, que serán los que aprueben dicho contenido.
Un CMS incluye herramientas de autor para la generación de contenidos, de modo que
los usuarios sin conocimientos informáticos avanzados puedan generar dichos
contenidos de una forma sencilla. Para ello, se suelen utilizar editores WYSIWYG, en
los que el usuario ve y edita el resultado final directamente. Estos sistemas hacen
transparente el código de las páginas, simplificando enormemente el proceso de
creación y edición. También se suelen ofrecer herramientas más avanzadas para
usuarios con mayores conocimientos, permitiéndoles por ejemplo, editar código
directamente.
Para llevar a cabo la gestión de documentos, se utiliza una base de datos que almacena
los 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
U
Capítulo
4
dedicados a abordar el tema de la gestión de contenidos Web, por lo que remitimos a
ellos para un conocimiento más profundo de la situación del mercado actual. Entre
todos 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 de
software 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 productos
comerciales como de software libre. En la web http://www.cmsmatrix.org/, se pueden
comparar las principales características de los productos existentes. Se han desarrollado
numerosas alternativas, aunque la modularidad de los CMS permite la utilización de
soluciones genéricas. Dentro del software libre, destacan OpenCms (www.opencms.org)
y MySource Matriz (http://matrix.squiz.co.uk).
4.1 Caracterización de los gestores de contenidos
Los gestores de contenidos a menudo intentan cubrir un amplio espectro de necesidades
de distribución de información, por lo que incorporan múltiples herramientas que
permiten 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 de
portales para internet, si bien ofrecen muchas posibilidades en cuanto a distribución de
contenidos por distintos canales. No obstante este capítulo se centrará
fundamentalmente en el estudio de los gestores de contenidos para la construcción de
portales en internet.
En la construcción de portales en internet, a menudo resulta ambiguo hablar de “gestor
de contenidos” dado que su uso puede estar especializado en una o varias líneas sin
dejar por ello de estar orientado a la gestión y difusión de información:
____________________________________________________________ G
estión de contenido optimizado para internet (texto, imágenes).
____________________________________________________________ G
estión de contenido multimedia.
____________________________________________________________ G
estión documental.
____________________________________________________________ G
estión de portales.
____________________________________________________________ G
estión de tramitación y workflow.
____________________________________________________________ G
estión de trabajo colaborativo.
____________________________________________________________ G
estión de sistemas de comercio electrónico.
____________________________________________________________ H
erramientas de soporte a la web 2.0.
No es raro encontrar herramientas que cubran varios de estos ámbitos, sin embargo es
má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, es
necesario tener en cuenta los siguientes aspectos a la hora de evaluar el tipo de gestor a
utilizar o desarrollar. CMSMatrix (http://www.cmsmatrix.org) presenta los siguientes
aspecto a la hora de evaluar las distintas herramientas:
____________________________________________________________ R
equisitos del sistema: Servidor de aplicaciones, servidor web, base de datos,
licenciamiento, sistema operativo.
____________________________________________________________ S
eguridad: Sistemas de auditoría, integración con sistemas de autenticación, granularidad
de los privilegios, soporte de protocolos seguros.
____________________________________________________________ S
oporte: Curva de aprendizaje, documentación, soporte online, disponibilidad de APIs de
desarrollo.
____________________________________________________________ F
acilidad 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…
____________________________________________________________ R
endimiento: Uso de memorias cachés, balanceo de carga, replicación de bases de datos,
exportación a contenidos estáticos.
____________________________________________________________ G
estión: Gestión de publicidad, programación de publicación de contenidos, gestión de
portales, uso de temas, estadísticas, sindicación de contenidos, opciones de
interoperabilidad, workflow, uso de metadatos…
____________________________________________________________ H
erramientas incluidas: blog, chat, wiki, gestión de contactos, foros, gestión de
documentos, gestión de eventos, calendario, FAQ (Preguntas Frecuentes), gráficos,
galerías, seguimiento de proyectos, motor de búsqueda…
____________________________________________________________ S
oporte a comercio electrónico: Sistema de afiliación, medios de pago, gestión de
inventario, carrito de la compra…
4.2 Módulos de los gestores de contenidos
Los módulos software que se pueden encontrar en las herramientas de gestión de
contenidos son los siguientes:
____________________________________________________________ C
ontent 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
____________________________________________________________ P
ortal manager:
___________________________________________________________________ M
ódulo de integración con datos de negocio (soportados en bases de datos relacionales,
archivos XML, etc)
____________________________________________________________ H
erramientas de comunicación hacia y entre usuarios
A continuación se detallan someramente las funcionalidades que incluyen cada unos de
estos módulos:
4.2.1 Creación y edición de contenidos
Las herramientas permiten la definición de tipos de contenidos, los cuales pueden estar
formados por múltiples tipos de campos (cadenas, fechas, imágenes, texto
enriquecido,...) incluso se pueden anidar tipos de contenido para conseguir tipos
compuestos.
A los tipos de contenidos se les asocian los workflows (flujos de trabajo) que se
aplicará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. Este
mecanismo se utiliza para solucionar el problema de los contenidos multiidioma.
Los usuarios pueden crear y editar contenidos accediendo a la aplicación cliente y
añadiéndolos a través de los formularios de cada uno de los tipos de contenidos que
existen. Además se puede permitir que desde la vista previa de presentación del Portal
se pueda acceder a la gestión de los contenidos, ofreciendo así al usuario varios modos
de acceder al repositorio y modificar los contenidos viendo sobre la marcha el resultado
que obtiene en el portal por el que ha accedido a los mismos.
4.2.1.1 Plantillas
Tambié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 los
sistemas ofrezcan unas plantillas predefinidas.
Como se ha mencionado es interesante que el gestor de contenidos permita hacer una
vista 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áginas
HTML (lenguaje usado por todos los navegadores de internet para visualizar
informació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 describir
cómo la información contenida en un documento XML cualquiera debe ser
transformada 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 usando
programas destinados al diseño de páginas web (como por ejemplo el popular
Dreamweaver).
XML es un metalenguaje extensible de etiquetas usado para almacenar los datos o
instrucciones que se definan para cada uso particular. En el caso que nos ocupa el XML
almacenaría los contenidos concretos a visualizar, así como otros metadatos, que en
combinación con la plantilla XSL ofrecerían al usuario final la información
correctamente formateada.
Dado que lo habitual es que el almacén de la información sea una base de datos, los
gestores de contenidos generan en tiempo de ejecución (bien sea en modo batch u
online) los XML y los combinan con las XSL sin necesidad de que existan físicamente
unos archivos XML.
4.2.1.2 Gestión documental
Algunos sistemas permiten incluir como parte de los contenidos archivos anexos al
objeto de ponerlos disponibles para la descarga del usuario. Sin embargo, más allá de la
simple descarga, algunos son capaces de integrar documentos externos en un sistema de
gestión documental propio, permitiendo reutilizar parte del contenido para generar
nuevos contenidos. Esto suele ser especialmente relevante en entornos corporativos y en
sistemas de gestión del conocimiento.
Independientemente del uso o no de documentos complementarios, algunos gestores de
contenidos intentan realizar una auténtica gestión documental con la información que
los usuarios almacenan. Para ello implementan sistemas de catalogación de la
información que permiten organizarla de acuerdo a taxonomías y categorías, o usando
simples técnicas de etiquetado que pueden estar más o menos sistematizadas.
4.2.1.3 Contenidos complementarios
Bajo este epígrafe podemos considerar todos aquellos elementos que el sistema ofrece al
usuario final para ampliar la información del contenido que está visualizando. Esta
información adicional puede ir desde otros contenidos ofrecidos como enlaces hasta la
inclusión de promociones relacionadas con el contenido.
Para ello algunas herramientas permiten clasificar a los visitantes del portal en grupos
lógicos y así determinar qué tipo de contenido es más apropiado para determinados
segmentos 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 el
control de los enlaces entre la información, de forma que cuando algún contenido deje
de estar disponible se reorganicen todos los enlaces al mismo.
4.2.2 Gestión de validación y distribución de contenidos
Por gestión de contenidos debemos entender todas aquellas operaciones a realizar para
que 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 la
creación y edición de contenidos, roles para su posible traducción, validación y
operativa para su distribución.
La gestión se sofistica más cuando un contenido concreto a mostrar al usuario final no
se puede manipular como un elemento atómico dentro del gestor, sino que requiere la
intervenció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 de
usuarios 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 de
sistemas de workflow sobre los roles o usuarios.
En función de la complejidad de dichos circuitos se pueden hacer necesarias utilidades
para modelar visualmente los workflow o incluso APIs para que personal especializado
programe los flujos de trabajo necesarios.
Es recomendable que estos flujos generen definiciones de procesos en formato xpdl, que
es 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.
Estos workflows sirven para determinar los procesos por los que deben pasar los
diferentes contenidos en función de su tipo. Por lo que los gestores de contenidos
definen una matriz en la que asignan unas operaciones sobre unos tipos de contenidos a
unos roles o usuarios concretos.
Con todo ello aparece implícitamente el concepto de tarea a realizar por cada usuario
dentro del workflow cuando éste se activa. Por tanto es útil que cuando los usuarios se
conectan a la aplicación dispongan de una lista de temas pendientes en función de su
participación en los diferentes flujos definidos en el sistema.
Por otro lado algunas herramientas incorporan una consola de administración desde la
que 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 los
usuarios, como por ejemplo enviar emails cuando un contenido de un determinado tipo
ha sido creado, etc.
4.2.3 Publicación de contenidos
La publicación de contenidos se lleva a cabo mediante la utilización de los servicios de
entrega de contenidos.
Las áreas principales de los servicios de entrega son la entrega del contenido a través de
diversos 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 mismos
puede ser distribuida. Se puede permitir mantener múltiples portales publicando los
contenidos de muchas formas diferentes, por ejemplo, se pueden publicar contenidos
actualizando las bases de datos de explotación de las aplicaciones del cliente. También
puede 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 nuestros
sitios web o aplicaciones.
La publicación en bases de datos está pensada principalmente para que el cliente no
tenga que cambiar sus bases de datos de explotación, siendo el gestor de contenidos el
que se adapta a los modelos de datos del cliente para poder realizar la publicación de
contenidos en dichos repositorios de explotación.
El entorno de publicación no necesita necesariamente acceso a la base de datos central
del repositorio (funcionamiento offline), pero sí a una base de datos o sistema de
ficheros con los datos publicados en dicho entorno, pudiéndose automatizar los
procesos 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 se
ejecutan en servidores de aplicaciones. Estos agentes son especialmente importantes si
el sistema debe mantener una alta disponibilidad, pues automatizan la distribución de
contenidos 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 ser
carpetas donde se ubican los diferentes contenidos. Es una organización jerárquica que
se puede mostrar en la web o en otro medio de diferentes formas según la plantilla que
se asigne a su representación.
Cada canal puede presentar restricciones en cuando al tipo de contenido o formato (por
ejemplo por algunos canales no se puede transmitir vídeo, o sólo un texto de tamaño
limitado). Para ello en la definición de las plantillas se puede limitar la libertad de
acción de los diferentes roles para asignar los contenidos a los huecos habilitados en la
plantilla para los mismos. El usuario al indicar qué contenidos deben ir en cada hueco
de la plantilla puede además definir las reglas para la selección de los contenidos a
mostrar.
Como apoyo a la gestión de contenidos en distintos canales algunos sistemas incorporan
unos filtros de contenidos que son capaces de adaptar el contenido para cada canal. Esta
técnica es muy utilizada en gestores de contenidos de vídeo, donde el vídeo original se
almacena en alta calidad, pero luego se distribuye automáticamente en distintas
calidades en función del canal de distribución.
La entrega de contenidos es el proceso de presentar al usuario final los contenidos que
han sido publicados. Hay múltiples formas de realizar la entrega de contenidos, entre las
que destacan:
____________________________________________________________ G
eneración de portales basados en lenguajes de script dinámicos (JSP, PHP, ASP).
____________________________________________________________ G
eneración de portales 100% en HTML.
____________________________________________________________ U
so de una API para la obtención de los contenidos gestionados.
____________________________________________________________ P
ara el caso de aplicaciones basadas en tecnología J2EE se pueden generar portlets
publicados en portales gestionados por otra herramienta.
La solución más eficaz desde el punto de vista de la velocidad de visualización de
contenidos es la generación del portal 100% en HTML, pero esta alternativa sólo es
factible 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 a
una mayor carga de proceso a los sistemas de visualización.
Existen soluciones intermedias que suelen basar su funcionamiento en el uso de cachés
de almacenamiento intermedio, siendo sobre todo útiles cuando la visualización se
realiza desde clientes pesados (una caché ubicada en el propio cliente permitiría la
visualizació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 contenidos
Desde el punto de vista de la generación y edición de los contenidos, y más allá de lo
definido en el workflow, algunos gestores de contenidos incorporan un sistema de
control de versiones que permite recuperar versiones previas de los contenidos, así
como la comparación entre versiones diferentes de los mismos. Este sistema permite el
bloqueo de los contenidos durante su edición para evitar que un mismo contenido sea
modificado a la vez por más de un usuario. Sin embargo lo habitual es que el control de
versiones se incorpore en herramientas de gestión documental o en herramientas de
trabajo colaborativo.
Desde el punto de vista de la explotación de los contenidos, existen herramientas que
permiten consultar información de acceso a los sites y sus contenidos. Estas
herramientas permiten diferentes tipos de consultas, informes y gráficas de accesos por
contenidos, tipos de contenidos, etc.
Para obtener toda esta información se utilizan los logs propios de los servidores web y
se cruzan con los logs propios de las APIs del gestor de contenidos, para así conseguir la
información de acceso a las páginas de un site y a sus contenidos (esto último no se
puede conseguir analizando sólo los logs de los servidores web).
Una vez los contenidos han caducado, pueden desaparecer o pasar a formar parte de un
repositorio o una hemeroteca. Para acceder tanto a estos contenidos como a los
actualmente vigentes, es importante que tanto los gestores como los usuarios finales
dispongan de un buscador de contenidos que permita su rápida localización y
visualización.
4.2.5 Portal manager
Cuando se desea publicar los contenidos en más de un portal es importante disponer de
una funcionalidad adicional de gestión de portales.
Los gestores de portales suelen ser los encargados de gestionar la disposición los
accesos a la información estructurando los sistemas de menús o de acceso a los sistemas
de categorización de los contenidos.
Estas herramientas se complementan con las de generación de comunidades o
herramientas de Web 2.0, pues todo ello dota de mayor versatilidad a los portales. Sin
embargo el factor fundamental consiste en disponer de una consola centralizada que
permita la gestión de todos los portales, la gestión de acceso a los contenidos y la
gestió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 arquitecturas
JAVA) de cada uno de los portales gestionados.
Desde la administración central del sistema se pueden crear administradores de cada
uno de los portales, para delegar la administración de los diferentes portales.
4.2.6 Integración con datos de negocio
Los sistemas de gestión de contenidos suelen tener que integrarse con otros sistemas de
información, sobre todo si están orientados al mercado corporativo.
La mayor parte de los gestores son capaces de integrarse con sistemas de autenticación
de usuarios tipo LDAP (Protocolo Ligero de Acceso a Directorios), de tal manera que la
base de usuarios gestores del sistema se obtiene desde una fuente externa.
Más allá de la autenticación existen sistemas que incorporan diversos medios de
integració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 una
explotación de los datos obtenidos desde el portal como una publicación de los
contenidos extraídos de esos sistemas.
Otra característica destacada es la capacidad de acceder a repositorios virtuales. Se
pueden modelar tipos de contenidos sobre repositorios existentes, sin llegar a
incorporarlos físicamente en la base de datos del gestor de contenidos.
4.2.7 Herramientas de comunicación
Muchos gestores de contenidos incorporan herramientas de comunicación entre usuarios
que van desde las mensajería más básica, foros y chats hasta las herramientas
colaborativas propias de la Web 2.0.
Estas herramientas, aunque en un principio son ajenas al resto del funcionamiento del
gestor de contenidos, se pueden integrar mediante sistemas de búsqueda que permitan a
los usuarios localizar información adicional a la originalmente publicada. Esto conlleva
una gestión adicional de políticas de acceso y control de los contenidos.
4.2.8 Arquitectura general
La arquitectura funcional de los sistemas de gestión de contenidos contempla los
siguientes elementos.
____________________________________________________________ S
ervidor central para el soporte de las aplicaciones
____________________________________________________________ B
ase de datos central relacional, documental o ambas
____________________________________________________________ C
lientes de gestión, ligeros o pesados.
____________________________________________________________ C
lientes ligeros o pesados para el usuario final.
____________________________________________________________ O
pcionalmente base de datos en las estaciones de gestión.
____________________________________________________________ O
pcionalmente base de datos en las estaciones reproductoras.
CAPÍTULO 2
PÁGINA 57 DE 172
“Software is like sex: it's better when it's free”
~ Linus Torvalds
CAPITULO 5: APLICACIONES
ntes de adentrarnos en este capítulo es necesario matizar el concepto de
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 web
final. De entre estos dos conceptos estamos interesados en el segundo, las aplicaciones
web de cara a la producción y realización de la Web 3.0. Estas aplicaciones no son más
que uno o varios conjuntos de tecnologías web combinadas de tal forma que nos
proporcionan una capa superior de abstracción para asegurarnos el correcto
funcionamiento 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 pueden
clasificarse en un conjunto de diecisiete categorías:
____________________________________________________________ A
nalizadores
____________________________________________________________ B
logs
____________________________________________________________ C
APTCHAs
____________________________________________________________ C
MS
____________________________________________________________ S
istemas de comentario
____________________________________________________________ A
dministradores de bases de datos
____________________________________________________________ H
erramientas de documentación
____________________________________________________________ E
ditores
____________________________________________________________ S
cript para fuentes de texto
____________________________________________________________ P
A
Capítulo
5
aneles para hospedaje web
____________________________________________________________ S
eguidores de incidencias
____________________________________________________________ F
oros
____________________________________________________________ W
ikis
____________________________________________________________ G
alerías de imágenes
____________________________________________________________ V
isualizadores de vídeo
____________________________________________________________ W
idgets
____________________________________________________________ E
shops
Para el estudio de estas aplicaciones se han realizado una series de mediciones y
comparaciones de uso en Internet empleando el analizador de tecnologías web
Wappalyzer. Gracias a una comunidad en aumento de 75.993 usuarios que incorporan
Wappalyzer en Firefox se puede obtener una idea de las aplicaciones de desarrollo web
más empleadas en Internet (28). Concretamente, la información mostrada en la tablas es
correspondiente al número de instalaciones de aplicaciones para web correspondiente al
mes de Junio de 2010.
A continuación se describen la lista de categorías de aplicaciones web junto con los
datos obtenidos. Los datos obtenidos nos dan una aproximación del uso de la aplicación
gracias a que nos facilita el número de sitios web que incorporan la aplicación, número
de 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.1 Analizadores
Los Analizadores son aplicaciones que ofrecen servicios de estadísticas para sitios web.
Entre los tres Analizadores más importantes encontramos a Google Analytics, Quantcast
y StatCounter. El primero y el último tienen la misma funcionalidad ofrecen servicios
sobre varios sitios web sin embargo, Google Analytics ofrece un servicio mucho más
completo, robusto y personalizable y es por ello que es el número uno
indiscutiblemente. Por otro lado, Quantcast es más usado para estadísticas de visitantes
y crecimientos muchos sitios web, es decir, comparaciones masivas pero no tan
personalizadas y configurables.
A continuación en la Tabla 5.1, por orden de uso mostramos las aplicaciones más usadas
para el estudio estadístico de webs.
Tabla 5.1: Analizadores
Orden
uso Aplicación Sitios web Usuarios
Páginas
Vistas
% Cantidad % Cantidad % Cantidad
1 Google Analytics 80.0 % 581.726 45.5 % 113.850 80.8 % 3.337.381
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 % 193
5.1.1 Google Analytics
A grandes rasgos Google Analytics ofrece estadísticas sobre la inversión publicitaria,
seguimiento de canales de tráfico y elementos multimedia, informes personalizados para
estadísticas especificas, gestión para compartir y comunicar la información, consulta de datos
mediante 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 la
descripción de sus características más destacadas.
5.1.2 Características de Google Analytics
5.1.2.1 Estadísticas sobre la inversión publicitaria
Google Analytics ofrece seguimiento de ventas integrándose perfectamente con otros servicios
de Google como pueden ser AdWords y AdSense. Con AdWords, Google Analytics recopila los
datos 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 del
sitio que genera más beneficios.
Por otro lado, para amortizar nuestra inversión publicitaria podemos realizar seguimientos de
campañ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 de
latencia 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 multimedia
Google Analytics ofrece seguimiento de sitios web para móviles, aplicaciones para móviles y
dispositivos móviles habilitados para web, incluidos los teléfonos de última generación y los no
habilitados 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, usando
Google Analytics podemos observar si los indicadores de uso del sitio están por encima o por
debajo 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 algunas
aplicaciones web (Redes Sociales, Blogs...) y algunas tecnologías web (Ajax, Flash...).
Figura 5.1: Captura de pantalla de Google Analytics
5.1.2.3 Informes personalizados para estadísticas específicas
Google Analytics permite que podamos analizar subconjuntos del tráfico del sitio.
Seleccionando un informe personalizado predefinido, como "Tráfico de pago" o "Visitas con
conversiones", o bien podemos crear un informe personalizado nuevo gracias a una herramienta
interna que ofrece el propio Google Analytics. Una vez tengamos creado un informe
personalizado podemos guardarlo y editarlo como queramos.
A la hora de enviar informes personalizados, Google Analytics permite mediante un panel envío
individual o por grupos de los informes generados a personal interesado.
También aparte de exportar los informes podemos desarrollar aplicaciones de cliente con el API
de exportación de datos de Google Analytics. Podemos personalizar el seguimiento de los
visitantes usando el propio API de seguimiento de Google Analytics.
Google Analytics supervisa los informes y alerta automáticamente de los cambios importantes
en los patrones de datos nada más entrar en la aplicación. También podemos configurar alertas
personalizadas para que nos avise cuando se alcancen determinados umbrales.
Por último, una vez generados los datos se pueden hacer análisis de forma avanzada usando
tablas dinámicas, varias dimensiones y funciones de filtrado. Para exportarlo podremos hacerlo
a los formatos más extendidos: PDF, Excel, CSV, etc.
5.1.2.4 Gestión para compartir y comunicar la información
Google Analytics nos permite programar o enviar correos electrónicos con informes
personalizados con la información que queramos compartir.
5.1.2.5 Consulta de datos
Google Analytics ofrece en todo momento gráficos dinámicos que añaden un sofisticado
análisis de varias dimensiones a la mayoría de los informes generados. Podemos seleccionar los
indicadores del eje "x" y del eje "y", y el tamaño y el color del cuadro, y observar la interacción
de dichos indicadores en el tiempo. Eligiendo indicadores a comparar y exponiendo las
relaciones de datos podemos realizar consultas a medida.
Consultando en el área de localización podemos ver de que orientación geográfica recibimos
má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áginas
nos 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 sobre
datos del historial o sobre el promedio de datos de nuestros sitios. En esta misma entrada
podemos seleccionar entre los varias web que gestionemos con nuestra cuenta de Google
Analytics además, podremos comparar algunos datos con páginas externas.
5.2 Blogs
Los Blogs son aplicaciones que pueden formar un sitio web completo o una parte, en ellos se
ofrece periódicamente información actualizada que recopila cronológicamente textos o artículos
de uno o varios autores, apareciendo primero el más reciente. Entre las tres aplicaciones para
crear y gestionar Blogs más usadas encontramos a WordPress, Blogger y LiveJournal. El
primero es realmente un Sistema de Gestión de Contenido (CMS en inglés) y es por ello que es
altamente configurable ofreciendo grandes posibilidades tanto para noveles como para expertos
en desarrollo web. Por otro lado, Blogger y LiveJournal ofrecen menos funcionalidad debido a
que están diseñados exclusivamente para la creación y gestión de Blogs, siendo Blogger
bastante 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 la
categoría de CMS vuelve a ganar WordPress y no queremos repetir aplicación pudiendo así
comentar una en cada categoría.
A continuación en la Tabla , por orden de uso mostramos las aplicaciones más usadas para la
creación de blogs.
Tabla 5.2: Blogs
Orden
uso Aplicación Sitios web Usuarios
Páginas
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 % 138
5.2.1 Blogger
A grandes rasgos Blogger ofrece los servicios básicos que toda aplicación para la creación de
blogs, tales como comentarios, enlaces, fotográficas, vídeos y redifusión sin embargo, a
diferencia de otras aplicaciones que necesitan plugins, Blogger al estar fabricado por Google
dispone de una integración con otros muchos productos de la compañía inherente a la creación
del blog. También como otras grandes aplicaciones ofrece una comunidad gratuita para la
creación de Blogs. (30)
En la Figura 5.2 se muestra una captura de la aplicación. Ahora vamos a proseguir con la
descripción de sus características más destacadas.
5.2.2 Características de Blogger
5.2.2.1 Diseño personalizado
Blogger dispone de un aplicación interna que ofrece muchas plantillas con las que resulta
bastante sencillo crear un blog de aspecto profesional. Además, nos permite personalizar
cualquier plantilla. Podemos elegir entre cientos de imágenes de fondo y decenas de diseños
flexibles, 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 incluso
anuncios de AdSense. También resulta bastante sencillo cambiar las fuentes y los colores. Para
usuarios más expertos existe la posibilidad de controlar directamente parte del blog, es decir,
editando el código CSS y HTML directamente.
5.2.2.2 Interfaz fácil de usar
Sin 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 y
alineació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 corrector
ortográ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 apariencia
de las entradas para los usuarios más avanzados.
5.2.2.3 Añadir fotografías y vídeos
Podemos añadir una foto fácilmente a una entrada de nuestro blog si hacemos clic en el icono de
imagen en la barra de herramientas del editor de entradas. Las fotografías que subamos se
alojarán en nuestra cuenta web de Picasa gratuita (creada automáticamente), desde donde
podemos organizarlas en álbumes y solicitar copias. Para añadir un vídeo a alguna de nuestras
entrada es igual de fácil; sólo tenemos que hacer clic en el icono de la película en la barra de
herramientas del editor de entradas. Los vídeos subidos a través de Blogger se alojan en Google
Vídeo.
5.2.2.4 Posibilidades económicas con AdSense
Con Blogger, podemos ganar dinero con solo publicar entradas de contenido original y de
calidad acerca de nuestro temas favoritos. Blogger dispone de una pestaña exclusiva
"Monetizar" que nos permite colocar anuncios de AdSense. Además, mediante el programa
Amazon Associates de Blogger, podemos buscar en el catálogo de productos de Amazon y
añadir enlaces a los productos que queramos recomendar para ganarnos una comisión cuando
nuestros visitantes compren.
5.2.2.5 Ampliar el número de seguidores
Blogger dispone de un widget denominado "Seguidores" que podemos añadir a nuestro diseño
para 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 blog
al escritorio de Blogger o a la cuenta de Google Reader (sindicación). También es posible añadir
Figura 5.2: Captura de pantalla de Blogger
nuestra imagen y perfil a nuestro blog.
5.2.2.6 Comentarios de nuestros lectores
Los lectores pueden hacer comentarios útiles y oportunos en cualquiera de nuestras entradas de
nuestro blog de forma sencilla. Se pueden hacer los comentarios justo debajo de la entrada, ya
sea en una ventana emergente o en una página independiente.
5.2.2.7 Notificaciones de entrada nueva
Tus lectores pueden escoger suscribirse a los feeds de tu blog y se les avisará siempre que
publiques una entrada nueva en el blog. También puedes personalizar lo que compartes en el
feed de tu blog y configurarlo para que envíe por correo electrónico las entradas nuevas
automá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 podemos
acceder 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 de
nuestro blog también puede utilizarse como OpenID para ofrecerte una única identidad digital
en la web. Como nuestro blog puede aceptar comentarios de usuarios con OpenID además de
miembros registrados de Blogger, será más fácil para todos nuestros visitantes dejar comentarios
y participar en nuestras conversaciones.
5.2.2.9 Múltiples idiomas
Blogger 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 a
izquierda. 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áginas
Con 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 los
enlaces a esas páginas aparezcan como pestañas en la parte superior de nuestro blog o en la
columna lateral. Anteriormente esta función no estaba disponible pero debido a que los blogs
son 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 entradas
En Blogger, podemos publicar entradas en el blog de varias formas. Tenemos la posibilidad de
usar el teléfono móvil o una dirección de correo electrónico de Mail-to-Blogger. También
podemos usar el Widget para publicar entradas de Blogger para editar y publicar entradas
directamente desde la página principal personalizada de iGoogle.
5.2.2.12 Múltiples usuarios para contribuir
Con Blogger, es fácil crear un blog con varios usuarios, que permita que varios usuarios de
Blogger contribuyan a un único blog. Para ello seleccionaremos qué miembros tienen autoridad
administrativa y quiénes son sólo autores. También podemos elegir que nuestro blog sea privado
y restringir quién puede verlo.
5.2.2.13 Plugins
Podemos elegir entre una serie de aplicaciones de terceros que se integran con Blogger para que
nos resulte aún más fácil publicar. A través de code.blogger.com podemos crear nuestro propios
plugins para Blogger.
5.3 CAPTCHAs
Los CAPTCHAs (Prueba de Turing Pública y Automática para Diferenciar Ordenadores de
Humanos) son tests para averiguar si nos visita una máquina o una persona. La prueba consiste
básicamente en que el visitante de la web introduzca un conjunto de caracteres que se muestran
en 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 la
creación de CAPTCHAs.
Tabla 5.3: CAPTCHAs
Orden
uso Aplicación Sitios web Usuarios
Páginas
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 % 512
5.3.1 reCAPTCHA
La aplicación reCAPTCHA ofrece dos funciones protección contra spam y digitalización de
libros. (31)
A continuación en la Figura 5.3, se muestra una captura de la aplicación para posteriormente
proseguir con la descripción de sus características más destacadas.
5.3.2 Características de reCAPTCHA
5.3.2.1 Anti spam
La función de control Anti spam (contenido basura) es la que realmente nos ofrece la
funcionalidad como aplicación web a integrar con otras ya que permite controlar entre máquina
y persona, por ejemplo a la hora de escribir comentarios, suscribirse a noticias, crear cuentas de
e-mail, etc.
5.3.2.2 Digitalización de libros
La 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 libros
escaneado revisando los términos que no han podido convertirse a texto mediante el escaneo
con el sistema OCR (Reconocimiento Óptico de Caracteres).
De manera distribuida mediante CAPTCHAs los usuarios ayudarán a descifrar los términos que
el sistema OCR no ha sido capaz de averiguar, permitiendo validar la fiabilidad de los términos
introducidos por los usuarios, y que actualmente reCaptcha está colaborando de esta manera en
Figura 5.3: Captura de pantalla de reCAPTCHA
la digitalización de libros y documentos del Internet Archive.
5.4 Gestores de contenido
Un 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
A continuación en la Tabla 5.4, por orden de uso mostramos las aplicaciones más usadas para la
creación de páginas web.
Tabla 5.4: Gestores de contenido
Orden
uso Aplicación Sitios web Usuarios
Páginas
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
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 % 1
Entre 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 y
usabilidad. Sin embargo, si buscamos cargas de datos más rápidas y seguras tendríamos que
destacar en primer lugar a Drupal algo más complejo de usar y menos personalizable. Por otro
lado algo por detrás en cuanto a las posibilidades comentadas se encuentra Joomla, otro gestor
de 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 en
Python, nos referimos a Plone un gestor de contenidos que nos ofrece todas las posibilidades
inimaginables en cuanto a desarrollo web, sin embargo cuenta con el handicap de que es
necesario “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 haber
grandes cambios.
5.4.1 WordPress
A grandes rasgos WordPress (WP) ofrece una avanzada plataforma semántica de publicación
personal orientada a la estética, los estándares web y la usabilidad. Ofrece facilidad de manejo y
administración, dispone de herramientas para la promoción de nuestro sitio, está orientado a la
personalizació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 manejar
colecciones de enlaces. (32)
En la Figura 5.4 se muestra una captura de la aplicación. Ahora vamos a proseguir con la
descripción de sus características más destacadas.
5.4.2 Características de WordPress
5.4.2.1 Lugar de instalación
WordPress 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.
5.4.2.2 Núcleo Flexible
Podemos 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 directorio
public_html cuando se accede por FTP), y desear almacenar los archivos relacionados con
WordPress en http://example.com/wordpress (public_html/wordpress).
5.4.2.3 Fechas UTC
WordPress 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, esto
ayuda a mostrar la hora correcta en nuestra página, incluso si el servidor donde está alojada se
encuentra ubicado en otra zona horaria.
5.4.2.4 Compresión gzip
WordPress comprime el contenido cuando el navegador lo soporta y el servidor tiene activado el
modulo correspondiente.
5.4.2.5 Administración de usuarios
WordPress, para limitar el acceso a personas que colaboran en la página web, usa un sistema de
niveles de usuario; por lo que podemos restringir la capacidad de usuarios individuales de crear
o modificar contenido de nuestro sito web, cambiando los niveles de usuario.
5.4.2.6 Perfiles de usuario
Cada usuario registrado en nuestro sistema puede definir un perfil, con detalles como su
dirección de correo electrónico, cuentas de mensajería instantánea, etc. Los usuarios también
pueden controlar la forma en que su información es mostrada.
5.4.2.7 Fácil instalación y actualización
WordPress, en comparación con el resto de CMS es el más rápido, simple y fácil de instalar, en
solo 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 un
clic en la pantalla principal de administración.
5.4.2.8 Generación dinámica de páginas
No es necesario reconstruir todas sus páginas cada vez que actualiza su bitácora, o cambia algún
detalle de la misma. Todas las páginas son generadas al utilizar la base de datos y las plantillas
cada vez que su bitácora es solicitada por un visor. Esto significa que actualizar su bitácora, o su
diseño es tan rápido como sea posible, y el espacio de almacenamiento requerido en el servidor
Figura 5.4: Captura de pantalla de WordPress
es mínimo.
5.4.2.9 Idiomas
WordPress usa el método gettext para que la traducción sea un proceso muy fácil de realizar e
instalar.
5.4.2.10 Feeds
WordPress soporta de forma total las especificaciones RSS 1.0, RSS 2.0 y ATOM. Así, los
visitantes a nuestra web tienen más facilidades para suscribirse y seguir el curso de las
diferentes páginas y secciones.
5.4.2.11 Links permanentes
Las direcciones para todas las páginas en nuestra web pueden estar de acuerdo a un estándar
libre de estorbos; y todos los vínculos entre páginas son cambiados automáticamente y de forma
transparente, y de una forma entendible tanto para humanos como para máquinas (incluyendo
motores de búsqueda). Esto es muy importante ya que las direcciones limpias son esenciales
para la optimización de resultados en los motores de búsqueda, y para la comodidad de la
persona que visita nuestra página. Un ejemplo de esto podría ser: es.empresa\soluciones ó
www.empresa.com\es\soluciones en vez de www.empresa.com\p_documento.php?id=4620
5.4.2.12 Comunicación entre portales
En Internet cada vez está todo más interconectado, WordPress permite enviar y recibir
PingBacks y TrackBacks, dos formas muy versátiles de señalar temas en común para armar una
gran red de conocimiento.
5.4.2.13 Temas
WordPress permite cambiar su aspecto radicalmente usando los temas (también llamados
themes, en inglés o plantillas) y estilos ya disponibles. También podemos crear y compartir los
temas que creemos.
5.4.2.14 Diseño vía plantillas
WordPress usa plantillas para generar las páginas dinámicamente. Podemos controlar la
presentación del contenido usando la herramienta Editor de Plantilla y las etiquetas de plantilla
que incluye WordPress por defecto.
5.4.2.15 Editor de archivos y plantillas
Cada instalación de WordPress viene con un editor que podemos utilizar para editar nuestras
plantillas (CSS + HTML + PHP), y otros archivos relacionados de WordPress, de forma similar
a como se usan los navegadores sin tener que preocuparnos por la carga y descarga de archivos
para editarlos.
5.4.2.16 Etiquetas de plantillas
Las etiquetas de plantillas hacen más fácil diseñar el contenido e información exhibida en
nuestra web permitiendo a los administradores noveles del sitio una mayor abstracción del
código PHP.
5.4.2.17 Plugins
Los Plugins extienden la funcionalidad principal de nuestra web. Existe extensiones
prácticamente para cualquier cosa implementadas por terceros o desarrolladores de WordPress.
5.4.2.18 Protección con contraseña
WordPress permite proteger páginas, secciones, entradas incluso la página completa
restringiendo los accesos por medio de contraseñas.
5.4.2.19 Mensajes programados
Podemos escribir un mensaje en una fecha determinada, y hacer que se haga visible en una
fecha futura automáticamente.
5.4.2.20 Mensajes con múltiples páginas
WordPress permite dividir mensajes en varias páginas cuando estos son muy largos
5.4.2.21 Carga de archivos/imágenes
Podemos 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ías
Podemos organizar artículos en categorías, y subcategorías...
5.4.2.23 Salvar borradores y autoguardado
Podemos guardar páginas, artículos sin terminar o hacerlo de forma automática y publicarlos
cuando estén listo.
5.4.2.24 Previsualizar entradas
Antes de poner cualquier cosa en la página podemos ver una vista previa de como quedará.
5.4.2.25 Herramientas de actualización
Podemos publicar contenido en nuestra página no solo a través del navegador web sino que
también podemos hacerlo usando el escritorio de nuestro PC, el teléfono móvil entre otras
muchas interfaces.
5.5 Sistemas de comentario
Un sistema de comentario permite la creación y administración de discursos sobre un tema
especifico 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ón
de comentarios.
Tabla 5.5: Sistemas de comentario
Orde
n uso Aplicación Sitios web Usuarios
Páginas
Vistas
% Cantidad % Cantidad % Cantidad
1 Disqus 100 % 4,506 100 % 5,965 100 % 11,430
5.5.1 Disqus
A grandes rasgos Disqus ofrece un servicio online a través de su API para crear y gestionar
comentarios. Puede ser integrado en cualquier tipo de página web permitiendo además enlazar
comentarios con otros comentarios creados usando Disqus desde otra página web diferente. La
aplicació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 la
descripción de sus características más destacadas.
5.5.2 Características de Disqus
5.5.2.1 Conexión entre conversaciones
Es posible que varias conversaciones relacionadas con nuestro sitio web no se produzcan
realmente en nuestra página. Usando Disqus podemos enlazar con la web en la que se están
produciendo los comentarios e incluirlos en nuestra web. Buscando comentarios y menciones de
lugares tales como Twitter, FriendFeed, Digg y YouTube solo tendremos que incluir el enlace y
clicar sobre mostrar con nuestros comentarios.
5.5.2.2 Identidad del comentarista
Disqus permite reconocer a los comentaristas e incluso que estos elijan su identidad a través de
su ficha en Facebook, OpenID, o Twitter.
5.5.2.3 Difundir discursiones
Podemos permitir que nuestros comentaristas propaguen fácilmente la discusión en redes
sociales, impulsando un nuevo tráfico hacia nuestro sitio. Además, ofrece aceleración para la
distribución de nuestro contenido mediante la observación de la eficacia con la que una palabra
clave viaja a través del suministro de noticias de una determinada red social.
5.5.2.4 Potencia y facilidad de gestión
El sistema de gestión de comentarios tiene más utilidades que el simple manejo de discusiones
con eficacia. Disqus tiene un potente panel de moderación y esta diseñado exclusivamente para
Figura 5.5: Captura de pantalla de Disqus
los comentarios. Características tales como moderar varios sitios que poseamos que incorporen
Disqus, varios moderadores, acciones en bloque, y las decisiones automatizadas hacen a Disqus
una herramienta muy eficaz para la gestión y creación de comentarios.
5.5.2.5 Anti-Spam
Disqus nos permite disfrutar de los beneficios de su herramienta Anti-Spam para que nos
deshagamos automáticamente de comentarios basura, es decir, aquellos comentarios
publicitarios o no relacionados con la temática de la discusión que pretenden pasar
desapercibidos para auto-promocionarse en nuestro sitio.
5.5.2.6 Importancia de los comentaristas
Gracias a la capacidad de verificar los perfiles de los comentaristas podemos rastrear a
comentaristas influyentes dentro y fuera de nuestro sitio. Con Disqus es posible seguir a
aquellos comentaristas con reputación mundial en muchas webs.
5.6 Administradores de bases de datos
Un software para administración de una bases de datos permite manejar la administración de un
sistema de gestión de bases de datos a través de una páginas web, utilizando Internet. Entre las
caracterí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 la
gestión de bases de datos en Internet.
Tabla 5.6: Administradores de bases de datos
Orden
uso Aplicación Sitios web Usuarios
Páginas
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 % 20
5.6.1 phpMyAdmin
A grandes rasgos phpMyAdmin permite manejar la administración de MySQL (sistema para la
gestión de base de datos). phpMyAdmin es compatible con una amplia gama de operaciones de
MySQL. Las operaciones más frecuentes son el apoyo de la interfaz de usuario (administrar
bases de datos, tablas, campos, relaciones entre índices, usuarios, permisos, etc), además tiene la
capacidad 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 la
descripción de sus características más destacadas.
5.6.2 Características de phpMyAdmin
5.6.2.1 Compatibilidad con MySQL.
Compatibilidad con las principales características de MySQL. Navegación y borrado de bases
de datos, tablas, vistas, campos e índices. Crear, copiar, eliminar, alterar y cambiar el nombre de
bases de datos, tablas, campos e índices. Posibilidad de ejecutar, editar y marcar cualquier
sentencia SQL, incluso por lotes de consultas. Además permite administrar usuarios y
privilegios de MySQL.
5.6.2.2 Mantenimiento
Mantenimiento 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 y
disparadores.
5.6.2.3 Importar contenido de la base de datos
phpMyAdmin permite importar datos de CSV y SQL
5.6.2.4 Exportar contenido de la base de datos
Existe 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, LATEX
entre otros.
5.6.2.5 Búsquedas
Búsqueda a nivel global en una base de datos o un subconjunto de la misma. Además
phpMyAdmin permite la creación de consultas complejas utilizando preguntas entre distintas
Figura 5.6: Captura de pantalla de phpMyAdmin
bases de datos (QBE).
5.6.2.6 Formatos
phpMyAdmin permite transformaciones de los datos almacenados en cualquier formato
utilizando un conjunto de funciones predefinidas, como por ejemplo mostrar BLOB-data para
mostrar datos como imagen o enlace de descarga.
5.7 Herramientas de documentación
Una herramienta de documentación para el caso concreto de tecnologías web es una herramienta
de programación que genera documentación destinada a los programadores (documentación de
la 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ón
Orden
uso Aplicación Sitios web Usuarios
Páginas
Vistas
% Cantidad % Cantidad % Cantidad
1 phpDocumentor 100 % 51 100 % 57 100 % 72
5.7.1 phpDocumentor
A grandes rasgos phpDocumentor permite generar documentación de código abierto escrito en
PHP. Automáticamente analiza el código fuente PHP y produce la API de lectura y
documentación del código fuente en una variedad de formatos. phpDocumentor genera la
documentació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 la
descripción de sus características más destacadas.
5.7.2 Características de phpDocumentor
5.7.2.1 Amplia gama de formatos
PhpDocumentor genera documentación en HTML, PDF (directamente), CHM (con ventanas de
ayuda del compilador) y XML DocBook.
5.7.2.2 Versatilidad de acceso
Dispone de una interfaz web y la interfaz de línea de comandos. Además las salidas de
documentación son totalmente personalizables usando plantillas.
5.7.2.3 Soporta JavaDoc
Reconoce la documentación JavaDoc extendiéndola con unas etiquetas especiales para PHP.
5.7.2.4 Edición
Permite enlaces automáticos, diagramas de herencia de clases y reemplazar documentos de
manera inteligente. Genera documentación sobre la base de varios conjuntos de acceso privado,
permite referencias cruzadas, cambiar el marcado de los elementos, etc.
5.8 Editores
Una editor web (Web editor, en inglés) es una aplicación diseñada con el fin de facilitar la
creación de páginas web. Actualmente el editor más usado para creación web es un editor de
texto plano, el Notepad++, sin embargo en la actual clasificación nos referimos a aquellos
editores más visuales, es decir, los editores WYSIWYG que como ya vimos son aquellos que
permiten abstraernos un poco más de los entresijos de la tecnología usada para centrarnos en lo
que queremos mostrar y la estética final. También existen editores online gratuitos y ofrecidos
por las propias compañías donde tenemos contratado el hospedaje de nuestra web.
Figura 5.7: Captura de pantalla de phpDocumentor
A continuación en la Tabla 5.8, por orden de uso mostramos las aplicaciones WYSIWYG más
usadas para edición web.
Orde
n uso Aplicación Sitios web Usuarios
Páginas
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: Editores
5.8.1 Dreamweaver
A grandes rasgos Dreamweaver cumple perfectamente el objetivo de diseñar páginas con
aspecto 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ás
soporta la creación de páginas dinámicas con acceso a bases de datos y se integra perfectamente
con otras herramientas de Adobe. (36)
En la Figura 5.8 se muestra una captura de la aplicación. Ahora vamos a proseguir con la
descripción de sus características más destacadas.
5.8.2 Características de Dreamweaver
5.8.2.1 Páginas accesibles
Dreamweaver permite a los diseñadores y desarrolladores crear sitios web basados en
estándares. Podemos previsualizar páginas web dinámicas y contenido local mediante
numerosas herramientas de visualización, diagnóstico y comparación.
5.8.2.2 Compatibilidad con CMS integrada
Tenemos compatibilidad con las pruebas y creaciones de diversos marcos de trabajo de sistemas
de gestión de contenido como WordPress, Joomla y Drupal.
5.8.2.3 Inspección de CSS
Podemos observar en detalle el estilo de nuestra web y cambiar las propiedades de CSS sin
necesidad de leer el código ni utilizar otra utilidad.
5.8.2.4 Sugerencias de código de clase personalizada de PHP
Muestra sintaxis adecuadas de las funciones de PHP personalizadas para escribir el código de
forma más precisa.
5.8.2.5 Compatibilidad con Subversion Mejorada
Gestione los archivos de sitios de forma eficaz en entornos con control de versiones y de
colaboración gracias a una compatibilidad mejorada con el sistema de control de versiones
Subversion.
5.9 Scripts para fuentes de texto
Un script para fuentes de texto (Font script, en inglés) permite usar el tipo de letra que queramos
sin que nos preocupemos por las fuentes de texto que tiene instalada el visitante a nuestra
página.
Cuando creamos una página web con unas determinadas tipografías hay que tener en cuenta que
nuestros 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ódigo
así que, tendremos que asegurarnos de algún modo de que el contenido se maquete con un tipo
de 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. Por
ejemplo, podemos definir fuentes concretas como Arial o Helvetica, o simplemente definir una
Figura 5.8: Captura de pantalla de Dreamweaver
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 hacer
uso de un script para fuentes de texto.
A continuación en la Tabla , por orden de uso mostramos las aplicaciones más usadas para la
creación de scripts para fuentes de texto.
Tabla 5.9: Scripts para fuentes de texto
Orden
uso Aplicación Sitios web Usuarios
Páginas
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,382
5.9.1 Cufón
A grandes rasgos Cufón nos permite poder usar la tipografía deseada sin preocuparnos por
aquellos 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 o
bajar el programa, a través de uno de los dos elegiremos las características de nuestras fuentes y
generaremos un código Javascript que incluiremos en aquellas partes del HTML donde
queramos ver la tipografía elegida. (37)
En la Figura 5.9 se muestra una captura de la aplicación. Ahora vamos a proseguir con la
descripción de sus características más destacadas.
5.9.2 Características de Cufón
5.9.2.1 Reemplazo de texto
Cufón es una librería javascript que permite reemplazar el tipo de letra (fuente) que por defecto
usan los navegadores. Una de las característica CSS más requerida por los diseñadores es la
posibilidad de personalizar las fuentes de los sitios web. Actualmente la única forma real de
Figura 5.9: Captura de pantalla de Cufón
hacer esto es confiar en Flash, ya sea construyendo todo el sitio con este programa o utilizando
el script sIFR.
Cufon es una interfaz web que reemplaza a sIFR (sustituidor de elementos de texto por texto
Flash), evitando tener que utilizar software de propietario y optando, en su lugar, por
canvas/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 SVG
partiendo de la fuente de nuestra tipografía utilizando un renderizador JavaScript.
5.9.2.2 No necesita ningún plugin
Todo lo necesario para utilizar Cufón ya está disponible por defecto en el navegador de tus
visitantes. Esto se debe a que en lugar de requerir Flash, Cufón se basa en JavaScript.
5.9.2.3 Compatible y fácil
Funciona en IE, Firefox y Safari, necesitando escasa o directamente ninguna configuración.
5.9.2.4 Rápido
Carga casi instantáneamente sin tener que soportar el “parpadeo” que usualmente se
experimenta con sIFR.
5.9.2.5 Accesibilidad
Cufon de cara al posicionamiento (seo) de nuestros contenidos, es totalmente válido
interprentando nuestros textos como xhtml válido.
5.10 Paneles para hospedaje web
Un panel para hospedaje web (Hosting panel, en inglés) o también conocido como panel de
control permite llevar a cabo el mantenimiento y monitorización de nuestra página a través de la
compañía con la que contratamos el hospedaje.
A continuación en la Tabla , por orden de uso mostramos las aplicaciones más usadas como
paneles para hospedaje web.
Tabla 5.10: Paneles para hospedaje web
Orden
uso Aplicación Sitios web Usuarios
Páginas
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,864
5.10.1 cPanel
A 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 la
descripción de sus características más destacadas.
5.10.2 Características de cPanel
5.10.2.1 Creación directa y resguardo de nuestra web
cPanel permite cargar y gestionar páginas web, pudiendo usarlo para instalación de aplicaciones
basadas 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 seguridad
Una vez realizada nuestra web cPanel facilita hacer copias de seguridad de datos y protección
de contenido con un simple asistente de copia de seguridad.
5.10.2.3 Análisis y estadísticas
Podemos generar y ver estadísticas sobre los visitantes, visualizar el ancho de banda y
comprobar errores de registros para localizar enlaces rotos y otros problemas. Muchos SEO
prefieren cPanel debido a la cantidad de información que aporta sobre el tráfico web. Podemos
generar estadísticas web usando tres generadores de estadísticas diferentes.
5.10.2.4 Seguridad
cPanel dispone de protección contra virus, los propietarios del sitio pueden incluso prevenir
otras páginas web. Podemos proteger el ancho de banda, disponer de contraseña para proteger
las áreas de un sitio, y establecer cPanel para prohibir automáticamente a un usuario que
comparta una contraseña con una zona restringida de la web.
5.10.2.5 Facilidades para desarrolladores
Podemos ver fácilmente la configuración de un servidor PHP, instalar Ruby Gems, personalizar
páginas de error y detallar cómo se sirve el contenido.
5.10.2.6 Multilingüe
Según la localización o la definición del usuario cPanel permite a los webmasters utilizar cPanel
en árabe, bengalí, portugués brasileño, chino, neerlandés, Inglés, francés, alemán, hindi, ruso,
japonés, portugués o español.
5.11 Seguidores de incidencias
Un seguidor de incidencias administra y mantiene listas de incidencias. Permite crear, actualizar
Figura 5.10: Captura de pantalla de cPanel
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 para
la recogida y seguimiento de incidencias.
Tabla 5.11: Seguidores de incidencias
Orden
uso Aplicación Sitios web Usuarios
Páginas
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 % 40
5.11.1 Get Satisfaction
A grandes rasgos Get Satisfaction nos permite mejorar el soporte de nuestra web y recoger
comentarios. Además permite unificar las interacciones de los clientes a través de nuestra página
web, 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 la
descripción de sus características más destacadas.
5.11.2 Características de Get Satisfaction
5.11.2.1 Moderación
___________________________________________________________________ Get Satisfaction permite gestionar al número de empleados dedicados a la moderación de temas
para 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 presentes
en un tema concreto para el que se ofrece soporte.
___________________________________________________________________ Permite añadir automáticamente empleados para dar soporte a Get Satisfaction.
5.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 de
nuestros productos (añadir, borrar, editar).
___________________________________________________________________ Posibilita configurar las opciones de entrada a través de las que puede acceder nuestra comunidad
Figura 5.11: Captura de pantalla de Get Satisfaction
(como Facebook, Google, etc)
___________________________________________________________________ Permite inicio de sesión único a través de Fastpass
5.11.2.3 Widgets
Get 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ón
Integración con Zendesk, Facebook, Pivotal, Salesforce, Twitter, Parature, CRM, etc.
5.11.2.5 Soporte
Con Get Satisfatction podemos disponer de soporte desde la propia comunidad de Get
Satisfaction, vía email y a través de una cuenta de administración.
5.12 Foros
Un foro es una aplicación web que da soporte a discusiones u opiniones en línea. Hay diferentes
tipos de foros disponibles: exclusivos, de noticias, debate único, abiertos a todos y de preguntas
y respuestas. Para un uso general el foro suele ser un lugar abierto donde cualquiera puede
empezar 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 a
cualquier tema. Todos los mensajes llevan adjunta la foto del autor o la foto por defecto que
vienen en nuestro perfil cuando nos hacernos usuarios del foro.
Respecto a las discursiones estas se pueden ver anidadas, por rama, o presentar los mensajes
más antiguos o los más nuevos primero. Los administradores pueden mover fácilmente los
mensajes y temas de discusión entre distintas partes del foros y en caso de que se adjunten
imá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úmero
de artículos a incluir. Permite búsquedas, seguimiento de mensajes leídos/no leídos en los foros
con resaltado que permite ver todos los mensajes nuevos rápidamente y controlar cómo son
mostrados (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 para
la creación, mantenimiento y gestión de foros.
Tabla 5.12: Foros
Orden
uso Aplicación Sitios web Usuarios
Páginas
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
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 % 50
5.12.1 vBulletin
A grandes rasgos vBulletin es un software para crear foros en internet que ofrece gran capacidad
de 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 pero
ofrece una administración más completa, el phpBB es mas sencillo pero también más cómodo y
ligero. (40)
En la Figura 5.12 se muestra una captura de la aplicación. Ahora vamos a proseguir con la
descripción de sus características más destacadas.
5.12.2 Características de vBulletin
5.12.2.1 Web y base de datos independientes
vBuelletin permite tener la web y la base de datos en servidores distintos. Podemos usar URLs
amigables e integrar de manera automática el mapa del sitio.
5.12.2.2 Administración
vBulletin 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 de
mantenimiento del foro.
Figura 5.12: Captura de pantalla de vBulletin
5.12.2.3 Edición y personalización
Todo el foro puede ser configurado usando un editor WYSIWYG integrado, permiten incluir en
el foro de manera directa o usando código HTML: álbumes de fotos, FAQ, calendario, opciones
de pago para suscriptores (PayPal, WorldPay, NOCHEX and Authorize.net),eventos, encuestas,
videos (Youtube, Vimeo, Hulu, Dailymotion, Google, Metacafe). Además, disponemos de un
potente gestor de plantillas e idiomas.
5.12.2.4 Jerarquía ilimitada
Es posible disponer de varios foros, subforos, sub-subforos, etc; pudiendo configurar un sistema
de permisos por zonas.
5.12.2.5 Miembros
Para gestionar y comunicar con los miembros (dependiendo de nuestro rol) disponemos de listas
de usuarios por reputación, búsquedas avanzadas, visualización de miembros online, lista de
amigos, mensajes privados y perfiles.
5.13 Wikis
Una wiki es una aplicación web que es un sitio web cuyas páginas web pueden ser editadas por
múltiples voluntarios a través del navegador web. Los usuarios pueden crear, modificar o borrar
un mismo texto que comparten. El uso principal de las wikis suele ser el de ofrecer
documentació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 para
la creación, mantenimiento y gestión de wikis.
Tabla 5.13: Wikis
Orden
uso Aplicación Sitios web Usuarios
Páginas
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 % 51
5.13.1 MediaWiki
A grandes rasgos MediaWiki nos permite compartir y generar contenidos de manera
colaborativa. Fue creado y desarrollado para Wikipedia pero su facilidad de uso y funciones han
hecho que sea la herramienta wiki más usada en la actualidad. Aunque no parece en la lista una
opción más potente que MediaWiki sería TikiWiki, las caracteristicas principales de esta última
comparada con MediaWiki son las funciones básicas de los CMS centralizadas para la creación
y gestión de Wikis. (41)
En la Figura 5.13 se muestra una captura de la aplicación. Ahora vamos a proseguir con la
descripción de sus características más destacadas.
5.13.2 Características de MediaWiki
5.13.2.1 Nombres, títulos y encabezados
A diferencia de los wikis clásicos, los nombres de las páginas no tienen porqué estar en
CamelCase, lo que permite tener nombres más naturales. Además, el espacios de nombres
permiten separar páginas de distintos tipos. Así, se puede tener un espacio de nombres para
artículos, otro para plantillas, otro para debates, etc. que el software trata de distinta forma.
5.13.2.2 Páginas de discusión
Cada página del wiki tiene una página de discusión propia, dedicada a hablar de su mejora u
otros fines. Además, existen listas de seguimiento, de tal forma que cada usuario pueda seguir
los cambios en los artículos de su interés.
5.13.2.3 Formulas
MediaWiki dispone de soporte de TeX, para visualizar fórmulas matemáticas. Las fórmulas
pueden mostrarse de varias formas, según las capacidades del navegador.
5.13.2.4 Plantillas y temas
Podemos usar plantillas personalizadas con parámetros y temas o pieles ("skins") por cada
usuario para configurar la parte estética.
5.13.2.5 Plugins
MediaWiki incorpora un sistema de plugins que permite extender fácilmente el software. Los
plugins instalados se listan automáticamente en "Páginas especiales".
5.13.2.6 Usuarios y páginas
Es 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 registro
de más usuarios.
Figura 5.13: Captura de pantalla de MediaWiki
5.13.2.7 Lineas de tiempos y categorías
Podemos crear líneas de tiempos a través de código wiki y usar su sistema de categorías
jerárquico, para crear listados de artículos o de "thumbnails" de imágenes.
5.14 Galerías de imágenes
Una galería de imágenes es una aplicación web que nos permite visualizar aquellas imágenes
que subamos a nuestra web de una manera personalizada y configurable. Las funciones
normales son las de mostrar con algún efecto, a un tamaño determinado, según una calidad y
con 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ágenes
en la web.
Tabla 5.14: Galerías de imágenes
Orden
uso Aplicación Sitios web Usuarios
Páginas
Vistas
% Cantidad % Cantidad % Cantidad
1 Coppermine 100 % 338 100 % 310 100 % 2,998
5.14.1 Coopermine
A grandes rasgos Coopermine Photo Gallery es una galería de fotos avanzada, de fácil uso y con
soporte para otros tipos de archivos (media/datos). La galería puede ser privada, accesible solo a
usuarios registrados o disponible para todos los visitantes de su sitio web. Si el administrador lo
permite, los usuarios pueden subir imágenes a través de su navegador (se crean en el momento
de la subida miniaturas e imágenes de tamaño intermedio), valorarlas, agregar comentarios e
incluso enviar postales. El administrador decide cuáles de las características mencionadas son
accesibles para los usuarios registrados y no registrados. (42)
En la Figura 5.14 se muestra una captura de la aplicación. Ahora vamos a proseguir con la
descripción de sus características más destacadas.
Figura 5.14: Captura de pantalla de Coppermine
5.14.2 Características de Coopermine
5.14.2.1 Usuarios y gestión de imágenes
Los archivos de imagen son almacenados en álbumes y los álbumes pueden estar agrupados en
categorías, las cuales, a su vez, pueden agruparse bajo categorías padre. Coopermine soporta
mú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, escribir
comentarios, 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 visual
Coppermine 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 biblioteca
idiomática. Esto permite que sus usuarios usen la galería en su idioma preferido.
5.14.2.3 Optimización del código
Coppermine 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 espacio
que 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ídeo
Un visualizador de vídeo nos permite integrar en nuestra en nuestra página vídeos para poder
visualizarlos. Existen visualizadores internos o externos, los primeros visualizan los vídeos
alojados en nuestra propia página y los externos hacen uso de la velocidad y capacidad de
hospedaje de servidores específicos de vídeo. Por lo general, para páginas personales o de
pequeña empresa el uso de visualizadores externos será la opción acertada según calidad y
precio cero.
A continuación en la Tabla 5.15, por orden de uso mostramos las aplicaciones más usadas para
la visualización de vídeo a través de servidores externos.
Tabla 5.15: Visualizadores de vídeo
Orden
uso Aplicación Sitios web Usuarios
Páginas
Vistas
% Cantidad % Cantid
ad % Cantidad
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,089
5.15.1 YouTube
A 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 portales
usando 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 la
descripción de sus características más destacadas.
5.15.2 Características de YouTube
5.15.2.1 Inserción de vídeo
Los usuarios pueden insertar vídeos de YouTube en cuentas de MySpace y Facebook, blogs y
otros sitios web donde cualquier persona pueda verlos.
5.15.2.2 Vídeos públicos o privados
Los usuarios pueden elegir entre emitir sus vídeos de forma pública o compartirlos de forma
privada con sus amigos o familiares una vez subidos.
5.15.2.3 Suscripciones
Los usuarios pueden realizar un seguimiento de los nuevos vídeos de sus usuarios favoritos y/o
de canales de reproducción.
5.15.2.4 Grabar de cámara web
Los usuarios que dispongan de software Flash y de una cámara web pueden grabar de forma
instantánea en el sitio vídeos normales o respuestas en vídeo en vez de tener que realizar la
grabación primero y subir después los vídeos.
5.15.2.5 Cuenta de usuario
Podemos detallar una descripción general de nuestra persona, configurar un perfil, personalizar
la página principal de YouTube (tenemos que estar logeados), detallar la calidad de
reproducción de vídeos por defecto, el subtitulado y los comentarios.
5.15.2.6 Compartir actividad
Podemos 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.
Figura 5.15: Captura de pantalla de YouTube
5.15.2.7 Canales
Los canales en YouTube se asemejan a los canales de televisión pudiendo incluir o no
publicidad. Todo el mundo puede tener un canal en YouTube donde presentar sus vídeos
favoritos, promociones, etc.
5.15.2.8 Editor de vídeo
Los usuarios disponen de un sencillo editor de vídeo que permite cortar, fusionar y realizar
transiciones entre muchas de sus funciones. Es posible crear cierta interacción con los vídeos y
disponer de subtitulado en varios idiomas.
5.16 Widgets
Un widget (mini aplicación) nos permite realizar cualquier tipo de aplicación a pequeña escala
sus objetivos son los de dar fácil acceso a funciones frecuentemente usadas y proveer de
información visual.
A continuación en la Tabla 5.16, por orden de uso mostramos las widgets más usados para
añadir a un sitio web.
Tabla 5.16: Widgets
Orden
uso Aplicación Sitios web Usuarios
Páginas
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
4 Google Friend
Connect 9,5 % 8,344 12,5 % 10,445 9,4 % 31,004
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,770
5.16.1 AddThis
A grandes rasgos AddThis es un acceso a una serie de marcadores para poder compartir nuestro
sitio 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 la
descripción de sus características más destacadas.
5.16.2 Características de AddThis
5.16.2.1 Compartición inteligente
La 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 que
comparta la página que se quiere compartir en Facebook.
5.16.2.2 Gran cantidad de servicios para compartir
AddThis tiene la colección de servicios para compartir más extensa que existe permitiendo
compartir nuestro sitio en prácticamente cualquier plataforma sin ningún problema.
5.16.2.3 Multilingüe
AddThis traduce automáticamente a más de 50 lenguas.
5.16.2.4 Privacidad y Seguridad
AddThis soporta SSL/HTTPS.
5.16.2.5 Interfaz personalizable
Podemos cambiar los colores, tamaños, añadir nuestra marca, etc.
5.16.2.6 Estadísticas
Podemos tener todo tipo de estadísticas sobre el contenido que más le interesa a los usuarios
compartir de nuestra página, sitios de interés para hacer comparticiones, etc.
5.16.2.7 Integración con Flash
AddThis 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 EShops
Un eshop o web shop (página para comercio electrónico, del Inglés) nos permite realizar
compras 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 vender
productos por Internet.
Figura 5.16: Captura de pantalla de AddThis
Tabla 5.17: EShops
Orden
uso Aplicación Sitios web Usuarios
Páginas
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 % 1
5.17.1 Magento
A grandes rasgos Magento ofrece una plataforma para el comercio electrónico con múltiples
funciones, flexibilidad y control sobre la presentación y el contenido. Podemos controlar desde
todas 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 la
descripción de sus características más destacadas.
5.17.2 Características de Magento
5.17.2.1 Tienda online con añadidos
Magento permite la gestión de tiendas múltiples en un sólo panel de control, dispone de apoyo
para la localización de los idiomas y divisas.
5.17.2.2 Búsqueda y sindicación
Podemos configurar atributos de motores de búsqueda amigable, como direcciones
personalizables y mapas de sitio generados automáticamente. Además, disponemos de RSS para
nuevos productos.
Figura 5.17: Captura de pantalla de Magento
5.17.2.3 Tarifas
La aplicación permite la fijación de precios diferenciados, lo que permite los descuentos por
cantidad y establecer tarifas en los envíos de las paqueterías más populares en tiempo real.
5.17.2.4 Pago
Magento 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ísticas
Disponemos de una interfaz muy cuidada con un sistema de información de productos que
permite organizarlos y crear estadísticas. Además, para las imágenes de los productos podemos
añadir marcas de agua y hacer una pequeña edición.
5.17.2.6 Web Services API
Magento facilita la integración de software de terceros. El API se agrega para los módulos de
catálogo, clientes y ventas.
5.17.2.7 Productos virtuales
Los vendedores tienen la posibilidad de vender productos electrónicos en sus tiendas, los cuales
no requieren información de envío, mantenimiento e inventario.
5.17.2.8 Opciones de productos definidas por clientes
Esta funcionalidad permite a los clientes definir texto, imágenes, etc. para los productos.
5.17.2.9 Paquetes de Productos
Podemos crear paquetes de productos y así extender aún más las opciones disponibles de
productos en Magento.
5.17.2.10 Soporte de impuestos
Las reglas de impuestos están agregadas al núcleo.
5.18 Conclusiones
5.18.1 Aplicaciones más usadas por categoría
Hemos visto cada una de las categorías generales de aplicaciones existentes para usar en nuestro
sitio web o como nuestro sitio web. En cada una de las categorías hemos vistos las aplicaciones
más usadas, a continuación y a modo de resumen en la Tabla 5.18 mostramos las aplicaciones
más usadas por cada una de las categorías vistas.
Tabla 5.18: Aplicaciones más usadas por categoría
Categoría Aplicación
Analizadores Google Analytics
Blogs WordPress
CAPTCHAs reCAPTCHA
CMS WordPress
Sistemas de comentario Disqus
Administradores de bases de datos phpMyAdmin
Herramientas de documentación phpDocumentor
Editores DreamWeaver
Scripts para fuentes de texto cufon
Paneles para hospedaje web cPanel
Seguidores de incidencias Get Satisfaction
Foros vBulletin
Wikis MediaWiki
Galerías de Imágenes Coppermine
Visualizadores de vídeo YouTube
Widgets AddThis
Comercio electrónico Magento
5.18.2 Aplicaciones más usadas en general
Del conjunto de total de aplicaciones usadas existen ciertas categorías cuyas aplicaciones apenas
se 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 para
mostrar imágenes) (46), NextGEN Gallery (plugin para WordPress) (47), etc. En la Tabla 5.19
mostramos las aplicaciones más usadas a modo general pudiendo haber varias de una misma
categoría.
Tabla 5.19: Aplicaciones más usadas en general
Categoría Aplicación
Analizadores Google Analytics
Blogs, CMSs WordPress
Analizadores Quantcast
Widgets AddThis
CMSs Joomla
Podemos apreciar que las aplicaciones más usadas por los webmaster son aquellas que sirven
para la gestión de contenidos y los analizadores. El primero nos facilita el trabajo de mantener
actualizado nuestro sitio y el segundo nos permite comparar el comportamiento de los usuarios
de forma que podamos mejorar aspectos de nuestra web.
5.18.3 Tendencia
Para la gran mayoría de aplicaciones que ocupan el primer puesto en su categoría la tendencia
suele ir al alza o mantenerse, seguidas en algunos casos muy de cerca por los puestos
consecutivos de la lista. A continuación detallamos aquellas aplicaciones que tienen una
tendencia 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 aplicaciones
más populares por lo general tendrán mayor documentación y soporte, ya que es lo que en ellas
la gente esta interesada y ante una demanda habrá una respuesta. Por otro lado, puede
convenirnos a largo plazo usar aquellas aplicaciones menos populares pero que tengan una
tendencia al alza respecto a otras que estén decayendo de forma que podamos acertar a la hora
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
___________________________________________________________________ Magento
5.18.3.2 Tendencia a mantenerse
___________________________________________________________________ cPanel
___________________________________________________________________ vBulletin
___________________________________________________________________ MediaWiki
5.18.3.3 Tendencia al declive
___________________________________________________________________ phpMyAdmin
___________________________________________________________________ phpDocumentor
___________________________________________________________________ DreamWeaver
___________________________________________________________________ Coppermine
CAPÍTULO 2
PÁGINA 101 DE 172
“Tell me and I forget. Teach me and I remember. Involve me and I learn.”
~ Benjamin Franklin
CAPITULO 6: IMPLEMENTACIÓN
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 construir
nuestra biblioteca. En el Capítulo 4 vimos como administrar y gestionar el contenido, es
decir, la administración y gestión de los libros de nuestra biblioteca. Y en el Capítulo 5
acabamos de ver como facilitarnos ciertas tareas básicas en la construcción y/o
mantenimiento para no tener que hacerlas de cero, es decir, en nuestro símil con la
biblioteca serían el mobiliario, la calefacción, el sistema de seguridad, etc. En este
capítulo vamos a usar todo lo visto anteriormente más aquellas herramientas y atajos
que 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. A
continuación los pasos que seguiremos para la realización de nuestra web:
____________________________________________________________ E
studio de la accesibilidad
____________________________________________________________ B
úsqueda del entorno y herramientas de trabajo adecuados
____________________________________________________________ E
structura de archivos y carpetas para organizar la web
____________________________________________________________ M
apa conceptual para definir y aclarar los contenidos
____________________________________________________________ P
re-maquetación e ideas de diseño
____________________________________________________________ M
aquetación
____________________________________________________________ I
nteracción y creación de animaciones y efectos
____________________________________________________________ C
ontenido dinámico
____________________________________________________________ O
ptimización para la velocidad de carga
I
Capítulo
6
____________________________________________________________ V
erificación de que las tecnologías cumplen el estándar
____________________________________________________________ D
ar de alta nuestro sitio en los principales buscadores
____________________________________________________________ O
ptimización para los motores de búsqueda
____________________________________________________________ E
stadí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
6.1 Accesibilidad
Antes de ponerse a crear una web hay que plantearse a quién va a ir dirigida y que tipo
de recursos vamos a ofrecer en ella. Por lo general, hacer una página web se considera
algo relativamente fácil de abordar pero no siempre es así, habría que puntualizar que
dependiendo del resultado que busquemos puede convertirse en algo tan complejo o tan
simple como cualquiera de nuestras aplicaciones software instaladas en nuestro
ordenador. Desde lo más sencillo que podemos encontrar, algo tan trivial como mostrar
una página en blanco con texto plano, hasta lo más complejo como pueden ser
aplicaciones ofimáticas completas, juegos en 3D en tiempo real, geolocalización, etc.
6.2 Entorno y herramientas de trabajo
6.2.1 Tecnologías
Tal como vimos en capítulos anteriores, existen una gran variedad de tecnologías. Para
este ejemplo vamos a usar las siguiente tecnologías:
____________________________________________________________ X
HTML (contenido)
____________________________________________________________ C
SS (aspecto)
____________________________________________________________ J
avaScript (interacción y animación)
____________________________________________________________ j
Query (interacción y animación)
____________________________________________________________ P
HP (contenido desde el servidor y gestión de formularios)
Para el desarrollo de estás tecnologías vamos a apoyarnos en sus APIs y/o
especificaciones, a través de una página web que las recopila (Figura 6.4). (49)
Figura 6.3: Captura de pantalla de la web que realizaremos 3/3
6.2.2 Editor web
Desde 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 online
como los que ofrecen algunos servicios de hospedaje. El Notepad++ (Figura 6.5) y el
Kate no fueron incluidos en las aplicaciones web como tal ya que se tratan de editores
de texto plano, sin embargo gracias a la flexibilidad y potencia que los caracteriza, a que
son muy ligeros, gratis y ofrecen un control total desde la raíz del código, hemos optado
por uno de ellos al igual que muchos otros desarrolladores web.
Figura 6.4: Captura de pantalla de gotAPI
6.2.3 Aplicaciones
Otras aplicaciones que vamos a usar son el Google Analytics para hacer análisis y
mejorar el servicio, Google Webmasters Tool para optimizar la página web y Google
Maps para incluir la situación en donde se puede adquirir el producto.
6.2.4 Navegadores
Vamos a instalar varios navegadores para ver que la página se renderiza sin problemas
en todos ellos, ya que no podemos caer en la tentación de obligar a nuestros usuarios a
usar 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 local
Para el contenido dinámico o aquellas implementaciones que se ejecutan en el servidor
necesitaremos instalar un servidor local, en nuestro caso usaremos WAMP (Windows) o
LAMP (Linux). (52)
Realmente WAMP/LAMP es el acrónimo usado para describir un sistema de
infraestructura de internet con las siguientes herramientas:
____________________________________________________________ W
indows/Linux, como sistema operativo.
____________________________________________________________ A
pache, como servidor web.
Figura 6.5:
Captura de pantalla de Notepad++
____________________________________________________________ M
ySQL, como gestor de bases de datos.
____________________________________________________________ P
HP (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 poder
gestionar datos en ellas.
6.2.6 Depurador
Para 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).
En el ejemplo de la Figura 6.6. solo tenemos advertencias debido a que el navegador no
reconoce las propiedades de los bordes redondeados especificada en CSS3 (nueva
versión de las hojas de estilo en cascada que se está desarrollando).
6.2.7 Complementos
Algo que tampoco puede faltar a un desarrollador web es el Firebug (Figura 6.7) (53), un
añadido para Firefox que nos permite inspeccionar al detalle el código fuente y el
funcionamiento de nuestro sitio web, localizando e incluso depurando cualquier error o
bug al instante.
La extensión abre una ventana a modo de consola en el navegador, donde muestra los
posibles errores en el código XML, JavaScript o CSS. También podemos inspeccionar
el código HTML de la web examinando objeto por objeto toda la web, repasar el diseño
y echar un vistazo a todos los datos del DOM de nuestro documento web. Básicamente
Figura 6.6:
Captura de pantalla de la consola de errores de Firefox
tenemos la misma funcionalidad que en la consola del apartado anterior pero de forma
más detallada (pestaña “Console” en la Figura 6.7) más las nuevas funciones que hemos
comentado (pestañas: CSS, Scripts, DOM, etc).
Además, es altamente recomendable usar con Firebug: Google Page Speed (54). Page
Speed (Figura 6.8) se añade a Firebug y nos permite evaluar el rendimiento de nuestras
pá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 la
configuración de nuestro servidor web. Estas pruebas se basan en un conjunto de
prá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 para
cada página, así como sugerencias útiles sobre cómo mejorar su rendimiento.
Figura 6.7: Firebug para Firefox
El uso de Page Speed nos permite: explorar nuestro sitio de forma más rápida, mantener
el interés en nuestro sitio de los usuarios de Internet, reducir el ancho de banda y los
costes de alojamiento, y en general mejorar la Web.
Otro complemento para Firefox que nos puede ser de gran utilidad es el servidor FTP
para subir nuestro sitio al servicio de hospedaje contratado. Entre las varias alternativas,
Figura 6.8:
Capturas de sugerencias de PageSpeed al analizar un sitio web
Figura 6.9: Visualización del tiempo de carga de los elementos de nuestro sitio con PageSpeed
concretamente FireFTP (Figura 6.10) es ligero y fácil de usar. (55)
Llegados a este punto, configurado el entorno de trabajo nos podemos poner a
desarrollar la web.
6.3 Archivos y carpetas de una web
Empecemos por el principio, toda página web bien hecha tiende a tener organizado los
tipos de archivo por carpeta. Aunque la estructura, a veces depende del recurso que
usemos, como en este caso tenemos total control vamos a estructurar los tipos de
archivo tal y como se muestra en la Figura 6.11 donde tenemos las carpetas:
____________________________________________________________ e
n: páginas .html o php en inglés
____________________________________________________________ e
s: páginas .html o php en español
____________________________________________________________ c
ss: hojas de estilos .css
____________________________________________________________ j
s: JavaScript .js
____________________________________________________________ i
mg: imágenes y gif animados
____________________________________________________________ p
df: documentos en PDF
La estructura anterior es una posible organización de los elementos de una página web.
Figura
6.10: Captura de pantalla de FireFTP
La página principal de toda web se llama “index”, es el documento que permite acceder
a todo el contenido, el elemento raíz. El resto son carpetas que se encargan de
almacenar el contenido en los distintos idiomas, el estilo, las imágenes, el JavaScript,
los documentos en PDF , etc.
6.4 Mapa conceptual de una web
Sabiendo a qué tipo de personas va ir dirigida la página y que tipo de recursos vamos a
ofrecer es necesario estructurar la web, es decir, organizar las distintas partes del
contenido. Esto nos ayudará a tener una idea global de la magnitud del proyecto, a
organizarnos y obtener una página web de mayor calidad.
Los pasos para obtener una página de calidad en cuanto a contenido y son:
____________________________________________________________ C
rear un sitio con una jerarquía y enlaces de texto claros. Se debe poder acceder a todas
Figura 6.11:
Ejemplo de estructura de archivos y carpetas para un sitio web
Figura 6.12: Mapa conceptual
las páginas desde al menos un enlace de texto estático.
____________________________________________________________ T
enemos que ofrecer a los usuarios un mapa del sitio con enlaces que conduzcan a las
secciones importantes del mismo. Si el mapa del sitio contiene un número de enlaces
demasiado elevado, es preferible dividirlo en varias páginas.
____________________________________________________________ U
na página debe contener un número razonable de enlaces.
____________________________________________________________ D
ebemos crear un sitio útil con mucha información y redactar páginas que describan el
contenido con claridad y exactitud.
____________________________________________________________ A
la vez que creemos el mapa conceptual tenemos que pensar en las palabras que podrían
introducir los usuarios para localizar nuestras páginas y asegurarnos de que esas
palabras estén incluidas en nuestro sitio.
____________________________________________________________ E
s recomendable utilizar texto en lugar de imágenes para mostrar nombres, contenido o
enlaces importantes. El rastreador de Google no reconoce el texto integrado en
imágenes. Si usamos imágenes para contenido textual, deberemos utilizar el atributo
"ALT" para incluir algunas palabras de texto descriptivo.
____________________________________________________________ T
enemos 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.
____________________________________________________________ C
uando estemos creando la jerarquía de páginas del sitio si decidimos utilizar páginas
dinámicas (es decir, si la URL contiene el carácter "?"), hay que tener en cuenta que no
todas las arañas de los motores de búsqueda rastrean tanto páginas dinámicas como
páginas estáticas. Es recomendable que los parámetros sean cortos y reducidos en
número.
Una vez decidida la jerarquía de páginas del sitio, las partes dinámicas y estáticas, y las
descripciones y palabras importantes pasamos a la pre-maquetación.
6.5 Pre-maquetación
Teniendo claro el contenido que queremos ofrecer, pasamos a la parte de maquetación y
presentació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 y
CSS. Por lo general, ese traslado es sencillo, el mayor inconveniente proviene de la
complejidad 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 maquetado
para HTML5 (Figura 6.13). Realmente el maquetado y las nuevas etiquetas que lo
definen 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 del
mañana.
En la Figura 6.14 podemos observar una manera más conceptual de la idea que
buscamos en el estándar HTML5 para nuestro maquetado.
Figura 6.13: Código maquetado tipo HTML5 en HTML
Figura 6.14: Buenas prácticas para el maquetado básico
6.5.1 Propuestas gráficas
En primer lugar es conveniente hacer varias propuestas gráficas (Figura 6.15) del
aspecto 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 para
darnos ideas de diseño, caso de no tener mucha experiencia en el tema.
6.5.2 Distribución del contenido
Con las ideas claras sobre que aspecto queremos conseguir antes de dibujar la página
que buscamos, pasamos a la distribución del contenido. Para la distribución del
contenido vamos a partir de páginas formadas por columnas estándar (entre 1-4), con un
ancho total de la página de 960 pixeles. Se ha elegido 960 pixeles porque hace a nuestro
sitio más versátil a la hora de la visualización en la mayoría de configuraciones de
pantalla. Para la estructura de la página, utilizaremos un framework CSS denominado
960 Grid System. (56)
Al estar utilizando la estructura de cajas de 960 Grid System tendremos que ajustarnos a
los 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 elementos
principales de la estructura que estamos buscando (Figura 6.16). Los elementos que
forman dicha estructura se detallan a continuación pudiendo observarlo en mayor
detalle en el dibujo de nuestra página web en la Figura 6.17. Es conveniente que
tengamos las ideas claras desde el principio para que nos centremos mejor en la parte
creativa y de interacción con el usuario.
____________________________________________________________ M
enú superior. Corresponde a la barra superior negra con degradado que contiene la parte
de navegación y opciones de la interfaz, lo forman: Navegación, Idiomas, Vista y
Powered by.
____________________________________________________________ N
avegación. Aparece de derecha a izquierda, permite la navegación por la web, consta de
enlaces a las páginas principales de Inicio, Producto, Empresa y Contacto.
____________________________________________________________ I
diomas. Hace referencia al número de lenguas en los que está disponible la página.
Figura 6.15: Propuestas de aspecto
____________________________________________________________ V
ista. Nos permite conmutar entre 2 tipos de vista: normal o compacta.
____________________________________________________________ P
owered by. Enlace principal a la página de inicio y a la empresa que desarrolla el
producto.
____________________________________________________________ L
ogo. Hace referencia a la página principal y contiene el logo del producto, a la vez que
una frase resumen de lo que hace. Esta formado por una textura gris que se repite.
____________________________________________________________ S
ubmenú. Corresponde a la barra gris consecutiva al logo, es un menú adicional para
navegar a través de la página Producto.
____________________________________________________________ P
aneles, formado por 2 subpaneles: Contenido a la izquierda que contiene la mayoría de
la información y Destacar.
____________________________________________________________ C
ontenido, panel principal encargado de albergar el grosor de contenido de la página.
____________________________________________________________ D
estacar, muestra información puntual del producto y enlaza al lugar interno de la página
donde se encuentra.
____________________________________________________________ F
ondo. Se refiere al fondo azul animado de la página.
____________________________________________________________ M
enú Inferior. Corresponde a la barra inferior negra con degradado que contiene la misma
Figura 6.16: Esquema de maquetado de nuestra web
navegación que aparecía en el Menú Superior más el Copyright, y en logo de validación
de XHTML.
____________________________________________________________ I
r Arriba. Es un botón que aparece en la parte de abajo de la página que nos permite
volver a la parte superior. Solo aparece cuando es necesario.
6.5.3 Dibujo de la web en un editor de imágenes
Teniendo el esquema del maquetado y habiendo definido las partes internas ya podemos dibujar
la 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 con
facilidad su información para poder incluirla en el CSS:
___________________________________________________________________ Los logos, iconos, dibujos, esquemas complejos, estados de botones, etc; los exportaremos tal
cual al formato apropiado (png, jpg o gif)
___________________________________________________________________ Los tipos de letra, colores, posiciones de los elementos y algún que otro efecto podremos pasarlo
directamente copiando la información tal cual aparece en nuestro editor de imágenes como
puede ser Gimp a nuestro editor de texto avanzado como puede ser Kate.
6.6 Maquetación
Como hemos comentado en el apartado anterior, el siguiente paso es trasladar la imagen pintada
en Gimp (57) o Photohop (58) a nuestra página web.
6.6.1 Cimientos
Antes de empezar a escribir código en nuestro editor deberemos asegurarnos que el tipo de
codificación es UTF-8 sin BOM:
___________________________________________________________________ El BOM es una marca que se introduce al principio de un documento para indicar el tipo de
codificación que usamos, pero que actualmente está en desuso debido a que puede darnos
incompatibilidades con algunos navegadores y herramientas (por ejemplo la compresión gzip
Figura 6.17: Imagen de la web con las distintas partes marcadas
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 de
caracteres. Por otro lado, Unicode dispone de todos los caracteres que existen en todas las
lenguas del mundo. De esta forma, si usamos Unicode para nuestra página, todos los usuarios de
cualquier región o idioma podrán acceder sin problemas. Unicode es independiente de la
plataforma, del programa y del sistema operativo y viene por defecto en Linux. Así que
codificaremos 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 el
tipo de documento e indicar la codificación (Código 6.1), luego enlazamos a los cimientos de la
maquetació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 algunos
navegadores -->
<link rel="stylesheet" href="960.css"><!-- Clases y identificadores para las columnas y cajas de
960 Grid System -->
</head>
6.6.2 Cuerpo base
Lo siguiente es crear la estructura que habíamos desarrollado en el editor de imágenes en el
cuerpo 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áximo
de 12 columnas básicamente y los “grid” que serán las cajas que irán en la fila ocupando un
ancho 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 de
caja -->
<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-->
<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 el
max -->
<!-- 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) a
los 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 refieren
a la caja concreta. Por ejemplo, para nuestro contenedor de 12 (Figura 6.18) columnas
tendríamos los siguientes casos de combinaciones de cajas o cuadriculas (grid) posibles.
Figura 6.18:
Contenedor de 12 columnas (máximo)
6.6.3 Añadiendo más detalles al estilo de la web
Aunque es una primera implementación se han declarado ya algunos estilos. Siempre
incluiremos el CSS de alguna de las 3 formas que existen según nos convenga. Una de las
principales características de CSS es su flexibilidad y las diferentes opciones que ofrece para
realizar una misma tarea. Las tres opciones existentes para incluir CSS en un documento HTML
se detallan con nuestro ejemplo a continuación:
6.6.3.1 Incluir CSS en el mismo documento HTML
Los estilos se definen en una zona específica del propio documento HTML (Código 6.3). Se
emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del
documento (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 externo
En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas
HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo
simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS que sean
necesarios 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 HTML
El ú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 pero
puede 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 del
mismo tipo siempre prevalece la última que se carga y en caso de tener declaraciones distintas
se sumarían una a una formando una nueva regla CSS. De la definición anterior viene lo de “en
cascada” porque se van superponiendo prevaleciendo la última. Para que entendamos mejor el
concepto de cascada veamos el Código . En este código la regala de la clase “grid_5” tenía una
declaración con la propiedad del margen puesta a 0 pixeles, al ponerle en siguiente lugar 4
pixeles estamos sustituyendo una declaración por otra.
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 siguiente
ejemplo de código (Código 6.8) definimos y explicamos algunas de las reglas de nuestra hoja de
estilos: “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, fuente
de
texto por defecto vernanda y sans-serif por si no existiera la fuente anterior en el ordenador
donde 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 por
ejemplo:
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 transparencia
que 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 de
linea de
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 que
tenga 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 del
elemento 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 una
imagen que se repite de fondo y se adapta a la pantalla, una posición en la página, un tipo de
visualizació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 pretende
que se capte únicamente la idea básica para poder implementar páginas web en general.
6.7 Interacción, animación y efectos (JS)
En este apartado vamos a comentar algunas de las interacciones creadas con JavaScript para
facilitar la lectura del contenido, animar algunos objetos, realizar algunos efectos sobre
imágenes, etc.
6.7.1 Fecha para el copyright
Buscamos que se inserte automáticamente el año actual al lado del texto del copyright (Figura
6.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 empezamos
function 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
}
Figura 6.19:
Año de fecha actual
6.7.2 Efecto de iluminado y apagado para los idiomas
Buscamos un efecto de iluminación para el idioma (Figura 6.20).
Para todos los elementos de la clase “fade” introducimos el efecto de apagado suave cuando el
rató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 hacer
solo
// 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 los
elementos de
// la clase
$(".fade").hover(function(){ // cuando el cursor del ratón esté encima de los elementos de la
clase
$(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
Buscamos ocultar ciertas partes para pantallas pequeñas (6.22).
Figura 6.20: Idioma apagado e
idioma activo
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 pixeles
Para aquellas configuraciones de pantalla que tengan una altura menor a 960 pixeles: ocultamos
el 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 la
clase
$(".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 otra
clase
$(".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 en
un
// 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 hacia
abajo 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 el
usuario puede conmutar entre los dos tipos de vista en cualquier momento usando el botón con
apariencia de ojo.
6.7.4 Sustitución de imagen por animación GIF
Buscamos 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ágenes
consecutivas formando un movimiento). Por defecto se visualizará la imagen fija creando el
efecto 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 la
imagen por
// 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 el
atributo
// fuente
});
});
6.7.5 Navegación animada en el menú
Buscamos una cuadrado azul con bordes redondeados que permanezca en el fondo del nombre
de la página en la que nos encontramos (dentro de nuestro sitio). Además, dicho recuadro se
moverá de forma continua y adaptándose en tamaño al situarnos en las otras partes de la
navegación (Figura 6.23).
Para este caso vamos a usar un plugin hecho en JavaScript que nos permite conseguir el efecto
deseado (Código 6.13). Bastará con cambiar los parámetros para el tipo y la velocidad (fx e
speed, 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 del
CSS, es decir, que el hecho de tener un recuadro azul con bordes redondeados es porque se ha
especificado 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 por
medio de jQuery. Con esto se pretende que se capte únicamente la idea básica de algunas cosas
que se pueden hacer a la hora de implementar nuestra web.
Figura 6.23: Efecto de
desplazamiento del recuadro azul con bordes redondeados
6.8 Contenido dinámico
En este apartado vamos a comentar una de las partes de la página web que se ha integrado en el
servidor. El ejemplo es muy similar al que vimos en el apartado de PHP en el capítulo de
Tecnologías (3.15).
6.8.1 Formulario de contacto
Hemos desarrollado un formulario (Figura 6.24) para que los visitantes de la web puedan
solicitar información sobre los productos ofrecidos.
Los 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 el
formulario, 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 = '[email protected]'; // indicamos el e-mail al que se mandará el
formulario
if (isset ($_POST['enviar'])) { // si existe la variable $_POST['enviar'], es decir, se guardaron los
datos
$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>
Figura 6.24: Formulario de contacto
<textarea name="mensaje" cols="31" rows="5"></textarea>
<label for="enviar">
<input name="enviar" value="Enviar consulta" type="submit"></label>
</form>';
?>
6.9 Optimizando la web
Una vez escrito todo el contenido, maquetada la web y definido todos los estilos podemos usar
PageSpeed (Figura 6.8) para optimizar la web. Bastará con ejecutar el complemento de Firebug
en la página que queremos analizar. Por lo general, para optimizar cualquier página web se
recomienda seguir las siguientes prácticas.
6.9.1 Eliminar enlaces rotos
Si eliminamos los "enlaces rotos", esto es, las solicitudes que se traducen en respuestas 404/410,
evitamos desperdiciarlas.
6.9.2 Eliminar CSS desde JS
Las expresiones CSS o propiedades dinámicas consisten en expresiones javascript incluidas en
valores de propiedades CSS. Su uso incide en el rendimiento de la renderización. Esta regla se
aplica a los usuarios de Internet Explorer < 8. puesto que en la versión 8 están deprecadas.
6.9.3 Combinar CSS externo
El 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 archivo
externo (Código 6.16), pero puede convenirnos usar alguno más en caso de tener páginas que
apenas compartan reglas de estilo. Incluir CSS que no es necesario también ralentiza la página
tenemos que buscar un compromiso entre cantidad de reglas no comunes y máximo de archivos
entre 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 externo
Combinar scripts externos en la menor cantidad de archivos posibles, puesto que retrasan la
descarga 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 mismo
archivo -->
6.9.5 JS no necesario al final del sitio
Retrasar 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, y
aceleran la ejecución y el tiempo de visualización. Así que cogeremos el JavaScript del enlace
externo 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
<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ón
Utilizar la compresión GZIP es una gran mejora que podemos realizar para acelerar la descarga
de nuestras webs. En las imágenes y PDF no se utilizará GZIP ya que estos ya están
comprimidos. Con esta compresión podríamos reducir el peso entre un 70% y 90%, es muy
interesante para reducir el tiempo de descarga y el tráfico mensual de nuestro hosting (servicio
de alojamiento web).
La mayoría de navegadores soportan GZIP, y los que no, cargan la página sin compresión con lo
que no tendremos ningún problema con navegadores antiguos.
Para activar GZIP en servidores Apache, debemos de tener el módulo mod_deflate o mod_gzip
y añadir al archivo .htaccess (nombre por defecto del archivo de configuración de directorios de
Apache) 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ón
php_value zlib.output_compression_level 2 # indicamos nivel de compresión
También lo podemos hacer en PHP directamente incluyendo en los archivos .php al inicio del
có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 en
PHP ya que se nos denegó el acceso a al “.htaccess” durante la realización de la
implementación. El hecho de usar tanto la primera como la segunda opción nos obliga a cambiar
la extensión de nuestro archivos de “.html” a “.php”, además si estamos haciendo pruebas en
local necesitaremos configurar un servidor para poder visualizar las páginas. Una buena
recomendació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)
6.9.7 Indicar fecha de expiración
Indicar 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 a
descargarlos, 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 cabeceras
Habilitando la caché en la cabecera http (Código 6.24) para recursos estáticos, permite que al
explorador realizar las descargas de dichos recursos desde un servidor proxy (intermediario
entre cliente y servidor final) cercano, en lugar de un servidor de origen remoto. Por defecto si
no indicamos nada la cache está activa.
Código 6.24: Cache no habilitada
<meta http-equiv="Pragma" content="no-cache" />
6.9.9 Compactar CSS
Compactar las hojas de estilo CSS puede ahorrarnos algunos bytes que pueden parecer
insignificantes pero que no lo son tanto cuando comenzamos a multiplicar por el numero de
visitantes.
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}...
Figura 6.25: Resultado de compresión gzip
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 los
saltos de linea que pudieran haber quedado usamos CSS Compressor de Arantius (62). Existen
una gran variedad de compresores nos hemos decidido por estos por la cantidad de opciones e
interfaz de la que disponen.
En el primer paso (CSS Compressor de CSS Drive) conseguimos una compresión del 19%.
___________________________________________________________________ Original size: 19137 bytes
___________________________________________________________________ Compressed size: 15594 bytes
___________________________________________________________________ S
Figura 6.26: CSS Drive - CSS Compressor (Advanced Mode)
avings: 3543 bytes (19%)
En el segundo y último paso (CSS Compressor de Arantius) conseguimos reducir aún más la
compresió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 HTML
Compactar el código HTML, incluyendo el JavaScript y css embebidos puede ahorrar, del
mismo modo, algunos bytes de datos, velocidad de descarga y tiempo de ejecución. No
obstante, puesto que en el HTML tenemos solo el contenido (como buena web semántica) para
este caso vamos a dejarlo como lo tenemos. Si quisiéramos comprimirla lo haríamos de igual
forma que hicimos con el CSS.
6.9.11 Compactar JS
Similar a los anteriores, compactar correctamente nuestras bibliotecas JavaScript se traduce
directamente no solo en un ahorro de transferencia de archivos sino también en mejores tiempos
de carga, siguiendo con la misma idea, cuanto menos pesa nuestro sitio mas rápido podrá ser
descargado.
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 pero
además podemos codificar unas variables por otras más cortas y pasar de texto plano (ASCII) a
base 64 (Código 6.28). Ganamos en compresión y protección de nuestros algoritmos en
JavaScript (aunque es posible recuperarlo, mientras mayor sea el código más difícil será su
recuperació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"){15
G=D.2T(E);
Para hacerlo de manera automática usamos otra herramienta online denominada Online
JavaScript Compressor (Figura 6.27), el nombre no es muy original pero nos facilita de una
manera eficaz la compresión que queremos. (63)
6.9.12 Minimizar el tamaño de las respuestas
Manteniendo las cookies (variables en el navegador) y las cabeceras de las peticiones lo más
reducidas posibles aseguramos que una petición http pueda ser incluida en un solo paquete. Sin
embargo el único caso en el que tendremos control sobre las peticiones HTTP es cuando
realizamos 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 HTTP
MÉTODO VERSIÓN URL<crlf>
ENCABEZADO: Valor<crlf>
. . . ENCABEZADO: Valor<crlf>
Línea en blanco <crlf>
CUERPO DE LA SOLICITUD
Un posible ejemplo de solicitud HTTP sería el siguiente (Código 6.30).
Código 6.30: Solicitud HTTP
GET 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 embargo
para nuestra implementación no vamos a hacer peticiones HTTP ya que no usaremos AJAX.
Figura 6.27: JavaScript Compressor
6.9.13 Reducir DNS
Reducir 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, servidores
con asociaciones de números de identificación de sitios web “66.249.92.104” al texto que
podemos entender “www.google.com”) que el explorador debe realizar. Para nuestro caso solo
tendremos 3 nombres asociados: el del sitio en sí, el de Google Maps y el del sello de validación
de 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á ventajoso
puesto que la velocidad de nuestro servidor está limitada y puede convenirnos cargar de manera
convinada elementos alojados en fuentes externas (imágenes, vídeos, js, etc) a la vez que
cargamos la otra parte de elementos desde nuestro servidor. Esto lo veremos más adelante con
Descargas paralelas.
6.9.14 Minimizar redirecciones
Minimizar redirecciones HTTP desde una URL a otra, reduce el tiempo de espera para los
usuarios. No obstante no es nuestro caso (sitio nuevo), sin embargo esto puede ocurrir al
cambiar de servidor ya que es necesario para no perder el posicionamiento en buscadores (entre
otros mucho factores) redireccionar desde el servidor anterior al nuevo hasta que los
rastreadores de Google, Yahoo, Ask, etc; hayan indexado el nuevo lugar de la página. Si no
hacemos esto corremos el riesgo de que nos saquen de la lista o de que perdamos puntuaciones
al intentar dar de alta una página que ya estaba registrada en los buscadores.
6.9.15 Optimizar imágenes
El formato y la compresión correctas pueden ahorrar muchos bytes de información. Pero no es
necesario que nos molestemos en calcularlo porque Page Speed ya lo hace por nosotros (Figura
6.28), puesto que lleva a cabo un análisis y no solo te informa del ahorro en bytes que podremos
obtener, sino que también nos optimiza la imagen permitiendo su visualización y descarga.
6.9.16 Optimizar el orden del CSS y el JS
Ordenar las hojas de estilo y los scripts externos, permite mejor paralelización de las descargas
y acelera el tiempo de visualización del explorador. La recomendación es incluir primero los
estilos 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>
Figura 6.28: Optimización de imágenes
6.9.17 Descargas paralelas
Servir recursos desde cuatro o cinco nombres de dominio diferentes, aumenta la paralelización
de descargas. La paralización ya lo vimos con anterioridad y no solo puede resultar beneficiosa
para la aumentar la velocidad de descarga sino que permite ahorrarnos dinero si nuestro servidor
nos cobra por tasa máxima de descarga (los hospedajes en España tienen limite de ancho de
banda los hospedajes de Norte América no). Una buena recomendación para páginas con
muchos 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 cabecera
Debemos colocar los estilos en la cabecera de nuestro html, dentro del <head></head> del
documento y es mas eficiente utilizar la etiqueta <link> que la inclusión vía @import. Esta
recomendación influye en el tiempo de renderizado de la página. Esto lo hicimos con al empezar
a trabajar con el CSS, por lo general, las buenas prácticas y el cumplimiento de los estándares
web hará que la optimización sea mínima en la fase final.
6.9.19 Eliminar CSS no usado
Este punto indica que tenemos estilos en el css que no usamos, pudiendo acceder al catálogo de
los mismos. Si estuviésemos en el entorno como el de PMD (analizador del código fuente de
Java) podríamos decir que está regla es controvertida, puesto que si tenemos todos los estilos
del 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 única
Es importante servir un recurso desde una URL única, para eliminar los bytes duplicados de
descarga. 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 segunda
esté cacheada. Esto lo cumplimos pues estamos haciendo referencia a nuestros recursos según
en la jerarquía de carpetas que nos encontramos (html, es, en, etc).
6.9.21 Escalado adecuado para las imágenes
El redimensionado correcto de las imágenes puede ahorrar muchos bytes. No debemos solicitar
una imagen de tamaño superior al que queremos mostrar, a no ser que nos encontremos en la
situación de la recomendación anterior. Las redimensiones las hacemos con nuestro editor de
imágenes preferido.
6.9.22 Solo cookies en donde sea necesario
Los recursos estáticos como imágenes, js y css, no deben ir acompañados de cookies, puesto
que no hay interacciones del usuario sobre los mismos. Podemos reducir la latencia sirviendo
dichos recursos desde un dominio que no sirva cookies. No hemos necesitado almacenar ningún
tipo de variable en el navegador por lo tanto no hemos hecho uso de cookies.
6.9.23 Set de caracteres en la cabecera
El set de caracteres para documentos para XML y HTML es Unicode (también conocido como
ISO 10646). Esto significa que los navegadores HTML y los procesadores XML deben operar
como si utilizaran Unicode internamente. Pero esto no significa que los documentos deban
transmitirse en Unicode. Siempre que el cliente y el servidor se pongan de acuerdo acerca de la
codificació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ódigo
6.32) permite al navegador comenzar a ejecutar los scripts inmediatamente ya que no necesita
calcular la codificación para estos.
Código 6.32: Set de caracteres en la cabecera
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
6.9.24 Especificar el tamaño de las imágenes
Especificar las dimensiones de las imágenes utilizando height y width facilita un renderizado
más rápido, puesto que elimina la necesidad de repintar la página.
6.9.25 Selectores CSS eficientes
Hay 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 de
nodos. Está desaconsejado el uso de selectores universales (*), de etiquetas como claves, y de
adyacencia. No obstante para el formateado inicial de la página hemos usado selectores
universales para quitar las particularidades de algunos navegadores.
6.10 Verificando las tecnologías
Una 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 no
necesitamos 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 para
el cual estamos estamos definiendo nuestro sitio, simplemente que encarga de mostrar si hay
errores de HTML y CSS en general pero no para XHTML 1.0 estricto por ejemplo ya que
existen una gran variedad de tipos de marcado. Los problemas derivados de la heteregenoidad
de la web desde sus inicios ha dejado de manifiesto la necesidad de tener un estándar que
permita una programación e interpretación aplicable a cualquier plataforma, navegador y
usuario. De esto modo, el Consorcio World Wide Web (W3C por sus siglas en inglés) fundador
de la WWW ha venido sacando una serie de estándares para la maquetación correcta de una web
en marcado de texto.
6.10.1 Verificación del HTML
Los estándares HTML los podemos encontrar en la página oficial de W3C, además de
herramientas muy útiles para verificar que nuestro sitio se encuentra dentro de los estándares de
la marcado (Figura 6.29). (64)
Esta 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ón
automática y del tipo de documento. Una vez introducido y validado nuestro código (Figura
6.30), nos mostrará los errores y su ubicación con lo que podremos iniciar la corrección para
llevar a nuestro sitio dentro del estándar web.
En una primera validación para nuestro caso habíamos pasado satisfactoriamente el estándar
para XHTML 1.0 estricto (Código 6.33), pero puesto que como veremos en el tema de
tecnologías: el paso de XHTML 1.0 estricto a HTML 5 es inmediato; básicamente hemos hecho
los cambios oportunos para que nuestro sitio cumpliera la nueva versión del estándar del
marcado de texto (Código 6.34). No obtenemos errores, únicamente un aviso de que la
herramienta de verificación para HTML 5 es experimental. Sin embargo cabe destacar que no
estamos aprovechando prácticamente ninguna de las ventajas del HTML 5, solo hemos
cambiado 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
Figura 6.29:
Verificación para el tipo de documento
<!DOCTYPE html>
Una vez validado el sitio, el Validador W3C nos ofrece la posibilidad de añadir a nuestra página
un sello que certifica la estandarización de nuestra web. El sello dispone de un enlace que
permite 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 CSS
Para el caso de validación del estilo del documento el proceso sería igual solo que disponemos
de opciones especificas para el estilo (Figura 6.31), como por ejemplo el medio para el que se
renderizan. (65)
En nuestro caso cumplimos con el estándar CSS 2.1, únicamente tenemos errores debido al uso
Figura 6.30: Sello que certifica que nuestra web cumple el estándar
XHTML 1.0 estricto
Figura 6.31:
Verificación para el tipo de estilo
de algunas propiedades propias de los navegadores (Código 6.35). Concretamente hacemos uso
de los bordes redondeados, propiedad especificada en CSS 3 pero que algunos navegadores web
implementaron mientras salía el estándar. Hay que tener en cuenta de que si hacemos uso de una
propiedad para el estilo de un navegador deberíamos buscar una igual o similar en el resto de
navegadores para que la página se vea igual independientemente. Además también incluimos la
propia 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.1
border-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 se
pasará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 cumplimiento
de los estándares en los inicios de Internet. Motores como Gecko (Firefox) y Trends (Internet
Explorer) con un pasado común (Nestcape)y Presto (Opera) mantienen la posibilidad de
renderizar estás páginas fueras del estándar, concretamente para FF e IE el modo de renderizado
se denomina “quirks mode” (modo raro). Sin embargo, otros motores más modernos como
Webkit (Chrome) se limitan básicamente al cumplimento del código permitiendo disponer de un
motor más potente y ligero y con un código más limpio.
6.11 Dando de alta nuestro sitio en los buscadores
En este momento vamos a dar de alta nuestro sitio en los buscadores más importantes para que
salga 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 “sugerir
dirección”, es decir manualmente (Figura 6.32) y mediante enlaces de páginas ya indexadas que
apuntan a nuestro
sitio. (66)
Sugerir un sitio a
un motor de
búsqueda tiene el
Figura 6.32: Sugerir un sitio a Google
inconveniente de que puede demorar varios meses. Por otra parte, es mucho mas efectivo (por
su velocidad) para aparecer en los buscadores más importantes, recibir un link (hipervínculo o
enlace) de algún sitio que ya esté en los buscadores. De esta forma cuando Google, Yahoo o
MSN Search visiten dicha web seguirán el link hacia nuestro sitio y lo almacenarán en sus bases
de 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 en
indexarse, 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 Visibilidad
Sugerido nuestro sitio a los principales buscadores de Internet vamos a añadir una serie de
aplicaciones para nuestro sitio mientras lo dan de alta. En este primer caso usaremos Google
Webmasters Tools (67) que nos brinda la posibilidad de adaptar y configurar la visibilidad de
nuestro sitio en Internet. Aunque influye directamente sobre las directrices de Google, las
optimizaciones que haremos también valdrán para el resto de buscadores (siempre que hayamos
dado de alta nuestro sitio en ellos también). Estamos hablando de la optimización para motores
de búsqueda común mente conocida como SEO.
Google Webmasters Tools, aunque es una aplicación web, no la vimos dentro del capítulo de
aplicaciones simplemente porque su carácter no es añadir funcionalidad a la propia web sino
mejorarla optimizándola para su visibilidad, no es una aplicación que forma parte de nuestro
sitio 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 crear
una cuenta de Google y añadir un sitio (lógicamente tendremos que ser el webmaster). Los
pasos 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 es
mediante meta tag (Figura 6.33). Lo copiamos y añadimos a la cabecera de nuestra página
principal (index). Cuando este listo hacemos clic en “Verificar”
Una vez verificado nuestro sitio podremos acceder a un gran número de herramientas que nos
ofrece 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)
Figura 6.33: Demostrar la propiedad del sitio
Por defecto se nos muestra el panel del sitio (Figura 6.34), que no es más que un resumen de los
datos más relevantes: errores de rastreo (páginas no encontradas), importancia de las palabras
claves 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 sitio
Dentro de “Información del sitio” (Figura 6.35) tenemos las herramientas básicas para informar
a Google sobre nuestra web. En este apartado y por lo general con sitios nuevos que creemos
será fundamental el uso del “Sitemaps” para que se indexe el mapa del sitio y “Acceso de
rastreadores” 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.34: Panel de Google Webmaster Tools
Figura 6.35:
Herramientas de “Información del sitio”
6.12.1.1 Sitemap
En el apartado de información del sitio lo primero que haremos es enviar un Sitemap para
informar a Google acerca de las páginas de su sitio que no podríamos detectar de otro modo. Un
Sitemap es un fichero normalmente con extensión xml o gz (gzip) que se aloja en el directorio
raíz de nuestra web y contiene información para el motor de búsqueda de las diferentes páginas
que componen todo nuestro sitio web. A diferencia de un Mapa web, este no es visible para
nuestros visitantes tan solo para los buscadores. Para generarlo vamos a usar una herramienta
online (Figura 6.36) aunque también es muy sencillo hacerlo manualmente. Por lo general
usaremos la herramienta online (68) y luego haremos pequeños cambios manuales.
El Sitemap que nos devuelve (Código 6.36) hace referencia a cada una de las páginas de nuestro
sitio con su dirección, periodicidad en los cambios y prioridad o importancia respecto al resto de
pá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>
−
Figura 6.36: Generador XML de Sitemaps
<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 lo
enviamos a Google (Wembasters Tools / Información del sitio / Sitemaps)
6.12.1.2 Acceso de rastreadores
Continuando en este mismo apartado de información del sitio vamos a configurar el archivo
robots. El archivo robots.txt (Código 6.37) es un fichero de texto que dicta unas
recomendaciones para los robores de los motores de búsqueda encargados de indexar las
páginas (conocidos también como rastreadores, arañas, etc). Para nuestro caso lo hemos
configurado 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 todos
User-agent: *
# En principio permitimos todo para después concretar que partes denegamos
Allow: /
# Partes prohibidas para las arañas (rastreadores)
Disallow: /es/data/
Disallow: /es/data/contact.php
Disallow: /en/data/
Disallow: /en/data/contact.php
# Donde se encuentra nuestro sitemap
Sitemap: http://www.hermesmarinas.com/sitemap.xml
El 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 hacer
pruebas de funcionamiento. Tenemos que ponerlo en la raíz de nuestro sitio (al igual que el
Sitemap). En este caso no tenemos la opción de enviarlo se detectará automáticamente, pero
para 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 hicimos
en el apartado anterior. El robots.txt tiene que ir siempre en el directorio raíz del sitio, el
Sitemaps nos obligatorio que este alojado allí pero si altamente recomendable.
6.12.1.3 Enlaces del sitio
Los enlaces del sitio son enlaces a las zonas internas de nuestro sitio. No todos los sitios tienen
enlaces del sitio, por lo general lo incorporan aquellas web con un volumen tal de páginas que
Google cree oportuno mostrarla en la indexación por zonas (Figura 6.37) para facilitarle el
acceso al usuario. Google genera estos enlaces automáticamente, pero podemos eliminarlos si lo
deseamos. Para nuestro caso al no ser lo suficientemente grande el sitio no tenemos enlaces
internos a nuestro sitio.
6.12.1.4 Cambio de dirección
Este herramienta es útil si estamos pensado en cambiar el sitio a un dominio nuevo, utilizando
está herramienta informamos a Google de nuestra URL nueva. Esto nos permitirá actualizar
nuestro índice (indexación) más rápidamente y facilitará la transición a los usuarios de nuestro
sitio. No lo vamos a usar ya que acabamos de dar de alta la página en un buen servidor de
hospedaje y no ha pasado el tiempo suficiente como para estudiar nuevas ofertas de alojamiento.
6.12.1.5 Configuración
Esta herramienta permite indicar la zona geográfica, el dominio preferido para nuestro sitio y la
frecuencia 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 los
resultados de búsqueda y a mejorar estos resultados en las consultas geográficas. Esta función se
puede 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 una
regió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 que
nuestro sitio no esta dirigido a ese público concreto.
___________________________________________________________________ Dominio preferido. El dominio preferido es aquel que nos gustaría utilizar para indexar las
páginas de nuestro sitio web. Si especificamos nuestro dominio preferido como
http://www.nuestrositioweb.es y Google detecta un enlace a nuestro sitio en el formato
http://nuestrositioweb.es, lo tratará como http://www.nuestrositioweb.es . Asimismo, Google
tendrá 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úmero
de 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 el
sitio) 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 frecuencia
de rastreo de nuestrositoweb.com, se incluirá todo el dominio, por lo que no tendremos que
establecer 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 de
rastreo diferente para un subdominio determinado con respecto al resto del dominio). El nuevo
valor que indiquemos será válido durante los próximos 90 días. Para nuestro caso vamos a dejar
la opción de recomendada, es decir, dejamos que Google establezca la frecuencia de rastreo que
cree apropiada.
6.12.2 Su sitio en la web
Dentro de “Su sitio en la web” (Figura 6.38) tenemos las herramientas básicas para conocer a
grandes rasgos la importancia de nuestro sitio en Internet. Este apartado toma mayor
Figura 6.37: Sitio con enlaces internos en las búsquedas de Google
importancia una vez que la página ha sido indexada y rastreada en varias ocasiones ya que nos
muestras estadísticas, evoluciones, etc.
6.12.2.1 Consultas de búsquedas
Este herramienta muestras aquellas búsquedas, palabras y combinaciones de palabras que han
llevado 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 sitio
Esta 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 nuestro
sitio.
6.12.2.3 Palabras clave
Esta herramienta muestra las palabras clave más habituales que ha encontrado Google al rastrear
nuestro sitio. Estas palabras clave deben representar el tema principal del sitio. Para nuestro
caso las palabras claves coinciden con la temática de nuestro sitio. En caso contrario, podríamos
enfocar o redactar el contenido de otra forma para conseguir las palabras que más definen
nuestro sito.
6.12.2.4 Enlaces internos
Este herramienta nos ayuda a conocer que páginas de nuestro sitio apuntan a otras páginas de
nuestro propio sitio.
6.12.2.5 Estadísticas de suscriptor
Un suscriptor es un usuario que está fidelizado a nuestro sitio, es decir, dispone de una
dispositivo (semilla de suscriptor, feed) que le avisarle de cuando se ha cambiado algo en la
página para que vuelva a visitarla. Para nuestro caso no tenemos ningún tipo de “feed” para que
los usuarios se puedan suscribir a nuestro sitio, por lo que, no nos aparece nada en está
herramienta.
6.12.3 Diagnósticos
Dentro de “Diagnósticos” (Figura 6.39) tenemos las herramientas básicas para conocer a
grandes rasgos la importancia de nuestro sitio en Internet. Este apartado toma mayor
importancia una vez que la página ha sido indexada y rastreada en varias ocasiones ya que nos
muestras estadísticas, evoluciones, etc.
Figura 6.38:
Herramientas de “Su sitio en la web”
6.12.3.1 Software malintencionado
Esta herramienta muestras si tenemos albergado en nuestro sitio de manera conciente o
inconciente software malintencionado, tales como spam, virus, etc; que pudiera extenderse a
aquellos usuarios que visiten nuestra sitio. Para nuestro caso no aparece ningún software
malintencionado como era de esperar.
6.12.3.2 Errores de rastreo
Esta herramienta muestra los enlaces rotos a nuestro sitio. Estos enlaces rotos pueden ser
enlaces mal escritos en el código HTML o páginas, archivos, etc mal ubicados. Para nuestro
caso no tenemos errores de rastreo. Por lo general, si hacemos uso de la Consola de Errores que
explicamos en apartados anteriores y vamos renderizando las páginas que vamos
implementando reduciremos los posibles errores de rastreo.
6.12.3.3 Estadísticas de rastreo
Esta herramienta muestra actividad de los rastreadores de Google en los últimos 90 días. Puede
servirnos para configurar la frecuencia de rastreo que vimos en apartados anteriores
(Información del sitio/Configuración/Frecuencia de rastreo). Si nuestro servidor no se
sobrecarga puede convenirnos aumentar la frecuencia de rastreo si nuestro sitio sufre cambios
constantemente.
6.12.3.4 Sugerencias en HTML
Esta herramienta muestra errores en el HTML, problema de contenido en nuestro sitio. Al
rastrear Googlebot nuestro sitio, busca cualquier posible problema relacionado con el contenido
de las páginas que lo componen como, por ejemplo, metadescripciones o etiquetas de título
problemáticas, duplicadas o ausentes. Estos problemas no impedirán que nuestro sitio aparezca
en 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 hacia
nuestro sitio. Por ejemplo, el texto de las metadescripciones y del título puede aparecer en los
resultados de búsqueda y los usuarios tienden a hacer clic en texto descriptivo porque les resulta
má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 no
tendremos problemas.
6.12.4 Labs
Dentro de “Labs” (Figura 6.40) tenemos las herramientas básicas para hacer pruebas con
nuestro sitio web.
Figura 6.39:
Herramientas de Diagnóstico
6.12.4.1 Explorar como Googlebot
Con la herramienta Explorar como Googlebot, podemos saber exactamente cómo ve una página
un 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 la
página principal. Para nuestro caso la recuperación es perfecta, Google ve la página tal cual la
implementamos.
URL: http://www.hermesmarinas.com/
Fecha: Fri Oct 08 08:50:51 PDT 2010
Tipo 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 servidor
Date: Fri, 08 Oct 2010 15:50:52 GMT // Fecha
Server: Apache // Tipo de servidor donde tenemos alojada la página
X-Powered-By: PHP/5.2.14 // Versión de PHP soportada por el servidor
Content-Encoding: gzip // Compresión
Vary: Accept-Encoding // Aceptada la compresión
Content-Length: 3323 // Longitud del contenido
Keep-Alive: timeout=2, max=99 // Periodos de conexión
Connection: Keep-Alive // Mantiene la conexión según los periodos anteriores
Content-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 la
exploración haya sido correcta)
6.12.4.2 Sidewiki
Google 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 el
sitio web. Si somos el dueño o webmaster, pdemos publicar una entrada especial de Sidewiki en
las páginas de nuestro sitio. Podemos publicar una entrada maestra para todo el sitio o crear
entradas de páginas específicas para atraer a nuestros usuarios. Estas entradas especiales
aparecerán con un fondo verde sobre otras entradas en la parte superior de la barra lateral de
Sidewiki.
Es necesario tener la Sidewiki instalado aparte para poder usarlo desde Google Webmaster
Tools. Para nuestro caso no lo tenemos instalado porque básicamente usamos Google
Webmaster Tools en su mayoría para mejorar la página en su conjunto, para el buscador de
Google de manera primordial y de forma secundaria para otros buscadores. No usamos
Webmaster Tools para añadir aplicaciones propias para añadir comentarios como puede resultar
Sidewiki porque para ello hay otros medios como ya vimos en el tema de aplicaciones.
Figura 6.40:
Herramientas para hacer pruebas
6.12.4.3 Rendimiento del sitio
Esta herramienta muestra estadísticas sobre el rendimiento de nuestro sitio. Podemos utilizar
esta información para mejorar la velocidad del sitio y para ofrecer un servicio más rápido a los
usuarios.
En una primera visión general del rendimiento tenemos que las páginas de nuestro sitio tardan
una media de 2,1 segundos en cargarse (actualizado el 23/08/2010). El tiempo de carga medio
de 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 una
visión global. Concretamente para el rendimiento del sitio, para la optimización ya usamos en
apartados anteriores el Page Speed con el que evaluamos el rendimiento de nuestras páginas y
obtuvimos sugerencias sobre cómo mejorarlas. Por tanto, mejorar la velocidad media de 2.1
segundos por páginas es bastante complicado ya que nuestra página está optimizada, esa media
de carga se debe al gran volumen de imágenes y animaciones de las que disponemos.
6.12.4.4 Sitemap de vídeo
Ya vimos lo que era un Sitemap, por lo que un Sitemap de vídeo básicamente lo que hace es
usar la extensión de Google para incluir vídeo con el protocolo de Sitemap de forma que facilite
información al buscador acerca del contenido de los vídeos de nuestro sitio. Contiene todos los
vídeos con la ubicación y prioridad. Para nuestro caso no usamos contenido de vídeo por lo que
no será necesario realizar ningún Sitemap de vídeo.
6.13 Google Analytics
Habiendo hecho las optimizaciones propias con Google Wemasters Tools y estando indexado
nuestro sitio (aunque no es necesario, pero se recomienda para obtener más tráfico) vamos a
añadir una de las aplicaciones más importantes que vimos en el Capítulo 5. Concretamente nos
referimos 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 nuestro
sitio. Como ya comentamos en el Capítulo de Aplicaciones, Google Analytics, nos ofrece
estadísticas sobre la inversión publicitaria, el tráfico, elementos multimedia, etc. Nos vamos a
central principalmente en como incluirlo en nuestra página y muy por encima en los grupos de
informe.
Para usar esta fabulosa herramienta que nos ofrece de manera gratuita Google es necesario
logearnos y añadir un sitio. Los pasos para añadir un sitio a Google Analytics son los
siguientes:
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 eligiendo
la 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 un
seguimiento 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 que
todos los scripts que no sean estrictamente necesarios van al final de la página web.
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.js'
type='text/javascript'%3E%3C/script%3E"));
try {
var pageTracker = _gat._getTracker("UA-10788966-3"); // Identidad del perfil
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
La verificación del nuevo perfil para nuestro sitio por parte Google Analytics no es
inmediata podrá tardar varios días. Una vez verificado el sitio podremos acceder a un
gran 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 de
navegación)
Objetivos (metas conseguidas)
Figura 6.41: Crear un nuevo perfil del sitio web en Google Analytics
Por defecto se nos muestra el panel (Figura 6.42), que no es más que un resumen de los datos
má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 Google
Analytics es demasiado extenso y en su mayoría se enfoca al marketing que aunque tiene algo
que ver con la visibilidad de nuestro sitio se sale del ámbito general de estudio de este
documento.
6.13.1 Intelligence
En este informe se muestra una lista de las alertas automáticas y personalizadas de las métricas
diarias dentro del periodo seleccionado. Dichas alertas pueden ser debidas a una reducción del
número de visitas, promedio de tiempo en el sitio, etc. Por defecto, solo tenemos activada las
alertas pos número de visitantes (primera gráfica del la Figura 6.42) pero podemos añadir tantas
como queramos. Además, podemos visualizar las alertas diarias, semanales y mensuales (Figura
6.43), obteniendo de esta forma el cambio en las alertas a lo largo del tiempo según las
modificaciones en nuestro sitio web.
Figura 6.42: Panel de Google Analytics
6.13.2 Usuarios
En este informe se muestra cuántos usuarios han visitado nuestro sitio web y cuánto tiempo han
dedicado a interactuar con el contenido. El informe ofrece (Figura 6.44) una perspectiva del
tráfico que nos permite centrarnos en las características de distintos segmentos de usuarios que
visitan el sitio, y examinar los diferentes factores que conforman la calidad de las visitas (es
decir, el promedio de páginas vistas, el tiempo que el usuario pasa en el sitio o el porcentaje de
rebote).
6.13.3 Fuentes de tráfico
En este informe se muestra una descripción de las distintas fuentes que envían tráfico a nuestro
sitio web. El informe ofrece (Figura 6.45) un gráfico con las tendencias del tráfico, mientras
que el diagrama y las tablas reflejan los elementos que impulsan dichas tendencias. El
parámetro "Tráfico directo" indica las visitas de los usuarios que han hecho clic en un marcador
para acceder a nuestro sitio web o que han introducido la dirección URL directamente en el
navegador. "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 motor
de búsqueda.
Figura 6.43: Intelligence (alertas automáticas)
Figura 6.44: Usuarios
6.13.4 Contenido
En este informe se ofrece (Figura 6.46) un resumen del volumen de páginas vistas, así como una
lista de las páginas ("Contenido principal") que más han influido en estas visitas. Las "Páginas
de 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 rebote
elevado.
6.13.5 Algunas estadísticas
A continuación mostramos una pequeña parte de las estadísticas que hemos obtenido de Google
Analytics y que nos mostrarán si necesitamos mejorar la página, seguir con la misma filosofía
de 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
Figura 6.45: Fuentes de tráfico
Figura 6.46: Contenido
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 grandes
ciudades 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 siempre
se puede mejorar u ofrecer nuevas experiencias a nuestros usuarios. Nuestras inversiones están
teniendo resultados directos en lo que se refiere a las perspectivas que buscábamos con nuestro
sitio (negocio).
6.14 Conclusiones
En 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 del
desarrollo. Sin embargo, una buena base donde construir y ofrecer algo no es nada si no
ofrecemos un contenido interesante y de calidad sin esperas para el usuario. Por ello, hemos
estudiado también como crear buenos contenidos (mapa conceptual) separados del estilo y la
interacción (web semántica), optimizando la descarga (PageSpeed) y entendiendo lo que los
usuarios quieren (Analytics).
El contenido es muchísimo más importante que el continente, el ofrecer a los usuarios lo que
buscan sin engañarlos es la base para la visibilidad en los buscadores, es la regla fundamental
del SEO (69). Aunque nuestra página tenga irregularidades, si el contenido es claro y de calidad
puntuaremos positivamente en nuestra visibilidad. Cabe destacar que eso no quita de que
páginas con irregularidades en el estándar y falta de optimizaciones de carga puntúen
negativamente en el posicionamiento.
Volviendo al ejemplo con el que hemos documentado la implementación web, podríamos
enmarcar nuestro sitio dentro de la Web 3.0 ya que: el contenido está separado del aspecto
visual y existe contenido dinámico e interacción.
Nuestra web se centra fundamentalmente en mostrar información al usuario pero si hubiésemos
querido hacer una aplicación (por ejemplo un editor de textos online) los pasos hubieran sido los
mismos. El único cambio hubiese sido:
___________________________________________________________________ Aumento en el desarrollo de algoritmos complejos usando los lenguajes de programación vistos
para la web
___________________________________________________________________ Aumento del contenido dinámico y uso del servidor
Centrarse en el desarrollo concreto de una aplicación compleja se sale del margen de estudio
que no es otro que la web y su futuro. No obstante y como hemos dicho con antelación, muchas
aplicaciones de escritorio pueden desarrollarse online y en un futuro próximo podrán realizarse
hasta aquellas que siempre han requerido de un sobremesa de alta gama.
CAPÍTULO 2
PÁGINA 153 DE 172
“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 Nietzsche
CAPITULO 7: NUEVAS TECNOLOGÍAS
omenzamos este libro con la introducción y definición del termino Web 3.0, que
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 cambio
acompañan también nuevos usos y herramientas online más complejas gracias a las
tecnologías y aplicaciones para el desarrollo que hemos estudiado. A lo largo de todos
los capítulos hemos ido recorriendo el estado actual de la Web intentando ver la
tendencia de cara a la nueva versión. Después de los temas tratados, podemos hacernos
una idea de que navegadores, tecnologías y aplicaciones para el desarrollo continuarán
en la Web 3.0. Pero la cosa no acaba ahí, actualmente y arropados por Google se están
afianzando nuevas poderosas tecnologías. Para hacernos una idea de lo que se nos
avecina, 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 VRML
7.1 HTML5
HTML5 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ñadido
etiquetas con nuevas y/o complejas posibilidades y se han eliminado otras. Sin embargo, la
cualidad fundamental del HTML5 con respecto a sus antecesores es que se presenta como una
plataforma para integrar perfectamente cualquier tipo de aplicación online. (70)
7.1.1 Características fundamentales
7.1.1.1 Geolocalización
La 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
C
Capítulo
7
como el tiempo o las noticias locales. Actualmente existe una API que usando HTML5 y
JavaScript 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ón
desde 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 personales
para que nos muestre información de utilidad personal relativa a nuestra ubicación. Todo esto
siempre y cuando se cuente con la autorización del usuario.
7.1.1.2 Web Workers
Al 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 ocasiones
quedarse colgado y dejar la interfaz del usuario sin responder hasta que esté terminada la
operación. Sin embargo, gracias a HTML5 hay una manera para hacer frente a este problema
usando Web Workers. (71)(72)
Básicamente, los Web Workers ofrecen la posibilidad de cargar un archivo JavaScript de forma
dinámica y, a continuación disponer de un código para ejecutar el proceso que ralentiza en un
proceso 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 web
Esta cache tiene la capacidad de almacenar aplicaciones web como por ejemplo de correo
electrónico a nivel local y acceder a ella sin tener que conectarse a Internet o instalar un cliente
externo como Outlook o Thunderbird. Actualmente, podemos encontrar una de las mejores
implementaciones de las especificaciones de HTML5 para aplicaciones de caché con Google
Gears 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 último
capítulo.
7.1.1.4 Canvas
Gracias a la nueva etiqueta canvas podemos dibujar y renderizar imágenes directamente en la
web por medio de un lienzo (Código 7.2). Es como si tuviéramos un editor de imágenes online
al que le podemos sacar el máximo partido añadiéndole funcionalidades extras a nuestro gusto
por medio de JavaScript. Esto permite crear videojuegos, animaciones complejas, interfaces
avanzados, 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 por
defecto (300x150 pixeles), pero si lo deseamos podemos especificar por medio de atributos
“width” y “height”.
7.1.1.5 Vídeo
Gracias 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 del
archivo podríamos visualizar cualquier formato y además sin ningún tipo de plugin (no
necesitamos más Adobe Flash para vídeos). Realmente es igual que hacíamos para el caso
concreto 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>
En el Código 7.1 tenemos un ejemplo simple que toma los valores del elemento vídeo por
defecto, pero si lo deseamos podemos especificar por medio de atributos el tipo de control, las
dimensiones, etc.
7.1.2 Diferencias entre (X)HTML5 y (X)HTML
La quinta versión del HTML a efectos de maquetado comparada con HTML tiene tres
diferencias básicas (Código 7.3 y 7.4):
___________________________________________________________________ HTML5 tiene nuevos elementos de bloque específicos cuyo carácter es puramente semántico. En
nuestra implementación teníamos que usar identificadores para dar ese carácter semántico a los
div.
___________________________________________________________________ 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>
<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 etiquetas
Hasta ahora hemos visto las etiquetas de canvas y video dentro de las características
fundamentales 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 introdujimos
en 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 en
blogs, 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.
___________________________________________________________________ <
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 eliminadas
Todas 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 web
obstaculizando a los rastreadores, ya que el contenido con un frame se trocea en distintos
documentos HTML incompletos.
A continuación mostramos algunas de las etiquetas eliminadas de HTML5 y que tampoco
deberíamos usar en otras versiones del HTML:
___________________________________________________________________ acronym
___________________________________________________________________ basefont
___________________________________________________________________ center
___________________________________________________________________ dir
___________________________________________________________________ font
___________________________________________________________________ frame
___________________________________________________________________ isindex
7.2 CSS 3
CSS3 es la nueva versión del lenguaje de hojas de estilo en cascada para la elaboración de
páginas web. Básicamente a simple vista podemos apreciar que se ha extendido la
funcionalidad, se han añadido nuevas propiedades, efectos y selectores a los ya existentes en
CSS2.1. (73)
7.2.1 Características fundamentales
7.2.1.1 @font-face
@font-face nos permite especificar las fuentes de texto en línea para mostrar texto en nuestras
páginas web (Código 7.5). Al permitirnos que proporcionemos nuestras propias fuentes, se
elimina la necesidad de depender de un número limitado de fuentes de usuarios instaladas en los
equipos.
Antes para solucionar la ausencia de fuentes necesitábamos poner varias fuentes alternativas por
si alguna de ellas no estaba en el equipo del visitante o bien como vimos en el apartado de
aplicaciones, usar una aplicación como Cufón para generar la tipografía.
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 la
fuente “DejaVu Sans”.
7.2.1.2 Bordes
Las nuevas propiedades para los bordes nos permiten personalizar aún más los bordes de los
elementos HTML (Código 7.6). Una de las propiedades más solicitadas es la de poder
incorporar 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ágenes
div {
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” con
bordes redondeados y flores de colores (la imagen). En nuestro ejemplo de página web
utilizamos 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 Sombras
Las sombras era otra de las deficiencias de la anterior versión de hojas de estilo en cascada. Para
el caso de elementos de bloque se solucionaba superponiendo imágenes o creando el montaje
completo con nuestro editor de imágenes. Por otro lado, si buscábamos sombras para nuestro
texto solo podíamos hacerlo usando herramientas como Cufón. Ahora, gracias a CSS3 es
posible 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: Sombras
div {
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 similar
para los marcos que para el texto. En primer lugar tenemos el desplazamiento horizontal y
vertical, seguidos del desenfoque y el color de nuestra sombra. Cabe mencionar que estas
propiedades no posicionan la sombra, para tal caso deberemos usar la propiedad de relleno o
padding.
7.2.1.4 Fondos avanzados
Hasta ahora con las versiones anteriores del CSS era posible poner un único fondo dentro de un
elemento HTML. Está funcionalidad se extiende pudiendo añadir múltiples fondos (Código
7.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 fondos
body {
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 para
crear fondos a medida sin pasar por el editor de imágenes.
7.2.1.5 Otras propiedades importantes
Ente 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 atributos
Anteriormente con CSS 2.1, solo podíamos seleccionar por elemento HTML, y por los atributos
de identificador y clase, ahora se han introducido el resto de atributos. Podemos buscar
cualquier 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;
}
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.3 WebM
WebM es un contenedor multimedia (audio/vídeo) que podemos usar por ejemplo cuando
insertemos cualquier tipo de contenido multimedia en nuestro sitio HTML5. Podemos comparar
WebM 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 FLV
tendremos que pagar. (74)
La base que hace grande a WebM es que alberga en su interior el formato de vídeo VP8 (75) y
para audio Vorbis (76).
7.3.1 VP8
Las 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 en
formato 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 Vorbis
Las 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ón
mayores de 180 kbps.
7.4 WebGL
WebGL nos brinda la posibilidad de traer gráficos en 2D y 3D para la Web mediante el elemento
canvas de HTML5 y una API JavaScript. Dicha API usa una implementación de OpenGL ES
2.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.
___________________________________________________________________ I
5OpenGL 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.
ncorporar texturas a partes de los objetos.
___________________________________________________________________ Iluminación y efectos de iluminación.
___________________________________________________________________ Texturas animadas.
7.5 Conclusiones
A 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 y
fundaciones 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 el
contenedor favorito a usar con VP8. También las empresas de videojuegos están altamente
interesadas 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 nuevas
tecnologías vistas CSS3 (para el estilo), WebM (para el contenido multimedia), WebGL (para el
mundo 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ón
del HTML5 estaba prevista para su uso en el 2022 y al resto de tecnologías le faltaban módulos
por implementar. Sin embargo, en el trascurrir del 2008/2010 han ocurrido una series de
acontecimientos (liberación de VP8, implementación de canvas, estandarizaciones, etc) que
unido a la carrera de los navegadores por la implementación del HTML5, han traído montones
de webs que ya implementan algunas funciones de estas nuevas tecnologías. De seguir la
tendencia en esta exponencial, parece que en apenas unos años tendremos este gran poder a
nuestro alcance.
CAPÍTULO 2
PÁGINA 163 DE 172
“The future belongs to those who believe in the beauty of their dreams”
~ Eleanor Roosevelt
CAPITULO 8: CONCLUSIONES
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 que
prevalezcan 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 al
uso de tecnologías totalmente compatibles, eliminamos las principales barreras hacia
una Web versátil, extensible y dinámica; compatible con cualquier tipo de navegador y
dispositivo.
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 recursos
consume, además de no permitirnos ver todas las páginas (solo aquellas que cumplen
los estándares web). Mozilla Firefox es el más ligero y versátil aunque con muchas
extensiones puede hacerse pesado. Opera es el pionero en el cumplimiento de
estándares y del cuál están copiando la interfaz gráfica el resto de navegadores
populares, sin embargo es el más lento en cargar las páginas. Safari comparte el mismo
motor que Google Chrome y también es muy potente pero muestra deficiencias de
seguridad. Internet Explorer es el navegador que menos protocolos soportaba y el que
peor 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 pruebas
realizadas que la mayor parte del mercado se lo llevarán Google Chrome.
____________________________________________________________ G
oogle Chrome cada vez dispone de más extensiones, de hecho, las extensiones más
importantes de Mozilla Firefox ya han sido exportadas al navegador de Google e
incluso integradas por defecto en el propio software. Es el caso, por ejemplo, de
AdBlock (para evitar ver publicidad en la Web) y Firebug (para desarrollo web, visto en
el Capítulo de Implementación).
____________________________________________________________ G
oogle Chrome no solo está respaldado por una gran compañía sino por cualquiera que
L
Capítulo
8
quiera colaborar, ya que surge de un proyecto de código abierto denominado Chromium.
Además, su motor es libre.
____________________________________________________________ L
os equipos y dispositivos cada vez disponen de más recursos por lo que aprovechamos
las ventajas de que Chrome asigne a cada pestaña un proceso independiente (un cuelgue
de una aplicación web no afecta al resto).
____________________________________________________________ G
oogle dispone de cada vez mayor número de dispositivos que incorporen sus sistemas
operativos. Se espera que para el 2011 el 80% de los móviles vendidos dispongan de
Android como sistema operativo para móviles, por lo que Chrome (en una versión más
reducida) ocupará esa cuota de navegadores web para móviles. Google permitirá otros
navegadores, pero al igual que ocurre con IE en Windows, al venir por defecto con el
sistema 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 sistema
operativo de código abierto basado en Linux y orientado al uso de la web (la mayoría
de usuarios tienen que tienen un ordenador lo usan para el correo, las redes
sociales,...etc.).
____________________________________________________________ G
oogle Chrome dispone del motor de renderizado web más rápido que existe hasta la
fecha (Webkit).
____________________________________________________________ C
ada vez existen menos páginas que no cumplan los estándares por lo que van
despareciendo los sitios con los que Google Chrome da problemas (el problema no es
de Google Chrome sino de los sitios que están mal implementados).
____________________________________________________________ G
oogle Chrome tiene el motor JavaScript más rápido que existe (V8), únicamente lo
iguala la nueva versión del motor JavasScript de Mozilla Firefox (SpiderMonkey 1.7).
____________________________________________________________ G
oogle 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 mercado
al restos de competidores, a la vez que aporta funciones propias que ninguno otro
implementa. 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/o
permita que no le coman terreno en los dispositivos que traen por defecto navegadores
de fábrica (Opera solía venir incluido en muchos dispositivos pero cada vez le están
perdiendo 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ás
extendidas en el lado del cliente. El HTML es la tecnología base para la creación de páginas
web, permitiéndonos maquetar el contenido. Cualquier sitio hecho íntegramente con cualquier
otra tecnología tiene que generar al final HTML. Por otra parte, el CSS es la tecnología base
para la creación del estilo de las páginas web, aunque también es posible definir el aspecto
grá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
permite enriquecer las páginas web añadiéndole la capacidad de realizar funciones más
complejas e interactuar de una forma más dinámica con el usuario. ActionScript básicamente
nos permite lo mismo que JavaScript, aunque su uso más extendido en la web es el de
contenedor de vídeo.
De cara a la Web 3.0 podríamos vaticinar según los datos estudiados y las pruebas
realizadas que la mayor parte del mercado en el lado del cliente se lo llevará el
conjunto formado por: HTML5, CSS3 y JavaScript. Para el caso de las nuevas versiones
del HTML y el CSS no tendremos rivales (únicamente las versiones anteriores), por otro
lado para el caso de JavaScript si existen rivalidades (ActionScript, SilverLight, Applets
de Java, etc) (Figura 3.13).
____________________________________________________________ U
no de los nombres que se le dio a la Web 3.0: Web Semántica; proviene de la tendencia
en la separación del contenido del diseño. Esta tendencia permite escalar de manera más
ordenada todo el contenido que se está generando en la web, a su vez permite mejorar la
interacción con otras tecnologías, el soporte y expansión en cualquier plataforma. En la
quinta versión, el HTML se ha reinventado, se ha hecho más estricto para mejorar la
compatibilidad, ha eliminado muchas de sus etiquetas y atributos (la mayoría en desuso
o dedicados al estilo de la página) y ha añadido etiquetas puramente semánticas como
pueden ser <nav> para la navegación o <footer> para el pie de página que permiten
estructurar de manera más clara el contenido.
____________________________________________________________ E
l CSS en su tercera versión se reafirma de forma contundente como tecnología
indiscutible para dotar de estilo al HTML. CSS3 subsana las deficiencias de sus
versiones anteriores incorporando: fuentes internas que no dependan del cliente, bordes
redondeados (evitamos imágenes de bordes redondeados), sombras (anteriormente por
medio de imágenes, JavaScript), composiciones complejas de fondo, etc. Además,
extiende el uso de selectores dentro del código HTML e incorpora algunas interacciones
que anteriormente solo podían hacerse mediante un lenguaje de programación como
pudiera ser JavaScript o ActionScript (por ejemplo la interacción con el ratón según
atributos).
____________________________________________________________ E
l HTML está extendiendo sus posibilidades, permitiendo subsanar las deficiencias de
sus versiones pasadas. Con la quinta versión podemos incluir: vídeos (no necesitamos ni
codecs, ni plugins), contenido 2D y 3D dinámico (edición de imágenes, videojuegos
online). Además, entre otras muchas posibilidades, podemos hacer uso de
Geolocalizadores para mostrar nuestra posición en tiempo real (meteorología, noticias y
comercios de la zona), Web Workers para realizar varios procesos en paralelo (cálculos
complejos mientras el usuario interactúa con la web) y cache para aplicaciones web.
Esto último, nos permite trabajar con nuestras herramientas de Internet favoritas sin
necesidad de conexión (por ejemplo el uso de Gmail como si se tratase de Thunderbird
o Outlook).
____________________________________________________________ L
a funcionalidad extra que permite la quinta versión del HTML viene de la mano de
JavaScript. JavaScript se consolida aún más como tecnología libre del lado del cliente
frente a ActionScript (Adobe) y SilverLight (Microsoft).
____________________________________________________________ A
ctionScript y SilverLight son lenguajes de programación privativos y requieren de un
software adicional (plugins para el navegador).
____________________________________________________________ L
os Applets de Java se encuentran en una tendencia al desuso desde hace tiempo, además
requieren de una máquina virtual en el cliente, no obstante aún quedan muchas
aplicaciones que hacen uso de está tecnología.
____________________________________________________________ J
avaScript, a diferencia del resto, dispone de motor interno en los navegadores que
permite su ejecución (interprete).
____________________________________________________________ C
on JavaScript es posible generar contenido dinámico (propio de las tecnologías del lado
del servidor), uno de los ejemplos para dicho fin se consigue a través del uso de AJAX
(JavaScript asíncrono y XML).
____________________________________________________________ E
l mayor mercado que tiene ActionScript es por medio del uso de Flash como
contenedor. Para evitar perder mercado, Adobe pretende incorporar en su contenedor el
formato libre de vídeo VP8, sin embargo Apple, ha decido no reproducir contenido
Flash por su “ineficiencia y vulnerabilidades de seguridad”. A principios de Noviembre
salió la herramienta Skyfire para los iOS (sistema operativo para móviles de Apple) y
MAC OS, que permite transformar cualquier vídeo de Flash a HTML5.
El conjunto de HTML5, CSS3, JavaScript y la jerarquía DOM (DHTML) se fusionan
para crear aplicaciones ricas en Internet (RIA) de última generación. El nuevo DHTML
incorpora todas las posibilidades que aportan el resto de tecnologías. Básicamente, con
este conjunto podemos no solo crear cualquier aplicación, efecto o interacción que nos
permita ActionScript, SilverLight o los Applets sino que extiende las posibilidades
(incluyendo funciones propias que solo se podían hacer en el servidor), la
compatibilidad entre plataformas y a coste 0 para el desarrollador web. El resto de
posiciones, en orden decreciente es para: ActionScript, SilverLight y los Applets. Sobre
los Applets básicamente podemos decir que terminarán desapareciendo, aunque aún
quedan 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, sin
embargo para un marco más cerrado donde prevalece el uso comercial de grandes empresas
destaca JSP y ASP como tecnologías más extendidas. El PHP, JSP, ASP, Python, Ruby, etc; son
las tecnología base para la creación de páginas dinámicas, permitiéndonos generar el contenido
que el usuario desea desde el servidor. Cualquier sitio que requiera un mínimo de gestión de
contenidos 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).
____________________________________________________________ A
SP es un lenguaje de programación privativo.
____________________________________________________________ P
HP, JSP, Python y Ruby son libres.
____________________________________________________________ P
HP es multiplataforma.
____________________________________________________________ A
SP requiere de servidores Windows, aunque se puede hacer multiplataforma a través de
MONO (proyecto de código abierto, multiplataforma para la implementación de
Microsoft .NET).
____________________________________________________________ J
SP requiere de la máquina virtual de Java y ASP requiere de la máquina virtual de
MONO.
Por lo general en proyectos grandes las empresas buscan el soporte, respaldo y fama de
otras empresas de proporciones similares. Algunas multinacionales del software
obligaban indirectamente a que los consumidores adoptasen sus tecnologías, de tal
forma 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 o
soporte con una tecnología libre estaba baneada. La situación actual está cambiado, las
tecnologías cerradas se están abriendo a la integración con tecnologías libres, y estás a
su vez tienen acogida por grandes empresas, fundaciones y multinacionales. Por
ejemplo, 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 del
lenguaje, la fortaleza radica en la capacidad de las librerías disponibles. ¿Entonces cuál
elegir?, 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 de
nadie” que permite colaborar y mejorarla entre todos. Por lo tanto, queda totalmente
desmarcado ASP, aunque aún con fuerza perdurara por debajo del resto de tecnologías, a
menos que Microsoft cambie su filosofía.
Actualmente, tenemos que PHP seguido de JSP serán el futuro inmediato, y las
tecnologías del estilo de Python y Ruby el futuro. Estas últimas tienen grandes
similitudes en cuanto a sintaxis limpia, código legible y sencillez, y cada vez poseen
más librerías e integración con otras tecnologías, pero es Python claramente la que tiene
mayor cabida tanto en el marco de Internet como en el de aplicaciones de escritorio
debido 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án
apoyados íntegramente por la comunidad de desarrolladores de Internet y las
multinacionales. Aunque en principio no estaba prevista la recomendación del uso de
HTML5 hasta el 2022 (fecha en la que estará totalmente listo), las grandes necesidades
y guerra entre el soporte de tecnologías están haciendo que esta fecha se adelante. En la
actualidad tenemos aplicaciones sorprendentes hechas en HTML5 y soportadas por los
navegadores 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 (de
hecho Google contrato a su creador). Aunque PHP le saca mucha ventaja a Python, se
prevee 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ás
utilizadas según los estudios realizados son editores de código, analizadores, gestores de
contenidos y widgets (Tabla 5.19). Estas aplicaciones pueden ser de escritorio, estar integradas
en el navegador o en la propia web dependiendo si forman parte de ella o no.
8.3.1 Editores de código
Actualmente, dentro de los editores de código para la web tenemos: Notepad++ y Kate entre los
más usados. Son editores ligeros y libres, de texto y código que soportan muchos lenguajes de
programació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 mayor
ventaja el soporte de lenguajes, el marcado y la personalización del área de trabajo. Ambos
prevalecerán en sus respectivas plataformas sin embargo de decantarnos por uno de ellos sería
Notepad++:
___________________________________________________________________ P
ermite buscar/remplazar en todos los documentos abiertos. Muy útil para cambios masivos de
clases, 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 un
documento 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 el
DreamWeaver o el FrontPage, actualmente en desuso. Estos por lo general solían ensuciar
mucho 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, no
obstante 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 el
propio programa. El futuro inmediato lo marcaran editores del tipo de Notepad++, pero sin duda
los triunfadores serán los editores WYSIWYG online que compaginan distintos niveles de
abstracción y profundización en el código, como los que ya ofrecen algunos servidores y
gestores de contenido de manera gratuita. Un ejemplo puede ser el editor que trae por defecto el
conocido gestor de contenidos Wordpress.
8.3.2 Analizadores de código
Cuando hablamos de analizadores nos referimos a aquellos que permiten analizar el código de
cualquier página. Actualmente, entre el conjunto de aplicaciones existentes (por lo general
online 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 ya
se están integrando herramientas de este tipo de serie con los navegadores. Básicamente, como
ya 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 y
rendimiento 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 visitas
Actualmente, Google Analytics es la aplicación web que más podemos encontrar integrada en
cualquier 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 el
marketing y estudio de visitas. No obstante, muchas veces se suele combinar su uso con
Quantcast (dentro de la misma índole).
8.3.4 Gestores de contenido
Actualmente, el CMS más popular es Wordpress. Dicho puesto, ganado a pulso, ha sido gracias
a una edición sencilla, alta personalización y a la existencia de multitud de temas gratuitos para
cambiar su apariencia. Hace tiempo que se ha desmarcado a sus competidores más directo
Joomla y Drupal, incluso está solventando las deficiencias de seguridad que poseía en sus
primeras versiones.
Día a día se iguala en prestaciones y seguridad a Drupal, e incluso a Plone (el CMS más potente
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 una
ventaja ya que con una gran comunidad como es la de Wordpress permite la aparición de nuevas
ideas y dentro de una sana competencia).
Como conclusión, por un lado Plone (una gran promesa) va a contar con el empuje que va a
sufrir Python en la web, sin embargo su dificultad de uso y configuración terminarán por
hacerlo desaparecer. En el otro lado, tanto Drupal como Joomla se mantiene estables, intentan
adaptarse a las pautas de Wordpress pero un núcleo bastante cerrado y una tediosa interfaz
hacen que incluso muchos de sus actuales usuarios migren.
8.3.5 Widgets
Widgets, Gadgets, Plugins, muchas veces tienden a confundirse entremezclando sus
significados. Definiendo un Widget (o Gadget) como una aplicación de tamaño menor al de un
plugin (ambos tienen la característica de que no se pueden ejecutar por si solos), en la actualidad
encontramos el Widget por excelencia de la Web Social: AddThis. Este widget nos permite
compartir páginas web con otras páginas web normalmente redes sociales como Facebook y
Twitter o en servidores de marcadores como Delicius.
AddThis sigue al alza y no posee competidor alguno. Sencillo y fácil de integrar facilita la
posibilidad de tener una red más interconectada y recoger aquellos lugares que más nos gustas
(indexación orgánica)
8.3.6 Otros
En 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 un
futuro próximo. Pero, ¿qué ocurre con el resto de cara a la Web 3.0? Bueno, obviando las
aplicaciones 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 hackeos
y spam masivo.
___________________________________________________________________ Disqus para comentarios básicos. Algunas desarrolladores suelen montar un gestor de contenidos
completo cuando las necesidades del cliente son mínimas, Disqus resuelve necesidades básicas
de feedbacks.
___________________________________________________________________ Magento, aunque con tendencia al alza, podría desaparecer quedando absorbido o convertido en
un añadido para CMSs.
___________________________________________________________________ YouTube, no peligra aunque en la actualidad el dominio por la visualización de vídeos en Internet
está reñida. Por una parte, la BBC al frente de otras muchas corporaciones intentan evitar que
YouTube, Vimeo, etc. se apoderen del formato televisivo en Internet (la televisión ordinaria se
encuentra en decadencia) y están preparando lo que será “la televisión a la carta”, sin embargo
Google 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 de
Spotify (“música a la carta con publicidad”) ha inspirado a una compañía Sueca en la creación
de Voddler (actualmente en Beta disponible en Estados Unidos y en Suecia) para la
visualizació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 un
navegador (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 futuro
lejano podría cambiar su ubicación debido a la reubicación y uso de los servidores (Apartado
8.4).
___________________________________________________________________ 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 funciones
y 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 bajado
bastante, equiparandose a aplicaciones para la creación de foros propietarias como vBulletin, es
una apuesta segura para el futuro pese a recibir menos instalaciones mensuales que vBulletin en
los ú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 cuanto
a sencillez y manejo, y su beneficios son inmediatos, el único inconveniente que tiene es que es
una herramienta propietaria. La comunidad no puede mejorarla y los desarrolladores que
quieran 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 y
escatimando la interfaz gráfica a tablas e infinidad de pestañas. Es de esperar, que como
solución surjan adaptaciones de estas aplicaciones algo más amigables, de hecho dichas
aplicaciones se usan para mejorase a si mismo y uno de los temas candentes del “día a día” son
las peticiones de los usuarios hacia una migración de la interfaz al más puro estilo de
GetSatisfaction.
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 prestaciones
obsoletas 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 a
equipos cada vez más potentes y mayores velocidades de conexión, los servicios de
hostings irán desapareciendo, quedando dicho uso delegado a los propios equipos de los
desarrolladores y/o dueños de las webs. Únicamente, para el caso de bases de datos
desproporcionadas como pudiera ser el soporte del historial de un gobierno, datos del
colectivo ciudadano, universidades, etc; existirían servidores ultra-potentes pero con
dedicación exclusiva.
En segundo lugar, se indexará menos pero de más calidad pasando del uso de
rastreadores al uso de personas, buscadores orgánicos como mayores decisores en el
Pagerank y el posicionamiento. Del mismo modo y directamente relacionado con lo
anterior, se extenderán por todo la red los analizadores de satisfacción de
usuarios/clientes.
En tercer lugar, todo tendrá cabida en Internet y estará perfectamente interconectado
pudiendo formar distintos tipos de subredes según categorías, hablamos del “Internet de
las cosas” que surge a partir de la posibilidad de extensión de la IP (IPv6). El hecho de
tener cualquier objeto y alimento identificado y localizado, habilitando la posibilidad de
un acceso/control telemático permitirá un cambio en la gestión global de nuestro planeta
que además favorecerá la sostenibilidad de este.
____________________________________________________________ S
e evitarían perdidas de objetos
____________________________________________________________ S
e facilitaría la reutilización de recursos (piezas de dispositivos, material reciclado, etc)
____________________________________________________________ S
e podría controlar de manera exhaustiva las emisiones de gases. Por ejemplo accediendo
a un supuesto dispositivo de carácter público encargado de contabilizar las emisiones de
un vehículo y estableciendo unos límites.
____________________________________________________________ S
e ahorrarían transportes innecesarios gracias a la teleasistencia y uso de cualquier
utensilio en destino vía Internet, etc.
Otro de los cambios que merecen la pena comentar, y que sin duda ya está teniendo
cabida en nuestros días, define dos filosofías/tendencias de uso en las que se delimitan
los límites entre donde empieza y acaba el dispositivo del usuario e Internet. La primera
tendencia de uso se refiere a la de extensión del escritorio del cliente, donde todas las
aplicaciones locales están interconectadas entre si en la máquina local del usuario y a su
vez conectadas con la nube de Internet (nombre común para el conjunto de servicios y
aplicaciones proporcionados por los distintos proveedores). La segunda tendencia es la
de extensión de la nube hacia el escritorio del cliente, donde cada una de las
aplicaciones de escritorio habituales son sustituidas por aplicaciones web e integradas
gracias a la cache para aplicaciones de HTML5.
Los máximos precursores de ambas tendencias son KDE y Google. KDE para la
extensión del escritorio hacia Internet, con su escritorio por defecto en distribuciones
GNU/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 principal
arrancar el navegador de Google Chrome y usar las aplicaciones de Google como Gmail
sustituyendo a Thunderbird, Google Docs sustituyendo a OpenOffice, etc. Para el caso
de la última tendencia aun está todo “muy verde”, no obstante vamos a compara ambas
viendo sus ventajas e inconvenientes.
8.4.1 Extensión del escritorio hacia Internet
Ventajas:
____________________________________________________________ A
provechamiento de los recursos y potencia del equipo del cliente.
____________________________________________________________ M
ayor protección de datos.
____________________________________________________________ A
cceso a datos en cualquier momento.
Inconvenientes:
____________________________________________________________ I
nstalación y permisos para aplicaciones.
____________________________________________________________ I
ncompatibilidades entre plataformas.
8.4.2 Extensión de Internet hacia el escritorio
Ventajas:
____________________________________________________________ N
o sería necesario buscar software para instalarlo.
____________________________________________________________ I
nexistencia de incompatibilidades entre plataformas.
____________________________________________________________ S
oporte y mejora centralizada de aplicaciones.
____________________________________________________________ A
provechamiento de los recursos y potencia del equipo del cliente. Gracias a las nuevas
tecnologías como WebGL que hacen uso directamente de los recursos del equipo.
Inconvenientes:
____________________________________________________________ A
usencia de aplicaciones para equipos que no tengan un primer acceso a Internet. Una
vez bajada la aplicación se guardaría e iría actualizando según fuera necesario.
8.4.3 Libertad de uso
Las 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 con
una economía sostenible basada en el soporte que se da y no en la imposición de
tecnologías cerradas de pago.
Según la valoración de uno de los padre de la web, Tim Berners Lee, la situación actual
de Internet está condicionada por el debate sobre la neutralidad, amenazada por
empresas y gobiernos, y el paulatino aumento de poder de empresas proveedoras del
servicios y compañías como Facebook o Apple.
Por ejemplo, en el caso de Facebook, la red social más grande. Millones de usuarios
están conectados todo el día, y digamos que integren dentro de su aplicación un
buscador. Los usuarios no saldrán más de ahí. Provocando que las empresas den
prioridad a exponer su información ahí. Esto obligaría a todos a exponer su información
porque nadie va a querer quedarse atrás. No es que tenga que ser dueño del mundo
Google, 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 en
contadores de amigos, si redimensionas la ventana no se adaptan los marcos, etc; hasta
Tuenti que es una copia está mejor hecho y encima ahora pretende incorporar publicidad
animando nuestras páginas personales sin nuestro consentimiento. Ahora todo el mundo
se preocupa por los links que se enlazan en cada pagina, pero después todos en apenas
unos 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 los
fines de Internet para animar a los usuarios a que no permitan que las empresas se hagan
con el control de la Red. El usuario medio de Facebook, Apple, Windows es inexperto y
pasivo, la gente no lucha hasta que no tienen “la soga al cuello”, se olvidan de lo que
lucharon otros y se acomodan. Tenemos que exigir nuestros derechos, el punto de
partida de este texto es la premisa de que la idea que dio vida a Internet fue la de
permitir que "cualquier persona pudiese compartir información con cualquier otra, en
cualquier lugar libremente".
Con este punto de partida, Berners Lee y los otros padres de Internet crearon un sistema
para 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 de
Internet. La primera amenaza viene derivada por la amenaza de la neutralidad de la red.
El científico pone nombre y apellidos a l s culpables de esta amenaza: "Los proveedores
de Internet están siendo tentados para frenar el tráfico a los sitios con los que no han
hecho acuerdos".
El experto no solo tira piedras contra los operadores sino también contra las
administraciones: "Los gobiernos totalitarios y democráticos están monitorizando los
hábitos 'online' de las personas, poniendo en peligro importantes derechos humanos",
añade. Vivimos en una dictadura camuflada donde gobiernos, medios y multinacionales
nos manejan a nuestro antojo. El último que tiene cabida en cualquier asunto es el
pueblo, tan solo hay que ver los acontecimientos ocurridos tras las filtraciones de
WikiLeaks (entre finales de noviembre y principios de diciembre de 2010) que ha
desembocado 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 la
democracia participativa descentralizada a través de Internet donde el estado sea un
mero ejecutor del poder de pueblo. Los ciudadanos haciendo uso de la Web 3.0 podrían
proponer 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 en
la Red suponen atentar contra los principios fundacionales de Internet, defiende, hasta el
punto que "podríamos perder la libertad de conectarnos con cualquiera en cualquier
sitio". 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 sus
derechos: "La web es de los usuarios. Es un recurso público. Se trata de un órgano vital
para la democracia, un canal de comunicación que hace posible una comunicación con
el mundo".
Además del cerco a la neutralidad por parte de operadores y gobiernos, según Berners
Lee, la segunda amenaza viene grupos o empresas que están alterando el
funcionamiento de Internet.
El británico se centra en dos casos concretos. En primer lugar critica a las redes sociales
que aislan la información publicada. El caso más conocido, y que el propio autor cita, es
el de Facebook. La red social no permite que sus usuarios puedan hacer uso de sus datos
exportándolos a otros espacios. Hace unas semanas surgió Diaspora, una red de código
abierto donde los usuarios deciden que hacer con sus datos, cuando y como, sin
embargo no podemos hacer una migración. Para Berners Lee, los usuarios deben ser
dueños de sus datos y deben poder hacer uso de ellos. Limitar el empleo de estos datos
es limitar las libertades dentro de la Red, lo que supone ir contra los principios de los
que habla el autor. "Los grandes sitios de redes sociales pretenden aislar la información
publicada 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 a
los contenidos. En este sentido se refiere de forma clara a Apple (cada vez más
extendido en Europa). Berners Lee critica la política de la empresa norteamericana de
apostar por estándares cerrados. Un sistema capitalista, totalitario no tiene cabida en
Internet. La inteligencia humana tiende a la sostenibilidad y trabajo de todos para un
bien común. Como ejemplo, de estándares cerrados por parte de Apple, esta pone sus
contenidos en formato exclusivo en iTunes. "No utilizar estándares abiertos provoca la
creación de mundos cerrados. Estándares abiertos impulsan la innovación". La
universidad también debería apoyar esto, poco a poco parece que se está consiguiendo
pese a focos puntuales de profesores que prepararon un año apuntes y llevan 40
dándolos igual, exigiendo uso de tecnologías privativas y obligando a su uso a sus
alumnos.
Además, Berners Lee apuesta por la descentralización a la hora de innovar, ya que "es
otra característica importante del diseño". "Nadie tiene que obtener la aprobación de una
autoridad central para agregar una página o hacer un enlace", opina. "La
descentralización ha hecho de la posible innovación y continuará haciéndolo en el
futuro". La innovación surge de la imaginación que es infinita y la única continuidad
hacia el progreso de la sociedad.
Así, apostando por una Internet abierta, Berners Lee también defiende el empleo del
protocolo HTML5 como herramienta que ayudará al progreso. Será una herramienta que
permita a los usuarios desarrollar contenidos de forma libre y debe tomarse como
modelo para el futuro. Además, asegura que "las tecnologías de base Web debe estar
disponibles 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 “Scientific
American” (79) y “TheRegister” (80). Nada expresa mejor mis sentimientos y conclusiones
para el uso de la web.
Long Live the Web: A Call for Continued Open Standards and Neutrality
Libertad de uso
GnS
CAPÍTULO 2
A
REFERENCIA
(1)___________________________________________________________________ O'Reilly, 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
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 (Second
Edition)". 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 el
Sitio 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]
(31) __________________________________________________________________ Ryan Boren, Mark Jaquith, Matt Mullenweg (who made first released), Andrew Ozz, Peter
Westwood. "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. “phpMyAdmin
Documentation”. 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
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
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". Octubre
13, 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 VP8's 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_anon
ymous_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
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]