Curso de HTML5 #1: El comienzo

Dibujo de un globo terraqueo con los simbolos del potocolo de internet representando la conectiviad global

¡Bienvenidos al curso de html5!

Y si, a pesar de que ahora ya no hay mas versiones de html sino que todo son capacidades que tenga o no el navegador lo llamaré 5 porque es lo que el comun de los mortales comprende que es lo ultimo en html. Tengo que hacer esas pequeñas cesiones en pro de la comprension de la generalidad.

Comenzamos

He de decir que  hoy no voy a introducir contenido en detalle, solo voy a realizar una somera introducción de lo que pretendemos aqui y en la próxima clase seguiremos con la materia mas en serio.

Si, aclaro un poquito esto de HTML5 , tecnicamente ya no se le llama HTML 5, sino HTML a secas porque el grupo de empresas y organizaciones que dan lugar al estandar HTML han llegado a la conclusion de que tanta version de html era un lio y que era mucho mejor centrarse en activar o desactivar distintas capacidades que tuviera el navegador.

De este modo ya no usamos versiones y solo nos centramos en “bueno, este navegador es capaz o no de esto o de aquello” y así poder estandarizar un poquito html y la ejecución de páginas web en navegadores.

Y es que todos los que hayais desarrollado a lo largo de los 90 y hasta mediados dela decada de los 2000, incluso un poco mas , habeis asistido a la locura de la incompatibilidad entre navegadores y de navegadores compitiendo entre si creando etiquetas que solo funcionaban en uno y aunque a dia de hoy aun hay ciertos elementos en los cuales un navegador va en plan puntero desmarcandose del estandar, lo cierto es que hoy en día hay una compatibilidad superior al 95%, lo cual es muy conveniente.

Responsive Universal

Siempre hay variaciones, pero mas o menos es asi. Dado este entorno y este proceso y siendo que últimamente aparecen dispositivos cada vez mas accesibles , creo que en el desarrollo web accesible usando responsive esta parte de la clave.

Responsive se refiere al hecho de que la web se adapte de forma autonoma y automatica al dispositivo del cliente donde esta siendo mostrada , pero quiero llevar el concepto mas alla, ademas de esto deberia adaptarse al contenido que esta mostrando, al receptor del mensaje y, si este interactua en “tiempo real” al emisor de dicho mensaje.

Con este objetivo de crear webs que se adapten como un guante a la persona detras del dispositivo en que se muestran, es que iniciamos este curso.

Materiales que usaremos

Vamos a comenzar por el principio usando los materiales mas sencillos posibles: un editor de texto y un navegador, asi de facil.

Cada cual deberá usar el editor de texto plano (txt) de su elección o directamente un editor de codigo fuente si somos usuarios un pelin mas avanzados.

La eleccion dependera del gusto personal, de la accesibilidad del editor de texto por lo que cada cual elegira el programa y entorno que mas les convengan.

Tambien necesitamos un navegador , de su elección, evidentemente las ultimas versiones disponibles, vamos a centrarnos en las ultimas tecnologias, lo minimo es tener las ultimas versiones de navegador, a ser posible, de las ramas mas conocidas: Safari , Firefox, Explorer o su equivalente, Chrome , Opera incluso. También nos servirán navegadores que sean un poco menos Mainstream, pero tengan en cuenta que en ese caso podrian ser algo menos compatibles con las ultimas tecnologias.

Asi pues usaremos el navegador de su eleccion y el editor de texto que deseen, pero tengan encuenta que cuanto mas mainstream y moderno sea el navegador mas facil sera que sea compatible cien por cient con todo lo que haremos aqui.

En cualquier caso si hay algun tipo de incompatibilidad la podemos compartir y comentar, a través de los comentarios del post. Estaré encantado de apoyaros en lo que necesiteis.

Como nos organizaremos

Básicamente yo avanzaré investigando a la vez que os cuento cosas, y voy a crear el contenido como si fuera un curso al uso de HTML, de hecho me base en 4 o 5 cursos ya existentes para generar el índice y a partir de ahi redactare el contenido e incorporaré informaciones que crea de interés.

De este modo, podremos abordar la simplicidad de ue HTML no es mas que texto con etiquetas que le indican al navegador que es lo que hay dentro de estas etiquetas, si es un parrafo, si es una cabecera o una imagen.

