Hacia la web 3.0

E S C U E L A T É C N I C A S U P E R I O R D EI N G E N I E R Í A D E T E L E C O MU N I C A C IÓ N

U N I V E R S I D A D D E MÁ L A G A

T R A B A J O F I N D E M Á S T E R

HACIA LA WEB 3.0

M Á S T E R E N T E L E M Á T I C A Y R E D E S D E T E L E C O M U N I C A C I Ó N

M Á L A G A , 2 0 1 0 G é ne s i s G a r c ía M o r i l l a



Titulación: Máster en Telemática y Redes de Telecomunicación

Reunido el tribunal examinador en el día de la fecha, constituido por:

D./Dª.__________________________________________________________

D./Dª.__________________________________________________________

D./Dª.__________________________________________________________

para juzgar el Trabajo Fin de Máster titulado:

HACIA LA WEB 3.0

del alumno D. Génesis García Morilla

dirigido por Dª. Mónica Trella López

ACORDÓ POR ______________________________________ OTORGAR LA

CALIFICACIÓN DE _______________________________________________

Y, para que conste, se extiende firmada por los componentes del tribunal, la presente diligencia

Málaga, a ______ de __________________ de _________

El/La Presidente/a El/La Vocal El/La Secretario/a

Fdo.: _________________ Fdo.: _________________ Fdo.: _________________



HACIA LA WEB 3.0

REALIZADO POR:Génesis García Morilla

DIRIGIDO POR:Mónica Trella López

DEPARTAMENTO DE: Lenguajes y Ciencias de la Computación

TITULACIÓN: Máster en Telemática y Redes de Telecomunicación

PALABRAS CLAVE: Internet, Web, navegadores web, Webkit, Gecko, Firefox, Chrome, Safari, Opera, Internet Explorer, Acid 3, cliente, (X)HTML, CSS, JavaScript, AJAX, jQuery, servidor, PHP, JSP, Python, Gestores de contenido, Wappalyzer, Google Analytics, Blogger, reCAPTCHA, WordPress, Disqus, phpMyAdmin, phpDocumentor, DreamWeaver, Cufón, cPanel, GetSatisfaction, vBulletin, MediaWiki, Coopermine, YouTube, Addthis, Magento, Notepad++, Kate, LAMP, 960 CSS Framework, Maquetación, Animación, Firebug, PageSpeed, SEO, Optimización, HTML5, Geolocalización, Web Workers, Cache, Canvas, CSS3, WebM, WebGL, escritorio expandido hacia Internet, nube expandida hacia el escritorio, estándares abiertos, neutralidad, libertad.

RESUMEN: HACIA LA WEB 3.0 pretende dar una idea global de la Web, desde su acceso a través de los navegadores hasta su uso y continuidad en el futuro, pasando por las tecnologías necesarias y aplicaciones útiles para su desarrollo.

Málaga, Diciembre de 2010

A todos aquellos que hacen posible que Internet sea libre.

AGRADECIMIENTOS

A Mario Palomo por haberme contagiado el espíritu del software libre y compartir conmigo muchos de los avances y noticias sobre el futuro de la web.

A Pedro Pardo y Pablo Martín por la compresión y flexibilidad que me han ofrecido durante la realización de este TFM.

A Paqui Morilla, Lidia García, Gorka Goicoechea, Néstor Granja, José Manuel García, Omar Iglesias, Jorge Borrego, Manuel Delgado y Victor Alarcón por decirme todos los días que entregase ya de una vez el TFM. Sino hubiese sido por ellos no hubiese terminado.

A Marcos Santos por compartir conmigo sus conocimientos sobre VP8 y su entusiasmo por Python.

A Mónica Trella por su dedicación y apoyo en este TFM.

A Camilo Salas por hacerme pasar del Internet Explorer al Firefox en el 2005.

RESUMENHACIA LA WEB 3.0, pretende dar una idea global de la Web, desde su acceso a través de los navegadores hasta su uso y continuidad en el futuro, pasando por las tecnologías necesarias y aplicaciones útiles para su desarrollo.

ABSTRACTTOWARDS WEB 3.0, aims to provide an overall idea of the Web, from access through the web browser to use and continuation in the future, exploring the technologies and applications relevant to its development.

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...............................................................................................................................................21.2 REQUISITOS.............................................................................................................................................2

CAPITULO 2: NAVEGADORES WEB ...................................................................................................3

2.1 PAPEL DE LOS NAVEGADORES DENTRO DE LA WEB..........................................................................................32.2 HISTORIA DE LOS NAVEGADORES.................................................................................................................42.3 MOTORES DE RENDERIZADO........................................................................................................................6

2.3.1 Webkit...........................................................................................................................................72.3.2 Gecko............................................................................................................................................8

2.4 MOZILLA FIREFOX....................................................................................................................................92.4.1 Ventajas e Inconvenientes.............................................................................................................9

2.5 GOOGLE CHROME...................................................................................................................................102.5.1 Ventajas e Inconvenientes...........................................................................................................10

2.6 SAFARI..................................................................................................................................................112.6.1 Ventajas e Inconvenientes...........................................................................................................11

2.7 OPERA..................................................................................................................................................122.7.1 Ventajas e Inconvenientes...........................................................................................................12

2.8 INTERNET EXPLORER...............................................................................................................................122.8.1 Ventajas e Inconvenientes...........................................................................................................13

2.9 COMPARATIVAS ENTRE IE, OPERA, SAFARI, CHROME Y FIREFOX...................................................................132.10 TEST ACID3........................................................................................................................................162.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.........................................213.1.1 HTML / XHTML.........................................................................................................................22

3.1.1.1 Uso.....................................................................................................................................223.1.1.2 Sintaxis..............................................................................................................................233.1.1.3 Ejemplo..............................................................................................................................233.1.1.4 Ventajas..............................................................................................................................243.1.1.5 Desventajas........................................................................................................................243.1.1.6 Enlace a la API..................................................................................................................25

3.1.2 CSS.............................................................................................................................................253.1.2.1 Uso.....................................................................................................................................253.1.2.2 Sintaxis..............................................................................................................................253.1.2.3 Ejemplo..............................................................................................................................263.1.2.4 Ventajas..............................................................................................................................263.1.2.5 Desventajas........................................................................................................................273.1.2.6 Enlace a la API..................................................................................................................27

3.1.3 JavaScript...................................................................................................................................273.1.3.1 Uso.....................................................................................................................................27

i

3.1.3.2 Sintaxis..............................................................................................................................283.1.3.3 Ejemplo..............................................................................................................................283.1.3.4 Ventajas..............................................................................................................................293.1.3.5 Desventajas........................................................................................................................293.1.3.6 Enlace a la API..................................................................................................................29

3.1.4 AJAX...........................................................................................................................................293.1.4.1 Uso.....................................................................................................................................293.1.4.2 Ejemplo..............................................................................................................................303.1.4.3 Ventajas..............................................................................................................................323.1.4.4 Desventajas........................................................................................................................323.1.4.5 Enlace a la API..................................................................................................................32

3.1.5 jQuery.........................................................................................................................................323.1.5.1 Uso.....................................................................................................................................323.1.5.2 Sintaxis..............................................................................................................................333.1.5.3 Ventajas..............................................................................................................................343.1.5.4 Desventajas........................................................................................................................343.1.5.5 Enlace a la API..................................................................................................................34

3.2 TECNOLOGÍAS PARA EL DESARROLLO DE APLICACIONES DESDE EL LADO DEL SERVIDOR.......................................343.2.1 PHP............................................................................................................................................34

3.2.1.1 Uso.....................................................................................................................................353.2.1.2 Sintaxis..............................................................................................................................353.2.1.3 Ejemplo..............................................................................................................................353.2.1.4 Ventajas..............................................................................................................................363.2.1.5 Desventajas........................................................................................................................373.2.1.6 Enlace a la API..................................................................................................................37

3.2.2 JSP..............................................................................................................................................373.2.2.1 Uso.....................................................................................................................................383.2.2.2 Sintaxis..............................................................................................................................383.2.2.3 Ejemplo..............................................................................................................................383.2.2.4 Ventajas..............................................................................................................................413.2.2.5 Desventajas........................................................................................................................413.2.2.6 Enlace a la API..................................................................................................................41

3.2.3 Python.........................................................................................................................................413.2.3.1 Uso.....................................................................................................................................413.2.3.2 Sintaxis..............................................................................................................................423.2.3.3 Ejemplo..............................................................................................................................423.2.3.4 Ventajas..............................................................................................................................433.2.3.5 Desventajas........................................................................................................................433.2.3.6 Enlace a la API..................................................................................................................43

3.3 CONCLUSIONES.......................................................................................................................................433.3.1 Tendencia....................................................................................................................................44

CAPITULO 4: GESTORES DE CONTENIDOS ..................................................................................47

4.1 CARACTERIZACIÓN DE LOS GESTORES DE CONTENIDOS...................................................................................484.2 MÓDULOS DE LOS GESTORES DE CONTENIDOS..............................................................................................49

4.2.1 Creación y edición de contenidos...............................................................................................504.2.1.1 Plantillas............................................................................................................................504.2.1.2 Gestión documental...........................................................................................................514.2.1.3 Contenidos complementarios............................................................................................51

4.2.2 Gestión de validación y distribución de contenidos...................................................................514.2.3 Publicación de contenidos..........................................................................................................524.2.4 Gestión del ciclo de vida de los contenidos................................................................................534.2.5 Portal manager...........................................................................................................................544.2.6 Integración con datos de negocio...............................................................................................544.2.7 Herramientas de comunicación..................................................................................................554.2.8 Arquitectura general...................................................................................................................55

ii

CAPITULO 5: APLICACIONES ............................................................................................................57

5.1 ANALIZADORES......................................................................................................................................585.1.1 Google Analytics........................................................................................................................595.1.2 Características de Google Analytics..........................................................................................59

5.1.2.1 Estadísticas sobre la inversión publicitaria........................................................................595.1.2.2 Seguimiento de canales de tráfico y elementos multimedia..............................................605.1.2.3 Informes personalizados para estadísticas específicas......................................................615.1.2.4 Gestión para compartir y comunicar la información.........................................................615.1.2.5 Consulta de datos...............................................................................................................61

5.2 BLOGS..................................................................................................................................................615.2.1 Blogger.......................................................................................................................................625.2.2 Características de Blogger.........................................................................................................62

5.2.2.1 Diseño personalizado.........................................................................................................625.2.2.2 Interfaz fácil de usar..........................................................................................................635.2.2.3 Añadir fotografías y vídeos................................................................................................635.2.2.4 Posibilidades económicas con AdSense............................................................................635.2.2.5 Ampliar el número de seguidores......................................................................................645.2.2.6 Comentarios de nuestros lectores......................................................................................645.2.2.7 Notificaciones de entrada nueva........................................................................................645.2.2.8 Un único identificado de usuario (ID)...............................................................................645.2.2.9 Múltiples idiomas..............................................................................................................645.2.2.10 Páginas.............................................................................................................................645.2.2.11 Versatilidad para publicar entradas..................................................................................645.2.2.12 Múltiples usuarios para contribuir...................................................................................655.2.2.13 Plugins.............................................................................................................................65

5.3 CAPTCHAS.......................................................................................................................................655.3.1 reCAPTCHA...............................................................................................................................655.3.2 Características de reCAPTCHA.................................................................................................66

5.3.2.1 Anti spam...........................................................................................................................665.3.2.2 Digitalización de libros......................................................................................................66

5.4 GESTORES DE CONTENIDO........................................................................................................................665.4.1 WordPress...................................................................................................................................685.4.2 Características de WordPress.....................................................................................................68

5.4.2.1 Lugar de instalación...........................................................................................................685.4.2.2 Núcleo Flexible .................................................................................................................685.4.2.3 Fechas UTC.......................................................................................................................685.4.2.4 Compresión gzip................................................................................................................685.4.2.5 Administración de usuarios ..............................................................................................685.4.2.6 Perfiles de usuario ............................................................................................................695.4.2.7 Fácil instalación y actualización........................................................................................695.4.2.8 Generación dinámica de páginas.......................................................................................705.4.2.9 Idiomas..............................................................................................................................705.4.2.10 Feeds ...............................................................................................................................705.4.2.11 Links permanentes...........................................................................................................705.4.2.12 Comunicación entre portales...........................................................................................705.4.2.13 Temas...............................................................................................................................705.4.2.14 Diseño vía plantillas........................................................................................................705.4.2.15 Editor de archivos y plantillas.........................................................................................705.4.2.16 Etiquetas de plantillas......................................................................................................715.4.2.17 Plugins.............................................................................................................................715.4.2.18 Protección con contraseña...............................................................................................715.4.2.19 Mensajes programados....................................................................................................715.4.2.20 Mensajes con múltiples páginas......................................................................................715.4.2.21 Carga de archivos/imágenes ...........................................................................................715.4.2.22 Categorías .......................................................................................................................715.4.2.23 Salvar borradores y autoguardado...................................................................................715.4.2.24 Previsualizar entradas .....................................................................................................71

iii

5.4.2.25 Herramientas de actualización.........................................................................................715.5 SISTEMAS DE COMENTARIO.......................................................................................................................71

5.5.1 Disqus.........................................................................................................................................725.5.2 Características de Disqus...........................................................................................................73

5.5.2.1 Conexión entre conversaciones.........................................................................................735.5.2.2 Identidad del comentarista.................................................................................................735.5.2.3 Difundir discursiones.........................................................................................................735.5.2.4 Potencia y facilidad de gestión..........................................................................................735.5.2.5 Anti-Spam..........................................................................................................................735.5.2.6 Importancia de los comentaristas......................................................................................73

5.6 ADMINISTRADORES DE BASES DE DATOS......................................................................................................735.6.1 phpMyAdmin...............................................................................................................................745.6.2 Características de phpMyAdmin................................................................................................75

5.6.2.1 Compatibilidad con MySQL.............................................................................................755.6.2.2 Mantenimiento...................................................................................................................755.6.2.3 Importar contenido de la base de datos.............................................................................755.6.2.4 Exportar contenido de la base de datos.............................................................................755.6.2.5 Búsquedas..........................................................................................................................755.6.2.6 Formatos............................................................................................................................75

5.7 HERRAMIENTAS DE DOCUMENTACIÓN..........................................................................................................755.7.1 phpDocumentor..........................................................................................................................765.7.2 Características de phpDocumentor............................................................................................76

