Máster Universitario Online en SEO, SEM, Social Media y Web Analytics

Inicio » B11 Fundamentos en Tecnologías Web

Archivo de la categoría: B11 Fundamentos en Tecnologías Web

Breve introducción a MockFlow

Breve introducción a MockFlow, una herramienta online para diseñar wireframes

Joan Teran, Rubén Vizcaíno

Joan Teran, Rubén Vizcaíno. Breve introducción a MockFlow, una herramienta online para construir wireframes [en linea]. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Documentación Digital. Barcelona: Área de Ciencias de la Documentación. Departamento de Comunicación. Universidad Pompeu Fabra. http://www.masterenbuscadores.com


Sumario

1. Introducción a MockFlow

1.1. Qué es un wireframe?

1.2. Algunas herramientas para construir wireframes

2. Características generales de MockFlow

3. Crear una cuenta de usuario en MockFlow

4. Guía de uso rápido

4.1. Trabajar con el editor

4.1.1. Menú superior izquierdo

4.1.2. Ventana central

4.1.3. Menú lateral izquierdo

4.1.3.1. Elementos

4.1.3.2. Páginas

4.1.3.3. Imágenes

4.1.3.4. Flujo

4.1.3.5. Tienda

4.2. Publicar y compartir

4.2.1. Exportar

4.2.2. Publicar un link

4.2.3. Compartir

5. Bibliografía


1. Introducción a MockFlow

El presente artículo es una breve introducción a Mockflow, un programa online para la elaboración de wireframes.

1.1. Qué son los wireframes?

Según los define Mario Pérez-Montoro: “Los wireframes (o maquetas) son prototipos arquitectónicos de cada una de los tipos de página que conforman un sitio web. Son una especie de esquema donde queda representado el contenido y la arquitectura de la información (sin elementos gráficos) de cada uno de esos tipos de página. En este sentido, se muestra cuál es el aspecto de una página desde la perspectiva de su arquitectura haciendo hincapié en cómo se agrupan y ordenan los componentes de la página. En cierta manera, pueden ser considerados como la intersección entre la arquitectura de la información de una página con su visualización y diseño.

He aquí tres tipos de wireframes según el nivel de precisión de los mismos:

  • de baja fidelidad, eso es, esbozos que representan sólo los aspectos arquitectónicos básicos de la página sin incluir soluciones gráficas ni contenido real

  • de media fidelidad, eso es, prototipos que incluyen los aspectos arquitectónicos básicos y que además recogen algunas de las soluciones gráficas y de contenido de la página:

  • de alta fidelidad, que además de representar los aspectos arquitectónicos fundamentales, también incluyen todas las soluciones gráficas y todos los contenidos que debe tener la página

1.2. Algunas herramientas para construir wireframes

Existe una amplia variedad de programas pensados específicamente para el diseño de wireframes, aunque algunos de estos programas permiten además tareas de diseño para un amplio abanico de ámbitos. MockFlow aparte, destacamos tres programas:

  • Axure: una aplicación de escritorio que permite llevar a cabo wireframes y blueprints pero también diagramas de flujo. Quizás su mayor debilidad estriba en la imposibilidad de diseñar prototipos para aplicaciones del entorno iPhone.
  • Visio: también es un programa que debe ser instalado localmente. Diseñado por Microsoft, destaca por su versatilidad, ya que no solamente permite trabajar sobre wireframes, sino también sobre otros muchos diseños vinculados a la ingeniería o la arquitectura.
  • iPlotz: se trata de un programa que no necesita instalación y que funciona online. Contiene muchas posibilidades y funciones, lo que lo convierte en una alternativa muy fuerte respecto a MockFlow aunque de uso muy complejo.

2. Características generales de MockFlow

  • Funciona online, pero también está preparado para soportar el trabajo offline: guarda los documentos de trabajo tanto en la nube como localmente, lo que permite que si hay problemas en la conexión el trabajo pueda guardarse igualmente
  • Escritorio descargable: permite trabajar tanto des del navegador como desde un escritorio que se puede descargar y que permite igualmente el trabajo online
  • Prototipos navegables: es posible conectar los prototipos de páginas de manera que estas sean navegables
  • Componentes descargables: MockFlow tiene una librería (Mockup Store) de donde el usuario puede descargar elementos sobre los que puede trabajar para construir sus wireframes
  • Trabajo colaborativo: hay varias opciones para el trabajo colaborativo, desde el diseño conjunto, hasta la comunicación a través de mensajes o chats.
  • Exportar y publicar: la conversión de los diseños de MockFlow a diferentes tipos de archivo es sencilla, incluso descargar el código HTML, aunque este es un servicio de pago
  • Compatibilidad con móviles: permite la creación de wireframes para teléfonos móviles de última generación

3. Crear una cuenta de usuario en MockFlow

Existen dos posibilidades para abrir una cuenta de usuario en MockFlow: a través de una cuenta en Google, o creando una nueva mediante otra dirección cualquiera de correo electrónico.

El proceso es el siguiente. En la página de http://mockflow.com/ pulsar sobre el botón Get started for free:

01.png

Seguidamente, y si no se tiene cuenta de Google, o no se la quiere relacionar con MockFlow, hay que rellenar directamente el formulario que aparece (nombre, dirección de correo electrónico y contraseña).

En el caso de tener una cuenta Google que se quiere relacionar con MockFlow, hay que pulsar sobre el botón “Gmail”:

02.png

Después de llevar a cabo los pasos siguientes, Google pedirá permiso para relacionar ambas cuentas. Entonces hay que pulsar el botón “Aceptar”.

4. Guía de uso rápido

La página principal es la primera página que aparece después de llevar a cabo la autenticación de usuario.

Para empezar a trabajar con MockFlow hay que pulsar sobre el botón + que encontramos en la parte izquierda de la pantalla. Aparecen 26 opciones para empezar un proyecto:

03.png

04.png

Cuando se escoge la opción deseada se abre otra ventana en la que se debe introducir el nombre del nuevo proyecto.

Ahora solamente queda escoger la plantilla deseada y pulsar el botón Create.

También tenemos la opción de importar mockups prediseñados de entre las decenas disponibles en la MockStore, a la que se accede directamente desde la barra de menú lateral:

05.png

06.png

4.1. Trabajar con el editor

En este apartado definiremos los diferentes menús que tiene el editor de MockFlow y cómo trabajar con ellos.

4.1.1. Menú superior izquierdo

07.png

  • Project: donde se encuentran funciones relativas a la gestión del proyecto. Por ejemplo: guardar el trabajo en curso, exportarlo a otros tipos de archivo o llevar a cabo el control de cambios
  • Edit: menú en que encontramos las funciones de edición de objetos o textos (copiar, pegar, deshacer, etc.)
  • Comments (símbolo): permite anotar comentarios sobre el proyecto en curso por parte de los distintos miembros del equipo
  • Export wireframe (símbolo): permite exportar el trabajo en distintos formatos (imagen, PDF, Powerpoint, Word y HTML).
  • Review: permite revisar los comentarios realizados en el proyecto

4.1.2. Ventana central

Es la principal ventana de trabajo de MockFlow: en ella encontramos el wireframe, sobre el que se puede trabajar:

08.png

4.1.3. Menú lateral izquierdo

En la parte lateral izquierda de la página se pueden desplegar cinco menús diferentes:

  • menú de elementos
  • menú de páginas
  • menú de imágenes
  • menú de flujo
  • menú de tienda

4.1.3.1. Elementos

En este menú se encuentran los objetos (elementos) que se usarán para poder construir el wireframe, así como diferentes opciones de visualización, información sobre las características de los objetos seleccionados y otras opciones de trabajo.

Captura de pantalla 2017-11-03 a las 9.30.57.png

Dentro de este menú “Elements” nos encontramos las siguientes opciones:

  • Una ventana de búsqueda para localizar elementos
  • Un menú desplegable para acceder a distintos paquetes de elementos. Por defecto aparece el paquete llamado “Web”, pero podemos abrir otros, como por ejemplo “hand drawn UI”, “maps”, “stamps”, “Apple Watch”, etc. Cada uno de ellos nos da acceso a un conjunto distinto de elementos para nuestro diseño.
  • Finalmente, la mayor parte de la ventana está destinada a mostrar los elementos disponibles en el paquete seleccionado.

El funcionamiento es muy sencillo: se trata de seleccionar del menú desplegable la tipología de objeto que se quiere utilizar; buscar en el menú de objetos el deseado; cogerlo con el ratón y arrastrarlo al punto de la pantalla deseado (drag and drop).

Cuando movemos un objeto, se activa una guía que permite visualizar unas líneas rojas que dan una referencia de la posición exacta de los objetos en relación al objeto que estamos moviendo:

09.png

Mientras se mueve el objeto “Logo” aparecen unas rayas verticales rojas que indican dónde tendría que situarse el objeto que estamos moviendo para alinearse con otros objetos

Finalmente, cuando un objeto está seleccionado aparecen sus características en el menú lateral izquierdo, tal como se ve en la imagen anterior. En ese menú tenemos disponibles las siguientes opciones:

  • Transform: permite variar con precisión la posición del elemento, así como rotarlo.
  • Link: posibilita añadir un enlace interno o externo a cualquier objeto del diseño.
  • Image: para editar los atributos de la imagen.
  • Border: permite variar las características del borde de los objetos.
  • Font: para cambiar la fuente de los textos.
  • Shadow: posibilita añadir un sombreado al elemento seleccionado.

4.1.3.2. Páginas

En lo que hace referencia al menú de páginas, en la parte superior disponemos de una serie de iconos que nos dan acceso a las siguientes opciones:

10.png

  • Crear páginas nuevas
  • Añadir carpetas en las que agrupar páginas
  • Duplicar páginas, es decir crear nuevas páginas sobre la base de otras. Para ello hay que seleccionar la página y luego pulsar sobre el botón de duplicar
  • Editar el nombre de la página
  • Borrar páginas, siguiendo el mismo proceso que para duplicarlas: seleccionar la página y pulsar sobre el botón correspondiente

En la parte inferior del menú páginas, disponemos de las siguientes opciones:

11.png

  • El icono en forma de ojo permite alternar entre distintas opciones de visibilidad de la página.
  • El icono de rejilla (grid) habilita una referencia visual en forma de cuadrícula para disponer de una referencia en la colocación de los elementos en nuestro diseño.
  • Un acceso rápido al historial de revisiones, lo que permite retroceder a pasos anteriores del proceso de diseño.
  • Una opción interesante que permite el menú de páginas es usar una página como patrón: se trata de la opción llamada Master, para lo cual hay que seleccionar por un lado la página sobre la cual queremos trabajar, y por otro la página que se usará como patrón. Esta última se visualiza difuminada aunque, a medida que se van añadiendo objetos, va quedando escondida.
  • En la línea inferior disponemos de un menú de acceso rápido que también está presente en otras secciones además de “Pages”. Este menú nos permite acceder inmediatamente a las siguientes opciones: dibujar un rectángulo, círculo o línea, añadir texto, dibujar un Hotspot, añadir un icono o dibujar un botón.

Otra opción es modificar el orden de las páginas, simplemente arrastrando las páginas hacia la posición deseada.

12.png

4.1.3.3. Imágenes

Esta opción simplemente sirve para insertar iconos o imágenes en nuestro diseño. MockFlow dispone de un amplio surtido de iconos prediseñados, pero también podemos subir cualquier otra imagen de la que dispongamos.

4.1.3.4. Flujo

Haciendo click sobre la opción Flow del menú lateral, accedemos a una clasificación visual de nuestros diseños según el estado en que se encuentran (“Not started”, “In progress”, “Completed”, “Approved design”, etc.).

13.png

El menú superior nos permite alternar esta visualización con otras en forma de mapa o de rejilla.

4.1.3.5. Tienda o MockStore

Se trata de la biblioteca de recursos que ofrece MockFlow para abastecer a sus usuarios con trabajos públicos (en el caso de la versión gratuita) de otros usuarios.

Una vez abierta la tienda, los objetos aparecen ordenados por categorías, ya que cada uno de ellos viene definido por una o varias etiquetas (Website, Webapp, iPhone App, Android App, etc.).

14.png

Otros criterios de ordenación de los componentes ofrecidos en MockStore aparecen debajo del menú de categorías, en la opción “Explore”: los más nuevos, los más populares (más descargados por los usuarios), un criterio de azar y, por último, los creados por el usuario.

Hay que tener en cuenta que podemos marcar o desmarcar las casillas “UI Pack” y/o “Template” para filtrar los resultados.

Un último botón en este menú nos permite enviar nuestro propio “Template” para que forme parte de la biblioteca de recursos.

4.2. Publicar y compartir

Esencialmente, MockFlow ofrece dos formas de publicar los proyectos. Por un lado, publicando un enlace accesible a cualquiera que permita visualizar el proyecto; por el otro exportando el documento a una destacable variedad de formatos para que puedan ser usados en diferentes contextos.

4.2.1. Exportar

Exportar los proyectos a otros formatos de archivo es muy sencillo:

Project > Export wireframe

15.png

Estos son los formatos a los que es posible exportar los wireframes construidos con MockFlow: PDF, imagen (PNG), los diferentes formatos de Microsoft Office (word y Powerpoint) y HTML.

4.2.2. Publicar un link

Se accede a esta opción desde el menú Project > Sharing:

16.png

4.2.3. Compartir

Finalmente, MockFlow ofrece una opción de trabajo colaborativo, con la posibilidad de editar los diferentes niveles de colaboración de cada uno de los usuarios con los que se trabaja en cada proyecto.

Se accede a esta opción a través de la página principal (por tanto, ya fuera de nuestro wireframe), colocando el puntero del ratón sobre el proyecto que queramos compartir.

17.png

Pulsando sobre la opción Share accedemos al menú correspondiente:

18.png

A través del botón Add Member accedemos a una ventanilla en la que se nos pide insertar el e-mail de la persona colaboradora. Seguidamente aparece una ventanilla en que se define el nivel de colaboración:

19.png

  • Reviewer corresponderá a aquellos colaboradores que sólo puedan visualizar o exportar el proyecto.
  • Co-Editor será para aquellos que puedan tener las tareas de revisores, pero que además puedan editar en tiempo real.
  • Admin será finalmente para aquellos que puedan asumir cualquier función excepto borrar el proyecto.

Estos niveles de colaboración son redefinibles en cualquier momento: sólo hay que hacer un doble click sobre el colaborador correspondiente y se accede al menú de niveles de colaboración.

Para eliminar colaboradores sólo hay que clicar sobre la cruz que aparece en la parte derecha de cada uno de los colaboradores. También es posible redefenir el papel de los colaboradores, e incluso reenviar el mail de invitación para colaborar.

20.png

5. Bibliografía

 

Artículos

Mario Pérez-Montoro. Artículo 1.10 El prototipado en la arquitectura de la información [en linea]. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Documentación Digital Barcelona: Área de Ciencias de la Documentación. Departamento de Comunicación. Universidad Pompeu Fabra, 2012. http://www.documentaciondigital.org

Sedes web

MockFlow. Super-easy Wireframing

http://www.mockflow.com/

MockFlow. Support Center

http://support.mockflow.com/


© Autor/es del documento y Máster en Documentación Digital (IDEC-UPF)

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

No está permitido publicar total o parcialmente este documento sin el

consentimiento previo y por escrito de los autores, excepto que sean citas

de pequeños fragmentos entrecomillados indicando la fuente y la autoría

Wappalyzer: visualizador de las tecnologías de la web

Wappalyzer: visualizador de las tecnologías de la web

Rubén Vizcaíno

Rubén Vizcaíno. Wappalyzer: visualizador de las tecnologías de la web. En Cristòfol Rovira; Lluís Codina (dir.). Máster en Información Digital. Barcelona: Universidad Pompeu Fabra – BSM.


Qué es Wappalyzer

Wappalyzer es una herramienta que permite identificar las diferentes tecnologías utilizadas en una página web. Se trata de una aplicación multiplataforma y de código abierto que es capaz de identificar hasta 1093 tecnologías web diferentes, tales como los sistemas de gestión de contenido, plataformas de comercio electrónico, herramientas analíticas, de publicidad, etc. Puedes consultar la lista completa aquí.

Esta herramienta es gratuita y muy fácil de usar. Realmente es un recurso valiosísimo para cualquiera que quiera aprender cómo está construida una web y cuál es la tecnología que está detrás.

Instalación y uso

La forma más sencilla de usar Wappalyzer es instalándola como una extensión del navegador. Hay versiones disponibles tanto para Chrome como para Firefox. En este tutorial utilizaremos la versión para Chrome.

  1. Desde la página de descargas, seleccionamos la opción correspondiente a nuestro navegador. Se abrirá la ventana de aplicaciones del navegador y procedemos a añadir la extensión de Wappalyzer.

01.png

  1. Tras añadir la extensión, nos aparecerá el icono de Wappalyzer en la barra del navegador. Lo veremos en gris cuando no puede analizar la web y adoptará la forma del icono de alguna de las tecnologías utilizadas en la página cuando sea posible realizar el análisis (por ejemplo, se transformará en el icono de WordPress):

02.png

Algunas de las formas que puede adoptar el icono de Wappalyzer.

  1. Para analizar la web, solo tenemos que pulsar en el icono de Wappalyzer. Se desplegará una ventana donde podremos ver las principales tecnologías que utiliza la web en cuestión, organizadas por categorías:

03.png

  1. Si pulsamos sobre el nombre de una categoría, Wappalyzer nos mostrará una lista de las principales aplicaciones o webs que pertenezcan a esa categoría, ordenadas según su relevancia:

04.png

  1. Por otra parte, si en la ventana inicial hacemos click sobre el nombre de una aplicación dentro de una categoría, se nos mostrará una lista de webs que utilizan esa tecnología:

05.png

Principales tecnologías web analizadas

Como decíamos al principio, Wappalyzer puede identificar más de mil tecnologías web diferentes. Sería imposible analizarlas todas en este artículo; no obstante, mencionaremos algunas de las categorías más importantes:

  • Redes de publicidad (advertising networks), que ponen a disposición de los anunciantes toda una red de webs donde ubicar sus anuncios. Además, este tipo de redes permiten al anunciante definir con mucho detalle las características de la campaña. Sin duda, la aplicación líder en esta industria es Google AdSense.
  • Herramientas analíticas. Se trata de un conjunto de herramientas que recogen, suministran y analizan datos de una página web. La información así obtenida puede utilizarse para múltiples finalidades: lograr un mejor conocimiento de la audiencia, definir una estrategia de contenidos, evaluar el resultado de acciones de marketing, etc. De nuevo una aplicación de Google (Google Analytics) manda en el sector.
  • Blogs. Esta categoría está claramente dominada por WordPress, pero también otras plataformas, como Blogger o Tumblr, tienen una notable implantación.
  • Sistemas de gestión de contenido (CMS, content management systems), que son el software que soporta la creación y administración de contenidos en una web. WordPress es casi omnipresente en este campo, pero otros sistemas como Joomla o Drupal tienen una importante base de usuarios.
  • Sistemas para la gestión de comentarios, donde Disqus es la tecnología hegemónica, con un 97,4% de cuota de mercado.
  • Bases de datos y Gestores de bases de datos, con MySQL y phpMyAdmin dominando respectivamente cada categoría. Estas herramientas permiten crear, modificar y, en general, administrar el conjunto de datos que utiliza una página web.
  • Comercio electrónico. Este tipo de tecnología permite gestionar una tienda online, siendo WooCommerce la herramienta más utilizada. Sin embargo, otras opciones como Shopify, Magento, PrestaShop y OpenCart tienen también una importante difusión.
  • Gestión de foros. En este apartado destaca phpBB, que es un gestor de foros de código abierto y distribución libre. Otras opciones serían Discuz! X o vBulletin.

Una herramienta a tener en cuenta

En definitiva, Wappalyzer es una herramienta de gran utilidad para analizar la tecnología que da soporte a una web y, por tanto, un interesante recurso para aprender cómo funciona una página. Su carácter gratuito, facilidad de uso y la cantidad de información que proporciona la convierten en una de las mejores opciones para este tipo de análisis.

Referencias

1. Wappalyzer. About.

https://wappalyzer.com/about

2. Macworld. Wappalyzer 5.1.2 for Chrome.

http://www.macworld.co.uk/download/internet-tools/wappalyzer-512-chrome-3330408/

3. Marketing Terms. The Internet Marketing Glossary.

Glossary of Digital Marketing Terms

4. Usability. Web Analytics Basics.

https://www.usability.gov/what-and-why/web-analytics.html


© Texto: Rubén Vizcaíno

© Presente edición: Máster en Información Digital UPF-BSM

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

Breve introducción a Tom’s Planner

Breve introducción a Tom’s Planner. Una herramienta online para la construcción de Diagramas de Gantt

Joan Teran

Joan Teran. Breve introducción a Tom’s Planner. Una herramienta online para la construcción de Diagramas de Gantt[en linea]. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Documentación Digital. Barcelona: Área de Ciencias de la Documentación. Departamento de Comunicación. Universidad Pompeu Fabra.http://www.documentaciondigital.org/


Sumario

1. Qué es un diagrama de Gantt?

2. Una aproximación a Tom’s Planner

3. Pasos previos

4. Iniciación

5. Trabajar con Tom’s Project

5.1. La estructura del diagrama

5.2. La cuadrícula

6. La barra de herramientas

7. Bibliografía


1. Qué es un diagrama de Gantt?

El Diagrama de Gantt es una herramienta gráfica muy útil para la gestión de proyectos. Su función es visualizar las diferentes tareas o actividades que componen un proyecto, y las relaciones que se establecen entre ellas de acuerdo con su duración o su ubicación en el calendario.

Un Diagrama de Gantt se estructura en dos ejes:

  • En el eje vertical se enumeran las actividades y tareas que componen el proyecto
  • En el eje horizontal cada una de las actividades se despliega en el calendario mostrando su duración

2. Una aproximación a Tom’s Planner

Existe una amplia variedad de recursos para elaborar Diagramas de Gantt con un ordenador. Sin ir más lejos, dos de las herramientas ofimáticas más conocidas, Microsoft Office por un lado y Open Office por el otro, disponen de macros que permiten automatizar la visualización de un determinado conjunto de datos en forma de Diagrama de Gantt.

Pero hay otras herramientas ya pensadas especialmente para elaborar Diagramas de Gantt.

Tom’s Planner es una de esas herramientas.

Sus principales características son:

  • es muy fácil de usar
  • permite la colaboración online, facilitando el trabajo entre múltiples usuarios de un mismo equipo
  • permite un control ajustado y sencillo de una amplia variedad de parámetros (miembros del equipo, jornadas de trabajo)
  • permite múltiples opciones de visualización

Desde el punto de vista técnico cabe remarcar que Tom’s Planner no necesita ningún tipo de instalación en el ordenador ya que funciona en cualquier navegador. De la misma manera, los proyectos sobre los que trabajamos se guardan en la nube.

3. Pasos previos

Tom’s Planner es un programa que no necesita instalación y que funciona online a través de un navegador. El requisito imprescindible para poder usar Tom’s Planner es tener una cuenta en Google o una cuenta en Facebook.

Hay varias posibilidades para empezar a usar Tom’s Planner el modo prueba, o registrar una nueva cuenta, o entrar a través de una cuenta de Google o de Facebook. Para poner en marcha el proceso de alta como usuario tenemos que recurrir al menú que se encuentra en la parte izquierda de la pantalla, sobre fondo naranja:

Captura de pantalla 2017-10-27 a las 20.46.48.pngCaptura de pantalla 2017-10-27 a las 20.47.31.pngCaptura de pantalla 2017-10-27 a las 20.48.11.png

El proceso de registro de un usuario es rápido y sencillo

El programa envía un correo automático a nuestra dirección de correo electrónico en el cual se detallan algunos de los parámetros de uso, y se muestra un enlace que hay que seguir para confirmar la dirección de correo electrónico.

La mayoría de las funciones de valor añadido de Tom’s Project no se encuentran disponibles en su versión gratuita y para acceder a ellas hay que actualizar nuestra cuenta, accediendo a las ofertas de pago. Algunas de estas funciones son:

  • múltiples proyectos
  • trabajo colaborativo online
  • impresión
  • exportar a imagen
  • exportar a MicroSoft Project

Este es el cuadro de precios y de funcionalidades de Tom’s Planner. Los precios que se reflejan en esta tabla no incluyen el IVA del 21% para residentes de la UE, ni tampoco una política de descuentos si los pagos son trimestrales o anuales.

Captura de pantalla 2017-10-27 a las 21.01.53.png

4. Iniciación

Tom’s Planner permite un amplio abanico de opciones para elaborar completos y complejos Diagramas de Gantt. Es muy recomendable invertir unos breves minutos en ver el material que los programadores ponen al alcance de los usuarios para hacerse una idea de sus posibilidades y de su fácil uso.

  • Empezando por la pestaña “Tour” de la página web de Tom’s Planner, donde se puede encontrar un vídeo de poco más de un minuto en que se puede vislumbrar de forma intuitiva cómo se usa la aplicación, además de una buena selección de pantallazos de las diferentes opciones de uso del programa junto con sus correspondientes explicaciones
  • La pestaña “Plantillas” da acceso a un buen número de ejemplos y plantillas sobre las que poder trabajar, o a partir de las cuales ver las posibilidades de uso que ofrece el programa. La página ofrece incluso un formulario para introducir sugerencias de nuevos ejemplos y plantillas
  • El blog corporativo de Tom’s Planner es también una muy buena herramienta para conocer las novedades de la herramienta, para acceder a materiales útiles, consejos, etc.

Los diferentes materiales demuestran:

  1. la facilidad de uso
  2. la multiplicidad de opciones y
  3. la calidad de las soluciones que se ponen al servicio del usuario

5. Trabajar con Tom’s Project

Tom’s Project es un programa sencillo de usar, de funcionamiento intuitivo. La cuadrícula de trabajo está estructurada en dos espacios. La columna izquierda permite identificar las actividades, caracterizarlas (mediante las distintas columnas, incluyendo las columnas especiales) y agruparlas. La cuadrícula de trabajo es el espacio donde dibujamos el Diagrama de Gantt.

5.1. La estructura del diagrama

Para dotar de estructura el diagrama tenemos que trabajar la parte izquierda del espacio de trabajo, usando el botón derecho del ratón: en función de dónde hagamos clic, accederemos a la posibilidad de añadir o quitar filas o columnas, moverlas u ocultarlas, darles el formato adecuado, etc. El botón izquierdo del ratón nos servirá para seleccionar una casilla, para introducir los datos o asignar el valor adecuado.

  • Fila superior: es la fila principal. Con el botón izquierdo podemos cambiar el título de las columnas, o, si clicamos sobre las flechas que aparecen cuando situamos el cursor del ratón en la parte derecha de cada casilla, nos permite cambiar el método de ordenación de toda la columna: por fechas (es el método por defecto), o por orden alfabético
  • Fila de cabecera de grupo: de nuevo, con el botón izquierdo del ratón accedemos a las celdas para introducir datos o para asignarles un valor, mientras que con el botón derecho accedemos a un pequeño menú desplegable que permite cambiar de color la fila, insertar un nuevo grupo, eliminar grupo, insertar una fila normal, o acceder a las opciones relativas a las columnas (insertar una columna nueva, eliminar la columna, moverla a la izquierda o a la derecha, ocultar la columna o, en caso que esté activada la opción, insertar una columna especial).

Finalmente, las filas de cabecera de grupo tienen un botón en su lado derecho un botón con una flecha para condensar o expandir las filas del grupo.

  • Fila normal: en cuanto a las posibilidades de acción del usuario, la diferencia fundamental con las otras filas son las opciones a las que tiene acceso a través del botón derecho del ratón: puede insertar filas nuevas o eliminar la existente; sangrar permite crear un subgrupo, del cual la fila madre es la superior; es posible copiar y pegar filas y acceder también al menú de columnas ya reseñado.

5.2. La cuadrícula

Una vez diseñada la estructura del Diagrama es necesario empezar a dibujarlo en la cuadrícula. El funcionamiento es igualmente sencillo e intuitivo y sigue dos reglas básicas:

  • uso contextual del botón derecho: en función de donde se encuentre el ratón, es posible ejecutar unas opciones u otras. Para activarlas hay que pulsar primero el botón derecho del ratón, y escoger la opción adecuada
  • arrastrar y soltar (pick & drop): el ratón permite escoger uno o diversos objetos, y moverlos de un sitio a otro del diagrama

Para empezar a dibujar el diagrama situamos el cursor allí donde queremos dibujar la primera barra de actividad y pulsamos el botón derecho del ratón. Aparecen dos opciones:

  • insertar nuevo período: cuando clicamos sobre esta opción aparece inmediatamente un menú para escoger el menú que queremos asignar a la barra de actividad que estamos creando. Una vez hayamos escogido el color aparecerá en la cuadrícula una barra de período de una unidad de duración (la que hayamos escogido en la barra de herramientas) que luego podemos editar.

  • insertar nuevo símbolo: si clicamos sobre esta opción aparece un menú para escoger entre 91 iconos:

Mover, editar o modificar las barras de período es una tarea igualmente sencilla. Mover las barras de período es una tarea de arrastrar y soltar la tarea. Mientras arrastras la barra, Tom’s Project te señala la fecha de inicio y de fin de la actividad, con el objetivo de que el usuario sepa en todo momento su situación exacta.

Una forma de editar o modificar una barra de período consiste en clicar con el botón derecho del ratón encima suyo. Se abre un menú que permite:

  • escribir una leyenda encima
  • insertar un símbolo
  • insertar un comentario
  • copiar un período (que luego se puede pegar en otro lugar de la cuadrícula)
  • eliminar el período
  • cambiar el color del período

La otra formas de editar o modificar una barra de período consiste en alargar o acortar el período, clicando sobre el extremo que deseamos modificar y arrastrando y soltando hasta donde deseemos.

6. La barra de herramientas

Una vez el usuario se ha autenticado, Tom’s Project nos dirige directamente a un interfaz de trabajo que nos permite visualizar sus diferentes niveles de opciones. Accedemos a estas opciones a través de la barra de herramientas que encontramos en la parte superior del interfaz.

Captura de pantalla 2017-10-27 a las 21.43.35.png

Las diferentes opciones a las que tenemos acceso son:

  1. Nuevo calendario: a través de este botón abrimos un nuevo documento en blanco, para lo cual el programa nos pregunta si queremos guardar el documento en el que estamos trabajando
  2. Mis calendarios: al clicar sobre este botón podemos acceder a los archivos guardados.

El menú de archivos guardados se estructura entre los calendarios guardados en línea, y los locales es decir aquellos calendarios que hemos guardado en nuestro ordenador o en nuestra unidad de almacenamiento – opción a la que no podemos acceder desde la cuenta gratuita de Tom’s Project.

El menú ofrece toda la información relativa al archivo seleccionado, incluyendo no sólo las informaciones típicas (nombre del archivo y fecha de la última modificación, además de la posibilidad de añadir algún tipo de nota informativa), sino que incluye información y opciones de publicación y de trabajo colaborativo. De nuevo, algunas de estas opciones (“compartir” e “incrustar”) sólo están disponibles en las opciones de pago del programa.

La opción de publicar en línea, en cambio, está disponible y su funcionamiento es muy sencillo. Sólo hay que completar la URL en la que queremos encontrar el calendario, añadir una contraseña si queremos que el calendario sea de acceso restringido, además de escoger su nivel de zoom.

  1. Guardar: menú que da acceso al almacenamiento de los calendarios sobre los que estamos trabajando.

Hay dos posibilidades, guardar online o almacenar localmente (guardar offline), aunque está segunda opción está reservada para las opciones de pago del programa.

  1. Configuración y pluggins: este botón permite acceder a un menú que permite modificar elementos concretos del entorno de trabajo de Tom’s Project.

El menú de configuración tiene tres apartados: línea de tiempo, leyenda y complementos. El segundo sólo es accesible en las versiones de pago del programa, con lo que queda fuera de esta “Breve introducción a Tom’s Planner”.

El menú “Línea de tiempo” permite configurar aquellos aspectos relativos a la concreción y la visualización de los períodos de tiempo sobre los que se trabaja en el diagrama.

  • elementos que queremos que aparezcan en la línea de tiempo: año, mes, semana, fecha, etc.
  • días de fin de semana: podemos definir qué días de la semana queremos que se contabilicen en el esquema como días de fin de semana, y si queremos que aparezcan o no en el diagrama
  • horas de trabajo: sirve para definir la jornada de trabajo sobre la que se tiene que Tom’s Project calcula los períodos de trabajo del calendario

En cuanto al menú “Complementos” ofrece la posibilidad de activar o desactivar algunas opciones de visualización y de edición avanzadas, a gusto del usuario:

Captura de pantalla 2017-10-27 a las 21.21.04.png

  • Línea de fecha de referencia: la activación de esta opción permite definir una línea que facilite una identificación visual en el calendario de los hitos que pueda tener el proyecto
  • Duración de encabezados en grupo: cuando está activada, esta funcionalidad permite visualizar la duración de un grupo de actividades que hayamos colapsado

Aquí podemos ver un grupo de actividades desplegado

Este es el mismo grupo de actividades colapsado; con la opción activada su duración se visualiza con un patrón

  • Columnas especiales: permite activar la posibilidad de crear columnas con características especiales en el menú de la parte izquierda del calendario, en donde se define su estructura y características. Estas columnas especiales pueden ser:
    • duración y totales: que exprese la duración de cada actividad y la total del grupo
    • principio y fin: que muestre las fechas de principio y de final de cada actividad
    • símbolo: que permita introducir distintos tipos de símbolos
    • semáforos: con tres estados distintos para expresar el estado de cada actividad
    • numeración automática: permite referenciar numéricamente y de forma ordenada cada una de las actividades

  • Botón expandir/colapsar en la barra de herramientas: permite añadir un nuevo botón en la barra de herramientas para expandir o colapsar todos los grupos de actividades a la vez

  1. Compartir/colaborar en línea: permite acceder a las opciones para compartir el documento, y poder trabajar en línea junto con otros usuarios. La primera ventana que se abre al pulsar este botón es la correspondiente al menú de “Mis calendarios”. Tal y como decíamos en el punto 2, las opciones de colaboración están restringidas solamente a las opciones de pago, y por tanto tampoco se incluyen en esta Breve introducción a Tom’s Planner.
  2. Imprimir: en la versión gratuita del programa, no es posible usar esta funcionalidad.
  3. Importación y exportación: Tom’s Project permite importar archivos de diferentes programas y formatos, así como exportar sus ficheros a otros formatos. Aún así, las opciones de importación son las únicas disponibles en la versión gratuïta del programa. Estas opciones incluyen archivos de MicroSoft Project, Excel, tablas preparadas en word o para páginas web (en html), archivos CSV, archivos JSON e incluso Diagramas de Gantt hechos con el antiguo programa Gantto, que fue adquirido en julio de 2013 por Tom’s Project.