Vamos a orientar el curso y el desarrollo de paginas a la accesibilidad universal.

Como aproximacion inicial, entenderemos accesibilidad universal como el que la pagina web sea capaz de ser usada por personas que vean y no vean, que oigan o que no oigan , con diferentes capacidades sensoriales, lectores de pantalla o herramientas de apoyo.

Sobre todo, el interfaz lo haremos buscando la maxima sencillez y enfocándolo, de forma que se cumpla la maxima simplicidad de uso por parte del usuario.

Para usar tecnicas de marketing de dudosa etica, confundir y liar al usuario de mala manera obligandole a permanecer en el site dando vueltas inutilmente ya tendreis tiempo despues si es vuestro deseo – espero que no –

El objetivo aqui es no solo abogar por la accesibilidad universal, por unas webs que se adapten al dispositivo y ademas al usuario que esta consumiendo nuestro contenido para hacerlo asi lo mas facil posible y mejorar nuestra proyección.

Ademas pretendo fomentar desde aqui , un nuevo ejercito, en el buen sentido de la palabra , de programadores sensibilizados con la accsibilidad.

Filosofía y Creación

No solo se trata de adaptarte al usuario, sino de que tu mismo como usuario te des cuenta de que incluso si un día no has dormido bien, no tendras las mismas capacidades, según cumplas años tambien perderas capacidades sensoriales y motoras, y también las mentales, ya que tu cerebro no funcionara igual de bien a los 20, 40, 60, 80 y 100 años.

Pero pretendemos que cualquiera de sus usuarios pueda consumir el contenido en las óptimas condiciones respecto de sus capacidades y forma de entender el mundo, incluso la vida. Y no me quiero poner desmasiado filosofico porque nuestro trabajo va a ser principalmente practico pero quiero que tengan en mente que aqui vamos a trabajar para gente que ve, como para geete que no ve. Se trata de crear contenido inclusivo (o traducido al castellano, realmente bien hecho)

Investiguen sobre Accesibilidad

Para todos aquellos que si ven y no estan familiarizados con las herramientas de accesibilidad, vayan investigando al respecto, evaluen que supone una discapcidad sensorial o motora, y observen que herramientras de accesibilidad existen y se utilizan en entornos Apple, Google, Windows … para suplir esas carencias y converstir la web en un entorno realmente inclusivo.

Para aquellos que no ven, especial hincapié en ponerse en el lugar de otros, como ejemplo el huevito de twitter, ya están tardando en pedir unos ojos prestados y poner una foto en condiciones. Los que vemos total o parcialmente, no tenemos la culpa de ver, y esperamos un tratamiento igual que del resto de las personas, un avatar digno. Es mas, hay gente que no oye y si ve, inclusion para TODOS.

No me vale la excusa de “como yo no veo para que” NO, eso es una falta de accesibilidad grave respecto de las personas que si ven, incluso de respeto. Si se pretende ser uno mas de la sociedad, hay que tener el mismo respeto por los demas como pretendemos para nosotros, el mundo es basicamente visual, si pretendemos ser profesionales, debemos aprender a comprender la visión aunque no veamos, y a no discriminar a los videntes por ver, del mismo modo que los que ven habran de comprender el punto de vista de los que no.

Y de ahi en adelante, los que no oyen habran de ponerse en el lugar el resto, todos en el lugar de las personas con problemas de movilidad y estos en la del resto… accesibilidad UNIVERSAL. Como se tiende a afirmar , todos tenemos algun tipo de discapacidad, asi que las excusas lastimeras de “es que yo soy “”loquesea” se las dejan en casa por favor.

 Esto es responsabilidad de todos

Aqui el concepto de “pobrecito mio que no ves” o “pobrecito mio que no te puedes mover” no lo voy a tolerar, es decir, tampoco se trata de que vayamos a machacar a nadie por sus capacidades, pero pretendo desde aqui aplicar el principio de igualdad real.

Vamos a hacer todos las cosas en igualdad de condiciones y vamos a tratar de colaborar entre todos, porque ni yo soy Dios, ni lo se todo, iniciaré un camino con esto de enseñaros lo mucho o lo poco que se. Llevo desde los 8 años programando y desde los 22 profesionalmente y algo mas de 10 años en desarrollo web. Aún así tengo muchísimo que aprender.