5.7.2.1 Amplia gama de formatos..................................................................................................765.7.2.2 Versatilidad de acceso........................................................................................................765.7.2.3 Soporta JavaDoc................................................................................................................765.7.2.4 Edición...............................................................................................................................76

5.8 EDITORES..............................................................................................................................................775.8.1 Dreamweaver..............................................................................................................................775.8.2 Características de Dreamweaver...............................................................................................77

5.8.2.1 Páginas accesibles..............................................................................................................775.8.2.2 Compatibilidad con CMS integrada..................................................................................775.8.2.3 Inspección de CSS.............................................................................................................785.8.2.4 Sugerencias de código de clase personalizada de PHP.....................................................785.8.2.5 Compatibilidad con Subversion Mejorada........................................................................78

5.9 SCRIPTS PARA FUENTES DE TEXTO..............................................................................................................785.9.1 Cufón..........................................................................................................................................795.9.2 Características de Cufón............................................................................................................80

5.9.2.1 Reemplazo de texto...........................................................................................................805.9.2.2 No necesita ningún plugin.................................................................................................805.9.2.3 Compatible y fácil.............................................................................................................805.9.2.4 Rápido................................................................................................................................805.9.2.5 Accesibilidad.....................................................................................................................80

5.10 PANELES PARA HOSPEDAJE WEB...............................................................................................................805.10.1 cPanel.......................................................................................................................................815.10.2 Características de cPanel.........................................................................................................81

5.10.2.1 Creación directa y resguardo de nuestra web.................................................................815.10.2.2 Copias de seguridad.........................................................................................................815.10.2.3 Análisis y estadísticas......................................................................................................815.10.2.4 Seguridad.........................................................................................................................815.10.2.5 Facilidades para desarrolladores......................................................................................815.10.2.6 Multilingüe......................................................................................................................81

5.11 SEGUIDORES DE INCIDENCIAS..................................................................................................................835.11.1 Get Satisfaction.........................................................................................................................835.11.2 Características de Get Satisfaction..........................................................................................83

5.11.2.1 Moderación......................................................................................................................835.11.2.2 Control de nuestros servicios web y de la comunidad interesada en nuestros servicios. 845.11.2.3 Widgets............................................................................................................................855.11.2.4 Opciones de integración..................................................................................................85

iv

5.11.2.5 Soporte.............................................................................................................................855.12 FOROS................................................................................................................................................85

5.12.1 vBulletin....................................................................................................................................865.12.2 Características de vBulletin.....................................................................................................87

5.12.2.1 Web y base de datos independientes................................................................................875.12.2.2 Administración.................................................................................................................875.12.2.3 Edición y personalización................................................................................................875.12.2.4 Jerarquía ilimitada...........................................................................................................875.12.2.5 Miembros.........................................................................................................................87

5.13 WIKIS.................................................................................................................................................875.13.1 MediaWiki.................................................................................................................................885.13.2 Características de MediaWiki..................................................................................................88

5.13.2.1 Nombres, títulos y encabezados......................................................................................885.13.2.2 Páginas de discusión........................................................................................................885.13.2.3 Formulas..........................................................................................................................885.13.2.4 Plantillas y temas.............................................................................................................895.13.2.5 Plugins.............................................................................................................................895.13.2.6 Usuarios y páginas..........................................................................................................895.13.2.7 Lineas de tiempos y categorías........................................................................................89

5.14 GALERÍAS DE IMÁGENES........................................................................................................................895.14.1 Coopermine..............................................................................................................................895.14.2 Características de Coopermine................................................................................................91

5.14.2.1 Usuarios y gestión de imágenes.......................................................................................915.14.2.2 Aspecto visual..................................................................................................................915.14.2.3 Optimización del código..................................................................................................91

5.15 VISUALIZADORES DE VÍDEO....................................................................................................................915.15.1 YouTube.....................................................................................................................................925.15.2 Características de YouTube......................................................................................................92

5.15.2.1 Inserción de vídeo............................................................................................................925.15.2.2 Vídeos públicos o privados..............................................................................................925.15.2.3 Suscripciones...................................................................................................................925.15.2.4 Grabar de cámara web.....................................................................................................925.15.2.5 Cuenta de usuario............................................................................................................935.15.2.6 Compartir actividad.........................................................................................................935.15.2.7 Canales.............................................................................................................................935.15.2.8 Editor de vídeo.................................................................................................................93

5.16 WIDGETS.............................................................................................................................................935.16.1 AddThis.....................................................................................................................................945.16.2 Características de AddThis......................................................................................................94

5.16.2.1 Compartición inteligente.................................................................................................945.16.2.2 Gran cantidad de servicios para compartir......................................................................945.16.2.3 Multilingüe......................................................................................................................945.16.2.4 Privacidad y Seguridad....................................................................................................945.16.2.5 Interfaz personalizable.....................................................................................................945.16.2.6 Estadísticas......................................................................................................................945.16.2.7 Integración con Flash.......................................................................................................95

5.17 ESHOPS..............................................................................................................................................955.17.1 Magento....................................................................................................................................955.17.2 Características de Magento.....................................................................................................95

5.17.2.1 Tienda online con añadidos.............................................................................................955.17.2.2 Búsqueda y sindicación...................................................................................................975.17.2.3 Tarifas..............................................................................................................................975.17.2.4 Pago.................................................................................................................................975.17.2.5 Presentación y estadísticas...............................................................................................975.17.2.6 Web Services API............................................................................................................975.17.2.7 Productos virtuales..........................................................................................................975.17.2.8 Opciones de productos definidas por clientes.................................................................975.17.2.9 Paquetes de Productos.....................................................................................................97

v

5.17.2.10 Soporte de impuestos.....................................................................................................975.18 CONCLUSIONES.....................................................................................................................................97

5.18.1 Aplicaciones más usadas por categoría...................................................................................975.18.2 Aplicaciones más usadas en general........................................................................................985.18.3 Tendencia..................................................................................................................................99

5.18.3.1 Tendencia al alza..............................................................................................................995.18.3.2 Tendencia a mantenerse...................................................................................................995.18.3.3 Tendencia al declive........................................................................................................99

CAPITULO 6: IMPLEMENTACIÓN ..................................................................................................101

6.1 ACCESIBILIDAD.....................................................................................................................................1036.2 ENTORNO Y HERRAMIENTAS DE TRABAJO..................................................................................................103

6.2.1 Tecnologías...............................................................................................................................1036.2.2 Editor web................................................................................................................................1046.2.3 Aplicaciones..............................................................................................................................1046.2.4 Navegadores.............................................................................................................................1046.2.5 Servidor local...........................................................................................................................1056.2.6 Depurador................................................................................................................................1056.2.7 Complementos..........................................................................................................................106

6.3 ARCHIVOS Y CARPETAS DE UNA WEB........................................................................................................1086.4 MAPA CONCEPTUAL DE UNA WEB............................................................................................................1096.5 PRE-MAQUETACIÓN...............................................................................................................................110

6.5.1 Propuestas gráficas..................................................................................................................1126.5.2 Distribución del contenido........................................................................................................1126.5.3 Dibujo de la web en un editor de imágenes..............................................................................114

6.6 MAQUETACIÓN.....................................................................................................................................1146.6.1 Cimientos..................................................................................................................................1146.6.2 Cuerpo base..............................................................................................................................1156.6.3 Añadiendo más detalles al estilo de la web..............................................................................116

6.6.3.1 Incluir CSS en el mismo documento HTML...................................................................1176.6.3.2 Definir CSS en un archivo externo..................................................................................1176.6.3.3 Incluir CSS en los elementos HTML...............................................................................117

6.7 INTERACCIÓN, ANIMACIÓN Y EFECTOS (JS)...............................................................................................1196.7.1 Fecha para el copyright............................................................................................................1196.7.2 Efecto de iluminado y apagado para los idiomas....................................................................1206.7.3 Ajuste de la página para pantallas pequeñas...........................................................................1206.7.4 Sustitución de imagen por animación GIF...............................................................................1216.7.5 Navegación animada en el menú..............................................................................................122

6.8 CONTENIDO DINÁMICO...........................................................................................................................1226.8.1 Formulario de contacto............................................................................................................123

6.9 OPTIMIZANDO LA WEB...........................................................................................................................1246.9.1 Eliminar enlaces rotos..............................................................................................................1246.9.2 Eliminar CSS desde JS.............................................................................................................1246.9.3 Combinar CSS externo.............................................................................................................1246.9.4 Combinar JS externo................................................................................................................1246.9.5 JS no necesario al final del sitio...............................................................................................1246.9.6 Activar compresión...................................................................................................................1256.9.7 Indicar fecha de expiración......................................................................................................1266.9.8 Cache en cabeceras..................................................................................................................1266.9.9 Compactar CSS........................................................................................................................1266.9.10 Compactar HTML..................................................................................................................1286.9.11 Compactar JS..........................................................................................................................1286.9.12 Minimizar el tamaño de las respuestas..................................................................................1296.9.13 Reducir DNS...........................................................................................................................1306.9.14 Minimizar redirecciones.........................................................................................................1306.9.15 Optimizar imágenes................................................................................................................1306.9.16 Optimizar el orden del CSS y el JS.........................................................................................1306.9.17 Descargas paralelas...............................................................................................................131

vi

6.9.18 CSS en la cabecera.................................................................................................................1316.9.19 Eliminar CSS no usado...........................................................................................................1316.9.20 URL única...............................................................................................................................1316.9.21 Escalado adecuado para las imágenes..................................................................................1316.9.22 Solo cookies en donde sea necesario......................................................................................1316.9.23 Set de caracteres en la cabecera............................................................................................1326.9.24 Especificar el tamaño de las imágenes..................................................................................1326.9.25 Selectores CSS eficientes........................................................................................................132

6.10 VERIFICANDO LAS TECNOLOGÍAS...........................................................................................................1326.10.1 Verificación del HTML...........................................................................................................1326.10.2 Verificación del CSS...............................................................................................................134

6.11 DANDO DE ALTA NUESTRO SITIO EN LOS BUSCADORES...............................................................................1356.12 VISIBILIDAD.......................................................................................................................................136

6.12.1 Información del sitio ..............................................................................................................1376.12.1.1 Sitemap..........................................................................................................................1386.12.1.2 Acceso de rastreadores...................................................................................................1396.12.1.3 Enlaces del sitio ............................................................................................................1406.12.1.4 Cambio de dirección......................................................................................................1406.12.1.5 Configuración................................................................................................................140

6.12.2 Su sitio en la web....................................................................................................................1416.12.2.1 Consultas de búsquedas.................................................................................................1416.12.2.2 Enlaces a su sitio............................................................................................................1416.12.2.3 Palabras clave................................................................................................................1416.12.2.4 Enlaces internos.............................................................................................................1416.12.2.5 Estadísticas de suscriptor...............................................................................................142

6.12.3 Diagnósticos...........................................................................................................................1426.12.3.1 Software malintencionado.............................................................................................1426.12.3.2 Errores de rastreo...........................................................................................................1426.12.3.3 Estadísticas de rastreo....................................................................................................1426.12.3.4 Sugerencias en HTML...................................................................................................142

6.12.4 Labs........................................................................................................................................1436.12.4.1 Explorar como Googlebot.............................................................................................1436.12.4.2 Sidewiki.........................................................................................................................1446.12.4.3 Rendimiento del sitio.....................................................................................................1446.12.4.4 Sitemap de vídeo...........................................................................................................144

6.13 GOOGLE ANALYTICS...........................................................................................................................1446.13.1 Intelligence.............................................................................................................................1476.13.2 Usuarios.................................................................................................................................1476.13.3 Fuentes de tráfico...................................................................................................................1476.13.4 Contenido...............................................................................................................................1486.13.5 Algunas estadísticas...............................................................................................................149

6.14 CONCLUSIONES...................................................................................................................................149

CAPITULO 7: NUEVAS TECNOLOGÍAS ..........................................................................................151

7.1 HTML5 ...........................................................................................................................................1517.1.1 Características fundamentales.................................................................................................152

7.1.1.1 Geolocalización...............................................................................................................1527.1.1.2 Web Workers....................................................................................................................1527.1.1.3 Cache para aplicaciones web...........................................................................................1527.1.1.4 Canvas.............................................................................................................................1527.1.1.5 Vídeo...............................................................................................................................153

7.1.2 Diferencias entre (X)HTML5 y (X)HTML................................................................................1537.1.2.1 Nuevas etiquetas..............................................................................................................1547.1.2.2 Etiquetas eliminadas........................................................................................................155

7.2 CSS 3................................................................................................................................................1557.2.1 Características fundamentales.................................................................................................155

7.2.1.1 @font-face.......................................................................................................................1557.2.1.2 Bordes..............................................................................................................................156

vii

7.2.1.3 Sombras...........................................................................................................................1567.2.1.4 Fondos avanzados............................................................................................................1577.2.1.5 Otras propiedades importantes........................................................................................1577.2.1.6 Selector de atributos........................................................................................................157

7.3 WEBM...............................................................................................................................................1587.3.1 VP8...........................................................................................................................................1587.3.2 Vorbis........................................................................................................................................158

7.4 WEBGL.............................................................................................................................................1587.5 CONCLUSIONES.....................................................................................................................................159

CAPITULO 8: CONCLUSIONES ........................................................................................................161

8.1 ¿QUÉ NAVEGADOR PREDOMINARÁ EN LA WEB 3.0?...................................................................................1618.2 ¿QUÉ TECNOLOGÍAS PREDOMINARÁN EN LA WEB 3.0?...............................................................................1628.3 ¿QUÉ APLICACIONES PARA EL DESARROLLO WEB PREDOMINARÁN EN LA WEB 3.0?.........................................165

8.3.1 Editores de código....................................................................................................................1658.3.2 Analizadores de código.............................................................................................................1668.3.3 Analizadores de visitas.............................................................................................................1668.3.4 Gestores de contenido...............................................................................................................1668.3.5 Widgets.....................................................................................................................................1678.3.6 Otros.........................................................................................................................................167

8.4 ¿QUÉ USO SE LE DARÁ A LA WEB 3.0?...................................................................................................1688.4.1 Extensión del escritorio hacia Internet....................................................................................1698.4.2 Extensión de Internet hacia el escritorio..................................................................................1708.4.3 Libertad de uso.........................................................................................................................170

REFERENCIA ..........................................................................................................................................A

viii

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

ix

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

x

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

xi

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

xiii

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

xv

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

xvi

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

xvii

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

xviii

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

xix

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.

xxi

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

E

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

PÁGINA 1 DE 172

Capítulo

1

