Proyecto hacia la web 3

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.8 INTERNET EXPLORER ................................................................................................................. 12


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.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.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.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


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.


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


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


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


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)


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)


CPU 54,80% 11,30% 15,00% 13,40% 43,20%

Tabla 2.6: Características del navegador


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


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


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


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> 

<head>



</head>

<body>



<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.


___________________________________________________________________ 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)

http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/

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



<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>



<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).


___________________________________________________________________ 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)

http://krook.org/jsdom/

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



<html>

<head></head>

<body>



<p><a href="javascript:replace()">Remplazar texto</a></p>



<div id="elemento">¡Hola mundo!</div>

</body>

</html>

Código 3.10: Obtención de un archivo de texto plano del servidor mediante AJAX


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).


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

https://developer.mozilla.org/en/

https://developer.mozilla.org/en/AJAX

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



<html>

<head>

<title>Prueba de jQuery</title>

<script type="text/javascript" src="jquery.js"></script> 


$(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.


___________________________________________________________________ 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

http://api.jquery.com/

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<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



<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" /> 

¿Cuál es tu comida favorita?

<select name="comida"> 

<option value="Spaguetis">Spaguetis</option>

<option value="Asado">Asado</option>

<option value="Pizza">Pizza</option>

</select>

<input type="submit" name="muestra" value="Seguir" /> 

<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



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

<HTML>

<HEAD><TITLE>Param.html</TITLE></HEAD>

<BODY> // podemos escribir en mayúsculas

<H2>Introduce tus datos:</H2>



<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"?>



<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">



<display-name>Servlets básico</display-name>

<description>Servlets de ejemplo</description>



<servlet>

<servlet-name>ParamServlet</servlet-name>

<servlet-class>ParamServlet</servlet-class>

</servlet>



<servlet-mapping>

<servlet-name>ParamServlet</servlet-name> 

<url-pattern>/ParamServlet</url-pattern> 

</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.


___________________________________________________________________ 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.


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

http://java.sun.com/products/jsp/2.1/docs/jsp-2_1-pfd2/index.html

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



{% import time %} 

<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


___________________________________________________________________ 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.

http://docs.python.org/library/

http://wiki.python.org/moin/WebFrameworks

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


Páginas

Vistas


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)



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


Páginas

Vistas


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


creación de páginas web.

Tabla 5.4: Gestores de contenido

Orden


Páginas

Vistas


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)



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


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)



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.


gestión de bases de datos en Internet.

Tabla 5.6: Administradores de bases de datos

Orden


Páginas

Vistas


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)



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


Páginas

Vistas


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)



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


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)



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


Páginas

Vistas


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)



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


Páginas

Vistas


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)



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


Páginas

Vistas


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)



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).


la creación, mantenimiento y gestión de foros.

Tabla 5.12: Foros

Orden


Páginas

Vistas


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)



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.


la creación, mantenimiento y gestión de wikis.

Tabla 5.13: Wikis

Orden


Páginas

Vistas


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)



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


Páginas

Vistas


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)



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.


la visualización de vídeo a través de servidores externos.

Tabla 5.15: Visualizadores de vídeo

Orden


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)



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


Páginas

Vistas


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)



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


Páginas

Vistas


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)



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


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)


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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />



<link rel="stylesheet" href="960.css">

</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>



<div id="barra-menu-superior"> 

<div class="grid_5">  </div> 

<div class="grid_3">   </div>

<div class="grid_4">  </div> 

</div> 

</div>



<div class="hide-top-panel" id="barra-logo" > 

<div class="container_12">  </div> 



<div id="barra-submenu"> 

<div class="container_12">  </div>

<div id="panel" class="container_12"> 

<div class="grid_8"> 

<div id="panel-contenido-top"></div>

<div id="panel-contenido-middle">  </div>

<div id="panel-contenido-bottom"></div>

</div>

<div class="grid_4" id="sidebar"> 



</div>

</div>



<div class="hide-bottom-panel" id="fondo"></div>

<div class="hide-bottom-panel" id="barra-menu-inferior"> 

<div class="grid_5"> </div>

<div id="copyright" class="grid_3">  </div>

<div id="copyright" class="grid_3">  </div>

</div>

</div>



<div><a title="To Top" href="#" id="toTop">^ Top</a></div> 

</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> 

*{ margin:0;padding:0 }

body{ background-color:#fff; } 

</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"/> 

</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> 

</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> 

</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"/> 

</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"/> 

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> 

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”); ?> 

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(); ?> 

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>

...



<link rel="stylesheet" href="../css/full.style.min.css"/>



<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"


<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> 

<loc>http://www.hermesmarinas.com/index.php</loc> 

<changefreq>monthly</changefreq> 

<priority>1.00</priority> 

</url>

−

Figura 6.36: Generador XML de Sitemaps

<url> 

<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

...


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"> 

<html> 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

</head>

<body>

<div id="header"> 

<h1>Nuestro sitio</h1>

</div>