Tengo cierta experiencia, pero no lo se todo ni muchisimo menos. Durante este proceso, para poder trasmitiros como hacer las cosas y cual es el metodo que he encontrado mejor para determinadas casuísticas, voy a tener que investigar por mi cuenta con lo cual pretendo que esto sea algo interactivo.

La idea es que no sea yo el único que os trasmita lo que he encontrado o lo que creo que es el mejor modo de hacer algo, sino que estoy abierto a colaboraciones por parte de todos y comentarios, incluso sobre temas en que no esteis de acuerdo conmigo, tratamos la problemátoca y puntos de vista, trazamos un plan y trabajamos juntos para beneficiarnos todos.

Podemos incluso preparar un contenido especifico sobre la cuestion concreta si fuese necesario, la idea es crear no solo un curso que ayude a que el interesado en iniciarse en estas cuitas pueda, sino crear un foro en el que todos nos apoyemos mutuamente con el objetivo final en mente de crear, tanto desde este como desde el curso de programacion, un ejercito de programadores sensibilizados de serie con la accesibilidad universal y que tengan esta como concepto de base.

Con tiempo de sobra para hacerlo bien

Hemos llegado unos años antes, ahora mismo lo que se esta implantando es algo que llevabamos años comentando (como 5 años atras cuan pioneros, siendo tildados de locos en muchos casos), que es la web responsive. A día de hoy hasta en la televisión nos recuerdan “haz tu web responsive o sino vendrá el coco, te comera y no podras ver tu web en la nevera”.

En todo caso, a dia de hoy es cuando se esta implantando esto en serio, y cuando la comunidad en general tanto usuarios como programadores se esta tomando en serio la inclusión.

Desde mi punto de vista amplío el concepto de Responsive ya no es solo que la web se adapte al dispositivo en concreto en función del contenido que va a trasmitir, sino que, además, y es lo que pretendo explorar aqui, es necesario que el concepto responsive se amplie.

¿De que forma? tomando en consideracion el hecho de que además de adaptarse al dispositivo es vital e importante que la web se adapte a la persona que hay detras del dispositivo.

No es lo mismo adaptar una web para movil pensando en una persona que ve perfectamente, que adaptar esa misma web a un dispositivo movil para alguien que no ve bien (como es mi caso) o que no ve. No es lo mismo adaptar una web con sonidos para dar avisos a personas que oyen perfecto que para personas con el oído dañado parcialmente o sin posibilidad de oir.

Incluso si me apuran, no es lo mismo adaptar una web para una persona que “no” tienen ningun tipo de discapacidad que para otra que es sordociega, que tiene que suplir y luchar para superar las dos limitaciones de vista y oido.

Y creedme en esto, se puede hacer, a traves de Braille, usando el tacto, y diferentes herramientas. La previsible aparicion de pantallas en relieve en un futuro no demasiado lejano, no solo va a ser una revolución en el mundo de la accesibilidad, sino muy especialmente para aquellas personas sordociegas, que van a poder acceder a sistemas e interfaces digitales que hasta ahora les eran ajenos.

Fijaos si es complicado obtener herramientas tanto web como de apps accesibles mediante el lector de pantalla correspondiente y bien diseñadas para ser manejadas solo con audio y movimientos de flick , tanto mas si estas manejando ese interfaz tan solo con un monitor/teclado braille que te lee y permite interactuar con esta informacion.

Si ademas de eso lo complementas con poder tocar las formas en la pantalla, va a ser algo grande, pero a dia de hoy todavia no hemos llegado a ese punto, asi que tomando en consideración el amplio abanico de personas que hay desde aquel que no le pasa absolutamente nada hasta el extremo de alguien que este totalmente inmovilizado sea ciego y sordo , pudiendo interactuar con una ceja y un monitor braille que le trasmita las letras directamente mediante tacto a la cara.

 La madriguera de Conejo

Quiero cubrir todo esto mediante esta ampliacion del concepto de responsive, interfaces visualmente atractivo a la vez que interafaces sencillos de utilizar y comprender , de tal forma que incluso una persona que deba usar esta tecnologia en condiciones extremas, tenga oportunidad de disfrutar de nuestro sitio web con normalidad.