CAPÍTULO 1

1.1 ObjetivosEl 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 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 RequisitosPara 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 2 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.UEl 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 webMuchos 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,

PÁGINA 3 DE 172

Capítulo

2

CAPÍTULO 2

animaciones, ..).

• Fuentes, las letras que se usan para los textos.

• 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 navegadoresEl 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)

PÁGINA 4 DE 172

CAPÍTULO 2

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

PÁGINA 6 DE 172

Figura 2.1: Navegadores web más utilizados.

Figura 2.2: Gráfica comparativa del uso de navegadores.

NAVEGADORES WEB

Tabla 2.1: Motores de renderizado web más comunes

Motor Creador Licencia Navegador Lenguaje

KHTML KDE GNU LGPL Konqueror C++

GeckoMosaic / Netscape / Mozilla Foundation

MPL, GNU GPL, GNU LGPLtri-license

Mozilla Firefox C++

Presto Opera Software Propietaria Opera C++

Webkit (basado en KHTML)

Webkit Foundation GNU LGPL, BSD-style

Safari, Google Chrome

C++

TridentMosaic/

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

PÁGINA 7 DE 172

Figura 2.3: Webkit frente a Gecko

CAPÍTULO 2

2.3.2 GeckoGecko, 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)

PÁGINA 8 DE 172

NAVEGADORES WEB

2.4 Mozilla FirefoxFirefox es un navegador web desarrollado por la fundación Mozilla que ofrece adaptabilidad, seguridad, estabilidad y velocidad. Es fácil, gratuito y abierto. Firefox tiene más de 6.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 InconvenientesLas 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.

PÁGINA 9 DE 172

Figura 2.4: Captura de pantalla de Firefox 4

CAPÍTULO 2

2.5 Google ChromeChrome 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.

2.5.1 Ventajas e InconvenientesLas 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

PÁGINA 10 DE 172

Figura 2.5: Captura de pantalla de Google Chrome 6

NAVEGADORES WEB

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 SafariSafari es un navegador web de código cerrado desarrollado por Apple para Mac pero que en la actualidad soporta alguno de los sistemas operativos más extendidos.

2.6.1 Ventajas e InconvenientesSafari 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

PÁGINA 11 DE 172

Figura 2.6: Captura de pantalla de Safari

CAPÍTULO 2

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

2.7.1 Ventajas e InconvenientesEntre sus ventajas se encuentra la velocidad, la seguridad y una cuidada interfaz (13). Opera está integrado en algunas consolas de videojuegos.

Entre sus escasos puntos negativos está su lentitud en el renderizado con respecto a aquellos navegadores que usan Gecko y Webkit.

2.8 Internet ExplorerInternet 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

PÁGINA 12 DE 172

Figura 2.7: Captura de pantalla de Opera 10.5

NAVEGADORES WEB

competencia por parte de otros navegadores, principalmente Mozilla Firefox.

2.8.1 Ventajas e InconvenientesLa 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 FirefoxA 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

PÁGINA 13 DE 172

Figura 2.8: Captura de pantalla de Internet Explorer 8

CAPÍTULO 2

• Consumo de memoria

• 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 08/01/95 12/08/96 06/23/03 09/15/09 09/26/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

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

PÁGINA 14 DE 172

NAVEGADORES WEB


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

PÁGINA 15 DE 172

CAPÍTULO 2

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.10Test Acid3Aunque 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

PÁGINA 16 DE 172

NAVEGADORES WEB

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

PÁGINA 17 DE 172

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

CAPÍTULO 2

los motores de renderizado web, los navegadores más extendidos y hemos detallado mediante tablas y pruebas sus características y consumo de recursos.

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

PÁGINA 18 DE 172

NAVEGADORES WEB

PÁGINA 19 DE 172

Figura 2.12: Tendencia de popularidad de los navegadores web

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

CEn 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

PÁGINA 21 DE 172

Capítulo

3

Figura 3.1: Modelo de cliente servidor

CAPÍTULO 3

decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona 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:

• Tecnologías para maquetación del contenido en donde nos centraremos en HTML/XHTML

• Tecnologías para presentación del contenido en donde nos centraremos en el CSS.

• Tecnologías para interacción y realización de funciones complejas donde nos 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 / XHTMLHTML 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 UsoLa 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.

1 XML es un Lenguaje de Etiquetado Extensible muy simple, pero estricto que juega un papel fundamental en el intercambio de una gran variedad de datos. Es un lenguaje muy similar a HTML pero su función principal es describir datos y no mostrarlos como es el caso de HTML. XML es un formato que permite la lectura de datos a través de diferentes aplicaciones.

PÁGINA 22 DE 172

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

TECNOLOGÍAS DE DESARROLLO

3.1.1.2 SintaxisLa 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 EjemploPara crear un documento HTML tenemos que incluir como mínimo la etiqueta html.

Código 3.1: Página web básica vacía en XHTML

<html>  <head>  </head> <body> <!-- Cuerpo donde va el contenido de la página → </body></html>

Dentro del cuerpo del documento HTML existen una gran variedad de etiquetas para definir el maquetado del documento, por ejemplo: <b></b> para poner el texto que enmarcado en negrita o <p></p> para definir que el interior enmarcado es un párrafo.

Pongamos un ejemplo real que muestre un página web básica. Si se observa el código fuente, se pueden distinguir tres partes bien diferenciadas, un ejemplo de una página básica sería realizada con el Código 3.2.

PÁGINA 23 DE 172

CAPÍTULO 3

Código 3.2: Página web básica en XHTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd”><html> <head> <title>The Internet</title> </head> <body> The Internet is the first thing that humanity has built that humanity doesn't understand, the largest experiment in anarchy that we have ever had. </body></html>

En primer lugar se encuentra la definición del tipo de documento (DTD), el cual se especifica con la etiqueta <!DOCTYPE. Seguidamente se encuentra la etiqueta <html></html> que especifica el principio y fin del documento HTML. Entre las etiquetas de principio y fin del documento se ubican las etiquetas correspondientes al encabezado y cuerpo del documento cuyas etiquetas correspondientes son <head></head> y <body></body>.

Con la etiqueta <head></head> se delimita la cabecera del documento que suele contener información sobre el documento como título, idioma, palabras clave, autor, etc. La información que se especifique en la cabecera no es mostrada por el navegador al usuario con la única excepción de la etiqueta <title></title>, la cual sirve para especificar el titulo del documento y es visualizada en la barra de titulo de la ventana correspondiente al programa navegador.

Con la etiqueta <body></body>, se delimita el cuerpo del documento, que es el contenedor para todos los elementos visibles para el usuario, como párrafos, imágenes, listas, etc.

3.1.1.4 Ventajas• Sencillo, permite describir hipertexto.

• Texto presentado de forma estructurada y agradable.

• No necesita de grandes conocimientos cuando se cuenta con un editor de páginas web o WYSIWYG (aplicación para escribir documentos viendo directamente el resultado final).

• Archivos pequeños.

• Despliegue rápido.

• Lenguaje de fácil aprendizaje.

• Lo admiten todos los exploradores.

3.1.1.5 Desventajas• Lenguaje estático.

• La interpretación de cada navegador puede ser diferente.

• Guarda muchas etiquetas que pueden resultar inservibles y dificultan la corrección.

• El diseño es más lento.

• Las etiquetas son muy limitadas.

PÁGINA 24 DE 172


3.1.1.6 Enlace a la API• Especificación HTML 4.01: http://www.w3.org/TR/RE C-html40/

• Especificación XHTML 1.0: http://www.w3.org/TR/xhtml1/

3.1.2 CSSCSS (Cascading Style Sheets, en Inglés) es un lenguaje simple que describe cómo se va a presentar un documento (20). Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre el estilo y formato de sus documentos. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

3.1.2.1 UsoCSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. CSS permite a los desarrolladores web controlar el estilo y el formato de múltiples páginas web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

Aunque se pueden encontrar páginas (normalmente antiguas) en las que no exista un estilo definido o el estilo está introducido por HTML (algo que no se debe hacer) en su gran mayoría todas los sitios web disponen de su declaración de hojas de estilos.

3.1.2.2 SintaxisCSS usa un conjunto de reglas, la regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

Código 3.3: Regla básica de estilo para los encabezados de primer orden de una página

h1 { color: red; } /* selector { propiedad: valor } */

Los selectores básicos son:

• Nombre de etiqueta para etiquetas (X)HTML.

• Carácter '.' para clases: .tipo1 { color: red }

• Carácter '#' para elementos únicos: #elemento { color: red }

Los selectores pueden ser aplicables a:

• Etiquetas: <h1></h1>

• Grupos pertenecientes a una clase mediante el atributo “class”: <img class=“tipo1” />

• Elementos únicos mediante el atributo “id”: <p id=“elemento”>...</p>

PÁGINA 25 DE 172

Figura 3.4: Logo de validación del W3C para CSS 2.0

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

http://www.w3.org/TR/REC-html40/


CAPÍTULO 3

Las reglas pueden incluirse de varias formas:

• En la propia etiqueta del elemento mediante el atributo “style”.

• En la página mediante la etiqueta <style></style>.

• En un archivo externo mediante la etiqueta <link />.

En el Capítulo 6: Implementación, entraremos en más detalle en cuanto a las formas de definir el estilo.

3.1.2.3 EjemploPongamos un ejemplo real que aplique un CSS a una página web. En el ejemplo tenemos un documento XHTML junto con el enlace a la hoja de estilos CSS. A la parte visible del documento que se corresponde con la etiqueta <body></body> se le esta aplicando un estilo caracterizado por un margen automático y una anchura de 960 píxeles.

En el Código 3.4 mostramos el contenido del documento XHTML (index.html) con el enlace al documento que contiene la hoja de estilos y en el Código 3.5 el contenido del archivo CSS (style.css).

Código 3.4: Página web básica con enlace externo al estilo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <link rel="stylesheet" href="css/style.css"/>  <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.

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

PÁGINA 26 DE 172


3.1.2.5 Desventajas• Existen limitaciones que CSS 2.x todavía no permite, por ejemplo, la alineación vertical

de capas, las sombras, los bordes redondeados…

• El uso de las tablas nos permitía crear diseños complejos de forma mucho más sencilla que utilizando CSS, aunque CSS3 está intentando facilitar dicho trabajo.

3.1.2.6 Enlace a la API• Guía de Referencia CSS 2.1: http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/

3.1.3 JavaScriptJavaScript 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 UsoEl 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 tecnología: Vimeo, YouTube, USTREAM, devianART, Blogger, Picasa, etc.

2 DOM es una especificación para la representación de datos XML (22). Por extensión, DOM también se puede utilizar para manipular documentos XHTML y HTML. Técnicamente, DOM es una API de funciones que se pueden utilizar para manipular las páginas XHTML de forma rápida y eficiente. DOM transforma internamente el documento original en una estructura más fácil de manejar formada por una jerarquía de nodos. De esta forma, DOM transforma el código HTML/XML en una serie de nodos interconectados en forma de árbol. El Modelo de Objetos del Documento (DOM) permite ver el mismo documento de otra manera, describiendo el contenido del documento como un conjunto de objetos que un programa Javascript puede actuar sobre ellos.

PÁGINA 27 DE 172

Figura 3.5: Logo de JavaScript (no dispone de uno homologado)

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

CAPÍTULO 3

3.1.3.2 SintaxisJavaScript 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 EjemploPongamos un ejemplo real donde tengamos el documento XHTML junto con el código JavaScript.

Código 3.7: Botón en página XHTML que al pulsarlo muestra el cuadrado de 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title>Cuadrado de 5</title> <script type="text/javascript"> // código JavaScript en la cabecera function cuadrado(numero) { // función cuadrado al que le pasamos una variable numero return numero * numero; }// devolvemos el cuadrado de la variable de entrada </script> </head> <body> 

PÁGINA 28 DE 172

Figura 3.6: Jerarquía DOM


<input type="button" Value=" ejemplo2 " onClick="alert(cuadrado(5))"/> </body></html>

En este ejemplo hemos insertado un botón en la página web que al clicarlo enlaza con una función JavaScript que devuelve el cuadrado del número que le pasemos. Por pantalla se mostrará el número en un mensaje de alerta (alert).

3.1.3.4 Ventajas• Lenguaje interpretado seguro y fiable.

• El código Javascript se ejecuta en el cliente.

3.1.3.5 Desventajas• Código visible por cualquier usuario.

• El código debe descargarse completamente.

• Atacantes maliciosos pueden inyectar secuencias de comandos del lado del cliente en páginas web visitadas por otros usuarios, comúnmente denominado problema XSS (problema basado en las vulnerabilidades del sistema de validación de HTML).

3.1.3.6 Enlace a la API• API JavaScript: http://krook.org/jsdom/

