i CONTENIDOS LISTA DE FIGURAS .............................................................................................................................. ix LISTA DE TABLAS .............................................................................................................................. xiii LISTA DE CÓDIGOS ............................................................................................................................ xv LISTA DE ACRÓNIMOS .................................................................................................................... xvii PREFACIO ............................................................................................................................................ xxi Capitulo 1: Introducción ........................................................................................................................... 1 1.1 OBJETIVOS ................................................................................................................................... 2 1.2 REQUISITOS.................................................................................................................................. 2 Capitulo 2: Navegadores web ................................................................................................................... 3 2.1 P APEL DE LOS NAVEGADORES DENTRO DE LA WEB....................................................................... 3 2.2 HISTORIA DE LOS NAVEGADORES ................................................................................................. 4 2.3 MOTORES DE RENDERIZADO ........................................................................................................ 6 2.3.1 Webkit ................................................................................................................................... 7 2.3.2 Gecko.................................................................................................................................... 8 2.4 MOZILLA FIREFOX ....................................................................................................................... 9 2.4.1 Ventajas e Inconvenientes..................................................................................................... 9 2.5 GOOGLE CHROME ...................................................................................................................... 10 2.5.1 Ventajas e Inconvenientes................................................................................................... 10 2.6 SAFARI ....................................................................................................................................... 11 2.6.1 Ventajas e Inconvenientes................................................................................................... 11 2.7 OPERA........................................................................................................................................ 12 2.7.1 Ventajas e Inconvenientes................................................................................................... 12 2.8 INTERNET EXPLORER ................................................................................................................. 12 2.8.1 Ventajas e Inconvenientes................................................................................................... 13 2.9 COMPARATIVAS ENTRE IE, OPERA, SAFARI, CHROME Y FIREFOX .............................................. 13 2.10 TEST ACID3 .............................................................................................................................. 16 2.11 CONCLUSIONES ........................................................................................................................ 17 2.11.1 Tendencia .......................................................................................................................... 18 Capitulo 3: Tecnologías de desarrollo .................................................................................................... 21 3.1 TECNOLOGÍAS PARA EL DESARROLLO DE APLICACIONES DESDE EL LADO DEL CLIENTE............. 21 3.1.1 HTML / XHTML ................................................................................................................. 22 3.1.1.1 Uso ............................................................................................................................ 22 3.1.1.2 Sintaxis ...................................................................................................................... 23 3.1.1.3 Ejemplo ..................................................................................................................... 23 3.1.1.4 Ventajas ..................................................................................................................... 24 3.1.1.5 Desventajas................................................................................................................ 24 3.1.1.6 Enlace a la API .......................................................................................................... 25 3.1.2 CSS ..................................................................................................................................... 25 3.1.2.1 Uso ............................................................................................................................ 25 3.1.2.2 Sintaxis ...................................................................................................................... 25 3.1.2.3 Ejemplo ..................................................................................................................... 26 3.1.2.4 Ventajas ..................................................................................................................... 26 3.1.2.5 Desventajas................................................................................................................ 27 3.1.2.6 Enlace a la API .......................................................................................................... 27 3.1.3 JavaScript ........................................................................................................................... 27 3.1.3.1 Uso ............................................................................................................................ 27 3.1.3.2 Sintaxis ...................................................................................................................... 28 3.1.3.3 Ejemplo ..................................................................................................................... 28 3.1.3.4 Ventajas ..................................................................................................................... 29 3.1.3.5 Desventajas................................................................................................................ 29
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
i
CONTENIDOS
LISTA DE FIGURAS .............................................................................................................................. ix
LISTA DE TABLAS .............................................................................................................................. xiii
LISTA DE CÓDIGOS ............................................................................................................................ xv
LISTA DE ACRÓNIMOS .................................................................................................................... xvii
PREFACIO ............................................................................................................................................ xxi
4.2.2 Gestión de validación y distribución de contenidos ........................................................... 51
4.2.3 Publicación de contenidos ................................................................................................. 52 4.2.4 Gestión del ciclo de vida de los contenidos ........................................................................ 53
4.2.5 Portal manager .................................................................................................................. 54 4.2.6 Integración con datos de negocio ...................................................................................... 54
4.2.7 Herramientas de comunicación .......................................................................................... 55
4.2.8 Arquitectura general .......................................................................................................... 55
5.1.1 Google Analytics ............................................................................................................... 59 5.1.2 Características de Google Analytics .................................................................................. 59
5.1.2.1 Estadísticas sobre la inversión publicitaria ................................................................ 59
5.1.2.2 Seguimiento de canales de tráfico y elementos multimedia ...................................... 60
5.1.2.3 Informes personalizados para estadísticas específicas .............................................. 61
5.1.2.4 Gestión para compartir y comunicar la información ................................................. 61
5.1.2.5 Consulta de datos ...................................................................................................... 61
5.14.2 Características de Coopermine ........................................................................................ 91 5.14.2.1 Usuarios y gestión de imágenes .............................................................................. 91
6.5.3 Dibujo de la web en un editor de imágenes ..................................................................... 114 6.6 MAQUETACIÓN ........................................................................................................................ 114
6.6.2 Cuerpo base ..................................................................................................................... 115 6.6.3 Añadiendo más detalles al estilo de la web ...................................................................... 116
6.6.3.1 Incluir CSS en el mismo documento HTML ........................................................... 117
6.6.3.2 Definir CSS en un archivo externo .......................................................................... 117
6.6.3.3 Incluir CSS en los elementos HTML ...................................................................... 117
6.7 INTERACCIÓN, ANIMACIÓN Y EFECTOS (JS).............................................................................. 119
6.7.1 Fecha para el copyright ................................................................................................... 119
6.7.2 Efecto de iluminado y apagado para los idiomas ............................................................ 120
6.7.3 Ajuste de la página para pantallas pequeñas ................................................................... 120 6.7.4 Sustitución de imagen por animación GIF ....................................................................... 121
6.7.5 Navegación animada en el menú ...................................................................................... 122 6.8 CONTENIDO DINÁMICO ............................................................................................................ 122
6.8.1 Formulario de contacto .................................................................................................... 123
6.9 OPTIMIZANDO LA WEB ............................................................................................................. 124
6.9.1 Eliminar enlaces rotos ...................................................................................................... 124
6.9.2 Eliminar CSS desde JS ..................................................................................................... 124
6.9.5 JS no necesario al final del sitio ...................................................................................... 124 6.9.6 Activar compresión ........................................................................................................... 125
6.9.7 Indicar fecha de expiración .............................................................................................. 126
6.9.10 Compactar HTML .......................................................................................................... 128 6.9.11 Compactar JS ................................................................................................................. 128
6.9.12 Minimizar el tamaño de las respuestas .......................................................................... 129
6.9.13 Reducir DNS ................................................................................................................... 130 6.9.14 Minimizar redirecciones ................................................................................................. 130
6.9.15 Optimizar imágenes ........................................................................................................ 130 6.9.16 Optimizar el orden del CSS y el JS ................................................................................. 130
6.9.18 CSS en la cabecera ......................................................................................................... 131 6.9.19 Eliminar CSS no usado .................................................................................................. 131
6.9.20 URL única ...................................................................................................................... 131
6.9.21 Escalado adecuado para las imágenes .......................................................................... 131
6.9.22 Solo cookies en donde sea necesario ............................................................................. 131 6.9.23 Set de caracteres en la cabecera .................................................................................... 132
6.9.24 Especificar el tamaño de las imágenes .......................................................................... 132 6.9.25 Selectores CSS eficientes ................................................................................................ 132
6.10 VERIFICANDO LAS TECNOLOGÍAS .......................................................................................... 132
6.10.1 Verificación del HTML ................................................................................................... 132 6.10.2 Verificación del CSS ....................................................................................................... 134
6.11 DANDO DE ALTA NUESTRO SITIO EN LOS BUSCADORES .......................................................... 135
8.3.6 Otros ................................................................................................................................. 167 8.4 ¿QUÉ USO SE LE DARÁ A LA WEB 3.0?...................................................................................... 168
8.4.1 Extensión del escritorio hacia Internet ............................................................................ 169
8.4.2 Extensión de Internet hacia el escritorio.......................................................................... 170 8.4.3 Libertad de uso ................................................................................................................. 170
REFERENCIA ......................................................................................................................................... A
ix
LISTA DE FIGURAS
Figura 2.1: Navegadores web más utilizados. .......................................................................................... 6
Figura 2.2: Gráfica comparativa del uso de navegadores. ...................................................................... 6
Figura 2.3: Webkit frente a Gecko ............................................................................................................ 7
Figura 2.4: Captura de pantalla de Firefox 4 ........................................................................................... 9
Figura 2.5: Captura de pantalla de Google Chrome 6 .......................................................................... 10
Figura 2.6: Captura de pantalla de Safari .............................................................................................. 11
Figura 2.7: Captura de pantalla de Opera 10.5 ..................................................................................... 12
Figura 2.8: Captura de pantalla de Internet Explorer 8 ....................................................................... 13
Figura 2.9: Opera, Chrome y Safari pasan el test ................................................................................. 17
Figura 2.10: Firefox 3.7 no pasa el test ................................................................................................... 17
Figura 2.11: Internet Explorer 8 no pasa el test ..................................................................................... 17
Figura 2.12: Tendencia de popularidad de los navegadores web ......................................................... 19
Figura 3.1: Modelo de cliente servidor ................................................................................................... 21
Figura 3.2: Logo de validación del W3C para HTML 4.01 .................................................................. 22
Figura 3.3: Logo de validación del W3C para XHTML 1.0 .................................................................. 22
Figura 3.4: Logo de validación del W3C para CSS 2.0 ......................................................................... 25
Figura 3.5: Logo de JavaScript (no dispone de uno homologado) ...................................................... 27
Figura 3.6: Jerarquía DOM ..................................................................................................................... 28
Figura 3.7: Logo de AJAX (no dispone de uno homologado) ............................................................... 29
Figura 3.8: Cliente servidor en modelo de aplicación clásica y en modelo de aplicación AJAX ....... 30
Figura 3.9: Logo de jQuery ..................................................................................................................... 32
Figura 3.10: Logo de PHP ........................................................................................................................ 34
Figura 3.11: Logo de JSP ......................................................................................................................... 37
Figura 3.12: Logo de Python ................................................................................................................... 41
Figura 3.13: Tendencia de popularidad de las tecnologías en el lado del cliente ................................ 44
Figura 3.14: Tendencia de popularidad de las tecnologías en el lado del servidor ............................. 45
Figura 5.1: Captura de pantalla de Google Analytics ........................................................................... 60
Figura 5.2: Captura de pantalla de Blogger ........................................................................................... 63
Figura 5.3: Captura de pantalla de reCAPTCHA ................................................................................. 65
Figura 5.4: Captura de pantalla de WordPress ..................................................................................... 69
Figura 5.5: Captura de pantalla de Disqus ............................................................................................ 72
Figura 5.6: Captura de pantalla de phpMyAdmin ................................................................................ 74
Figura 5.7: Captura de pantalla de phpDocumentor ............................................................................ 76
Figura 5.8: Captura de pantalla de Dreamweaver ................................................................................ 78
Figura 5.9: Captura de pantalla de Cufón ............................................................................................. 79
Figura 5.10: Captura de pantalla de cPanel ........................................................................................... 82
Figura 5.11: Captura de pantalla de Get Satisfaction ........................................................................... 84
Figura 5.12: Captura de pantalla de vBulletin ...................................................................................... 86
Figura 5.13: Captura de pantalla de MediaWiki ................................................................................... 88
Figura 5.14: Captura de pantalla de Coppermine ................................................................................. 90
Figura 5.15: Captura de pantalla de YouTube ....................................................................................... 92
Figura 5.16: Captura de pantalla de AddThis ....................................................................................... 94
Figura 5.17: Captura de pantalla de Magento ....................................................................................... 96
Figura 6.1: Captura de pantalla de la web que realizaremos 1/3 ....................................................... 102
Figura 6.2: Captura de pantalla de la web que realizaremos 2/3 ....................................................... 102
Figura 6.3: Captura de pantalla de la web que realizaremos 3/3 ....................................................... 102
Figura 6.4: Captura de pantalla de gotAPI .......................................................................................... 103
Figura 6.5: Captura de pantalla de Notepad++ ................................................................................... 104
Figura 6.6: Captura de pantalla de la consola de errores de Firefox ................................................. 105
Figura 6.7: Firebug para Firefox .......................................................................................................... 106
Figura 6.8: Capturas de sugerencias de PageSpeed al analizar un sitio web .................................... 107
Figura 6.9: Visualización del tiempo de carga de los elementos de nuestro sitio con PageSpeed .... 107
Figura 6.10: Captura de pantalla de FireFTP ..................................................................................... 108
Figura 6.11: Ejemplo de estructura de archivos y carpetas para un sitio web .................................. 109
Figura 6.12: Mapa conceptual ............................................................................................................... 109
Figura 6.13: Código maquetado tipo HTML5 en HTML ................................................................... 111
Figura 6.14: Buenas prácticas para el maquetado básico ................................................................... 111
Figura 6.15: Propuestas de aspecto ....................................................................................................... 112
Figura 6.16: Esquema de maquetado de nuestra web ......................................................................... 113
Figura 6.17: Imagen de la web con las distintas partes marcadas...................................................... 114
Figura 6.18: Contenedor de 12 columnas (máximo) ............................................................................ 116
Figura 6.19: Año de fecha actual ........................................................................................................... 119
Figura 6.20: Idioma apagado e idioma activo ...................................................................................... 120
Figura 6.21: Botón de vista (vista completa activada) ......................................................................... 120
Figura 6.22: Imagen de la web para el caso de una pantalla menor a 960 pixeles ............................ 120
Figura 6.23: Efecto de desplazamiento del recuadro azul con bordes redondeados ......................... 122
Figura 6.24: Formulario de contacto .................................................................................................... 123
Figura 6.25: Resultado de compresión gzip.......................................................................................... 126
Figura 6.27: JavaScript Compressor .................................................................................................... 129
Figura 6.28: Optimización de imágenes ............................................................................................... 130
Figura 6.29: Verificación para el tipo de documento ........................................................................... 133
Figura 6.30: Sello que certifica que nuestra web cumple el estándar XHTML 1.0 estricto ............. 134
Figura 6.31: Verificación para el tipo de estilo ..................................................................................... 134
Figura 6.32: Sugerir un sitio a Google .................................................................................................. 135
Figura 6.33: Demostrar la propiedad del sitio ..................................................................................... 136
Figura 6.34: Panel de Google Webmaster Tools ................................................................................... 137
Figura 6.35: Herramientas de “Información del sitio” ....................................................................... 138
Figura 6.36: Generador XML de Sitemaps .......................................................................................... 138
Figura 6.37: Sitio con enlaces internos en las búsquedas de Google .................................................. 140
Figura 6.38: Herramientas de “Su sitio en la web” ............................................................................. 141
Figura 6.39: Herramientas de Diagnóstico ........................................................................................... 142
Figura 6.40: Herramientas para hacer pruebas .................................................................................. 143
Figura 6.41: Crear un nuevo perfil del sitio web en Google Analytics ............................................... 145
Figura 6.42: Panel de Google Analytics ................................................................................................ 146
Figura 6.43: Intelligence (alertas automáticas) .................................................................................... 147
Figura 6.44: Usuarios ............................................................................................................................. 147
Figura 6.45: Fuentes de tráfico .............................................................................................................. 148
Figura 6.46: Contenido .......................................................................................................................... 148
xiii
LISTA DE TABLAS
Tabla 2.1: Motores de renderizado web más comunes ............................................................................ 7
Tabla 2.2: Información general ............................................................................................................... 14
Tabla 2.3: Soporte de sistemas operativos .............................................................................................. 14
Tabla 2.4: Consumo de memoria (inicio 20 tabs, 3.8GiB DDR3) ......................................................... 14
Tabla 2.5: Consumo de CPU (inicio 20 tabs, Core2Duo a 2.13GHz) .................................................... 15
Tabla 2.6: Características del navegador ............................................................................................... 15
Tabla 2.7: Características de accesibilidad ............................................................................................. 15
Tabla 2.8: Soporte de tecnologías web .................................................................................................... 16
Tabla 2.9: Soporte de protocolos ............................................................................................................. 16
Tabla 3.1: Diferencias básicas entre HTML y XHTML ........................................................................ 23
Tabla 3.2: Lenguajes de programación vistos para la web ................................................................... 44
Tabla 5.1: Analizadores ............................................................................................................................ 58
Tabla 5.2: Blogs ......................................................................................................................................... 62
Tabla 5.3: CAPTCHAs ............................................................................................................................. 65
Tabla 5.4: Gestores de contenido ............................................................................................................. 66
Tabla 5.5: Sistemas de comentario .......................................................................................................... 72
Tabla 5.6: Administradores de bases de datos ........................................................................................ 74
Tabla 5.7: Herramientas de documentación ........................................................................................... 75
Tabla 5.8: Editores .................................................................................................................................... 77
Tabla 5.9: Scripts para fuentes de texto .................................................................................................. 79
Tabla 5.10: Paneles para hospedaje web ................................................................................................ 80
Tabla 5.11: Seguidores de incidencias ..................................................................................................... 83
Tabla 5.12: Foros ...................................................................................................................................... 85
Tabla 5.13: Wikis ...................................................................................................................................... 87
Tabla 5.14: Galerías de imágenes ............................................................................................................ 89
Tabla 5.15: Visualizadores de vídeo ........................................................................................................ 91
Tabla 5.16: Widgets .................................................................................................................................. 93
Tabla 5.17: EShops ................................................................................................................................... 95
Tabla 5.18: Aplicaciones más usadas por categoría ............................................................................... 98
Tabla 5.19: Aplicaciones más usadas en general .................................................................................... 98
xv
LISTA DE CÓDIGOS
Código 3.1: Página web básica vacía en XHTML ................................................................................. 23
Código 3.2: Página web básica en XHTML ........................................................................................... 24
Código 3.3: Regla básica de estilo para los encabezados de primer orden de una página ................. 25
Código 3.4: Página web básica con enlace externo al estilo .................................................................. 26
Código 3.5: Regla básica de estilo para el cuerpo de una página ......................................................... 26
Código 3.6: Escritura de una frase en el documento (X)HTML .......................................................... 28
Código 3.7: Botón en página XHTML que al pulsarlo muestra el cuadrado de 5 .............................. 28
Código 3.8: Archivo de texto plano donde se encuentra un código para cargar con AJAX ............... 31
Código 3.9: Página en la que se utiliza AJAX ........................................................................................ 31
Código 3.10: Obtención de un archivo de texto plano del servidor mediante AJAX .......................... 31
Código 3.11: Cambio del contenido del elemento seleccionado por el pasado por parámetro ........... 33
Código 3.12: Mensaje de alerta cuando se clica un enlace ................................................................... 33
Código 3.13: Escritura en la página de una cadena............................................................................... 35
Código 3.14: Escritura en el cuerpo de la página del contenido de una variable ............................... 35
Código 3.15: Formulario para interactuar con el usuario .................................................................... 35
Código 3.16: Escritura en la página de una cadena............................................................................... 38
Código 3.17: Escritura en el cuerpo de la página de un saludo acompañado de la fecha actual ....... 39
Código 3.18: Página con formulario que invoca a un servlet ............................................................... 39
Código 3.19: Servlet que devuelve una página con los parámetros recogidos en un formulario ....... 40
Código 3.20: Descriptor de despliegue para la publicación de un servlet ............................................ 40
Código 3.21: Escritura en la página de una cadena............................................................................... 42
Código 3.22: Captura de una imagen con una webcam ........................................................................ 42
Código 3.23: Escritura en el cuerpo de la página de un saludo acompañado de la fecha actual ....... 42
Código 6.1: Tipo de documento, codificación y enlaces para 960 Grid System ................................ 115
Código 6.2: Etiquetas y atributos para el cuerpo base de nuestra web ............................................. 115
Código 6.3: CSS incluido en el propio documento HTML .................................................................. 117
Código 6.4: CSS enlazado desde un archivo externo ........................................................................... 117
Código 6.5: CSS incluido directamente en el propio elemento HTML .............................................. 117
Código 6.6: Superposición de estilos en cascada .................................................................................. 118
Código 6.7: Enlace a nuestro CSS ......................................................................................................... 118
Código 6.8: Algunas de las reglas de nuestro estilo para la web ......................................................... 118
Código 6.9: Actualizar el copyright con el el año actual ..................................................................... 119
Código 6.10: Efecto de apagado e iluminado ....................................................................................... 120
Código 6.11: Ajuste de la web a la pantalla .......................................................................................... 121
Código 6.12: Intercambio de atributos HTML .................................................................................... 121
Código 6.13: Uso del plugin LavaLamp ............................................................................................... 122
Código 6.14: Estilo para recuadro azul con bordes redondeados ...................................................... 122
Código 6.15: Código para crear un formulario de contacto ............................................................... 123
Código 6.16: Único archivo externo con todo el CSS combinado (960.css, estilo.css, etc) ................ 124
Código 6.17: Único archivo externo con todo el JS combinado ( jquery-1.4.2.js, menu.js, etc) ....... 124
Código 6.18: Archivo externo con el JS combinado que necesita cargarse al principio ................... 124
Código 6.19: Archivo externo con todo el JS combinado que podemos cargar a posterior ............. 125
Código 6.20: Opción 1 - Indicar compresión en el archivo de configuración ".htaccess" ................ 125
Código 7.9: Selección de elemento según atributo ............................................................................... 158
LISTA DE ACRÓNIMOS
AJAX - Asynchronous Javascript And XML
ANSI - American National Standards Institute
API - Application Programming Interface
ASP - Active Server Pages
BOM - Byte Order Mark
BSD - Berkeley Software Distribution
CAPTCHA - Completely Automated Public Turing test to tell Computers and Humans Apart
CDMA - Code Division Multiple Access
CERN - Conseil Européen pour la Recherche Nucléaire
CHM - Microsoft Compiled HTML Help
CMS - Content Management System
CPU - Central Processing Unit
CRM - Customer Relationship Management
CSS - Cascading Style Sheets
CSV - Comma Separated Values
DHTML - Dynamic HTML
DNS - Domain Name System
DOM - Document Object Model
DTD - Document Type Definition
ECMA - European Computer Manufacturers Association
ERP - Enterprise Resource Planning
FAQ - Frequently Asked Questions
FF - FireFox
FTP - File Transfer Protocol
GIF - Graphics Interchange Format
GIMP - GNU Image Manipulation Program
GMT - Greenwich Mean Time
GNU - GNU's Not Unix
GPL - General Public License
GSM - Global System for Mobile Communications
GZIP - GNU ZIP
HTML - HyperText Markup Language
HTTP - Hypertext Transfer Protocol
HTTPS - HTTP Secure
ID - Identification
IDN - Internationalized Domain Name
IE - Internet Explorer
IP - Internet Protocol
IRC - Internet Relay Chat
ISO - International Organization for Standardization
J2EE - Java 2 Platform Enterprise Edition
JPEG - Joint Photographic Experts Group
JS - JavaScript
JSP - JavaServer Pages
KDE - K Desktop Environment
LAMP - Linux Apache MySQL PHP
LDAP - Lightweight Directory Access Protocol
LGPL - Lesser General Public License
MAC - Media Access Control
MathML - Mathematical Markup Language
MPL - Mozilla Public License
MSN - MicroSoft Network
NASA - Nacional Aeronautics and Space Administration
NCSA - National Center for Supercomputing Applications
NNTP - Network News Transport Protocol
O - Opera
OCR - Optical Character Recognition
OpenGL - Open Graphics Library
OpenGL ES - OpenGL for Embedded Systems
PDF - Portable Document Format
PHP - Hypertext PreProcessor
PNG - Portable Network Graphics
QBE - Query By Example
RAM - Random Access Memory
RFID - Radio Frequency IDentification
RIA - Rich Internet Application
RSS - Really Simple Syndication
SEO - Search Engine Optimization
sIFR - scalable Inman Flash Replacement
SMF - Simple Machines Forum
SMIL - Synchronized Multimedia Integration Language
SQL - Structured Query Language
SSL - Secure Sockets Layer
SVG - Scalable Vector Graphics
URL - Uniform Resource Locator
UTF - Unicode Transformation Format
VP8 - Video comPression format version 8
W3C - World Wide Web Consortium
WAMP - Windows Apache MySQL PHP
WaSP - Web Standards Project
WP - WordPress
WSGI - Web Server Gateway Interface
WYSIWYG - What You See Is What You Get
XHTML - eXtensible Hypertext Markup Language
XML - eXtensible Markup Language
XPCOM - Cross Platform Component Object Model
XSL - eXtensible Stylesheet Language
XSLT - eXtensible Stylesheet Language Transformations
XSS - Cross Site Scripting
XUL - XML based User interface Language
xxi
PREFACIO
Este proyecto fue elegido por el interés personal sobre el estado de tecnologías
para el desarrollo de aplicaciones web y su implementación. Se le ofrece la
posibilidad al lector de adentrarse en ambos campos, con los siguientes capítulos
que comprenden la documentación propia del trabajo realizado.
En el Capítulo 1, se ofrece una breve introducción sobre la historia y el concepto
de web. Se exponen cuales fueron los objetivos y requisitos para la realización
del proyecto.
En el Capítulo 2, se centra en las aplicaciones de escritorio dedicadas a la
navegación por Internet. Se detallan todos los navegadores webs más extendidos,
comparándolos y viendo las ventajas e inconvenientes entre ellos, se les aplican
pruebas y se analiza su popularidad y tendencia de uso.
En el Capítulo 3, se analizan las tecnologías de macado de texto, estilo e
interacción más utilizadas para el desarrollo web, detallando su uso y la sintaxis
básica a la vez que se ofrecen ejemplos sencillos para su compresión. Al final, se
realizan pruebas para ver su popularidad y perspectiva de futuro.
En el Capítulo 4, se explica la gestión de contenidos web mediante el uso de
gestores de contenidos.
En el Capítulo 5, se describen aquella aplicaciones web que pueden ser usadas
como herramientas para crear una aplicación web final o integradas para añadir
una funcionalidad extra. Además, observaremos la popularidad y uso tratando de
pronosticar el futuro que les espera.
En el Capítulo 6, se basa en los capítulos anteriores para la realización de una
implementación real paso a paso desde el planteamiento inicial sobre tipo de
página buscamos hasta su mantenimiento y promoción.
En el Capítulo 7, se describen las nuevas tecnologías de desarrollo que triunfarán
en Internet en los próximos años.
En el Capítulo 8, se ofrecen un resumen de las ideas más importantes y las
conclusiones.
PÁGINA 1 DE 172
“La verdad es que yo no creo en nada de lo que me promete Internet o la Web, no creo en la promesa del mundo feliz. Pero pienso que eso no me impide conocer qué son esas
tecnologías ni tampoco utilizarlas, lo cierto es que algo muy loco se está generando y
nosotros tenemos el privilegio de experimentar ese cambio.”
~ Alejandro Piscitelli
CAPITULO 1: INTRODUCCIÓN
l termino Web 2.5 se refiere al estado actual de desarrollo de las tecnologías y
aplicaciones en Internet. Desde sus orígenes en 1969 “La Red de Redes” no ha
parado de evolucionar, ha pasado de ser una red unidireccional para lecturas
desde servidores (Web 1.0), a convertirse en una red social bidireccional donde
los usuarios aparte de leer datos pueden escribir, interactuar y colaborar de multitud de
formas. La Web 2.0 o Web Social, a diferencia de su predecesora, gestiona los datos de
manera dinámica y mantiene los servicios de Internet actualizados usando las
tecnologías web (1). La Web 3.0 o Web Semántica, es la web dinámica en la que se
separa el contenido de la interacción y el aspecto visual. El estado actual de transición
se denomina Web 2.5. El estudio de las tecnologías y herramientas pertenecientes a la
Web 2.5, las aplicaciones que se pueden crear con ellas y las lineas futuras (hacia la
Web 3.0), serán la base del contenido que abarcaremos en este proyecto.
La idea de la Web (década de los 40) es anterior a la creación de Internet y se definió como un
entramado de información distribuida con una interfaz que permitiera el acceso. Sin embargo,
no fue hasta principios de los 90 cuando Tim Berners Lee creó los 3 elementos básicos de la
Web: el navegador web, el servidor web y la página web (2), a los que unió los enlaces de texto
(hipervínculos de texto) para la navegación, idea que sacó de observar una libreta que usaba
para añadir y mantener referencias de cómo funcionaban los ordenadores en el CERN
(Organización Europea para la Investigación Nuclear, del francés).
Antes de la Web, la manera de obtener los datos por Internet era caótica: había un sinfín
de maneras posibles por lo que había que conocer múltiples programas y sistemas
operativos. La Web introduce un concepto fundamental: la posibilidad de lectura
universal, que consiste en que una vez que la información esté disponible, se pueda
acceder a ella desde cualquier ordenador, desde cualquier país, por cualquier persona
autorizada, usando un único y simple programa (el navegador web).
1.1 Objetivos
El objetivo de este proyecto es el estudio del estado actual de las tecnologías para el desarrollo
web así como de su evolución, tratando de establecer el escenario que se vislumbra para un
futuro próximo: la Web 3.0.
Para ello, se va a documentar la planificación, creación y mantenimiento de un entorno Web
E
Capítulo
1
actual. En un primer lugar se abordarán los navegadores web para acceder a Internet, seguido
del estudio y comparación de las tecnologías existentes, luego analizaremos las aplicaciones
para el desarrollo web y por último se realizará un ejemplo práctico basándonos en los
conclusiones de los capítulos anteriores.
1.2 Requisitos
Para llevar a cabo estos objetivos es necesario partir de una serie de requisitos fundamentales:
___________________________________________________________________ Evitar las particularidades de los navegadores web (Internet Explorer, Firefox, Opera, etc) y
dependencias del software propietario tanto con sistemas operativos (Windows en servidores
web: .NET no es portable sin MONO) como en extensiones web (Silverlight también de
Microsoft).
___________________________________________________________________ La necesidad de estudiar las tecnologías y aplicaciones web independientes del navegador web y
del sistema operativo (en cliente y servidor) fue tomada como requisito para permitir la total
compatibilidad con cualquier entorno, dejando de esta forma al usuario la total libertad de
elección.
___________________________________________________________________ El uso de tecnologías libres al alcance de cualquier desarrollador y el empleo de herramientas
sencillas con resultados profesionales son los requisitos básicos para este proyecto. Relacionado
con lo anterior se encuentra la ausencia de dependencias de software propietario, es decir,
abarcaremos como requisito el estudio de tecnologías libres, autosuficientes e independientes
con una gran comunidad de ayuda al desarrollo.
Optar por esta filosofía de desarrollo tiene unas repercusiones legales inmediatas, y económicas,
tanto para uso personal como comercial.
PÁGINA 3 DE 172
“The big dispute between the government and Microsoft concerns the Internet "browser," which is the piece of software that puts a message on your computer screen
informing you that the Internet is currently busy and you should try again later. As you
can imagine, the potential market for this service is huge, so Microsoft would like you to use its browser, and not somebody else's.”
~ Dave Barry
CAPITULO 2: NAVEGADORES WEB
n navegador web es un programa que permite visualizar la información que
contiene una página web. El navegador nos permite acceder a la Web 2.5, es
decir, al conjunto de aplicaciones y recursos web que pueden facilitarnos
infinidad de tareas y mantenernos en contacto con personas en todo el mundo.
El navegador web es uno de los programas más importante de un equipo. Pasamos una
gran parte de nuestro tiempo conectados a Internet con el navegador. Cuando realizamos
búsquedas, chateamos, enviamos mensajes de correo electrónico, realizamos compras,
accedemos a nuestro banco online, leemos las noticias y vemos vídeos online, lo
hacemos a través de un navegador.
La funcionalidad básica de un navegador web es permitir la visualización de
documentos de texto, posiblemente con recursos multimedia incrustados. Los
documentos pueden estar ubicados en la computadora en donde está el usuario o en un
servidor.
El navegador interpreta el código, HTML (Lenguaje de Marcado de Hipertexto)
generalmente, en el que está escrita la página web y lo presenta en pantalla permitiendo
al usuario interactuar con su contenido y navegar hacia otros lugares de la red.
2.1 Papel de los navegadores dentro de la web
Muchos de nosotros no somos conscientes de toda la tecnología que hay detrás de Internet. Ni
de porque se nos ofrece de manera gratuita. Entre dichas tecnologías tenemos:
___________________________________________________________________ HTML, que le da estructura y contenido a la página.
___________________________________________________________________ CSS (Hojas de Estilo en Cascada), le da presentación a una página.
___________________________________________________________________ JavaScript, permite funcionalidad extra y que la página sea interactiva (menús, animaciones, ..).
___________________________________________________________________ Fuentes, las letras que se usan para los textos.
U
Capítulo
2
___________________________________________________________________ Formatos de Imágenes (JPEG, PNG,…) que comprimen la información de una imagen para poder
tener un uso eficiente de la red.
Todas y cada una de estas tecnologías son de libre uso y acceso. Este es el corazón de Internet y
la razón por la que ha crecido de una forma tan sorprendente. Millones de páginas y sitios en la
red son creados todos los días gracias a esto.
¿Qué hubiera pasado con Internet si tuviéramos que comprar un navegador de Internet? o
¿Pagar peaje por cada página que visitamos? o ¿Pagar miles de euros por la tecnología para
crear un sitio o usar el correo electrónico?
La web es innegablemente mejor después de que Mozilla entró al mercado de navegadores, y
habría sido imposible hacer esto si hubieran existido pagos multimillonarios por licencias para
el manejo de HTML, CSS, JavaScript, o alguna otra.
2.2 Historia de los navegadores
El primer navegador, desarrollado en el CERN a finales de 1990 y principios de 1991 por Tim
Berners Lee, era bastante sofisticado y gráfico, pero sólo funcionaba en estaciones NeXT.
El navegador Mosaic, que funcionaba inicialmente en entornos UNIX sobre X11, fue el primero
que se extendió debido a que pronto el NCSA (Centro Nacional de Aplicaciones de
Supercomputación de Estados Unidos) preparó versiones para Windows y Macintosh. Sin
embargo, poco más tarde entró en el mercado Netscape Navigator que rápidamente superó en
capacidades y velocidad a Mosaic (3). Este navegador tiene la ventaja de funcionar en casi todos
los UNIX, así como en entornos Windows.
Internet Explorer (anteriormente Spyglass Mosaic) fue la apuesta tardía de Microsoft para entrar
en el mercado. En los últimos años se ha vivido una auténtica explosión del número de
navegadores, que ofrecen cada vez mayor integración con el entorno de ventanas en el que se
ejecutan. Netscape Communications Corporation liberó el código fuente de su navegador,
naciendo así el proyecto Mozilla.
Finalmente Mozilla fue reescrito desde cero tras decidirse a desarrollar y usar como base un
nuevo conjunto de widgets (mini aplicaciones) multiplataforma basado en el lenguaje de
etiquetado ML (Lenguaje de Marcas eXtensible) y al que se le llamaría XUL. Esto hizo que
tardara bastante más en aparecer de lo previsto inicialmente, apareciendo una versión 1.0 de
gran calidad y para muchísimas plataformas a la vez el 5 de junio del 2002.
A finales de 2004 aparece en el mercado Firefox, una rama de desarrollo de Mozilla que
pretende hacerse con parte del mercado de Internet Explorer. Se trata de un navegador más
ligero que su hermano mayor.
El 2 de Septiembre del 2008 vio la luz el tercer navegador más utilizado en Internet: Google
Chrome. (4)(5)
CAPÍTULO 2
PÁGINA 6 DE 172
Los navegadores web más usados son aquellos que presentan mejores prestaciones o que vienen
por defecto integrados con el sistema operativo o cualquier otro dispositivo (6). Estos
navegadores son: Mozilla Firefox, Opera, Google Chrome, Safari e Internet Explorer (por orden
de aparición en la Figura 2.1).
Actualmente el porcentaje de uso de dichos navegadores está cambiando (Figura 2.2). La
mayoría de usuarios al poseer sistemas operativos Windows usaban el Internet Explorer que
viene integrado con el sistema, sin embargo la variedad de navegadores existentes en el
mercado y las deficiencias que presenta en navegador de Windows han hecho que los usuarios
busquen en Internet una solución mejor. Firefox actualmente le está quitando cuotas de uso a
Internet Explorer, seguido por Chrome y Safari. Aunque este último también debe su existo no a
la elección del propio usuario sino ha que viene integrado con el sistema de Apple: el Mac OS.
2.3 Motores de renderizado
Un motor de renderizado es software que toma contenido marcado (en TML, ML, etc.) y las
hojas de estilo (como SS, XSL, etc.) y luego muestra el contenido maquetado en pantalla.
En la siguiente tabla vamos a mostrar una comparativa de los motores más usados según
creador, licencia, navegador conocido que hace uso del motor y lenguaje de programación en el
que está desarrollado.
Figura 2.1: Navegadores web más utilizados.
Figura 2.2: Gráfica comparativa del uso de navegadores.
CONCLUSIONES
PÁGINA 7 DE 172
Tabla 2.1: Motores de renderizado web más comunes
Motor Creador Licencia Navegador Lenguaje
KHTML KDE GNU LGPL Konqueror C++
Gecko Mosaic / Netscape /
Mozilla Foundation
MPL, GNU GPL,
GNU LGPL
tri-license
Mozilla Firefox C++
Presto Opera Software Propietaria Opera C++
Webkit
(basado en
KHTML)
Webkit Foundation GNU LGPL, BSD-
style
Safari,
Google Chrome C++
Trident Mosaic/
Microsoft Propietaria Internet Explorer ?
Vistas algunas características de KHTML (Konqueror), Gecko (FF), Presto (O), Webkit
(Chrome) y Trident (IE), nos centraremos en los dos más poderosos Gecko y Webkit.
2.3.1 Webkit
Webkit es un motor de render HTML de código abierto, desarrollado por Apple basándose en el
código del proyecto KTHML. Webkit es un motor sumamente sencillo, reconocido por tener
una base de código ordenada y limpia, cumplir estrictamente con los estándares web (HTML,
XHTML, CSS, etc), y usar poca memoria para su funcionamiento (7). Por estos motivos Webkit
es una opción muy popular para implementar navegadores, entre otros usos.
Webkit fue usado en principio en el navegador Safari y luego en el iPhone, pero varios
proveedores conocidos también lo utilizan: Adobe, Nokia, Trolltech entre otros. Webkit también
se usa en una gran cantidad de navegadores menos conocidos, como son iCab, Omniweb,
Shiira, y Epiphany. Más recientemente, Google eligió a Webkit para su plataforma movil
Android, y para su navegador de escritorio Chrome.
El consenso entre los desarrolladores es claro: Webkit es un motor excelente que permite
utilizarlo en muchos casos prácticos. Webkit está en todos lados, y gana popularidad a pasos
agigantados.
Figura 2.3: Webkit frente a Gecko
CAPÍTULO 2
PÁGINA 8 DE 172
2.3.2 Gecko
Gecko, creado originalmente por Netscape, tiene una cantidad de código enorme y no muy
prestigiosa. Gecko siempre fue poderoso, pero todas sus impresionantes características eran a
costa de tamaño, complejidad y uso (y abuso) de memoria. En consecuencia, Gecko no era
apropiado para entornos restringidos, en donde agregar funcionalidad no resulta una prioridad.
Una de los principales motivos que aumentan la complejidad del código de Gecko es que, en
realidad, apunta a ser mucho más que un motor HTML. El objetivo inicial de Mozilla era
extremadamente ambicioso: la suit original de Mozilla incluía un navegador, un programa de
mail y noticias, una herramienta de diseño web, y un cliente de chat. Además de renderizar
HTML, Gecko brinda un framework para la creación de interfaces de usuario basadas en XML
(llamada XUL), y provee de servicios para soportar extensiones en el navegador, las cuales son
una de las características más valiosas de Firefox.
XPCOM (Modelo Componente Objeto Multiplataforma) que permite dividir el software en
partes para su desarrollo y después ensamblarlo, es otra de las fuentes de complejidad en el
código de Gecko. XPCOM le permitió a Gecko ser completamente modular. Sin embargo,
muchos desarrolladores lo adoptaron con demasiado entusiasmo, y usaron XPCOM en lugares
donde no era tan apropiado. Scott Collins, desarrollador de Mozilla, comentó que el uso
excesivo de XPCOM fue uno de los mayores errores de Mozilla.
Gecko todavía es complejo, pero se superaron muchas de sus debilidades históricas (8). Gecko
recibió mejoras masivas para Firefox 3, con muchos cambios que mejoran la experiencia de
navegación.
Gecko 1.9 mejora el soporte de SVG (Gráficos Vectoriales Escalables), lo que permite algunas
características interesantes, como hacer un zoom de todos los componentes de la página.
También se mejoraron algoritmos internos, permitiendo a Gecko pasar el test Acid2 (pruebas
para superar las tecnologías web básicas, posteriormente en este capítulo veremos el Acid3).
Además, Mozilla logró disminuir drásticamente el uso de memoria, superando a Safari y Opera.
Gecko también soporta algunos elementos de CSS 3 (ya implementados en Webkit), y tiene una
mejor rendimiento al renderizar páginas. Por otro lado, Mozilla está preparando a TraceMonkey,
su nuevo motor JavaScript que promete grandes mejoras.
Por otro lado, es importante destacar que muchas de las características de Gecko está
demostrando resultar útil a los proveedores externos. Se están construyendo muchas
aplicaciones en XUL, con resultandos impresionantes. Incluso se puede usar a Firefox 3 como
un entorno de ejecución XUL, por lo que es posible crear aplicaciones ricas con XUL y
Javascript, y distribuirlas directamente por Internet. También estamos viendo aplicaciones
complejas para Firefox distribuidas como extensiones.
Desde un punto de vista técnico, Gecko es una opción muy sólida frente a Webkit por su
renderizado, escalabilidad y soporte de algunas páginas que no se adecuan al estándar web.
Mozilla además tiene los recursos, la experiencia y el apoyo de la comunidad para llevar a
Gecko a nuevos rumbos.
Gecko está igualando a Webkit en rendimiento y bajo uso de memoria, y a la vez cuenta con
algunas ventajas únicas que no se encuentran en ningún otro motor como puede ser el gran
abanico de extensiones complejas, y que sería difícil agregarlas a Webkit. (9)
2.4 Mozilla Firefox
Firefox es un navegador web desarrollado por la fundación Mozilla que ofrece adaptabilidad,
seguridad, estabilidad y velocidad. Es fácil, gratuito y abierto. Firefox tiene más de 6.000
extensiones, es el navegador más personalizarle y es capaz de soportar páginas que salgan del
estándar web.
2.4.1 Ventajas e Inconvenientes
Las ventajas de Firefox son su gran cantidad de extensiones y plugins. Son pequeños programas
que amplían las funciones del navegador, desarrollados por programadores independientes.
Firefox cumple sobradamente los estándares web (10), es el navegador más seguro y además es
multiplataforma, sirve para cualquier sistema operativo.
Entre los escasos inconvenientes se encuentra el consumo de memoria. Si al navegar se abren
muchas pestañas o ventanas con multitud de extensiones y plugins ejecutándose a la vez el
rendimiento cae; es un problema pendiente de solucionar en próximas versiones.
Derivado de lo anterior existen problemas de rendimiento y estabilidad, pero es debido a un uso
masivo de la multifunción de Firefox.
2.5 Google Chrome
Chrome es un navegador web desarrollado por Google para los sistemas operativos más
extendidos, ejecuta aplicaciones y páginas web a gran velocidad. Inicio, carga y búsqueda
rápida. Es fácil, gratuito y abierto. Dispone de una interfaz para dar mayor protagonismo a la
web y sus pestañas se ejecutan como aplicaciones independientes.
Figura 2.4: Captura de pantalla de Firefox 4
2.5.1 Ventajas e Inconvenientes
Las ventajas de Chrome son su rapidez y consumo de poca memoria. Las páginas web cargan
más deprisa y se pueden abrir muchas pestañas a la vez, sin que se agote la memoria. Dispone
de una interfaz simple y minimalista. Todo lo superfluo se ha eliminado, de modo que hasta los
principiantes lo encontrarán fácil de usar. Robusto y seguro (11). Se pueden hacer varias cosas a
la vez (editar una imagen online, estar chateando por Facebook, etc), y si una página web se
cuelga no afecta a otras ventanas o pestañas, que continúan funcionando de forma
independiente.
Entre los escasos inconvenientes se encuentra incompatibilidades debido a que su motor es
Webkit; solo cumple el estándar web. Algunas páginas web antiguas pueden no verse
correctamente con Chrome, hasta que sus propietarios las arreglen o rediseñen.
Su interfaz puede resultar poco convencional. Su aspecto minimalista puede inducir a la
confusión, especialmente entre quienes están acostumbrados a lo tradicional y no quieran
innovaciones.
Por último la carencia de extensiones. En las primeras versiones, Google Chrome no se podía
ampliar mediante módulos, es algo que históricamente ha permitido hacer más versátiles a todos
los navegadores.
2.6 Safari
Safari es un navegador web de código cerrado desarrollado por Apple para Mac pero que en la
Figura 2.5: Captura de pantalla de Google Chrome 6
actualidad soporta alguno de los sistemas operativos más extendidos.
2.6.1 Ventajas e Inconvenientes
Safari tiene las mismas ventajas e inconvenientes que hereda de Webkit (12) y comparte con
Chrome; es rápido pero no soporta absolutamente todas las webs.
Entre sus ventajas podemos destacar el aspecto cuidado que caracteriza a los productos de
Apple.
Entre los inconvenientes la carencia de extensiones y algunos fallos de seguridad entre los que
destaca el autorelleno de datos que viene activado por defecto, una herramienta muy potente que
recopila nuestros datos desde el ordenador y nos facilita el relleno de formularios en Internet
pero que puede ser usada por software malicioso y webs atacantes para robarnos información
personal.
2.7 Opera
Opera es un navegador web de código cerrado y multiplataforma desarrollado por Opera
Software. La aplicación es gratuita desde su versión 8.50, habiendo sido previamente shareware
(software de evaluación) y, antes de su versión 5.0, únicamente de pago.
Figura 2.6: Captura de pantalla de Safari
2.7.1 Ventajas e Inconvenientes
Entre sus ventajas se encuentra la velocidad, la seguridad y una cuidada interfaz (13). Opera está
integrado en algunas consolas de videojuegos.
Entre sus escasos puntos negativos está su lentitud en el renderizado con respecto a aquellos
navegadores que usan Gecko y Webkit.
2.8 Internet Explorer
Internet Explorer es un navegador web de código cerrado desarrollado por Microsoft para el
sistema operativo Microsoft Windows desde 1995. Ha sido el navegador web más utilizado
desde 1999, con un pico máximo de cuota de utilización del 95% durante el 2002 y 2003 en sus
versiones 5 y 6. Esa cuota de mercado ha disminuido paulatinamente debido a una renovada
competencia por parte de otros navegadores, principalmente Mozilla Firefox.
Figura 2.7: Captura de pantalla de Opera 10.5
2.8.1 Ventajas e Inconvenientes
La mayor ventaja es que al ser el más difundido (14), todas las webs funcionan correctamente
con él. Su privilegiada posición en el mercado durante años ha hecho que cualquier página web
se compruebe siempre para su funcionamiento en Explorer.
Entre los inconvenientes se encuentran las vulnerabilidades, que tardan en corregirse. Los
constantes agujeros de seguridad de Explorer son ya una tradición.
Existe una pobre gestión de los estándares Web. Tradicionalmente Microsoft ha “reinventado”
los estándares a su conveniencia, de modo que quienes crean las páginas web han de tratar a
Explorer como un si fuera un caso especial, toda una pérdida de tiempo y recursos.
Además, se caracteriza por un ciclo de versiones y revisiones lento.
2.9 Comparativas entre IE, Opera, Safari, Chrome y Firefox
A continuación vamos a mostrar una serie de tablas (15) en las que comparamos los
navegadores vistos (en sus versiones estables de principios del 2010) según los siguientes
aspectos :
___________________________________________________________________ Soporte de sistemas operativos
___________________________________________________________________ Consumo de memoria
Figura 2.8: Captura de pantalla de Internet Explorer 8
___________________________________________________________________ Consumo de CPU
___________________________________________________________________ Características del navegador
___________________________________________________________________ Características de accesibilidad
___________________________________________________________________ Soporte de tecnologías web
___________________________________________________________________ Soporte de protocolos
Tabla 2.4: Consumo de memoria (inicio 20 tabs, 3.8GiB DDR3)
IE Opera Safari Chrome Firefox
RAM 833.7 MB 369.3 MB 379.4 MB 614.8 MB 217.4 MB
Tabla 2.5: Consumo de CPU (inicio 20 tabs, Core2Duo a 2.13GHz)
IE Opera Safari Chrome Firefox
CPU 54,80% 11,30% 15,00% 13,40% 43,20%
Tabla 2.6: Características del navegador
IE Opera Safari Chrome Firefox
Administrador
de marcadores Si Si Si Si Si
Gestor de
descargas Si Si Si Si Si
Cliente de
BitTorrent No Si No No Si
Administrador
de contraseñas Si Si Si Si Si
Administrador
de formularios Si Si Si Si Si
Corrección
ortográfica No Si Si Si Si
Barra de
herramientas
de motor de
búsqueda
Si Si Si Si Si
Tabla 2.7: Características de accesibilidad
IE Opera Safari Chrome Firefox
Navegación
por pestañas Si Si Si Si Si
Anti pop-up Si Si Si Si Si
Búsqueda
incremental Si Si Si Si Si
Bloqueo de
publicidad No Si No Si Si
Zoom de
página Si Si Si Si Si
Acceso
HTML Si Si Si Si Si
Tabla 2.8: Soporte de tecnologías web
IE Opera Safari Chrome Firefox
CSS 2 Si Si Si Si Si
Frames Si Si Si Si Si
Java Si Si Si Si Si
Javascript Si Si Si Si Si
XSLT Si Si Si Si Si
XHTML Si Si Si No Si
MathML No Si No No Si
XForms No Si No No No
RSS Si Si Si No Si
Atom Si Si Si No Si
Tabla 2.9: Soporte de protocolos
IE Opera Safari Chrome Firefox
Email No Si No No No
FTP Si Si Si Si Si
NNTP No Si No Si Si
SSL Si Si Si Si Si
IRC No Si No No Si
Gopher No No No No Si
IDN Si Si Si Si Si
data: URL No Si Si Si Si
2.10 Test Acid3
Aunque gracias a las especificaciones de la Tabla 2.8 sabemos que tecnologías soportan cada
navegador web vamos a realizar pruebas online mediante el Test Acid3 (16). La parte principal
de Acid3 esta escrita en ECMAScript (JavaScript), y consiste de 100 subpruebas divididas en
seis grupos, llamados "buckets", más cuatro pruebas especiales (0, 97, 98 y 99).
___________________________________________________________________ Bucket 1: DOM Traversal, DOM Range, HTTP
___________________________________________________________________ Bucket 2: DOM2 Core y DOM2 Events
___________________________________________________________________ Bucket 3: DOM2 Views, DOM2 Style, Selectores de CSS3 y Media Queries
___________________________________________________________________ Bucket 4: Comportamiento de tablas HTML y formularios cuando son manipulados por scripts y
DOM2 HTML
___________________________________________________________________ Bucket 5: Pruebas de la competición Acid3, (SVG, HTML, SMIL, Unicode...)
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).
___________________________________________________________________ La interpretación de cada navegador puede ser diferente.
___________________________________________________________________ Guarda muchas etiquetas que pueden resultar inservibles y dificultan la corrección.
___________________________________________________________________ El diseño es más lento.
___________________________________________________________________ Las etiquetas son muy limitadas.
3.1.1.6 Enlace a la API
___________________________________________________________________ Especificación HTML 4.01: http://www.w3.org/TR/REC-html40/
<link rel="stylesheet" href="css/style.css"/> <!-- enlace a la hoja de estilo -->
<title></title>
</head>
<body></body>
</html>
Código 3.5: Regla básica de estilo para el cuerpo de una página
body {
margin: auto; /* márgenes en modo automático */
width: 960px; /* ancho igual a 960 pixeles */
}
3.1.2.4 Ventajas
___________________________________________________________________ Mayor control de la presentación de la web al poder tener todo el código CSS aparte.
___________________________________________________________________ P
ueden mostrarse distintas hojas de estilo según el dispositivo que estemos utilizando (versión
impresa, versión móvil, leída por un sintetizador de voz…) o dejar que el usuario elija.
___________________________________________________________________ Las novedades de CSS3 nos permiten ahorrarnos tiempo y trabajo al poder seguir varias técnicas
(bordes redondeados, sombra en el texto, sombra en las cajas, etc) sin necesidad de usar un
editor gráfico.
3.1.2.5 Desventajas
___________________________________________________________________ Existen limitaciones que CSS 2.x todavía no permite, por ejemplo, la alineación vertical de capas,
las sombras, los bordes redondeados…
___________________________________________________________________ El uso de las tablas nos permitía crear diseños complejos de forma mucho más sencilla que
utilizando CSS, aunque CSS3 está intentando facilitar dicho trabajo.
3.1.2.6 Enlace a la API
___________________________________________________________________ Guía de Referencia CSS 2.1: http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/
3.1.3 JavaScript
JavaScript es un lenguaje interpretado, multiplataforma y parcialmente orientado a objetos. Es
utilizado para acceder a objetos en aplicaciones (21). Se utiliza en el desarrollo de páginas web
permitiendo el desarrollo de interfaces de usuario mejoradas y páginas dinámicas.
Los archivos JavaScript tienen la extensión “.js”.
3.1.3.1 Uso
El código JavaScript puede enlazarse o añadirse a las páginas web proporcionando un control
total y dinámico sobre ellas. Con JavaScript podemos controlar todos los elementos que forman
una página web. Debido a la gran variedad de páginas webs, para evitar incompatibilidades, el
W3C diseñó un estándar denominado DOM2 (modelo de objetos del documento, en inglés) que
especifica la jerarquía de los elementos que forman una página web y que pueden ser accedidos
para interactuar con ellos mediante JavaScript. Además JS, también permite controlar (hasta
cierto punto) los navegadores.
Está influido por Java y Python y es el lenguaje de scripts más extendido en la red gracias a su
sencillez y versatilidad. Hoy en día cualquier página con un mínimo de interacción incluye esta
2DOM es una especificación para la representación de datos XML (22). Por extensión, DOM también se puede
utilizar para manipular documentos XHTML y HTML. Técnicamente, DOM es una API de funciones que se
pueden utilizar para manipular las páginas XHTML de forma rápida y eficiente. DOM transforma internamente el
documento original en una estructura más fácil de manejar formada por una jerarquía de nodos. De esta forma,
DOM transforma el código HTML/XML en una serie de nodos interconectados en forma de árbol. El Modelo de
Objetos del Documento (DOM) permite ver el mismo documento de otra manera, describiendo el contenido del
documento como un conjunto de objetos que un programa Javascript puede actuar sobre ellos.
___________________________________________________________________ El código JavaScript puede incluirse de varias forma:
___________________________________________________________________ En la propia etiqueta del elemento mediante atributos como: “onclick”, “onload”, etc.
___________________________________________________________________ En la página mediante la etiqueta <script></script>.
___________________________________________________________________ En un archivo externo mediante la etiqueta <link />.
3.1.3.3 Ejemplo
Pongamos un ejemplo real donde tengamos el documento XHTML junto con el código
JavaScript.
Código 3.7: Botón en página XHTML que al pulsarlo muestra el cuadrado de 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
En este ejemplo hemos insertado un botón en la página web que al clicarlo enlaza con una
función JavaScript que devuelve el cuadrado del número que le pasemos. Por pantalla se
mostrará el número en un mensaje de alerta (alert).
3.1.3.4 Ventajas
___________________________________________________________________ Lenguaje interpretado seguro y fiable.
___________________________________________________________________ El código Javascript se ejecuta en el cliente.
3.1.3.5 Desventajas
___________________________________________________________________ Código visible por cualquier usuario.
___________________________________________________________________ El código debe descargarse completamente.
___________________________________________________________________ Atacantes maliciosos pueden inyectar secuencias de comandos del lado del cliente en páginas web
visitadas por otros usuarios, comúnmente denominado problema XSS (problema basado en las
vulnerabilidades del sistema de validación de HTML).
3.1.3.6 Enlace a la API
___________________________________________________________________ API JavaScript: http://krook.org/jsdom/
3.1.4 AJAX
Ajax (JavaScript asíncrono y XML) es una técnica de desarrollo web para crear aplicaciones
interactivas (23). No es una tecnología en sí mismo. En realidad, se trata de varias tecnologías
independientes.
Las tecnologías que forman AJAX son:
___________________________________________________________________ XHTML y CSS, para crear una presentación basada en estándares.
___________________________________________________________________ DOM, para la interacción y manipulación dinámica de la presentación.
___________________________________________________________________ X
<!-- elemento de la página donde apreciaremos el cambio -->
<div id="elemento">¡Hola mundo!</div>
</body>
</html>
Código 3.10: Obtención de un archivo de texto plano del servidor mediante AJAX
<script type="text/javascript">
var http = false;
if(navigator.appName == "IE") {
http = new ActiveXObject("Microsoft.XMLHTTP"); // para Internet Explorer siempre es especial
} else {
http = new XMLHttpRequest(); // variable para hacer petición HTTP usando XML para los datos
}
http.open("GET", "text.txt"); // obtemos el archivo de texto plano del servidor
http.onreadystatechange=function() {
if(http.readyState == 4) { // si ha habido problemas
alert(http.responseText); // mostramos la respuesta mediante un mensaje emergente
}
}
http.send(null); //cerramos la conexión con el servidor
</script>
Básicamente declaramos una una variable (http) de tipo XMLHttpRequest() para realizar la
petición (http.open("GET", "text.txt")) del contenido de “texto.txt” cargandola en la página web.
Al final comprobamos que no ha habido problemas y cerramos la conexión (http.send(null);).
Cabe destacar que para el caso único y exclusivo de Internet Explorer (IE) tenemos que hacer
3Protocolo mediante el cual se transfieren las páginas web a un ordenador.
uso de un tipo de objeto para hacer peticiones HTTP por medio de XML especifico de
Microsoft.
La combinación de la manipulación del DOM (elementos de la página web) con el
XMLHttpRequest nos da AJAX. En una página sin AJAX habríamos cargado todo de golpe
mediante una única petición HTTP, en el ejemplo hemos hecho dos peticiones una para cargar la
parte de la página que el usuario puede ir leyendo y otra para obtener el código para reemplazar
el texto.
3.1.4.3 Ventajas
___________________________________________________________________ La experiencia de usuario en la navegación es mucho más rica. Ya no se refresca la página
constantemente al interactuar con ella.
___________________________________________________________________ El tiempo de espera para una petición se reduce. El usuario al hacer un pedido (request) al
servidor, no se envía toda la página.
___________________________________________________________________ Por la misma razón anterior el trafico al servidor se reduce.
3.1.4.4 Desventajas
___________________________________________________________________ Problemas si el usuario ha deshabilitado el uso de JavaScript en su navegador.
___________________________________________________________________ Demasiado código Ajax hace lento el navegador. A más Ajax, más uso de código JavaScript del
lado del navegador, por consiguiente mayor trabajo del navegador (estás mismas desventajas se
aplican a JavaScript).
3.1.4.5 Enlace a la API
AJAX no dispone de un conjunto de métodos propios en forma de guía ya que AJAX es un
conjunto de tecnologías web, así que daremos una referencia a una buena documentación.
___________________________________________________________________ Referencia documentación JAX: https://developer.mozilla.org/en/JAX
3.1.5 jQuery
jQuery es una biblioteca Javascript que permite simplificar la manera de interactuar con los
documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y
agregar interacción con la tecnología AJAX a páginas web. (24)
3.1.5.1 Uso
A la hora de enriquecer una página web con componentes de la llamada Web 2.0, como efectos
dinámicos, Ajax, interacción, interfaces de usuario avanzadas, etc; jQuery es una herramienta
imprescindible para desarrollar todas estas cosas sin tener que complicarte con los niveles más
bajos del desarrollo, ya que muchas funcionalidades ya están implementadas, o bien las librerías
del framework te permiten realizar la programación mucho más rápida y libre de errores.
Todas las mejoras de la Web 2.0, que en un principio puede ser muy atractivas, también tienen
el código en PHP como su entrada y creando páginas web como salida. Puede ser desplegado en
la mayoría de los servidores web y en casi todos los sistemas operativos y plataformas. Además,
su soporte en páginas de hospedaje es más barato que el de otras tecnologías como pueden ser
JSP (Java de Sun Oracle) o ASP (.Net de Microsoft).
Los archivos PHP tienen la extensión “.php”.
3.2.1.1 Uso
PHP es el lenguaje más usado en la actualidad para el desarrollo de aplicaciones web debido al
costo de los servidores que lo soportan, la comunidad y similitud con lenguajes básicos de
programación como C. Lo usan Facebook, Tuenti, WordPress, Joomla, phpBB, etc.
3.2.1.2 Sintaxis
La sintaxis de PHP es muy parecido a cualquier otro lenguaje interpretado escrito en Perl o C,
aunque consta de sus particularidades (Código 3.13). El código de PHP dentro de la propia
página está incluido en tags especiales aunque también podemos enlazarlo desde el exterior o
dejarlo básicamente que genere el (X)HTML desde el servidor.
Código 3.13: Escritura en la página de una cadena
echo "Hola Mundo"; // muestra en la página la cadena de texto “Hola mundo”
El código PHP puede incluirse de varias forma:
___________________________________________________________________ En la página mediante las etiquetas: <script>...</script>,<?...?>,<?php...?>,<%...%>.
___________________________________________________________________ En un archivo externo mediante la etiqueta <script src=“url”></script>.
3.2.1.3 Ejemplo
Pongamos un ejemplo real que incluya un texto en una página web. Las páginas que incluyan
código PHP aunque incluyan en su mayoría HTML (fuera del propio PHP), deberán llevar la
extensión “php”.
Código 3.14: Escritura en el cuerpo de la página del contenido de una variable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
___________________________________________________________________ Muy fácil de aprender.
___________________________________________________________________ Se caracteriza por ser un lenguaje muy rápido.
___________________________________________________________________ Soporta en cierta medida la orientación a objeto. Clases y herencia.
___________________________________________________________________ Es un lenguaje multiplataforma: Linux, Windows, entre otros.
___________________________________________________________________ Capacidad de conexión con la mayoría de los manejadores de base de datos: MysSQL,
PostgreSQL, Oracle, MS SQL Server, entre otras.
___________________________________________________________________ Capacidad de expandir su potencial utilizando módulos.
___________________________________________________________________ Posee documentación en su página oficial la cual incluye descripción y ejemplos de cada una de
sus funciones.
___________________________________________________________________ Es libre, por lo que se presenta como una alternativa de fácil acceso para todos.
___________________________________________________________________ Incluye gran cantidad de funciones.
___________________________________________________________________ No requiere definición de tipos de variables ni manejo detallado del bajo nivel.
3.2.1.5 Desventajas
___________________________________________________________________ Se necesita instalar un servidor web.
___________________________________________________________________ Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser más ineficiente a
medida que las solicitudes aumenten de número.
___________________________________________________________________ La legibilidad del código puede verse afectada al mezclar sentencias HTML y PHP.
___________________________________________________________________ La programación orientada a objetos es aún muy deficiente para aplicaciones grandes.
___________________________________________________________________ Dificulta la modularización.
___________________________________________________________________ Dificulta la organización por capas de la aplicación.
___________________________________________________________________ Cada cual programa a su manera y hace que sea muy difícil mantener el código de terceras
personas.
___________________________________________________________________ Existen muchas versiones de PHP con incompatibilidades entre sí.
3.2.1.6 Enlace a la API
___________________________________________________________________ API PHP: http://www.php.net/manual/es/funcref.php
3.2.2 JSP
(Servidor de Páginas para Java) es una tecnología Java diseñada especialmente para desarrollar
web dinámicas y que puede ser incrustado dentro de código HTML. Generalmente se ejecuta en
un servidor web, tomando el código en Java como su entrada y creando páginas web como
salida. Puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas
operativos y plataformas. Es una alternativa a PHP.
Los archivos JSP tienen la extensión “.jsp”.
3.2.2.1 Uso
JSP puede considerarse como una manera alternativa, y simplificada, de construir servlets4. Es
por ello que una página JSP puede hacer todo lo que un servlet puede hacer. Cada versión de la
especificación de JSP está fuertemente vinculada a una versión en particular de la especificación
de servlets. JSP no nos da nada que no pudierámos en principio hacer con un servlet. Pero es
mucho más conveniente escribir (y modificar) HTML normal que tener que hacer un billón de
sentencias “println” que generen HTML. Además, separando el formato del contenido podemos
poner diferentes personas en diferentes tareas. Por ejemplo, varios expertos en diseño de
páginas web pueden construir el HTML, y los programadores de servlets dedicarse
exclusivamente al contenido dinámico.
El funcionamiento general de la tecnología JSP es que el servidor de aplicaciones interpreta el
código contenido en la página JSP para construir el código Java del servlet a generar (26). Este
servlet será el que genere el documento (típicamente HTML) que se presentará en la pantalla del
navegador del usuario. Entre muchas de las posibles aplicaciones tenemos páginas de bancos,
juegos online, gestores de contenidos, chats, etc.
3.2.2.2 Sintaxis
La sintaxis de JSP es la sintaxis de Java ya que es código Java (Código 3.16). El código de JSP
dentro de la propia página está incluido en varias etiquetas especiales.
Código 3.16: Escritura en la página de una cadena
System.out.println("Hola Mundo"); // muestra en la página la cadena de texto “Hola mundo”
El código JSP está formado por distintas partes:
___________________________________________________________________ Directivas. Las directivas JSP son instrucciones procesadas por el motor JSP cuando la página JSP
se traduce a un servlet. Las directivas les dicen al motor JSP que incluya ciertos paquetes y
clases. Las directivas están encerradas entre etiquetas de directiva <%@ ... %>. Por ejemplo:
4Los servlets son pequeñas aplicaciones Java que se ejecutan en un servidor web.
___________________________________________________________________ Declaraciones. Las declaraciones JSP nos permiten configurar variables para su uso posterior en
expresiones o scriptlets. También podemos declarar variables dentro de expresiones o en
scriptlets en el momento de usarlas. Las declaraciones van encerradas entre etiquetas de
declaración <%! ... %>. Por ejemplo: <%! String text; %>
___________________________________________________________________ Expresiones. La expresiones JSP nos permiten recuperar dinámicamente o calcular valores a
insertar directamente en la página JSP. Las expresiones van encerradas entre etiquetas de
expresión <%= ... %>. Por ejemplo: <%= getDate() %>
___________________________________________________________________ Scriptles. Los scriptlets JSP nos permiten embeber segmentos de código java dentro de una
página JSP. El codigo embebido se inserta directamente en el servlet generado que se ejecuta
cuando se pide la página. Los Scriptlets van encerradas entre etiquetas <% ... %>. Por ejemplo:
<% int m = 40; System.out.println("jspService m = " + m); %>
3.2.2.3 Ejemplo
Pongamos un ejemplo real que incluya un texto en una página web (Código 3.17). Las páginas
que incluyan código JSP aunque incluyan en su mayoría HTML (fuera del propio JSP), deberán
llevar la extensión “jsp”.
Código 3.17: Escritura en el cuerpo de la página de un saludo acompañado de la fecha actual
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
___________________________________________________________________ Código bien estructurado.
___________________________________________________________________ Integridad con los módulos de Java.
___________________________________________________________________ La parte dinámica está escrita en Java.
___________________________________________________________________ Permite la utilización se servlets.
3.2.2.5 Desventajas
___________________________________________________________________ Los hostings en Java son más caros.
___________________________________________________________________ La curva de aprendizaje es mayor. No es tan fácil de aprender como PHP, pero a la larga dará
mayores frutos.
3.2.2.6 Enlace a la API
___________________________________________________________________ API JSP: http://java.sun.com/products/jsp/2.1/docs/jsp-2_1-pfd2/index.html
3.2.3 Python
Python es un poderoso lenguaje de programación interpretado. Su sintaxis simple, clara y
sencilla; el tipado dinámico, el gestor de memoria, la gran cantidad de librerías disponibles y la
potencia del lenguaje, entre otros, hacen un poderoso lenguaje para el desarrollo web.
Los archivos Python tienen la extensión “.py”.
3.2.3.1 Uso
Algunos casos de éxito en el uso de Python son Google, Yahoo, la NASA, Industrial Light &
Magic, y todas las distribuciones Linux, en las que Python cada vez representa un tanto por
ciento mayor de los programas disponibles. Aunque Python tenía deficiencias a la hora de
rendimiento ya no es problema ya que enmascara otros lenguajes, un ejemplo de uso es el de
Python con Ogre3D (motor gráfico de videojuegos) donde podemos programar la aplicación
entera con Python. Para cosas a más bajo nivel Python usa por debajo un modulo para C/C++ u
otros lenguajes. Existen muchas de las aplicaciones web de Google que están escritas con
Python y uno de los mejores gestores de contenidos que existe (Plone) también está escrito en
su totalidad en Python. (27)
3.2.3.2 Sintaxis
La sintaxis de Python es minimalista deshaciéndose de todo aquello que no sea necesariamente
imprescindible (Código 3.21). El código de Python dentro de la propia página está incluido en
tags especiales.
Código 3.21: Escritura en la página de una cadena
print "Hola Mundo"; // muestra en la página la cadena de texto “Hola mundo”
El código Python se puede incluir en la página con varias etiquetas:
___________________________________________________________________ Mediante su etiqueta propia {% ... %}.
___________________________________________________________________ Mediante la etiqueta común que también comparten PHP, JSP y ASP: <% ... %>
3.2.3.3 Ejemplo
Llegados a este punto si comparamos el ejemplo del Código 3.21 con el de la sintaxis de PHP en
el Código 3.13, podemos observar similitudes a la hora de mostrar mensajes, sin embargo al
contrario que PHP, Python es minimalistas en todos los aspectos. Pongamos un ejemplo real
A la vista de los resultados mostrados en la Figura 3.14 apreciamos la fuerte popularidad que ha
tenido PHP desde sus orígenes y como ha ido cayendo independientemente del surgimiento de
sus tecnologías competidoras. Lo mismo ocurre para ASP pero con una caida más abrupta
llegando a sobrepasar su popularidad a mediados del 2008 por Python. En la predicción PHP
tiende a estabilizarse gracias al gran conjunto de aplicaciones gratis que usan PHP y que ha día
de hoy tienen tendencia de seguir aumentando su popularidad, nos referimos a los CMSs
(Sistemas de Gestión de Contenidos), Blogs, Wikis y Foros hechos en PHP más usados en
Internet y que veremos en el siguiente capítulo. Por otro lado JSP parece mantener su
popularidad aunque por debajo de ASP que es su competidor más directo.
Un dato curioso que podemos apreciar es que no existe previsión para Python, muchas
compañías están apostando por está tecnología por su potencia y sencillez pero es sin duda
Google el que más está influyendo últimamente. Concretamente el código de Google está
escrito en Python y en Java, no sabemos el por qué pero Google nos oculta dicha predicción.
Intentando vaticinar un futuro de cara a la Web 3.0 podríamos arriesgarnos a pronosticar según
los datos estudiados y las pruebas realizadas que la mayor parte del mercado se lo llevarán PHP
y Python, seguidos de JSP.
Figura 3.14: Tendencia de popularidad de las tecnologías en el lado del servidor
CAPÍTULO 2
PÁGINA 47 DE 172
“First we thought the PC was a calculator. Then we found out how to turn numbers into letters with ASCII - and we thought it was a typewriter. Then we discovered
graphics, and we thought it was a television. With the World Wide Web, we've realized
it's a brochure.”
~ Douglas Adams
CAPITULO 4: GESTORES DE CONTENIDOS
n sistema de gestión de contenido ( CMS) permite la creación y administración
de contenidos principalmente en páginas Web. Se trata de una interfaz que
controla una o varias bases de datos donde se aloja el contenido del sitio,
permitiendo manejar de manera independiente el contenido y el diseño. Así, es
posible manejar el contenido y darle en cualquier momento un diseño distinto al sitio
sin tener que darle formato al contenido de nuevo, además de permitir la fácil y
controlada publicación en el sitio a varios editores.
Un sistema de gestión de contenidos (CMS) permite la gestión dinámica de contenido,
incluyendo texto y gráficos, y contenidos 3D como mapas y escenas virtuales. En las
páginas HTML estáticas, cada vez que quiere introducirse un cambio o una
actualización en la página web, el generador de contenidos tiene que descargar la
página, editarla y volverla a actualizar en el servidor. Únicamente el administrador o
usuarios con los mismos permisos pueden actualizar la página. En un sistema CMS
dinámico, sólo es necesario actualizar la página durante la instalación inicial del CMS.
Si se desea añadir un nuevo contenido, basta utilizar un buscador web ordinario y clicar
para incluir nuevos contenidos.
El contenido debe ser aprobado por el administrador del sistema o el grupo de personas
encargadas del mantenimiento, que serán los que aprueben dicho contenido.
Un CMS incluye herramientas de autor para la generación de contenidos, de modo que
los usuarios sin conocimientos informáticos avanzados puedan generar dichos
contenidos de una forma sencilla. Para ello, se suelen utilizar editores WYSIWYG, en
los que el usuario ve y edita el resultado final directamente. Estos sistemas hacen
transparente el código de las páginas, simplificando enormemente el proceso de
creación y edición. También se suelen ofrecer herramientas más avanzadas para
usuarios con mayores conocimientos, permitiéndoles por ejemplo, editar código
directamente.
Para llevar a cabo la gestión de documentos, se utiliza una base de datos que almacena
los documentos junto a información de control de documentos (versiones, autores,
fechas,...), preferencias de usuarios, estructura de navegación,...
Existen hoy en día un gran número de sitios y portales en Internet de gran interés
U
Capítulo
4
dedicados a abordar el tema de la gestión de contenidos Web, por lo que remitimos a
ellos para un conocimiento más profundo de la situación del mercado actual. Entre
todos ellos se incluyen, dentro de los de carácter general: CMS Watch
A grandes rasgos Get Satisfaction nos permite mejorar el soporte de nuestra web y recoger
comentarios. Además permite unificar las interacciones de los clientes a través de nuestra página
web, Facebook, Twitter, blogs y aplicaciones móviles. (39)
En la Figura 5.11 se muestra una captura de la aplicación. Ahora vamos a proseguir con la
descripción de sus características más destacadas.
5.11.2 Características de Get Satisfaction
5.11.2.1 Moderación
___________________________________________________________________ Get Satisfaction permite gestionar al número de empleados dedicados a la moderación de temas
para el soporte de los servicios de nuestra web.
___________________________________________________________________ Permite trabajar con temas concretos pudiendo compartir, actualizar, combinar correspondencia,
archivo, redirigir, mover, eliminar o importar.
___________________________________________________________________ A la hora de las repuestas de soporte, permite retirarlas una vez se ha solucionado la incidencia,
restaurar y promover/degradar en base a la respuesta oficial.
___________________________________________________________________ Respecto a los productos y etiquetas de nuestra web, permite eliminar las asociaciones presentes
en un tema concreto para el que se ofrece soporte.
___________________________________________________________________ Permite añadir automáticamente empleados para dar soporte a Get Satisfaction.
5.11.2.2 Control de nuestros servicios web y de la comunidad interesada en
nuestros servicios
___________________________________________________________________ Get Satisfaction permite administrar datos de la empresa (información básica, logotipos...) y de
nuestros productos (añadir, borrar, editar).
___________________________________________________________________ Posibilita configurar las opciones de entrada a través de las que puede acceder nuestra comunidad
Figura 5.11: Captura de pantalla de Get Satisfaction
(como Facebook, Google, etc)
___________________________________________________________________ Permite inicio de sesión único a través de Fastpass
5.11.2.3 Widgets
Get Satisfaction dispone de widgets para: fichas de votos, investigación, lista de temas,
categoría y productos específicos.
5.11.2.4 Opciones de integración
Integración con Zendesk, Facebook, Pivotal, Salesforce, Twitter, Parature, CRM, etc.
5.11.2.5 Soporte
Con Get Satisfatction podemos disponer de soporte desde la propia comunidad de Get
Satisfaction, vía email y a través de una cuenta de administración.
5.12 Foros
Un foro es una aplicación web que da soporte a discusiones u opiniones en línea. Hay diferentes
tipos de foros disponibles: exclusivos, de noticias, debate único, abiertos a todos y de preguntas
y respuestas. Para un uso general el foro suele ser un lugar abierto donde cualquiera puede
empezar un nuevo tema de debate cuando quiera y todos pueden calificar los mensajes.
Normalmente, cada persona plantea un tema y cualquiera de los usuarios pueden responder a
cualquier tema. Todos los mensajes llevan adjunta la foto del autor o la foto por defecto que
vienen en nuestro perfil cuando nos hacernos usuarios del foro.
Respecto a las discursiones estas se pueden ver anidadas, por rama, o presentar los mensajes
más antiguos o los más nuevos primero. Los administradores pueden mover fácilmente los
mensajes y temas de discusión entre distintas partes del foros y en caso de que se adjunten
imágenes estas se mostraran dentro de los mensajes.
A la hora de búsquedas y seguimiento de mensajes, podemos activar un canal RSS y el número
de artículos a incluir. Permite búsquedas, seguimiento de mensajes leídos/no leídos en los foros
con resaltado que permite ver todos los mensajes nuevos rápidamente y controlar cómo son
mostrados (por foro, por usuario o por sitio).
A continuación en la Tabla 5.12, por orden de uso mostramos las aplicaciones más usadas para
____________________________________________________________ i
mg: imágenes y gif animados
____________________________________________________________ p
df: documentos en PDF
La estructura anterior es una posible organización de los elementos de una página web.
Figura
6.10: Captura de pantalla de FireFTP
La página principal de toda web se llama “index”, es el documento que permite acceder
a todo el contenido, el elemento raíz. El resto son carpetas que se encargan de
almacenar el contenido en los distintos idiomas, el estilo, las imágenes, el JavaScript,
los documentos en PDF , etc.
6.4 Mapa conceptual de una web
Sabiendo a qué tipo de personas va ir dirigida la página y que tipo de recursos vamos a
ofrecer es necesario estructurar la web, es decir, organizar las distintas partes del
contenido. Esto nos ayudará a tener una idea global de la magnitud del proyecto, a
organizarnos y obtener una página web de mayor calidad.
Los pasos para obtener una página de calidad en cuanto a contenido y son:
____________________________________________________________ C
rear un sitio con una jerarquía y enlaces de texto claros. Se debe poder acceder a todas
Figura 6.11:
Ejemplo de estructura de archivos y carpetas para un sitio web
Figura 6.12: Mapa conceptual
las páginas desde al menos un enlace de texto estático.
____________________________________________________________ T
enemos que ofrecer a los usuarios un mapa del sitio con enlaces que conduzcan a las
secciones importantes del mismo. Si el mapa del sitio contiene un número de enlaces
demasiado elevado, es preferible dividirlo en varias páginas.
____________________________________________________________ U
na página debe contener un número razonable de enlaces.
____________________________________________________________ D
ebemos crear un sitio útil con mucha información y redactar páginas que describan el
contenido con claridad y exactitud.
____________________________________________________________ A
la vez que creemos el mapa conceptual tenemos que pensar en las palabras que podrían
introducir los usuarios para localizar nuestras páginas y asegurarnos de que esas
palabras estén incluidas en nuestro sitio.
____________________________________________________________ E
s recomendable utilizar texto en lugar de imágenes para mostrar nombres, contenido o
enlaces importantes. El rastreador de Google no reconoce el texto integrado en
imágenes. Si usamos imágenes para contenido textual, deberemos utilizar el atributo
"ALT" para incluir algunas palabras de texto descriptivo.
____________________________________________________________ T
enemos que asegurarnos de que los elementos <title> (título) y los atributos "alt"
(descripción de una imagen) de nuestro sitio sean descriptivos y precisos.
____________________________________________________________ C
uando estemos creando la jerarquía de páginas del sitio si decidimos utilizar páginas
dinámicas (es decir, si la URL contiene el carácter "?"), hay que tener en cuenta que no
todas las arañas de los motores de búsqueda rastrean tanto páginas dinámicas como
páginas estáticas. Es recomendable que los parámetros sean cortos y reducidos en
número.
Una vez decidida la jerarquía de páginas del sitio, las partes dinámicas y estáticas, y las
descripciones y palabras importantes pasamos a la pre-maquetación.
6.5 Pre-maquetación
Teniendo claro el contenido que queremos ofrecer, pasamos a la parte de maquetación y
presentación. El diseño que tiene una página web es muy similar al de impresión
(revistas, libros, etc.) pudiendo trasladarse cualquier cosa que dibujemos a HTML y
CSS. Por lo general, ese traslado es sencillo, el mayor inconveniente proviene de la
complejidad de cara a la optimización, es decir, legibilidad y posicionamiento,
compatibilidad con navegadores y versiones de estos y velocidad de carga de datos.
Para nuestra implementación vamos a basarnos en las recomendaciones de maquetado
para HTML5 (Figura 6.13). Realmente el maquetado y las nuevas etiquetas que lo
definen del HTML5 surgió de la necesidad y práctica común que se daba en HTML
(Figura 6.13). Además, al hacerlo así ya nos vamos adaptando a los nuevos cambios del
mañana.
En la Figura 6.14 podemos observar una manera más conceptual de la idea que
buscamos en el estándar HTML5 para nuestro maquetado.
Figura 6.13: Código maquetado tipo HTML5 en HTML
Figura 6.14: Buenas prácticas para el maquetado básico
6.5.1 Propuestas gráficas
En primer lugar es conveniente hacer varias propuestas gráficas (Figura 6.15) del
aspecto que queremos conseguir con la página web que estemos realizando. Según el
ámbito en el que nos encontremos es conveniente buscar páginas del mismo tipo para
darnos ideas de diseño, caso de no tener mucha experiencia en el tema.
6.5.2 Distribución del contenido
Con las ideas claras sobre que aspecto queremos conseguir antes de dibujar la página
que buscamos, pasamos a la distribución del contenido. Para la distribución del
contenido vamos a partir de páginas formadas por columnas estándar (entre 1-4), con un
ancho total de la página de 960 pixeles. Se ha elegido 960 pixeles porque hace a nuestro
sitio más versátil a la hora de la visualización en la mayoría de configuraciones de
pantalla. Para la estructura de la página, utilizaremos un framework CSS denominado
960 Grid System. (56)
Al estar utilizando la estructura de cajas de 960 Grid System tendremos que ajustarnos a
los límites del lienzo a la hora de realizar el dibujo de la web.
Puede ser conveniente realizar por medio de cajas un esquema con los elementos
principales de la estructura que estamos buscando (Figura 6.16). Los elementos que
forman dicha estructura se detallan a continuación pudiendo observarlo en mayor
detalle en el dibujo de nuestra página web en la Figura 6.17. Es conveniente que
tengamos las ideas claras desde el principio para que nos centremos mejor en la parte
creativa y de interacción con el usuario.
____________________________________________________________ M
enú superior. Corresponde a la barra superior negra con degradado que contiene la parte
de navegación y opciones de la interfaz, lo forman: Navegación, Idiomas, Vista y
Powered by.
____________________________________________________________ N
avegación. Aparece de derecha a izquierda, permite la navegación por la web, consta de
enlaces a las páginas principales de Inicio, Producto, Empresa y Contacto.
____________________________________________________________ I
diomas. Hace referencia al número de lenguas en los que está disponible la página.
Figura 6.15: Propuestas de aspecto
____________________________________________________________ V
ista. Nos permite conmutar entre 2 tipos de vista: normal o compacta.
____________________________________________________________ P
owered by. Enlace principal a la página de inicio y a la empresa que desarrolla el
producto.
____________________________________________________________ L
ogo. Hace referencia a la página principal y contiene el logo del producto, a la vez que
una frase resumen de lo que hace. Esta formado por una textura gris que se repite.
____________________________________________________________ S
ubmenú. Corresponde a la barra gris consecutiva al logo, es un menú adicional para
navegar a través de la página Producto.
____________________________________________________________ P
aneles, formado por 2 subpaneles: Contenido a la izquierda que contiene la mayoría de
la información y Destacar.
____________________________________________________________ C
ontenido, panel principal encargado de albergar el grosor de contenido de la página.
____________________________________________________________ D
estacar, muestra información puntual del producto y enlaza al lugar interno de la página
donde se encuentra.
____________________________________________________________ F
ondo. Se refiere al fondo azul animado de la página.
____________________________________________________________ M
enú Inferior. Corresponde a la barra inferior negra con degradado que contiene la misma
Figura 6.16: Esquema de maquetado de nuestra web
navegación que aparecía en el Menú Superior más el Copyright, y en logo de validación
de XHTML.
____________________________________________________________ I
r Arriba. Es un botón que aparece en la parte de abajo de la página que nos permite
volver a la parte superior. Solo aparece cuando es necesario.
6.5.3 Dibujo de la web en un editor de imágenes
Teniendo el esquema del maquetado y habiendo definido las partes internas ya podemos dibujar
la página (Figura 6.17) con nuestro editor de imágenes preferido.
Dibujaremos todo por capas de forma que luego podamos exportarlo por separado o leer con
facilidad su información para poder incluirla en el CSS:
___________________________________________________________________ Los logos, iconos, dibujos, esquemas complejos, estados de botones, etc; los exportaremos tal
cual al formato apropiado (png, jpg o gif)
___________________________________________________________________ Los tipos de letra, colores, posiciones de los elementos y algún que otro efecto podremos pasarlo
directamente copiando la información tal cual aparece en nuestro editor de imágenes como
puede ser Gimp a nuestro editor de texto avanzado como puede ser Kate.
6.6 Maquetación
Como hemos comentado en el apartado anterior, el siguiente paso es trasladar la imagen pintada
en Gimp (57) o Photohop (58) a nuestra página web.
6.6.1 Cimientos
Antes de empezar a escribir código en nuestro editor deberemos asegurarnos que el tipo de
codificación es UTF-8 sin BOM:
___________________________________________________________________ El BOM es una marca que se introduce al principio de un documento para indicar el tipo de
codificación que usamos, pero que actualmente está en desuso debido a que puede darnos
incompatibilidades con algunos navegadores y herramientas (por ejemplo la compresión gzip
Figura 6.17: Imagen de la web con las distintas partes marcadas
que veremos más adelante no funciona con el BOM).
___________________________________________________________________ Por defecto en Windows se usa ANSI, que no es sino un ASCII: tenemos un número limitado de
caracteres. Por otro lado, Unicode dispone de todos los caracteres que existen en todas las
lenguas del mundo. De esta forma, si usamos Unicode para nuestra página, todos los usuarios de
cualquier región o idioma podrán acceder sin problemas. Unicode es independiente de la
plataforma, del programa y del sistema operativo y viene por defecto en Linux. Así que
codificaremos con UTF-8 que es simplemente una manera de usar Unicode. (59)
Terminado los ajustes en el editor empezamos ha escribir el código. El primer paso, es definir el
tipo de documento e indicar la codificación (Código 6.1), luego enlazamos a los cimientos de la
maquetación añadiendo los enlaces correspondiente al framework CSS: 960 Grid System.
Código 6.1: Tipo de documento, codificación y enlaces para 960 Grid System
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Código 6.34: Declaración del tipo de documento para HTML 5
Figura 6.29:
Verificación para el tipo de documento
<!DOCTYPE html>
Una vez validado el sitio, el Validador W3C nos ofrece la posibilidad de añadir a nuestra página
un sello que certifica la estandarización de nuestra web. El sello dispone de un enlace que
permite hacer la validación en tiempo real de nuevo.
Las ventajas más importante de tener una web validada son las siguientes:
___________________________________________________________________ Carga más rápida ante menos código extraño.
___________________________________________________________________ Adaptación a múltiples plataformas y navegadores.
___________________________________________________________________ Prepara nuestra web ante cualquier cambio en los navegadores.
___________________________________________________________________ Homogeneiza la visibilidad de nuestra web.
___________________________________________________________________ Permite un mejor acceso de los buscadores y por tanto, mayor trafico.
6.10.2 Verificación del CSS
Para el caso de validación del estilo del documento el proceso sería igual solo que disponemos
de opciones especificas para el estilo (Figura 6.31), como por ejemplo el medio para el que se
renderizan. (65)
En nuestro caso cumplimos con el estándar CSS 2.1, únicamente tenemos errores debido al uso
Figura 6.30: Sello que certifica que nuestra web cumple el estándar
XHTML 1.0 estricto
Figura 6.31:
Verificación para el tipo de estilo
de algunas propiedades propias de los navegadores (Código 6.35). Concretamente hacemos uso
de los bordes redondeados, propiedad especificada en CSS 3 pero que algunos navegadores web
implementaron mientras salía el estándar. Hay que tener en cuenta de que si hacemos uso de una
propiedad para el estilo de un navegador deberíamos buscar una igual o similar en el resto de
navegadores para que la página se vea igual independientemente. Además también incluimos la
propia del estándar para cuando los navegadores la tengan implementada.
Código 6.35: Código que no cumple con la especificación CSS 2.1
border-radius: 10px; /* CSS 3 */
-webkit-border-radius: 10px; /* Chrome, Safari, navegadores basados en Webkit */
-moz-border-radius: 10px; /* Firefox, navegadores basados en Gecko */
-khtml-border-radius: 10px; /* Konqueror, navegadores basados en KHTML (próximamente se
pasarán a Webkit) */
-ms-border-radius: 10px; /* Internet Explorer 7 o superior, navegadores basados en Trends */
En la actualidad existen una gran cantidad de páginas derivadas de la ausencia del cumplimiento
de los estándares en los inicios de Internet. Motores como Gecko (Firefox) y Trends (Internet
Explorer) con un pasado común (Nestcape)y Presto (Opera) mantienen la posibilidad de
renderizar estás páginas fueras del estándar, concretamente para FF e IE el modo de renderizado
se denomina “quirks mode” (modo raro). Sin embargo, otros motores más modernos como
Webkit (Chrome) se limitan básicamente al cumplimento del código permitiendo disponer de un
motor más potente y ligero y con un código más limpio.
6.11 Dando de alta nuestro sitio en los buscadores
En este momento vamos a dar de alta nuestro sitio en los buscadores más importantes para que
salga en las listas de búsqueda cuando se este buscando algo relacionado con lo que ofrecemos.
Existen dos formas de añadir un sitio a un buscador, con el método tradicional de “sugerir
dirección”, es decir manualmente (Figura 6.32) y mediante enlaces de páginas ya indexadas que
apuntan a nuestro
sitio. (66)
Sugerir un sitio a
un motor de
búsqueda tiene el
Figura 6.32: Sugerir un sitio a Google
inconveniente de que puede demorar varios meses. Por otra parte, es mucho mas efectivo (por
su velocidad) para aparecer en los buscadores más importantes, recibir un link (hipervínculo o
enlace) de algún sitio que ya esté en los buscadores. De esta forma cuando Google, Yahoo o
MSN Search visiten dicha web seguirán el link hacia nuestro sitio y lo almacenarán en sus bases
de datos. Cuantos más links se consigan más rápida será la inclusión.
Lo más normal es que una vez hecho los enlaces a nuestro sitio tarde un par de semanas en
indexarse, durante ese tiempo podemos ir añadiendo las aplicaciones para la mejora, control,
mantenimiento y marketing que veremos en el próximo apartado.
6.12 Visibilidad
Sugerido nuestro sitio a los principales buscadores de Internet vamos a añadir una serie de
aplicaciones para nuestro sitio mientras lo dan de alta. En este primer caso usaremos Google
Webmasters Tools (67) que nos brinda la posibilidad de adaptar y configurar la visibilidad de
nuestro sitio en Internet. Aunque influye directamente sobre las directrices de Google, las
optimizaciones que haremos también valdrán para el resto de buscadores (siempre que hayamos
dado de alta nuestro sitio en ellos también). Estamos hablando de la optimización para motores
de búsqueda común mente conocida como SEO.
Google Webmasters Tools, aunque es una aplicación web, no la vimos dentro del capítulo de
aplicaciones simplemente porque su carácter no es añadir funcionalidad a la propia web sino
mejorarla optimizándola para su visibilidad, no es una aplicación que forma parte de nuestro
sitio web y/o que el usuario de nuestra web pueda usar.
Para usar esta fabulosa herramienta que nos ofrece de manera gratuita Google es necesario crear
una cuenta de Google y añadir un sitio (lógicamente tendremos que ser el webmaster). Los
pasos para demostrar que somos el webmaster del sitio a Google Webmasters Tools son:
1. ___________________________________________________________________ Accedemos a https://www.google.com/webmasters/tools/ desde nuestra cuenta de Google.
2. ___________________________________________________________________ Le damos al botón “Añadir sitio” e introducimos la URL de nuestro sitio.
3. ___________________________________________________________________ Nos ofrecen varios métodos de verificación, nosotros usaremos por ejemplo el primero que es
mediante meta tag (Figura 6.33). Lo copiamos y añadimos a la cabecera de nuestra página
principal (index). Cuando este listo hacemos clic en “Verificar”
Una vez verificado nuestro sitio podremos acceder a un gran número de herramientas que nos
ofrece Google (Figura 634), los grupos de herramientas son:
___________________________________________________________________ Panel (resumen de Información básica, Indexación, Diagnósticos, etc)
___________________________________________________________________ Mensajes (de servicios contratados con Google, alertas, etc)
___________________________________________________________________ Información del sitio
___________________________________________________________________ Su sitio en la Web (indexación)
Una vez tengamos el Sitemap generado lo subimos a nuestro servidor de hospedaje y lo
enviamos a Google (Wembasters Tools / Información del sitio / Sitemaps)
6.12.1.2 Acceso de rastreadores
Continuando en este mismo apartado de información del sitio vamos a configurar el archivo
robots. El archivo robots.txt (Código 6.37) es un fichero de texto que dicta unas
recomendaciones para los robores de los motores de búsqueda encargados de indexar las
páginas (conocidos también como rastreadores, arañas, etc). Para nuestro caso lo hemos
configurado de manera similar para todas las arañas.
Código 6.37: Robots
# Nombre del robot. Hemos decidido que sea una configuración validad para todos
User-agent: *
# En principio permitimos todo para después concretar que partes denegamos
Allow: /
# Partes prohibidas para las arañas (rastreadores)
Disallow: /es/data/
Disallow: /es/data/contact.php
Disallow: /en/data/
Disallow: /en/data/contact.php
# Donde se encuentra nuestro sitemap
Sitemap: http://www.hermesmarinas.com/sitemap.xml
El fichero robots.txt es posible generarlo de forma manual o directamente con Google
(Wembasters Tools / Información del sitio / Acceso a Rastreadores) que nos permite hacer
pruebas de funcionamiento. Tenemos que ponerlo en la raíz de nuestro sitio (al igual que el
Sitemap). En este caso no tenemos la opción de enviarlo se detectará automáticamente, pero
para subirlo deberemos hacerlo a través de nuestra cuenta FTP (por ejemplo usando FireFTP).
En caso de indicar en el robots el Sitemap no necesitaríamos indicárselo a Google como hicimos
en el apartado anterior. El robots.txt tiene que ir siempre en el directorio raíz del sitio, el
Sitemaps nos obligatorio que este alojado allí pero si altamente recomendable.
6.12.1.3 Enlaces del sitio
Los enlaces del sitio son enlaces a las zonas internas de nuestro sitio. No todos los sitios tienen
enlaces del sitio, por lo general lo incorporan aquellas web con un volumen tal de páginas que
Google cree oportuno mostrarla en la indexación por zonas (Figura 6.37) para facilitarle el
acceso al usuario. Google genera estos enlaces automáticamente, pero podemos eliminarlos si lo
deseamos. Para nuestro caso al no ser lo suficientemente grande el sitio no tenemos enlaces
internos a nuestro sitio.
6.12.1.4 Cambio de dirección
Este herramienta es útil si estamos pensado en cambiar el sitio a un dominio nuevo, utilizando
está herramienta informamos a Google de nuestra URL nueva. Esto nos permitirá actualizar
nuestro índice (indexación) más rápidamente y facilitará la transición a los usuarios de nuestro
sitio. No lo vamos a usar ya que acabamos de dar de alta la página en un buen servidor de
hospedaje y no ha pasado el tiempo suficiente como para estudiar nuevas ofertas de alojamiento.
6.12.1.5 Configuración
Esta herramienta permite indicar la zona geográfica, el dominio preferido para nuestro sitio y la
frecuencia de rastreo de los rastreadores.
___________________________________________________________________ Zona geográfica. Si nuestro sitio está orientado a usuarios de una determinada ubicación,
podemos proporcionar información a Google para determinar cómo aparece el sitio en los
resultados de búsqueda y a mejorar estos resultados en las consultas geográficas. Esta función se
puede utilizar únicamente en sitios con un dominio de nivel superior neutro, como .org o .com,
puesto que los dominios específicos de país, como .ie o .fr, ya están asociados a un país o a una
región. Si no deseamos que nuestro sitio se asocie a una ubicación, seleccionaremos "Ninguno".
Para nuestro podríamos seleccionar España, pero vamos a dejarlo a nivel global puesto que
nuestro sitio no esta dirigido a ese público concreto.
___________________________________________________________________ Dominio preferido. El dominio preferido es aquel que nos gustaría utilizar para indexar las
páginas de nuestro sitio web. Si especificamos nuestro dominio preferido como
http://www.nuestrositioweb.es y Google detecta un enlace a nuestro sitio en el formato
http://nuestrositioweb.es, lo tratará como http://www.nuestrositioweb.es . Asimismo, Google
tendrá en cuenta nuestra preferencia cuando muestre las URL en sus resultados de búsqueda.
___________________________________________________________________ Frecuencia de rastreo. Los rastreadores de Google tienen como objetivo rastrear el mayor número
de páginas de su sitio en cada visita sin colapsar el ancho de banda de nuestro servidor.
Podemos cambiar la frecuencia de rastreo (el tiempo que emplea Googlebot para rastrear el
sitio) de los sitios que están en el nivel raíz o en un subdominio como, por ejemplo,
www.nuestrositioweb.com y http://subdominio.nuestrositioweb.com. Al configurar la frecuencia
de rastreo de nuestrositoweb.com, se incluirá todo el dominio, por lo que no tendremos que
establecer un valor para los subdominios (por ejemplo, http://subdominio.nuestrositioweb.com)
de forma independiente (a menos que deseemos configurar de forma explícita una frecuencia de
rastreo diferente para un subdominio determinado con respecto al resto del dominio). El nuevo
valor que indiquemos será válido durante los próximos 90 días. Para nuestro caso vamos a dejar
la opción de recomendada, es decir, dejamos que Google establezca la frecuencia de rastreo que
cree apropiada.
6.12.2 Su sitio en la web
Dentro de “Su sitio en la web” (Figura 6.38) tenemos las herramientas básicas para conocer a
grandes rasgos la importancia de nuestro sitio en Internet. Este apartado toma mayor
Figura 6.37: Sitio con enlaces internos en las búsquedas de Google
importancia una vez que la página ha sido indexada y rastreada en varias ocasiones ya que nos
muestras estadísticas, evoluciones, etc.
6.12.2.1 Consultas de búsquedas
Este herramienta muestras aquellas búsquedas, palabras y combinaciones de palabras que han
llevado a los usuarios del buscador hasta nuestro sitio web. Una página bien posicionada será
aquella cuyas consultas de búsqueda coincidan con las palabras claves que definen nuestro sitio.
6.12.2.2 Enlaces a su sitio
Esta herramienta muestra los enlaces a nuestro sitio. Normalmente si es un sitio nuevo tendrá
pocos o ningún enlace reconocido por Google. En nuestro caso no aparecen enlaces a nuestro
sitio.
6.12.2.3 Palabras clave
Esta herramienta muestra las palabras clave más habituales que ha encontrado Google al rastrear
nuestro sitio. Estas palabras clave deben representar el tema principal del sitio. Para nuestro
caso las palabras claves coinciden con la temática de nuestro sitio. En caso contrario, podríamos
enfocar o redactar el contenido de otra forma para conseguir las palabras que más definen
nuestro sito.
6.12.2.4 Enlaces internos
Este herramienta nos ayuda a conocer que páginas de nuestro sitio apuntan a otras páginas de
nuestro propio sitio.
6.12.2.5 Estadísticas de suscriptor
Un suscriptor es un usuario que está fidelizado a nuestro sitio, es decir, dispone de una
dispositivo (semilla de suscriptor, feed) que le avisarle de cuando se ha cambiado algo en la
página para que vuelva a visitarla. Para nuestro caso no tenemos ningún tipo de “feed” para que
los usuarios se puedan suscribir a nuestro sitio, por lo que, no nos aparece nada en está
herramienta.
6.12.3 Diagnósticos
Dentro de “Diagnósticos” (Figura 6.39) tenemos las herramientas básicas para conocer a
grandes rasgos la importancia de nuestro sitio en Internet. Este apartado toma mayor
importancia una vez que la página ha sido indexada y rastreada en varias ocasiones ya que nos
muestras estadísticas, evoluciones, etc.
Figura 6.38:
Herramientas de “Su sitio en la web”
6.12.3.1 Software malintencionado
Esta herramienta muestras si tenemos albergado en nuestro sitio de manera conciente o
inconciente software malintencionado, tales como spam, virus, etc; que pudiera extenderse a
aquellos usuarios que visiten nuestra sitio. Para nuestro caso no aparece ningún software
malintencionado como era de esperar.
6.12.3.2 Errores de rastreo
Esta herramienta muestra los enlaces rotos a nuestro sitio. Estos enlaces rotos pueden ser
enlaces mal escritos en el código HTML o páginas, archivos, etc mal ubicados. Para nuestro
caso no tenemos errores de rastreo. Por lo general, si hacemos uso de la Consola de Errores que
explicamos en apartados anteriores y vamos renderizando las páginas que vamos
implementando reduciremos los posibles errores de rastreo.
6.12.3.3 Estadísticas de rastreo
Esta herramienta muestra actividad de los rastreadores de Google en los últimos 90 días. Puede
servirnos para configurar la frecuencia de rastreo que vimos en apartados anteriores
(Información del sitio/Configuración/Frecuencia de rastreo). Si nuestro servidor no se
sobrecarga puede convenirnos aumentar la frecuencia de rastreo si nuestro sitio sufre cambios
constantemente.
6.12.3.4 Sugerencias en HTML
Esta herramienta muestra errores en el HTML, problema de contenido en nuestro sitio. Al
rastrear Googlebot nuestro sitio, busca cualquier posible problema relacionado con el contenido
de las páginas que lo componen como, por ejemplo, metadescripciones o etiquetas de título
problemáticas, duplicadas o ausentes. Estos problemas no impedirán que nuestro sitio aparezca
en los resultados de búsqueda de Google, pero si prestamos atención a estos elementos,
podremos proporcionar a Google más información e incluso ayudarle a atraer más tráfico hacia
nuestro sitio. Por ejemplo, el texto de las metadescripciones y del título puede aparecer en los
resultados de búsqueda y los usuarios tienden a hacer clic en texto descriptivo porque les resulta
más útil. Para nuestro caso no tenemos problemas y/o errores en el HTML. Por lo general,
haciendo uso de la Consola de Errores durante la implementación y del Verificador W3C no
tendremos problemas.
6.12.4 Labs
Dentro de “Labs” (Figura 6.40) tenemos las herramientas básicas para hacer pruebas con
nuestro sitio web.
Figura 6.39:
Herramientas de Diagnóstico
6.12.4.1 Explorar como Googlebot
Con la herramienta Explorar como Googlebot, podemos saber exactamente cómo ve una página
un rastreador (Código 6.38) según el tipo de rastreador (para web, para dispositivo móvil, etc).
Introduciendo la URL que deseemos recuperar o dejando el campo en blanco para recuperar la
página principal. Para nuestro caso la recuperación es perfecta, Google ve la página tal cual la
implementamos.
URL: http://www.hermesmarinas.com/
Fecha: Fri Oct 08 08:50:51 PDT 2010
Tipo de robot de Google: Web (Hemos hecho la recuperación de como lo haría para PC normal)
Código 6.38: ¿Qué ve el rastreador de Google?
HTTP/1.1 200 OK // No ha habido problemas al hacer la petición de la página web al servidor
Date: Fri, 08 Oct 2010 15:50:52 GMT // Fecha
Server: Apache // Tipo de servidor donde tenemos alojada la página
X-Powered-By: PHP/5.2.14 // Versión de PHP soportada por el servidor
Content-Encoding: gzip // Compresión
Vary: Accept-Encoding // Aceptada la compresión
Content-Length: 3323 // Longitud del contenido
Keep-Alive: timeout=2, max=99 // Periodos de conexión
Connection: Keep-Alive // Mantiene la conexión según los periodos anteriores
Content-Type: text/html // El tipo de marcado de texto es HTML
…// A partir de aquí vendría el código de la página tal cual lo implementamos (caso de que la
exploración haya sido correcta)
6.12.4.2 Sidewiki
Google Sidewiki permite que los usuarios añadan información útil en cualquier página web.
Esta herramienta se utiliza para crear una entrada del propietario de la página especial para el
sitio web. Si somos el dueño o webmaster, pdemos publicar una entrada especial de Sidewiki en
las páginas de nuestro sitio. Podemos publicar una entrada maestra para todo el sitio o crear
entradas de páginas específicas para atraer a nuestros usuarios. Estas entradas especiales
aparecerán con un fondo verde sobre otras entradas en la parte superior de la barra lateral de
Sidewiki.
Es necesario tener la Sidewiki instalado aparte para poder usarlo desde Google Webmaster
Tools. Para nuestro caso no lo tenemos instalado porque básicamente usamos Google
Webmaster Tools en su mayoría para mejorar la página en su conjunto, para el buscador de
Google de manera primordial y de forma secundaria para otros buscadores. No usamos
Webmaster Tools para añadir aplicaciones propias para añadir comentarios como puede resultar
Sidewiki porque para ello hay otros medios como ya vimos en el tema de aplicaciones.
Figura 6.40:
Herramientas para hacer pruebas
6.12.4.3 Rendimiento del sitio
Esta herramienta muestra estadísticas sobre el rendimiento de nuestro sitio. Podemos utilizar
esta información para mejorar la velocidad del sitio y para ofrecer un servicio más rápido a los
usuarios.
En una primera visión general del rendimiento tenemos que las páginas de nuestro sitio tardan
una media de 2,1 segundos en cargarse (actualizado el 23/08/2010). El tiempo de carga medio
de nuestro sitio es más rápido que el del 66% de los sitios.
Cabe mencionar que la información que da está herramienta es bastante escasa pero nos da una
visión global. Concretamente para el rendimiento del sitio, para la optimización ya usamos en
apartados anteriores el Page Speed con el que evaluamos el rendimiento de nuestras páginas y
obtuvimos sugerencias sobre cómo mejorarlas. Por tanto, mejorar la velocidad media de 2.1
segundos por páginas es bastante complicado ya que nuestra página está optimizada, esa media
de carga se debe al gran volumen de imágenes y animaciones de las que disponemos.
6.12.4.4 Sitemap de vídeo
Ya vimos lo que era un Sitemap, por lo que un Sitemap de vídeo básicamente lo que hace es
usar la extensión de Google para incluir vídeo con el protocolo de Sitemap de forma que facilite
información al buscador acerca del contenido de los vídeos de nuestro sitio. Contiene todos los
vídeos con la ubicación y prioridad. Para nuestro caso no usamos contenido de vídeo por lo que
no será necesario realizar ningún Sitemap de vídeo.
6.13 Google Analytics
Habiendo hecho las optimizaciones propias con Google Wemasters Tools y estando indexado
nuestro sitio (aunque no es necesario, pero se recomienda para obtener más tráfico) vamos a
añadir una de las aplicaciones más importantes que vimos en el Capítulo 5. Concretamente nos
referimos a una aplicación para el análisis y el marketing: Google Analytics.
Google Analytics es sin duda la mejor aplicación web para ofrecernos estadísticas sobre nuestro
sitio. Como ya comentamos en el Capítulo de Aplicaciones, Google Analytics, nos ofrece
estadísticas sobre la inversión publicitaria, el tráfico, elementos multimedia, etc. Nos vamos a
central principalmente en como incluirlo en nuestra página y muy por encima en los grupos de
informe.
Para usar esta fabulosa herramienta que nos ofrece de manera gratuita Google es necesario
logearnos y añadir un sitio. Los pasos para añadir un sitio a Google Analytics son los
siguientes:
1. ___________________________________________________________________ Accedemos a http://www.google.es/analytics desde nuestra cuenta de Google.
2. ___________________________________________________________________ Le damos al enlace “Añadir perfil del sitio web” e introducimos la URL de nuestro sitio eligiendo
la opción de “Añadir un perfil para un dominio nuevo” (Figura 6.41).
3. ___________________________________________________________________ El último paso es copiar el código de seguimiento que nos aparece al añadir el nuevo sitio web.
Este código tiene que ir en todas las páginas de nuestro sito sobre las que queremos realizar un
seguimiento con Google Analytics.
___________________________________________________________________ Antes del fragmento de código de seguimiento de la sección <head> del código HTML.
___________________________________________________________________ Después tanto del fragmento de código de seguimiento como de todo el contenido de la página
(por ejemplo al final del cuerpo del código HTML). Nosotros optaremos por esta opción
(Código 6.39) por ser la mejor para la carga de la página. En apartados anteriores vimos que
todos los scripts que no sean estrictamente necesarios van al final de la página web.
Código 6.39: Seguimiento de Google Analytics
...
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
var pageTracker = _gat._getTracker("UA-10788966-3"); // Identidad del perfil
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
La verificación del nuevo perfil para nuestro sitio por parte Google Analytics no es
inmediata podrá tardar varios días. Una vez verificado el sitio podremos acceder a un
gran número de herramientas sobre estadísticas ordenadas por grupos:
Panel (resumen de las estadísticas más importantes)
Intelillenge (alertas automáticas sobre las estadísticas)
Usuarios (visitantes, perfiles técnicos, segmentación de usuarios)
Fuentes de tráfico (fuentes que enviaron visitas, palabras clave)
Contenidos (número de visitas de cada página, contenido principal, análisis de
navegación)
Objetivos (metas conseguidas)
Figura 6.41: Crear un nuevo perfil del sitio web en Google Analytics
Por defecto se nos muestra el panel (Figura 6.42), que no es más que un resumen de los datos
más relevantes: número de visitas, páginas más visitadas, uso del sitio, etc.
Vamos a comentar de manera muy superficial los grupos de informes estadísticos ya que Google
Analytics es demasiado extenso y en su mayoría se enfoca al marketing que aunque tiene algo
que ver con la visibilidad de nuestro sitio se sale del ámbito general de estudio de este
documento.
6.13.1 Intelligence
En este informe se muestra una lista de las alertas automáticas y personalizadas de las métricas
diarias dentro del periodo seleccionado. Dichas alertas pueden ser debidas a una reducción del
número de visitas, promedio de tiempo en el sitio, etc. Por defecto, solo tenemos activada las
alertas pos número de visitantes (primera gráfica del la Figura 6.42) pero podemos añadir tantas
como queramos. Además, podemos visualizar las alertas diarias, semanales y mensuales (Figura
6.43), obteniendo de esta forma el cambio en las alertas a lo largo del tiempo según las
modificaciones en nuestro sitio web.
Figura 6.42: Panel de Google Analytics
6.13.2 Usuarios
En este informe se muestra cuántos usuarios han visitado nuestro sitio web y cuánto tiempo han
dedicado a interactuar con el contenido. El informe ofrece (Figura 6.44) una perspectiva del
tráfico que nos permite centrarnos en las características de distintos segmentos de usuarios que
visitan el sitio, y examinar los diferentes factores que conforman la calidad de las visitas (es
decir, el promedio de páginas vistas, el tiempo que el usuario pasa en el sitio o el porcentaje de
rebote).
6.13.3 Fuentes de tráfico
En este informe se muestra una descripción de las distintas fuentes que envían tráfico a nuestro
sitio web. El informe ofrece (Figura 6.45) un gráfico con las tendencias del tráfico, mientras
que el diagrama y las tablas reflejan los elementos que impulsan dichas tendencias. El
parámetro "Tráfico directo" indica las visitas de los usuarios que han hecho clic en un marcador
para acceder a nuestro sitio web o que han introducido la dirección URL directamente en el
navegador. "Sitios de referencia" muestra las visitas procedentes de otro sitio web. El indicador
"Motores de búsqueda" refleja las visitas que proceden de una página de resultados de un motor
de búsqueda.
Figura 6.43: Intelligence (alertas automáticas)
Figura 6.44: Usuarios
6.13.4 Contenido
En este informe se ofrece (Figura 6.46) un resumen del volumen de páginas vistas, así como una
lista de las páginas ("Contenido principal") que más han influido en estas visitas. Las "Páginas
de acceso" permiten supervisar los porcentajes de rebote en las principales páginas de destino.
Es recomendable que modifiquemos aquellas páginas que presentan un índice de rebote
elevado.
6.13.5 Algunas estadísticas
A continuación mostramos una pequeña parte de las estadísticas que hemos obtenido de Google
Analytics y que nos mostrarán si necesitamos mejorar la página, seguir con la misma filosofía
de marketing o tomar algunas decisiones concretas sobre nuestros objetivos.
___________________________________________________________________ El porcentaje de cambios que hemos hecho en nuestro sito con respecto al mes anterior a
Figura 6.45: Fuentes de tráfico
Figura 6.46: Contenido
mejorado nuestros informes un 249,02%
___________________________________________________________________ El 60% del tráfico hacia nuestro sitio es directo (URL en la barra de direcciones del navegador).
___________________________________________________________________ El 25% del tráfico se debe a motores de búsqueda (Google, Yahoo, etc).
___________________________________________________________________ El 15% del tráfico se debe a sitios de referencia (enlaces a nuestro sitio).
___________________________________________________________________ El último mes ha habido un aumento del número de visitas.
___________________________________________________________________ El numero total de visitas en todo el mes ha sido de 154.
___________________________________________________________________ De ese total de visitas prácticamente la mitad han sido de usuarios que han vuelto a entrar.
Tenemos un total de 77 usuarios.
___________________________________________________________________ Las páginas vistas por los usuarios han sido 409. No es que tengamos tantas páginas,
simplemente es te resultado es el múltiplo de páginas vistas por cada uno de los usuarios.
___________________________________________________________________ La mayoría de los usuarios ven 2 páginas y media.
___________________________________________________________________ Las páginas más visitadas son las que más nos interesan
___________________________________________________________________ En el 60% de las visitas los usuarios han salido de nuestro sitio desde la página que accedieron
(porcentaje de rebote).
___________________________________________________________________ Casi la mitad de las visitas se debieron a usuarios nuevos.
___________________________________________________________________ La mayoría de usuarios que entraron usaban Firefox desde Windows y Safari desde Mac.
___________________________________________________________________ Sabemos que un alto porcentaje de visitas se hicieron usando conexión a internet por cable.
___________________________________________________________________ España es el país que genera más tráfico hacia nuestra página, concretamente las grandes
ciudades costeras.
___________________________________________________________________ El idioma principal de los visitantes es el español.
Por lo general, no tendríamos porque cambiar ninguna página de nuestro sitio aunque siempre
se puede mejorar u ofrecer nuevas experiencias a nuestros usuarios. Nuestras inversiones están
teniendo resultados directos en lo que se refiere a las perspectivas que buscábamos con nuestro
sitio (negocio).
6.14 Conclusiones
En este capítulo hemos visto los pasos a seguir para realizar una web con las tecnologías,
aplicaciones vistas cumpliendo el estándar del W3C y con un pie en el futuro cercano del
desarrollo. Sin embargo, una buena base donde construir y ofrecer algo no es nada si no
ofrecemos un contenido interesante y de calidad sin esperas para el usuario. Por ello, hemos
estudiado también como crear buenos contenidos (mapa conceptual) separados del estilo y la
interacción (web semántica), optimizando la descarga (PageSpeed) y entendiendo lo que los
usuarios quieren (Analytics).
El contenido es muchísimo más importante que el continente, el ofrecer a los usuarios lo que
buscan sin engañarlos es la base para la visibilidad en los buscadores, es la regla fundamental
del SEO (69). Aunque nuestra página tenga irregularidades, si el contenido es claro y de calidad
puntuaremos positivamente en nuestra visibilidad. Cabe destacar que eso no quita de que
páginas con irregularidades en el estándar y falta de optimizaciones de carga puntúen
negativamente en el posicionamiento.
Volviendo al ejemplo con el que hemos documentado la implementación web, podríamos
enmarcar nuestro sitio dentro de la Web 3.0 ya que: el contenido está separado del aspecto
visual y existe contenido dinámico e interacción.
Nuestra web se centra fundamentalmente en mostrar información al usuario pero si hubiésemos
querido hacer una aplicación (por ejemplo un editor de textos online) los pasos hubieran sido los
mismos. El único cambio hubiese sido:
___________________________________________________________________ Aumento en el desarrollo de algoritmos complejos usando los lenguajes de programación vistos
para la web
___________________________________________________________________ Aumento del contenido dinámico y uso del servidor
Centrarse en el desarrollo concreto de una aplicación compleja se sale del margen de estudio
que no es otro que la web y su futuro. No obstante y como hemos dicho con antelación, muchas
aplicaciones de escritorio pueden desarrollarse online y en un futuro próximo podrán realizarse
hasta aquellas que siempre han requerido de un sobremesa de alta gama.
CAPÍTULO 2
PÁGINA 153 DE 172
“Nuestro destino ejerce su influencia sobre nosotros incluso cuanto todavía no hemos aprendido su naturaleza; nuestro futuro dicta las leyes de nuestra actualidad.”
~ Friedrich Nietzsche
CAPITULO 7: NUEVAS TECNOLOGÍAS
omenzamos este libro con la introducción y definición del termino Web 3.0, que
no fue otro que el de la Web Semántica. Aunque actualmente existen varias
definiciones para este concepto y no existe consenso, el cambio fundamental es
la separación del contenido del resto de elementos. Junto con ese cambio
acompañan también nuevos usos y herramientas online más complejas gracias a las
tecnologías y aplicaciones para el desarrollo que hemos estudiado. A lo largo de todos
los capítulos hemos ido recorriendo el estado actual de la Web intentando ver la
tendencia de cara a la nueva versión. Después de los temas tratados, podemos hacernos
una idea de que navegadores, tecnologías y aplicaciones para el desarrollo continuarán
en la Web 3.0. Pero la cosa no acaba ahí, actualmente y arropados por Google se están
afianzando nuevas poderosas tecnologías. Para hacernos una idea de lo que se nos
avecina, en este capítulo introduciremos:
___________________________________________________________________ HTML5 como maquetado sustituto del HTML 4.01
___________________________________________________________________ CSS 3 como estilo sustituto del CSS 2.1
___________________________________________________________________ WebM como contenedor multimedia sustituto de Flash
___________________________________________________________________ WebGL como generador 3D sustituto de VRML
7.1 HTML5
HTML5 es la nueva versión del lenguaje de etiquetado para la elaboración de páginas web.
Básicamente a simple vista podemos apreciar que se han acortado declaraciones, se han añadido
etiquetas con nuevas y/o complejas posibilidades y se han eliminado otras. Sin embargo, la
cualidad fundamental del HTML5 con respecto a sus antecesores es que se presenta como una
plataforma para integrar perfectamente cualquier tipo de aplicación online. (70)
7.1.1 Características fundamentales
7.1.1.1 Geolocalización
La geolocalización o ubicación geográfica ya se está utilizando en toda la web hoy en día.
Muchos sitios web muestran su ubicación actual, localización de establecimientos, información
C
Capítulo
7
como el tiempo o las noticias locales. Actualmente existe una API que usando HTML5 y
JavaScript permite definir la información de ubicación con el interfaz de alto nivel (GPS)
asociado con el dispositivo desde donde establecemos la conexión. Según el tipo de conexión
desde donde accedemos a la red, podemos incluir la direcciones IP, RFID, WiFi y Bluetooth,
direcciones MAC e identificadores GSM/CDMA entre otros muchos tipos de datos personales
para que nos muestre información de utilidad personal relativa a nuestra ubicación. Todo esto
siempre y cuando se cuente con la autorización del usuario.
7.1.1.2 Web Workers
Al realizar operaciones avanzadas en un navegador web, tanto página web donde se ejecuta
(servidor), así como para el navegador web (cliente) se sobrecargan pudiendo en ocasiones
quedarse colgado y dejar la interfaz del usuario sin responder hasta que esté terminada la
operación. Sin embargo, gracias a HTML5 hay una manera para hacer frente a este problema
usando Web Workers. (71)(72)
Básicamente, los Web Workers ofrecen la posibilidad de cargar un archivo JavaScript de forma
dinámica y, a continuación disponer de un código para ejecutar el proceso que ralentiza en un
proceso de fondo, de forma que no afecte a la interfaz de usuario, ni a su nivel de respuesta.
Con esta característica de HTML5 podemos seguir haciendo lo que queramos, seleccionar cosa,
hacer clic, etc mientras que todos los cálculos del sitio web se realizan de fondo.
7.1.1.3 Cache para aplicaciones web
Esta cache tiene la capacidad de almacenar aplicaciones web como por ejemplo de correo
electrónico a nivel local y acceder a ella sin tener que conectarse a Internet o instalar un cliente
externo como Outlook o Thunderbird. Actualmente, podemos encontrar una de las mejores
implementaciones de las especificaciones de HTML5 para aplicaciones de caché con Google
Gears que nos permite acceder a Gmail sin conexión.
En este concepto radica uno de los usos principales de la Web 3.0 que veremos en el último
capítulo.
7.1.1.4 Canvas
Gracias a la nueva etiqueta canvas podemos dibujar y renderizar imágenes directamente en la
web por medio de un lienzo (Código 7.2). Es como si tuviéramos un editor de imágenes online
al que le podemos sacar el máximo partido añadiéndole funcionalidades extras a nuestro gusto
por medio de JavaScript. Esto permite crear videojuegos, animaciones complejas, interfaces
avanzados, etc.
Código 7.1: Incluir lienzo en HTML5
<canvas>Tu navegador no soporta el elemento canvas</canvas>
En el Código 7.1 tenemos un ejemplo simple que toma las dimensiones del elemento canvas por
defecto (300x150 pixeles), pero si lo deseamos podemos especificar por medio de atributos
“width” y “height”.
7.1.1.5 Vídeo
Gracias a la nueva etiqueta de vídeo es muy sencillo incluir cualquier vídeo en nuestra web
(Código 7.2) pudiendo incluso crear algunos efectos con JavaScript. Estableciendo la URL del
archivo podríamos visualizar cualquier formato y además sin ningún tipo de plugin (no
necesitamos más Adobe Flash para vídeos). Realmente es igual que hacíamos para el caso
concreto de la etiqueta imagen.
Código 7.2: Incluir vídeo en HTML5
<video src=“willow.mp4”>Tu navegador no soporta el elemento video</video>
En el Código 7.1 tenemos un ejemplo simple que toma los valores del elemento vídeo por
defecto, pero si lo deseamos podemos especificar por medio de atributos el tipo de control, las
dimensiones, etc.
7.1.2 Diferencias entre (X)HTML5 y (X)HTML
La quinta versión del HTML a efectos de maquetado comparada con HTML tiene tres
diferencias básicas (Código 7.3 y 7.4):
___________________________________________________________________ HTML5 tiene nuevos elementos de bloque específicos cuyo carácter es puramente semántico. En
nuestra implementación teníamos que usar identificadores para dar ese carácter semántico a los
div.
___________________________________________________________________ HTML5 tiene nuevos elementos con distintas funcionalidades: vídeo, canvas, etc.
___________________________________________________________________ HTML5 a eliminado muchas etiquetas y atributos que estaban en desuso.
Código 7.3: Documento HTML 4.01 similar a HTML5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <!-- tipo de documento -->
<html> <!-- en HTML 4.01 podemos escribir en minúsculas o mayúsculas -->
<!DOCTYPE html> <!-- tipo de documento más simple -->
<html>
<head>
<meta charset="utf-8"> <!-- tipo de codificación más corta-->
</head>
<body>
<header> <!-- div semántico para la cabecera -->
<h1>Nuestro sitio</h1>
</header>
<nav> <!-- div semántico para la navegación -->
<ul>
<li>Inicio</li>
<li>Productos</li>
<li>Contacto</li>
</ul>
</nav>
<section> <!-- div semántico para una sección-->
<h1>Nuestro articulo</h1> <!-- artículo-->
<article> <!-- div semántico para una artículo de la sección-->
<p>...</p> <!-- párrafo-->
</article>
</section>
<footer> <!-- div semántico para el pié de página-->
<p>...</p>
</footer>
</body>
</html>
7.1.2.1 Nuevas etiquetas
Hasta ahora hemos visto las etiquetas de canvas y video dentro de las características
fundamentales del HTML5:
___________________________________________________________________ <canvas> para mostrar gráficos renderizados en tiempo real
___________________________________________________________________ <video> para añadir vídeo.
También tenemos las etiquetas básicas para del maquetado que son las mismas que introdujimos
en el Capítulo de Implementación en la Figura 6.14:
___________________________________________________________________ <header> para representa la cabecera (saludo inicial, logo de empresa, etc).
___________________________________________________________________ <nav> para representa la sección de navegación (menú).
___________________________________________________________________ <article> para declarar un trozo del contenido como artículo (articulo en periódicos, entradas en
blogs, etc ).
___________________________________________________________________ <section> para indicar una sección genérica.
___________________________________________________________________ <aside> para contenido que se relaciona muy levemente con el resto.
___________________________________________________________________ <footer> para representar el pié de página (autor, copyright, etc).
Además, existen otras etiquetas como por ejemplo:
___________________________________________________________________ <dialog> para representar conversaciones.
CSS3 es la nueva versión del lenguaje de hojas de estilo en cascada para la elaboración de
páginas web. Básicamente a simple vista podemos apreciar que se ha extendido la
funcionalidad, se han añadido nuevas propiedades, efectos y selectores a los ya existentes en
CSS2.1. (73)
7.2.1 Características fundamentales
7.2.1.1 @font-face
@font-face nos permite especificar las fuentes de texto en línea para mostrar texto en nuestras
páginas web (Código 7.5). Al permitirnos que proporcionemos nuestras propias fuentes, se
elimina la necesidad de depender de un número limitado de fuentes de usuarios instaladas en los
equipos.
Antes para solucionar la ausencia de fuentes necesitábamos poner varias fuentes alternativas por
si alguna de ellas no estaba en el equipo del visitante o bien como vimos en el apartado de
aplicaciones, usar una aplicación como Cufón para generar la tipografía.
Código 7.5: Elegir la fuente de texto que queramos
@font-face {
font-family: “DejaVu Sans”; /* nombre de la fuente */
src: url("font/dejavusans.ttf"); /* dirección donde se encuentra la fuente */
}
Con el ejemplo del Código 7.5 podremos usar para cualquier tipo de tipografía que definamos la
fuente “DejaVu Sans”.
7.2.1.2 Bordes
Las nuevas propiedades para los bordes nos permiten personalizar aún más los bordes de los
elementos HTML (Código 7.6). Una de las propiedades más solicitadas es la de poder
incorporar imágenes y redondear las esquinas:
___________________________________________________________________ border-image: para poner una imagen al borde.
___________________________________________________________________ border-radius: para redondear bordes.
Código 7.6: Bordes redondeados con imágenes
div {
border-image: url(img/floresdecolores.png); /* imagen que llena los bordes */
border-radius: 20px; /* radio */
}
Gracias al ejemplo del Código 7.6 podremos ver todos los elementos de bloque tipo “div” con
bordes redondeados y flores de colores (la imagen). En nuestro ejemplo de página web
utilizamos la propiedad “border-radius” que existe especifica para cada navegador. Está
propiedad al igual que muchas otras aún no están implementadas en todos los navegadores.
7.2.1.3 Sombras
Las sombras era otra de las deficiencias de la anterior versión de hojas de estilo en cascada. Para
el caso de elementos de bloque se solucionaba superponiendo imágenes o creando el montaje
completo con nuestro editor de imágenes. Por otro lado, si buscábamos sombras para nuestro
texto solo podíamos hacerlo usando herramientas como Cufón. Ahora, gracias a CSS3 es
posible añadirle este efecto a los elementos HTML (Código 7.7).
___________________________________________________________________ box-shadow: para poner una sombra propia de marcos.
___________________________________________________________________ text-shadow: para poner sombra al texto.
Código 7.7: Sombras
div {
box-shadow: 10px 10px 5px #ccc; /* sombra gris para los div*/
}
p {
text-shadow: 3px 3px 5px red; /* sombra roja para el texto de los párrafos */
}
Según observamos en el ejemplo de Código 7.7, la forma de configurar la sombra es similar
para los marcos que para el texto. En primer lugar tenemos el desplazamiento horizontal y
vertical, seguidos del desenfoque y el color de nuestra sombra. Cabe mencionar que estas
propiedades no posicionan la sombra, para tal caso deberemos usar la propiedad de relleno o
padding.
7.2.1.4 Fondos avanzados
Hasta ahora con las versiones anteriores del CSS era posible poner un único fondo dentro de un
elemento HTML. Está funcionalidad se extiende pudiendo añadir múltiples fondos (Código
7.8), situarlos y escalarlos:
___________________________________________________________________ background-origin: para indicar la posición del fondo
___________________________________________________________________ background-clip: para indicar si el fondo superpone al borde y por donde
___________________________________________________________________ background-size: para indicar el tamaño
Código 7.8: Múltiples fondos
body {
background: url(body-top.png) top left no-repeat, /* fondo arriba a la izquierda */
url(nicegirl.png) top 11px no-repeat, /* fondo arriba despegado 15px */
url(body-bottom.png) bottom left no-repeat, /* fondo abajo a la izquierda */
}
Con las nuevas propiedades del background es posible hacer composiciones de imágenes para
crear fondos a medida sin pasar por el editor de imágenes.
7.2.1.5 Otras propiedades importantes
Ente otras muchas de las propiedades importantes que caracterizan al CSS3 tenemos:
___________________________________________________________________ opacity: para darle un nivel de transparencia al objeto.
___________________________________________________________________ rgba: para definir colores RGB con canal alfa (opacidad).
___________________________________________________________________ resize: para definir si un objeto puede cambiar o no de tamaño y de que forma.
7.2.1.6 Selector de atributos
Anteriormente con CSS 2.1, solo podíamos seleccionar por elemento HTML, y por los atributos
de identificador y clase, ahora se han introducido el resto de atributos. Podemos buscar
cualquier tipo de atributo y seleccionarlo según su contenido:
___________________________________________________________________ [atributo^=unvalor]: para seleccionar elementos cuyo atributo empiezan por “unvalor”.
___________________________________________________________________ [atributo$=unvalor]: para seleccionar elementos cuyo atributo terminan por “unvalor”.
___________________________________________________________________ [atributo*=unvalor]: para seleccionar elementos cuyo atributo tienen “unvalor”.
Código 7.9: Selección de elemento según atributo
*[title*="MTRT"] {
background: white;
}
Para el ejemplo del Código 7.9 todos los elementos que contengan dentro del título la cadena
“MTRT” tendrán un fondo blanco.
7.3 WebM
WebM es un contenedor multimedia (audio/vídeo) que podemos usar por ejemplo cuando
insertemos cualquier tipo de contenido multimedia en nuestro sitio HTML5. Podemos comparar
WebM con Flash o AVI con la única salvedad de que en su interior solo alberga formatos libres.
Por el contrario Flash si albergará todo tipo de formatos pero con la pega de que para usar FLV
tendremos que pagar. (74)
La base que hace grande a WebM es que alberga en su interior el formato de vídeo VP8 (75) y
para audio Vorbis (76).
7.3.1 VP8
Las características principales de VP8 son:
___________________________________________________________________ Códec libre de patentes y de código abierto.
___________________________________________________________________ Ganancia significativa en eficacia de compresión. A grandes rasgos podríamos reducir un vídeo en
formato H.264 a la mitad de compresión con VP8 sin apreciar a penas cambios.
___________________________________________________________________ Decodificación menos compleja computacionalmente que su antecesor VP7 o H.264 (privativos).
Su complejidad es factible para dispositivos portátiles.
___________________________________________________________________ Calidad comparable a la de H.264.
7.3.2 Vorbis
Las características principales de Vorbis son:
___________________________________________________________________ Códec libre de patentes y de código abierto.
___________________________________________________________________ Mayor calidad que algunos de sus competidores (MP3, AAC, etc) para tasas de codificación
mayores de 180 kbps.
7.4 WebGL
WebGL nos brinda la posibilidad de traer gráficos en 2D y 3D para la Web mediante el elemento
canvas de HTML5 y una API JavaScript. Dicha API usa una implementación de OpenGL ES
2.05. WebGL es la evolución de X3D que a su vez es la evolución de VRML. (77)
Las características fundamentales son:
___________________________________________________________________ Creación de objetos 2D y 3D.
SP requiere de la máquina virtual de Java y ASP requiere de la máquina virtual de
MONO.
Por lo general en proyectos grandes las empresas buscan el soporte, respaldo y fama de
otras empresas de proporciones similares. Algunas multinacionales del software
obligaban indirectamente a que los consumidores adoptasen sus tecnologías, de tal
forma que los desarrolladores tuvieran que pagar por el uso y desarrollo de estás.
Además, dichas tecnologías solían ser cerradas por lo que cualquier compatibilidad o
soporte con una tecnología libre estaba baneada. La situación actual está cambiado, las
tecnologías cerradas se están abriendo a la integración con tecnologías libres, y estás a
su vez tienen acogida por grandes empresas, fundaciones y multinacionales. Por
ejemplo, en el caso de algunas de las tecnologías de Oracle (JSP) y Micrososft (ASP),
tanto JSP como ASP permiten hacer lo mismo, no existen limitaciones por parte del
lenguaje, la fortaleza radica en la capacidad de las librerías disponibles. ¿Entonces cuál
elegir?, lógicamente aquella que no te ponga límites en el desarrollo, ni tasas por su uso,
una tecnología libre, multiplataforma y de código abierto, una tecnología “de todos y de
nadie” que permite colaborar y mejorarla entre todos. Por lo tanto, queda totalmente
desmarcado ASP, aunque aún con fuerza perdurara por debajo del resto de tecnologías, a
menos que Microsoft cambie su filosofía.
Actualmente, tenemos que PHP seguido de JSP serán el futuro inmediato, y las
tecnologías del estilo de Python y Ruby el futuro. Estas últimas tienen grandes
similitudes en cuanto a sintaxis limpia, código legible y sencillez, y cada vez poseen
más librerías e integración con otras tecnologías, pero es Python claramente la que tiene
mayor cabida tanto en el marco de Internet como en el de aplicaciones de escritorio
debido a su aparición 3 años anterior a Ruby (influido por Python).
Resumiendo, en el lado del cliente: HTML5, CSS3 y JavaScript son el futuro, están
apoyados íntegramente por la comunidad de desarrolladores de Internet y las
multinacionales. Aunque en principio no estaba prevista la recomendación del uso de
HTML5 hasta el 2022 (fecha en la que estará totalmente listo), las grandes necesidades
y guerra entre el soporte de tecnologías están haciendo que esta fecha se adelante. En la
actualidad tenemos aplicaciones sorprendentes hechas en HTML5 y soportadas por los
navegadores de última generación.
Para el caso del lado del servidor: PHP, Python son el futuro, están apoyados
íntegramente por la comunidad, pero además Google aporta un apoyo extra a Python (de
hecho Google contrato a su creador). Aunque PHP le saca mucha ventaja a Python, se
prevee que para el 2020 sus usos sean equiparables seguidos de Ruby y JSP.
8.3 ¿Qué aplicaciones para el desarrollo web predominarán en la Web 3.0?
Actualmente, las aplicaciones para el desarrollo (creación, mantenimiento y mejora) más
utilizadas según los estudios realizados son editores de código, analizadores, gestores de
contenidos y widgets (Tabla 5.19). Estas aplicaciones pueden ser de escritorio, estar integradas
en el navegador o en la propia web dependiendo si forman parte de ella o no.
8.3.1 Editores de código
Actualmente, dentro de los editores de código para la web tenemos: Notepad++ y Kate entre los
más usados. Son editores ligeros y libres, de texto y código que soportan muchos lenguajes de
programación. El mayor inconveniente que tienes es el hecho de que no son multiplataforma,
Notepad++ es para Microsoft Windows y Kate para GNU/Linux. En la otra cara, la mayor
ventaja el soporte de lenguajes, el marcado y la personalización del área de trabajo. Ambos
prevalecerán en sus respectivas plataformas sin embargo de decantarnos por uno de ellos sería
Notepad++:
___________________________________________________________________ P
ermite buscar/remplazar en todos los documentos abiertos. Muy útil para cambios masivos de
clases, direcciones, etc.
___________________________________________________________________ Posee indicadores de cierre/apertura de etiquetas por defecto para HTML.
___________________________________________________________________ Detecta partes de código de un mismo archivo resaltando la sintaxis. Por ejemplo en un
documento de PHP que contenga: HTML, CSS y JavaScript.
Las alternativas ha estos editores de código serían los editores de escritorio WYSIWYG como el
DreamWeaver o el FrontPage, actualmente en desuso. Estos por lo general solían ensuciar
mucho el código de cara a una optimización final en la carga de la página y el rendimiento SEO,
además de dificultar la programación e integración con tecnologías del lado del servidor, no
obstante actualmente están mejorando bastante.
Normalmente estos editores los suelen usar personas con corta experiencia en desarrollo web,
aunque suelen ser muy útiles en la incorporación de plantillas y desarrollos guiados por el
propio programa. El futuro inmediato lo marcaran editores del tipo de Notepad++, pero sin duda
los triunfadores serán los editores WYSIWYG online que compaginan distintos niveles de
abstracción y profundización en el código, como los que ya ofrecen algunos servidores y
gestores de contenido de manera gratuita. Un ejemplo puede ser el editor que trae por defecto el
conocido gestor de contenidos Wordpress.
8.3.2 Analizadores de código
Cuando hablamos de analizadores nos referimos a aquellos que permiten analizar el código de
cualquier página. Actualmente, entre el conjunto de aplicaciones existentes (por lo general
online y/o integradas con el navegador) destaca Firebug. La sola recomendación de está
herramienta “quita un puesto de trabajo”. Esta herramienta no tienen rival alguno, de hecho ya
se están integrando herramientas de este tipo de serie con los navegadores. Básicamente, como
ya vimos en el capítulo de implementación, permite editar, depurar y monitorizar el HTML,
CSS y JavaScript, pudiendo extenderse para la evaluación y mejora de cargas con Pagespeed y
rendimiento SEO.
Su tendencia en el uso es abrumadora, y ya existen peticiones por parte de la comunidad para:
___________________________________________________________________ Soporte de las tecnologías del lado del servidor
___________________________________________________________________ Detección de otras aplicaciones para el desarrollo web (tal como hace Wappalyzer)
8.3.3 Analizadores de visitas
Actualmente, Google Analytics es la aplicación web que más podemos encontrar integrada en
cualquier portal, blog o foro. Sus incontables y detalladas estadísticas sobre visitas hacen ha está
aplicación desmarcarse del resto de competidoras y la proclaman como herramienta base para el
marketing y estudio de visitas. No obstante, muchas veces se suele combinar su uso con
Quantcast (dentro de la misma índole).
8.3.4 Gestores de contenido
Actualmente, el CMS más popular es Wordpress. Dicho puesto, ganado a pulso, ha sido gracias
a una edición sencilla, alta personalización y a la existencia de multitud de temas gratuitos para
cambiar su apariencia. Hace tiempo que se ha desmarcado a sus competidores más directo
Joomla y Drupal, incluso está solventando las deficiencias de seguridad que poseía en sus
primeras versiones.
Día a día se iguala en prestaciones y seguridad a Drupal, e incluso a Plone (el CMS más potente
del mercado). Aunque el camino es largo, por ahora, la gran multitud de prestaciones,
configuraciones y servicios son añadidas por software de terceros (lo que puede resultar una
ventaja ya que con una gran comunidad como es la de Wordpress permite la aparición de nuevas
ideas y dentro de una sana competencia).
Como conclusión, por un lado Plone (una gran promesa) va a contar con el empuje que va a
sufrir Python en la web, sin embargo su dificultad de uso y configuración terminarán por
hacerlo desaparecer. En el otro lado, tanto Drupal como Joomla se mantiene estables, intentan
adaptarse a las pautas de Wordpress pero un núcleo bastante cerrado y una tediosa interfaz
hacen que incluso muchos de sus actuales usuarios migren.
8.3.5 Widgets
Widgets, Gadgets, Plugins, muchas veces tienden a confundirse entremezclando sus
significados. Definiendo un Widget (o Gadget) como una aplicación de tamaño menor al de un
plugin (ambos tienen la característica de que no se pueden ejecutar por si solos), en la actualidad
encontramos el Widget por excelencia de la Web Social: AddThis. Este widget nos permite
compartir páginas web con otras páginas web normalmente redes sociales como Facebook y
Twitter o en servidores de marcadores como Delicius.
AddThis sigue al alza y no posee competidor alguno. Sencillo y fácil de integrar facilita la
posibilidad de tener una red más interconectada y recoger aquellos lugares que más nos gustas
(indexación orgánica)
8.3.6 Otros
En las conclusiones y tendencias vistas en el Capítulo 5, vimos los widgets, CMSs,
analizadores y editores con una tendencia al alza, mantenimiento o en pleno declive de cara a un
futuro próximo. Pero, ¿qué ocurre con el resto de cara a la Web 3.0? Bueno, obviando las
aplicaciones que acabamos de ver, en la Web 3.0 continuarán:
___________________________________________________________________ reCAPTCHA o similares para validaciones ya que es una manera muy sencilla de evitar hackeos
y spam masivo.
___________________________________________________________________ Disqus para comentarios básicos. Algunas desarrolladores suelen montar un gestor de contenidos
completo cuando las necesidades del cliente son mínimas, Disqus resuelve necesidades básicas
de feedbacks.
___________________________________________________________________ Magento, aunque con tendencia al alza, podría desaparecer quedando absorbido o convertido en
un añadido para CMSs.
___________________________________________________________________ YouTube, no peligra aunque en la actualidad el dominio por la visualización de vídeos en Internet
está reñida. Por una parte, la BBC al frente de otras muchas corporaciones intentan evitar que
YouTube, Vimeo, etc. se apoderen del formato televisivo en Internet (la televisión ordinaria se
encuentra en decadencia) y están preparando lo que será “la televisión a la carta”, sin embargo
Google ha dado un paso por delante lanzando su primer televisor en conjunto con Sony.
También existe otro tipo de frente a la conquista del dominio multimedia en la red. El triunfo de
Spotify (“música a la carta con publicidad”) ha inspirado a una compañía Sueca en la creación
de Voddler (actualmente en Beta disponible en Estados Unidos y en Suecia) para la
visualización de “películas a la carta” pudiendo elegir el usuario donde ver la publicidad
(obligatoria) a lo largo de la reproducción del film y con la ventaja de necesitar únicamente un
navegador (Spotify usa una aplicación de escritorio exclusivamente para Mac y Windows).
___________________________________________________________________ cPanel se mantendrá como herramienta para la gestión y control de hostings aunque en un futuro
lejano podría cambiar su ubicación debido a la reubicación y uso de los servidores (Apartado
8.4).
___________________________________________________________________ MediaWiki aunque con competidores mejores como TikiWiki, sigue al alza por su gran acogida,
sencillez y gestión. Quizás el mayor inconveniente de TikiWiki sea el gran número de funciones
y configuraciones que lo hacen acercarse aún más a un CMS de carácter global.
___________________________________________________________________ phpBB es una apuesta para la creación de foros muy potente y aunque su popularidad a bajado
bastante, equiparandose a aplicaciones para la creación de foros propietarias como vBulletin, es
una apuesta segura para el futuro pese a recibir menos instalaciones mensuales que vBulletin en
los últimos meses.
___________________________________________________________________ GetSatisfactión permite mejorar un producto, una web o un servicio de manera orgánica, es decir,
mediante una interfaz sencilla y adaptada de la cuál se surte el propio usuario para aportar ideas,
hacer preguntas y establecer sus estados de satisfacción. GetSatisfactión no tiene rival en cuanto
a sencillez y manejo, y su beneficios son inmediatos, el único inconveniente que tiene es que es
una herramienta propietaria. La comunidad no puede mejorarla y los desarrolladores que
quieran integrarla tienen que comprarla. Las alternativas libre son Trac (Python), Redmine
(Ruby), sin embargo la presentación de conclusiones de los usuarios están sobrecargadas y
escatimando la interfaz gráfica a tablas e infinidad de pestañas. Es de esperar, que como
solución surjan adaptaciones de estas aplicaciones algo más amigables, de hecho dichas
aplicaciones se usan para mejorase a si mismo y uno de los temas candentes del “día a día” son
las peticiones de los usuarios hacia una migración de la interfaz al más puro estilo de
GetSatisfaction.
Para concluir, entre aquellas famosas aplicaciones que no nos acompañaran en la Web 3.0,
debido a que han sido o están siendo suplantadas por otras, poseen interfaces y prestaciones
obsoletas y/o carecen del apoyo necesario de la comunidad, encontramos: phpDocumentor,
Coppermine, etc. Y entre las que sufrirán una gran remodelación: phpMyAdmin.
8.4 ¿Qué uso se le dará a la Web 3.0?
En primer lugar surgirá un cambio de ubicación de las webs. Con seguridad, gracias a
equipos cada vez más potentes y mayores velocidades de conexión, los servicios de
hostings irán desapareciendo, quedando dicho uso delegado a los propios equipos de los
desarrolladores y/o dueños de las webs. Únicamente, para el caso de bases de datos
desproporcionadas como pudiera ser el soporte del historial de un gobierno, datos del
colectivo ciudadano, universidades, etc; existirían servidores ultra-potentes pero con
dedicación exclusiva.
En segundo lugar, se indexará menos pero de más calidad pasando del uso de
rastreadores al uso de personas, buscadores orgánicos como mayores decisores en el
Pagerank y el posicionamiento. Del mismo modo y directamente relacionado con lo
anterior, se extenderán por todo la red los analizadores de satisfacción de
usuarios/clientes.
En tercer lugar, todo tendrá cabida en Internet y estará perfectamente interconectado
pudiendo formar distintos tipos de subredes según categorías, hablamos del “Internet de
las cosas” que surge a partir de la posibilidad de extensión de la IP (IPv6). El hecho de
tener cualquier objeto y alimento identificado y localizado, habilitando la posibilidad de
un acceso/control telemático permitirá un cambio en la gestión global de nuestro planeta
que además favorecerá la sostenibilidad de este.
____________________________________________________________ S
e evitarían perdidas de objetos
____________________________________________________________ S
e facilitaría la reutilización de recursos (piezas de dispositivos, material reciclado, etc)
____________________________________________________________ S
e podría controlar de manera exhaustiva las emisiones de gases. Por ejemplo accediendo
a un supuesto dispositivo de carácter público encargado de contabilizar las emisiones de
un vehículo y estableciendo unos límites.
____________________________________________________________ S
e ahorrarían transportes innecesarios gracias a la teleasistencia y uso de cualquier
utensilio en destino vía Internet, etc.
Otro de los cambios que merecen la pena comentar, y que sin duda ya está teniendo
cabida en nuestros días, define dos filosofías/tendencias de uso en las que se delimitan
los límites entre donde empieza y acaba el dispositivo del usuario e Internet. La primera
tendencia de uso se refiere a la de extensión del escritorio del cliente, donde todas las
aplicaciones locales están interconectadas entre si en la máquina local del usuario y a su
vez conectadas con la nube de Internet (nombre común para el conjunto de servicios y
aplicaciones proporcionados por los distintos proveedores). La segunda tendencia es la
de extensión de la nube hacia el escritorio del cliente, donde cada una de las
aplicaciones de escritorio habituales son sustituidas por aplicaciones web e integradas
gracias a la cache para aplicaciones de HTML5.
Los máximos precursores de ambas tendencias son KDE y Google. KDE para la
extensión del escritorio hacia Internet, con su escritorio por defecto en distribuciones
GNU/Linux como Debian. Y Google para la extensión de Internet hacia el escritorio,
con su sistema Chrome OS que basado en GNU/Linux tiene como función principal
arrancar el navegador de Google Chrome y usar las aplicaciones de Google como Gmail
sustituyendo a Thunderbird, Google Docs sustituyendo a OpenOffice, etc. Para el caso
de la última tendencia aun está todo “muy verde”, no obstante vamos a compara ambas
viendo sus ventajas e inconvenientes.
8.4.1 Extensión del escritorio hacia Internet
Ventajas:
____________________________________________________________ A
provechamiento de los recursos y potencia del equipo del cliente.
____________________________________________________________ M
ayor protección de datos.
____________________________________________________________ A
cceso a datos en cualquier momento.
Inconvenientes:
____________________________________________________________ I
nstalación y permisos para aplicaciones.
____________________________________________________________ I
ncompatibilidades entre plataformas.
8.4.2 Extensión de Internet hacia el escritorio
Ventajas:
____________________________________________________________ N
o sería necesario buscar software para instalarlo.
____________________________________________________________ I
nexistencia de incompatibilidades entre plataformas.
____________________________________________________________ S
oporte y mejora centralizada de aplicaciones.
____________________________________________________________ A
provechamiento de los recursos y potencia del equipo del cliente. Gracias a las nuevas
tecnologías como WebGL que hacen uso directamente de los recursos del equipo.
Inconvenientes:
____________________________________________________________ A
usencia de aplicaciones para equipos que no tengan un primer acceso a Internet. Una
vez bajada la aplicación se guardaría e iría actualizando según fuera necesario.
8.4.3 Libertad de uso
Las ventajas de una son los inconvenientes de la otra y viceversa. Ambas tenencias,
pretenden un uso cooperativo, amplio y libre por parte de la comunidad de Internet con
una economía sostenible basada en el soporte que se da y no en la imposición de
tecnologías cerradas de pago.
Según la valoración de uno de los padre de la web, Tim Berners Lee, la situación actual
de Internet está condicionada por el debate sobre la neutralidad, amenazada por
empresas y gobiernos, y el paulatino aumento de poder de empresas proveedoras del
servicios y compañías como Facebook o Apple.
Por ejemplo, en el caso de Facebook, la red social más grande. Millones de usuarios
están conectados todo el día, y digamos que integren dentro de su aplicación un
buscador. Los usuarios no saldrán más de ahí. Provocando que las empresas den
prioridad a exponer su información ahí. Esto obligaría a todos a exponer su información
porque nadie va a querer quedarse atrás. No es que tenga que ser dueño del mundo
Google, es que Facebook es dueño de nuestros datos, vende información a terceros, está
mal programado: constantes errores de grabación en la base de datos, errores en
contadores de amigos, si redimensionas la ventana no se adaptan los marcos, etc; hasta
Tuenti que es una copia está mejor hecho y encima ahora pretende incorporar publicidad
animando nuestras páginas personales sin nuestro consentimiento. Ahora todo el mundo
se preocupa por los links que se enlazan en cada pagina, pero después todos en apenas
unos años nos preocuparemos por tener el “cuanto gustas en Facebook”.
En un artículo para Scientific American, Berners Lee reflexiona sobre el origen y los
fines de Internet para animar a los usuarios a que no permitan que las empresas se hagan
con el control de la Red. El usuario medio de Facebook, Apple, Windows es inexperto y
pasivo, la gente no lucha hasta que no tienen “la soga al cuello”, se olvidan de lo que
lucharon otros y se acomodan. Tenemos que exigir nuestros derechos, el punto de
partida de este texto es la premisa de que la idea que dio vida a Internet fue la de
permitir que "cualquier persona pudiese compartir información con cualquier otra, en
cualquier lugar libremente".
Con este punto de partida, Berners Lee y los otros padres de Internet crearon un sistema
para permitir la conexión de una red de ordenadores que hoy conocemos como Internet.
Deja claro que desde su origen esta creación se ha basado en "principios igualitarios,
que han fomentado que miles de personas hayan formado parte de la World Wide Web".
Para Berners Lee, la situación actual está poniendo en serio peligro estos principios de
Internet. La primera amenaza viene derivada por la amenaza de la neutralidad de la red.
El científico pone nombre y apellidos a l s culpables de esta amenaza: "Los proveedores
de Internet están siendo tentados para frenar el tráfico a los sitios con los que no han
hecho acuerdos".
El experto no solo tira piedras contra los operadores sino también contra las
administraciones: "Los gobiernos totalitarios y democráticos están monitorizando los
hábitos 'online' de las personas, poniendo en peligro importantes derechos humanos",
añade. Vivimos en una dictadura camuflada donde gobiernos, medios y multinacionales
nos manejan a nuestro antojo. El último que tiene cabida en cualquier asunto es el
pueblo, tan solo hay que ver los acontecimientos ocurridos tras las filtraciones de
WikiLeaks (entre finales de noviembre y principios de diciembre de 2010) que ha
desembocado en una batalla cibernética en la que hackers luchan por la "libertad" (78).
Una solución inmediata para que el pueblo posea el poder de una vez por todas sería la
democracia participativa descentralizada a través de Internet donde el estado sea un
mero ejecutor del poder de pueblo. Los ciudadanos haciendo uso de la Web 3.0 podrían
proponer leyes y acciones con un peso en su votación en base a: estudios, antecedentes,
logros y trabajo de cara al tema en cuestión.
De no hacer nada, las consecuencias de estas intervenciones de empresas y gobiernos en
la Red suponen atentar contra los principios fundacionales de Internet, defiende, hasta el
punto que "podríamos perder la libertad de conectarnos con cualquiera en cualquier
sitio". Pero la gente no le dará importancia hasta que sea demasiado tarde.
El riesgo está presente, y Berners Lee explica por qué los usuarios deben defender sus
derechos: "La web es de los usuarios. Es un recurso público. Se trata de un órgano vital
para la democracia, un canal de comunicación que hace posible una comunicación con
el mundo".
Además del cerco a la neutralidad por parte de operadores y gobiernos, según Berners
Lee, la segunda amenaza viene grupos o empresas que están alterando el
funcionamiento de Internet.
El británico se centra en dos casos concretos. En primer lugar critica a las redes sociales
que aislan la información publicada. El caso más conocido, y que el propio autor cita, es
el de Facebook. La red social no permite que sus usuarios puedan hacer uso de sus datos
exportándolos a otros espacios. Hace unas semanas surgió Diaspora, una red de código
abierto donde los usuarios deciden que hacer con sus datos, cuando y como, sin
embargo no podemos hacer una migración. Para Berners Lee, los usuarios deben ser
dueños de sus datos y deben poder hacer uso de ellos. Limitar el empleo de estos datos
es limitar las libertades dentro de la Red, lo que supone ir contra los principios de los
que habla el autor. "Los grandes sitios de redes sociales pretenden aislar la información
publicada por los usuarios respecto al resto de la Web", enfatiza.
El segundo caso concreto al que alude es el de liberar las formas de creación y acceso a
los contenidos. En este sentido se refiere de forma clara a Apple (cada vez más
extendido en Europa). Berners Lee critica la política de la empresa norteamericana de
apostar por estándares cerrados. Un sistema capitalista, totalitario no tiene cabida en
Internet. La inteligencia humana tiende a la sostenibilidad y trabajo de todos para un
bien común. Como ejemplo, de estándares cerrados por parte de Apple, esta pone sus
contenidos en formato exclusivo en iTunes. "No utilizar estándares abiertos provoca la
creación de mundos cerrados. Estándares abiertos impulsan la innovación". La
universidad también debería apoyar esto, poco a poco parece que se está consiguiendo
pese a focos puntuales de profesores que prepararon un año apuntes y llevan 40
dándolos igual, exigiendo uso de tecnologías privativas y obligando a su uso a sus
alumnos.
Además, Berners Lee apuesta por la descentralización a la hora de innovar, ya que "es
otra característica importante del diseño". "Nadie tiene que obtener la aprobación de una
autoridad central para agregar una página o hacer un enlace", opina. "La
descentralización ha hecho de la posible innovación y continuará haciéndolo en el
futuro". La innovación surge de la imaginación que es infinita y la única continuidad
hacia el progreso de la sociedad.
Así, apostando por una Internet abierta, Berners Lee también defiende el empleo del
protocolo HTML5 como herramienta que ayudará al progreso. Será una herramienta que
permita a los usuarios desarrollar contenidos de forma libre y debe tomarse como
modelo para el futuro. Además, asegura que "las tecnologías de base Web debe estar
disponibles de forma gratuita" con el fin de contribuir a este desarrollo.
Traducción con aportes personal de la entrevistas realizadas a Tim Berners Lee en “Scientific
American” (79) y “TheRegister” (80). Nada expresa mejor mis sentimientos y conclusiones
para el uso de la web.
Long Live the Web: A Call for Continued Open Standards and Neutrality
Libertad de uso
GnS
CAPÍTULO 2
A
REFERENCIA
(1)___________________________________________________________________ O'Reilly, Tim. "What Is Web 2.0". http://oreilly.com/web2/archive/what-is-web-20.html.
September 30, 2005. [consulta: 20/09/2009]
(2)___________________________________________________________________ Cailliau, Robert (who help Tim Berners Lee to invent the web). "A Short History of the Web".
http://www.livinginternet.com/w/wi_lee.htm. November 2, 1995. [consulta: 21/09/2009]
(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".
(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/.
(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".
(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/.
(31) __________________________________________________________________ Ryan Boren, Mark Jaquith, Matt Mullenweg (who made first released), Andrew Ozz, Peter
(32) __________________________________________________________________ Google. "Digitizing Books One Word at a Time". http://www.google.com/recaptcha/learnmore.
(48) __________________________________________________________________ Interfaces Hombre Máquina Avanzados S.L. "Sitio Web del Capítulo de Implementación".
(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:
(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:
ymous_4chan_hackers_hactivists_dc.shtml Diciembre 9, 2010 [consulta: 9/12/2010]
(79) __________________________________________________________________ Berners-Lee, Tim. “Long Live the Web: A Call for Continued Open Standards and Neutrality”