Muchas veces pensamos en la accesibilidad y nos centramos solo en la ceguera, pero esto es mucho mas amplio.

Lo dicho herramientas muy sencillas, avanzaremos algo de Javascript y un poquito de CSS, lo justo para aprender , lo potente de javascript estara en el curso de programacion.

Hay que tener en cuenta que, eventualmente, habra un tercer curso (espero que de aui a un par de años) sera el de diseño web accesible , es decir pretendo que una persona sin ver la pantalla diseñe interfaces visuales. Como podreis entender, no solo el proceso va a ser largo sino que aun no domino los conceptos necesarios para hacerlo, por lo que me tomara tiempo.

Quiza no lleguemos al 100%, pero si logro que alguien a ciegas diseñe el 90% de un interfaz atractivo visualmente aunque no sea el mejor del mundo, y solo hubiera que emplear a un diseñador vidente el ultimo 10% del desarrollo de una web profesional, ganariamos mucho camino en la normalizacion profesional.

Por otro lado, disminir la barrera entre personas que ven y no ven, tanto en un sentido como en otro, sera positivo. No sera lo mismo lograr explorar ciertos conceptos visuales si se ha nacido ciego que si se vio alguna vez, pero explorar estas necesidades forma parte del proceso.

Vamos a tratar todos de hacer el esfuerzo de expandir nuestra percepcion del mundo poniendonos en la piel de personas con diferentes tipos de discapacidad y tratar de comprender asi que se precisa para crear las webs correctamente.

De hecho tras ver un Ted Talk he adquirido un libro-curso sobre ecolocalizacion que es mas que interesante. Imaginad detectar obstaculos y formas solo con el sonido, incluso montar en bicicleta. Impresionante.

Esto nos ayudara a ser mejores desarrolladores y ampliaremos nuestra capacidad de empatía, lo que redundara en una mejora general de nuestras capacidades y resultados.

Con todo este conocimiento, sera mas sencillo decidir que codigo escribir usando el HTML que aprenderemos aqui. Asi lograremos acercarnos mas a esta Accesibilidad Universal que no por utopica ha de ser desacartada. Hace no tanto parecia imposible trabajar una pantalla tactil a ciegas y hoy en dia es algo trivial.

Porque Web

Básicamente porque, a dia de hoy creo que es el medio comun a todo tipo de usuarios, independiente de plataforma y que mas iguala a diferentes personas en torno al uso de la tecnologia.

No obstante habra aspectos como suplir las posibles carencias de los dispositivos en cuanto a acesibilida tendra que ser investigada y resuelta en paralelo, quiza mediante un lector de pantalla integrable y ejecutable integramente en nuestro navegaodor sea la clave, veremos.

He localizado un proyecto de sintesis de voz con estas caracteristicas, veremos si podemos integrarlo adecuadamente 🙂

Pero todo esto sera mas bien hacia el final del curso de momento empecemos por la base y veamos donde lleva el camino!. Paso a paso afianzando los conocimientos poco a poco!

Lo dicho ni lo se todo, ni lo que digo es ley, sencillamente voy a tratar de dar lo mejor de mi para apoyar a todos en el proceso mientras trato de enseñar, pero estoy abierto a comentarios, porque yo tambien pretendo aprender en el proceso.

Bueno, me despido no sin antes indicarles que pueden escuchar este mismo contenido en formato audio a través del Podcast específico que, además lleva algunos capítulos de ventaja.


Resistance is Futile

dibujo esquemático de Pilae el pequeño modulo que aterrizó en el conetal

 

Cuando vivimos el progreso tecnológico en nuestras propias carnes, y mas en temas de accesibilidad, es fácil perder la perspectiva, o visión de conjunto del camino avanzado en los últimos años.

Y mas aun, es muy común no darse cuenta de hasta que punto es la visión y emeño de unos pocos los que hacen avanzar el mundo hacia adelante, mientras otros muchos solo se quejan y entorpecen el progreso.

Es por ello que me gusta este post que les recomiendo hoy, es un artículo que explora los avances tecnológicos sucedidos en las ultimas décadas, durante tu vida, concretamente. Un imprescindible para este fin de semana.

Nota de Autoría