3.1.4 AJAXAjax (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.

• XML para el intercambio y la manipulación de información.

• XMLHttpRequest, para el intercambio asíncrono de información.

• JavaScript, para unir todas las demás tecnologías.

3.1.4.1 UsoBásicamente, la principal virtud de AJAX está en la potencia que se le puede extraer al 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

PÁGINA 29 DE 172

Figura 3.7: Logo de AJAX (no dispone de uno homologado)

http://krook.org/jsdom/

CAPÍTULO 3

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, también podemos encontrarla en aplicaciones como Flickr, Amazon’s, etc.

3.1.4.2 EjemploPongamos un ejemplo real que remplace un texto de un página web por el de un archivo 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

PÁGINA 30 DE 172

Figura 3.8: Cliente servidor en modelo de aplicación clásica y en modelo de aplicación AJAX

HTTP3 (Código 3.10) para obtener dicho archivo. Las peticiones XML HTTP es la base de AJAX.

Código 3.8: Archivo de texto plano donde se encuentra un código para cargar con AJAX

<script type="text/javascript"> function replace() { // busca el identificador “elemento” y sustituye el contenido de su etiqueta document.getElementById(“elemento”).innerHTML = "Hello, <b>AJAX</b> world!";}</script>

Código 3.9: Página en la que se utiliza AJAX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head></head><body>  <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

<script type="text/javascript">var http = false;

if(navigator.appName == "IE") { http = new ActiveXObject("Microsoft.XMLHTTP"); // para Internet Explorer siempre es especial} else { http = new XMLHttpRequest(); // variable para hacer petición HTTP usando XML para los datos}

http.open("GET", "text.txt"); // obtemos el archivo de texto plano del servidorhttp.onreadystatechange=function() { if(http.readyState == 4) { // si ha habido problemas alert(http.responseText); // mostramos la respuesta mediante un mensaje emergente }}http.send(null); //cerramos la conexión con el servidor</script>

Básicamente declaramos una una variable (http) de tipo XMLHttpRequest() para realizar 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 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

3 Protocolo mediante el cual se transfieren las páginas web a un ordenador.

PÁGINA 31 DE 172

CAPÍTULO 3

mediante una única petición HTTP, en el ejemplo hemos hecho dos peticiones una para cargar la parte de la página que el usuario puede ir leyendo y otra para obtener el código para reemplazar el texto.

3.1.4.3 Ventajas• La experiencia de usuario en la navegación es mucho más rica. Ya no se refresca la

página constantemente al interactuar con ella.

• El tiempo de espera para una petición se reduce. El usuario al hacer un pedido (request) al servidor, no se envía toda la página.

• Por la misma razón anterior el trafico al servidor se reduce.

3.1.4.4 Desventajas• Problemas si el usuario ha deshabilitado el uso de JavaScript en su navegador.

• Demasiado código Ajax hace lento el navegador. A más Ajax, más uso de código JavaScript del lado del navegador, por consiguiente mayor trabajo del navegador (estás mismas desventajas se aplican a JavaScript).

3.1.4.5 Enlace a la APIAJAX 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 jQueryjQuery 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 UsoA 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 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.

PÁGINA 32 DE 172

Figura 3.9: Logo de jQuery

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

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

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 SintaxisLa sintaxis de jQuery es prácticamente la misma que la de JavaScript, los únicos cambios son respecto a los selectores que incluye los mismos que los de CSS y respecto a las funciones que trae nuevas funciones para facilitar algunas tareas repetitivas comunes en la programación con JavaScript.

Código 3.11: Cambio del contenido del elemento seleccionado por el pasado por parámetro

$(“#elemento”).html("Hola Mundo"); // $(selector).función(parámetros);

Los selectores básicos son:

• Mismo elemento: $(this). o $.

• Nombre de etiqueta (X)HTML: $(“p”).

• Carácter '.' para clases: $(“.tipo1”).

• Carácter '#' para elementos únicos: $(“#elemento”).

El código jQuery puede incluirse de las mismas formas que JavaScript siempre y cuando se incluya su librería.

Código 3.12: Mensaje de alerta cuando se clica un enlace

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title>Prueba de jQuery</title> <script type="text/javascript" src="jquery.js"></script>  <script type="text/javascript"> $(document).ready(function (){ // cuando el documento este cargado completamente $("a").click(function (){ alert("Presionaste un <a>");}); // asignamos el clic a las etiquetas <a> </script></head><body> <a href="#"> ¡Presioname! </a></body></html>

Como se puede observar en el Código 3.12, se ha añadido “$(document).ready()”. Pues todo lo que este dentro del ready() sera ejecutado cuando el árbol DOM del documento este creado.

Es una manera de saber cuando empezar a ejecutar nuestro código Javascript y saber que podemos acceder a todos los elementos de la pagina y que no queda ninguno por ser inicializado.

Con jQuery podemos hacer muchas cosas de una manera muy sencilla, como por ejemplo:

• Insertar o eliminar elementos.

PÁGINA 33 DE 172

CAPÍTULO 3

• Modificar las propiedades de los elementos, (class, id, value…) o su contenido.

• Asignar funciones mediante eventos.

• Peticiones AJAX.

• Animaciones.

3.1.5.3 Ventajas• Simple control de eventos.

• Excelente manipulación del DOM.

• Facilidad de desarrollo.

3.1.5.4 Desventajas• No dispone de Widgets. Se pueden hacer pero la librería no los proporciona.

3.1.5.5 Enlace a la API• API jQuery: http://api.jquery.com/

3.2 Tecnologías para el desarrollo de aplicaciones desde el lado del servidor.

Estas tecnologías permiten el desarrollo de aplicaciones que se ejecutan en el servidor (Figura 3.1), es decir, el servidor genera la página web según la petición manteniendo una comunicación síncrona. De esta forma se aumenta la seguridad de la página y el uso de aplicaciones más complejas.

Dentro de las tecnologías desde el lado del servidor nos centraremos en:

• PHP y JSP por ser las tecnologías más extendidas.

• Python por su potencia y sencillez.

3.2.1 PHPPHP (Preprocesador de Hipertexto) es un lenguaje interpretado de propósito general ampliamente usado, diseñado especialmente para desarrollo de web dinámicas y que puede ser incrustado dentro de código HTML (25). Generalmente se ejecuta en un servidor web, tomando el código en PHP como su entrada y creando páginas web como salida. Puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas operativos y plataformas. Además, su soporte en páginas de hospedaje es más barato que el de otras tecnologías como pueden ser JSP (Java de Sun Oracle) o ASP (.Net de Microsoft).

Los archivos PHP tienen la extensión “.php”.

PÁGINA 34 DE 172

Figura 3.10: Logo de PHP

http://api.jquery.com/

3.2.1.1 UsoPHP 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 SintaxisLa sintaxis de PHP es muy parecido a cualquier otro lenguaje interpretado escrito en Perl o C, aunque consta de sus particularidades (Código 3.13). El código de PHP dentro de la 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 EjemploPongamos un ejemplo real que incluya un texto en una página web. Las páginas que incluyan código PHP aunque incluyan en su mayoría HTML (fuera del propio PHP), deberán llevar la extensión “php”.

Código 3.14: Escritura en el cuerpo de la página del contenido de una variable

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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 de texto que mostramos en la página web usando “echo”. Así de sencillo, podemos generar partes de la página web o incluso la página web completa, según nuestras necesidades. Ahora vamos ver un ejemplo más completo en el que la página sea dinámica, es decir, una vez realizada la página el usuario podrá interactuar con ella para cambiar su contenido (Código 3.15).

Código 3.15: Formulario para interactuar con el usuario

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>

PÁGINA 35 DE 172

CAPÍTULO 3

<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" /> </form> <?php } // fin del bloque else?> </body></html>

En el ejemplo anterior caso de que alguien haya insertado los datos con anterioridad lo saludamos mostrando su nombre y comida favorita (echo 'Hola, '.$_POST['nombre'].', tu comida favorita es: '. $_POST['comida'];). En caso de que los datos no estén guardados en el servidor mostramos en la web un formulario para que el visitante nos indique su nombre y seleccione su comida favorita de entre 3 posibles opciones para almacenarlos. $_SERVER['PHP_SELF']; nos retorna el valor del nombre de archivo del código PHP que se esté ejecutando actualmente, relativo a la raiz del sitio. Entonces si estoy visualizando a http://www.uma.es/index.php la variable $_SERVER['PHP_SELF'] me arrojará /index.php que es donde guardaremos los datos.

Todas las variables en PHP llevan el símbolo de dólar como prefijo (ejemplo: $variable1, $variable2, $variable3...,$variableN), los tipos de variable no es necesario declararlas, ya que a medida que se usan en la aplicación el servidor reconoce de que tipo son. Para mostrar una cadena (en inglés string) debe estar dentro de comillas dobles o simples (ejemplo: "Hola Mundo", 'Lo que quiero mostrar'). Cabe destacar que si se desea mostrar el símbolo " o ' debe encerrarse en el otro tipo de comillas ("...'...", '..."...') o usarse un escape (\', \").

Toda línea de instrucción siempre termina en un punto y coma (;), al igual que el lenguaje C.

Para insertar un comentario de una sola línea, debe empezar por // o por #. El resto de la línea es tratado entonces como un comentario. Para insertar un bloque de comentario, de una o más líneas, se utiliza la combinación /* y */, por ejemplo: /* <comentarios> */

Para ejecutar las páginas PHP, se necesita un servidor web que soporte PHP. Hoy en día casi la totalidad de servidores soportan PHP pero es necesario ver la compatibilidad entre versiones.

3.2.1.4 Ventajas• Hostings baratos.

PÁGINA 36 DE 172


• Muy fácil de aprender.

• Se caracteriza por ser un lenguaje muy rápido.

• Soporta en cierta medida la orientación a objeto. Clases y herencia.

• Es un lenguaje multiplataforma: Linux, Windows, entre otros.

• Capacidad de conexión con la mayoría de los manejadores de base de datos: MysSQL, PostgreSQL, Oracle, MS SQL Server, entre otras.

• Capacidad de expandir su potencial utilizando módulos.

• Posee documentación en su página oficial la cual incluye descripción y ejemplos de cada una de sus funciones.

• Es libre, por lo que se presenta como una alternativa de fácil acceso para todos.

• Incluye gran cantidad de funciones.

• No requiere definición de tipos de variables ni manejo detallado del bajo nivel.

3.2.1.5 Desventajas• Se necesita instalar un servidor web.

• Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser más ineficiente a medida que las solicitudes aumenten de número.

• La legibilidad del código puede verse afectada al mezclar sentencias HTML y PHP.

• La programación orientada a objetos es aún muy deficiente para aplicaciones grandes.

• Dificulta la modularización.

• Dificulta la organización por capas de la aplicación.

• Cada cual programa a su manera y hace que sea muy difícil mantener el código de terceras personas.

• Existen muchas versiones de PHP con incompatibilidades entre sí.

3.2.1.6 Enlace a la API• API PHP: http://www.php.net/manual/es/funcref.php

3.2.2 JSP (Servidor de Páginas para Java) es una tecnología Java diseñada especialmente para desarrollar web dinámicas y que puede ser incrustado dentro de código HTML. Generalmente se ejecuta en un servidor web, tomando el código en Java como su entrada y creando páginas web como salida. Puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas operativos y plataformas. Es una alternativa a PHP.

Los archivos JSP tienen la extensión “.jsp”.

PÁGINA 37 DE 172

Figura 3.11: Logo de JSP

http://www.php.net/manual/es/funcref.php

CAPÍTULO 3

3.2.2.1 UsoJSP puede considerarse como una manera alternativa, y simplificada, de construir servlets4. Es por ello que una página JSP puede hacer todo lo que un servlet puede hacer. Cada versión de la especificación de JSP está fuertemente vinculada a una versión en particular de la especificación de servlets. JSP no nos da nada que no pudierámos en principio hacer con un servlet. Pero es mucho más conveniente escribir (y modificar) HTML normal que tener que hacer un billón de sentencias “println” que generen HTML. Además, separando el formato del contenido podemos poner diferentes personas en diferentes tareas. Por ejemplo, varios expertos en diseño de páginas web pueden construir el HTML, y los programadores de servlets dedicarse exclusivamente al contenido dinámico.

El funcionamiento general de la tecnología JSP es que el servidor de aplicaciones interpreta el código contenido en la página JSP para construir el código Java del servlet a generar (26). Este servlet será el que genere el documento (típicamente HTML) que se presentará en la pantalla del navegador del usuario. Entre muchas de las posibles aplicaciones tenemos páginas de bancos, juegos online, gestores de contenidos, chats, etc.

3.2.2.2 SintaxisLa sintaxis de JSP es la sintaxis de Java ya que es código Java (Código 3.16). El código de JSP dentro de la propia página está incluido en varias etiquetas especiales.


System.out.println("Hola Mundo"); // muestra en la página la cadena de texto “Hola mundo”

El código JSP está formado por distintas partes:

• Directivas. Las directivas JSP son instrucciones procesadas por el motor JSP cuando la página JSP se traduce a un servlet. Las directivas les dicen al motor JSP que incluya ciertos paquetes y clases. Las directivas están encerradas entre etiquetas de directiva <%@ ... %>. Por ejemplo: <%@ page import="javax.naming.*" %>

• Declaraciones. Las declaraciones JSP nos permiten configurar variables para su uso posterior en expresiones o scriptlets. También podemos declarar variables dentro de expresiones o en scriptlets en el momento de usarlas. Las declaraciones van encerradas entre etiquetas de declaración <%! ... %>. Por ejemplo: <%! String text; %>

• Expresiones. La expresiones JSP nos permiten recuperar dinámicamente o calcular valores a insertar directamente en la página JSP. Las expresiones van encerradas entre etiquetas de expresión <%= ... %>. Por ejemplo: <%= getDate() %>

• Scriptles. Los scriptlets JSP nos permiten embeber segmentos de código java dentro de una página JSP. El codigo embebido se inserta directamente en el servlet generado que se ejecuta cuando se pide la página. Los Scriptlets van encerradas entre etiquetas <% ... %>. Por ejemplo: <% int m = 40; System.out.println("jspService m = " + m); %>

3.2.2.3 EjemploPongamos un ejemplo real que incluya un texto en una página web (Código 3.17). Las páginas que incluyan código JSP aunque incluyan en su mayoría HTML (fuera del propio JSP), deberán llevar la extensión “jsp”.

4 Los servlets son pequeñas aplicaciones Java que se ejecutan en un servidor web.

PÁGINA 38 DE 172

Código 3.17: Escritura en el cuerpo de la página de un saludo acompañado de la fecha actual

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ page import="java.util.*" %> <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>.

PÁGINA 39 DE 172

CAPÍTULO 3

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 documentoPrintWriter pw = res.getWriter(); // obtenemos un objeto Print Writer para enviar respuestapw.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ámetrospw.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.

PÁGINA 40 DE 172


Cuando el usuario pulse el botón enviar del formulario, se envía la "petición" del usuario. El contenedor recibe la petición y buscará el servlet en la lista de los posibles en nuestro descriptor web.xml. Si todo está bien, será encontrado e invocado, ejecutando el método POST (que es como el main), ya que así se indicaba en la etiqueta <FORM> de la página HTML. El método Post() tiene dos argumentos. El primero representa la "petición" del cliente (usuario remoto) y con el nombre de HttpServletRequest; el segundo es la "respuesta" que generará el servlet hacia el cliente en la forma del objeto HttpServletResponse. El servlet, lo primero, ha de indicar el tipo de información que se va a emitir (html) y luego forma un objeto asociado con el navegador web del cliente para imprimir allí los resultados, por medio del método getWriter(). Extraerá los datos de los cuadro de texto (el nombre y la edad) mediante los métodos getParameter() y se dedicará a formar la página HTML dinámica. Una vez terminada, se cierra (close) y es enviada automáticamente.

3.2.2.4 Ventajas• Ejecución rápida del servlets.

• Crear páginas del lado del servidor.

• Multiplataforma.

• Código bien estructurado.

• Integridad con los módulos de Java.

• La parte dinámica está escrita en Java.

• Permite la utilización se servlets.

3.2.2.5 Desventajas• Los hostings en Java son más caros.

• La curva de aprendizaje es mayor. No es tan fácil de aprender como PHP, pero a la larga dará mayores frutos.

3.2.2.6 Enlace a la API• API JSP: http://java.sun.com/products/jsp/2.1/docs/jsp-2_1-pfd2/index.html

3.2.3 PythonPython 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 UsoAlgunos casos de éxito en el uso de Python son Google, Yahoo, la NASA, Industrial Light & Magic, y todas las distribuciones Linux, en las que Python cada vez representa un tanto por ciento mayor de los programas disponibles. Aunque Python tenía deficiencias a la hora de

PÁGINA 41 DE 172

Figura 3.12: Logo de Python

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

CAPÍTULO 3

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

from VideoCapture import Device # de la librería para captura de video importamos el dispositivo

cam = Device() # nueva variable de dispositivo de capturacam.saveSnapshot('image.jpg') # hacemos foto y guardamos la imagen

En el ejemplo anterior capturamos una imagen desde la cámara web cuando ejecutamos este script en la página web.

Al ser Python uno de los lenguajes de programación más versátiles se usa también para construir sitios web, es una perfecta alternativa a PHP. Con algunos de sus sus módulos cómo el “WSGI Reference Module” podemos comenzar a escribir el código sin preocuparte por cual servidor web vamos a utilizar (Apache u otro).

Veamos ahora un ejemplo sencillo similar al que vimos para JSP con el Código 3.17 en el calculamos y mostramos la fecha actual mediante Python (Código 3.23).

Código 3.23: Escritura en el cuerpo de la página de un saludo acompañado de la fecha actual

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> {% import time %} <html>

PÁGINA 42 DE 172


<head></head><body> ¡Hola! Hoy es es {% print datetime.date.today() %}</body></html>

3.2.3.4 Ventajas• Lenguaje de propósito general.• Gran cantidad de funciones y librerías.• Sencillo y rápido de programar.• Multiplataforma.• Licencia de código abierto (Opensource).• Orientado a Objetos.• Portable.

3.2.3.5 Desventajas• Tecnología menos usada de las vistas • Falta de documentación de los WebFrameworks

3.2.3.6 Enlace a la API• API Python: http://docs.python.org/library/

• Frameworks para el desarrollo web: http://wiki.python.org/moin/WebFrameworks

3.3 ConclusionesLas tecnologías web nos permite crear las aplicaciones web. El conjunto de aplicaciones web actuales, es decir, la Web 2.5 y el futuro la Web 3.0 dependen directamente de las posibilidades que nos ofrecen estas tecnologías para el desarrollo. Las tecnologías básicas de la que parte toda aplicación web son HTML y CSS para el etiquetado del contenido y el aspecto respectivamente, seguidas de uno o varios lenguajes de programación interpretados tales como JavaScript, PHP o JSP entre otros.

A lo largo de los años estas tecnologías se han ido perfeccionando. En la actualidad existen multitud de opciones de desarrollo de aplicaciones web, dependiendo del proyecto será conveniente elegir una tecnología u otra pero por lo general lo más usado en la Web 2.5 es precisamente lo hemos visto.

Nos hemos embarcado en un breve recorrido histórico sobre las tecnologías, hemos comentado los lenguajes de etiquetado y los interpretados más extendidos tanto desde el lado del cliente como del servidor, con sus ventajas e inconvenientes. A continuación mostraremos una tabla comparativa donde tratamos aspectos de uso, tipo de programación y expresividad. Y terminaremos mostrando gráficos de popularidad actual y tendencia para los lenguajes que hemos tratado en comparación con el resto (hemos explicado los que más se usan y los que más se usarán).

Tabla 3.2: Lenguajes de programación vistos para la web

Uso Tipo de Programación Expresividad

PÁGINA 43 DE 172

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

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

CAPÍTULO 3

JS Web - Cliente Imperativa, Orientada a objetos, Funcional, Reflexiva ****

PHP Web - Servidor Imperativa, Orientada a objetos, de Procedimientos, Reflexiva ***

JSPAplicación,

Web - ServidorImperativa, Orientada a objetos, Genérica,

Reflexiva ***

PythonGeneral,

Aplicación, Web - Servidor

Imperativa, Orientada a objetos, Orientada a aspectos, Funcional Reflexiva *****

3.3.1 TendenciaPara 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)

• Silverlight (necesitamos instalarlo, propietaria de Microsoft)

PÁGINA 44 DE 172

Figura 3.13: Tendencia de popularidad de las tecnologías en el lado del cliente


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

• JSP de Java

• ASP de .NET (necesitamos servidores Windows, propietaria de Microsoft)

• Python

PÁGINA 45 DE 172

Figura 3.14: Tendencia de popularidad de las tecnologías en el lado del servidor

CAPÍTULO 3

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.

PÁGINA 46 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.

UUn 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

PÁGINA 47 DE 172

Capítulo

4

CAPÍTULO 4

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

• Gestión de contenido optimizado para internet (texto, imágenes).

• Gestión de contenido multimedia.

• Gestión documental.

• Gestión de portales.

• Gestión de tramitación y workflow.

• Gestión de trabajo colaborativo.

• Gestión de sistemas de comercio electrónico.

• Herramientas de soporte a la web 2.0.

PÁGINA 48 DE 172

GESTORES DE CONTENIDOS

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:

• Requisitos del sistema: Servidor de aplicaciones, servidor web, base de datos, licenciamiento, sistema operativo.

• Seguridad: Sistemas de auditoría, integración con sistemas de autenticación, granularidad de los privilegios, soporte de protocolos seguros.

• Soporte: Curva de aprendizaje, documentación, soporte online, disponibilidad de APIs de desarrollo.

• Facilidad de uso: Elaboración de contenidos con editor WYSIWYG y uso de drag-n-drop, asistentes para incorporación de elementos multimedia, lenguaje de macros, asistentes, correctores ortográficos, plantillas…

• Rendimiento: Uso de memorias cachés, balanceo de carga, replicación de bases de datos, exportación a contenidos estáticos.

• Gestión: Gestión de publicidad, programación de publicación de contenidos, gestión de portales, uso de temas, estadísticas, sindicación de contenidos, opciones de interoperabilidad, workflow, uso de metadatos…

• Herramientas 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…

• Soporte 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 contenidosLos módulos software que se pueden encontrar en las herramientas de gestión de contenidos son los siguientes:

• Content Manager:

- Creación y edición de contenidos

- Gestión de validación y distribución de contenidos (workflow)

- Publicación de contenidos

- Gestión del ciclo de vida de los contenidos

• Portal manager:

• Módulo de integración con datos de negocio (soportados en bases de datos relacionales, archivos XML, etc)

• Herramientas de comunicación hacia y entre usuarios

PÁGINA 49 DE 172

CAPÍTULO 4

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 contenidosLas 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 PlantillasTambién se pueden crear contenidos a través de plantillas de documentos externos (como podrían ser documentos de paquetes ofimáticos), si bien lo habitual es que 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

PÁGINA 50 DE 172


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 documentalAlgunos 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 complementariosBajo 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 contenidosPor 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

PÁGINA 51 DE 172

CAPÍTULO 4

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

PÁGINA 52 DE 172


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:

• Generación de portales basados en lenguajes de script dinámicos (JSP, PHP, ASP).

• Generación de portales 100% en HTML.

• Uso de una API para la obtención de los contenidos gestionados.

• Para el caso de aplicaciones basadas en tecnología J2EE se pueden generar 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 contenidosDesde 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

PÁGINA 53 DE 172

CAPÍTULO 4

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

PÁGINA 54 DE 172


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ónMuchos 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 generalLa arquitectura funcional de los sistemas de gestión de contenidos contempla los siguientes elementos.

• Servidor central para el soporte de las aplicaciones

• Base de datos central relacional, documental o ambas

• Clientes de gestión, ligeros o pesados.

• Clientes ligeros o pesados para el usuario final.

• Opcionalmente base de datos en las estaciones de gestión.

• Opcionalmente base de datos en las estaciones reproductoras.

PÁGINA 55 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.

A

Todas estas aplicaciones que nos facilitan el uso de las tecnologías web pueden clasificarse en un conjunto de diecisiete categorías:

• Analizadores

• Blogs

• CAPTCHAs

• CMS

• Sistemas de comentario

• Administradores de bases de datos

• Herramientas de documentación

• Editores

• Script para fuentes de texto

• Paneles para hospedaje web

• Seguidores de incidencias

• Foros

• Wikis

• Galerías de imágenes

PÁGINA 57 DE 172

Capítulo

5

CAPÍTULO 5

• Visualizadores de vídeo

• Widgets

• Eshops

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 AnalizadoresLos 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áginasVistas

% 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

PÁGINA 58 DE 172

APLICACIONES

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

PÁGINA 59 DE 172

CAPÍTULO 5

5.1.1 Google AnalyticsA grandes rasgos Google Analytics ofrece estadísticas sobre la inversión publicitaria, seguimiento de canales de tráfico y elementos multimedia, informes personalizados 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 publicitariaGoogle 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.

PÁGINA 60 DE 172

APLICACIONES

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

PÁGINA 61 DE 172

Figura 5.1: Captura de pantalla de Google Analytics

CAPÍTULO 5

5.1.2.3 Informes personalizados para estadísticas específicasGoogle Analytics permite que podamos analizar subconjuntos del tráfico del sitio. Seleccionando un informe personalizado predefinido, como "Tráfico de pago" o "Visitas 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ónGoogle 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 datosGoogle 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 BlogsLos 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

PÁGINA 62 DE 172

APLICACIONES

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


PáginasVistas


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

PÁGINA 63 DE 172

CAPÍTULO 5

5.2.2.2 Interfaz fácil de usarSin duda el triunfo de Blogger se debe a la sencillez de una interfaz fácil de usar que permite, entre otras opciones, cambiar fuentes, aplicar negrita o cursiva a tu texto y ajustar su color 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ídeosPodemos 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 AdSenseCon 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.

PÁGINA 64 DE 172

Figura 5.2: Captura de pantalla de Blogger

APLICACIONES

5.2.2.5 Ampliar el número de seguidoresBlogger 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 nuestra imagen y perfil a nuestro blog.

5.2.2.6 Comentarios de nuestros lectoresLos lectores pueden hacer comentarios útiles y oportunos en cualquiera de nuestras entradas 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 nuevaTus 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 idiomasBlogger está disponible actualmente en 41 idiomas, entre los que se incluyen: alemán, chino, coreano, español, francés, inglés, italiano, japonés, neerlandés y portugués. Los hablantes de árabe, hebreo y persa pueden utilizar Blogger con la pantalla y el formato de derecha 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áginasCon la función Páginas de Blogger, podemos crear páginas nuevas vinculadas a nuestro blog (página principal). Por ejemplo, podemos crear una página “Acerca de este blog” o una página “Contacto” de manera similar a como escribimos una entrada nueva en un blog, y hacer que 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 entradasEn 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.

PÁGINA 65 DE 172

CAPÍTULO 5

5.2.2.12 Múltiples usuarios para contribuirCon 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 PluginsPodemos 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 CAPTCHAsLos 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


PáginasVistas


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

PÁGINA 66 DE 172

Figura 5.3: Captura de pantalla de reCAPTCHA

APLICACIONES

5.3.2 Características de reCAPTCHA

5.3.2.1 Anti spamLa 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 librosLa digitalización de libros es la verdadera función para la que fue creada reCAPTCHA (actualmente propiedad de Google). Con reCAPTCHA se pretende digitalizar los 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 la digitalización de libros y documentos del Internet Archive.

5.4 Gestores de contenidoUn sistema de gestión de contenido ( CMS) permite la creación y administración de contenidos principalmente en páginas web. Se trata de una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio, permitiendo manejar de manera independiente el contenido y el diseño

A continuación en la Tabla 5.4, por orden de uso mostramos las aplicaciones más usadas para la creación de páginas web.

Tabla 5.4: Gestores de contenido


PáginasVistas


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

PÁGINA 67 DE 172

CAPÍTULO 5

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

PÁGINA 68 DE 172

APLICACIONES

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 WordPressA 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ónWordPress ofrece la posibilidad de acceder y modificar cualquier aspecto de nuestro sitio web, pudiendo instalarlo también en un computador local, o en una Intranet.

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 UTCWordPress permite fijar la hora como diferencia del Tiempo Universal Coordinado, para que así todos los elementos relacionados con el tiempo (hora y fecha de los comentarios, por ejemplo) sean guardados con la hora GMT, que es un estándar universal. Entre algunas ventajas, 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 gzipWordPress 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

PÁGINA 69 DE 172

CAPÍTULO 5

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ónWordPress, 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.

PÁGINA 70 DE 172

Figura 5.4: Captura de pantalla de WordPress

APLICACIONES

5.4.2.8 Generación dinámica de páginasNo es necesario reconstruir todas sus páginas cada vez que actualiza su bitácora, o cambia algú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 es mínimo.

5.4.2.9 IdiomasWordPress usa el método gettext para que la traducción sea un proceso muy fácil de realizar 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 permanentesLas 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 portalesEn 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 TemasWordPress 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 plantillasWordPress 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 plantillasCada 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.

PÁGINA 71 DE 172

CAPÍTULO 5

5.4.2.16 Etiquetas de plantillasLas 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 PluginsLos 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ñaWordPress permite proteger páginas, secciones, entradas incluso la página completa restringiendo los accesos por medio de contraseñas.

5.4.2.19 Mensajes programadosPodemos 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áginasWordPress 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 autoguardadoPodemos 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ónPodemos 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 comentarioUn 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.

PÁGINA 72 DE 172

APLICACIONES

Tabla 5.5: Sistemas de comentario


PáginasVistas


1 Disqus 100 % 4,506 100 % 5,965 100 % 11,430

5.5.1 DisqusA 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)


PÁGINA 73 DE 172

Figura 5.5: Captura de pantalla de Disqus

CAPÍTULO 5

5.5.2 Características de Disqus

5.5.2.1 Conexión entre conversacionesEs 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 comentaristaDisqus 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 discursionesPodemos 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ónEl 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 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-SpamDisqus 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 comentaristasGracias 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 datosUn software para administración de una bases de datos permite manejar la administración de un sistema de gestión de bases de datos a través de una páginas web, utilizando Internet. Entre las características generales permite crear y eliminar bases de datos, crear, eliminar y alterar tablas, borrar, editar y añadir campos.

A continuación en la Tabla 5.6, por orden de uso mostramos las aplicaciones más usadas para la gestión de bases de datos en Internet.

PÁGINA 74 DE 172

APLICACIONES

Tabla 5.6: Administradores de bases de datos


PáginasVistas


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


PÁGINA 75 DE 172

Figura 5.6: Captura de pantalla de phpMyAdmin

CAPÍTULO 5

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 MantenimientoMantenimiento de las bases de datos y tablas según la configuración del servidor. Administración de múltiples servidores. Gestión de procedimientos almacenados y disparadores.

5.6.2.3 Importar contenido de la base de datosphpMyAdmin permite importar datos de CSV y SQL

5.6.2.4 Exportar contenido de la base de datosExiste una gran variedad de tipos de datos a los que podemos exportar, tales como CSV, SQL, XML, PDF, ISO / IEC 26300 - OpenDocument Text y hojas de cálculo, Word, Excel, LATEX entre otros.

5.6.2.5 BúsquedasBú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 bases de datos (QBE).

5.6.2.6 FormatosphpMyAdmin 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ónUna 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


PáginasVistas


1 phpDocumentor 100 % 51 100 % 57 100 % 72

PÁGINA 76 DE 172

APLICACIONES

5.7.1 phpDocumentorA 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 formatosPhpDocumentor genera documentación en HTML, PDF (directamente), CHM (con ventanas de ayuda del compilador) y XML DocBook.

5.7.2.2 Versatilidad de accesoDispone de una interfaz web y la interfaz de línea de comandos. Además las salidas de documentación son totalmente personalizables usando plantillas.

5.7.2.3 Soporta JavaDocReconoce la documentación JavaDoc extendiéndola con unas etiquetas especiales para PHP.

5.7.2.4 EdiciónPermite enlaces automáticos, diagramas de herencia de clases y reemplazar documentos de

PÁGINA 77 DE 172

Figura 5.7: Captura de pantalla de phpDocumentor

CAPÍTULO 5

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

A continuación en la Tabla 5.8, por orden de uso mostramos las aplicaciones WYSIWYG más usadas para edición web.


PáginasVistas


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 DreamweaverA 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 accesiblesDreamweaver 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 integradaTenemos compatibilidad con las pruebas y creaciones de diversos marcos de trabajo de sistemas de gestión de contenido como WordPress, Joomla y Drupal.

PÁGINA 78 DE 172

APLICACIONES

5.8.2.3 Inspección de CSSPodemos 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 PHPMuestra 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 MejoradaGestione 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 textoUn 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

PÁGINA 79 DE 172

Figura 5.8: Captura de pantalla de Dreamweaver

CAPÍTULO 5

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


PáginasVistas


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ónA 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)


PÁGINA 80 DE 172

Figura 5.9: Captura de pantalla de Cufón

APLICACIONES

5.9.2 Características de Cufón

5.9.2.1 Reemplazo de textoCufó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 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 pluginTodo 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ácilFunciona en IE, Firefox y Safari, necesitando escasa o directamente ninguna configuración.

5.9.2.4 RápidoCarga casi instantáneamente sin tener que soportar el “parpadeo” que usualmente se experimenta con sIFR.

5.9.2.5 AccesibilidadCufon de cara al posicionamiento (seo) de nuestros contenidos, es totalmente válido interprentando nuestros textos como xhtml válido.

5.10Paneles para hospedaje webUn 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


PáginasVistas


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

PÁGINA 81 DE 172

CAPÍTULO 5

3 DirectAdmin 3,9 % 174 3,7 % 150 5,6 % 1,864

5.10.1 cPanelA grandes rasgos cPanel nos permite básicamente las mismas funciones que el resto de paneles, es decir, estadísticas de visitas, detalles sobre el ancho de banda usado, manejo de archivos, configuración de la cuenta de email, manejo de bases de datos, manejo de usuarios de FTP, acceso a cuentas del servidor y manejo de subdominio entre otras. (38)


5.10.2 Características de cPanel

5.10.2.1 Creación directa y resguardo de nuestra webcPanel 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 seguridadUna 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ísticasPodemos 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 SeguridadcPanel 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 desarrolladoresPodemos 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üeSegú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.

PÁGINA 82 DE 172

APLICACIONES

PÁGINA 83 DE 172

Figura 5.10: Captura de pantalla de cPanel

CAPÍTULO 5

5.11 Seguidores de incidenciasUn seguidor de incidencias administra y mantiene listas de incidencias. Permite crear, actualizar 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


PáginasVistas


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

PÁGINA 84 DE 172

APLICACIONES

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

PÁGINA 85 DE 172

Figura 5.11: Captura de pantalla de Get Satisfaction

CAPÍTULO 5

• Posibilita configurar las opciones de entrada a través de las que puede acceder nuestra comunidad (como Facebook, Google, etc)

• Permite inicio de sesión único a través de Fastpass

5.11.2.3 WidgetsGet Satisfaction dispone de widgets para: fichas de votos, investigación, lista de temas, categoría y productos específicos.

5.11.2.4 Opciones de integraciónIntegración con Zendesk, Facebook, Pivotal, Salesforce, Twitter, Parature, CRM, etc.

5.11.2.5 SoporteCon Get Satisfatction podemos disponer de soporte desde la propia comunidad de Get Satisfaction, vía email y a través de una cuenta de administración.

5.12ForosUn foro es una aplicación web que da soporte a discusiones u opiniones en línea. Hay diferentes tipos de foros disponibles: exclusivos, de noticias, debate único, abiertos a todos y de preguntas y respuestas. Para un uso general el foro suele ser un lugar abierto donde cualquiera puede empezar un nuevo tema de debate cuando quiera y todos pueden calificar los mensajes. Normalmente, cada persona plantea un tema y cualquiera de los usuarios pueden responder a cualquier tema. Todos los mensajes llevan adjunta la foto del autor o la foto por defecto que vienen en nuestro perfil cuando nos hacernos usuarios del foro.

Respecto a las discursiones estas se pueden ver anidadas, por rama, o presentar los mensajes más antiguos o los más nuevos primero. Los administradores pueden mover fácilmente los mensajes y temas de discusión entre distintas partes del foros y en caso de que se adjunten imágenes estas se mostraran dentro de los mensajes.

A la hora de búsquedas y seguimiento de mensajes, podemos activar un canal RSS y el número de artículos a incluir. Permite búsquedas, seguimiento de mensajes leídos/no leídos en los foros con resaltado que permite ver todos los mensajes nuevos rápidamente y controlar cómo son mostrados (por foro, por usuario o por sitio).

A continuación en la Tabla 5.12, por orden de uso mostramos las aplicaciones más usadas para la creación, mantenimiento y gestión de foros.

Tabla 5.12: Foros


PáginasVistas


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

PÁGINA 86 DE 172

APLICACIONES

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


PÁGINA 87 DE 172

Figura 5.12: Captura de pantalla de vBulletin

CAPÍTULO 5

5.12.2 Características de vBulletin

5.12.2.1 Web y base de datos independientesvBuelletin 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ónvBulletin trae un panel de control donde podemos realizar operaciones de moderación del foro, ver registros y estadísticas y usar el programador de tareas para solventar tareas repetitivas de mantenimiento del foro.

5.12.2.3 Edición y personalizaciónTodo 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 ilimitadaEs posible disponer de varios foros, subforos, sub-subforos, etc; pudiendo configurar un sistema de permisos por zonas.

5.12.2.5 MiembrosPara 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.13WikisUna wiki es una aplicación web que es un sitio web cuyas páginas web pueden ser editadas por múltiples voluntarios a través del navegador web. Los usuarios pueden crear, modificar o borrar un mismo texto que comparten. El uso principal de las wikis suele ser el de ofrecer documentación y definiciones aportadas por múltiples usuarios.

A continuación en la Tabla 5.13, por orden de uso mostramos las aplicaciones más usadas para la creación, mantenimiento y gestión de wikis.

Tabla 5.13: Wikis


PáginasVistas


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

PÁGINA 88 DE 172

APLICACIONES

5.13.1 MediaWikiA 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 encabezadosA 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ónCada 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 FormulasMediaWiki 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.

PÁGINA 89 DE 172

Figura 5.13: Captura de pantalla de MediaWiki

CAPÍTULO 5

5.13.2.4 Plantillas y temasPodemos usar plantillas personalizadas con parámetros y temas o pieles ("skins") por cada usuario para configurar la parte estética.

5.13.2.5 PluginsMediaWiki 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áginasEs posible bloquear temporalmente usuarios o páginas. Admite varios niveles de usuario, así como la posibilidad de que sólo los usuarios registrados puedan editar, o de impedir el registro de más usuarios.

5.13.2.7 Lineas de tiempos y categoríasPodemos crear líneas de tiempos a través de código wiki y usar su sistema de categorías jerárquico, para crear listados de artículos o de "thumbnails" de imágenes.

5.14Galerías de imágenesUna 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


PáginasVistas


1 Coppermine 100 % 338 100 % 310 100 % 2,998

5.14.1 CoopermineA 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)

PÁGINA 90 DE 172

APLICACIONES


PÁGINA 91 DE 172

Figura 5.14: Captura de pantalla de Coppermine

CAPÍTULO 5

5.14.2 Características de Coopermine

5.14.2.1 Usuarios y gestión de imágenesLos 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 visualCoppermine posee un sistema de selección de temas por parte del usuario y varios temas pre-instalados. También admite el uso de múltiples idiomas y contiene su propia biblioteca idiomática. Esto permite que sus usuarios usen la galería en su idioma preferido.

5.14.2.3 Optimización del códigoCoppermine genera dinámicamente el código html necesario para mostrar las categorías, categorías, álbumes e imágenes. Esto reduce drásticamente la cantidad de archivos y 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.15Visualizadores de vídeoUn visualizador de vídeo nos permite integrar en nuestra en nuestra página vídeos para poder visualizarlos. Existen visualizadores internos o externos, los primeros visualizan los vídeos alojados en nuestra propia página y los externos hacen uso de la velocidad y capacidad de hospedaje de servidores específicos de vídeo. Por lo general, para páginas personales o de pequeña empresa el uso de visualizadores externos será la opción acertada según calidad y precio cero.

A continuación en la Tabla 5.15, por orden de uso mostramos las aplicaciones más usadas para la visualización de vídeo a través de servidores externos.

Tabla 5.15: Visualizadores de vídeo


PáginasVistas


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

PÁGINA 92 DE 172

APLICACIONES

5.15.1 YouTubeA grandes rasgos YouTube es un sitio en el cual los usuarios pueden subir y compartir vídeos. Los enlaces a vídeos de YouTube pueden ser también puestos en blogs, redes sociales o 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ídeoLos 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 privadosLos 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 SuscripcionesLos 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 webLos usuarios que dispongan de software Flash y de una cámara web pueden grabar de forma

PÁGINA 93 DE 172

Figura 5.15: Captura de pantalla de YouTube

CAPÍTULO 5

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 usuarioPodemos 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 actividadPodemos realizar actividades en YouTube como por ejemplo, marcar un vídeo como favorito, subirlo o puntuarlo y compartirlas en redes sociales como Facebook o Twitter.

5.15.2.7 CanalesLos 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ídeoLos 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.16WidgetsUn 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


PáginasVistas


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

PÁGINA 94 DE 172

APLICACIONES

5.16.1 AddThisA 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 inteligenteLa aplicación es capaz de detectar cual es el mejor servicio para el usuario y ofrecerlo primero. Por ejemplo si el usuario usa bastante Facebook, AddThis puede rastrear su huella y ofrecer que comparta la página que se quiere compartir en Facebook.

5.16.2.2 Gran cantidad de servicios para compartirAddThis tiene la colección de servicios para compartir más extensa que existe permitiendo compartir nuestro sitio en prácticamente cualquier plataforma sin ningún problema.

5.16.2.3 MultilingüeAddThis traduce automáticamente a más de 50 lenguas.

5.16.2.4 Privacidad y SeguridadAddThis soporta SSL/HTTPS.

5.16.2.5 Interfaz personalizablePodemos cambiar los colores, tamaños, añadir nuestra marca, etc.

5.16.2.6 EstadísticasPodemos tener todo tipo de estadísticas sobre el contenido que más le interesa a los usuarios compartir de nuestra página, sitios de interés para hacer comparticiones, etc.

PÁGINA 95 DE 172

Figura 5.16: Captura de pantalla de AddThis

CAPÍTULO 5

5.16.2.7 Integración con FlashAddThis no solo se integra con páginas normales sino que se integra a la perfección con vídeos, aplicaciones y páginas hechas con Flash.

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

Tabla 5.17: EShops


PáginasVistas


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 MagentoA 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ñadidosMagento permite la gestión de tiendas múltiples en un sólo panel de control, dispone de apoyo

PÁGINA 96 DE 172

APLICACIONES

para la localización de los idiomas y divisas.

PÁGINA 97 DE 172

Figura 5.17: Captura de pantalla de Magento

CAPÍTULO 5

5.17.2.2 Búsqueda y sindicaciónPodemos 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.

5.17.2.3 TarifasLa 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 PagoMagento se integración con muchas pasarelas de pago incluyendo PayPal y authorize.net, permite ventas cruzadas y el pago en una sola página.

5.17.2.5 Presentación y estadísticasDisponemos de una interfaz muy cuidada con un sistema de información de productos 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 APIMagento 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 virtualesLos 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 clientesEsta funcionalidad permite a los clientes definir texto, imágenes, etc. para los productos.

5.17.2.9 Paquetes de ProductosPodemos crear paquetes de productos y así extender aún más las opciones disponibles de productos en Magento.

5.17.2.10 Soporte de impuestosLas reglas de impuestos están agregadas al núcleo.

5.18Conclusiones

5.18.1 Aplicaciones más usadas por categoríaHemos 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.

PÁGINA 98 DE 172

APLICACIONES

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

PÁGINA 99 DE 172

CAPÍTULO 5

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

PÁGINA 100 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)

I

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:

• Estudio de la accesibilidad

• Búsqueda del entorno y herramientas de trabajo adecuados

• Estructura de archivos y carpetas para organizar la web

• Mapa conceptual para definir y aclarar los contenidos

• Pre-maquetación e ideas de diseño

• Maquetación

• Interacción y creación de animaciones y efectos

• Contenido dinámico

• Optimización para la velocidad de carga

• Verificación de que las tecnologías cumplen el estándar

• Dar de alta nuestro sitio en los principales buscadores

• Optimización para los motores de búsqueda

• Estadísticas y marketing

PÁGINA 102 DE 172

Capítulo

6

CAPÍTULO 6

PÁGINA 103 DE 172

Figura 6.1: Captura de pantalla de la web que realizaremos 1/3



IMPLEMENTACIÓN

6.1 AccesibilidadAntes 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íasTal como vimos en capítulos anteriores, existen una gran variedad de tecnologías. Para este ejemplo vamos a usar las siguiente tecnologías:

• XHTML (contenido)

• CSS (aspecto)

• JavaScript (interacción y animación)

• jQuery (interacción y animación)

• PHP (contenido desde el servidor y gestión de formularios)

Para el desarrollo de estás tecnologías vamos a apoyarnos en sus APIs y/o especificaciones, a través de una página web que las recopila (Figura 6.4). (49)

PÁGINA 104 DE 172

Figura 6.4: Captura de pantalla de gotAPI

CAPÍTULO 6

6.2.2 Editor webDesde la parte de aplicaciones vamos a optar por Notepad++ (Windows) (50) o Kate (Linux) (51) como editor web frente a FrontPage, DreamWeaver y otros editores 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.

6.2.3 AplicacionesOtras 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 NavegadoresVamos 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).

PÁGINA 105 DE 172

Figura 6.5: Captura de pantalla de Notepad++

IMPLEMENTACIÓN

6.2.5 Servidor localPara 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:

• Windows/Linux, como sistema operativo.

• Apache, como servidor web.

• MySQL, como gestor de bases de datos.

• PHP (generalmente), Perl, o Python, como lenguajes de programación.

El uso de un WAMP/LAMP permite servir páginas html a internet, además de poder gestionar datos en ellas.

6.2.6 DepuradorPara poder depurar el código, visualizar posibles alarmas o errores en el html, js, css... etc; usaremos la consola de errores del Firefox (Figura 6.6).

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

PÁGINA 106 DE 172

Figura 6.6: Captura de pantalla de la consola de errores de Firefox

CAPÍTULO 6

versión de las hojas de estilo en cascada que se está desarrollando).