Captura de pantalla 2017-10-27 a las 21.52.48.png

  1. Deshacer los cambios anteriores: se trata de la función de deshacer los cambios, que también se puede activar con el comando Control + Z.
  2. Filtrar/buscar: abre un menú emergente que permite filtrar o buscar por palabras en el documento.
  3. día: este botón abre un menú desplegable que permite seleccionar la unidad temporal básica sobre la que se construirá el diagrama. El programa ofrece hasta 10 opciones que permitirán desde la diagramación de un día en períodos de 5 minutos (máximo detalle) hasta la programación de proyectos sobre la base de meses.

  1. Manual: este botón da acceso al User’s Manual de Tom’s Project, que resume en 33 páginas las funcionalidades y los modos de uso de la aplicación online.
  2. ¿Tiene sugerencias o preguntas? Mediante esta opción se abre un formulario que permite plantear cualquier tipo de observación, duda, sugerencia o crítica al equipo de gestión de Tom’s Planner.

7. Bibliografía

Sedes Web

Wikipedia, the free encyclopedia. Gantt Chart.

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

Tom’s Project

http://www.tomsplanner.es/

Tom’s Planner : User’s Manual.

http://www.tomsplanner.com/documentation/manual/en


© Autor/es del documento y Máster en Documentación Digital (IDEC-UPF)

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

No está permitido publicar total o parcialmente este documento sin el

consentimiento previo y por escrito de los autores, excepto que sean citas

de pequeños fragmentos entrecomillados indicando la fuente y la autoría

Big data, OpenData y Linked data

Big data, OpenData y Linked data

Joan Teran

Joan Marco. Big data, OpenData y Linked data. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Información Digital. Barcelona: Universidad Pompeu Fabra – BSM.


Estos tres conceptos, contemporáneos como pocos, empezaron a cobrar sentido cuando el desarrollo tecnológico alcanzó una velocidad difícil de imaginar hace 30 años. Para explicarlos vamos a empezar desde el principio y a ir en orden, de menos a más.

El Big Data

Los inicios nos llevan a cuando pensábamos que los megas eran unidades de memoria realmente potentes. En los ochenta no eran nada desdeñables, desde luego; en cambio, en los 90 nos pasamos a los gigas, en los 2000 a los teras y ahora existen, siguiendo la regla de que el siguiente de la lista es 1024 veces el anterior: el petabyte, el exabyte, el zettabyte, el yottabyte, el brontobyte y el geopbyte.

Estos términos se han tenido que inventar a la fuerza, ya que la información que se genera día a día en todo el mundo es cada vez mayor. Es mayor no solo porque se vaya acumulando, sino porque cada vez hay más canales capaces de generarla.

bigdata.jpg

Imagen 1

El Big Data hace referencia a dos cosas al mismo tiempo: a la gran cantidad de información –imposible de procesar por el software habitual– por un lado y a la capacidad tecnológica de gestionar dicha información por otro.

Este binomio de información-capacidad, si se sabe tratar, es un arma potentísima para las empresas. Si estas son capaces de conocer el comportamiento de su público objetivo a través del Big Data, ¿no serán más capaces de satisfacer lo que este quiere?

Y es que el Big Data nace de cualquier cosa que genere información y se pueda registrar: un email, una hoja de Excel, una llamada de teléfono, una red social, un formulario web, una fotografía hecha con el móvil, etc.

El Big Data y el uso de la razón nos llevan al Open Data.

El Open Data

Si el Big Data se mide como si fuera un tamaño o una capacidad, el Open Data lo tomaremos desde el sentido del uso.

 

La información recogida, almacenada y procesada tiene un potencial incalculable, eso es evidente. Entonces se plantea la pregunta: ¿por qué no podría sacar partido de ello cualquiera? Si mucha de esa información es pública, ¿por qué no facilitar el acceso a dicha información al ciudadano medio?

Con ella, las personas serán capaces de mejorar el mundo actual, al tomar decisiones fundamentadas en datos reales.

open data.jpg

Imagen 2

El Open Data es el uso público del Big Data.

 

El Big, Open Data, por tanto, hace referencia a la parte del Big Data que es pública, accesible para todo el mundo.

 

Por ejemplo: el censo de una población es Open Data. Los censos de todo el mundo junto a los atributos de todos los miembros del censo (fecha de nacimiento, dirección, documento de identidad, etc.) es Big, Open Data.

Que una información sea accesible no quiere decir que sea útil. ¿Qué pasa si no se puede «navegar» en esa información, si hay dificultades para catalogarla o comprenderla? Es aquí donde se presenta el concepto de Linked Data.

Linked Data

Imagina que el Big, Open Data se etiqueta. Pero no un etiquetado sencillo de blanco o negro, sino un etiquetado semántico completo, capaz de otorgar distintos niveles de caracterización a un dato. Niveles que permita, además, conectarlo con otros datos directamente relacionados.

linked data.png

Imagen 3

Un ejemplo muy sencillo y llano: en una base de datos, se aplica un formato determinado para registrar la ciudad de Barcelona. Los usuarios que entren a esa base de datos podrán identificar Barcelona sin problemas gracias al formato aplicado y, además, podrán acceder desde ese registro a otras entidades (registradas con el mismo formato determinado) como Catalunya, Girona, Ciudad, Tarragona, Lleida, Mediterráneo, etc.

Con el Big, Open Data procesado y bien etiquetado, su potencial crece de manera exponencial.

Ya no se trata tanto de reunir información, sino de entenderla, conectarla y hacerla más útil. Si somos capaces de procesarla y relacionarla podremos comprenderla, y si la comprendemos nuestras decisiones serán cada vez no solo más fiables, sino también más rápidas.

Fijaos que hemos pasado de Big Data a Big, Open Linked Data.

Herramientas de visualización de datos

Existen cientos de herramientas en la red que nos permiten visualizar a nuestro antojo la pequeñísima porción de Big, Open Linked Data que hayamos seleccionado. Evidentemente, no todas valen para todo. Las hojas de cálculo de Excel con extremadamente útiles para cometidos numéricos, algebraicos y analíticos, pero la parte visual deja bastante que desear.

Entre las herramientas más potentes del mercado se encuentran las siguientes, todas ellas de pago, aunque algunas incluyen usos algo limitados de forma gratuita:

Tableau

Qlikview

FusionCharts

HighCharts

DataWrapper

Plotly

Sisense

Referencias

Álex Rayón (2016). “Del Open Data al Linked Open Data: sacando valor de los datos enlazados”. Deusto Data.

Del Open Data al Linked Open Data: sacando valor de los datos enlazados

Bernard Marr (2017). “The 7 Best Data Visualization Tools in 2017”. Forbes. https://www.forbes.com/sites/bernardmarr/2017/07/20/the-7-best-data-visualization-tools-in-2017/#135c8bad6c30

Joel Gurin, New York University (2014). “Big data and open data: what’s what and why does it matter?”. The Guardian. https://www.theguardian.com/public-leaders-network/2014/apr/15/big-data-open-data-transform-government

Imagen 1: Matt Clarke (2013). “Big Data Diary”. https://mattclarkecto.com/category/big-data/

Imagen 2: Joel Gurin (2014). “Driving Innovation With Open Data”. U.S. Chamber of Commerce Foundation. https://www.uschamberfoundation.org/driving-innovation-open-data

Imagen 3: WikiToLearn. “Linked Data Visualization”. https://en.wikitolearn.org/Course:How_to_use_Linked_Data/Interaction_with_Linked_Data/Linked_Data_Visualization


© Texto: Joan Marco

© Presente edición: Máster en Información Digital UPF-BSM

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

Breve introducción a Gliffy

Breve introducción a Gliffy, una herramienta online para construir diagramas y esquemas

Joan Teran

Joan Teran. Breve introducción a Gliffy, una herramienta online para construir diagramas y esquemas [en linea]. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Documentación Digital. Barcelona: Área de Ciencias de la Documentación. Departamento de Comunicación. Universidad Pompeu Fabra. http://www.masterenbuscadores.com


Sumario

1. ¿Qué es y para qué sirve Gliffy?

1.1. ¿Qué esquemas se pueden diseñar con Gliffy?

2. Opciones generales

3. Cómo empezar a trabajar con Gliffy

3.1. Alta de usuario

3.2. Dibujar diagramas

3.2.1. Crear y editar formas

3.2.2. Líneas y conexiones

3.3. Construir site maps con Gliffy

3.4. Compartir diagramas

3.5. Control de cambios

4. Bibliografía


1. ¿Qué es y para qué sirve Gliffy?

Gliffy es un software para la construcción de todo tipo de esquemas y diagramas que funciona online, es decir, que no requiere de la instalación de ningún software en el disco duro del ordenador. Aún así, existen tres versiones de pago de Gliffy que prevén el uso de distintos plugins (Atlassian Confluence o Atlassian JIRA) para facilitar más y mejores prestaciones.

Este tutorial se basa en el uso de la versión gratuita de Gliffy versión de prueba de Gliffy (14 días) y se acerca a las principales opciones que ofrece el programa.

Gliffy es una herramienta para construir esquemas y diagramas muy fácilmente. Para ello ofrece una amplia variedad de formas que el usuario puede manipular a su antojo, ya sea definiendo medidas, creando anotaciones, conectando los elementos o caracterizando las formas con colores.

Además, ofrece la posibilidad de trabajar en red, con un efectivo método para el control de los cambios introducidos y diferentes opciones para compartir los diagramas o esquemas que se van construyendo.

1.1. ¿Qué esquemas se pueden diseñar con Gliffy?

Gliffy ofrece un amplio abanico de formas preconstruidas para la elaboración de distintos tipos de esquemas y diagramas. Por ello Gliffy es considerada una herramienta tan versátil, porque es igual de fácil construir diagramas para objetivos y tareas completamente diferentes.

El programa ofrece 72 plantillas diferentes pertenecientes a 13 tipologías diferentes de diagramas, accesibles en Archivo > Nuevo, pulsando a continuación en la opción Crear desde plantilla:

01.png

Con 72 plantillas diferentes agrupadas en 13 tipologías diferentes Gliffy sorprende por la amplia variedad de objetivos y ámbitos de trabajo para los que puede ser de una gran eficacia

2. Opciones generales

Gliffy es un software que destaca por la facilidad de uso y por la simplicidad de sus opciones. El objetivo del presente tutorial es repasarlas de forma sintética, por lo que empezaremos por describirlas ahora de forma muy sucinta.

Gliffy permite:

  • dibujar y relacionar formas para diseñar un completo diagrama (se ofrece una amplia variedad de formas en el menú vertical de la parte lateral izquierda)
  • facilidades para compartir y/o publicar los diagramas y esquemas (“Compartir”), incluyendo la opción de exportarlos a diferentes tipos de archivos
  • usar los esquemas (convertidos en archivos gráficos o en código de html) en documentos de todo tipo, desde páginas web hasta cualquier tipo de documento que los admita
  • trabajar simultáneamente con otros usuarios de Gliffy en la elaboración del mismo diagrama
  • ejercer un control de cambios con el objetivo de poder recuperar en cualquier momento versiones anteriores del mismo trabajo

3. Cómo empezar a trabajar con Gliffy

En este apartado se detallan los pasos que hay que seguir para poder elaborar un diagrama o esquema con Gliffy, usando las diferentes opciones que el software ofrece.

3.1. Alta de usuario

El primer paso es dar de alta un usuario. Aunque Gliffy permite llevar a cabo una prueba sin registrarse como usuario, es necesario abrir una cuenta de usuario para poder guardar adecuadamente el trabajo realizado.

Pulsando el botón “Start free trial” que encontramos en la parte izquierda de la pantalla accedemos a la posibilidad de empezar a trabajar con Gliffy creando un nuevo documento, ya sea a partir de cero o a partir de una de las múltiples plantillas que el programa ofrece.

Por tanto, para abrir una cuenta nueva debemos clicar sobre el mencionado botón de “Start free trial”, tal y como aparece en la página de inicio de Gliffy, donde debemos proporcionar los datos que se nos piden:

02.png

En esta página hay que introducir la dirección de email que se quiere usar para la cuenta, el password y el tamaño de nuestra empresa u organización

3.2. Dibujar diagramas

La tarea fundamental que este programa permite llevar a cabo es la realización de esquemas o diagramas. Seguidamente desgranamos lo fundamental para poder empezar a trabajar con Gliffy.

3.2.1. Crear y editar formas

Lo primero que hay que hacer para dibujar un diagrama es escoger la forma más adecuada para ello. Para ello es necesario escoger la forma deseada de entre las que se nos ofrece en el menú lateral izquierdo. Hay una amplísima variedad de formas.

03.png

Es posible elegir entre 10 grandes tipologías correspondientes a otras tantas variedades distintas de esquema, mapa o diagrama a realizar

Para introducir una forma en el diagrama hay que clicar sobre la forma seleccionada y arrastrarla desde el menú hacia el sitio donde se quiere que aparezca en el diagrama.

04.png

Crear y mover objetos es muy sencillo gracias al sistema “drag and drop”

Una vez creado el objeto es muy fácil dotarlo de múltiples características: introducir texto, darle forma, modificar su posición, etc. Es posible llevar a cabo estas tareas con el ratón de forma intuitiva; pero también se puede hacer de forma más sistemática clicando sobre los botones que aparecen en la parte superior derecha del objeto cuando tenemos seleccionado el objeto. Para seleccionar un objeto tenemos que hacer un clic encima del mismo.

Para acceder al menú de propiedades del objeto este tiene que estar seleccionado

05.png

El menú de propiedades que aparece por defecto permite modificar el color del cuadro (tanto el relleno como el contorno), su posición, sus medidas, bloquearlas, rotar su posición y bloquear sus proporciones

La otra pestaña del menú de propiedades permite modificar las características del texto, incluyendo la posibilidad de crear enlaces

Cuando un diagrama o esquema está muy cargado de objetos, pueden ser muy útiles las opciones Traer al frente / Enviar al fondo. Al igual que en los programas de diseño gráfico que funcionan por capas, esta opción permite llevar al frente objetos que han quedado tapados, o al revés, enviar al fondo objetos para que otros queden superpuestos.

06.png

“Traer al frente” es una opción válida para superponer objetos que queremos destacar por encima de otros

3.2.2. Líneas y conexiones

Una herramienta fundamental para la creación de esquemas o diagramas son las líneas que permiten conectar los objetos. Gliffy ofrece un sistema muy sencillo y eficaz para crear y editar estas conexiones.

Existen dos grandes opciones para ello:

  • Herramienta línea recta”, que permite crear líneas completamente rectas
  • y “Herramienta del conector”, que permite crear líneas con curvas de diferentes tipos

07.png

La diferencia entre herramienta línea recta y herramienta del conector: rectas o curvas

Se trata, en el fondo, de la misma herramienta.

Es posible editar las características de los conectores. Como en el caso de los objetos, para acceder al menú de propiedades hay que clicar sobre el icono de propiedades que aparece cuando seleccionamos la línea o conector.

08.png

El cuadro de propiedades de las líneas permite un amplio abanico de posibilidades en cuanto a la forma y al texto

Es posible convertir el conector en diferentes tipos de flechas, colorearlo, definir qué tipo de curva queremos que dibuje, establecer su grosor y configurarlo como una línea de puntos.

El método para dibujar un conector es muy sencillo. En primer lugar se selecciona del menú superior una de las dos opciones descritas (Herramienta línea recta o Herramienta del conector). Seguidamente aparecen marcadas unas cruces alrededor de los objetos del diagrama. Estas cruces definen los puntos de salida / entrada de los conectores.

Se abren tres posibilidades:

  • Conectar dos objetos existentes: hay que clicar sobre una cruz y arrastrar el ratón hasta el punto de conexión deseado
  • Establecer una línea/curva que empiece en un objeto pero que no conecte con ninguno: en lugar de escoger uno de los objetos que la ventanilla ofrece, hay que clicar en cualquier otro punto del diagrama

3.3. Construir site maps con Gliffy

Una de las múltiples posibilidades que ofrece este software de construcción de esquemas y diagramas es la construcción de site maps, con formas y objetos que representan un amplio abanico de conceptos relacionados.

Según la wikipedia, un sitemap es

A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for Web design, or a Web page that lists the pages on a Web site, typically organized in hierarchical fashion

La mecánica para construir un sitemap en Gliffy es similar a la construcción de otro diagrama cualquiera, pero requiere el uso adecuado de cada forma para cada significado concreto. Se puede acceder a las formas propias de Sitemap clicando en Archivo > Nuevo y seleccionando la opción Crear desde plantilla. A continuación seleccionamos la opción Blank Sitemap de la categoría Site Maps.

09.png

Para acceder a las formas propias de un sitemap hay que acceder a la plantilla en blanco correspondiente

Situando el cursor encima de cada una de las formas del menú desplegable podemos ver los significados correspondientes a cada una de ellas.

El menú de formas contiene un apartado con múltiples objetos que permiten construir sitemaps de gran calidad y precisión

Como en los demás tipos de esquemas y diagramas que se pueden construir con Gliffy es posible conectarlos entre ellos para representar los links que conectan las diferentes páginas que conforman un sitio web, así como incorporar un texto para dar un nombre a cada página en el contexto del mapa.

3.4. Compartir diagramas

Hay tres grandes opciones que permiten compartir el trabajo realizado con otros.

  • Exportar: gracias a esta opción podemos convertir el diagrama realizado a distintos tipos de archivo. Concretamente: archivos de imagen (JPEG o PNG), archivos de imagen vectoriales (SVG) o archivos Gliffy. Estas opciones se encuentran en Archivo>Exportar

10.png

  • Publicar: Gliffy facilita un código html para incrustar el diagrama en una página web, o bien una serie de enlaces que contienen la imagen del diagrama en distintos tamaños. Es posible acceder a esta opción siguiendo la ruta Compartir > Publicar del menú superior. También permite compartir directamente con determinadas redes sociales.

11.png

Para acceder a estas opciones hay que marcar la opción “Compartir > Publicar”

  • Colaborar: También es posible compartir los diagramas con otros usuarios de Gliffy. Se accede siguiendo la ruta “Compartir > Colaborar” e introduciendo las direcciones de correo electrónico de los correspondientes usuarios. Esta opción es sólo accesible en las opciones de pago de Gliffy.

3.5. Control de cambios

El control de cambios es una herramienta fundamental no sólo para el trabajo colaborativo, sino incluso para un óptimo trabajo individual. El sistema que Gliffy ofrece a sus usuarios es muy sencillo pero muy eficaz al mismo tiempo.

Consiste simplemente en guardar un histórico de las diferentes versiones que el/los usuarios ha/n ido guardando. Se accede a ellas simplemente clicando sobre la opción de “Historial de revisión” disponible en el menú “Archivo”.

12.png

Historial de revisión: un sistema sencillo y eficaz para el control de cambios

4. Bibliografía

Sedes Web

  • Gliffy. Online Diagram Software and Flowchart Software:

http://www.gliffy.com/

  • Gliffy User Manual

http://www.gliffy.com/user-manual/

  • Wikipedia. Site map.

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


© Autor/es del documento y Máster en Documentación Digital (IDEC-UPF)

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

No está permitido publicar total o parcialmente este documento sin el

consentimiento previo y por escrito de los autores, excepto que sean citas

de pequeños fragmentos entrecomillados indicando la fuente y la autoría

Artículo 1.6. Análisis y evaluación automática de sitios web

Artículo 1.6. Análisis y evaluación automática de sitios web

Rubén Alcaraz; Cristòfol Rovira

Rubén Alcaraz; Cristòfol Rovira. Artículo 1.6. Análisis y evaluación automática de sitios web. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Información Digital. Barcelona: UPF Barcelona School of Management.


Sumario

1.Introducción

2. Servicios de análisis y evaluación automática

2.1. Según el tipo de análisis

2.2. Según el tipo de software (online u offline)

3. Servicios para la validación del código fuente

3.1. HTML, XHTML y HTML5

3.2. eXtensible Markup Language (XML)

3.3. Hojas de estilo en cascada (CSS)

3.3.1. Tipos de errores

4. Servicios para la evaluación automática de la accesibilidad

5. Servicios para la optimización del posicionamiento

5.1. Analizadores de enlaces

5.1.1 Analizadores de enlaces salientes

5.1.2 Analizadores de enlaces entrantes

5.2. Analizadores del contenido

5.3. Velocidad de carga y rendimiento del sitio

5.4. Otros tipos de análisis relacionados con el posicionamiento

5.5. Directorio de recursos

6. Mención de validación

7. Conclusiones

8. Bibliografía y recursos


Nota sobre la evaluación: al final del artículo de esta unidad o de forma intercalada en el texto encontrará el enunciado de diversas actividades. Para superar esta unidad didáctica deberá realizar las actividades redactando un informe en el que se incluyan comentarios y, en caso que sea pertinente, una captura de pantalla de cada actividad para ilustrar su realización. Para entregar este informe deberá crear un solo documento para todos las actividades de esta unidad didáctica en formato PDF.

1. Introducción

Es bien sabido que los navegadores web son muy resistentes a los errores en el código HTML. Además, el lenguaje HTML está diseñado para ser altamente compatible con los distintos agentes de usuario con los que ha de interactuar, lo que permite a las nuevas entidades HTML ser ignoradas por los navegadores Web que no las entienden sin causar que el documento sea inutilizable. Esta característica, conocida como diseño de tolerancia a fallos, acarrea una gran ventaja y un gran inconveniente. La ventaja es que a diferencia del código de un programa informático, las páginas web podrán visualizarse a pesar de una codificación deficiente. La otra cara de la moneda es que los webmasters y creadores de páginas web no se ven obligados a ser cuidadosos en su trabajo y, por tanto, de forma indirecta, se está propiciando la creación de páginas con errores de código.

Esta deficiente codificación no tendría mayores consecuencias si la web no evolucionara y no hubiera desarrollos previstos más potentes que exigen una codificación impecable. Nos referimos al nuevo paradigma de la Web Semántica y a la posibilidad de un uso mucho más “inteligente” del contenido disponible en Internet. Para que sea posible la Web Semántica, el código de las páginas Web tiene que ser limpio y con una sintaxis correcta, puesto que, de alguna manera, en este nuevo entorno las páginas web son procesadas en las mismas condiciones que un programa informático. Además, contar con un código limpio y correcto presenta otras ventajas como veremos más adelante.

Por otro lado, en el contexto del diseño de una página web, debemos prestar especial atención a otras disciplinas relacionadas cada vez más importantes, como son la accesibilidad y el SEO (Search Engine Optimization). Ninguna de ellas son, por si mismas, características indispensables para que una página funcione y pueda verse correctamente en un navegador, al menos, para la mayoría de usuarios. No obstante, el hecho de que una página web sea accesible o que presente unas características que le permitan posicionarse bien en los resultados de búsqueda de los principales buscadores de Internet, son propiedades altamente deseables en un contexto tan competitivo como el actual.

En esta unidad presentaremos algunos de los principales servicios de análisis y evaluación automática de sitios web gratuitos disponibles en la Red.

2. Servicios de análisis y evaluación automática

Podemos clasificar los servicios de análisis y evaluación automática de sitios web según el tipo de análisis que realizan y según el tipo de software o lugar en el que se encuentran instalados.

2.1. Según el tipo de análisis

Existen tres tipos de servicios de análisis y evaluación automática de páginas web. Según el tipo de análisis que realizan, podemos distinguir entre los validadores de código fuente, los evaluadores de accesibilidad y los de posicionamiento web.

Fig. 1. Tipos de servicios de análisis y evaluación automática.

2.2. Según el tipo de software (online u offline)

Existen diferentes formas de implementar los distintos analizadores automáticos que acabamos de ver. Algunos de estos programas se distribuyen como aplicaciones de escritorio que se instalan en nuestro ordenador de la manera tradicional, otros se distribuyen como extensiones para los principales navegadores. También los hay que se implementan en forma de plugin o extensión en nuestro sistema de gestión de contenidos (CMS), aunque la forma más habitual de ofrecer estos servicios es por medio de aplicaciones en línea disponibles en la página web de la empresa que lo comercializa o de la institución que lo ha creado. En estos casos, el usuario escribe la dirección de la página a analizar o, en el caso de que la página todavía no esté en línea, sube un fichero o incluso escribe directamente el código en un formulario, y el validador devuelve un informe con los resultados obtenidos. En general, en esta unidad usaremos este último tipo de herramientas.

Fig. 2. Servicios de análisis y evaluación automática según el tipo de software.

3. Servicios para la validación del código fuente

3.1. HTML, XHTML y HTML5

El W3C (World Wide Web Consortium) es un consorcio internacional sin ánimo de lucro que trabaja en la creación de estándares web. Es el responsable de la creación y mantenimiento, entre otros, de los URL, el protocolo HTTP, el lenguaje de marcas HTML, XML o las hojas de estilo CSS. Su misión es “guiar la Web hacia su máximo potencial a través del desarrollo de protocolos y pautas que aseguren su crecimiento futuro” (Jacobs, 2004).