La fuente original del video “Tech in Review” que encabeza el post del enlace fue creado por Ben Faw de Best Review, puedes acceder a dicho video original que incluye ademas de la posibilidad de un visionado mas detallado, una función que permite comparar las instantáneas inicial y final, si os pasais por la web no os olvideis de apoyarlo compartiendo el video a través de los botones que encontrareis en ella.

[bucket id=”134″ title=”Notas de Accesibilidad”]

  1. Video Inicial.-Ne nos muestra de forma visual la evolución del escritorio de trabajo desde la década de 1990 hasta la fecha, cada vez hay menos elementos físicos, que son sustituidos progresivamente por sus versiones digitales. (ver notas de autoría)
  2. Imagen 1.- Izquierda: Una Nintendo Nes. – Derecha: Una Nintendo Wii.
  3. Imagen 2.- Izquierda: Un Walkman Sony con sus audifonos de diadema. – Derecha: Un iPod de Apple de ultima generación con funda azul celeste.
  4. Imagen 3.- Izquierda: Un disco de 3 1/4″ de color negro. – Derecha: Un Pendrive con la forma del maestro Yoda. La cabeza es la que cubre el conector.
  5. Imagen 4.- Izquierda: Un radiocasette de doble pletina. – Derecha: Un altavoz bluetooth Mini Jambox verde de Jawbone.
  6. Imagen 5.- Izquerda: Un televisor de tubo en blanco y negro de 14 pulgadas y sintonización analógica. – Derecha: Una televisión inteligente de pantalla plana.
  7. Imagen 6.- Izquierda una cámara Sony portátil de carrete analógico, típica de los 90s. – Derecha: Una cámara Nikon Reflex digital de ultima generación.
  8. Imagen 7.- Izquierda: Imagen de un ordenador Macintosh de Apple. – Derecha: Una tablet actual.

[bucket id=”136″ title=”Notas de Accesibilidad Pie”]


Un mundo accesible

Dibujo de un humano mirando al futuro

Sueño con un mundo en el que la accesibilidad no sea tema recurrente, porque es tenida en cuenta a cada paso, un mundo que fomente la idea de “todos hacia delante”, un mundo que practique la inclusión como parte de su ADN.

Mientras ese mundo llega, toca luchar cada día por acercar cada vez mas la realidad a ese ideal, a ese concepto social que haga innecesario recordar a nadie “eh! que estamos aquí!. Cada cual debe aportar al conjunto y no dar nada por hecho. Pim Pam Pim Pam

Pero no, no estamos solos en esta lucha, existen personas, como la que os propone esta conferencia que trata sobre la accesibilizacion del mundo real y digital, que cada día se levanta con nuestro mismo objetivo.


Controles accesibles en el navegador

Dibujo del ligo de Safari

Una de las cuestiones peliagudas de los interfaces de usuario hoy en día, es la dependencia absoluta de la parte visual. En estos tiempos en los que los wearables empiezan a emerger como alternativas de uso diario, generar interfaces que no dependan (aunque exploten) de los aspectos visuales es vital.

El responsive, que originalmente solo tenia ue ver con adaptar la experiencia al tamaño de la pantalla del dispositivo, ha de avanzar, hacia un sistema que incluso pueda funcionar sin pantalla.

¿Navegar webs desde un reloj? tecnológicamente viable, solo hemos de evolucionar el método. Para ayudarnos a ello, podemos comenzar con este video en que el se nos explica con sorprendente sencillez, como utilizar la accesibilidad para potenciar los interfaces de usuario.


Planificar para el éxito

Dibujo esquemático de un detective privado clásico, con sombrero y gabardina

Planificación, constancia, aprendizaje y voluntad. No hay mas clave para triunfar en nuestros objetivos, salvo, tal vez, marcarnos estos objetivos. Pero una vez definidos, hay que ir a por todas.

Aprovechar cada minuto, cada segundo, remando en todos los frentes de forma coordinada en pos de un objetivo común … y no dar un solo paso atrás. He ahi la piedra filosofal, no lo intentes, solo ¡hazlo!.

Esto es lo que Juan Haro nos cuenta, en este podcast sobre la materia con toda claridad, como organizarte para lograr tus objetivos. Sin duda, un documento sonoro de gran valor.

 

 


Programar contra viento y marea

dibujo del logro de Metsu Design Studiosque que representa un Quijote dibujado de forma esquematica