6.2.7 ComplementosAlgo que tampoco puede faltar a un desarrollador web es el Firebug (Figura 6.7) (53), 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 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.

PÁGINA 107 DE 172

Figura 6.7: Firebug para Firefox

IMPLEMENTACIÓN

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.

PÁGINA 108 DE 172

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

CAPÍTULO 6

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, 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 webEmpecemos 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:

• en: páginas .html o php en inglés

• es: páginas .html o php en español

• css: hojas de estilos .css

• js: JavaScript .js

• img: imágenes y gif animados

• pdf: documentos en PDF

PÁGINA 109 DE 172

Figura 6.10: Captura de pantalla de FireFTP

IMPLEMENTACIÓN

La estructura anterior es una posible organización de los elementos de una página web. 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 webSabiendo 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.

PÁGINA 110 DE 172

Figura 6.11: Ejemplo de estructura de archivos y carpetas para un sitio web

Figura 6.12: Mapa conceptual

CAPÍTULO 6

Los pasos para obtener una página de calidad en cuanto a contenido y son:

• Crear un sitio con una jerarquía y enlaces de texto claros. Se debe poder acceder a todas las páginas desde al menos un enlace de texto estático.

• Tenemos que ofrecer a los usuarios un mapa del sitio con enlaces que conduzcan a 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.