<div id="nav"> 

<ul>

<li>Inicio</li>

<li>Productos</li>

<li>Contacto</li>

</ul>

</div>

<div id=section> 

<h1>Nuestro articulo</h1> 

<p>...</p> 

</div>

<div id="footer"> 

<p>...</p>

</div>

</body>

</html>

Código 7.4: Documento HTML 5 básico

<!DOCTYPE html> 

<html>

<head>

<meta charset="utf-8"> 

</head>

<body>

<header> 

<h1>Nuestro sitio</h1>

</header>

<nav> 

<ul>

<li>Inicio</li>

<li>Productos</li>

<li>Contacto</li>

</ul>

</nav>

<section> 

<h1>Nuestro articulo</h1> 

<article> 

<p>...</p> 

</article>

</section>

<footer> 

<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

http://oreilly.com/web2/archive/what-is-web-20.html

http://www.livinginternet.com/w/wi_lee.htm

http://www.livinginternet.com/w/wi_mosaic.htm

http://www.blooberry.com/indexdot/history/browsers.htm

http://en.wikipedia.org/wiki/Browser_timeline

http://www.w3counter.com/globalstats.php

http://trac.webkit.org/wiki

https://developer.mozilla.org/en/Gecko_FAQ

http://arstechnica.com/open-source/news/2008/09/mozilla-committed-to-gecko

http://www.mozilla-europe.org/en/firefox/features/

http://www.google.com/chrome/intl/en/more/features.html

http://www.apple.com/safari/what-is.html

http://www.opera.com/browser/features/

http://www.microsoft.com/windows/internet-explorer/features/

http://www.microsoft.com/windows/internet-explorer/features/

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]

http://en.wikipedia.org/wiki/Comparison_of_web_browser

http://acid3.acidtests.org/

http://www.google.com/insights/search/


http://www.w3.org/TR/xhtml1/

http://www.w3.org/TR/CSS2/

https://developer.mozilla.org/en/javascript

http://www.w3.org/DOM/

http://www.librosweb.es/ajax/index.html

http://docs.jquery.com/

http://docs.php.net/manual/es/

http://java.sun.com/products/jsp/docs.html

http://diveintopython.org/toc/index.html

http://wappalyzer.com/stats/

http://www.google.com/analytics/index.html

http://www.blogger.com/

(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

http://wordpress.org/

http://www.google.com/recaptcha/learnmore

http://disqus.com/

http://www.phpmyadmin.net/home_page/docs.php

http://www.phpdoc.org/

http://www.adobe.com/products/dreamweaver/features/

http://github.com/sorccu/cufon/wiki/About

http://www.cpanel.net/products/cpanelwhm/software-releases.html

http://getsatisfaction.com/explore/features

http://www.vbulletin.com/index.php?do=features

http://www.mediawiki.org/wiki/Documentation

http://documentation.coppermine-gallery.net/en/

http://documentation.coppermine-gallery.net/en/

http://code.google.com/intl/en-EN/apis/youtube/overview.html

http://www.addthis.com/features

http://www.magentocommerce.com/services/overview

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

http://www.anieto2k.com/2007/09/19/coleccion-de-clones-de-lightbox-para-todos/

http://www.anieto2k.com/2007/09/19/coleccion-de-clones-de-lightbox-para-todos/

http://alexrabe.de/category/nextgengallery/

http://www.hermesmarinas.com/

http://www.gotapi.com/

http://notepad-plus-plus.org/

http://kate-editor.org/

http://www.wampserver.com/en/presentation.php

http://getfirebug.com/

http://code.google.com/intl/en-EN/speed/page-speed/

http://fireftp.mozdev.org/

http://960.gs/

http://www.gimp.org/

http://www.adobe.com/products/photoshop/photoshopextended/

http://unicode.org/faq/utf_bom.html

http://www.gidnetwork.com/tools/gzip-test.php

http://www.cssdrive.com/index.php/main/csscompressoradvanced/

http://tools.arantius.com/css-compressor

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

http://javascriptcompressor.com/

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

http://www.google.com/addurl/

https://www.google.com/webmasters/tools/

http://www.xml-sitemaps.com/

http://google.dirson.com/posicionamiento.net/seo/

http://diveintohtml5.org/

http://wearehugh.com/public/2010/08/html5-web-workers/

http://www.css3.info/

http://www.webmproject.org/

http://www.algodemusica.com/es/articulos/comparativa

http://code.google.com/p/webglsamples/

http://www.bbc.co.uk/mundo/noticias/2010/12/101209_0921_wikileaks_guerra_guerrillas_anonymous_4chan_hackers_hactivists_dc.shtml

http://www.bbc.co.uk/mundo/noticias/2010/12/101209_0921_wikileaks_guerra_guerrillas_anonymous_4chan_hackers_hactivists_dc.shtml

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]

http://www.theregister.co.uk/2010/11/20/berners_lee_says_facebook_a_thret_to_web/

Documents

Proyecto hacia la web 3