Contra vient y marea, cuando todos te dicen “toma este transistor y siéntate a escuchar música”, cuando a tu alrededor se permiten el lujo de tirar la toalla por ti, sin consultarte, sin preguntarse siquiera si es lo que deseas. Como si perder la vista te convirtiera en alguien sin criterio.

Esto es contra lo que se ha de luchar cada día, en cada esquina, en cada movimiento, contra la aceptación de que una discapacidad (la que sea) supone abandonar tu vida y convertirte en un mueble, en un adorno que enseñar a las visitas.

¡Cuanto tenemos que aprender al respecto! ¡ y que divulgar!, pero entre tanto, el ejemplo que se nos cuenta en este artículo sobre lo que supone programar a ciegas, es un buen comienzo.


Porque es mas eficiente muchos pocos

dibujo esquemático de un campo de amapolas

Como dice el dicho, “si asomas el pescuezo, hace un frío de l carajo” , que me acabo de inventar, resulta curioso como la excelencia de cada miembro del equipo es necesaria pero no determinante para el éxito del conjunto.

Un equipo solo formado de estrellas fracasará igual que uno que este formado por gente sin talento. En el equilibrio y la actitud del grupo para llevar adelante su cometido entre todos está el secreto del verdadero éxito.

Esto nos lo cuenta la voz de la experiencia en este Ted Talk en el que se nos habla precisamente de esto, de la importancia de un equipo equilibrado, con sus debilidades y fortalezas, pero equipo.

Da que pensar.

 


La libertad tiene un precio

dibujo de la paloma de La Paz atravesada por la sangre de los inocentes

Y en ocasiones ademas,, ese precio se paga en sangre humana. Es demasiado común asistir a debates en los que se habla de lo que debería ser, lo que es justo que sea, y lo que otros deben hacer para que nosotros podamos disfrutar de esas libertades, pero la realidad no funciona de ese modo.

Si queremos disfrutar de la libertad tenemos que estar dispuestos a crearla, si, crearla y mantenerla, a veces paradojicamente mediante la imposición, ya que habitualmente cuando se debate en un grupo amplio, el resultado es inspirativo.

En demasiadas ocasiones nos perdemos con el concepto de derechos en lugar de plantar cara al mundo y hacer de estos valores que decimos defender, una realidad en el ámbito de influencia que tenemos.

Esta es la gran lección que les planteo hoy que todos aprendamos en común, a través de este Ted Talk en el que la actual defensora de la libertad, nos da una lección magistral de como tornar un lugar sin esperanza en un núcleo de excelencia y crecimiento social.

El lunes mas. Disfruten! 🙂


El diseño no es lo que parece

Dibujo de una mujer vistiendo un sombrero estilo años 20

 

La primera norma del diseño es … que en relidad no hay normas, sino técnicas y decisiones, hay que echarle horas para descartar aquello que sobra y aplicar los elementos que si, y mucha técnica, para plasmar esos elementos de forma eficiente.

Y es que diseñar es algo mas que aplicar colores y formas, es funciona, es solución, es disyunción, habilidad y riesgo, en pos de conseguir un producto final que merezca la pena usar.

Como ejemplo interesante de esto que comento, os propongo este Ted Talk donde se nos muestra lo que hay tras el diseño de varias portadas de libros reales.


No somos máquinas

Dibujo de un Zylon de la serie de lis 60, con armadura negra y visor rojo sangre

Nos gusta pensar que todo lo que hacemos está razonado de una forma lógica y no subconsciente, y que todo lo hacemos por algo, pero eso no es así. La mayor parte de nuestras decisiones las toma nuestro cerebro por métodos no necesariamente basados en la lógica, segundos antes de que seamos conscientes siquiera.

Es por esto que el Marketing como tal toma tanta importancia, pero no solo aplicado a la venta de productos, sino a la percepción que otros tienen de nuestras acciones y comunicaciones. Hemos de seducir y convencer en ese orden.

Por ello es vital que aprendamos las tecnicas y tácticas que , adaptadas a nuestras necesidades nos permita comunicar con efectividad, y en concreto a la hora de escribir mails. De eso va nuestro contenido recomendado de hoy, un artículo en que se nos brindan una serie de consejos para maximizar el alcance de nuestros mails, y lograr que  lean nuestros correos.