• Una página debe contener un número razonable de enlaces.

• Debemos crear un sitio útil con mucha información y redactar páginas que describan 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.

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

• Tenemos que asegurarnos de que los elementos <title> (título) y los atributos "alt" (descripción de una imagen) de nuestro sitio sean descriptivos y precisos.

• Cuando estemos creando la jerarquía de páginas del sitio si decidimos utilizar pá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ónTeniendo 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.

PÁGINA 111 DE 172

IMPLEMENTACIÓN

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.

PÁGINA 112 DE 172

Figura 6.13: Código maquetado tipo HTML5 en HTML

Figura 6.14: Buenas prácticas para el maquetado básico

CAPÍTULO 6

6.5.1 Propuestas gráficasEn 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 contenidoCon 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.

• Menú 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.

• Navegació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.

• Idiomas. Hace referencia al número de lenguas en los que está disponible la página.

PÁGINA 113 DE 172

Figura 6.15: Propuestas de aspecto

IMPLEMENTACIÓN

• Vista. Nos permite conmutar entre 2 tipos de vista: normal o compacta.

• Powered by. Enlace principal a la página de inicio y a la empresa que desarrolla el producto.

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

• Submenú. Corresponde a la barra gris consecutiva al logo, es un menú adicional para navegar a través de la página Producto.