Una de las preocupaciones del W3C es precisamente mejorar la calidad del código de las páginas web. Entre las medidas tomadas por el W3C para alcanzar este objetivo destaca, por un lado, la publicación del sitio web W3Schools, un portal en el que podemos encontrar tutoriales sobre los diferentes estándares mantenidos por el consorcio, así como de otros estándares ampliamente aceptados como los lenguajes de programación PHP y JavaScript, AJAX (Asynchronous JavaScript And XML) o JSON (JavaScript Object Notation). Por otro lado, el W3C ha desarrollado diferentes servicios para validar diferentes lenguajes como HTML, CSS, RDF o RSS, entre otros (http://www.w3.org/developers/tools). Estos validadores revisan el código fuente de nuestra página web en busca de errores de sintaxis (etiquetas incorrectas, mal cerradas, atributos obsoletos, etc.), elementos obligatorios ausentes o en los que no se ha indicado un valor correcto, así como otros tipos de sugerencias.

Veamos algunos resultados y diferentes mensajes ofrecidos por el validador de código HTML del W3C, para diferentes páginas web.

Fig. 3. Advertencia devuelta por el validador de código HTML del W3C.

En la figura anterior, podemos ver una advertencia (warning). Los elementos marcados como advertencias no se tratan de errores, pero sí de aspectos que deberíamos revisar. En algunos casos, muestran elementos o atributos obsoletos y, en otros como en el ejemplo anterior, un atributo innecesario. El ejemplo seleccionado no es casual. En este caso, aunque el rol “navigation” a priori, puede parecer prescindible, lo cierto es que algunas ayudas técnicas, como por ejemplo algunos lectores de pantalla para personas ciegas, todavía no soportan totalmente todas las nuevas etiquetas semánticas de HTML5, por lo que el uso de este atributo puede ayudar a añadir semántica al elemento. Es por esto que debemos analizar con detalle las advertencias, y corregir sólo aquellas que realmente puedan suponer un problema.

Fig. 4. Error provocado por el uso de un elemento obsoleto.

Fig. 5. Error provocado por la ausencia del atributo “alt” en una imagen.

En los dos ejemplos anteriores, el validador nos muestra errores. Se trata respectivamente, del uso de un elemento obsoleto en HTML5 (hgroup), y de la ausencia del atributo “alt” en una imagen.

En todos los ejemplos propuestos, podemos ver como el validador además de mostrar el error o errores, nos indica su posición en el código fuente (línea) y aporta, además, una pequeña explicación sobre su origen. En algunos casos, se ofrece también un enlace a documentos oficiales del W3C, como podemos ver en el error relacionado con el atributo “alt”.

Además de los servicios de validación ofrecidos gratuitamente por el W3C, existen otros servicios similares desarrollados por terceras empresas. Algunos de ellos ofrecen características adicionales interesantes, no obstante, el uso del servicio desarrollado por el W3C es preferible frente a estos otros programas, pues se trata del servicio de validación desarrollado por la misma organización que ha creado y mantiene el lenguaje. Además, en el caso del validador de CSS del W3C, se nos ofrece la posibilidad de, una vez superado el análisis, añadir una insignia en la página analizada indicando que el código sigue las recomendaciones de esta entidad. Estas insignias suponen un símbolo de garantía frente a otros webs que no las tienen y un mecanismo que permite a los usuarios del sitio comprobar rápidamente si el código es válido o no. En cualquier caso, los diferentes validadores disponibles se pueden utilizar simultáneamente, pero sin prescindir del servicio utilizado por el W3C.

Algo en qué coinciden todos estos servicios de validación es en su limitación a la hora de determinar el correcto uso de las nuevas etiquetas semánticas presentes en HTML5. Los validadores compatibles con HTML5 son capaces de determinar si estas etiquetas están bien escritas o incluso en el caso del validador del W3C, de detectar la ausencia de ciertas etiquetas relacionadas con las etiquetas semánticas (por ejemplo, un encabezado bajo una

), pero todavía no son capaces de determinar, por ejemplo, si el contenido marcado como

o

es en realidad un artículo o una sección dentro de la página. Es por este motivo que resulta importante además de validar el código mediante estos programas automáticos, realizar un análisis experto para confirmar la adecuación de determinadas etiquetas, especialmente cuando trabajamos con sistemas de gestión de contenidos que las generan de manera automática por nosotros.codigo.jpg

Fig. 6. El validador de código del W3C es capaz de detectar la ausencia de un encabezado después del inicio de una sección (líneas 17-18 en la imagen). Ahora bien, en ningún caso nos podrá informar de si esa parte de la página se trata realmente de un contenido que debemos marcar como una sección.

Actividad 1. Visita los siguientes validadores analizando en todos ellos la misma página. Haz una captura de pantalla del resultado de cada análisis y, a continuación, redacta un par de párrafos comparando las prestaciones del validador del W3C con alguno de los otros.

3.2. eXtensible Markup Language (XML)

XML es un lenguaje de marcas desarrollado por el W3C pensado para almacenar y describir datos de forma independiente al software y al hardware. Como HTML, deriva del lenguaje SGML (Standard Generalized Markup Language) del cual hereda el concepto de DTD (Document Type Definition) o en la actualidad XSD (XML Schema Definition), que son archivos que establecen una definición formal de un tipo de documento XML, especificando la estructura lógica de sus elementos y atributos. A diferencia de HTML, en el que encontramos una sintaxis preestablecida que debemos utilizar para crear un documento correcto, en el caso de XML no existe una colección de etiquetas y atributos, sino que, en cada caso, se pueden utilizar aquellas etiquetas que consideremos más oportunas. Para poder utilizar esas etiquetas y sus atributos, deben estar definidas en un XSD que debemos crear previamente.

Es importante comprender que XML no es un sustituto de HTML, ni viceversa. Se trata de dos lenguajes complementarios que se utilizan en diferentes casos. Mucha gente no es consciente de que sus sitios web incorporan, además de documentos HTML, también documentos XML. Este es el caso de los RSS (Really Simple Syndication) generados automáticamente por los blogs o canales de noticias de nuestros sitios o incluso el sitemap de nuestro web.

Una de las grandes diferencias entre los documentos codificados en HTML y los codificados en XML, es que mientras que en los primeros, como hemos comentado en la introducción, es posible ver una página correctamente a pesar de contener algunos errores de codificación, en el caso de XML un sólo error bastará para que el documento no sea válido y por lo tanto no se muestre en el navegador o aplicación. Es por este motivo que la validación de documentos XML es imprescindible. En este sentido, la mayoría de editores de XML ya incorporan herramientas de validación que podemos utilizar a medida que creamos nuestros documentos. No obstante, también encontramos algunos validadores en línea.

Algunos de los principales validadores de XML disponibles en línea son:

3.3. Hojas de estilo en cascada (CSS)

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje complementario al HTML que permite definir la presentación de un documento estructurado en HTML o XML de forma independiente a su contenido. Como en el caso del lenguaje HTML, su normalización corre a cargo del W3C. La versión actual de este lenguaje es la conocida como CSS3.

Es interesante remarcar que la aparición de las CSS fue posterior a la de HTML. Desde la aparición de XHTML, el W3C incluye las hojas de estilo de forma obligatoria, recomendando la eliminación de algunos elementos anteriores que se venían utilizando de manera incorrecta con demasiada frecuencia para definir la presentación a partir de etiquetas HTML.

Como en el caso del lenguaje HTML, las hojas de estilo tampoco están exentas de errores, por lo que también es necesario someter su código a procesos de evaluación. En el caso de las CSS también encontramos validadores específicos que nos permiten analizar automáticamente el código de nuestras CSS.

3.3.1. Tipos de errores

Al validar hojas de estilo podemos encontrarnos, entre otros, los siguientes tipos de errores de sintaxis:

  • Errores de tecleado o espacios innecesarios que pueden devolver errores de parseo, etc.

body{

color: yelow; /* Aquí un error de tecleo */

font-size: 15px;

}

Captura.JPG

  • Olvidar cerrar cada declaración con un punto y como final, o las declaraciones con la llave de cierre correspondiente.

body{

color: yellow /* Aquí falta un punto y coma */

font-size: 15px;

/* Aquí falta una llave de cierre */

h1{

color: black;

}

El resultado es el siguiente:

Captura.JPG

Como podemos observar en la imagen anterior, aparecen 3 errores diferentes que se solucionan con tan solo un par de cambios. Esto es algo habitual, en la mayoría de ocasiones, corregir una propiedad, añadir un punto y coma faltante o cualquier otra acción correctiva, puede resolver dos o más de los errores mostrados por las herramientas de validación.

Captura.JPG

  • Reglas implementadas mediante prefijos de diferentes navegadores (-moz, -webkit, etc.). A pesar de que no validan al no estar incluidas en la especificación CSS, no deberían considerarse errores ni dar problemas si se implementan adecuadamente. En el siguiente enlace, se muestran todas las propiedades CSS disponibles y si se soportan de manera nativa o mediante el prefijo correspondiente: https://www.w3schools.com/cssref/css3_browsersupport.asp

Captura.JPG

Actividad 2. Analiza una página que contenga hojas de estilo con el validador del W3C. Haz una captura de pantalla y redacta un párrafo comentando los errores detectados.

4. Servicios para la evaluación automática de la accesibilidad

Entendemos por accesibilidad web, la capacidad de acceso al contenido y funcionalidades de un sitio web por todo tipo de usuarios, independientemente de sus discapacidades o su contexto de navegación (calidad de la conexión a Internet, tipo de navegador, etc.), de modo que esos usuarios sean capaces de percibir, entender, navegar e interactuar con ese web. De esta definición se desprende que, a diferencia de lo que pueda parecer en un primer momento, la accesibilidad no sólo beneficia a personas con alguna de las discapacidades reconocidas: visual, auditiva, motriz y cognitiva, sino que también beneficia a otros grupos de usuarios como, por ejemplo, a las personas mayores, a las afectadas por una incapacidad transitoria, a las que acceden a Internet mediante equipos y conexiones limitadas o mediante navegadores obsoletos, usuarios con dificultad con el idioma o que precisan de materiales de lectura fácil e, incluso, a usuarios inexpertos en el uso de estas tecnologías.

La accesibilidad y la usabilidad son dos disciplinas que se refuerzan mutuamente. La usabilidad es una condición necesaria, pero no la única, para que un sitio web sea accesible. En este sentido, ambas disciplinas acaban compartiendo características y metodologías.

En el campo de la accesibilidad, la institución de referencia a nivel internacional es la WAI (Web Accessibility Initiative). La WAI, o Iniciativa para la Accesibilidad Web, es un organismo dependiente del W3C, cuyo objetivo es facilitar el acceso de las personas con discapacidad a la Web. Para ello, desarrolla estrategias, directrices y recursos para la evaluación y el rediseño de webs. Entre los diferentes recursos publicados por la WAI, destacan las Directrices de accesibilidad para el contenido web (Web Content Accessibility Guidelines, WCAG). Este documento marca las condiciones que ha de cumplir un contenido web para poder ser considerado accesible y proporciona mecanismos y estrategias para conseguirlo. Se trata del documento de referencia internacional en el campo de la accesibilidad, hasta el punto que su segunda versión, se ha llegado a convertir en una norma ISO (2012). En 2008, nueve años después de la publicación de la primera versión de las WCAG, la WAI publicó la versión 2.0 de sus directrices (WCAG 2.0), una versión recientemente actualizada (WCAG 2.1, 2018). Esta nueva versión se organiza a partir de 4 principios básicos: perceptibilidad (perceivable), operabilidad (operable), comprensibilidad (understandable) y robustez (robust). A su vez, cada uno de estos principios se desarrolla a partir de diferentes directrices que proporcionan los objetivos básicos que han de guiar a los diseñadores hacia una web accesible, concretándose en una lista de criterios de conformidad. Finalmente, se establecen tres niveles de conformidad: A (el más bajo), AA y AAA (el más alto), que determinan el nivel de accesibilidad final del producto evaluado. En la práctica la mayoría de webs que presumen de ser accesibles lo son hasta el nivel doble A. El nivel triple AAA conlleva en la mayoría de casos, grandes dificultades que llevan a los diseñadores a plantarse en el nivel anterior, o en cumplir sólo algunas de las recomendaciones de tipo triple A.

A nivel norteamericano, encontramos la Sección 508 de 2001. Una ley que determina las características que han de tener las páginas y aplicaciones web para ser accesibles y que es aplicable y obligatoria para todas las agencias federales de Estados Unidos. En la práctica, se trata de un texto muy parecido al de las WCAG. Cabe destacar que a nivel español tenemos la norma UNE 139803:2012 Requisitos de accesibilidad para contenidos en la Web, que es equivalente a las WCAG 2.0 y obligatoria para todas las webs y aplicaciones creadas por la administración pública española.

Existen varios servicios gratuitos para analizar la accesibilidad de una página web de manera automática. Algunos de ellos dividen los indicadores de análisis según los cuatro principios básicos propuestos por las WCAG, mientras que otros los agrupan según la directriz que los regula o incluso según el nivel de conformidad. En lo que todos coinciden es en utilizar como base para el análisis las WCAG del W3C. A diferencia de los validadores de código HTML y CSS, el W3C no ha desarrollado ninguna aplicación similar para evaluar la accesibilidad de un sitio web.

Como en el caso de la validación del código HTML, pero en este caso de una manera mucho más acusada, la evaluación automática sólo cubre una pequeña parte del análisis de la accesibilidad de una página web. En este sentido, la mayoría de las características sólo pueden ser evaluadas mediante un análisis “manual”. Por ejemplo, la correspondencia entre un icono y la idea representada, o la adecuación de un texto alternativo a la imagen que representa, sólo podrán ser valorados por un humano. Esto provoca que en los resultados que proporcionan los evaluadores automáticos suelen distinguirse dos tipos de errores. Por un lado, los errores que el sistema es capaz de detectar. Y por otro, una serie de avisos (warnings) en los que el sistema nos aconseja revisar de manera manual ciertos aspectos que no es capaz de evaluar.

A pesar de esta limitación evidente, los evaluadores de accesibilidad cumplen una función importante, especialmente cuando debemos analizar sitios web muy grandes en los que una evaluación manual de todos los indicadores implicaría muchas más horas de trabajo. También facilitan la revisión manual, al proporcionar información acerca de los elementos a verificar o instrucciones sobre cómo realizar esa verificación.

Entre los evaluadores de accesibilidad web disponibles en línea encontramos:

  • TAW:https://www.tawdis.net. Permite analizar la página según las directrices de la versión 2 de las WCAG. También nos permite seleccionar el nivel de análisis (A, AA o AAA) y las tecnologías soportadas, incluido JavaScript. Además, una vez realizado el análisis, podemos recibir un informe en nuestro correo electrónico.
  • WAVE: http://www.wave.webaim.org/index.jsp. Compatible con las WCAG 2 y los niveles A y AA. También con la Section 508 norteamericana.
  • HiSoftware Cynthia Says: http://www.cynthiasays.com. Realiza análisis de acuerdo a los tres niveles de las WCAG y a la Section 508. Los resultados se muestran siguiendo el esquema de las WCAG 2.0, indicando la herramienta cuáles son los criterios que debemos corregir o revisar.
  • Functional Accessibility Evaluator 2.0: https://fae.disability.illinois.edu. Esta herramienta de la University of Illinois at Urbana-Champaign, muestra los resultados organizados según el conjunto de reglas propios de la tecnología que estemos utilizando (HTML5 y WAI-ARIA o tecnologías anteriores), y también organizadas de acuerdo a las WCAG 2. Para cada error o advertencia muestra una gran cantidad de información adicional que nos ayuda a comprender el error y cómo solucionarlo.
  • Examinator: http://examinator.ws/. Compatible con las WCAG 2 y los niveles A, AA y AAA.

Veamos algunos fragmentos de informes ofrecidos por las herramientas WAVE y TAW:

Fig. 7. Ejemplo de informe proporcionado por WAVE.

Como podemos ver en la figura anterior y, a diferencia del resto de herramientas de análisis, WAVE muestra un informe totalmente visual. En él podemos diferenciar dos grandes zonas. La primera es una columna situada en la parte izquierda de la pantalla, en la que encontramos el compendio de errores y advertencias detectados. Por otro lado, el resto de la interfaz muestra la página analizada sobre la que se marcan mediante diferentes iconos la ubicación de esos errores y advertencias. Como podemos ver en el ejemplo, no todos los iconos muestran errores (color rojo) o advertencias (color amarillo), sino que también se muestran recursos propios de HTML5 o WAI-ARIA, o diferentes elementos estructurales presentes en el código. Si sólo nos interesa ver los errores, o cualquiera de estos grupos de iconos, podemos seleccionar la pestaña con forma de bandera situada a la izquierda del informe. Una vez seleccionada, podemos filtrar los resultados del informe para ver sólo los errores o alertas, o incluso los problemas de accesibilidad propios de los diferentes niveles de las WCAG 2 o la Section 508.

Fig. 8. Opciones de la herramienta WAVE.

Aquí te muestro un ejemplo de análisis de un sitio web con Wave.

En el caso de la herramienta TAW, tras lanzar el análisis se nos muestra un primer resumen de los resultados en el que podemos ver agrupados bajo las categorías “Problemas”, “Advertencias” y “No verificados”, los diferentes problemas de accesibilidad encontrados por la herramienta.

Fig. 9. Informe resumido proporcionado por TAW.

Mediante el enlace “informe detallado” que encontramos en la parte inferior de la pantalla, podemos acceder a la lista completa de incidencias agrupadas bajo los 4 principios de las WCAG (perceptible, operable, comprensible y robusto). Para cada criterio a verificar se nos muestra:

  • Una pequeña ayuda (aparece al pasar el ratón sobre el icono con la “i”)
  • Un enlace a la técnica propuesta por el W3C para solucionar ese problema (por ejemplo, H45, using longdesc)
  • El tipo de incidencia: error, advertencia o aspecto no verificado y que por lo tanto, necesita una verificación manual.
  • La cantidad de veces que aparece.
  • La línea o líneas en la que se encuentra presente. Funcionalidad limitada al informe enviado por correo electrónico.

Fig. 10. Informe completo de TAW.

Fig. 11. Informe de TAW enviado al correo electrónico en el que se observan las referencias a las líneas del código fuente en las cuales se ha detectado un error o advertencia.

 

Vistas las herramientas en línea y, como comentábamos antes, también encontramos varias aplicaciones de escritorio. Entre estas destaca:

También existen extensiones para diferentes navegadores como:

Una última alternativa es la aplicación de servidor Tanaguru. Se trata de una aplicación de software libre mediante la que es posible evaluar de forma automática webs completas. El proceso de revisión se hace de acuerdo a las WCAG 2.0, la Section 508 norteamericana y la AccessiWeb 2.1 francesa.

Al analizar la accesibilidad de un sitio web, no debemos olvidar que en la mayoría de sitios, además de páginas HTML, encontramos otros tipos de documentos como, por ejemplo, archivos en formato PDF. Para este tipo de documentos también existen herramientas de validación específicas como:

Un uso inadecuado del color también puede derivar en problemas de accesibilidad dentro de nuestros sitios web. Por ejemplo, un contraste insuficiente entre el texto y el fondo provocar que el contenido presente una baja legibilidad para cualquier usuario, pero especialmente, para aquellos con baja visión. Por otro lado, las personas con visión cromática deficiente, pueden presentar problemas a la hora de diferenciar determinados colores como el rojo y el verde, o el rojo y el azul, entre otras combinaciones. A continuación se muestran algunas herramientas que nos permiten analizar el nivel de contraste de nuestro contenido, informándonos en aquellos casos que estén por debajo del umbral requerido por las directrices de accesibilidad. También algunos simuladores que nos permiten experimentar las diferentes modalidades de visión cromática deficiente con el objetivo de detectar combinaciones de colores problemáticas en nuestro contenido.

Herramientas de análisis de contraste:

Herramientas de simulación de visión cromática deficiente:

Actividad 3. Analiza una misma página usando TAW y WAVE. Realiza diferentes capturas de pantalla de los resultados obtenidos y redacta un par de párrafos comentando algunos de los errores detectados y posibles inconsistencias -si las hay- entre las herramientas.

5. Servicios para la optimización del posicionamiento

El módulo 3 del Máster está dedicado de forma íntegra al posicionamiento y hay una unidad didáctica específica sobre herramientas para el posicionamiento. En este punto solo vamos a ver una selección de algunas herramientas que ofrecen datos útiles para el seguimiento de nuestras campañas de posicionamiento, en vistas a tener una primera visión general de este ámbito.

5.1. Analizadores de enlaces

Existen dos tipos de analizadores de enlaces. Por un lado, los que analizan los enlaces salientes, es decir, los que están presentes en la página analizada, con el objetivo de determinar si alguno de ellos está roto, así como el texto ancla utilizado. Y por otro lado, aquellos que evalúan los enlaces entrantes, es decir, los enlaces presentes en alguna página de Internet que apuntan a la página analizada. Ambos tipos de enlaces son importantes para el posicionamiento. Los enlaces entrantes o backlinks, son uno de los factores con mayor peso entre los que determinan el posicionamiento de un sitio web en los buscadores. Simplificando mucho, a mayor cantidad de enlaces entrantes y cuanto mayor sea la autoridad de los webs que nos enlazan, más posibilidades tendrá nuestra web de alcanzar una posición entre los primeros resultados. En cuanto a los enlaces salientes, es importante que éstos funcionen correctamente, especialmente aquellos enlaces salientes internos. Los enlaces internos son aquellos que apuntan a otras páginas dentro de nuestro sitio web. En el caso de que estos enlaces no funcionen nos encontraremos con los tradicionales mensajes de error 404. A mayor número de respuestas 404, peor experiencia de usuario y mayores posibilidades de recibir algún tipo de penalización por parte de los buscadores.

La integridad de los enlaces es un tema tan importante actualmente que muchos sistemas de gestión de contenidos (CMS) ya incorporan de manera nativa, o a través de plugins, scripts que se encargan de analizar periódicamente el buen funcionamiento de los enlaces presentes en nuestro web.

Fig. 12. Broken Link Checker es un plugin para WordPress que automáticamente y de forma periódica, nos informa del estado de los enlaces presentes en nuestro blog. Además ofrece otra información relevante como el tipo de error o el lugar en el que se encuentra el enlace (post, comentarios, etc.).

5.1.1 Analizadores de enlaces salientes

Actividad 4. Analiza las misma página en W3C Link Checker, Online Broken Link Checker y Link Valet. Haz una captura de pantalla en cada caso y redacta un párrafo comentado si los errores detectados son coincidentes.

5.1.2 Analizadores de enlaces entrantes

La inmensa mayoría de analizadores de enlaces pertenecen a servicios de pago más grandes que incorporan diversas funcionalidades relacionadas con las campañas de posicionamiento web. Algunos de estos servicios, permiten utilizar su herramienta de análisis de enlaces con algunos límites en cuanto a la cantidad de resultados mostrados, o el número de veces que podemos hacer la consulta desde una IP determinada. A continuación se muestran algunos de estos servicios:

El listado de enlaces entrantes a una página también puede comprobarse con la mayoría de buscadores estándar. En Google, Yahoo y Bing se usa el parámetro “link:”. Por ejemplo para conocer los enlaces hacia http://www.documentaciondigital.org deberíamos introducir en la caja de búsqueda:

link:www.documentaciondigital.org

Herramientas como Google Search Console y Google Analytics, abordadas en otras unidades del máster, también ofrecen información acerca de los enlaces que apuntan a nuestro dominio.

Actividad 5. Analiza la misma página con, al menos, dos de los analizadores de enlaces entrantes mencionados, realiza capturas de pantalla de los resultados y redacta un párrafo comentádolos.

5.2. Analizadores del contenido

Como en el caso de los enlaces entrantes, el contenido de una página web tiene especial interés en la mejora del posicionamiento. Cada página dentro de nuestro sitio web estará mejor o peor posicionada en relación a una determinada palabra clave que es el tema principal de dicha página. Esa palabra o palabras clave deberán aparecer en determinadas zonas de la página si queremos indicar a los buscadores su relevancia dentro del contenido. De esta manera, La palabra clave para la cual estamos optimizando una página web deberá aparecer en el título de la página (etiqueta <title>), en la meta etiqueta description, en los encabezados de nivel superior <h1>, <h2>…, en los primeros párrafos del contenido, estar marcada como importante a través de una etiqueta <strong> o incluso presentar una densidad adecuada a la longitud total del texto de esa página, entre otros factores.

En el mercado encontramos diferentes productos que son capaces de proporcionarnos esta información acerca de nuestro contenido y en base a ello, nos ofrecen sugerencias sobre cómo mejorar la redacción de ese contenido en vistas a mejorar el posicionamiento. Al tratarse de comprobaciones que en la mayoría de casos sí pueden hacerse de forma automática (aparición de una palabra propuesta en determinadas etiquetas, cálculo de la densidad, longitud de las metaetiquetas, etc.), estos programas pueden ser de gran ayuda para los encargados del SEO de un sitio web. Como pasa con el resto de evaluadores que hemos visto en este artículo, siempre quedan aspectos que ningún sistema es capaz de evaluar o por lo menos, de hacerlo de manera perfecta. Este es el caso, por ejemplo, de determinar si el contenido es de calidad o si muestra varias faltas de ortografía.

También, como en el caso de los analizadores de enlaces, la mayoría de CMS ya incorporan, bien de manera nativa, bien a través de extensiones o plugins, herramientas que nos ayudan a determinar si nuestra página cumple con los parámetros deseables para poder competir por un puesto entre los primeros resultados de búsqueda. Uno de los plugins más famosos y reconocidos es el de Yoast para WordPress. Se trata de un plugin que nos permite no sólo analizar el contenido de cada página o entrada, sino también gestionar los sitemaps, la canonicalización, editar nuestros ficheros robots.txt o .htaccess, entre otras muchas funciones.

Fig. 13. En la imagen se puede apreciar el módulo de SEO de Yoast para WordPress. Entre otras cosas nos informa de la aparición de la palabra clave definida en el campo “Focus Keyword” en aquellas secciones o elementos importantes (encabezado, título, URL, contenido y meta descripción) y nos permite editar dos de los campos más importantes en el SEO como el título y la meta descripción. También nos avisa de problemas, en este caso del uso de un título demasiado largo.

A continuación se muestran algunas herramientas online gratuitas que permiten analizar ciertos aspectos de nuestras páginas

  • Meta Tag Analyzer. Herramienta muy completa que analiza diferentes elementos como las meta etiquetas, el título, la frecuencia de aparición de las palabras clave formadas por 1, 2 y 3 palabras, etc.. También ofrece sugerencias para mejorar el resultado.
  • Keyword Density Tool. Analiza una página y realiza un informe sobre la frecuencia de aparición de las palabras que encuentra. Esta prestación está incluida en Meta Tag Analyzer.
  • SEO Book. Keyword Density Analysis. Ofrece un servicio similar a la herramienta anterior pero además nos proporciona algún dato más sobre cada palabra como por ejemplo, el porcentaje de aparición sobre el total de palabras. También nos permite exportar los resultados en un fichero CSV. Como en el caso anterior, su prestación principal está incluida en Meta Tag Analyzer. Es necesario crear un usuario para utilizarla.

Por lo que respecta a las herramientas de análisis de escritorio, destaca Screaming Frog, una aplicación de pago, pero que ofrece una interesante versión gratuita con un límite de análisis de 500 URL. Su funcionamiento es simple, indicamos el dominio a rastrear y la herramienta recupera todos los URL internos y externos. De cada una de las páginas recuperadas, Screaming Frog muestra el título, las etiquetas h1 y h2, las meta descripciones, las imágenes y su tamaño, los códigos de respuesta del servidor (404, 500, etc.). Estos resultados los podemos filtrar, por ejemplo, para ver sólo aquellas páginas sin meta descripción, o con una duplicada. Finalmente, podemos exportar en formato Excel o CSV, cualquier conjunto de datos obtenidos.

Captura.PNG

Fig. 14. Interfaz de Screaming Frog SEO Spider.

Actividad 6. Haz una búsqueda en Google sobre cualquier tema y a continuación analiza con Meta Tag Analyzer dos páginas: la que aparece en primer lugar en el listado de resultados y la que aparece en la posición número 100. Realiza dos capturas de pantalla y redacta un par de párrafos analizando si el primer resultado en Google obtiene menos errores en Meta Tag Analyzer que el resultado número 100.

5.3. Velocidad de carga y rendimiento del sitio

La velocidad de carga de un sitio web es uno de los factores contemplados por los buscadores a la hora de resolver el ranking de resultados. Más allá de su relación con el SEO, una velocidad de carga adecuada también redundará en una mejor experiencia de usuario.

Se trata, por lo tanto, de un aspecto a tener en cuenta, y que debemos no sólo revisar puntualmente, sino monitorizar como otros tantos detalles de nuestro sitio web, en vistas a mantener de manera estable un rendimiento adecuado a lo largo del tiempo.

PageSpeed Insights es un servicio de Google que analiza el contenido de una página web, proporcionando a continuación diferentes sugerencias para mejorar su velocidad de carga.

El servicio analiza el rendimiento de la página tanto en dispositivos móviles, como en equipos de sobremesa. Para ello, obtiene y procesa la URL del sitio dos veces, cada una de ellas con un agente de usuario de Google específico (smartphone y ordenador).

El resultado del análisis se traduce a una puntuación que va de 0 a 100 puntos, siendo 100 la valoración más alta.

Entre los factores que PageSpeed Insights tiene en cuenta encontramos todos aquellos relacionados con la configuración del servidor web, la estructura HTML de la página y el uso de recursos externos (hojas de estilo, JavaScript…). Conviene destacar que el rendimiento real de la página dependerá de todos estos factores, pero también de la conexión a Internet del usuario que accede al sitio.

Más allá de la puntuación, lo más interesante de la herramienta son los consejos de optimización que proporciona en relación a los problemas detectados. En este sentido, los diferentes parámetros analizados se organizan bajo tres categorías expresadas en forma de signos de exclamación rojo (aspectos que de solucionarse pueden implicar una mejora sustancial en el rendimiento de la página), amarillo (aspectos que de solucionarse pueden implicar una mejora menor en la página) y verde (aspectos analizados en los que no se han encontrado incidencias destacables).

pagespeed.PNG

Fig. 15. Fragmento del resultado de un análisis de PageSpeed Insights.

Otro servicio centrado en el análisis de la velocidad de carga de los sitios web es GTmetrix. Esta herramienta combina datos de Google PageSpeed Insights e YSlow para generar una puntuación final en base a diferentes puntos de comprobación (peso de las imágenes, formatos de archivo, implementación de JavaScript y CSS, etc.), así como una serie de recomendaciones orientadas a mejorar el rendimiento de nuestro sitio web.

5.4. Otros tipos de análisis relacionados con el posicionamiento

Existen otros muchos tipos de analizadores que permiten conocer la calidad de la página en aspectos complementarios. Hemos seleccionado tres de ellos por considerar que pueden resultar de mayor interés.

Propietario del nombre de dominio

Whois

http://whois.domaintools.com

Este servicio proporciona los datos de la persona física o jurídica que es propietaria del nombre de dominio indicado. A menudo estos datos están ocultos y no es posible obtener esta información.

Analizador del tráfico

Alexa

http://www.alexa.com/#traffic

Alexa hace una estimación del número de usuarios que han consultado la web analizada en los últimos meses (traffic rank). Es una estimación relativamente fiable basada en los usuarios que han decidido instalarse una barra de herramientas de Alexa que a su vez informa del tráfico de las páginas que se van consultando.

Servicios que ofrecen una evaluación global del posicionamiento
(Serán tratados en profundidad en el módulo de posicionamiento)

5.5. Directorio de recursos

En https://github.com/ralcarazm/seo/blob/master/recursos_herramientas_seo.md, podéis encontrar una lista de recursos y herramientas útiles para el desarrollo de estrategias SEO.

6. Mención de validación

Como hemos comentado en apartados anteriores, algunos servicios de validación proponen que, una vez superada la validación, se mencione de forma explícita en la página web que se ha superado dicha validación. Esta mención se suele hacer por medio de una insignia que se sitúa en la parte inferior de la página. Se trata una práctica especialmente interesante en la validación del código HTML y CSS y para mostrar el nivel de conformidad de la accesibilidad de nuestra página.

Level AA conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.0

Fig. 16. Mención de validación para el código XHTML, el código CSS y mención de cumplimiento del nivel de conformidad doble AA de accesibilidad web.

En algunos validadores, el icono puede tener además un enlace que permita al usuario acceder a la herramienta en cuestión. A veces, este acceso no es hacía su página inicial, sino directamente a la página de resultados del análisis de la página en cuestión. De este modo, el usuario puede constatar que realmente no hay errores y el autor puede confirmar, de manera fácil, que la ausencia de errores se mantiene cuando se realiza algún cambio.

No obstante, tras la aparición del estándar HTML5 no ha sido creado por parte del W3C ningún tipo de insignia específica, como sí lo tuvieron versiones anteriores como HTML4 o XHTML, o como la que aún mantiene CSS. En una entrevista a Mike Smith, uno de los ingenieros responsables de las herramientas de validación del W3C, se afirmó que no se crearía tal insignia, ya que el objetivo del W3C al ofrecer al público sus herramientas de validación, tenía que ver más con ofrecer tanto a usuarios, como a desarrolladores una herramienta que les permitiese detectar errores en su código, que con un mecanismo de certificación.

Fig. 17. En la imagen se pueden observar los iconos con enlace al resultado del análisis que el validador de CSS del W3C nos ofrece si nuestro código supera la validación.

7. Conclusiones

Existen otros muchos servicios de análisis, evaluación y validación disponibles en la red. Hemos intentado seleccionar aquellos que pueden resultar de mayor utilidad en el diseño y creación de páginas web. En su totalidad, se trata de herramientas que permiten mejorar el diseño inicial, así como facilitar tareas de mantenimiento y rediseño.

Es importante destacar que no siempre es fácil crear páginas web sin ningún error. Además de los errores que podemos cometer por desconocimiento de los estándares involucrados, las herramientas que utilizamos para crear nuestras páginas web también pueden generar errores si no están bien programadas. Este es el caso de las plantillas para los CMS, de las librerías y plugins que utilizamos en nuestros portales para crear galerías de imágenes, carruseles u otras funcionalidades interactivas, o incluso debido al contenido incrustado en nuestra página procedente de otros portales.

También podemos encontrarnos con situaciones en las que, tras corregir los errores detectados por un validador, aparezcan nuevos errores en ese mismo validador o en otros validadores, al estar todos estos estándares estrechamente relacionados.

En cualquier caso, se trata de herramientas muy útiles que nos permiten evaluar grandes cantidades de código y contenido que de otra manera implicaría muchísimas horas de dedicación.

8. Bibliografía y recursos

Sitios web

Jacobs, Ian. Sobre el World Wide Web Consortium. 2004.

http://www.w3c.es/Consorcio/about-w3c.html

Monografías y normas

W3C. Web Content Accessibility Guidelines (WCAG) 2.1. 2018.

https://www.w3.org/TR/WCAG21/.

Directorios de herramientas de análisis, evaluación y validación automáticos

Alcaraz Martínez, Rubén. Herramientas y recursos para el análisis y desarrollo de estrategias SEO. 2018.

http://rubenalcaraz.es/seo/herramientas-seo.html.

Carrera, Olga. “Mis validatores”. En: Usable y accesible.

http://www.usableyaccesible.com/recurso_misvalidadores.html

 

Free SEO tools from WebConfs.com

Free SEO Tools from WebConfs.com

Meiert, Jens. UITest.com: web development tools.

http://uitest.com/en/analysis/

Search engine optimization tools.

http://tools.seobook.com/

W3C. Complete list of web accessibility evaluation tools.

http://www.w3.org/WAI/ER/tools/complete

W3C. W3C developers.

http://www.w3.org/QA/Tools/


© Texto: autor/es del documento

© Presente edición: Máster en Información Digital. UPF Barcelona School of Management

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

Artículo 1.25 Introducción a Javascript

Artículo 1.25 Introducción a JavaScript

Rubén Alcaraz

Rubén Alcaraz. Artículo 1.25 Introducción a JavaScript. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Información Digital. Barcelona: UPF Barcelona School of Management.


 

Sumario

1.Introducción

2. JavaScript

2.1. JavaScript en un documento HTML

2.2. Sintaxis y elementos principales

2.2.1. Variables

2.2.2 Operadores

2.3. Estructuras de control de flujo

2.3.1. Estructura if

2.3.2 Estructura if… else

2.3.3 Estructura for

2.3.4 Estructura while

2.3.5 Estructura do while

2.4 Funciones

2.5 Métodos

2.6. Objetos predefinidos del lenguaje

2.6.1. El objeto String

2.6.2. El objeto Date

2.6.3. El objeto Array

2.6.4. El objeto Math

2.6. Bibliotecas y APIs de JavaScript

3. JavaScript y SEO

4. JavaScript y usabilidad

5. JavaScript y accesibilidad

6. Conclusiones

7.Bibliografía


Nota sobre la evaluación: bien de forma intercalada en el texto, bien al final del artículo, encontrará el enunciado de una o diversas actividades. Para superar esta unidad didáctica deberá realizar estas actividades redactando un informe con comentarios y si resulta pertinente una captura de pantalla de cada actividad para ilustrar su realización. Para entregar este informe deberá crear un documento en formato PDF y usar el espacio de entrega del aula virtual perteneciente a esta unidad didáctica.

1. Introducción

JavaScript es uno de los lenguajes de programación más utilizados para añadir dinamismo a las páginas web. Una página web dinámica es aquella que incorpora ciertos efectos como elementos que aparecen y desaparecen, animaciones, eventos que se disparan cuando el usuario pulsa un botón, etc. En el manejo de formularios, JavaScript también es útil para la validación de los datos introducidos por el usuario, procurando de esta manera, que los datos que llegan al servidor sean correctos, con independencia de posibles segundas validaciones que se puedan realizar en este otro entorno. En definitiva, podemos asegurar que, actualmente, es muy difícil encontrar páginas web en las que JavaScript no esté presente de una u otra manera.

El objetivo de esta unidad no es que el estudiante aprenda a programar en JavaScript, cosa a la que podríamos dedicar todo un curso, pero sí realizar un primer acercamiento a este lenguaje de programación, ser capaz de identificar sus principales elementos, conocer la sintaxis básica y practicar con algunos de los principales métodos y funciones del lenguaje. Pero, sobre todo, saber cuáles son sus implicaciones en las distintas disciplinas tratadas en el máster (SEO, usabilidad, accesibilidad…). Para aquellos alumnos que deseen profundizar en el tema, al final de la unidad se propone bibliografía especializada y una selección de tutoriales gratuitos en acceso abierto que no son obligatorios para superar la unidad.

Los ejemplos de código vistos a lo largo de la unidad pueden descargase de: https://drive.google.com/file/d/0B1EYQqPQ5CqNRk1fX1VNNUVBLWs/view?usp=sharing

Para visualizarlos, simplemente deberéis abrir los diferentes documentos HTML en vuestro navegador.

2. JavaScript

JavaScript es un lenguaje de programación definido como orientado a objetos basado en prototipos (classless, o no basado en clases como otros lenguajes como Java). Los lenguajes de programación orientados a objetos usan los objetos en sus interacciones para diseñar aplicaciones y programas informáticos. Un objeto es una unidad dentro de un programa informático que consta de un estado y de un comportamiento, que a su vez constan respectivamente de datos almacenados y de tareas realizables durante el tiempo de ejecución. En JavaScript, todos los elementos se tratan como objetos (los datos, las variables, las funciones, etc.).

Javascript tiene una sintaxis parecida a C y adopta nombres y convenciones de Java, ambos también lenguajes de programación. A menudo, JavaScript es confundido con Java. Aunque los dos presentan una sintaxis parecida y en ambos casos están orientados a objetos, su propósito y ámbito de aplicación son diferentes. Java, como lenguaje compilado, encuentra su uso más habitual en el desarrollo de aplicaciones que se ejecutan en el servidor o en entornos de escritorio. En cambio, JavaScript se ejecuta normalmente en el lado del cliente, es decir en el navegador del usuario. Esto permite a los programadores crear pequeños programas, también conocidos como scripts, capaces de consultar las propiedades del navegador, inspeccionar y modificar la estructura de la página que se ha cargado, o reaccionar a eventos disparados por el usuario (por ejemplo, al pulsar un botón, al rellenar o enviar un formulario, al arrastrar un objeto, etc.), sin necesidad de enviar datos al servidor de origen. Todo esto añade dinamismo a las páginas web estáticas creadas con HTML. Aunque como hemos comentado anteriormente JavaScript se utiliza fundamentalmente en el lado del cliente, en los últimos años el uso de este lenguaje de programación también se ha empezado a utilizar en el lado del servidor gracias a frameworkscomo Node.js o RingoJS.

El DOM (Document Object Model), responsabilidad del W3C, es una de las tecnologías que más ha aportado a la creación de páginas web dinámicas. Esta API permite a los programadores acceder a las páginas HTML y a sus elementos para manipularlos. En la actualidad, se puede utilizar desde prácticamente cualquier lenguaje de programación (PHP, JavaScript, Java, etc.). En la práctica, manipular el DOM permite a los programadores transformar las páginas estáticas, por ejemplo, añadiendo nuevos elementos cuando ésta carga, modificando elementos cuando el usuario interactúa con ellos o cuando se cumple una condición determinada (cada 5 segundos, cuando el valor de un formulario no es correcto, etc.).

2.1. JavaScript en un documento HTML

La integración de JavaScript en un documento HTML es muy flexible. Tanto, que existen tres maneras diferentes de incluirlo en nuestras páginas web.

La primera de estas maneras consiste en incluir el programa escrito en JavaScript dentro del mismo documento HTML. Para ello, debemos utilizar la etiqueta , la cual contendrá el código de nuestro programa. Esta etiqueta se puede incluir en cualquier sección de la página, aunque lo más recomendable es ubicarla en la cabecera del documento. En los últimos años, se ha tendido a ubicar ciertos programas en la parte inferior del documento, justo antes de la etiqueta de cierre , con el objetivo de optimizar el tiempo de carga de las páginas. Se trata de una buena solución, aunque se ha de tener en cuenta que, en algunos casos, es posible que el hecho de que los elementos HTML carguen antes que el programa puede provocar que éste no funcione hasta que la página cargue totalmente.

En el ejemplo siguiente, podemos ver la integración de código JavaScript dentro de la cabecera del documento HTML, entre las etiquetas <script type=”text/javascript”></script>:

 

<!DOCTYPE html>

<html lang=”es”>

<head>

<script type=“text/javascript”>

function miFuncion() {

document.getElementById(“demo”).innerHTML = “Aquí un nuevo contenido!”;

}

</script>

</head>

<body>

<p id=“demo”>Pulsa el botón para cambiar el contenido de esta frase.</p>

<button onclick=“miFuncion()”>Pulsa!</button>

</body>

</html>

 

El ejemplo anterior puede probarse en la siguiente dirección: https://jsfiddle.net/ralcaraz/z0gkn6h2/

 

La segunda manera de añadir un programa en JavaScript a nuestra página es escribiendo el código de nuestro programa en un fichero externo con extensión .js, y enlazarlo a nuestro documento mediante una etiqueta <script>. Como en el caso anterior, lo más habitual es encontrar estas etiquetas en la cabecera del documento, aunque también se pueden ubicar en otras partes del mismo.

 

<script type=“text/javascript” src=”js/mi-programa.js”></script>

Por último, también es posible incluir JavaScript dentro de un elemento HTML. Para ello se utilizan diferentes eventos que definidos en un elemento HTML, y asociados a una determinada función, crean un efecto cuando el usuario interactúa con ese elemento.

<button onclick=“FuncionX()”>Pulsa</button>

En el siguiente vídeo te explico cómo añadir JavaScript a una página HTML.

2.2. Sintaxis y elementos principales

La sintaxis de un lenguaje de programación es el conjunto de reglas a seguir cuando escribimos un programa para que éste pueda considerarse correcto. Como hemos comentado anteriormente, la sintaxis de JavaScript es muy similar a la de otros lenguajes de programación. Sus principales características son:

  • No define el tipo de variables. Es decir, no necesitamos indicar qué tipo de datos almacena cada una de ellas.
  • Es sensible a mayúsculas y minúsculas (“var num”, “var Num” i “var NUM”) serán interpretadas como tres variables diferentes).
  • No tiene en cuenta los espacios en blanco ni las nuevas líneas.
  • Admite comentarios. Para escribir un comentario de una línea usaremos // texto del comentario, y /* texto del comentario */ para los comentarios de varias líneas.

2.2.1. Variables

Una variable es un elemento encargado de almacenar un valor en un espacio de memoria. Un valor al cual podremos hacer referencia a partir del nombre con el que hayamos definido esa variable. En JavaScript, las variables se crean mediante la palabra reservada “var”. Por ejemplo:

var numeroA = 2;

var numeroB = 3;

En el ejemplo anterior, observamos dos variables “numeroA” y “numeroB”, a las que hemos asignado los valores numéricos 2 y 3 respectivamente. Para acceder a ese valor y utilizarlo, basta con referirnos a ellas mediante su nombre. Por ejemplo:

var suma = numeroA + numeroB

El valor de la variable “suma” es 5.

Entre los diferentes tipos de variables encontramos:

  • Variables numéricas encargadas de almacenar valores numéricos enteros o decimales (se expresan con puntos, no con comas). Por ejemplo:

var precio = 20;

var precio = 19.95;

  • Cadenas de texto en las que podemos almacenar caracteres, palabras o frases. Por ejemplo:

var tituloLibro = “La ventana siniestra”;

  • Arrays, también llamados vectores o matrices, que son colecciones de variables del mismo tipo o diferente. Son una alternativa a la creación de múltiples variables para almacenar varios valores relacionados. Por ejemplo:

var dias = [“Lunes”, “Martes”, “Miércoles”, “Jueves”, “Viernes”, “Sábado”, “Domingo”];

  • Booleanos que almacenan el valor true o false y pueden servir, por ejemplo, para definir estados (encendido/apagado, usuario registrado/usuario no registrado, etc.). Por ejemplo:

 

var esSocio = true;

El acceso a uno de los valores de un array es algo diferente al del resto de variables. En este caso, además de referirnos a él mediante su nombre, también debemos indicar la posición del valor en el índice del array. Por ejemplo, para acceder al valor “lunes” del ejemplo anterior, usaremos “dias[0];”, para acceder al valor martes, usaremos “dias[1];”, y así sucesivamente. Es importante recordar que la primera posición del índice es la posición 0 y no la posición 1.

Por ejemplo, para acceder al valor Miércoles del siguiente array:

var dias = [“Lunes”, “Martes”, “Miércoles”, “Jueves”, “Viernes”, “Sábado”, “Domingo”];

 

Utilizaremos:

dias[2];

 

Si lo que queremos es recorrer todo el array para extraer todos sus valores, debemos utilizar un bucle (explicado con más detalle en el apartado 2.3.3 de este documento):

for (i = 0; i < dias.length; i++){

document.write(dias[i] + ”
“);

}

2.2.2 Operadores

Los operadores sirven para manipular el valor de las variables, realizar operaciones con ellas o compararlas. Algunos de los operadores disponibles en JavaScript son:

  • Asignación (=) con el que podemos guardar un valor en una variable. No confundir con el igual que en JavaScript se expresa mediante un doble igual “==”. Por ejemplo:

var precio = 20;

  • Incremento y decremento (++ y –) que se utiliza para incrementar o decrementar el valor de una variable. Por ejemplo:

var precio = 20;

++precio; //el resultado de precio es 21

  • Matemáticos (+, -, *, /) con los que podemos sumar, restar, multiplicar y dividir. Por ejemplo:

var numero1 = 30;

var numero2 = 2;

var resultado = numero1 / numero2; //el valor de resultado es 15

El operador “+” también se utiliza para concatenar cadenas de texto con otros elementos como, por ejemplo, variables. Por ejemplo:

var precio = 20;

var producto = “Camiseta Star Wars”;

var mensaje = “La ” + producto + ” tiene un coste de ” + precio +”€”;

En el ejemplo anterior, creamos una variable (precio) para almacenar un valor numérico (20). Otra (producto) para almacenar una cadena de caracteres (camiseta Star Wars). Y una tercera en la que concatenamos una nueva cadena de caracteres con las variables anteriores. El resultado por pantalla, si imprimieramos la variable mensaje sería:

La Camiseta Star Wars tiene un coste de 20

donde los valores “Camiseta Star Wars” y “20” se obtienen de sus respectivas variables y se concatenan con el texto almacenado en la variable “mensaje”.

  • Relacionales (>, =, <=, ==, !=) que equivalen a mayor que, menor que, mayor o igual que, menor o igual que, igual y distinto de. Por ejemplo:

var numero1 = 30;

var numero2 = 2;

var resultado = numero1 > numero2; //el valor del resultado es true

  • Lógicos (!, &&, ||) que equivalen a NOT (negación o exclusión), AND (intersección) y OR (unión) respectivamente. Por ejemplo:

var numero1 = 30;

var numero2 = 2;

var numero3 = 10;

numero1 > numero2 && numero1 > numero3 //devuelve true

o lo que es lo mismo:

numero1 es mayor que numero2 AND (Y) numero1 es mayor que numero3.

En el siguiente vídeo te muestro algunos ejemplos del uso de variables.

2.3. Estructuras de control de flujo

Las estructuras de control de flujo nos permiten controlar el flujo de ejecución de un programa, ejecutando unas acciones u otras. A continuación, veremos algunas de las más importantes.

2.3.1. Estructura if

Utilizada para tomar decisiones en función de una condición dada. Su sintaxis es:

if(condición) {
código a ejecutar
}

En el siguiente ejemplo, se declara una variable (x) a la que se le asigna el valor 10. A continuación, se inicia una estructura if en la que, si 12 es mayor que el valor almacenado en la variable x, el programa devolverá el mensaje “12 es mayor que [el valor de x]”. Para imprimir el mensaje en pantalla, se utiliza el método write del objeto document.

 

var x = 10;

if(12 > x){

document.write(“12 es mayor que “+x);

}

Si queremos que el programa sea algo más dinámico, podemos pedir al usuario que nos proporcione el mismo el valor de x. Para ello, utilizamos el método prompt del objeto window, con el objetivo de almacenar en la variable x el valor introducido por el usuario. En este caso, pediremos la nota de un alumno, y evaluaremos la condición para determinar si ha aprobado o no. Es decir, si la nota es mayor a 5.

 

var x = prompt(“Introduce la nota del alumno”);

if(x > 5){

document.write(“El alumno ha aprobado con un “+x);

}

Captura.PNG

Fig. 2. Como resultado del uso del método prompt, al usuario le aparecerá un pequeño formulario en una ventana modal en el que podrá introducir datos.

Esta estructura se puede complicar un poco más añadiendo nuevas condiciones. A continuación, podemos ver un ejemplo en el que se controla también la posibilidad de que la nota introducida sea menor a 5.

 

var x = prompt(“Introduce la nota del alumno”);

if(x > 5){

document.write(“El alumno ha aprobado con un “+x);

}

if(x < 5){

document.write(“El alumno ha suspendido con un “+x);

}

2.3.2 Estructura if… else

Continuando con el ejemplo anterior, si la nota introducida por el usuario fuera igual a 5, el programa no haría nada. Generalmente, en cualquier programa necesitaremos controlar todas las posibilidades que pudieran darse. La estructura if… else, nos permite trabajar con decisiones del tipo “si se cumple la condición, pasa esto; si no se cumple, pasa esto otro”.

var x = prompt(“Introduce la nota del alumno”);

if(x > 5 || x == 5){

document.write(“El alumno ha aprobado con un “+x);

}

else{

document.write(“El alumno ha suspendido con un “+x);

}

En el ejemplo anterior, también utilizamos un OR (x>5 || x==5) en el if, para mostrar el mensaje de aprobado tanto si la nota es superior o igual (==) a 5. En cualquier otro caso, el programa ejecutará la sentencia del else. La primera condición se podría simplificar con el uso del “>=” (mayor o igual).

En el caso de que sea necesario, podemos añadir nuevas condiciones utilizando una cláusula variante el “else if”. Por ejemplo:

var sueldo = prompt(“Introduce el sueldo del trabajador”);

if(x > 1000){

document.write(“El sueldo del trabajador es superior a 1000€”);

}

else if (x < 1000){

document.write(“El sueldo del trabajador es inferior a 1000€”);

}else{

document.write(“El sueldo del trabajador es igual a 1000€”);

}

2.3.3 Estructura for

Cuando lo que queremos es ejecutar una sentencia un determinado número de veces, lo que necesitamos es un bucle. En un bucle for, mientras la condición a evaluar se cumpla, la ejecución de la/s instrucciones que se encuentran dentro del bucle, se ejecutarán en cada iteración (repetición del proceso). Su sintaxis es:

for(inicialización del contador; condición a evaluar; incremento del contador) {

}

Por ejemplo:

 

for(i = 1; i < 5; i++){

document.write(“

Iteración número “+i+”

“);

}

En el ejemplo anterior, inicializamos la variable i con el valor 1. A continuación, establecemos como condición para que el bucle se siga ejecutando, que el valor de i sea inferior a 5. Finalmente, incrementamos el valor de i en 1 (i++). Mientras la condición sea cierta, se irá ejecutando el código ubicado dentro de las llaves. En la siguiente imagen podemos ver el resultado de nuestro bucle.

Captura.PNG

Fig. 3. Resultado del bucle for visto en el navegador.

2.3.4 Estructura while

Otro tipo de bucle es el bucle while. Aunque con un bucle while podríamos realizar lo mismo visto con el bucle for, lo normal es utilizar este otro tipo de bucle en aquellas situaciones en las que no sabemos cuándo finalizará el bucle o, en otras palabras, cuántas iteraciones tendrá.

Veamos el ejemplo anterior, implementado con un bucle while:

 

var i = 1;

while(i < 5){

document.write(“

Iteración número “+i+”

“);

i++;

}

En el siguiente ejemplo, mientras el valor de “e” sea igual a “n”, el programa continuará preguntando al usuario si quiere cerrar o no la aplicación. Cuando introduzca una “s”, el bucle finalizará, y con él el programa. Es decir, el bucle no finalizará en un número concreto de iteraciones, sino cuando el usuario así lo indique.

 

var e = “n”;

while(e == “n”){

var e = prompt(“¿Desea cerrar la aplicación? s/n”);

}

2.3.5 Estructura do while

El bucle do while es muy similar al anterior. La diferencia entre ambos radica en que, en el caso del bucle do while, la condición se ejecuta al menos una vez. Supongamos que en el ejemplo anterior el valor de la variable e, lo hubiésemos inicializado en blanco o con una letra diferente a “s” o “n”. En tal caso, al no cumplirse la condición del while (e == “n”) nunca se llegaría a realizar la pregunta. En cambio, con un bucle do while sí porque la evaluación de la condición se realiza al final. Veamos un ejemplo:

 

var e = “”;

do{

var e = prompt(“¿Desea cerrar la aplicación? s/n”);

}while(e == “n”);

 

En el siguiente vídeo te muestro diferentes ejemplos de estructuras de control de flujo.

2.4 Funciones

Una función es un bloque de código pensado para ejecutar una acción. Las funciones se ejecutan cuando algo las “invoca” (un botón pulsado, la carga de una página HTML, un enlace, etc.). Las funciones en JavaScript se definen mediante la palabra reservada “function”, seguida del nombre de la función y un paréntesis de apertura y otro de cierre en el que se podrán incluir, si es necesario, parámetros para esa función. El último elemento de una función es el código que deben ejecutar dentro de dos { }. Su definición formal es:

function nombre_de_la_funcion() {
… // aquí dentro el código que debe ejecutar la función
}

Dentro de la función podemos encontrar variables, operadores, etc., con los que deseamos hacer algo. En el momento que invocamos la función, todo lo que se encuentra en su interior se ejecutará.

function sumar(){

var numero1 = 30;

var numero2 = 2;

var resultado = numero1 + numero2;

alert(“El resultado es ” + resultado);

}

En el ejemplo anterior, cada vez que se ejecute la función sumar, se sumarán los valores de las variables “numero1” y “numero2”. A continuación, se mostrará mediante el método “alert” (del que hablaremos más adelante) la cadena de caracteres “El resultado es ”, seguida (concatenada) del valor de la variable “resultado” (32).

Si asociamos esa función, por ejemplo, a un evento onload en la etiqueta , la función se ejecutará justo en el momento en que cargue la página HTML Por ejemplo:

La idea detrás de una función es la de disponer de una porción de código que hace algo, y que podemos reutilizar en diferentes situaciones, en lugar de tener que escribir todas las instrucciones una y otra vez de manera recurrente.

En el siguiente vídeo te muestro algunos ejemplos de funciones.

2.5 Métodos

Al combinar funciones con objetos, obtenemos los métodos. Los métodos son acciones que ejecutamos sobre los datos de un objeto.

Además de los objetos que podemos crear en nuestro programa, el intérprete de JavaScript que incorporan todos los navegadores modernos (Firefox, Chrome, Microsoft Edge, Opera…) crea una serie de objetos que podemos utilizar al programar en JavaScript. De entre esos objetos generados automáticamente destacan los objetos Window y Document. El objeto Window es el objeto principal del que cuelgan el resto de objetos. Y el objeto Document es el contenedor de todos los objetos que hemos insertado en la página web creada (imágenes, enlaces, formularios, párrafos, etc.).

http://docs.oracle.com/cd/E19957-01/816-6409-10/graphics/nav_hier.gif

Fig. 1. Jerarquía de los objetos creados por el navegador al cargar una página web.

Cada uno de los objetos que podemos ver en el diagrama anterior, tienen asignados una serie de métodos. Por ejemplo, para el objeto Window, encontramos el método “alert()”, que nos permite mostrar el típico cuadro de alerta en el navegador, o el método “print()” que nos permite imprimir el contenido de la página activa, entre otros muchos. En el caso del objeto Document, disponemos de métodos como el “getElementById()”, que nos permite hacer referencia a un elemento HTML (<p>, <div>, <span>, etc.) a partir de su ID, para luego hacer con él otras cosas, o el método “document.createElement()”, que nos permite añadir dinámicamente, nuevos elementos a nuestra página HTML cuando el usuario lo activa.

 

<!DOCTYPE html>

<html lang=”ca”>

<head>

<script type=“text/javascript”>

function miFuncion(){

document.getElementById(“demo”).innerHTML = “Aquí un nuevo contenido”;

}

</script>

</head>

<body>

<p id=“demo”>Pulsa el botón para cambiar el contenido de esta frase.</p>

<button onclick=“miFuncion()”>Pulsa!</button>

</body>

</html>

En el fragmento de código anterior, podemos observar un ejemplo de uso del método “getElementById()”, en el que una vez identificado un párrafo con el id con valor “demo”, se le asocia una función que a través de la propiedad “innerHTML” permite establecer dinámicamente un nuevo contenido para él.

Es posible ver el ejemplo en acción en el siguiente URL:

http://jsfiddle.net/ralcaraz/z0gkn6h2/embedded/result/

Los diferentes elementos HTML también disponen de una colección de métodos propia, que nos permite interactuar con ellos.

Además de los métodos definidos en el lenguaje JavaScript, es posible crear nuevos métodos según nuestras necesidades.

Actividad 1. Analiza el siguiente programa escrito en JavaScript y localiza en él los siguientes elementos:

  • Una variable.
  • Una función.
  • Un operador.
  • Un método.

¿Qué crees que realizará la función?

function Sumar(){

var x = 5;

document.getElementById(“suma”).innerHTML = x + 2;

}

 

2.6. Objetos predefinidos del lenguaje

Como decíamos anteriormente, un objeto es un tipo estructurado de dato que contiene propiedades y métodos. Las propiedades son valores asociados al objeto y los métodos son acciones que pueden ser evaluadas sobre los objetos.

Más allá de los objeto propios del DOM, JavaScript también cuenta con otros objetos predefinidos. Estos son:

  • String (cadenas de texto)
  • Date (fechas)
  • Array (vectores o arreglos)
  • Boolean (lógicos)
  • Math (matemáticos)
  • RegExp (expresiones regulares)

2.6.1. El objeto String

El objeto String se utiliza para manipular cadenas de texto. Todas las cadenas de texto en JavaScript se consideran un objeto String, por lo que no es necesario ningún proceso específico para crearlos.

Lista de propiedades:

  • length: devuelve la longitud del objeto String.

var texto = “Lorem ipsum”;

var longitud = texto.length;

document.write(longitud);

 

El programa anterior, devuelve la longitud del string almacenado en la variable “texto”. Es decir, 11.

Lista de métodos:

  • toLowerCase(): devuelve la cadena sobre la que se instancia el método poniendo en minúscula el objeto String.

var texto = “LOREM IPSUM”;

var minus = texto.toLowerCase();

document.write(minus);

 

El programa anterior, devuelve: lorem ipsum.

  • toUpperCase(): devuelve la cadena sobre la que se instancia el método poniendo en mayúscula el objeto String.

var texto = “lorem ipsum”;

var mayus = texto.toUpperCase();

document.write(mayus);

 

El programa anterior, devuelve: LOREM IPSUM.

  • concat(): concatena el objeto String con las diferentes cadenas de texto que se pasen como argumentos del método.

var texto = “lorem ipsum”;

var texto2 = “dolor sit”;

var concatenado = texto.concat(texto2);

document.write(concatenado);

 

El programa anterior devuelve: lorem ipsumdolor sit.

  • charAt(): devuelve el carácter del objeto String que ocupa la posición en el índice indicada como argumento del método. Es importante recordar que el índice empieza por 0.

var texto = “lorem ipsum”;

var posicion = texto.charAt(2);

document.write(posicion);

 

El programa devuelve: r.

  • indexOf(): devuelve la posición de la primera ocurrencia de la cadena de texto pasada como argumento. Es posible indicar como segundo argumento la posición en el índice que indica al programa desde dónde debe empezar a buscar. Por defecto, empieza a buscar desde el inicio.

var texto = “lorem ipsum ipsum”;

var indice = texto.indexOf(“ipsum”);

document.write(indice);

 

El programa devuelve: 6 (posición en la que empieza la primera palabra ipsum).

var texto = “lorem ipsum ipsum”;

var indice = texto.indexOf(“ipsum”,7);

document.write(indice);

 

El programa devuelve: 12 (posición en la que empieza la segunda palabra ipsum).

  • lastIndexOf(): devuelve la posición de la última ocurrencia de la cadena de texto pasada como argumento. Es posible indicar como segundo argumento la posición en el índice que indica al programa desde dónde debe empezar a buscar. Por defecto, empieza a buscar desde el final.

var texto = “lorem ipsum ipsum”;

var indice = texto.lastIndexOf(“ipsum”);

document.write(indice);

 

El programa devuelve: 12 (posición en la que empieza la segunda palabra ipsum).

var texto = “lorem ipsum ipsum”;

var indice = texto.lastIndexOf(“ipsum”,7);

document.write(indice);

 

El programa devuelve: 6 (posición en la que empieza la primera palabra ipsum).

 

  • substring(): devuelve la subcadena del objeto String desde la posición dada como primer argumento hasta la posición dada como segundo argumento. Si no se indica un segundo argumento se considera como tal la posición final.

var texto = “lorem ipsum”;

var subcadena = texto.substring(2,5);

document.write(subcadena);

 

El programa devuelve: rem.

 

  • substr(): Devuelve la subcadena del objeto String desde la posición dada por inicio y con la longitud dada.

var texto = “lorem ipsum”;

var subcadena = texto.substr(0,5);

document.write(subcadena);

 

El programa devuelve: lorem.

 

  • replace(): devuelve la cadena de texto obtenida, reemplazando la primera ocurrencia coincidente con el primer argumento por la cadena de texto indicada como segundo argumento.

var texto = “lorem ipsum”;

var nuevoTexto = texto.replace(“lorem”,”ipsum”);

document.write(nuevoTexto);

 

El programa devuelve: ipsum ipsum.

 

  • split(): devuelve un array de subcadenas de texto resultado de la división en trozos en objeto String.

var texto = “lorem ipsum dolor sit amet”;

var resultado = texto.split(” “);

document.write(resultado);

 

El programa devuelve: lorem,ipsum,dolor,sit,amet.

var texto = “lorem ipsum dolor sit amet”;

var resultado = texto.split(“o”);

document.write(resultado);

 

El programa devuelve: l,rem ipsum d,l,r sit amet.

2.6.2. El objeto Date

El objeto Date se utiliza para trabajar con fechas en JavaScript. Si lo instanciamos (“new Date()”) toma como valor la fecha actual. Por ejemplo:

var fecha = new Date();

document.write(fecha);

El programa devuelve: Wed Oct 12 2016 22:28:27 GMT+0200 (Hora de verano romance)

 

Lista de métodos:

  • getFullYear(), getMonth(), getDay(), getHours(), getMinutes(), getSeconds(): devuelven el año completo, mes, dia, horas, minutos y segundos del objeto Date(), respectivamente.

var fecha = new Date();

var hora = fecha.getHours();

document.write(hora);

 

Si la fecha fuese igual a la obtenida anteriormente, el programa devuelve: 22.

  • setFullYear(), setMonth(), setDate(), setHours(), SetMinutes(), setSecontds(): cambia el año, mes, día del mes, hora, minutos y segundos del objeto Date().

var fecha = new Date();

fecha.setHours(23);

document.write(fecha);

El programa devuelve Wed Oct 12 2016 23:28:27 GMT+0200 (Hora de verano romance).

2.6.3. El objeto Array

El objeto Array se utiliza para almacenar un conjunto de valores en una misma variable. La construcción del objeto se puede realizar de cualquier de las siguientes formas:

  • new Array() (vacío y sin indicar el tamaño del array).
    • Por ejemplo: var datos = new Array();
  • new Array(5) (indicando el tamaño del array)
  • new Array(2,4,6,8,10…) (indicando los valores que almacena el array)

Lista de propiedades:

  • length: devuelve el tamaño del array. También, aunque menos utilizado, permite modificar el tamaño del array.

var alumnos = new Array(“Antonio”,”Luisa”,”Elisabet”,”Pablo”);

var tamano = alumnos.length;

document.write(tamano);

 

El programa devuelve: 4.

Lista de métodos:

  • concat(): concatena los diferentes arrays que se pasan como argumentos.

var grupoA = new Array(“Antonio”,”Luisa”);

var grupoB = new Array(“Elisabet”,”Pablo”);

var grupoTotal = grupoA.concat(grupoB);

document.write(grupoTotal);

 

El programa devuelve: Antonio,Luisa,Elisabet,Pablo.

  • pop(): elimina y devuelve el último elemento del objeto Array.

var alumnos = new Array(“Antonio”,”Luisa”,”Elisabet”,”Pablo”);

var alumnoEliminado = alumnos.pop();

document.write(alumnoEliminado);

document.write(alumnos);

 

El programa devuelve:

  • Pablo
  • Antonio,Luisa,Elisabet

 

  • push(): añade en la última posición del objeto array los elementos que se pasan como argumentos.

var alumnos = new Array(“Antonio”,”Luisa”,”Elisabet”,”Pablo”);

alumnos.push(“Enrique”,”Marta”);

document.write(alumnos);

 

El programa devuelve: Antonio,Luisa,Elisabet,Pablo,Enrique,Marta

  • shift(): elimina y devuelve el primer elemento del objeto Array.

var alumnos = new Array(“Antonio”,”Luisa”,”Elisabet”,”Pablo”);

var alumnoEliminado = alumnos.shift();

document.write(alumnos);

document.write(alumnoEliminado);

 

Al final del programa, la variable alumnos es igual a: Luisa,Elisabet,Pablo, mientras que la variable alumnoEliminado almacena el nombre del alumno borrado: Antonio.

  • unshift(): añade en la primera posición del objeto array los elementos que se pasan como argumentos.

var alumnos = new Array(“Antonio”,”Luisa”,”Elisabet”,”Pablo”);

alumnos.unshift(“Enrique”,”Marta”);

document.write(alumnos);

 

El programa devuelve: Enrique,Marta,Antonio,Luisa,Elisabet,Pablo.

  • sort(): ordena alfabéticamente los elementos del objeto Array.

var alumnos = new Array(“Antonio”,”Luisa”,”Elisabet”,”Pablo”);

alumnos.sort();

document.write(alumnos);

 

El programa devuelve: Antonio,Elisabet,Luisa,Pablo.

2.6.4. El objeto Math

Lista de propiedades:

  • Math.PI: el número π.
  • Math.E: el número e.
  • Math.sqrt2: la raíz cuadrada de 2.
  • Math.sqrt1_2: la raíz cuadrada de ½.
  • Math.ln2: el logaritmo de 2.
  • Math.ln10: el logaritmo de 10.

Lista de métodos:

  • floor(): devuelve el entero inmediatamente anterior al pasado como argumento.
  • ceil(): devuelve el entero inmediatamente posterior al pasado como argumento.
  • round(): devuelve el entero más cercano al pasado como argumento (hacia arriba o hacia bajo.
  • max(): devuelve el máximo entre los dos número pasados como argumentos.
  • min(): devuelve el mínimo entre los dos número pasados como argumentos.
  • pow(): devuelve el resultado de elevar a la potencia indicada como segundo argumento, el número pasado como primer argumento.
  • sqrt(): devuelve la raíz del número pasado como argumento.
  • random(): devuelve un número pseudoaleatorio entre 0 y 1.

Actividad 2. Escribe un programa que solicite al usuario dos números y muestre por pantalla un mensaje indicando cuál de los dos es mayor.

 

Actividad opcional. Escribe un programa que realice lo siguiente:

  • Solicite al usuario su nombre, año de nacimiento (sólo el año, por ejemplo, 1983) y su profesión. Almacena cada uno de estos datos en su propia variable: “nombre”, “fecha” y “profesion” (puedes utilizar el método prompt una vez para cada uno de los valores).
  • A partir del año de nacimiento, calcula su edad actual y guárdala en una variable con el nombre “edad”.
  • Inicializa una variable con el nombre “datos” con un array vacío. A continuación, introduce con el método adecuado los valores de las variables “nombre”, “fecha” y “profesion” en el array “datos”.
  • Recorre el array “datos” con un bucle para mostrar en pantalla (document.write) los tres valores.
  • Crea una estructura condicional en la que si la edad del usuario es mayor o igual a 18 años, el programa le devuelva la frase: “Tienes [edad] años y eres mayor de edad”, y si es menor de 18 años le devuelva la frase: “Tienes [edad] años y eres menor de edad”. [edad] debe recoger el valor obtenido como edad del usuario.

2.6. Bibliotecas y APIs de JavaScript

En el contexto de la ciencia informática, una biblioteca es una colección o conjunto de recursos o subprogramas utilizados por otros programas, generalmente para crear un nuevo producto o añadir nuevas funcionalidades a un producto existente. En español también se utiliza y está igualmente aceptado el término librería, menos preciso, resultado de una traducción incorrecta de library. La más importante de las bibliotecas de JavaScript es jQuery. Se trata de una biblioteca liberada bajo licencia de software libre, que permite simplificar la manera de interactuar con los documentos HTML, manipular el DOM, manejar eventos, desarrollar animaciones y agregar interacción mediante AJAX a las páginas web. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código. Es decir, con las funciones propias de esta biblioteca, se logran grandes resultados en menos tiempo y espacio. Además, se trata de una biblioteca con un altísimo nivel de adopción, lo que asegura su futuro mantenimiento, algo muy importante en informática.

Además de jQuery, en el mercado encontramos una gran cantidad de bibliotecas de JavaScript que nos permiten añadir nuevas funcionalidades a nuestras páginas web de una forma rápida y sencilla. Por poner sólo un par de ejemplos en diferentes ámbitos:

  • Modernizr: una biblioteca que nos permite detectar las capacidades del navegador del usuario y, en el caso de que sea muy antiguo o no soporte las características de nuestra web (etiquetas HTML5, clases CSS3, etc.), ofrecerle alternativas.
  • Colorbox: una biblioteca para añadir un efecto lightbox a las imágenes de nuestro web, poder agruparlas en carruseles, etc.

Una API, en español Interfaz de Programación de Aplicaciones, es un conjunto de funciones y procedimientos o métodos que nos permiten interactuar con una plataforma o servicio determinado. Gracias a las API, podemos crear o integrar software y servicios de terceros en nuestras aplicaciones o páginas web. Algunas APIs son libres y gratuitas y otras son privadas y de pago. Actualmente, podemos encontrar miles de APIs disponibles en Internet, muchas de las cuales basadas en JavaScript. Un par de ejemplos:

En el siguiente vídeo te explico cómo añadir una biblioteca de JavaScript a tu página web.

 

Actividad 3. Busca en Internet 1 biblioteca de JavaScript (o Jquery) para cada una de las siguientes funcionalidades :

  • Carruseles de imágenes o slideshows.
  • Calendarios o selectores de fecha (datepicker).
  • Imágenes o galerías de imágenes.

De cada una de las 3 bibliotecas encontradas, indica su nombre y URL ,y redacta un párrafo explicando sus principales características.

3. JavaScript y SEO

Los primeros buscadores de Internet eran incapaces de interpretar el lenguaje JavaScript. Actualmente, esto ya no es así, y tanto Google como el resto de buscadores pueden navegar por el contenido de webs que incorporan JavaScript e indexar su contenido. Aún así, Google ha reconocido ciertos límites en este sentido, por lo que tras cualquier implementación en la que intervenga JavaScript (menús desplegables, carruseles de imágenes, etc.), es importante ir revisando periódicamente el estado de la indexación de esos contenidos para asegurarnos de que el robot es capaz de interpretarlos.

Por sí mismo, JavaScript no mejorará el SEO de nuestras páginas web. No obstante, sí se puede utilizar para mejorar diferentes aspectos de nuestro web que, indirectamente, nos pueden ayudar a alcanzar mejores posiciones en el ranking. Entre esos aspectos podemos destacar el tiempo de carga de las páginas. Un tiempo de carga reducido es aconsejable tanto, para mejorar la experiencia de usuario, como para mejorar nuestro posicionamiento. La velocidad del sitio no es el único factor en el posicionamiento, ni mucho menos, pero sí uno de los muchos ingredientes en esa gran receta que es el SEO. Un factor, no obstante, especialmente relevantes en los últimos años con cambios algunos de las actualizaciones de su algoritmo (mobilegeddon, mobile-first index).

Existen muchas maneras de mejorar la velocidad de nuestro sitio. Con JavaScript podemos, por ejemplo, cargar imágenes dinámicamente sólo cuando el usuario las solicita o cuando alcanza la zona de la pantalla en la que aparecen. Para ello, podemos utilizar bibliotecas como Lightbox o Lazy load, pensadas para ello. De esta manera, el tiempo de carga inicial de la página se verá reducido considerablemente.

Las ventajas que puede aportar el uso de JavaScript también se pueden convertir en inconvenientes si:

  • Incluimos tanto JavaScript en nuestras páginas que su tiempo de carga aumenta.
  • Utilizamos menús creados con JavaScript tan complejos o mal diseñados, que el robot de Google no es capaz de interpretarlos, no pudiendo seguir de esta manera, los enlaces que presentan.
  • Si generamos enlaces automáticamente en determinadas partes de nuestras páginas como el
    y no les añadimos un anchor text adecuado.
  • Si utilizamos JavaScript para poner en marcha técnicas de Black Hat SEO, como ofrecer contenidos diferentes a los humanos y a los buscadores, ocultar contenido, entre otras.

Google Analytics, el servicio de analítica ofrecido por Google nos ofrece una gran cantidad de información sobre la interacción de los visitantes con nuestras páginas, de gran utilidad para el SEO. Este es el caso, entre otros muchos, de las palabras clave que nos proporcionan tráfico, del porcentaje de rebote de nuestras páginas, su tiempo medio de carga, etc.

Este servicio se implementa en nuestras páginas añadiendo el llamado Google Analytics Tracking Code, que no es otra cosa que un pedazo de código JavaScript.

Fig. 4. Ejemplo de un Tracking Code de Google Analytics.

Cuando damos de alta una nueva cuenta y su respectivo perfil asociado a una página web determinada, Google nos proporciona un Tracking Code que simplemente debemos añadir a las páginas del sitio que deseamos seguir. No obstante, si tenemos conocimientos de JavaScript, este código se puede personalizar. Entre otros aspectos, podemos:

  • Cargar el plugin de comercio electrónico que por defecto no se incluye para reducir el tamaño de la biblioteca de Analytics.
  • Hacer seguimiento de eventos como, por ejemplo, medir cuántas veces se ha pulsado un botón o cuántas veces se ha usado un elemento en un juego web.
  • Poner en marcha los informes sociales para medir de una manera más eficaz el número de veces que nuestros usuarios interactúan con los botones sociales.
  • Realizar el seguimiento de los usuarios en diferentes dominios (seguimiento multidominio).

Algunas de las opciones anteriores también se pueden implementar sin conocimientos de JavaScript, gracias al servicio Google Tag Manager.

4. JavaScript y usabilidad

Como hemos visto en apartados anteriores, mediante JavaScript podemos añadir un sin fin de funcionalidades a nuestras páginas web. Muchas de estas funcionalidades se pueden utilizar para mejorar la usabilidad de nuestros sitios web. A continuación, se citan sólo algunas funcionalidades implementadas con JavaScript que pueden ser de utilidad para mejorar la usabilidad de un sitio web.

Mediante JavaScript podemos crear los llamados “acordeones”, una especie de botones que al ser pulsados por los usuarios se despliegan y muestran un determinado contenido relacionado con el texto de ese botón.

Fig. 5. Ejemplo de acordeón creado con la biblioteca JQuery.

Fuente: http://jqueryui.com/accordion/

Se trata de una buena solución para acortar páginas demasiado largas y evitar así que nuestros lectores tengan que hacer demasiado scroll para encontrar aquello que están buscando. Los acordeones resultan de interés en páginas tipo “FAQ” (Preguntas más frecuentes) que reúnen un gran volumen de contenido agrupado bajo diferentes secciones temáticas, de las cuales sólo unas pocas interesan al usuario, evitando así que tenga que recorrer toda la página hasta encontrar la respuesta que necesita. No obstante, de acuerdo con Loranger (2014), debemos ser prudentes con el uso de los acordeones ya que, a pesar de los beneficios expuestos, incrementan el coste de interacción con la página, al tener los usuarios que analizar los diferentes encabezados para descubrir bajo cual se encuentra el contenido que necesitan. También es importante asegurarnos de que el acordeón que implementamos es accesible, y pueda ser abierto y cerrado tanto con el ratón, como con el teclado. Finalmente, debemos evitar ocultar a los usuarios la información más importante ya que podría pasar desapercibida para ellos.

En el siguiente ejemplo http://jsfiddle.net/ralcaraz/w8pvdL0z/5/, Saul González nos muestra una manera de mejorar la usabilidad en tablas con muchas columnas y filas. Gracias a JavaScript, el estilo de la celda con el foco del ratón, así como el del resto de celdas de su columna y fila, cambian para facilitar la lectura de los datos.

Fig. 6. Al pasar el ratón por la tabla el estilo de las celdas cambia para facilitar la lectura de los datos.

En algunos formularios web como los de reservas de vuelos, trenes, hoteles, etc., en los que se nos solicitan determinadas fechas, uno de los problemas de usabilidad frecuentes lo encontramos en la multitud de formatos de fecha que los distintos usuarios pueden llegar a introducir. Generalmente, cada formulario sólo acepta un formato de fecha y devuelve como errores el resto de formatos. Para evitar que los usuarios tengan que conocer previamente cuál es el formato adecuado en cada caso, además de posibles errores de tecleado, muchos webs añaden un selector de fechas que aparece automáticamente cuando el usuario se sitúa sobre el campo en cuestión. De esta manera, el usuario sólo debe navegar por el calendario de forma visual (o mediante el teclado si es compatible con éste), pulsar sobre el día deseado y automáticamente, el programa traduce esa acción en forma de texto en el formato aceptado por el formulario. La mayoría de estos selectores de fechas se crean con JavaScript.

Fig. 7. Selector de fechas de la biblioteca JQuery.

 

Actividad 4 Busca 2 ejemplos de páginas web en las que mediante alguna biblioteca o implementación propia de JavaScript, se haya mejorado su la usabilidad. No tiene porqué ser necesariamente ejemplos similares a los vistos en este apartado (acordeones, mejoras en tablas y selectores de fecha). Para cada ejemplo, haz una captura de pantalla y explica brevemente la razón de su elección.

5. JavaScript y accesibilidad

Las WCAG o Directrices de accesibilidad para el contenido web (Web Content Accessibility Guidelines, WCAG) son un documento elaborado por el W3C que marca las condiciones que ha de cumplir un contenido web para poder ser considerado accesible y proporciona mecanismos y estrategias para conseguirlo. Se trata del documento de referencia internacional en el campo de la accesibilidad, hasta el punto que su segunda versión, se ha llegado a convertir en la norma ISO/IEC 40500:2012.

Como hemos visto anteriormente, JavaScript es una tecnología que permite añadir dinamismo a nuestras páginas web. Mientras que en la primera versión de las WCAG, JavaScript no era bienvenido, la actual versión de las directrices del W3C sí contempla el uso de JavaScript y otras tecnologías como AJAX, recomendándolas incluso en diferentes técnicas para evitar la apertura de ventanas de manera no intrusiva o cambiar el estilo de una página dinámicamente, entre otras. El problema para el W3C ha dejado de ser el uso de JavaScript y se ha trasladado a la manera en cómo utilizamos esta tecnología. De esta manera, ya no es necesario proporcionar una alternativa accesible sin JavaScript para nuestras páginas o aplicaciones web, sino que lo que se espera es que el código JavaScript sea accesible de manera nativa (no intrusivo, independiente del dispositivo, accesible para las ayudas técnicas, etc.). Sólo si utilizamos JavaScript de manera no accesible, deberemos proporcionar una alternativa al contenido sin esta tecnología.

Los problemas que generalmente provoca el uso de JavaScript de manera inadecuada tienen que ver según WebAIM (2013) con:

  • La navegación, incapacitando o dificultando la posibilidad de navegar usando el teclado o las ayudas técnicas (lectores de pantalla, líneas braille, lupas, etc.).
  • El contenido oculto, es decir, partes del contenido que no son accesibles para las ayudas técnicas.
  • El control del usuario, o la incapacidad de éstos para actuar sobre los cambios de contenido automatizados.
  • La confusión/desorientación, al alterarse o deshabilitarse la manera de actuar por defecto de los navegadores, o desencadenando eventos que pueden pasar desapercibidos para determinados usuarios.

El concepto de “JavaScript no intrusivo” es un paradigma relativamente nuevo en el ámbito de la programación con JavaScript en el que se procura separar la funcionalidad ofrecida por JavaScript del contenido y estructura de la página HTML que lo contiene. De esta manera, se procura evitar escribir código JavaScript como parte del contenido HTML, puesto que la función del segundo sólo es la de describir la estructura del documento y no su comportamiento programático.

Por ejemplo, podríamos asociar a una imagen en nuestro código HTML una función de JavaScript que haga que, al pulsar sobre ella (evento “onclick”), se muestre un mensaje en la pantalla del usuario. Imaginemos que a esa función la hemos definido en la cabecera del documento y la hemos llamado “mensajeAlerta()”. Para referirnos a ella podríamos llamarla a través del siguiente evento de clic:

<img src=“imagen.jpg” onclick=“mensajeAlerta();”/>

Pero esto sería considerado intrusivo, al estar describiendo desde el código HTML la funcionalidad asociada a la interacción del usuario con la imagen. En cambio, si identificamos esa imagen con un ID, y nos llevamos el código Javascript fuera, haciendo referencia a ella desde éste, conseguiremos separar funcionalidad, estructura y contenido:

<img src=“imagen.jpg” id=“boton”/>

 

<script type=“text/javascript”>

window.onload = function(){

document.getElementById(“boton”).onclick = mensajeAlerta;

}

function mensajeAlerta(){

alert(“Este es un mensaje de alerta”);

}

</script>

 

A continuación, se incluyen algunas prácticas habituales en el diseño de webs con JavaScript que pueden provocar problemas de accesibilidad.

    • La asociación exclusiva de funciones de JavaScript a eventos de ratón (onclick, onmouseover, ondblclick, etc.) en lugar de asociarse de manera simultánea con eventos de teclado (por ejemplo, onkeypress). Si una funcionalidad de una página web sólo se puede activar pulsando sobre ella con el ratón, los usuarios que no son capaces de usar el ratón y utilizan exclusivamente el teclado (personas ciegas, con baja visión pronunciada, o con discapacidades motrices, entre otras), no las podrán utilizar.
    • El uso de popups. Los popups, o ventanas emergentes, son ventanas que aparecen de manera automática sobre el contenido del web, generalmente sin que el usuario las haya solicitado. Estas ventanas pueden pasar desapercibidas para los usuarios ciegos o con baja visión. En el caso de usuarios con una discapacidad cognitiva puede provocar confusión, al no entender por qué el comportamiento por defecto de un enlace se ha modificado. Pueden ser difíciles o imposibles de cerrar para usuarios que dependan exclusivamente del teclado, o incluso imposible de aumentar el tamaño de su texto con lupas.
    • La creación de carruseles de imágenes que se activan automáticamente y que no disponen de botones de pausa. Este tipo de animaciones hacen que el foco del contenido cambie provocando que los usuarios ciegos no sean conscientes de ello. En el caso de los usuarios con discapacidades cognitivas o de aprendizaje, este tipo de animaciones suponen una carga cognitiva adicional y pueden provocar distracciones en lugar de cumplir su función de destacar un contenido importante. En el caso de que se utilicen se debe proporcionar como mínimo la posibilidad de pausarlos.
  • Validaciones pobres en formularios web que muestran mensajes con pocas indicaciones, que sólo se pueden cerrar mediante el ratón, o que incluso no identifican a nivel de programación qué campos contienen el error o errores.

Aunque JavaScript es uno de los principales lenguajes de programación para añadir dinamismo a las páginas web, la evolución del estándar CSS, especialmente desde la llegada de su versión CSS3, permite a los diseñadores utilizarlo como alternativa a JavaScript en determinadas circunstancias. En blogs especializados (Andrew, 2010) es posible ver alternativas puras con CSS para implementar acordeones, gráficos dinámicos, imágenes con ciertos efectos, etc. Todas ellas, si se implementan adecuadamente, pueden resultar más accesibles que sus homólogas en JavaScript.

6. Conclusiones

Después de sus más de 20 años de existencia, JavaScript se ha afianzado como uno de los lenguajes de programación imprescindibles para cualquier diseñador web. Parte de su éxito se debe al soporte y compatibilidad con todos los navegadores web modernos, a la aparición de diferentes bibliotecas que facilitan su uso o integración en nuestros proyectos, y sobre todo a su gran nivel de adopción por parte de la comunidad de programadores.

Como hemos podido ver a lo largo de este artículo, JavaScript puede ser la solución a determinados problemas de usabilidad y accesibilidad de nuestras páginas, o incluso ayudarnos de manera indirecta a mejorar nuestro posicionamiento web. Al mismo tiempo, también hemos visto, que si no se usa de manera correcta, estos posibles beneficios pueden convertirse en inconvenientes.

Dado el nivel de adopción de JavaScript en la actualidad, y su similitud a otros muchos lenguajes de programación, es recomendable que cualquier profesional relacionado con la Web tenga unas nociones mínimas de este lenguaje, del mismo modo que debería tenerlas de otros estándares como HTML o CSS.

7.Bibliografía

Monografías

Ferguson, Russ; Heilmann, Christian. Beginning JavaScript with DOM scripting and AJAX. 2nd ed. [Berkeley, Calif.], Apress, 2013.

Flanagan, David. JavaScript: the definitive guide. 6th ed. Sebastopol : O’Reilly, cop. 2011.

Sitios web

Accessible Javascript. WebAIM, 2013.

http://webaim.org/techniques/javascript/

Andrew, Paul. “30 Pure CSS Alternatives to Javascript”. Specky boy design magazine (April 2010)

http://speckyboy.com/2010/04/26/30-pure-css-alternatives-to-javascript/

Carreras, Olga. “Respuesta a 25 dudas habituales sobre accesibilidad web”. Usable y accesible. 2012.

http://olgacarreras.blogspot.com.es/2011/01/respuesta-25-dudas-habituales-sobre.html

“Client-side Scripting Techniques for WCAG 2.0”. En: Techniques for WCAG 2.0. W3C,2012.

http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html

“Configuración avanzada: seguimiento web (analytics.js)”. En: Google Analytics. 2014.

https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced?hl=es

Eguiluz, Javier. Introducción a JavaScript. Librosweb, 2014.

http://librosweb.es/javascript/

Introducción a JavaScript orientado a objetos. Mozilla Developer Network, 2014.

https://developer.mozilla.org/es/docs/Web/JavaScript/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos

JavaScript tutorial. W3C.

http://www.w3schools.com/js/default.asp

Loranger, Hoa. “Accordions are not always the answer for complex content on desktops”. Nielsen Norman Group (May 2014)

http://www.nngroup.com/articles/accordions-complex-content/


© Texto: autor/es del documento

© Presente edición: Máster en Información Digital. UPF Barcelona School of Management

Esta obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

Artículo 1.7. Diseño y creación de sedes web con CSS

Artículo 1.7. Diseño y creación de sedes web con CSS

David Maniega

David Maniega. Artículo 1.7. Diseño y creación de sedes web con CSS. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Información Digital. Barcelona: UPF Barcelona School of Management.


Sumario

1. Introducción

2. ¿Qué son las hojas de estilo CSS?

2.1. Elementos básicos de las hojas de estilo

2.2. ¿Cómo aplicar hojas de estilo?

3. Perfecto, y ¿cómo puedo formar las declaraciones de estilo?

3.1. El uso de las clases (class)

3.2. El uso de los selectores ID

3.3. Poniendo un poco de orden

4. ¿Qué quiere decir cascading?

5. El elemento pseudoclase

6. Conociendo las propiedades

6.1. Propiedades de bloque

6.2. Propiedades de color

6.3. Propiedades de fondo

6.4. 6.4. Propiedades de fuente

6.5. Propiedades de texto

6.6. Propiedades de listas

7. El editor de CSS de Nvu, CaScadeS

8. Ejercicio

9. Bibliografía


Nota para la evaluación: esta unidad es un taller que incluye un artículo muy práctico con unos ejercicios al final del texto. Para superar esta unidad deberán realizarse los ficheros que se indican del artículo y subirlos al espacio personal del servidor del curso.

Procedimiento de instalación: siguiendo las indicaciones de los ejercicios del artículo de la unidad realizará dos ficheros llamados “inicio.html” y “curso.html”.

La entrega de este ejercicio se realiza colocando los ficheros realizados en la cuenta personal del servidor del curso (consulta el documento “Cómo instalar el cliente FTP” para colgar ficheros en su cuenta y cuales son sus claves).

IMPORTANTE: A continuación se deberá notificar la finalización del ejercicio por medio de un mensaje en el apartado de entregas de ejercicios de esta unidad didáctica en el aula virtual indicando las urls completas para acceder al resultado subido al servidor.

1. Introducción

En la unidad sobre creación de páginas web con estándares, HTML y CSS, ya comentamos la importancia de separar el contenido (semántica) del formato visual (estilo), que éste ha de tener cuando se presenta a través de un agente de usuario como pueda ser un navegador web o cualquier otro dispositivo. Esta importancia radica en la capacidad de poder actuar de forma independiente del dispositivo y poder así presentarlo de forma adecuada para cada una de las necesidades. Por ejemplo, si separamos la estructura del formato de nuestros contenidos podremos crear un estilo específico para la impresora que muestre solo los contenidos principales y evite gastar tinta en otros elementos, aparte de optimizar la legibilidad del mismo.

¿Quién no se ha encontrado en más de una ocasión con que al imprimir una página web parte de los contenidos han quedado fuera del área de impresión? Esto es muy habitual cuando los márgenes establecidos en la propia página no se pueden adecuar a los del formato de impresión de forma automática. Una manera simple de solucionar esto es mantener dos estilos diferentes asociados al mismo contenido, uno para su presentación por pantalla y otro para su impresión directa en papel, donde podemos eliminar algunos elementos no necesarios y optimizar los resultados dando mayor importancia a los contenidos.

Veamos un ejemplo de un artículo de un periódico, donde lo que nos interesa principalmente cuando imprimimos una noticia es precisamente el propio contenido y no su estética por pantalla, ya que cumplen funciones diferentes.

Figura 1. Captura de un artículo desde el navegador

Figura 2. Pantalla optimizada para impresión

2. ¿Qué son las hojas de estilo CSS?

Las hojas de estilo, conocidas como CSS (Cascading Style Sheet), son un conjunto de instrucciones, llamadas reglas, que definen la apariencia de diferentes elementos de un documento HTML. En otras palabras, son plantillas que permiten cambiar el formato de presentación de cualquier etiqueta de HTML. Por ejemplo, con ellas podemos definir el tamaño de una fuente determinada o el color y el estilo asignados a un párrafo de texto concreto o global. Esto se hace posible gracias a la definición de propiedades de estilo y su aplicación dentro de los documentos.

En definitiva, las hojas de estilo proporcionan un mayor control sobre la apariencia física de una página web, y facilitan la tarea de creación y diseño de contenidos en web permitiéndonos crear estructuras completas, ya sea en una sola página o en un sitio web global.

2.1. Elementos básicos de las hojas de estilo

Como hemos indicado las hojas de estilo son una serie de reglas que sirven para aplicar estilo a las diferentes etiquetas del lenguaje HTML, pero hemos de saber de qué elementos están formadas para poder extraer su máximo potencial.

Las reglas de estilo están formadas por tres elementos clave:

  • Selector: le dice al agente de usuario (navegador) la etiqueta o parte del documento que se verá afectada por sus reglas. Las reglas de estilo van encerradas entre llaves { }
  • Propiedad: es el elemento encargado de especificar qué aspecto va a definir o modificarse. Para separar el nombre de la propiedad y el valor se han de incluir siempre los dos puntos :
  • Valor: es el contenido de la propiedad para darle significado. Para marcar la finalización del valor de la propiedad hay que poner siempre punto y coma ;

Un aspecto importante que debemos recordar es que la suma de propiedad + valor forma lo que se llama una declaración de estilo. En el siguiente gráfico lo veremos con mayor claridad.

Nota importante: es fácil trasladar la manera de hacer de HTML a las hojas de estilo, de forma que como estamos acostumbrados a poner comillas en las cadenas atributo=”valor”, normalmente al inicio tendemos a poner esta misma definición en las hojas de estilo, con lo que simplemente no tendrán el efecto esperado porque el sistema no lo comprenderá.

Por ejemplo:

…..

para XHTML (es un atributo)

p { text-align=”right”; } INCORRECTO para CSS (es una propiedad)

p { text-align: right; } CORRECTO para CSS (es una propiedad)

Con esto queremos hacer énfasis en que nunca tendremos en nuestra hoja de estilo ni un igual = ni comillas dobles “” . Únicamente existe una excepción sobre el uso de comillas, y es cuando determinamos una familia de fuente cuyo nombre está compuesto por dos o más palabras, pero eso ya lo veremos más adelante cuando hablemos de las fuentes.

2.2. ¿Cómo aplicar hojas de estilo?

Tenemos tres maneras diferentes de incluir propiedades de estilo dentro de nuestros documentos:

  1. Dentro de una etiqueta c mediante el atributo “style”, es lo que se llama estilo en línea.

<h1 style=”font-size:2em;”>Título</h1>

 

  1. En la cabecera de cada documento HTML, donde se definen todos los estilos de la página. Para ello utilizaremos la etiqueta <style> todos los estilos </style> y pondremos siempre el atributo type=”text/css”. A este método se le conoce como estilo interno. Este método, aunque es igualmente válido, es menos efectivo si en un momento dado se requiere el cambio de algún valor dentro de un atributo concreto y que esté repetido en diversos documentos, ya que de esta forma deberemos aplicar los cambios uno por uno, igual que en el caso anterior.

<style type=”text/css”>

body { background-color:#ccdd00; }

h1 { font-face:arial, verdana,sans-serif; font-size: 2em; }

</style>

 

  1. En un fichero de estilos externo que vincularemos desde todas nuestras páginas dentro de la cabecera (<head> </head>) de los mismos. Este fichero es en texto plano igual que los documentos HTML y tiene por extensión para su reconocimiento .css. Este método se conoce como estilo externo y nos permite vincular dentro de cada documento uno o más ficheros CSS.

    Es el sistema más utilizado y que mayor flexibilidad aporta a la hora de poder hacer cambios globales de estilo. Por ejemplo, si se desea en algún momento cambiar un atributo que es aplicado a varios documentos, no hará falta editar cada documento para modificar aquella característica concreta, sino que realizando las modificaciones en la hoja de estilo los cambios se efectúan automáticamente en todos los documentos afectados por nuestra hoja de estilo, pensemos por un momento en un sitio web con más de 200 páginas en el que se quiera cambiar el color corporativo porque la marca ha evolucionado…, si hay que editar esas 200 páginas tenemos mucho trabajo que hacer, con el consecuente riesgo de equivocarnos en alguna definición.

<head> ……..

<link rel=”stylesheet” type=”text/css” href=”mi_fichero_de_estilo.css” />

</head>

3. Perfecto, y ¿cómo puedo formar las declaraciones de estilo?

Dentro del código HTML que se utiliza para la creación de documentos digitales, encontramos diferentes etiquetas y atributos propios del lenguaje. Mediante las hojas de estilo se puede proporcionar un estilo concreto y predefinido para cada etiqueta, pudiendo de esta forma ahorrar tiempo en la escritura de etiquetas al omitir los atributos de estilo que residirán en la definición CSS, siendo además aplicado de forma automática cada vez que se utilice esa etiqueta dentro del documento.

Este método de estilo sirve para determinar estilos por defecto para las etiquetas propias de HTML. Por ejemplo, si para designar los títulos de cada página se va a utilizar la etiqueta <h1> y su correspondiente </h1>, se pueden definir una serie de valores que se apliquen al estilo de dicha etiqueta.

Si el código para hacer que los títulos sean de color azul, subrayado y con el aspecto concreto de h1 (encabezamiento – negrita y de tamaño superior al estándar), se debería aplicar a cada título de cada documento la siguiente secuencia de etiquetas:

<h1><font color=”blue”><u>Título del documento</u></font></h1>

Como vemos hemos utilizado la desfasada etiqueta FONT para incluir el color y la desaconsejada U para subrayarlo. Con una definición de hoja de estilo para la etiqueta h1 se simplifica el proceso y se vuelve estándar al separar el significado de la etiqueta pura de HTML de su apariencia física de la siguiente forma:

h1 { color:blue; text-decoration:underline; }

De esta forma, cuando en el documento se incluya la etiqueta <h1> para especificar un encabezamiento, ya se aplicarán automáticamente los atributos de estilo predefinidos sin tener que incorporar ninguna otra etiqueta anexa.

Como hemos podido ver, las especificaciones de CSS permiten crear en una hoja de estilo varios estilos distintos para diferentes elementos, pero a veces nos conviene para esos mismos elementos asignar diferentes propiedades de estilo. Eso lo podremos hacer mediante el uso de lo que se conoce como clases y selectores id o identificadores.

3.1. El uso de las clases (class)

Una clase la podemos definir como una de las maneras posibles de agrupar una serie de propiedades para posteriormente aplicarlas a un elemento específico o a varios con el fin de modificar su aspecto. Las clases nos permiten “romper” la herencia dada por un elemento padre o las propiedades asignadas de forma genérica para una etiqueta HTML definida anteriormente en la misma hoja de estilo.

Por ejemplo, si hemos definido una serie de propiedades para los elementos table, tr y td (una tabla) de forma genérica para todas las tablas que tengamos en nuestras páginas pero necesitamos en un momento determinado modificar el aspecto de una celda concreta, esto lo deberemos hacer asignándole una clase de estilo específico para ella.

Para definir las clases en nuestra hoja de estilo tendremos que utilizar el siguiente formato:

punto + nombre de la clase { propiedades }

.nombre_de_clase { propiedades }

De esta forma hemos definido una clase con unas propiedades específicas que no entrará en juego hasta que sea llamada desde alguna etiqueta HTML de nuestros documentos. Para establecer esta llamada desde la página web debemos utilizar el atributo class=”nombre_de_la_clase” .

Veamos un ejemplo de asignación en nuestra CSS:

td { font-family:Arial; font-size:12px; }

td.azul { font-family:Arial; font-size:11px; background-color:blue; }

Como podemos ver, todas las celdas de las tablas del documento por defecto tendrán una tipografía Arial 12 píxeles, pero si en algún momento se desea aplicar un estilo diferente, como pueda ser una celda azul y con un tamaño de letra de 11 píxeles, es donde entraría en acción la clase .azul asociada a la etiqueta td.

Para definir dentro del documento la clase específica se debe hacer con la siguiente sintaxis: <td class=”azul”>

Es importante tener en cuenta un par de aspectos clave a la hora de designar clases a nuestras etiquetas o elementos. No podemos invocar a dos clases diferentes en una misma etiqueta ya que es una acción ilegal:

<p class=”verde” class=”azul”>…</p>

Para asignar dos clases diferentes a una etiqueta siempre que no tengan propiedades incompatibles, debemos indicar el nombre de cada clase separadas por un espacio dentro del atributo class:

<p class=”claseA  claseB”>…</p>

Siguiendo el caso anterior: <p class=”verde  azul”>…</p>

El segundo aspecto que debemos tener en cuenta, es que podemos crear una clase asociada al uso por parte de una etiqueta concreta o bien dejarla “libre” (sin asociación directa) para que pueda ser aplicable a todas las etiquetas que queramos.

Veamos un ejemplo de esto:

.verde { font-color:green; font-weight:bold; } // Esta clase está libre, esperando a ser utilizada para cualquier elemento de la página.

p.verde { font-color:green; font-weight:bold; } // Esta clase sólamente puede ser utilizada para el elemento “p” y NO para ningún otro.

3.2. El uso de los selectores ID

Los selectores ID funcionan de forma muy similar a las clases de estilo, de hecho la única cuestión que los diferencia es a nivel formal, ya que los selectores ID están pensados para agrupar propiedades que se referirán a los elementos pero de forma exclusiva y única. Esto quiere decir que sólamente podremos tener en nuestros documentos una única llamada a un selector ID determinado, de forma que no pueden ser reutilizados dentro de un mismo documento como podemos hacer con las clases.

Los selectores ID nos permiten identificar elementos únicos en la página, por ejemplo, para designar un menú de navegación, una caja de contenidos, un pie de página, etc., de forma que cumplan con las necesidades específicas para cada uno de estos elementos de forma no repetida en la página o documento.

Para definir los selectores ID en nuestra hoja de estilo tendremos que utilizar el siguiente formato:

almohadilla + nombre del selector { propiedades }

#nombre_del_selector { propiedades }

De igual manera que sucede con las clases, los selectores ID no entran en juego hasta que sea llamado desde alguna etiqueta HTML de nuestros documentos. Para establecer esta llamada desde la página web debemos utilizar el atributo id=”nombre_del_selector” .

Veamos un ejemplo de asignación en nuestra CSS:

#menu { font-family:Arial; font-size:0.9em; background-color: #ffccdd; }

En nuestro documento sólo podremos tener presente una llamada a este selector de la siguiente forma:

<div id=”menu”>…..</div>

3.3. Poniendo un poco de orden

A la hora de crear nuestras hojas de estilo conviene observar una serie de recomendaciones clave para ordenar las diferentes declaraciones de estilo. De esta forma mantendremos la coherencia formal y funcional de nuestra hoja de estilos y será mucho más fácil identificar cada uno de sus componentes para poder actuar sobre ellos en cualquier momento.

La recomendación es especificar los estilos bajo la siguiente ordenación:

  1. Las etiquetas de HTML: definimos primero los estilos que afectarán a las etiquetas de forma genéricas, es decir, para todas las etiquetas que utilicemos en nuestras páginas. No se suelen especificar estilos para todas ya que no siempre vamos a modificar la representación de todas las etiquetas. Siempre deberemos contar eso sí, con especificaciones para las etiquetas body, h1, y a, por ser estas generales en todas nuestras páginas, pero podemos incluir definiciones para todas las que queramos claro, siempre teniendo en cuenta que tendrán efectos globales.
  1. Los identificadores: teniendo presente que sólo podrán estar presentes una única vez en cada página, son exclusivos y no repetibles en la misma página.
  1. Las clases: que como serán por lo general bastantes más que los identificadores o etiquetas es conveniente disponerlos en orden alfabético o agrupados por su función.

A la hora de definir los diferentes elementos que formarán parte de nuestra hoja de estilos, conviene tener presente que lo ideal es asignar nombres a los identificadores y a las clases lo más claros posible para poder tener un modelo mental de su representación. Pensemos que mientras estemos haciendo nuestras páginas es fácil recordar esos nombres y su función pero pasado un cierto tiempo eso ya no es tan evidente, y no es cuestión de tener una guía de uso del significado de cada propiedad de estilo.

Estos nombres pueden ser alfanuméricos pero no pueden ser sólo números, deben ir en minúscula, preferiblemente sin acentos y no pueden tener espacios si son nombres compuestos, por lo que se recomienda utilizar el guión bajo para unir dos palabras, por ejemplo:

.vinculo_cabecera {}

En nuestro código de estilos podemos, al igual que en HTML, incluir líneas de comentario para especificar notas al código generado. Para ello utilizaremos la siguiente sintaxis:

/* esto es un comentario */

4. ¿Qué quiere decir cascading ?

Si miramos lo que significan las siglas CSS veremos que el primer concepto nos habla de cascading, que está íntimamente relacionado con la herencia. De esta forma, y simplificándolo mucho, diremos que los elementos descendiente (hijos) heredan las propiedades de los ascendentes (padres), manteniendo el orden de jerarquía de las etiquetas del lenguaje HTML. Siendo así tenemos a body como etiqueta padre ya que es la que engloba al resto de etiquetas que proporcionan estructura al documento, posteriormente las etiquetas de bloque (p, div,h(n)…) y posteriormente las etiquetas de elementos en línea (em,strong,span,a…).

Por ejemplo, si establecemos unas reglas para la etiqueta o elemento ul, sus hijos li también arrastrarán las mismas reglas por defecto. De todas formas podemos variar este comportamiento en cualquier momento si especificamos reglas específicas para los hijos.

El concepto de herencia sin embargo no se aplica a la manera en que se integran e interpretan las propiedades de estilo dentro de una página. Así, y por orden de cascada, primero se interpretarán las reglas de una hoja de estilo externa vinculada a la página, posteriormente las reglas definidas en la cabecera del documento y por último las reglas en línea, de forma que, si en este último estadio existe una definición de propiedad para un elemento que también está definido en un elemento superior, tendrá mayor importancia la declarada en última instancia en el estilo en línea.

5. El elemento pseudoclase

Dentro del lenguaje HTML podemos encontrarnos con etiquetas que tienen asociadas una serie de características intrínsecas para su representación y estado. Es lo que tenemos definido para la etiqueta o elemento a (enlaces). Estas pseudoclases definen para los enlaces una serie de estados sobre los que podremos aplicar unas propiedades de estilo, estos son y por este orden para que se puedan aplicar correctamente:

  • a:link, estado de reposo del enlace
  • a:visited, estado en que el enlace ya ha sido visitado
  • a:hover, estado de salto o variabilidad cuando situamos el ratón sobre el enlace
  • a:active, estado momentáneo en que un enlace está siendo pinchado para activarse

A cada una de estas pseudoclases les podemos aplicar una serie de reglas de estilo totalmente diferentes para lograr los efectos que las diferencien, por ejemplo:

a:link {color: #ff6600; text-decoration: underline;}

a:visited {color: #00ff00; text-decoration: underline; background-color: #ddeedd;}

a:hover {color: #cc00dd; text-decoration: none;}

a:active {color: #0000cc; text-decoration: underline;}

Estas reglas se aplicarán “en cascada” a todos los enlaces que tengamos en nuestras páginas, pero como a veces puede ser necesario especificar un estilo diferente para otra tipología de enlaces, por ejemplo para crear un menú con listas, podemos utilizar clases dentro de una nueva definición que afecte solamente a los enlaces de dicho menú.

Para poder hacer esto hemos de seguir la fórmula: a.nombre_de_clase:pseudoclase { }

a.menu:link {color: #000000; text-decoration: none; background-color: #ffcccc; }

a.menu:visited {color: #000000; text-decoration: none; background-color: #ffcccc; }

a.menu:hover {color: #ffffff; text-decoration: none; background-color: #ddcc66;; }

a.menu:active {color: #000000; text-decoration: none; background-color: #ffcccc; }

6. Conociendo las propiedades

Una vez que sabemos cómo se forman las propiedades de estilo y cómo podemos afectar a las etiquetas HTML echemos un vistazo rápido a las principales propiedades de estilo. En la presente unidad vamos a tratar alguna de ellas, pero si se desea conocer a fondo todas las propiedades se debe consultar la especificación del estándar propuesto por el W3C. De todas formas muchos editores incluyen ayudas para crear ficheros de estilo, como es el caso de Kompozer, o en su defecto aplicaciones específicas para este cometido mucho más potentes y extensas como pueda ser el caso de TopStyle, con lo que no es necesario memorizar todas las propiedades, sino saber qué posibles valores podemos aplicar.

6.1. Propiedades de bloque

Como hemos comentado anteriormente existen una serie de elementos que son considerados por el estándar de HTML como elementos de bloque. Estos elementos, que tienen la peculiaridad de tener al final de su representación un salto de línea como <p>, <h(n)>, <div>, <hr />, <ul> o <ol> (estos últimos denominados también elementos de lista), están rodeados por un modelo de caja a su alrededor que los encierra, con lo que tienen una serie de propiedades específicas como son:

  • margin : márgenes que rodean externamente el bloque.
  • padding : margen interno entre el contenido de este bloque y su perímetro interno.
  • border : perfil que se encuentra entre margin y padding.

Estos elementos además tienen una anchura y altura concretas y una alineación que podemos especificar desde las propiedades de estilo. Veamos a través de un cuadro explicativo las propiedades posibles:

Para designar las propiedades de margin y padding debemos utilizar alguna fórmula de medida, ya sea esta absoluta, relativa. Para ambos casos existen una serie de medidas que deberemos conocer ya que también se aplicarán a otra propiedades como son las tipografías. Se pueden incluir igualmente medidas de tipo porcentual % que se considera una magnitud de tipo relativo ya que dependerá de diversos factores, como las medidas de la pantalla o los elementos padre si se definen bajo estas mismas características.

Medidas absolutas:

  • pt : puntos, unidades más conocidas por su uso en procesadores de texto.
  • px : píxel, unidad mínima equivalente a un punto.
  • pc : picas.
  • in : pulgadas.
  • mm : milímetros.
  • cm : centímetros.

Medidas relativas:

  • em : unidad relativa que se corresponde con la referencia de la altura de la letra M mayúscula.
  • ex : unidad relativa que se corresponde con la referencia de la mitad de la altura de la letra M mayúscula.

6.2. Propiedades de color

La propiedad de color hace referencia al color llamado de foreground , es decir, el color de primer plano que está por encima de color de fondo. Básicamente lo podemos asignar al color del texto.

Su definición es la siguiente:

elemento { color:definición del color; }

Por ejemplo:

p { color: red; }

Los colores pueden ser definidos de tres formas diferentes, por su nombre en inglés, hasta un total de 84 colores (red, yellow, green, black…), en su formato hexadecimal #RRGGBB, donde se forman por tres cadenas de pares de valores correspondientes a las gradaciones de los colores Red / Green / Blue, y por último bajo la función rgb(R,G,B), que son los valores decimales de los colores Red, Green y Blue.

Color Hexa

Esta excelente herramienta nos ayuda a buscar las combinaciones de color adecuadas entre diferentes gamas cromáticas. Nos proporciona los códigos hexadecimales para incluirlos en nuestra hoja de estilos.

Paletton

Otra herramienta enfocada a la selección de gamas de colores. Podemos controlar desde la saturación al contraste, todo ello para poder encontrar los colores relacionados adecuados para nuestras páginas.

6.3. Propiedades de fondo

El fondo tiene asociadas dos propiedades, background-color (para especificar un color de fondo, no sólo a la página, sino a cualquier elemento, y background-image (para especificar una imagen de fondo).

Por ejemplo:

body { background-color: #FFFFFF; background-image: url(‘nombre de la imagen’); }

Fijémonos que en la notación de la imagen interviene el valor url(), que incluye la referencia a la ruta donde tenemos alojada nuestra imagen de fondo, como si fuera equivalente al atributo src del elemento img. Algunos autores desaconsejan el uso de las comillas simples dentro del valor url ya que puede provocar interferencias de interpretación con ciertos navegadores.

Pero el valor de inclusión de una imagen de fondo incluye además otra serie de atributos que hacen que se utilice el método abreviado para designar en una sola propiedad el color y los valores asociados a la imagen separando las propiedades por espacios, es así:

background: color | imagen | repeat | attachment | position ;

Veamos estos parámetros:

  • color : definimos nuestro color de fondo como hemos visto.
  • imagen : indicamos qué imagen pondremos de fondo: url(‘fondo.gif’).
  • repeat : con este valor establecemos si queremos que la imagen se repita o no tanto horizontalmente como verticalmente en toda la página. Si no queremos que se repita especificaremos no-repeat, si queremos que sólo se repita en sentido horizontal especificaremos repeat-x, mientras que si queremos que sólo sea verticalmente especificaremos repeat-y.
  • attachment : con este atributo especificamos si la imagen de fondo se quedará fija o si bien se desplazará cuando hagamos scroll (opción por defecto). Si queremos que la imagen se quede fija en el fondo pondremos fixed.
  • position : nos sirve para indicar la posición de la imagen de fondo. Tiene utilidad generalmente si nuestra imagen no se va a repetir constantemente. Podemos posicionarla tanto vertical como horizontalmente en base al modelo de coordenadas (x-y). Por defecto la imagen se posiciona en la parte superior izquierda de la página. Podemos variar ese posicionamiento tanto a través de valores exactos (píxeles 100px,50px) o bien “top,bottom,left,right,center”, como porcentuales (40%,50%).

Por ejemplo:

body { background: #cccccc url(fondo.gif) repeat-x fixed bottom; }

6.4. Propiedades de fuente

Como es lógico pensar también podemos actuar sobre las propiedades de las fuentes de nuestras páginas, pero hemos de ser cautelosos con esto si queremos incluir una familia tipográfica que no sea habitual porque no todos los ordenadores vienen por defecto con el mismo juego de tipografías preinstaladas, lo que puede hacer variar mucho el aspecto de nuestras páginas si las realizamos en base a una tipografía muy especial.

Lo más recomendable es el uso de fuentes consideradas estándar en todos los ordenadores, distinguiendo eso sí las agrupaciones de las familias tipográficas. En este sentido, debemos tener presente que las familias conocidas como Serif son más adecuadas para medios impresos ya que son más fáciles de leer que por pantalla, por ejemplo CG Times, Times New Roman, Georgia, etc, mientras que las fuentes de las familias Sans-Serif son más idóneas para su lectura por pantalla, como son Arial, Verdana, Tahoma, etc.

Una gran ventaja que tenemos a la hora de determinar nuestras fuentes, es que no sólo podemos especificar una sola, sino que podemos establecer varias, separadas por comas, de forma que si un ordenador no dispone de la primera fuente asignada intentará presentar el contenido en base a la segunda, y así sucesivamente.

En este sentido es importante determinar siempre como fuente última la familia genérica a la cual pertenece ese juego de tipografías que especifiquemos, por ejemplo:

font-family: arial,verdana,tahoma,sans.serif;

font-family: “CG Times”, “Times New Roman”, Georgia, serif;

Como podemos ver en el segundo juego de definiciones de tipografías, las que se definen por nombres compuestos han de ir entrecomilladas, esto es obligatorio para poder definir correctamente el nombre de una familia tipográfica compuesta.

La propiedad font es la fórmula reducida para poder especificar las diferentes propiedades de fuente y se corresponde con:

  • font-style : estilo de fuente, normal (por defecto), bold (negrita) e italic (cursiva).
  • font-variant : para especificar letras versales, small-caps o normal (por defecto).
  • font-weight : para especificar si estará en negrita (bold) o no (normal) por defecto. Existen otros valores por defecto en unidades relativas como son bolder | lighter. También se pueden especificar valores numéricos del 100 al 900, donde 100 es un valor ligero y 900 el más pesado.
  • font-size : tamaño de la letra. En valores absolutos, relativos o porcentuales. Dentro de los valores absolutos también hay unos determinados de forma genérica como son: xx-small | x-small | small | medium | large | x-large | xx-large.
  • font-family : familia tipográfica.

De esta forma, si queremos especificar en una sola designación de estilo las propiedades de la fuente lo podremos hacer de la siguiente forma dejando un espacio entre cada propiedad y por este orden:

font: style | variant | weight | size | family

pudiendo omitir aquella propiedad que no nos interese pero manteniendo en cualquier caso el orden preestablecido, por ejemplo:

font: bold 1em arial, verdana, sans-serif;

6.5. Propiedades de texto

También podemos incidir directamente sobre el formato como el texto es presentado a través de diferentes opciones que pasamos a revisar:

  • text-decoration : con esta propiedad podemos modificar la decoración o adornos del texto que por defecto es none (sin adornos). Así tenemos: underline (subrayado), overline (línea superior) y line-through (tachado).
  • text-indent : sirve para indentar o sangrar un párrafo en su primera línea. Se define una medida de longitud como valor de sangrado.
  • text-align : alineamiento del texto. Sus valores posibles son: left (por defecto) | right | center | justify.
  • text-transform : lo especificamos para transformar el texto en capitales (letra inicial de cada palabra en capital), mayúsculas o minúsculas independientemente de cómo esté escrito el texto en la página. Sus valores son: lowercase | uppercase | capitalize.
  • line-height : especifica la distancia de interlineado de cada línea de un párrafo, su valor es una medida de longitud. Si queremos modificar el espaciado de las letras (poco recomendable para evitar problemas de legibilidad), podemos utilizar la propiedad letter-spacing cuyo valor es también una medida de longitud.

Por ejemplo:

a:hover { text-decoration: underline; }

p.center { text-align: center; }

p { text-indent: 25px; line-height: 17px; }

6.6. Propiedades de listas

Las listas también disponen de unas propiedades específicas que nos ayudan a controlar sus atributos y formatos. Es importante referenciar que las listas son elementos de bloque pero que en cualquier momento podemos transformar en un elemento en línea a través de la propiedad display que ahora veremos, de forma que cada entrada

  • se sitúe en posición horizontal y no vertical como es su definición por defecto. Este efecto resulta extremadamente útil para poder realizar un menú de navegación horizontal sin tener que recurrir a otras medidas que a buen seguro serán poco inteligibles si se desactiva la carga de la hoja de estilos.

 

  • display : propiedad que nos permite variar el elemento de bloque (block, por defecto) a en línea (inline), pero incluye la propiedad list-item para notar su definición a nivel de lista (valor heredado) y none (no mostrará el elemento por pantalla).
  • list-style-type : define el elemento decorativo o de ordenación de los valores de la lista. Sus valores son: disc | circle | square | decimal | upper-roman | lower-roman | upper-alpha | lower-alpha.

7. El editor de CSS de Kompozer, CaScadeS

El editor Kompozer incluye un editor de hojas de estilo denominado CaScadeS que sirve para definir tanto hojas de estilo internas como externas en base a unas propiedades básicas.

Para iniciar el editor debemos ir al menú Herramientas y seleccionar la opción Editor CSS , de forma que nos aparecerá la siguiente ventana emergente:

El editor nos presenta por defecto el modo de visualización avanzado aunque incluye una opción para principiantes, donde únicamente definimos reglas para los selectores de clase o de etiqueta que deseemos. No permite añadir selectores de tipo ID. Pero recordemos que nuestra hoja de estilo al ser un fichero en formato de texto plano la podemos generar desde el Bloc de notas mismo.

Lo primero que deberemos hacer es crear una hoja de estilo. CaScadeS permite crear una hoja de estilo interna o externa. Nosotros vamos a crearla interna para comenzar a trabajar y generar un primer fichero de estilo. Posteriormente y una vez grabada la podremos importar desde el editor para completarla si fuera necesario.

  1. Lo primero que haremos es pinchar sobre el botón
  1. En el campo “Lista de medios” pondremos all para poderla aplicar a todos los tipos de agente de usuario. También pondremos un título a nuestra hoja y haremos clic sobre el botón Crear hoja de estilo .

A partir de este momento lo que necesitamos es ir creando las diferentes reglas de estilo en base a las necesidades de nuestro documento HTML. Para crear nuevas reglas haremos lo siguiente:

    1. Haremos clic sobre el botón Regla del panel izquierdo.
    2. En la derecha veremos que se nos muestran las opciones posibles para crear reglas.
    3. estilo con nombre : nos permite crear una clase
    4. estilo aplicado a todos los elementos del tipo : estilos para las etiquetas de HTML
    5. estilo aplicado a todos los elementos coincidentes con este selector : nos permite crear selectores de tipo ID (poniendo #nombre_selector), o bien estilos asociados como clase a una etiqueta HTML (poniendo la etiqueta.nombre_de_clase).

3. Ponemos el nombre de la regla.

4. Pinchamos sobre el botón Crear regla de estilo, automáticamente aparecerá en el panel izquierdo.

Para definir las reglas únicamente tendremos que ir explorando las diferentes pestañas con las opciones de estilo para: Texto, Fondo, Bordes, Caja, Listas, Aural. De esta forma iremos incorporando para cada regla las propiedades de estilo que den formato visual a nuestros elementos de la página.

Si queremos ver las definiciones de una regla previamente creada, seleccionamos la regla del panel de la izquierda y nos posicionamos en la pestaña general para verlas pero sin poderlas modificar desde esta opción.

Una vez creadas las propiedades de estilo, podemos cerrar la ventana del editor de CSS y si accedemos a ver el código de nuestra página desde la pastilla inferior ” Codigo fuente”, veremos cómo tenemos en la cabecera de nuestra páginas las reglas de estilo que hemos creado.

Acto seguido lo más importante será poder grabar estos estilos en una hoja externa para poder vincularla al resto de páginas una vez hemos obtenido los estilos que deseamos. Para ello abrimos de nuevo el editor CaScadeS y desde la primera pantalla veremos que en panel de la izquierda aparece nuestra hoja de estilo, pinchamos sobre ella y veremos en el panel de la derecha las características generales de la hoja de estilo y el número de reglas que incluye.

Haremos clic sobre el botón Exportar hoja de estilo y cambiar a la versión exportada y nos muestra una ventana flotante donde debemos especificar la ruta donde vamos a almacenar nuestra hoja de estilo, así como especificar el nombre del fichero. Es muy importante poner la extensión de fichero .css

8. Ejercicio

Para poder practicar las propiedades de estilo vamos a hacer un sencillo ejercicio para ir teniendo un poco de práctica. Si habéis realizado los ejercicios de la unidad 1.3 incluid una hoja de estilo que defina reglas para diferentes elementos de vuestras páginas “inicio.html” y “curso.html“. Debe haber un mínimo de 10 reglas, de las cuales como mínimo 5 deben ser de tipo clase.

En el caso de no haber realizado las prácticas de la unidad 1.3, cread dos páginas web, una llamada “inicio.html” y otra “curso.html” que deberán tener un vínculo entre ellas para poder saltar de una a otra, y en el contenido seguid los requisitos anteriormente expuestos.

Validador del código CSS del W3C

Es muy importante que siempre validemos nuestros ficheros de estilo de la misma forma que hacemos con las páginas web con las etiquetas de la estructura de las páginas, de esta forma sabremos si hacemos bien las cosas.

9. Bibliografía (consulta OCT 2019)


© Texto: autor/es del documento

© Presente edición: Máster en Información Digital. UPF Barcelona School of Management

Esta obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

 

Artículo 1.30 Cómo gestionar un hosting web

Artículo 1.30 Cómo gestionar un hosting web

Joan Teran

Joan Teran. Artículo 1.30 Cómo gestionar un hosting web. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Información Digital. Barcelona: UPF Barcelona School of Management.


Sumario

1.¿Qué es un servicio de hosting?

1.1. Tipologías de servicios de hosting

1.2. Algunos de los principales proveedores de hosting

1.3. Elementos a tener en cuenta en el momento de contratar un servicio de hosting

2. El hosting de DonDominio

2.0. Registrarse como usuario

2.1. Dominios: registro, transferencia y venta

2.1.1 Opciones de búsqueda y compra

2.1.2 El ciclo de vida de un dominio

2.1.3 Sistema de transferencia de dominios

2.1.4 Compra-venta de dominios

2.1.5 Precios

2.2. Alojamiento web

3. El panel de control de DonDominio

3.1. Gestión del nombre de dominio

3.1.1 Datos de contacto y Whois

3.1.2 DNS

3.1.3 Renovaciones manuales y automáticas

3.1.4 Transferencias de dominios

3.2. Gestión del hosting

3.2.1 La zona DNS

3.2.2 Correo electrónico

3.2.3 Las bases de datos

3.2.4 Gestión del máximo de disco y ocupación del disco

3.2.5 Acceso por FTP

3.2.6 Gestión de subdominios

3.2.7 Redirecciones

4. Instalación de WordPress en DonDominio

4.1. La alta de aplicaciones

4.2. Instalación de WordPress

5. Enunciado de las actividades (con evaluación)

Actividad 1

Actividad 2

Actividad 3

6. Bibliografía


Nota sobre la evaluación: de forma intercalada en el texto al final del artículo encontrará el enunciado de una o diversas actividades. Para superar esta unidad didáctica deberá realizar estas actividades redactando un informe con comentarios y si resulta pertinente una captura de pantalla de cada actividad para ilustrar su realización. Para entregar este informe deberá crear un documento en formato PDF y usar el espacio de entrega del aula virtual perteneciente a esta unidad didáctica.

1. ¿Qué es un servicio de hosting?

Esta unidad es una introducción a los servicios de hosting. Un servicio de hosting o de alojamiento web es una empresa que provee a usuarios un sistema para almacenar cualquier tipo de información accesible a través de internet. En internet, la información se almacena en ordenadores servidores, que normalmente hospedan sitios web u otras aplicaciones.

Como sabéis, vuestro Trabajo de Final de Máster consistirá en la elaboración de un sitio web con WordPress. Para ello tendréis que gestionar vuestra propia cuenta en un hosting. Esperamos que esta unidad pueda seros de utilidad no sólo por el hecho de conocer un servicio de hosting concreto, sino también como un pequeño paso más para poder cumplir con vuestro objetivo de superar el Trabajo Final del Máster.

1.1. Tipologías de servicios de hosting

Como bien podéis imaginar la gestión de estos servidores, constituye uno de los elementos críticos del funcionamiento de internet. Existe por ello un nicho de mercado importantísimo al cual se dedican múltiples empresas alrededor del mundo. La oferta es tan amplia como variada. Por ello existen múltiples formas de entender el web hosting.

Para empezar, y dejando de lado los servicios de alojamiento de imágenes o de video, contamos con los servicios gratuitos. Sin olvidarnos de aquellos servicios de pago como Hostalia que ofrecen períodos de hasta 6 meses o 1 año gratis, hay empresas como DinaHosting que, aparte de facilitar servicios de pago muy potentes y con un servicio al cliente resolutivo, eficiente y muy rápido, también cuentan con una oferta de hosting muy sencillo, sin banners ni publicidad, completamente gratis. Aún así, la mayoría de las opciones de este tipo cuentan con grandes limitaciones en términos de espacio disponible, tráfico de datos o uso de CPU, además normalmente incorporan banners y publicidad. En este post se analizan algunos de los pros y los contras del hosting gratuito: en síntesis, el hosting gratuito puede ser una opción interesante en algunos casos, pero no siempre ahorrarse un hosting de pago produce un ahorro real, más bien todo lo contrario.

Otro elemento de clasificación de los servicios de hosting son los compartidos versus los dedicados. En los primeros, varios clientes comparten un ordenador servidor. Se utiliza en casos de clientes pequeños o medianos, con blogs o sitios web sencillos, sin un gran desarrollo ni complejidad. Se trata de servicios económicos, que además permiten que los clientes se olviden de las tareas de administración del servidor. Por contra, al compartir un mismo servidor, y dando por descontado el menor rendimiento del servidor, los clientes cuentan con algunos riesgos, ya que un problema o un fallo derivado del funcionamiento de otro sitio web, puede comportar problemas al resto de clientes.

Los servicios dedicados son servicios potentes orientados para sitios web con mucho tráfico y comportan unos altos costes de servicio derivados del mantenimiento de la máquina y de los servicios de administración y configuración de la misma. Se pueden contratar servicios dedicados administrados, muy caros, que incluyen estos servicios de soporte y de mantenimiento del hardware y el software, o no administrados, en los que estos servicios corren a cargo del cliente.

Dentro de la gran cantidad de tipologías de negocio que han crecido en el terreno del hosting, debemos contar también el reselling. Ahí cabrían todos aquellos grandes usuarios que revenden servicios de hosting a otros usuarios, eso sí, con límites de capacidad de cliente.

También podemos encontrar los servidores virtuales, también llamados VPS, a través de los cuales se controla una máquina virtual que permite administrar dominios y aplicaciones. Son útiles para quienes quieren más potencia que en un servicio compartido pero con precios más económicos.

Finalmente hay que tener en cuenta también los servicios llamados de housing, consistentes en habilitar un espacio físico de un centro de datos para poner un servidor. La empresa solamente facilita el corriente eléctrico y la conexión a internet – la máquina la pone el cliente. Una variante importante de estos servicios son los de cloud housing, tecnología que permite a múltiples máquinas interconectadas a un grupo de medios de almacenaje actuar como un solo sistema. La seguridad del sistema está garantizada por múltiples servidores.

1.2. Algunos de los principales proveedores de hosting

Hay muchos proveedores de hosting en el mercado que pueden resultar interesantes. Aquí os ofrecemos una reseña mínima de 10 empresas que os pueden resultar de interés, aunque podéis encontrar muchos otros ránkings, reseñas y comparativas en internet como por ejemplo:

¿Cuál es el mejor hosting en España?

10 empresas de hosting que os pueden resultar de interés:

1 and 1

http://www.1and1.com/

Una de las empresas alemanas pioneras en el sector, con base en Europa, América y Asia, probablemente líder mundial con más de 14 millones de clientes. Su servicio es muy competitivo en cuanto a precios y calidad, aunque su servicio técnico es más bien lento. Desde 0,99 € al mes.

1984 hosting

https://1984hosting.com/

La mayor empresa de hosting de Islandia, ofrece un servicio de hosting verde y ético según defiende su propio lema: “Green, ethical web hosting”. Ofrecen la instalación de cualquier sistema operativo libre de forma gratuita, y también servicios de DNS libres y gratuitos. Se puede acceder a un servicio de hosting a partir de 4,99€ al mes.

Arsys

http://www.arsys.es/

Una de las empresas líderes del mercado español, con más de 275.000 clientes, cuenta con un servicio de atención al cliente muy valorado, y ofrece servicios con una relación calidad precio que los aconsejan para sitios web de grandes dimensiones. Constantemente generan ofertas y promociones para sus clientes. A partir de 2,45 € al mes.

Dina Hosting

https://ca.dinahosting.com/

De esta empresa gallega se puede decir que son un servicio de hosting que, además de ofrecer una amplia gama de productos, desde dominios hasta housing, pasando por VPS o resellers, tienen un excelente servicio de soporte. Resolutivo, eficiente y ràpido. A partir de 4,50 € al mes.

eHost.com

https://www.ehost.com/

Considerado uno de los mejores servicios de hosting web en la actualidad gracias a un panel de control y un constructor de páginas web muy valorados, y por un alto nivel de relación calidad-precio. Ofertas a partir de 2,75 al mes.

HostClear

https://www.hostclear.com/

Se trata de una empresa bastante nueva en el mercado, con un número muy elevado de servicios extras dentro de sus ofertas más básicas. Ofertas a partir de 2,99€ al mes.

Inmotion Hosting

https://www.inmotionhosting.com/

Otra empresa norteamericana con amplia oferta de servicios de hosting (compartido, administrado, reselling, VPS, servidores dedicados), diseño de sitios web y marketing online. Muy bien valorada por sus usuarios, incluyendo el servicio de soporte al cliente (en inglés). A partir de 5,99 $ al mes.

iPage

www.ipage.com/

Empresa norteamericana que se caracteriza fundamentalmente por su oferta supercompetitiva en cuanto a relación calidad-precio: precios muy bajos, juntamente con buenas prestaciones y ofertas de bonos y cupones para publicidad en Google Adwords, Facebook y Yahoo. Servicios a partir de 2,99 € al mes.

Nominalia

http://www.nominalia.com/

Empresa catalana de hosting, con vinculaciones alrededor de Europa, que también ofrece servicios de marketing online y de creación de páginas web. Tiene un muy buen servicio de atención al cliente, que incluye un trato telefónico personalizado. A partir de 3,57 € al mes.

Strato

https://www.strato.es/

Se trata de una de las primeras empresas de hosting en Alemania. Se implanta en España a partir de 2006 donde también desarrolla servicios de marketing digital, de SEO y de diseño e implementación de páginas web. Sus servicios de hosting tienen precios muy competitivos, aunque su punto débil es el servicio de atención al cliente. A partir de 0,89 € al mes.

1.3. Elementos a tener en cuenta en el momento de contratar un servicio de hosting

En primer lugar, habrá que tener en cuenta algo que puede parecer muy obvio: no cualquier servicio sirve para cualquier tipo proyecto. Por ello, antes de empezar a buscar hay que tener muy claro las características del proyecto que se quiere llevar a cabo:

  • ¿de qué presupuesto disponemos?
  • ¿cual es la duración del proyecto?: se trata de un proyecto temporal, de unas pocas semanas o unos pocos meses, o es un proyecto a largo plazo? Podemos encontrar muy buenas ofertas (algunas de ellas gratuitas) para periodos muy limitados de tiempo
  • ¿qué evolución se prevé para el proyecto? ¿Puede crecer con el tiempo? Si se puede prever la posibilidad que el proyecto crezca con el tiempo quizás puede ser interesante buscar ofertas que permitan tener en cada momento el hosting más adecuado a la medida del proyecto
  • ¿qué expectativas de tráfico tenemos para el proyecto? En función de estas expectativas, necesitaríamos más o menos ancho de banda
  • ¿qué sistema operativo necesitamos para el servidor? Normalmente, usan sistemas operativos Linux, pero podría darse el caso que necesitaramos otro sistema operativo

En función de estos requerimientos, habrá que analizar la oferta de hosting y sus características técnicas. Lo más importante será responder a estas preguntas:

  • ¿es posible gestionar a través de la misma aplicación dominios adquiridos por separado a distintos proveedores? Si se gestionan múltiples dominios es interesante tener acceso a una herramienta de control y gestión de los dominios que se puedan haber ido adquiriendo a distintos proveedores
  • ¿hay limitación de tráfico diario y/o mensual? Según a qué niveles de tráfico, tenerlo limitado puede no ser un problema; si se prevén niveles elevados de tráfico, hay que buscar ofertas que estén a la altura de las previsiones; en casos en que el tráfico se prevea voluble, con picos a lo largo del tiempo, puede ser interesante buscar tráfico limitado, pero con la posibilidad de contratar tráfico extra siempre que sea necesario
  • ¿cuál es la capacidad del servidor a nivel de procesamiento (CPU), a nivel de memoria disponible y a nivel de ancho de banda? revisar y comparar las características técnicas puede ayudar para tomar decisiones en momentos clave, siempre y cuanto se tenga el asesoramiento técnico adecuado; los datos técnicos, por si sólos, no explican nada, y para contextualizarlos se puede requerir ayuda técnica
  • ¿cuál es la ubicación de los servidores del servicio de hosting? No es esta una cuestión menor, por dos motivos: por un lado, por cuestiones técnicas. La ubicación geográfica de un servidor puede determinar la velocidad de acceso a los sitios web que éste ubique. También hay cuestiones legales asociadas a la ubicación del hosting y, finalmente, entre otros aspectos relacionados, la ubicación puede ser clave en el SEO. He aquí un artículo para ahondar en la cuestión:
    How To Choose a Best Hosting Location For Your Website?
    https://www.accuwebhosting.com/blog/how-to-choose-a-best-hosting-location-for-your-website/
  • ¿qué tecnología implementa? La combinación típica es la llamada LAMP: Linux, Apache, MySQL y PhP – ahora también con Java
  • ¿cuál es la disponibilidad del servicio? Este es un parámetro de la calidad del servicio, ya que es imposible garantizar el 100% de disponibilidad.
  • ¿qué servicios incluye la oferta? ¿incluye, por ejemplo un servicio de diseño de web? ¿o servicios de marketing digital? Normalmente las ofertas de las empresas de hosting incluyen una serie de servicios; cuantos más servicios se ofrezcan, y cuanto más útiles y potentes sean estos servicios, más puntos para la oferta que estemos analizando
  • ¿incluye un servicio de soporte al cliente 24/7?
  • ¿qué aplicaciones incluye la oferta de web hosting?
  • ¿ofrece un buen sistema de copias de seguridad?
  • ¿cuál es la forma de pago del servicio: mensual, anual?

En cualquier caso, la primera gran decisión será qué tipo de hosting que necesitamos, entre un hosting compartido, VPS, hosting dedicado o un plan administrado de hosting para WordPress. Si no nos importan algunas limitaciones a nivel de tráfico o de transferencia de datos, el hosting compartido será probablemente la mejor opción, mientras que VPS será lo más indicado en el caso de pequeñas empresas que necesitan una mayor potencia y un mayor rendimiento sin tener que asumir los costes de un servidor dedicado, que es la opción indicada para los sitios web con altos niveles de tráfico diario. Si se empieza con modestas pretensiones, pero con expectativas de crecimiento, se puede empezar con un hosting compartido, pero será bueno hacerlo en un servicio que permita evolucionar a otras posibilidades de hosting (VPS o dedicado). En cambio, si el proyecto es corto, de un mes o dos de alcance, será posible incluso contratar un servicio con el cual se pueda recuperar la inversión.

En el caso que seamos nosotros mismos los administradores de nuestro web y queramos introducir alguna mejora, puede ser bueno mantener una copia de nuestro web en un servicio de hosting gratuito o con prestaciones mucho más bajas con el objetivo de probar antes los cambios que queremos implementar.

En resumen es importante saber bien qué queremos y qué necesitamos antes de buscar el servicio más adecuado de hosting. No estará de más, en cualquier caso, buscar referencias – tanto a nivel de conocidos, como en foros especializados – sobre los diferentes servicios existentes. La proliferación de servicios de hosting implica un gran número de buenas oportunidades para nuestro proyecto, pero para encontrarlas habrá que saber buscarlas y valorarlas.

2. El hosting de DonDominio

DonDominio es una empresa ubicada en Mallorca especializada en el registro y la gestión de dominios, y dedicada también a la prestación de servicios de hosting. Para la gestión de todos estos servicios DonDominio ofrece una aplicación online de diseño propio que permite un control prácticamente total y en tiempo real.

DonDominio tiene múltiples acreditaciones de organismos de gestión de nombres y extensiones de dominio que le permiten gestionar estos de forma directa sin depender para ello de terceros. De esta forma puede proveer de dominios de tipo genérico, territoriales y también de la larga lista de nuevos dominios que cubren multitud de áreas que permiten definir de forma más precisa un proyecto web determinado.

El resto de servicios están necesariamente vinculados a los dominios contratados o gestionados a través de DonDominio: servicios de hosting o alojamiento de webs o de correo electrónico; certificados SSL para facilitar transmisiones seguras de información; y otros servicios de asistencia a medida para construir webs o para instalar otras aplicaciones.

DonDominio es un hosting más dentro de una enorme oferta nacional e internacional. Probablemente no sea el mejor hosting para todos los casos ni tampoco el más económico. Tal como se ha indicado, hay que analizar las características y objetivos de cada proyecto para seleccionar aquel servicio que encaja mejor.

En el caso concreto del máster, buscábamos especialmente un hosting que tuviera una interfaz amigable ya que muchos de los estudiantes usarán por primera vez un servicio de este tipo. Este ha sido el principal motivo para usar DonDominio para realizar las actividades del máster. No hay otro motivo, no tenemos descuentos ni ningún tipo de comisión.

Nuestro principal objetivo al usar DonDominio es mostrar en detalle un servicio concreto de hosting para que sirva de modelo para luego poder aplicar estos conocimientos a cualquier otro caso y aprender de forma rápida su funcionamiento.

2.0. Registrarse como usuario

Además de ofrecer múltiples opciones de pago, DonDominio aplica un sistema de fidelización de clientes basado en los llamados Dominitis, un sistema de fichas que los usuarios acumulan a medida que utilizan el servicio y que luego pueden intercambiar por el registro de dominios o incluso por servicios de alojamiento mini o básico.

Aun así, antes de poder comprar productos en DonDominio hay que registrarse como cliente:

registro.png

Fig. 1. Esta es la pantalla de registro de usuarios con todos los campos que hay que rellenar e un primer momento

Para poder comprar servicios hay que entrar acceder a “Mi cuenta” y desde allí a “Insertar dinero en cuenta”, cosa que puede hacerse con una tarjeta de crédito, vía PayPal, vía transferencia bancaria o a través del sistema de domiciliación bancaria.

insertar saldo en cuenta.png

Fig. 2. Para poder comprar productos en DonDominio hay que registrarse antes como cliente y añadir dinero en la cuenta.

DonDominio ofrece un sistema de gestión de la facturación que permite incluso generar modelos 347 para facilitar la gestión fiscal en caso de superar los 3.000 € de facturación al año, de acuerdo con la legislación tributaria española.


Nota para las actividades de esta unidad

Para la actividad de esta unidad usaremos los datos de un usuario registrado en DonDominio con las que podreis entrar y realizar las actividades, con cuidado de no realizar acciones críticas e irreversibles:


2.1. Dominios: registro, transferencia y venta

Antes de entrar a analizar el funcionamiento de la herramienta que nos ofrece DonDominio, vamos a hacer un recorrido por las principales acciones que podemos acometer con ella en relación a los dominios. A saber: buscar, registrar, transferir y vender. E incluso, si atendemos al ciclo de vida de los dominios, habría que añadir renovar. Veamos.

2.1.1 Opciones de búsqueda y compra

DonDominio ofrece básicamente dos opciones de búsqueda de dominios. Por un lado, un sistema sencillo de búsqueda, donde podemos introducir directamente el nombre del dominio que queremos (sin su extensión).

busca sencilla.png

Fig. 3. Pantalla de búsqueda sencilla de dominios. Simplemente escribe el nombre del dominio sin extensión…

El otro sistema, llamado de búsqueda masiva, permite consultar a la vez la disponibilidad de dominios en función de múltiples palabras clave, cruzadas con aquellas extensiones en las que estamos interesados.

busca masiva.png

Fig. 4. Pantalla de búsqueda masiva de dominios. Puedes escribir múltiples palabras clave y combinarlas con las extensiones que consideres oportunas

En la página de resultados encontramos todas las posibles combinaciones del nombre del dominio con sus respectivas extensiones, y toda la información necesaria para evaluar las posibilidades que tenemos.

resultados busca.png

Fig. 5. Pantalla de resultados de la búsqueda

La página de resultados informa de si el dominio está o no disponible, su coste por año (¡cuidado, sin IVA!), y, en el caso en que esté ocupado, nos proporciona un enlace para acceder al sitio web y otro para acceder al Whois, eso es, el registro que incluye la información relativa a un nombre de dominio o un IP, incluyendo los datos del propietario y el administrador. Junto con toda esta información, hay un botón que permite activar el proceso de compra (“añadir al carrito”, si el dominio está disponible; o “comprar” si el dominio está en venta), o de transferencia.

También es posible filtrar los resultados obtenidos para visualizar solamente los libres, los ocupados o todos a la vez.

Una vez encontramos el dominio que buscamos, pulsamos en el botón de “añadir al carrito” tenemos que pulsar sobre el botón que encontramos en la parte superior derecha de la pantalla, donde aparece el número de productos que tenemos en el carro y su precio (ahora sí, con IVA incluído).

carro de la compra.png

Fig. 6. Mira qué has añadido al carro de la compra y concreta la compra en esta página

2.1.2 El ciclo de vida de un dominio

Cada dominio tiene su propio ciclo de vida que es importante conocer. Lo ideal es tener presente el periodo para el que queremos contratarlo y, si necesitamos prolongar este periodo, renovarlo antes de que este expire.

A parte de su periodo activo, los dominios pueden tener otros 3 ciclos. Así, cuando expira el periodo para el que fue contratado se entra en el periodo de gracia, durante el cual es posible renovarlo por el precio habitual. Es posible hacerlo sólo con pulsar el botón de renovación, y al cabo de unas horas vuelve a funcionar de forma normal. Si no se renueva, se entra en el periodo de castigo, durante el cual el dominio deja de ser renovable al precio normal, aunque puede ser todavía recuperado a un precio más alto. La recuperación del dominio se puede hacer vía ticket en el área de soporte y comporta . Si no se recupera, se entra directamente en el periodo de eliminación, durante el cual ya no es posible su recuperación. Cuando este expira, el dominio es eliminado del registro y pasa a estar disponible de nuevo.

2.1.3 Sistema de transferencia de dominios

También puedes transferir otros dominios a DonDominio para gestionarlo desde tu cuenta con todas sus herramientas. Puedes hacerlo de una en una a través del sistema de transferencia simple, o traertelos en bloque (hasta 20 dominios al mismo tiempo) a través del sistema de transferencia múltiple.

Para ello deberás permitir este proceso a través del agente registrador previo, sino, te va a ser imposible hacerlo.

Dado que los distintos dominios están gestionados por diferentes agencias de registro, requieren de pautas diferentes para llevar a cabo transferencias. Ello conlleva también períodos variables de transferencia, aunque durante los mismo los dominios continúan activos.

Por ejemplo:

  • Si tienes un dominio .COM, .NET, .ORG, .BIZ, o .INFO, necesitarás el AuthCode (o código EPP): se trata de la contraseña que te debe facilitar tu agente registrador para poder aceptar la transferencia
  • Para los dominios .ES deberás tener acceso a la cuenta de correo electrónico del contacto administrativo

También es posible transferir dominios (hasta 20 cada vez) a otras cuentas de DonDominio a través de la opción Push de Dominios.

2.1.4 Compra-venta de dominios

Mediante el registro en la plataforma SedoMLS es posible conectarse con otros servicios de registro de dominios y, con ello, facilitar la venta de nuestros dominios bien fijando un precio, o bien emplazando los interesados a hacer ofertas; también es posible venderlo a través de sistemas de subasta o incluso mediante un agente de negociaciones.

2.1.5 Precios

Puedes consultar los precios del registro de dominios en la tabla de tarifas, que ofrece información no solamente del precio de registro, si no también de los costes de renovación de los mismos e incluso de transferirlos al sistema de gestión de DonDominio. La tabla también aporta información adicional como por ejemplo en relación a los requerimientos de residencia (en el caso de los dominios .es, se deberán aportar datos de una persona física y no de una empresa en el caso de que el contacto administrativo, técnico o de facturación resida en España), o relativos al sistema de transferencia.

2.2. Alojamiento web

DonDominio tiene 6 ofertas de hosting diferentes para diferentes niveles de uso.

  • Redirección y parking: es un servicio gratuito que, a partir de un nombre de dominio propio, permite aprovechar recursos gratuitos de internet como podrían ser un blog o una dirección de correo para poder controlar la zona DNS y poder redireccionarla a cualquier otro recurso de internet. Algunas de las prestaciones que ofrece DonDominio son la personalización de la página de parking a partir de más de 40 plantillas, establecer un formulario de contacto para la venta del dominio o para cualquier otro menester, enlazar con tus redes sociales o hacer un seguimiento de las estadísticas del web a través de Google Analytics.
  • Mail hosting: a partir de 10€ al año es posible contratar un servicio de correo electrónico con espacio para el web de hasta 100MB y la gestión de hasta 10 cuentas de correo electrónico.
  • Alojamiento Mini: se trata de la oferta más básica de hosting web por 1€ al año. El espacio disponible es de hasta 100MB, con un tráfico limitado a 5GB al mes y permite la gestión de 10 cuentas de correo electrónico con 50MB. Eso sí: no dispone de soporte PHP, ni espacio de MySQL, ni el instalador de aplicaciones del que sí se puede disponer en el resto de paquetes de alojamiento más avanzados (a partir del básico).
  • Alojamiento Básico: El paquete básico cuesta 25€ al año (poco más de 2€ al mes) y cuenta con 10 veces más memoria web que el mini (1000MB), tiene acceso a hasta 12GB al mes de tráfico web y hasta 100 cuentas de mail disponiendo de 300MB de memoria. DonDominio sí facilita espacio para las bases de datos MySQL (hasta 100MB) y los servicios fundamentales de soporte PHP/CGI, instalador de aplicaciones y web constructor (una aplicación para facilitar el diseño de páginas web en pocos pasos).
  • Alojamiento Profesional: Por 60€ al año, el paquete profesional cuenta con más memoria (5000MB), más tráfico web (hasta 30GB al mes), más cuentas y más memoria para el correo (150 cuentas y 1000MB), y también más espacio para MySQL (400MB). A diferencia de los otros servicios más básicos da acceso a soporte SSL compartido.
  • Alojamiento Avanzado: Cuesta 130€ al año y permite doblar prácticamente todas las características de memoria del modo profesional: 10.000 MB de memoria web, 60GB al mes de tráfico web, 200 cuentas de correo electrónico con hasta 2000MB de memoria y 600MB de memoria del espacio MySQL.

3. El panel de control de DonDominio

Una vez entramos en nuestra cuenta de DonDominio tenemos acceso a los botones básicos de nuestro panel de control que se despliegan en la parte superior de la pantalla:

Barra superior de la pantalla.png

Fig. 7. De izquierda a derecha: el botón “Admin” encierra un menú desplegable; los iconos de la bola del mundo y del servidor dan acceso al listado de dominios y de alojamientos; el candado da acceso al menú de certificados SSL y el icono de “atención” da acceso al gestor de tickets de soporte; al otro lado de la barra superior, el menú desplegable de usuario.

El botón de “Admin” es un menú desplegable a través del cual podemos acceder a la pantalla “Resumen de mi cuenta”, en la cual podemos visualizar rápidamente los principales elementos que configuran nuestra cuenta – empezando por el estado de la cuenta y el saldo disponible – y que nos permiten acceder a sus respectivos menús de gestión: número de dominios contratados, número de servicios de hosting, certificados SSL, y tickets de soporte.

Esta primera página de resumen también incluye información sobre novedades o sobre el sistema, por ejemplo si hay dominios en mantenimiento, notificaciones para el usuario, gráficos para visualizar los dominios que se gestionan, y finalmente se visualiza también una tabla con datos sobre la facturación de la cuenta.

Antes de entrar en los apartados de gestión del dominio y gestión del hosting, veremos dos de las posibilidades a las que podemos acceder desde el menú principal y que pueden ser interesantes para la gestión cotidiana de DonDominio: por un lado, el menú de facturación, en el que podemos acceder a todas las facturas, recibos y albaranes derivados de nuestra actividad en DonDominio, así como a un buscador que nos permite filtrar todos estos documentos para visualizar aquellos que nos interesan; por el otro lado, el menú de herramientas, a través del cual podemos acceder a herramientas de consulta, operaciones sobre dominios, al mercado de dominios (para acceder a su venta) o las herramientas SSL.

Para acceder a la parte de gestión del dominio o del hosting debemos clicar sobre cualquiera de los dos iconos de la parte superior de la pantalla, que nos dan acceso al listado completo de dominios y alojamientos de los que disponemos, junto con un menú de filtros para acceder sólo a aquellos que deseamos:

mis dominios.png

Fig. 8. El menú con el listado de dominios y de hostings, debajo del filtro de búsqueda con múltiples opciones.

El menú de la información básica sobre los distintos servicios contratados, incluyendo su estado en el ciclo de vida y la fecha de creación y de expiración. Desde este mismo menú es posible llevar a cabo determinadas acciones: para empezar, acceder a las páginas de gestión de dominio y de alojamiento. Para ello simplemente hay que clicar encima del servicio que queremos gestionar. Por otro lado, acceder a la renovación de los servicios; y finalmente, también descargar los listados de dominios o alojamientos en diferentes formatos: CSV, excel, PDF y XML.

3.1. Gestión del nombre de dominio

3.1.1 Datos de contacto y Whois

Uno de los elementos fundamentales de un dominio son los datos del registro. Los datos del titular identifican al propietario y, por tanto, responsable legal último del dominio; los del administrativo, al responsable de la gestión del mismo; los datos de facturación indican a quién (o a qué empresa) hay que cargar los gastos vinculados al dominio; mientras que el técnico es la persona responsable del equipo de soporte técnico al cargo del dominio. Hay que rellenar todos los campos, aunque sean la misma persona, y hay que poner los datos reales, ya que los organismos de registro realizan controles periódicos de los datos y tienen la potestad de suspender el dominio.

contactos don dominio.png

Fig. 9. Podemos visualizar y modificar los datos administrativos, de facturación, técnicos y del titular a través de las pestañas correspondientes

Los datos de contacto son los que aparecen en el Whois, la base de datos que almacena los datos vinculados a dominios e IPs relativos a su propietarios, pero también a sus registradores, así como los DNS del dominio. Whois es una base de datos de dominio público, aunque es posible, a través de Whois Privacy, ocultar tus datos del dominio público.

whois privacy.png

Fig. 10. En la pestaña Whois de la página de administración del dominio se puede activar el Whois Privacy sólo con un clic y de forma completamente gratuita

También en la página principal de administración del dominio, en el apartado “Acciones” se puede fácilmente acceder a la activación de Whois Privacy:

Acciones admin.png

Fig. 11. La página principal de administración del dominio también permite activar o desactivar el Whois Privacy.

3.1.2 DNS

Los DNS (Domain Name System) son bases de datos que administran información asociada a nombres de domino. Detrás de cada nombre de dominio hay un servidor donde la web está hospedada, y cada ordenador conectado a internet, igual que cada dominio, disponen de una IP pública. Los DNS guardan la información de las IPs asociadas a hosts, los servidores que hospedan los sitios web, con lo que son imprescindibles para dirigir las peticiones de los usuarios que introducen el nombre de un dominio hacia el IP asociado a él. Existe una red tupida de DNS alrededor del mundo que facilitan que cualquier ordenador pueda acceder a cualquier página web alrededor del mundo. Aún así, hay unos pocos cientos servidores alrededor del mundo llamados root servers (o servidores raíz) que forman parte de la estructura crítica de internet ya que forman parte de la parte superior de la estructura de denominación de sistemas situados en internet.

Este sintético post (en inglés) de Chris Gonyea explica de forma sencilla y accesible cómo funcionan los DNS.

De entrada DonDominio asocia cada dominio de los que tiene registrados a dos de sus cinco DNS:

ns1.dondominio.com

ns2.dondominio.com

ns3.dondominio.com

ns4.dondominio.com

ns5.dondominio.com

gestió de DNS.png

Fig. 12. El gestor de dominios permite visualizar los DNS asociados a nuestro dominio, modificar estos DNS y comprobar su propagación.

Cada uno de estos servidor tiene criterios y periodos propios de actualización que oscilan entre las 24 y las 48 horas. Además, hay que tener en cuenta que cada vez que se introduce una modificación en los DNS de nuestro dominio, los cambios tardan entre 6 y 12 horas en propagarse. Mientras esto no pasa, el dominio seguirá apuntando al anterior DNS.

Un cambio de DNS puede estar justificado por diferentes motivos. Puede haber motivos técnicos que lo justifiquen, como por ejemplo la necesidad de contar con un servidor DNS más rápido y potente que permita dar respuestas más inmediatas a los usuarios que quieren entrar en nuestros sitios web. También pueden aconsejarlo motivos de seguridad o incluso requerimientos de la propia extensión del dominio. Hay muchos usuarios que prefieren gestionar ellos mismos su propio servidor DNS.

En DonDominio la modificación de los DNS asociados a nuestro dominio se puede hacer de dos maneras. La primera es optando por otros servidores de DNS de DonDominio:

DNS servidores Don Dominio.png

Fig. 13. Si optamos por otros servidores de DonDominio sólo debemos pulsar el botón de modificar, teniendo en cuenta que durante el periodo de modificación – de hasta 24 horas – el dominio no estará accesible.

La otra es optando por servidores personalizados:

DNS servidores personalizados.png

Fig. 14. Si optamos por servidores personalizados debemos introducir la IP de nuestros DNS alternativos y pulsar modificar.

Hay una variante interesante en la cuestión de la gestión de los DNS: los glue records. Se trata de entradas que podemos crear en el registro del dominio o del subdominio para que él mismo pueda actuar como DNS. Pueden ser muy útiles para aquellos usuarios que como nombre del servidor utilizan subdominios de su propio dominio: cuando nuestro dominio es ejemplo.com y nuestro DNS es ns1.ejemplo.com, pasa que cuando un usuario requiere el nombre de nuestro dominio, es redirigido al DNS que, al ser un subdominio, es redirigido al dominio puesto que para acceder a un subdominio debemos acceder primero al dominio. Es obvio el efecto bucle que ello conlleva. Los glue records actúan como etiquetas pegadas a nuestro dominio para poder resolver estas peticiones sin necesidad de acceder a un DNS.

glue records.png

Fig. 15. Para generar el Glue Record hay que introducir el nombre del servidor DNS e introducir su IP.

3.1.3 Renovaciones manuales y automáticas

Por defecto, el sistema de renovación de dominios contratados es manual. De este modo, renovar el dominio es tan sencillo como pulsar el botón de renovar del dominio deseado en el listado de dominios disponibles…

renovar dominio en listado.png

Fig. 16. Pulsando el botón “renovar” la renovación del dominio se añade al carrito de la compra. Solamente faltará ejecutar el pago.

…o hacerlo en la página de administración del dominio en cuestión:

renovar dominio en administración.png

Fig. 17. Pulsa “renovar dominio” y mandaras el dominio al carro de la compra.

Pero es posible también establecer criterios automáticos para la renovación de nuestros dominios. Por un lado, seleccionando la opción “dejar expirar” en nuestro menú de administración. Esta opción toma sentido si sabemos que el proyecto web al cual este dominio está vinculado es un proyecto que seguro que va a estar finalizado en el momento en que expira el dominio. Activar esta opción permitirá que nos olvidemos del tema en cuanto esto pase.

dejar expirar.png

Fig. 18. Pulsa “renovar dominio” y mandaras el dominio al carro de la compra.

Por otro lado está la opción de renovación automática. Para poder activarla, hay que ir a la opción de “Preferencias” que encontramos en el menú desplegable de usuario, en la parte superior derecha y entrar en la opción “Auto renovaciones”:

auto renovaciones.png

Fig. 19. Para poder activar la renovación automática de un dominio debemos activar primero la casilla de ”habilitar funcionalidad en mi cuenta”, cosa que permitiría activar la renovación automática tanto de dominios como de servicios de alojamiento, o la casilla “Marcar como auto renovable los nuevos registros/transferencias de dominio”. Recordad activar el botón “Guardar preferencias” antes de volver al menú de administración del dominio.

Una vez hemos activado la funcionalidad de “auto renovaciones” de la cuenta es posible elegir la pestañita de renovación automática en el menú de administración del dominio.

3.1.4 Transferencias de dominios

La única condición para la transferencia de dominios hacia tu cuenta de DonDominio es que los dominios que queremos esté en estado transferible. Si por ejemplo nosotros queremos transferir nuestro dominio tendremos que asegurarnos que el bloqueo de transferencia esté desactivado en la página de administración:

bloqueo de transferencias desactivado.png

Fig. 20. Por defecto el bloqueo de transferencia está desactivado

Si está disponible, el dominio pasa a nuestro carrito de la compra. En cuanto se activa el proceso de pago, DonDominio inicia las gestiones con el registrador. Recibirás un email en el correo que consta en el dominio y tendrás que seguir las instrucciones. Hay que tener en cuenta que cada extensión exige sus propios requisitos para el proceso de transferencia.

El push de dominios, consiste en la transferencia de dominios entre distintas cuentas de DonDominio. Podemos acceder a esta opción a través del menú de herramientas del Administrador:

push de dominios.png

Fig. 21. El push de dominios es una acción sencilla que requiere solamente dos datos vinculados al dominio que se quiere transferir: el nombre del receptor y su código de autorización.

Necesitaremos el nombre del usuario al cual queremos transferir el dominio, introducir el código de autorización que este nos facilitará (si es necesario) e introducir el o los dominios (hasta 20) que queremos transferir. La transferencia del dominio conlleva también la del plan de alojamiento y su contenido al que están vinculados. Una vez introducidos estos datos sólo faltará activar la casilla de acuerdo con la transferencia y pulsar el botón de transferir.

El código de autorización es necesario para aquellos casos en los cuales el usuario lo requiere. Cada usuario puede configurar en “Mis preferencias” la disposición a aceptar transferencias internas en función de 4 opciones:

  • no aceptar nunca transferencias
  • usar un código único (opción por defecto): es decir, un código que sólo puede ser usado una vez; cada vez que sea usado, el sistema generará uno nuevo
  • usar un código fijo: es personalizable y que será el mismo para tantas transferencias como se desee
  • aceptar todas las transferencias, para lo cual no es necesario ningún código

3.2. Gestión del hosting

3.2.1 La zona DNS

La zona DNS del administrador del alojamiento permite apuntar entradas de nuestro sitio web a servidores externos con el objetivo de usar servicios de correo electrónico, blogs alojados en otras plataformas, o incluso una página web que podamos alojar en nuestro propio ordenador. Podéis consultar la página de ayuda para ver cómo debéis usar estas funciones.

zona dns hosting.png

Fig. 22. La zona DNS permite vincular nuestro hosting con servicios externos de correo electrónico, blogs o aplicaciones alojadas en otros servidores.

Normalmente, si hemos adquirido un dominio y un servicio de hosting que van relacionados la zona DNS viene configurada. Ahí van algunos elementos para poder leer la configuración.

  • En la columna “Zona DNS” aparece la petición que deberá resolverse
  • En la columna “Valor” aparece la respuesta que el DNS debe dar en función de la petición y del tipo de petición que se haya formulado
  • “Tipo” define el tipo de respuesta que deberá resolver la petición
    • A: el valor deberá ser numérico, es decir, una IP típica (IPv4)
    • AAAA: el valor deberá ser una IP en formato IPv6
    • MX: el valor equivaldrá al nombre de dominio de un servidor de correo electrónico que podrá tener diferentes niveles de velocidad de respuesta; habrá, pues, que asignarle un nivel de prioridad entre “1” y “100”
    • CNAME: sirve para llamar a servidores externos, sean dominios o subdominios; por tanto debe incluir una dirección
    • TXT: se acostumbra a usar para cuestiones de seguridad con el correo electrónico. Asocia texto a un subdominio en función del servicio que le llama. Tomando como ejemplo uno de los elementos de nuestro sitio web, “v=DKIM” define el protocolo, “k=rsa” el modo de encriptación, y…
      “p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDoxeZyUtdIcBO
      1KtEeEP0qldlkTHyFTqxd1JZvyOSaYD4mJZf156BS5AgmJgR4uXaBJRQG
      PPdbkMJzeG+dTOG24r1D8yMUTo89OHWU3qUI0Lo2U4jPNmwWZ9znQU
      Ymptmp/l9PWO2V2sX8cStJ9ZyhxsSPzAg4X+quRzaVvqFONQIDAQAB”
      equivaldría a la firma digital que nuestro servicio de hosting proporciona para garantizar que el correo enviado procede del servidor que está autorizado para hacerlo

3.2.2 Correo electrónico

Como prácticamente cualquier otro servicio de hosting, DonDominio facilita un número de cuentas de correo electrónico. En el caso de nuestra cuenta básica de alojamiento, podemos disponer de hasta 100 cuentas de correo electrónico, 100 alias de correo electrónico y 300MB de espacio disponible para estas cuentas. El sistema de gestión de correo es muy sencillo.

Podemos acceder a la creación de una cuenta de correo en la pestaña correspondiente de nuestro panel de administración:

cuentas de correo.png

Fig. 23. Generar cuentas de correo electrónico es muy sencillo des del administrador de DonDominio.

Crear una cuenta de correo es tan fácil como entrar en esta opción, introducir la dirección que queremos generar y la contraseña provisional (que luego el usuario podrá cambiar). Por lo demás existen dos opciones alternativas: por un lado añadir un comentario (dirigido al propio administrador – ¿por ejemplo para identificar el usuario de cada cuenta?), y por el otro activar (o no) el filtro anti-SPAM. Por otro lado, desde el menú de gestión del administrador es posible modificar las contraseñas, activar mensajes de vacaciones y, obviamente, eliminar la cuenta.

La gestión de alias de correo es todavía más sencilla: crearlos simplemente requiere introducir el nombre del alias de correo y las direcciones de correo electrónico a las que se quiere vincular. Opcionalmente, se puede añadir un comentario que sólo verá el administrador.

3.2.3 Las bases de datos

Cada plan de alojamiento de DonDominio permite un determinado número de base de datos asociadas a un espacio de memoria determinado. En el caso de nuestro plan básico son hasta 100MB de memoria para 10 bases de datos MySQL, un gestor de bases de datos relacional de software libre.

La configuración de cada una de estas bases de datos va asociada a su nombre, a un usuario y requiere definir una contraseña, pudiéndose definir un comentario para que el administrador pueda identificarla correctamente y una casilla que permite activar el permiso para su acceso externo.

Las bases de datos son elementos críticos para el funcionamiento de un sitio web que permiten dotar de autonomía a sus administradores para su mantenimiento y la actualización desvinculando sus contenidos de la parte gráfica y viceversa.

Un administrador estándar no tiene porqué tener conocimiento de la gestión de estas bases de datos, para lo cual puede puede contar esporádicamente con un soporte técnico con los conocimientos adecuados.

Aún así, puede ser útil saber cómo acceder a determinados datos. Por ejemplo es posible acceder al password de un determinado usuario de nuestro sitio web en el caso que este lo haya perdido y no tenga acceso tampoco a la dirección de email para su recuperación. Deberemos guardar mucho cuidado en no cambiar ningún elemento de su configuración ni tampoco ningún dato. Se trata, como ya hemos dicho, de un elemento crítico del funcionamiento del web.

Para hacerlo debemos entrar en la base de datos siguiendo el enlace de acceso e introduciendo el nombre de la base de datos y su contraseña:

Entrar en base de datos.png

Fig. 24. El enlace “Admin” remite al interfaz de entrada en la base de datos.

Una vez dentro hay que buscar la base de datos de usuarios del sitio web, que podremos identificar fácilmente como wp_users:

interficie basededatos.png

Fig. 25. Clicando sobre la carpeta wp_users accederemos a los datos de los usuarios del sitio web. Atención: !no tocar ningún elemento!

 

password usuarios bbdd.png

Fig. 26. Si entramos en la base de datos de usuarios podemos visualizar los datos de todos los usuarios, editarlos, copiarlos o incluso borrarlos. Atención: !no tocar ningún elemento!.

 

Como podemos ver a simple vista los passwords de los usuarios están debidamente encriptados. La solución pasa por generar un nuevo password. Aún así, para la gestión y la administración normal de usuarios del sitio web es preferible que usemos las funcionalidades del gestor de contenidos directamente.

3.2.4 Gestión del máximo de disco y ocupación del disco

En el apartado recursos de la página del administrador del hosting podemos visualizar las principales estadísticas relativas al uso general de los recursos de nuestro servicio de hosting: desde la ocupación del disco, el tráfico consumido – aunque para analizarlo más detalladamente podemos acceder al apartado de tráfico web, el número de subdominios generado, las cuentas y los alias de correo, las cuentas FTP, las base de datos y el espacio que estas ocupan. La representación de estos datos es clarísima: uso actual, capacidad máxima, y una barra de porcentaje de uso.

Los servicios de hosting permiten gestionar la memoria y el tráfico disponible, escalando el servicio a las necesidades puntuales que pueda haber. Por ejemplo contratando, con unos pocos clics, servicios de cloud hosting con CPUs específicos, servidores específicos y una cantidad de tráfico y de memoria específicas para eventos para los que se pueda prever mucha más actividad y tráfico en nuestro sitio web. O ajustando nuestras necesidades de memoria a los requerimientos del momento. O por ejemplo, pagando a parte los excesos de consumo de memoria y de tráfico que nuestro web pueda registrar.

En el caso de DonDominio, para acceder a más servicios de memoria, más tráfico disponible o más bases de datos deberíamos acceder a un plan de hosting superior al que tenemos contratado. Para hacerlo hay que pulsar sobre “Renovar alojamiento” en la zona de “Renovación y ampliación” del panel de administración y pulsar “Cambiar el servicio (Elegir otro plan de alojamiento” en la ventana que nos aparece. A partir de ahí, “Añadir al carrito” y completar el proceso de compra de la forma habitual. Se puede escoger el plan que más convenga, no necesariamente el inmediatamente superior, incluyendo un plan inferior.

3.2.5 Acceso por FTP

Los servicios de hosting también facilitan el acceso a la información que guardamos a través del sistema FTP. Como sabréis, FTP es un protocolo estandarizado que permite la transferencia de ficheros entre ordenadores con cualquier sistema operativo. A cada plan de alojamiento le corresponde su propio límite de cuentas FTP, que en nuestro caso llegan a 100.

DonDominio facilita el acceso a nuestra cuenta FTP desde la página de administración del hosting:

cuenta FTP.png

Fig. 27. Para acceder a nuestras cuentas de FTP es tan sencillo como seguir este enlace, entrar el usuario y la contraseña.

Dentro del panel de control de nuestro FTP podremos acceder a las carpetas de archivos que allí tenemos guardadas. Concretamente, los archivos correspondientes al sitio web que alojamos tiene que estar dentro del directorio public. Tener acceso a estas carpetas es imprescindible para tener el máximo control sobre nuestro sitio web aunque sea a través de nuestro programador o nuestro propio servicio técnico.

Por ejemplo, el archivo wp-config.php es un archivo crítico para la configuración de nuestra página de WordPress y el servicio de hosting que la aloja y tener acceso a él permite tener acceso a información crítica para la gestión del sitio web.

3.2.6 Gestión de subdominios

Los subdominios son direcciones web que forman parte de un dominio concreto, ya sea como una subdirección, ya sea como un anexo de la página. Su pueden dar múltiples usos a un subdominio, pero en cualquier caso se pueden conceptualizar como subdivisiones de carácter organizativo o administrativo de un dominio concreto. Los subdominios permiten, en definitiva, crear sitios web relacionados con el web principal que apuntan a carpetas del mismo host.

En nuestro caso, y debido a la inmensa difusión del World Wide Web, tenemos creado un subdominio http://www.redessocialesperdidas.com.es que nos lleva a nuestro propio dominio redessocialesperdidas.com.es

Generar un subdominio es tan sencillo como definir su nombre y señalar la carpeta situada en nuestro FTP en la que tenemos almacenado el sitio web que queremos que se visualice:

crear subdominio.png

Fig. 28. Generar un subdominio: entrar su nombre y el directorio de FTP en el que hemos alojado la carpeta de archivos del web que queremos visualizar

3.2.7 Redirecciones

Las redirecciones permiten apuntar desde un dominio a otro dominio o, más específicamente, a una URL de un dominio. Hay tres tipos de redirección:

  • FRAME: permite mantener la URL del dominio sin cambiar la URL del redireccionamiento en el navegador. En otras palabras: la URL que introduce el usuario es la que continuará apareciendo aunque el redireccionamento le mande a otra página con otro URL. Para esta opción debemos definir algunas opciones adicionales (y opcionales): el título, la descripción y las palabras clave. Véase este ejemplo:

redireccionamiento FRAME.png

Fig. 29. En el caso de este ejemplo, cuando accedierais a la página http://redesocialesperdidas.com/analisis se os redireccionaría hacia la página del Servicio de Alerta http://docdigital.typepad.com/ aunque la URL que se visualizaría en vuestro navegador sería la URL de origen

  • Redirección permanente (HTTP 301): és útil cuando tenemos una página concreta de nuestro sitio web que es muy popular pero de la que necesitamos cambiar la URL; también es útil cuando hay varias URL que dan acceso a la página principal del sitio; e incluso cuando combinamos 2 sitios web y queremos garantizar que los enlaces obsoletos apuntan a páginas determinadas. Si simplemente cambiásemos la URL, podríamos tener algunos problemas: por ejemplo, aquellos usuarios que hubieran guardado la página en favoritos no conseguirían llegar a la página; además, la nueva página perdería Page Rank por cuanto no habría enlaces que apuntaran a ella. La redirección permanente hace que los motores de búsqueda sean redirigidos automáticamente a la nueva URL sin ningún tipo de penalización.
  • Redirección temporal (HTTP 302): en las redirecciones temporales los motores de búsqueda reciben un mensaje diferente que en las permanentes, con que no modifican sus bases de datos de forma definitiva.

Generar una redirección es tan sencillo como acceder al panel de redirecciones:

crear redirecciones.png

Fig. 30. Los datos críticos para una redirección permanente o temporal son la URL de origen y la URL de la redirección

  • En la URL de origen habría que introducir la URL del enlace que el usuario seguirá o que introducirá en su navegador (la URL antigua)
  • En la URL de redirección habría que introducir la URL a la que el redireccionamiento llevará (la URL nueva)
  • En tipo de redirección debéis escoger entre FRAME, permanente o temporal
  • En el caso de redirecciones FRAME podéis rellenar las casillas de título, descripción y palabras clave

3.8 Certificados SSL

Un certificado SSL permite añadir una cap adicional de seguridad a un sitio web de manera que los datos viajarán de forma encriptada. Es una prestación interesante a añadir en un sitio web ya que da confianza a los usuarios y además influye como factor positivo de posicionamiento. Tiene un coste adicional anual a parte de los ya conocidos del nombre de dominio y el hosting. Para añadir un certificado SSL hay que acceder al apartado “Certificado SSL” y comprar alguno de los que se ofrecen. Hay diversas empresas que ofrecen este servicio, nuestra recomendación es usar el que proporciona por defecto DonDominio y ejecutar todo el proceso de instalación.

4. Instalación de WordPress en DonDominio

4.1. La alta de aplicaciones

Como otros servicios de hosting DonDominio ofrece a sus usuarios un servicio de instalación de aplicaciones que simplifica su gestión enormemente. Instalar una aplicación cualquiera en un servicio de hosting es una tarea más o menos complicada que requiere leer atentamente los servicios de ayuda correspondientes, estar muy atento a las especificaciones técnicas y ejecutar los diferentes pasos de instalación y configuración necesarios. En el caso de WordPress, por ejemplo, podéis consultar esta página web que detalla los pasos que requiere la instalación de WordPress en un servicio de hosting.

A través del instalador de aplicaciones de DonDominio podemos instalar múltiples plataformas de todo tipo en nuestro hosting con un sistema guiado muy sencillo.

instalador de aplicaciones.png

Fig. 31. El instalador de aplicaciones de DonDominio dispone de múltiples aplicaciones de gestión de contenidos, foros, wikis, blogs, etc. que son de muy fácil instalación en nuestro hosting.

4.2. Instalación de WordPress

En concreto la instalación de WordPress puede hacerse en X pasos muy sencillos como veréis. Antes que nada tendremos que asegurarnos que disponemos del espacio suficiente y que al menos podemos disponer de una base de datos imprescindible para el funcionamiento de nuestro nuevo web (o blog). Recordad que en nuestro Alojamiento Básico podemos disponer de hasta 10 bases de datos.

Podemos iniciar la instalación:

Instalar aplicación (1).png

Fig. 32. El botón de instalar aplicación permite dar inicio al proceso.

El primer paso a realizar consiste en definir la ruta de instalación, que puede ser un subdominio que ya hayamos creado (lo debemos seleccionar del desplegable insertado en el nombre del dominio) o uno que podemos generar ahora (botón “Crear nuevo subdominio”). Es muy importante definir una ruta donde no tengamos alojada ninguna aplicación. Para nuestro ejemplo hemos creado un subdominio llamado blog1:

Definir ruta de instalación (3).png

Fig. 33. Una vez generado el subdominio solamente tenemos que seleccionarlo de la ruta de instalación

El segundo paso a realizar consiste en indicar la base de datos con la que nuestra instalación funcionará. Si empezamos el blog o el sitio web de cero lo normal es generar una base de datos nueva:

base de dades (4).png

Fig. 34. Se trata de seleccionar una base de datos ya existente o generar una de nueva.

Una vez hemos creado la base de datos queda automáticamente seleccionada y podemos pasar al siguiente paso:

base de dades ja creada (5).png

Fig. 35. En este paso debemos seleccionar la base de datos que el sistema ha generado automáticamente

Una vez realizados estos dos pasos, para acabar de configurar la instalación solamente falta introducir el nombre del blog, y configurar los datos de administrador de la aplicación, incluyendo el identificador del administrador del blog, su dirección de correo electrónico y su contraseña.

dades administrador (3a passa).png

Fig. 36. En este formulario debemos introducir los datos de usuario de quién será el administrador del blog

Y ya tenemos nuestra instalación de WordPress completada:

instalación completada (7).png

Fig. 37. Al final del proceso el sistema nos ofrece un resumen de los datos fundamentales de nuestra nueva aplicación

5. Enunciado de las actividades (con evaluación)

Para la evaluación de esta unidad usaremos los datos de un usuario registrado en DonDominio con las que podréis entrar y realizar las actividades, con cuidado de no realizar acciones críticas e irreversibles:

Edita un documento en formato PDF con la descripción de las siguientes 3 actividades. Intenta ser sintético/a explicando solo los pasos más importantes con un máximo de 1000 palabras. Aconsejamos que las características del documento sean las siguientes:

  1. Introducción
  2. Descripción de las acciones realizadas insertando capturas de pantalla que acrediten los principales pasos de cada ejercicio. El formato puede ser: imagen, descripcion, imagen, descripcion… acreditando la realización de las 3 actividades.
  3. Conclusiones
  4. Fuentes consultadas

Actividad 1

Crea un subdominio que luego usarás para una instalación de wordpress. En el nombre del subdominio puedes poner tu apellido. En el nombre del directorio puedes poner public-apellido. Por ejemplo:

Es posible que tengas que esperar 30 o 40 minutos después del alta para que el subdomino esté operativo.

Es normal que cuando intentemos acceder el subdominio aparezca un mensaje de error parecido al siguiente ya que todavía no hay contenido en la carpeta recién creada.

Actividad 2

Genera una instalación de WordPress en DonDominio (punto 4) y seguidamente procede a su desinstalación, que deberás realizar manualmente accediendo a la carpeta de FTP (punto 3.2.5). Ves con cuidado de borrar el directorio que hayas generado, nunca borres un directorio que no sea el tuyo. Cuanto hagas el alta de WordPress indica tu nombre y apellido en el paso 1 en la ruta de instalación:

Recuerda que tienes que usar el subdominio que has creado en el punto 1 para realizar la instalación de WordPress, en el caso del ejemplo:

http://rovira.unidadhosting.com

No es necesario indicar un subdirectorio en:

/Opcional

Recuerda también en comprobar que la instalación se ha realizado bien usando la URL correspondiente que en este caso sería:

http://rovira.unidadhosting.com

No hay que hacer nada en en el WordPress, el objetivo es solo la instalación. Para acceder al panel de control de WordPress tendrías que usar el usuario y la contraseña que pusiste durante el paso 3 de la instalación “Configuración inicial de WordPress” en:

http://rovira.unidadhosting.com/wp-login.php

Ahora no es necesario que entres al WordPress. Si estás realizando el TFM, tendrás que ejecutar este mismo proceso en un hosting que te proporcionaremos y en este caso sí que entraras en el panel de control del administrador de WordPress para dar de alta y gestionar la web del TFM.

Para borrar la instalación de WordPress tienes que acceder por FTP al servidor usando las opciones del propio DonDominio (punto 3.2.5). No es necesario usar FileZilla para el acceso por FTP como hicimos en otras unidades didácticas. Cuando acabes los 3 ejercicios borra la carpeta donde hay los ficheros de tu instalación, en el caso del ejemplo: /public-rovira/

 

Atención:

  • No borres una carpeta que no sea la tuya.
  • No borres tu instalación hasta terminar la actividad 3 para que puedas comprobar que el redireccionamiento funciona.

Actividad 3

Crea tres redireccionamientos (punto 3.2.7) – uno de cada tipo (FRAME, HTTP301 y HTTP302). Puedes usar 3 carpetas con un nombre inventado, una para cada tipo, y redireccionarlas a la web que tu decidas. Comprueba que los redireccionamientos funcionen. No es necesario que estas carpetas existan físicamente en el servidor por tanto no tienes que hacer ningún paso extra al alta del redireccionamiento en DonDominio. Un ejemplo podría ser:

Algunas veces el redireccionamiento frame no funciona porque la web de destino ha sido configurada para impedir el uso de frames por motivos de seguridad. Si este es tu caso, indícalo en los comentarios de tu ejercicio.

6. Bibliografía

DonDominio. Página de ayuda.

https://www.dondominio.com/help/es/

 

IANA – Root Servers

https://www.iana.org/domains/root/servers

 

ICANN. Página de la entidad mundial que coordina la asignación de nombres de dominios en todo el mundo.

https://www.icann.org/es

 

 

 


© Texto: autor/es del documento

© Presente edición: Máster en Información Digital. UPF Barcelona School of Management

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

Artículo 7.9 Creación de sitios web con WordPress

Artículo 7.9 Creación de sitios web con WordPress

David Maniega

David Maniega. Artículo 7.9 Creación de sitios web con WordPress. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Información Digital. Barcelona: UPF Barcelona School of Management.


Sumario

1.Introducción

1.2. Características principales de WordPress

2. Instalación de WordPress

2.1. La estructura básica de ficheros

3. Interfaz de usuario: panel de administración

4. Gestión de usuarios

5. Configuración: ajustes globales del entorno

6. Personalización de la apariencia: temas y widgets

7. Gestión de plugins

8. Publicación y gestión de contenido

8.1. Creación de entradas y páginas estáticas

8.2. Gestión de menús

8.3. Gestión de los comentarios

8.4. La Biblioteca de medios

9. Instalación de plugins fundamentales para un sitio web

9.1. All in One SEO Pack

9.2. Google XML Sitemaps

9.3. Contact Form 7

9.4. TinyMCE Advanced

9.5. Shareaholic

9.6. Broken Link Checker

9.7. Akismet

9.8. a3 Lazy Load

9.9. Google Analytics Dashboard by MonsterInsights

9.10. W3 Total Cache

10. Enunciado del ejercicio (con evaluación)

11. Bibliografía


1. Introducción

La publicación de contenidos en Internet ha sufrido muchas modificaciones en los últimos años, ofreciendo cada vez más un número mayor de sistemas de gestión de contenidos (CMS) que facilitan la creación de sitios web sin la necesidad de tener conocimientos del código que genera las páginas web.

De entre estos gestores de contenidos, uno de los que está teniendo una mayor repercusión es sin duda WordPress, que si bien originalmente se concibió como un sistema gestor de blogs, ha ido mutando cada vez hacia la construcción de sitios web completos, obteniendo una relevancia muy significativa en el mercado del uso de CMS para la construcción de sitios web como podemos ver en la figura 1.

Figura 1: cuota de mercado de desarrollos web con CMS (1Q 2019)

1.2. Características principales de WordPress

 

En esta unidad lo que vamos a ir viendo es qué es WordPress y cómo podemos crear un sitio web con este popular y versátil CMS.

Conceptualmente hablando, WordPress nació como un sistema de publicación web de ámbito personal, lo suficientemente elegante como para resultar atractivo al gran público y basado en una arquitectura muy sencilla pero confiable y extensible. Así WordPress se basa en el lenguaje PHP y utiliza como base de datos MySQL y se licencia bajo GPL, lo que nos permite tener libertad de modificación y publicación de mejoras sobre el código nativo.

Cabe remarcar que este CMS pone mucho énfasis en conseguir resultados con una estética muy cuidada, velar por los estándares web y añadir grandes dosis de usabilidad, especialmente notable en el panel de administración o backend.

Las principales funcionalidades de WordPress las podemos resumir en:

  • Fácil instalación, configuración y mantenimiento.
  • Gran versatilidad en cuanto a personalización del entorno.
  • Gestión de usuarios con diferentes roles y niveles de permisos.
  • Facilidad para crear tanto entradas o posts como páginas estáticas.
  • Capacidad de jerarquizar y agrupar los contenidos por categorías y etiquetas.
  • Gestión de elementos multimedia y enlaces a recursos externos.
  • Edición de contenidos desde una interfaz gráfica.
  • Modificación y personalización del tema principal.
  • Creación de plantillas personalizadas y adaptadas a las necesidades específicas de un proyecto.
  • Extensibilidad a partir de la inclusión de nuevos plugins y widgets que complementan el sistema y permiten personalizar tanto el diseño como ampliar su funcionalidad.
  • Permitir comentarios a los contenidos así como hacer pingbacks y trackbacks para la retroalimentación de contenidos.
  • Distribuir los contenidos a través de canales de sindicación en formato RDF, RSS 0.92, RSS 2.0 y Atom.
  • Creación y gestión de enlaces permanentes (permalinks).

Para obtener un listado completo de las funcionalidades de WordPress se puede consultar el siguiente enlace: https://codex.wordpress.org/es:Caracter%C3%ADsticas_de_WordPress

A continuación os pongo el vídeo de presentación donde nos introducimos en el contexto de WordPress y por defecto, en esta unidad.

Vídeo 1. Presentación U7.9 – Creación sitios web con WordPress – https://cutt.ly/WP-U79-presentacion
Si consultas este documento desde el eCampus recuerda pulsar la mayúscula al clicar en este enlace para que se genere una nueva ventana y puedas visualizar el vídeo.

2. Instalación de WordPress

Como hemos comentado en la introducción, tenemos a nuestro alcance dos modos de crear nuestro sitio web con WordPress, uno bajo www.wordpress.com y que nos ofrece un alojamiento gratuito con ciertas limitaciones, pero que en muchos casos es una muy buena base para ver si nos convence como entorno de publicación, y que además podemos “ampliar” con las dos modalidades de pago que ofrece el propio sistema, y el otro, con una descarga del programa desde www.wordpress.org para instalarlo en un servidor externo y tener la capacidad de gestionarlo sin restricciones.

Si no tienes claro por cuál de las dos opciones decantarte, te recomiendo la lectura de este post WordPress.com o WordPress.org: cuál elegir y por qué. Si queremos darnos de alta en es.wordpress.com para crear nuestro sitio web, os recomiendo ver este videotutorial paso a paso del proceso de alta y acceso a nuestra instalación de WordPress.

Hoy en día hay muchas empresas de alojamiento o hosting que nos ofrecen la posibilidad de instalar una instancia de WordPress en muy pocos y sencillos pasos. También tenemos la posibilidad de descargarnos el programa y subirlo a través de FTP al servidor que alojará nuestro sitio web con WordPress, para posteriormente configurar nuestro CMS a través de unos cuantos pasos desde un navegador web.

Si deseas instalar y configurar un WordPress en tu servidor, y éste no dispone de un servicio de instalación automática, o bien deseas hacerlo tú mismo/a, te recomiendo esta rápida lectura que detalla los pasos uno a uno del proceso a seguir: http://aulacm.com/instalar-configurar-wordpress/

 

Si no queremos empezar gastando un dinero en el servicio de alojamiento que nos proporcionará una empresa dedicada a estos menesteres, podemos recurrir a servicios de alojamiento gratuito existentes en el mercado. Obviamente al ser gratuitos no pueden ofrecer un nivel de servicio tan profesional como los servicios de pago, pero de entre todos ellos destacan dos que además no incluyen publicidad en tu sitio web:

 

A continuación os detallo unos videotutoriales sobre cómo instalar WordPress en cada uno de estos dos servicios de alojamiento gratuito:

 

2.1. La estructura básica de ficheros

Si accedemos por FTP al directorio donde tenemos instalada ya nuestra instancia de WordPress, veremos toda una serie de directorios que conforman el esqueleto funcional del sistema y que vamos a detallar para conocer su estructura formal:

  • Directorio wp-admin: es donde se almacenan los ficheros de administración del sistema, en muy raras ocasiones tendremos que entrar aquí.
  • Directorio wp-includes: es donde se almacenan ficheros del sistema de WordPress.
  • Directorio wp-content: es donde se almacena todo el contenido que subimos a WordPress y que configuramos, como el tema, los media, los plugins, las plantillas, etc. Los contenidos propiamente dichos se almacenan en la base de datos MySQL. En este directorio vamos a encontrar entre otros, 4 directorios importantes y que debemos conocer:
  • Directorio themes: es donde se alojan las plantillas o temas a utilizar.
  • Directorio plugins: es donde se almacenan todos nuestros plugins.
  • Directorio uploads: es donde se almacenan todos los ficheros que subimos a nuestra mediateca. Se genera de forma automática cuando subimos el primer archivo.
  • Directorio languages: es donde se alojan los ficheros de traducción de idioma de WordPress.

3. Interfaz de usuario: panel de administración

 

Una vez instalada nuestra instancia de WordPress podremos acceder al backend desde el enlace que podemos encontrar en el widget “meta” denominado “Administrador” o directamente añadiendo “wp-admin” después del nombre del dominio, por ejemplo: http://tudominio/wp-admin

 

Una vez hemos introducido nuestro nombre de usuario y nuestra contraseña, accederemos al panel de control del backend que nos permite interactuar con todas las funciones y opciones de gestión de los diferentes elementos del CMS.

En el siguiente vídeo vamos a hacer un recorrido rápido para que lo conozcáis mejor.

Vídeo 2: Interfaz de usuario: panel de administración – https://cutt.ly/WP-U79-panel-administracion

Si consultas este documento desde el eCampus recuerda pulsar la mayúscula al clicar en este enlace para que se genere una nueva ventana y puedas visualizar el vídeo.

4. Gestión de usuarios

Una vez instalado nuestro WordPress, tendremos un único usuario con perfil de administrador del sistema. Si bien lo más normal es trabajar con un único usuario cuando no se trata de un sitio web compartido, podemos agregar nuevos usuarios al sistema para que puedan acceder de forma autónoma y realizar diferentes acciones en función de su rol.

A continuación detallamos los posibles roles de usuario que encontraremos en WordPress:

  • Administrador: tiene el control completo sobre todas las acciones del CMS.
  • Editor: publica y gestiona entradas y páginas, tanto si las ha creado él como si no.
  • Autor: publica y gestiona únicamente sus propias entradas y páginas.
  • Colaborador: escribe y gestiona sus propias entradas y páginas pero no puede publicarlas.
  • Suscriptor: solamente puede gestionar su perfil.

En el siguiente vídeo os explico cómo gestionar a los usuarios.

Vídeo 3: Gestión de usuarios – https://cutt.ly/WP-U79-gestion-usuarios

Si consultas este documento desde el eCampus recuerda pulsar la mayúscula al clicar en este enlace para que se genere una nueva ventana y puedas visualizar el vídeo.

5. Configuración: ajustes globales del entorno

 

En WordPress se incluye un apartado específico para la configuración de diversos conceptos genéricos que habitualmente sólo suelen ser modificados al inicio. En ese conjunto de opciones, vamos a poder cambiar la información del sitio web, establecer las preferencias de lectura y escritura, configurar cómo queremos que se comporten los comentarios, configurar el formato de los enlaces permanentes, etc.

En este vídeo vamos a ver cada una de estas opciones de configuración para preparar nuestro propio entorno.

Vídeo 4: Panel de administración: ajustes globales – https://cutt.ly/WP-U79-ajustes-globales

Si consultas este documento desde el eCampus recuerda pulsar la mayúscula al clicar en este enlace para que se genere una nueva ventana y puedas visualizar el vídeo.

6. Personalización de la apariencia: temas y widgets

 

Los temas permiten cambiar la apariencia visual de nuestro sitio web con un solo clic. No afectan a la programación de la aplicación ni a los contenidos, si bien en función del tipo de tema que utilicemos, éstos pueden verse de forma muy diferente a la del modelo en el tema origen. Los temas no son otra cosa que un conjunto de ficheros (gráficos, hojas de estilo, plantillas y archivos de código) que permiten generar una interfaz gráfica y un formato de presentación al sitio web.

WordPress tiene un repositorio oficial de temas https://wordpress.org/themes/ desde donde se pueden descargar temas gratuitos y de tipo “premium” (de pago). Este repositorio es el que podremos tener como referente para buscar temas o navegar entre las diferentes opciones que nos ofrece nuestro backend como veremos en el vídeo.

Asimismo, existen multitud de sitios donde poder adquirir temas gratuitos no alojados en el repositorio oficial de WordPress, y otros de pago, cuyos precios suelen oscilar entre los 45 € y los 80 € de media. Sin pretender hacer publicidad alguna, os dejo algunos de los sitios más conocidos de venta de temas para WP:

 

A la hora de elegir una tema para nuestro sitio web hay diferentes aspectos que deberemos tener en cuenta. Os recomiendo la lectura del siguiente artículo: Cómo elegir el tema de WordPress perfecto para tu blog, por Berto López en Ciudadano 2.0. Otro recurso en este sentido para escoger un buen tema es el escrito por Jaime Tagle en su web WordPress Avanzado, que lleva por título “Cómo elegir una plantilla de WordPress – La Guía Exacta”.

Si alguna vez habéis visto un sitio web que os guste especialmente, y sospechais que está hecho con WordPress, o directamente nos indica que está hecho con WordPress y queremos saber qué tema está utilizando, tenemos a nuestro alcance dos recursos muy interesantes para poder investigar sobre ello:

Es muy importante que tengamos una serie de aspectos en cuenta a la hora de seleccionar o adquirir un tema para nuestra instancia de WordPress. El precio no siempre marca la diferencia, y eso debemos tenerlo claro, y ante ello existen otros baremos más interesantes a tener en cuenta como pueden ser:

  • Fecha de lanzamiento: es fundamental que no sea un tema excesivamente antiguo por dos motivos, el primero que pueda funcionar con la actual versión de WP pero que en la siguiente empiece a presentar alguna serie de problemas internos, y la segunda, porque seguramente no estará concebido desde una perspectiva adecuada para el SEO, el UX y mucho menos con un diseño adaptativo (RWD), aspectos que deberías contemplar como fundamentales desde un origen. Incorporar un tema que no tenga un diseño que se adapte a dispositivos móviles es desde ya una muy mala decisión totalmente desaconsejable.
  • Fecha de última actualización: es muy importante que el creador del tema lo mantenga actualizado, se dedique a corregir bugs, aplique mejoras, etc. Si un tema con un cierto tiempo desde su publicación no ha sido actualizado, o hace mucho tiempo desde la última actualización, a priori desconfiad ya que es muy poco probable que en el futuro vaya a sufrir adaptaciones o modificaciones, más bien será al contrario. En los temas comprados (recordad que adquirimos una licencia de uso, a no ser que compremos la que da derecho al desarrollo) por lo general tienen un año natural de acceso al área de soporte del creador y a las diferentes actualizaciones del tema que se vayan publicando.
  • Número de descargas/compras: este es un valor completamente cuantitativo, pero nos ofrece una idea de magnitud del impacto del tema en los usuarios. A más descargas, más popular, y cuando algo es popular es por algo, reflexionemos cuando menos antes de desestimarlo rápidamente.
  • Valoraciones de los usuarios: especialmente útil para aquellos temas de compra, puesto que los usuarios son más exigentes lógicamente y suelen aportar valoraciones más contextualizadas basadas en la experiencia de la puesta en marcha del tema.
  • FAQs o ticketing de soporte para dudas, consultas o problemas: se considera clave para los temas de pago y muy bien visto para los temas gratuitos. Si hay una buena atención ante las dudas o preguntas de los usuarios es un tangible muy valorado. La celeridad en las respuestas también es importante y nos puede dar una pista muy seria de cómo y en qué grado hay un soporte detrás del tema.
  • Documentación: siempre va a ser mucho más interesante un tema documentado, y bien documentado, que uno que carece de documentación. Cuanto más detallada sea la documentación que acompaña al tema, menos consultas al creador se suelen producir, así que valoremos ese aspecto.

Por otro lado, los widgets son pequeñas extensiones que permiten añadir piezas de información al contenido secundario, normalmente visibles en el “Sidebar” del tema o en el pie. Cada tema en función de cómo esté construido, nos va a permitir tener cabida a más o menos widgets asociados al mismo, incluso definir áreas específicas donde poderlos ubicar.

En el siguiente vídeo os muestro cómo gestionar el cambio de tema y el proceso para completarlo con diferentes widgets.

Vídeo 5: Personalización de la apariencia: temas y widgetshttps://cutt.ly/WP-U79-temas-widgets

Si consultas este documento desde el eCampus recuerda pulsar la mayúscula al clicar en este enlace para que se genere una nueva ventana y puedas visualizar el vídeo.

7. Gestión de plugins

 

Los plugins son pequeños desarrollos de código que añaden extensibilidad a nuestro CMS aportando nuevas funcionalidades. Para obtener nuevos plugins podemos hacerlo desde nuestra propia instalación o bien descargarlos desde el repositorio oficial de WordPress: https://wordpress.org/plugins/

 

Los criterios básicos para escoger un buen plugin que se adecúe a las necesidades son:

  • Que no sea la primera versión del plugin, que ya lleve un cierto rodaje.
  • Fijarnos en la fecha de actualización, si es mayor de 9 meses empezad a desconfiar porque puede estar discontinuado.
  • Cuantas descargas tiene acumuladas, cuantas más descargas más “famoso”, y si es famoso es porque es bueno o cumple con lo que promete hacer dicho plugin.
  • Observar las valoraciones realizadas, tanto las positivas como las negativas, aunque ciertamente es muy subjetivo el criterio, nos puede dar una ligera idea de la opinión generalizada.
  • A ser posible, siempre escoger un plugin que esté indexado en el repositorio de plugins de WordPress.
  • Leer bien las instrucciones y pasos para tenerlo operativo, y ante la duda buscar información sobre el plugin en Internet, especialmente en foros sobre WordPress.

En el siguiente vídeo os explico todo acerca de su funcionamiento desde el backend.

Vídeo 6: Gestión de pluginshttps://cutt.ly/WP-U79-gestion-plugins

Si consultas este documento desde el eCampus recuerda pulsar la mayúscula al clicar en este enlace para que se genere una nueva ventana y puedas visualizar el vídeo.

8. Publicación y gestión de contenido

Una de las grandes bazas de WordPress es precisamente la facilidad de uso que nos proporciona para crear, gestionar y publicar contenido. En esta sección vamos a ir viendo las diferentes características de cada uno de los elementos que conforman la base del sistema de publicación.

8.1. Creación de entradas y páginas estáticas

 

Las entradas son la fuente principal de un blog, ocupando físicamente la parte central de la interfaz visual de un tema y permitiendo su organización por fecha de publicación en orden cronológico de más reciente a más antiguo. Por su parte, las páginas estáticas están más indicadas para el concepto sitio web, de forma que podamos crear todas las páginas de un sitio web, publicarlas y modificarlas de manera muy ágil y funcional.

En el siguiente vídeo os explico el funcionamiento de ambos elementos.

Vídeo 7: Gestión de entradas y páginas – https://cutt.ly/WP-U79-gestion-entradas-paginas

Si consultas este documento desde el eCampus recuerda pulsar la mayúscula al clicar en este enlace para que se genere una nueva ventana y puedas visualizar el vídeo.

8.2. Gestión de menús

WordPress incorpora por defecto un sistema automático para la generación de opciones de menú que facilitan la navegación por el sitio web creado. En la mayoría de temas, cuando creamos una página (no una entrada), podemos configurar que se añada de forma automática el enlace directo al menú, y a su vez configurar un menú global de navegación completamente personalizado según nuestras necesidades.

En la actualidad podemos incluso generar un menú de navegación principal y otro para el pie de página. En estos menús podremos añadir diferentes elementos: páginas estáticas, categorías y cualquier otro tipo de enlace web, ya sea interno o externo.

En el siguiente vídeo os explico cómo configurarlo fácilmente.

Vídeo 8: Gestión de menús – https://cutt.ly/WP-U79-gestion-menus

Si consultas este documento desde el eCampus recuerda pulsar la mayúscula al clicar en este enlace para que se genere una nueva ventana y puedas visualizar el vídeo.

8.3. Gestión de los comentarios

 

Dentro del backend podremos gestionar los comentarios que se realicen en nuestras entradas o en nuestras páginas si los hemos activado para tal fin. Por lo general, y en base a las reglas de aprobación que hayamos configurado previamente, como hemos visto en un vídeo anterior, los comentarios se pueden clasificar según el estado en que se encuentren, así los tenemos como “pendientes”, “aprobados”, “spam” o borrados en la “papelera”.

En este vídeo os explico cómo gestionar los comentarios desde esta sección.

Vídeo 9: Gestión de comentarios – https://cutt.ly/WP-U79-gestion-comentarios

Si consultas este documento desde el eCampus recuerda pulsar la mayúscula al clicar en este enlace para que se genere una nueva ventana y puedas visualizar el vídeo.

8.4. La Biblioteca de medios

 

La biblioteca de medios es un mini repositorio de contenidos media tales como archivos de imagen, vídeo, sonido, documentos (pdf, ofimáticos…), que se pueden insertar tanto en páginas como en entradas.

En el siguiente vídeo os explico cómo gestionar la mediateca y utilizar esos contenidos.

Vídeo 10: La Biblioteca de medios – https://cutt.ly/WP-U79-biblioteca-medios

Si consultas este documento desde el eCampus recuerda pulsar la mayúscula al clicar en este enlace para que se genere una nueva ventana y puedas visualizar el vídeo.

9. Instalación de plugins fundamentales para un sitio web

 

Todo sitio web va a necesitar instalar diferentes plugins para mejorar funcionalidades, ampliar las capacidades del sitio, gestionar tareas internas, velar por el cumplimiento de estándares para el posicionamiento, o por la seguridad, etc. Es importante como se ha dicho, no caer en la tentación de instalar plugins por instalar, ya que una larga lista de ellos corriendo sobre nuestra instalación de WordPress la va a ralentizar, y notaremos poco a poco cómo nuestro sitio no es en realidad tan funcional y accesible como pensamos.

Como es importante encontrar el equilibrio necesario, en este listado os propongo los 10 plugins esenciales que todo sitio web debería, como mínimo haber experimentado, si bien la decisión final siempre recaerá sobre nosotros en base a la experiencia de uso y facilidad de manejo que tengamos con ellos. Aquí tienes la lista de los plugins esenciales para tu sitio web hecho con WordPress, vamos allá:

1. All in One SEO Pack

Este plugin ayuda a configurar tu sitio web con los aspectos más importantes de SEO y posicionamiento en buscadores, en especial Google. En él podrás cambiar cosas como el título del sitio web, la descripción que aparece en los resultados de búsqueda, las palabras clave a las que quieres posicionarte y muchos otros elementos a considerar para generar tráfico orgánico.

Otro plugin de SEO que ha tenido mucha popularidad recientemente es WordPress SEO de Yoast. También muy recomendado y con opciones muy interesantes para gestionar lo relativo al SEO desde tu sitio web. Lo mejor, que pruebes ambos a ver con cuál te sientes más cómodo/a.

Enlace: All in One SEO Pack
Enlace: Yoast SEO

 

2. Google XML Sitemaps

A los buscadores les gustan los sitios web bien estructurados, y si además les podemos ofrecer en su lenguaje ideal un mapa de cómo está organizado nuestro sitio web, pues mejor que mejor. Este plugin ayuda a generar de forma automática un Sitemap, el cual consiste en un documento en formato XML que sirve como un “mapa” que le indica a Google toda la estructura de tu sitio Web o blog. De esta forma indexa el sitio web de forma más óptima y más rápida.

Simplemente se instala y automáticamente enviará un sitemap a los principales buscadores como Google, Yahoo! y Bing. Recuerda también agregar tu sitemap a Google Search Console.

Enlace: Google XML Sitemaps

3. Contact Form 7

Una forma de contacto es siempre indispensable en cualquier sitio web y con Contact Form 7 podrás crear diferentes modelos de formulario rápidamente, sin necesidad de conocer las etiquetas ni códigos que deberías utilizar para crearlos.

Tu formulario estará operativo y funcionando en tu sitio web en pocos minutos como lo haría el mejor experto.

Enlace: Contact Form 7

4. TinyMCE Advanced

Con este plugin podrás agregar muchas más opciones a tu editor de textos WYSIWYG en WordPress. De esta forma tendrás más posibilidades de cambiar el estilo y la forma en la que publicas todo tu contenido. Podrás cambiar el tamaño de letra, cambiar los párrafos, el color de las letras, hacer highlights y muchas otras cosas más, un editor gráfico lleno de opciones como el mejor procesador de textos.

Enlace: TinyMCE Advanced

5. Shareaholic

Habrás visto en muchos sitios web una barra lateral con las opciones sociales para compartir contenido. Con Shareaholic podrás compartir tus contenidos de forma sencilla y bajo diferentes formas, la más extendida hoy en día es la de las opciones laterales flotantes presentes generalmente a la izquierda de la página en una barra vertical en donde tus visitantes podrán compartir tu contenido en Twitter, Facebook, Stumbleupon, por correo o en otras redes sociales. De esta forma aumentas la presencia de tu sitio web en las redes sociales y facilitas la propagación viral de tu contenido. Recomiendo darse de alta en su web de forma gratuita para obtener todas las ventajas y opciones del plugin.

Enlace: Shareaholic

6. Broken Link Checker

Este plugin es muy útil ya que valida todos los enlaces de tu sitio web en búsqueda de los que puedan estar “rotos” o sin funcionar correctamente (redirección permanente o demasiado tiempo sin respuesta de carga). Con Broken Link Checker podrás detectar qué enlaces de tu sitio web han dejado de funcionar para poderlos corregir o eliminar, de forma que ayudas a mejorar el posicionamiento SEO y la navegación en tu sitio.

Enlace: Broken Link Checker

7. Akismet

Akismet es esencial ya que ayuda a que no haya comentarios de spam en nuestro sitio web. Si tenemos activada la opción de poder comentar tanto en entradas como en páginas y no se instala un sistema de protección antispam, comienzan a llegar mensajes que no tienen nada que ver con usuarios reales que aportan metacontenido en forma de comentarios, sino que se trata de robots de spam. Akismet nos ayuda a evitar este tipo de situaciones y mantiene nuestro sitio web limpio en todo momento.

Enlace: Akismet

8. a3 Lazy Load

Las imágenes pueden ralentizar la carga de nuestra web web con la consecuente pérdida de lectores. ¿Sabías que una web que tarda más de 3 segundos en cargar pierde el 40% de su tráfico? Para solucionarlo contamos con el aliado perfecto, el plugin a3 Lazy Load con el que conseguiremos que nuestra web cargue solamente el contenido que está visualizando el lector.
De esta manera, la web no cargará por completo a no ser que el lector lo requiera. Este plugin nos ahorrará recursos y mejorará la velocidad de carga de nuestra web, y especialmente en dispositivos móviles.

Enlace: a3 Lazy Load

9. Google Analytics Dashboard by MonsterInsights

Google Analytics es una de las herramientas que te ayudará a medir el número de visitantes que llegan a tu sitio web. Es completamente gratis y para instalarlo solo se necesita insertar un pequeño código en tu sitio y ya queda listo. Cómo insertar los códigos de seguimiento en la cabecera o al pie puede resultar complicado, este plugin lo hará por nosotros con solo un par de clics y de forma muy rápida.

Enlace: Google Analytics by MonsterInsights
Alternativa: Google Analytics Dashboard by ExactMetrics

10. W3 Total Cache

Con W3 Total Cache lograrás que tu blog cargue más rápido y acelera al máximo el rendimiento de todo el contenido del sitio web. El tiempo de carga es uno de los factores que Google toma en cuenta para posicionar sitios, así que no dudes en tomar muy en cuenta el uso de este plugin, eso sí, actívalo cuando hayas terminado de configurar y de alimentar con nuevos contenidos tu sitio web para evitar reindexaciones o problemas con versiones en caché.

Enlace: W3 Total Cache

Finalmente, y como todo es cuestión de ir probando, os dejo una interesantísima lista de plugins categorizados para que podáis recorrer el camino con una guía de recursos seleccionados a partir de su nivel de relevancia en sitios web de WordPress, Los mejores plugins para WordPress, por Berto López.

10. Enunciado del ejercicio (con evaluación)

La actividad consiste en crear un sitio web promocional de un evento, pero para no complicaros la vida, he escogido un evento pasado y que dispone de sitio web que no debéis hacer caso, así tenéis libertad absoluta para hacer vuestra propuesta.

Lo único con lo que vamos a trabajar es con un cartel promocional del evento, y que como podréis ver lo tiene todo para ser el perfecto “antiusuario”, de forma que vuestro reto es hacer un microsite del evento con la info del cartel y que tenga sentido, que sea funcional y que nos permita como usuarios entender de qué va el evento, cómo suscribirme, qué precio tiene, si hay o no promociones, quién lo patrocina, etc. En el cartel podréis observar que tenemos toda la información necesaria: http://www.davidmaniega.com/cursos/ux/ejercicio.html

Se trata de un sitio web sencillo donde estén presentes los siguientes elementos:

  • Mínimo tres páginas diferentes (podéis añadir cuantas estiméis oportunas)
  • Menú personalizado.
  • Activación de un par de widgets en el sidebar.
  • Imágenes en las páginas, especialmente indicadas para la creación de una galería fotográfica (del evento, de la zona, paisajes, ruta, etc.). También se pueden combinar con vídeos. Todo el contenido gráfico os lo podéis inventar, crear o seleccionar de la red (con créditos, eso sí).
  • Personalización del tema escogido.

Se podrá realizar tanto desde WordPress.com como bajo alojamiento en un servidor externo a partir de la descarga de la instancia de WP desde wordpress.org.

En el aula simplemente tenéis que entregar un documento PDF donde expliquéis en una página, cómo habéis planteado el desarrollo y creatividad, junto con la url de acceso al sitio web resultante de dicho proceso.

11. Bibliografía

  1. 130 Sitios WordPress Principales Dominando la Web en 2019 – https://kinsta.com/es/blog/ejemplos-de-sitios-wordpress/
  2. Ayuda WordPress – https://ayudawp.com/
  3. Ciudadano 2.0 – Ayuda y consejos para bloggers y 2.0 adictos – https://www.ciudadano2cero.com/
  4. Diez Blogs de WordPress en Español que deberías seguir para convertirte en Experto http://es.themeyourself.com/10-blogs-de-wordpress-en-espanol-par-convertirte-en-experto/
  5. Guía para aprender WordPress y hacer una página web | Tutorial – https://ernestogbustamante.com/aprender-wordpress-hacer-pagina-web/
  6. Los 10 mejores libros de WordPress 2019 – http://www.mis10favoritos.es/mejores-libros-wordpress-top-10/
  7. Tellado, Fernando. WordPress 5. La guía completa. eBook Kindle https://www.amazon.es/WordPress-gu%C3%ADa-completa-Social-Media/dp/8441540608/
  8. WordPress Codex – https://codex.wordpress.org/
  9. WordPress Directo – https://wpdirecto.com/

© Texto: autor/es del documento

© Presente edición: Máster en Información Digital. UPF Barcelona School of Management

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported