Sin categoría

Herramientas de Usabilidad, Accesibilidad y SEO.

Para conocer el grado de usabilidad, podemos usar servicios diferenciados que nos proporciona la web https://www.optimalworkshop.com tales como:

– Treejack para conseguir que un usuario encuentre bien la información de navegación.

– Chalkmark para que un usuario sepa realizar una tarea con facilidad sin que se pierda tales como el hecho de efectuar una compra, darse de alta en un servicio como en un registro de usuarios…

– Optimalsort nos ayuda a organizar el contenido para que un usuario no se sienta perdido.

Para probar la navegación de una web podemos usar https://conceptcodify.com/, que nos permiten establecer una arquitectura navegacional, creada por un conjunto de personas a las que les hayas compartido un espacio de trabajo para realizar dicha arquitectura.

También existen diversos servicios para crear diagramas de información como http://www.smartdraw.com . Destaco el blog que tiene íntima relación con este tema http://www.nosolousabilidad.com  cuyo enlace de interés es: http://www.nosolousabilidad.com/articulos/diagramacion.htm .

También cuenta con familiares y amigos que te puedan ayudar y aportar ideas, ya que al probar la página una persona que no seas tú (lo ves todo muy bonito y fácil), ésta puede hacerte ver cosas que como programador no las percibes.

En mi caso he contado con amigos y la participación especial de mi madre y su alto nivel de exigencia. 😀

Para evaluar el nivel de accesibilidad de nuestra web, he utilizado herramientas de análisis tales como:

http://wave.webaim.org/ , cuyo resultado ha sido http://wave.webaim.org/report#/ribadeodental.com :

Captura2

También podemos hacer uso de validadores del W3C tales como: https://validator.w3.org/

Captura

Para CSS: https://jigsaw.w3.org/css-validator/  donde destaca la cantidad de errores asociados como en  https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css )

Aún corrigiendo los errores/problemas que destacan ambas webs, la mayoría de éstos son generados por el código de la plantilla  que elegí (inevitable al elegir una plantilla gratuita, ya que como hemos indicado éstas tienen multitud de errores) 😦 .

Se ha enfatizado en evaluar el nivel de optimización de búsqueda de la web en los diferentes motores de búsqueda que existen (Google, Yahoo…).

Para ello, he utilizado la página http://seogratis.org/ donde te analiza la web y te da pautas para mejorar fácilmente el posicionamiento de tu web.

Captura3

Cuyo resultado puedes verlo en: http://seogratis.org/sitioweb/http://ribadeodental.com

Para iniciarse en el SEO y conocer las bases: http://www.40defiebre.com/guia-seo/que-es-seo-por-que-necesito y si te interesase más el tema hay páginas que ofertan cursos como http://internetacademi.com/es

Existen multitud de páginas que ofertan servicios SEO. En mi caso el servicio de Hosting que he utilizado (1&1) proporciona un servicio de SEO propio de pago (aunque puedes contar con 30 días de prueba).

Captura5

Web estática

Tras estar divagando sobre que plantilla utilizar y viendo algunas muy interesantes (pero desechadas por su código inmantenible), decidí partir de la base que daba la plantilla: The Firm Bootstrap Template cuyo enlace es: http://www.bootstrapzero.com/bootstrap-template/the-firm (íntegra en HTML y CSS).

h

Como toda plantilla gratuita, esta también tenía erorres (se podían ver a simple vista que el carousel no era adaptativo, las imagenes al clickar no funcionaban, descolocado el formulario de contacto…). Lo que no sabía era cuantos y lo que me iba a costar modificarlos para que, sin estropear las bases de la plantilla, incorporar mis detalles que se convertirian en ambiciones (metas a conseguir) como programador :).

Para que el carousel fuese adaptativo (Simplemente poner la etiquita style=”width:100%” en cada imagen), modifiqué la barra de navegación para que se quedase fija al bajar y quité el menu desplegable y puse las diferentes secciones. Destacan los errores que daba el código programado en javascript a la hora de hacer scrolling y al pulsar en cada apartado para que te llevase a la sección correspondiente. También incluí un scroll-to-top (quité el que venía dado ya que la animación cambiaba al pasar el cursor sobre él) que sólo se hiciese visible cuando bajases una determinada distancia.

q

También incluí una breve introducción sobre la misión de la clínica, incluí un video con un botón, basandome en el video que incluye la página de crowfunding https://www.indiegogo.com . (Sin poder reutilizar nada de código porque siempre había conflictos con la configuración dada por la plantilla), a través de la página http://www.wifeo.com/code/ donde se pueden encontrar un montón de ideas hechas con CSS, Jquery pude agregar con facilidad el botón:

qweqw76575trte

Destaco los parámetros que puedes modifical al video de youtube añadido para que diese una visión plana (sin botones, tan solo con el de reproducir, para que tuviese una estética pura como el de la página). Posteriormente incluí otra sección donde presentaría a la plantilla de la clínica:gfdgdf

La siguiente sección era la de Tratamientos. Buscaba algo dinámico donde el usuaio tuviese que interactuar para que la página no fuese tan solo “bajar”. De las candidatas a posibles plantillas topé con Bootstrap Worthy cuyo enlace: http://htmlcoder.me/preview/worthy/v.1.0/ .

dasd

La cual adapté para que las imagenes que no funcionaban al abrirse, pudiesen ser funcionales y me permitiese dar lugar a la sección: Tratamientos.

grf dasdas gfdas

La única parte que pude mantener de la plantilla era la sección de Localización donde se presenta el mapa de google maps (aunque con pequeñas modificaciones).

En la sección de Contacto, se corrige la posición del formulario que estaba desencuadrada para que fuera paralela a la de los datos de dirección, teléfono… Se modifican todos los parámetros que ha de ser obligatorios, dejando la lógica para la entrega final.

Por último se modifican los iconos de las redes sociales con la posibilidad de hacer click abriendose en otra pestaña (con la propiedad target=”_blank”).

gr tr

Tras modificar todo, tenemos un aspecto renovado de la plantilla, cuyo resultado se puede ver en: http://www.ribadeodental.com

Foto – Yo estuve allí

Para esta entrada, detallaremos los pasos de cómo usar la herramienta de diseño gráfico online Pixlr para crear un collage con una foto de la escuela, una en la que aparezca yo, otra de un personaje famoso y un texto con nuestro nombre.

Partimos de las tres imagenes que vamos a utilizar:

collage

Seleccionamos la parte de la imagen (abriéndola primero con: FIle + Open image) que queremos recortar, ya sea con marquee tool o con lasso tool, para tener un marco mas pequeño con el que trabajar.dasdAñadimos una nueva capa a la original blanca en este caso y, si aparece un candado, clicamos en él hasta que aparezca como en la imagen. En este caso, la Capa 0. Con la herramienta Eraser tool, borramos el margen que definirá el perfil de nuestros protagonistas, quedando un fondo a cuadros, que indica que será transparente y no blanco como era la Capa 0.ytrCon paciencia, maña y utilizando el scroll del ratón para hacer zoom en las partes que más detalle precisen, obtendremos una imagen similar a esta:
das as

Ajustamos el tamaño de las imágenes que queremos añadir sobre el fondo:

Sin awe

Para añadir al conjunto parisino al fondo, haremos:

Control + X para cortar la silueta de Daft Punk. Abriremos una nueva imagen que en este caso será la del fondo y con Control + V los pegaremos sobre este fondo de la entrada de la ETSIT. Podemos utilizar la herramienta del puntero Move tool para mover esta capa que se nos acaba de generar al pegar a los robots. Si no estamos de acuerdo con el tamaño que hemos puesto, podemos hacer Control + Z para retroceder y volver a probar con un nuevo tamaño. Para ello podemos movernos entre las imágenes que hemos ido abriendo minimizando el campo de trabajo de la imagen (con el cuadrado) o podemos directamente (con el triángulo) abrir un desplegable donde se nos listan las diferentes imagenes abiertas.

qNos ha de quedar un aspecto similar a este:

czx Y repetimos los pasos aprendidos anteriormente, añadiendo la segunda imagen:

fin casi

Por último, añadimos el texto en la parte inferior con la herramienta Type tool. Obtenemos como resultado final:

fin

Trucos:

– Ampliar la pestaña del navegador con control +, para que tengamos más campo para editar y ahorrarnos ver la publicidad molesta.

– Exprimir tu creatividad 😀

Paletas de Colores

1. Mirando los enlaces de la web, parte del logo de tu web (si no lo tienes ahora, coge cualquier otro o bien una foto) y define la paleta de colores de tu web.

Paleta

2. Comenta qué alternativas tienes (monocromo, etc.), cuál seleccionas y por qué.  ¿Por qué has seleccionado estos colores, al margen de la gama?

Tenemos como alternativas, la monocroma, análoga y tonal, eligiéndose una análoga personalizada porque es la que se adapta al logo corporativo, donde los colores azul y blanco que predominan se identifican con los principios imperantes del sector de la salud: paz, tranquilidad, pureza, equilibrio…

RibadeoDental Azul A

3. Muestra diferentes paletas sobre tu web.

Alternativa monocromática:

Paleta2

Alternativa tonal:

Paleta3

4. Razona sobre las texturas de tu web

En un principio se ha optado por un fondo blanco sin textura para que la página sea lo más limpia posible, sin distracciones y dando una imagen al cliente de tranquilidad.