• Paneles, formado por 2 subpaneles: Contenido a la izquierda que contiene la mayoría de la información y Destacar.

• Contenido, panel principal encargado de albergar el grosor de contenido de la página.

• Destacar, muestra información puntual del producto y enlaza al lugar interno de la página donde se encuentra.

• Fondo. Se refiere al fondo azul animado de la página.

• Menú Inferior. Corresponde a la barra inferior negra con degradado que contiene la misma navegación que aparecía en el Menú Superior más el Copyright, y en logo de validación de XHTML.

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

PÁGINA 114 DE 172

Figura 6.16: Esquema de maquetado de nuestra web

CAPÍTULO 6

6.5.3 Dibujo de la web en un editor de imágenesTeniendo el esquema del maquetado y habiendo definido las partes internas ya podemos 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ónComo 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 CimientosAntes 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 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

PÁGINA 115 DE 172

Figura 6.17: Imagen de la web con las distintas partes marcadas

IMPLEMENTACIÓN

viene por defecto en Linux. Así que codificaremos con UTF-8 que es simplemente una manera de usar Unicode. (59)

Terminado los ajustes en el editor empezamos ha escribir el código. El primer paso, es definir el tipo de documento e indicar la codificación (Código 6.1), luego enlazamos a los cimientos de la maquetación añadiendo los enlaces correspondiente al framework CSS: 960 Grid System.

Código 6.1: Tipo de documento, codificación y enlaces para 960 Grid System

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="960.css"></head>

6.6.2 Cuerpo baseLo 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="container_12"> <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> <div id="barra-submenu"> 

<div class="container_12">  </div></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>

PÁGINA 116 DE 172

CAPÍTULO 6

<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="container_12"> <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.

6.6.3 Añadiendo más detalles al estilo de la webAunque 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:

PÁGINA 117 DE 172

Figura 6.18: Contenedor de 12 columnas (máximo)

IMPLEMENTACIÓN

6.6.3.1 Incluir CSS en el mismo documento HTMLLos estilos se definen en una zona específica del propio documento HTML (Código 6.3). 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 externoEn 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 HTMLEl último método para incluir estilos CSS en documentos HTML para casos muy específicos. Esto desaprovecha una de las cualidades más importantes del CSS que es la portabilidad 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.

PÁGINA 118 DE 172

CAPÍTULO 6

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

PÁGINA 119 DE 172

IMPLEMENTACIÓN

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 copyrightBuscamos 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á listosetCopyrightYear(); // llamamos a la función para poner el año actual

}

PÁGINA 120 DE 172

Figura 6.19: Año de fecha actual

CAPÍTULO 6

6.7.2 Efecto de iluminado y apagado para los idiomasBuscamos 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ñasBuscamos ocultar ciertas partes para pantallas pequeñas (6.22).

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

PÁGINA 121 DE 172

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

IMPLEMENTACIÓN

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 GIFBuscamos sustituir un archivo de imagen por otro de animación.

Tenemos una imagen fija en JPEG y una animación de esa imagen en GIF (varias imá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 });});

PÁGINA 122 DE 172

CAPÍTULO 6

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.

6.8 Contenido dinámicoEn 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).

PÁGINA 123 DE 172

Figura 6.23: Efecto de desplazamiento del recuadro azul con bordes redondeados

IMPLEMENTACIÓN

6.8.1 Formulario de contactoHemos 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> <textarea name="mensaje" cols="31" rows="5"></textarea> <label for="enviar"> <input name="enviar" value="Enviar consulta" type="submit"></label> </form>';

?>

PÁGINA 124 DE 172

Figura 6.24: Formulario de contacto

CAPÍTULO 6

6.9 Optimizando la webUna 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 rotosSi eliminamos los "enlaces rotos", esto es, las solicitudes que se traducen en respuestas 404/410, evitamos desperdiciarlas.

6.9.2 Eliminar CSS desde JSLas expresiones CSS o propiedades dinámicas consisten en expresiones javascript incluidas 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 externoEl objetivo es evitar realizar muchas peticiones, cuanto más CSS externos, más solicitudes. Google recomienda usar hasta un máximo de 3 archivos externos. Nosotros usaremos 1 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 externoCombinar 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 sitioRetrasar la carga de funciones JavaScript que no son necesarias en la carga inicial de la página, reducen la descarga inicial, permitiendo que otros recursos sean descargados en paralelo, 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>

PÁGINA 125 DE 172

IMPLEMENTACIÓN

Código 6.19: Archivo externo con todo el JS combinado que podemos cargar a posterior

<body>….<script type="text/javascript" src="../js/full.bottom.script.js"></script></body>

6.9.6 Activar compresiónUtilizar la compresión GZIP es una gran mejora que podemos realizar para acelerar la 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ónphp_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)

PÁGINA 126 DE 172

CAPÍTULO 6

6.9.7 Indicar fecha de expiraciónIndicar una fecha de expiración (Código 6.23) en la cabecera http para recursos estáticos, permite que el explorador de prioridad a los recursos descargados, en lugar de volver 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 cabecerasHabilitando 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 CSSCompactar 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).

PÁGINA 127 DE 172

Figura 6.25: Resultado de compresión gzip

IMPLEMENTACIÓN

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

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.

PÁGINA 128 DE 172

Figura 6.26: CSS Drive - CSS Compressor (Advanced Mode)

CAPÍTULO 6

En el primer paso (CSS Compressor de CSS Drive) conseguimos una compresión del 19%.

• Original size: 19137 bytes

• Compressed size: 15594 bytes

• Savings: 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 HTMLCompactar 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 JSSimilar 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)

PÁGINA 129 DE 172

IMPLEMENTACIÓN

6.9.12 Minimizar el tamaño de las respuestasManteniendo 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)

PÁGINA 130 DE 172

Figura 6.27: JavaScript Compressor

CAPÍTULO 6

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.

6.9.13 Reducir DNSReducir el número de nombres de dominios únicos, desde donde los recursos son descargados, reduce el número de resoluciones de DNS (sistema de nombre de dominio, es decir, 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 redireccionesMinimizar 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ágenesEl 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 JSOrdenar 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>

PÁGINA 131 DE 172

Figura 6.28: Optimización de imágenes

IMPLEMENTACIÓN

...<link rel="stylesheet" href="../css/full.style.min.css"/><script type="text/javascript" src="../js/full.top.script.min.js"></script></head>

6.9.17 Descargas paralelasServir 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 cabeceraDebemos 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 usadoEste 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 únicaEs 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ágenesEl 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 necesarioLos 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

PÁGINA 132 DE 172

CAPÍTULO 6

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 cabeceraEl 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ágenesEspecificar 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 eficientesHay selectores CSS que son más eficientes que otros, básicamente porque depende del ámbito, en la generación del árbol DOM el parser tendrá que recorrer un número menor o mayor 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.10Verificando las tecnologíasUna vez optimizado nuestro sitio el siguiente paso es la validación de las tecnologías usadas, concretamente validaremos las de marcado de texto (XHTML para nuestro caso) y el estilo (CSS 2.1 para nuestro caso). Respecto al resto de tecnologías, es decir, JavaScript y PHP 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.

PÁGINA 133 DE 172

IMPLEMENTACIÓN

6.10.1 Verificación del HTMLLos estándares HTML los podemos encontrar en la página oficial de W3C, además de herramientas muy útiles para verificar que nuestro sitio se encuentra dentro de los estándares de la marcado (Figura 6.29). (64)

Esta herramienta de validación tiene tres formas de operar:

• Por la dirección de nuestra página.

• Subiendo el archivo HTML (por ejemplo) que queremos validar.

• Poniendo directamente el código a validar dentro de un campo de texto.

Vamos a dejar los parámetros por defecto, es decir, detección del tipo de codificación automática y del tipo de documento. Una vez introducido y validado nuestro código (Figura 6.30), nos mostrará los errores y su ubicación con lo que podremos iniciar la corrección para llevar a nuestro sitio dentro del estándar web.

En una primera validación para nuestro caso habíamos pasado satisfactoriamente el estándar para XHTML 1.0 estricto (Código 6.33), pero puesto que como veremos en el tema de tecnologías: el paso de XHTML 1.0 estricto a HTML 5 es inmediato; básicamente hemos hecho los cambios oportunos para que nuestro sitio cumpliera la nueva versión del estándar del marcado de texto (Código 6.34). No obtenemos errores, únicamente un aviso de que la herramienta de verificación para HTML 5 es experimental. Sin embargo cabe destacar que no estamos aprovechando prácticamente ninguna de las ventajas del HTML 5, solo hemos cambiado la definición del tipo de documento para HTML 5.

Código 6.33: Declaración del tipo de documento para XHTML 1.0 estricto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/

PÁGINA 134 DE 172

Figura 6.29: Verificación para el tipo de documento

CAPÍTULO 6

DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

Código 6.34: Declaración del tipo de documento para HTML 5

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

PÁGINA 135 DE 172

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

IMPLEMENTACIÓN

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

PÁGINA 136 DE 172

CAPÍTULO 6

Sugerir un sitio a un motor de búsqueda tiene el 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.12VisibilidadSugerido 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.

PÁGINA 137 DE 172

Figura 6.32: Sugerir un sitio a Google

IMPLEMENTACIÓN

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)

PÁGINA 138 DE 172

Figura 6.33: Demostrar la propiedad del sitio

CAPÍTULO 6

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.

PÁGINA 139 DE 172

Figura 6.34: Panel de Google Webmaster Tools

Figura 6.35: Herramientas de “Información del sitio”

IMPLEMENTACIÓN

6.12.1.1 SitemapEn 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>−

PÁGINA 140 DE 172

Figura 6.36: Generador XML de Sitemaps

CAPÍTULO 6

<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 rastreadoresContinuando 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 todosUser-agent: *

# En principio permitimos todo para después concretar que partes denegamosAllow: /

# Partes prohibidas para las arañas (rastreadores)Disallow: /es/data/Disallow: /es/data/contact.phpDisallow: /en/data/Disallow: /en/data/contact.php

# Donde se encuentra nuestro sitemapSitemap: http://www.hermesmarinas.com/sitemap.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.

PÁGINA 141 DE 172

IMPLEMENTACIÓN

6.12.1.4 Cambio de direcciónEste 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ónEsta 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.

PÁGINA 142 DE 172

Figura 6.37: Sitio con enlaces internos en las búsquedas de Google

CAPÍTULO 6

6.12.2 Su sitio en la webDentro 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 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úsquedasEste 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 sitioEsta herramienta muestra los enlaces a nuestro sitio. Normalmente si es un sitio nuevo tendrá pocos o ningún enlace reconocido por Google. En nuestro caso no aparecen enlaces a nuestro sitio.

6.12.2.3 Palabras claveEsta 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 internosEste 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 suscriptorUn 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.

PÁGINA 143 DE 172

Figura 6.38: Herramientas de “Su sitio en la web”

IMPLEMENTACIÓN

6.12.3 DiagnósticosDentro 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.

6.12.3.1 Software malintencionadoEsta 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 rastreoEsta 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 rastreoEsta 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 HTMLEsta 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.

PÁGINA 144 DE 172

Figura 6.39: Herramientas de Diagnóstico

CAPÍTULO 6

6.12.4 LabsDentro de “Labs” (Figura 6.40) tenemos las herramientas básicas para hacer pruebas con nuestro sitio web.

6.12.4.1 Explorar como GooglebotCon 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 servidorDate: Fri, 08 Oct 2010 15:50:52 GMT // FechaServer: Apache // Tipo de servidor donde tenemos alojada la páginaX-Powered-By: PHP/5.2.14 // Versión de PHP soportada por el servidorContent-Encoding: gzip // CompresiónVary: Accept-Encoding // Aceptada la compresiónContent-Length: 3323 // Longitud del contenidoKeep-Alive: timeout=2, max=99 // Periodos de conexiónConnection: Keep-Alive // Mantiene la conexión según los periodos anterioresContent-Type: text/html // El tipo de marcado de texto es HTML…// A partir de aquí vendría el código de la página tal cual lo implementamos (caso de que la exploración haya sido correcta)

6.12.4.2 SidewikiGoogle Sidewiki permite que los usuarios añadan información útil en cualquier página web. Esta herramienta se utiliza para crear una entrada del propietario de la página especial para 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

PÁGINA 145 DE 172

Figura 6.40: Herramientas para hacer pruebas

IMPLEMENTACIÓN

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.

6.12.4.3 Rendimiento del sitioEsta 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ídeoYa 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.13Google AnalyticsHabiendo 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.

PÁGINA 146 DE 172

CAPÍTULO 6

• Antes del fragmento de código de seguimiento de la sección <head> del código HTML.

• Después tanto del fragmento de código de seguimiento como de todo el contenido de la página (por ejemplo al final del cuerpo del código HTML). Nosotros optaremos por esta opción (Código 6.39) por ser la mejor para la carga de la página. En apartados anteriores vimos que todos los scripts que no sean estrictamente necesarios van al final de la página web.

Código 6.39: Seguimiento de Google Analytics

...<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));try {var pageTracker = _gat._getTracker("UA-10788966-3"); // Identidad del perfilpageTracker._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)

PÁGINA 147 DE 172

Figura 6.41: Crear un nuevo perfil del sitio web en Google Analytics

IMPLEMENTACIÓN

• Objetivos (metas conseguidas)

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

PÁGINA 148 DE 172

Figura 6.42: Panel de Google Analytics

CAPÍTULO 6

6.13.2 UsuariosEn 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áficoEn 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.

PÁGINA 149 DE 172

Figura 6.43: Intelligence (alertas automáticas)

Figura 6.44: Usuarios

IMPLEMENTACIÓN

6.13.4 ContenidoEn 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ísticasA 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

PÁGINA 150 DE 172

Figura 6.45: Fuentes de tráfico

Figura 6.46: Contenido

CAPÍTULO 6

a 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.14ConclusionesEn 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

PÁGINA 151 DE 172

IMPLEMENTACIÓN

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.

PÁGINA 152 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:

C

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

PÁGINA 153 DE 172

Capítulo

7

CAPÍTULO 7

7.1.1 Características fundamentales

7.1.1.1 GeolocalizaciónLa geolocalización o ubicación geográfica ya se está utilizando en toda la web hoy en día. Muchos sitios web muestran su ubicación actual, localización de establecimientos, información 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 WorkersAl realizar operaciones avanzadas en un navegador web, tanto página web donde se ejecuta (servidor), así como para el navegador web (cliente) se sobrecargan pudiendo en 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 webEsta 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 CanvasGracias 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”.

PÁGINA 154 DE 172

NUEVAS TECNOLOGÍAS

7.1.1.5 VídeoGracias a la nueva etiqueta de vídeo es muy sencillo incluir cualquier vídeo en nuestra web (Código 7.2) pudiendo incluso crear algunos efectos con JavaScript. Estableciendo la URL 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)HTMLLa 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>

PÁGINA 155 DE 172

CAPÍTULO 7

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

PÁGINA 156 DE 172

NUEVAS TECNOLOGÍAS

• <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 eliminadasTodas las etiquetas encargadas del estilo se han eliminado delegando esta función al CSS. Además, de las propias de los frames que iban en contra de la definición de sitio 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 3CSS3 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.

PÁGINA 157 DE 172

CAPÍTULO 7

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 BordesLas 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 SombrasLas 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 */}

PÁGINA 158 DE 172

NUEVAS TECNOLOGÍAS

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 avanzadosHasta 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 importantesEnte otras muchas de las propiedades importantes que caracterizan al CSS3 tenemos:

• opacity: para darle un nivel de transparencia al objeto.

• rgba: para definir colores RGB con canal alfa (opacidad).

• resize: para definir si un objeto puede cambiar o no de tamaño y de que forma.

7.2.1.6 Selector de atributosAnteriormente con CSS 2.1, solo podíamos seleccionar por elemento HTML, y por los 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;}

PÁGINA 159 DE 172

CAPÍTULO 7

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 WebMWebM 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 VP8Las características principales de VP8 son:

• Códec libre de patentes y de código abierto.

• Ganancia significativa en eficacia de compresión. A grandes rasgos podríamos reducir un vídeo 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 VorbisLas características principales de Vorbis son:

• Códec libre de patentes y de código abierto.

• Mayor calidad que algunos de sus competidores (MP3, AAC, etc) para tasas de codificación mayores de 180 kbps.

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

• Incorporar texturas a partes de los objetos.

• Iluminación y efectos de iluminación.

5 OpenGL ES es una variante reducida de la librería gráfica OpenGL para dispositivos con recursos limitados. Además, la versión 2.0 permite a los usuarios implementar funcionalidades por parte del usuario, una gran ventaja pero que elimina la compatibilidad hacia atrás.

PÁGINA 160 DE 172

NUEVAS TECNOLOGÍAS

• Texturas animadas.

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

PÁGINA 161 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.LEl 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.

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

PÁGINA 163 DE 172

Capítulo

8

CAPÍTULO 8

• Google Chrome no solo está respaldado por una gran compañía sino por cualquiera que quiera colaborar, ya que surge de un proyecto de código abierto denominado Chromium. Además, su motor es libre.

• Los equipos y dispositivos cada vez disponen de más recursos por lo que 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).

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

• Google Chrome dispone del motor de renderizado web más rápido que existe hasta la fecha (Webkit).

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

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

• Google Chrome es el navegador que más área de visualización deja a la web.

Google Chrome pretende incorporar los elementos que favorecen las cuotas de 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.

PÁGINA 164 DE 172

CONCLUSIONES

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

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

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

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

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

• ActionScript y SilverLight son lenguajes de programación privativos y requieren de un software adicional (plugins para el navegador).

PÁGINA 165 DE 172

CAPÍTULO 8

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

• JavaScript, a diferencia del resto, dispone de motor interno en los navegadores que permite su ejecución (interprete).

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

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

• ASP es un lenguaje de programación privativo.

• PHP, JSP, Python y Ruby son libres.

• PHP es multiplataforma.

• ASP requiere de servidores Windows, aunque se puede hacer multiplataforma a través de MONO (proyecto de código abierto, multiplataforma para la implementación de Microsoft .NET).

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

PÁGINA 166 DE 172

CONCLUSIONES

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ódigoActualmente, 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

PÁGINA 167 DE 172

CAPÍTULO 8

Notepad++:

• Permite 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ódigoCuando 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 visitasActualmente, 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 contenidoActualmente, 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.

PÁGINA 168 DE 172

CONCLUSIONES

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 WidgetsWidgets, 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 OtrosEn las conclusiones y tendencias vistas en el Capítulo 5, vimos los widgets, CMSs, analizadores y editores con una tendencia al alza, mantenimiento o en pleno declive de cara a 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).

PÁGINA 169 DE 172

CAPÍTULO 8

• 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

PÁGINA 170 DE 172

CONCLUSIONES

que además favorecerá la sostenibilidad de este.

• Se evitarían perdidas de objetos

• Se facilitaría la reutilización de recursos (piezas de dispositivos, material reciclado, etc)

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

• Se 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 InternetVentajas:

• Aprovechamiento de los recursos y potencia del equipo del cliente.

• Mayor protección de datos.

• Acceso a datos en cualquier momento.

Inconvenientes:

• Instalación y permisos para aplicaciones.

• Incompatibilidades entre plataformas.

8.4.2 Extensión de Internet hacia el escritorioVentajas:

PÁGINA 171 DE 172

CAPÍTULO 8

• No sería necesario buscar software para instalarlo.

• Inexistencia de incompatibilidades entre plataformas.

• Soporte y mejora centralizada de aplicaciones.

• Aprovechamiento 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:

• Ausencia 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 usoLas ventajas de una son los inconvenientes de la otra y viceversa. Ambas tenencias, pretenden un uso cooperativo, amplio y libre por parte de la comunidad de Internet 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.

PÁGINA 172 DE 172

CONCLUSIONES

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

PÁGINA 173 DE 172

CAPÍTULO 8

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

PÁGINA 174 DE 172

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) Steve 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]

A


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

http://acid3.acidtests.org/

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

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

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

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

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

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

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

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

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

http://trac.webkit.org/wiki

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

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

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

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

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

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

(19) W3C Recommendation. "XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)". http://www.w3.org/TR/xhtml1/. August 1, 2002. [consultas: continuas]

(20) W3C Candidate Recommendation. "Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification". http://www.w3.org/TR/CSS2/ . September 8, 2009. [consultas: continuas]

(21) Mozilla Fundation. "JavaScript Documentation". https://developer.mozilla.org/en/javascript. October 22, 2010. [consultas: continuas]

(22) W3C. "Document Object Model". http://www.w3.org/DOM/. January 19, 2005. [consulta: 20/2/2010]

(23) Eguíluz Pérez, Javier. "Introducción a AJAX". http://www.librosweb.es/ajax/index.html. Junio 7, 2008. [consulta: 1/4/2010]

(24) jQuery Project. "jQuery Documentation". http://docs.jquery.com/. [consultas: continuas]

(25) Mehdi Achour, Friedhelm Betz, Antony Dovgal y más contribuidores. “Manual de PHP desde el Sitio Oficial”. http://docs.php.net/manual/es/. Octubre 22, 2010. [consulta: 3/4/2010]

(26) Oracle Sun Developer Network. "JavaServer Pages Technology Documentation". http://java.sun.com/products/jsp/docs.html. [consulta: 4/4/2010]

(27) Pilgrim, Mark. "Dive Into Python - Python from novice to pro". http://diveintopython.org/toc/index.html. May 20, 2004. [consulta: 4/4/2010]

(28) Elbert F (with the funding of AOE media). "Wappalyzer". http://wappalyzer.com/stats/. [consultas: continuas]

(29) Google. "Google Analytics". http://www.google.com/analytics/index.html. [consultas: continuas]

(30) Google. "Blogger". http://www.blogger.com/. [consulta: 11/6/2010]

(31) Ryan Boren, Mark Jaquith, Matt Mullenweg (who made first released), Andrew Ozz, Peter Westwood. "WordPress". http://wordpress.org/. [consultas: constantes]

(32) Google. "Digitizing Books One Word at a Time". http://www.google.com/recaptcha/learnmore. [consulta: 13/6/2010]

(33) Disqus. "Disqus". http://disqus.com/. [consulta: 13/6/2010]

(34) Marc Delisle, Michal Čihař, Sebastian Mendel and Herman van Rink. “phpMyAdmin Documentation”. http://www.phpmyadmin.net/home_page/docs.php. [consulta: 14/6/2010]

(35) Joshua Eichorn and Greg Beaver. "phpDocumentor". http://www.phpdoc.org/. [consulta: 14/6/2010]

(36) Adobe. "DreamWeaver Features". http://www.adobe.com/products/dreamweaver/features/. [consulta: 16/6/2010]

(37) Kinnunen, Simo. "Cufón Documentation". http://github.com/sorccu/cufon/wiki/. [consulta: 18/6/2010]

(38) cPanel. "cPanel Features". http://www.cpanel.net/products/cpanelwhm/software-releases.html. [consulta: 18/6/2010]

B

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

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

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

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

http://www.phpdoc.org/

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

http://disqus.com/

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

http://wordpress.org/

http://www.blogger.com/

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

http://wappalyzer.com/stats/

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

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

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

http://docs.jquery.com/

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

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

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

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

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

(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) Nieto, 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]

C

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

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

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

http://www.gimp.org/

http://960.gs/

http://fireftp.mozdev.org/

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

http://getfirebug.com/

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

http://kate-editor.org/

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

http://www.gotapi.com/

http://www.hermesmarinas.com/

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

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://www.magentocommerce.com/services/overview

http://www.addthis.com/features

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

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

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

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

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

http://getsatisfaction.com/explore/features

(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) Edwards, 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_anonymous_4chan_hackers_hactivists_dc.shtml Diciembre 9, 2010 [consulta: 9/12/2010]

(79) Berners-Lee, Tim. “Long Live the Web: A Call for Continued Open Standards and Neutrality” (Scientific American). http://www.scientificamerican.com/article.cfm?id=long-live-the-web 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]

D

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

http://www.scientificamerican.com/article.cfm?id=long-live-the-web

http://www.scientificamerican.com/article.cfm?id=long-live-the-web

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://code.google.com/p/webglsamples/

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

http://www.webmproject.org/

http://www.css3.info/

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

http://diveintohtml5.org/

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

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

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

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

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

http://validator.w3.org/

http://javascriptcompressor.com/

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

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

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

Hacia la web 3.0

Technology

Transcript of Hacia la web 3.0