Archivo para el Marzo, 2016

Juegos de ROL en vivo en Donostia!!!

Posted by MrDedalo

Por XavierCrespo.·.

Hace mucho, mucho tiempo…

Existió un planeta donde reinaba la paz.

Las armas habían sido erradicadas y la violencia había desaparecido totalmente.

ARKADIA se llamaba…..

(más…)

Tecnología e innovación social al servicio de la inclusión

Posted by MrDedalo

Por XavierCrespo.·.

El pasado mes de noviembre de 2015, en Barcelona, tuve la oportunidad de asistir a una mesa de debate en la que Isabel Benitez, Iñigo García y Guillem Orpinell se sentaron a hablar sobre “La tecnología y la colaboración al servicio de la inclusión“.

El objetivo estaba claro, se quería analizar lo que la tecnología y la economía colaborativa pueden hacer por el colectivo de minusválidos y desempoderados digitales y qué queda por mejorar en el ámbito de la inclusión de dicho sector. (más…)

Conocimiento libre y educación… Por el buen camino

Posted by Iñaki García Hernández

Por Iñaki García Hernández

El largo y a veces complejo proceso de aprendizaje que llevamos en nuestras espaldas durante gran parte de nuestra vida, no es sólo una práctica individual, sino también grupal o colectiva. La comunicación interpersonal, hace que ambas prácticas se consoliden en su desarrollo y en su cercanía. (más…)

¿Pivotar o no pivotar? he ahí el dilema!!!

Posted by MrDedalo

Por Xavier Crespo.·.

En febrero de 2006, la librería Presses Universitaires de France (PUF), en la esquina de la plaza de la Sorbonne y el bulevar Saint-Michel (Paris), cerró sus puertas para convertirse en tienda de ropa para hombres.

El propietario de la PUF, Patrick Arfi, había vendido el local dando fin así al ciclo de vida de lo que se consideraba un emblema de la vida parisina desde su fundación en 1921.

Frecuentado por estudiantes y profesores de la Sorbonne, la venta del local y cierre de la PUF había causado muchísima indignación entre los parisinos. Lyne Cohen-Solal, entonces vicealcalde de París, declaró que dicho cierre era… (más…)

La piedra angular para toda Web

Posted by Iñigo Garcia

Por Iñigo Garcia

Hola, soy Iñigo.

Hace poco más de un año asistí a una charla en CO&ART con un tal Xavier Crespo, entonces desconocido para mí, donde nos contaba sus planes para el proyecto —mejor dicho, PROYECTAZO— que da nombre a este nuestro querido y flamante blog.

Con ese Proyecto Ikaros lo que el susodicho moreno (así le llamo, como él a mí melenas ;P) planteaba era un marco de creación y desarrollo tecnológico que puede encajar perfectamente en Gipuzkoa el momento actual; en este marco se eliminarían ciertas barreras existentes para que cualquier persona —tenga la experiencia y conocimiento tecnológico que tenga— pueda aprender, enseñar y/o trabajar con algo relacionado con las Tecnologías de la Información y la Comunicación. Lo mejor de todo es que las consecuencias de la implantación de este nuevo marco supondrían enorme beneficio social y económico para la zona.

La explicación de la idea se extendió no poco, pero dada la naturaleza de la idea así debía ser; a medida que la iba describiendo y desentrañaba las posibilidades yo me iba enamorando más. Era una idea que realmente merecía la pena y me puse a trabajar en ella.

Estudié diseño gráfico y producción editorial, al año siguiente realicé un master en desarrollo multimedia e Internet. En unos 10 años de experiencia profesional que cuento hasta la fecha he escrito HTML y CSS como un loco, y debido a mi trayectoria me especialicé en diseño y desarrollo de interfaces y experiencia de usuario (UI/UX, en inglés). El interés por las nuevas tecnologías y la capacidad de descubrir formas alternativas de funcionar me acompañan desde que tengo uso de razón.

Si sumamos eso a que me encantan los retos, no podía quedarme sentado viendo pasar ante mí la oportunidad de trabajar en algo tan bonito, y decidido a aportar mi granito de arena comencé a trabajar en diseño y comunicación de Proyecto Ikaros. Ante mí se presentaba el reto de diseñar una plataforma online de desarrollo aparte de las necesidades de imagen corporativa y presencia online que tamaño proyecto requeriría. Un caramelito muy apetecible, vamos.

El reto sigue abierto ya que el trabajo de desarrollo de la plataforma es colaborativo, y como yo soy la primera persona que se puso a pensar en el diseño, voy a describir las líneas maestras que según pienso deben vertebrar la planificación y puesta a punto de esta obra —y por extensión cualquier otro sitio o aplicación Web—. Me voy a ceñir a conceptos que puedan traducirse en líneas de HTML, CSS y JavaScript:

Accesibilidad

Lo primero y más importante de todo. En todo el tiempo que llevo trabajando en el mundo de la comunicación visual he constatado que hacer llegar la información a todas las personas no es en absoluto una prioridad, y ahí tenemos un gran problema de base. Según la Declaración Universal de Derechos Humanos, en los artículos 19 y 26:

Artículo 19:

Todo individuo tiene derecho a la libertad de opinión y de expresión; este derecho incluye el de no ser molestado a causa de sus opiniones, el de investigar y recibir informaciones y opiniones, y el de difundirlas, sin limitación de fronteras, por cualquier medio de expresión.

Artículo 26:

  1. Toda persona tiene derecho a la educación. La educación debe ser gratuita, al menos en lo concerniente a la instrucción elemental y fundamental. La instrucción elemental será obligatoria. La instrucción técnica y profesional habrá de ser generalizada; el acceso a los estudios superiores será igual para todos, en función de los méritos respectivos.
  2. La educación tendrá por objeto el pleno desarrollo de la personalidad humana y el fortalecimiento del respeto a los derechos humanos y a las libertades fundamentales; favorecerá la comprensión, la tolerancia y la amistad entre todas las naciones y todos los grupos étnicos o religiosos, y promoverá el desarrollo de las actividades de las Naciones Unidas para el mantenimiento de la paz.
  3. Los padres tendrán derecho preferente a escoger el tipo de educación que habrá de darse a sus hijos.

Esto significa que si no prestas atención a este aspecto de tu trabajo, la web que hagas no va a entregar la información que alberga correctamente a alguien con un navegador anticuado, alguien que no puede ver y su navegador le lee el contenido, alguien que acaba de llegar a Internet y no sabe cómo se va de un sitio a otro, alguien que no sabe el idioma en el que escribes, alguien que no puede hacer un gesto multitáctil como pellizcar para aumentar/alejar… y así muchos casos más. Ahí precisamente radica el susodicho error de base.

Accesibilidad
Icono de accesibilidad

Las webs cuentan historias en un medio hecho para hacer llevar información lejos en el espacio y el tiempo, y se debe cuidar que cualquier persona o sistema informático pueda acceder a esa información.

Accesibilidad de contenidos no es solamente hacer webs sin JavaScript (a partir de ahora, JS) y con mucho contraste entre el texto y el fondo de su contenedor, nada de eso; la mayoría de los navegadores Web tienen JS habilitado. Es más, el correcto uso de JS permite que el sitio sea más accesible.

Existe un mito en el mundo del diseño y desarrollo Web que dice que para hacer una página o sitio accesible hay que invertir muchas horas en adoptar los estándares de accesibilidad Web. Y resulta que no, y lo puedo decir por mi propia experiencia; puede ser peliagudo de implantar en proyectos pequeños, pero en grandes proyectos no hacerlo desde el principio acaba saliendo muy caro a la larga.

Al igual que afirmo esto, debo recalcar que el buen diseño puede manifestarse de mil formas novedosas cada día y muchas veces puede cruzar la línea entre diseño y arte. Aplaudo sinceramente el talento de quienes son capaces de hacer eso y enriquecernos al resto del gremio, y también quiero recordar algo que leí una vez:

El arte se interpreta mientras que el diseño se entiende.

Si tu diseño es para una web y quieres que la información contenida llegue a todo el mundo (por poner ejemplo sencillo, una tienda de tu pueblo con eCommerce), ahí debes empezar a cortar las alas de tu ego más creativo. Escribe tu HTML de modo que si algo falla y no se cargan tus estilos CSS puedas leer y entender coherentemente de arriba a abajo ese documento desnudo, como si de la página de un libro se tratase. Sólo hacer eso tan sencillo ya es un gran comienzo, además de un excelente ejercicio mental para la organización de información.

Como este asunto de entrar en una página para ver su contenido no es algo exclusivo de humanos sino también de otros programas, existe la necesidad de marcar o etiquetar de alguna forma el propio contenido. Es un poco lío este concepto, pero imagina que eres un primitivo programa buscador e indexador de Internet: vas a una dirección descrita en una URL, encuentras un chorizo enorme de letras y números que definen un documento HTML, y… ¿después qué?.

Líneas de código HTML con JavaScript y CSS incrustado
Código HTML con JavaScript y CSS

¿Dónde acaba lo superficial o puramente decorativo y dónde empieza en texto importante?. ¿Están relacionados un botón en el que pone “Menú” situado al final del documento con un menú oculto al principio cuya id también es “menu”?. Son muchos los casos en los que un programa o API pueda tener dificultades para saber qué hay situado en qué lugar. Para eso esta WAI-ARIA (artículo en inglés) que responde a las siglas Web Accessibility Initiative – Accessible Rich Internet Applications. Me puedo extender mucho más con este tema, pero no será ahora.

HTML5, por favor

No va siendo hora, ya va siendo año. Escribo esto a principios de 2016, y aún hoy entro en sitios cuyo código empieza con un estándar XHTML de 1999.

Mil, novecientos, noventa, y nueve. Señoras y señores. Por el amor de los Dioses del Olimpo, que ya son 17 años sin ponerse al día. Lo primero que pienso en esos casos es “no, si además le habrán pagado por ello”. No pasa nada, todos los días se puede aprender algo y también a eso hemos venido quienes escribimos aquí.

HTML5 es la 5ª revisión del Lenguaje de Marcado de HiperTexto que el bendito de Sir Tim Berners-Lee nos regaló a la humanidad por una cuestión de principios, y esta última revisión es especialmente importante ya que hace que cualquier navegador Web que se precie puede interpretar contenido multimedia como video, audio, 2D/3D de forma nativa. Supone una revolución total para un lenguaje que se creó para transmitir solamente texto sin imágenes.

Mensaje de error por el complemento Flash en Firefox
Error de Flash en Firefox

Hace 10 años, si querías ver un vídeo, escuchar un audio o jugar a un juego a través del navegador debías instalar añadidos (plugins, en inglés) que extendieran las capacidades del propio navegador. El más famoso fue el ahora condenado a muerte Flash —al que saludo con honores por su necesario y valioso acto de servicio— y que también suponía un silo de información al que no era fácil acceder si navegas por Internet sin usar la vista.

Flash también permitía interacción a través de su lenguaje ActionScript y el uso de animaciones y dibujo vectorial. Gracias a la combinación de estas dos últimas capacidades se llegaron a desarrollar series de animación como Cálico Electrónico. (Me vais a disculpar pero quiero mandar un saludo a Nikotxan, su creador, porque me hizo mucha ilusión conocerle hace no mucho y echar buenas risas con él en Kafe Antzokia de Bilbo). Perdón, esto último de Flash nos lleva a…

CCS3 + SVG. Oh, seeh!

CSS ya no es sólo jugar con margin/padding y float para no maquetar con tablas; ya vino implementando algunas de estas mejoras con el tiempo, pero a día de hoy nos trae bordes redondeados, sombras en caja y texto, transparencias, degradados, las directivas @media de las que cuelgan los media-queries que tan necesarios son para llegar a tantas pantallas de tan diverso tamaño, estilos de voz para navegadores que leen las webs (¿a que esta no la sabías?), animación, transformaciones 2D/3D…

Además, si usas SASS o LESS (o cualquier otra forma de CSS pre-procesado) podrás escribir más rápido y mantener tu código mucho más fácilmente una vez hayas puesto tu Web en producción.

SVG es un formato de imagen vectorial derivado del XML que puedes crear con un programa de dibujo como InkScape, Sketch o Illustrator. Al igual que el lenguaje HTML que también es un derivado del XML, un navegador Web interpretará sin problemas SVG como una imagen vectorial, incluso si escribes tu SVG dentro del HTML.

CSS y SVG tienen algo en común
Diagrama de Venn de CSS y SVG

Este formato de imagen por su naturaleza es escalable, y aunque no sirve para fotos, resuelve muy bien el eterno problema de los logos y los iconos a diferentes resoluciones para según qué resoluciones o tamaños de pantalla. Si te lo montas bien puedes crear tu librería de sprites para iconos.

Como ventaja desde el punto de vista de la accesibilidad de contenido es que dentro del propio archivo SVG se pueden titular y describir las ilustraciones que contenga.

Ahora viene la crema: un navegador Web interpreta el código HTML y reconoce el DOM (Document Object Model, en inglés) para poder acceder al contenido y modificarlo mediante CSS y JS.

Y como SVG viene del XML, también tiene su DOM. Mediante CSS y JS el navegador puede jugar con SVG también: puedes modificar tamaños, formas, colores mediante CSS y aplicar interacción mediante JS. Ya tenemos las herramientas necesarias para crear contenido tan rico como el que podíamos crear con Flash, pero sin Flash.

El mago Juan Tamariz tocando un violín invisible
Juan Tamariz y su famoso violín

El método Mobile-First

Durante estos años en los que iban apareciendo y desapareciendo lenguajes de programación que dan forma a Internet, en el mundo exterior y tangible que habitamos aparecieron nuevos dispositivos para acceder a Internet. En 2007 salió el primer iPhone y cambió por completo la forma de navegar las Webs. Antes del iPhone existían dispositivos móviles con pantalla táctil, pero la primera “escuela” de diseño Web móvil debía pensar en un teclado alfanumérico con menús numerados y una anchura media de pantalla de 128 píxeles, y generalmente iba a colgar de un subdominio para móviles de tal modo: http://m.dominio.com, o http://dominio.com/m.

De la noche a la mañana nuevos gestos multitáctiles como deslizar o pellizcar —entre otros— se unían a los ya existentes eventos de ratón. Había que hacer Webs nuevas con botones al menos tan grandes como la punta de un dedo, y de regalo empezar a contar con un mínimo de 320 píxeles. Empezaron a crearse por todas partes librerías CSS y JS y la cosa se empezó a descontrolar un poco en pleno auge del —mal llamado, según mi criterio— diseño Web 2.0. Y aquel descontrol y despiporre que aún sigue moló mucho, y eso me mola mucho.

Todas esas novedosas herramientas se apoyaban en los últimos estándares del W3C que iban saliendo y eran cada vez más potentes; llegó un momento en el que se podía diseñar una Web que se viera bien en una pantalla de escritorio (por convención, más o menos a partir de 1024 píxeles de ancho), y que vista desde un dispositivo con 320 píxeles tuviera diferentes reglas CSS que permitieran una lectura e interacción más acorde al dispositivo. Los anteriormente mencionados media queries (entre otras cosillas) son los principales responsables de esta evolución. De este modo, ya no hacen falta dos versiones de la Web (clásica y móvil), sino buenos estilos CSS que contemplen ambos escenarios dentro del mismo dominio. Algo que, dicho sea de paso, facilita mucho el trabajo a los buscadores.

Existen dos aproximaciones:

Una pantalla de smartphone, una de un tablet y una de ordenador de sobremesa
Diseñar de mayor a menor anchura de pantalla

Graceful degradation, que consiste en diseñar un sitio en su versión clásica (o sea, pantallas de más de 1024 píxeles de ancho) y que se vaya reduciendo en tamaño, reordenando o incluso ocultando contenido a medida que se baja hasta los 320 píxeles de ancho.

Una pantalla de ordenador de sobremesa, una de un tablet y una de un smartphone
Diseñar de menor a mayor anchura de pantalla

Progressive enhancement, que consiste en adecuar el diseño primero para pantallas pequeñas (mínimo, 320 píxeles de ancho) e ir cambiando los estilos para pantallas cada vez más anchas. Este es el enfoque que yo le doy a mis proyectos porque el acceso a Internet es desde hace un tiempo mayor desde smartphones que desde equipos de sobremesa, y la tendencia es que cada vez irá a más.

Resumiendo

Sin importar qué vaya dentro de tu Web o para quién la hagas, debe seguir estos criterios como punto de partida. El contenido debe estar de forma que se pueda acceder a él sin problemas ni barreras; así poco a poco se construye una Internet que asegure derechos fundamentales.

Los estándares están para algo y hoy en día más en forma que nunca porque en solitario o con mil combinaciones son cada vez más capaces. Conviene estar al día de las novedades.

Bonus por leer hasta el final

Para evitar inconsistencias entre navegadores se recomienda escribir HTML y CSS válidos, pero si aún así la cosa falla, existe esta maravilla de función en JavaScript (nada de jQuery) que pinta clases en la etiqueta html con información sobre el sistema operativo, versión del mismo, versión del navegador, anchura máxima de pantalla y más cosillas para poder escribir CSS específicos para navegadores “rebeldes”. La pequeña maravilla en cuestión existe bajo el nombre de CSS Browser Selector y en su repositorio podrás ver cómo funciona, qué hace y quién colabora en ese proyecto, y hay algunos nombres muy respetables.

Salud y felicidad. En otro momento seguimos.

Contratar a un consultor informático ¿para qué? si mi cuñado es un “Friki de esos”…!!!

Posted by MrDedalo

Por XavierCrespo.·.

Seguro que ahora mismo te estás riendo porque recuerdas que ya has pensado en esto antes… Pues no eres el primero ni serás el último, todos hemos pasado por esto.

La mayoría de las empresas gestionan su plataforma informática hasta que un día son tan complicadas que mantenerlas mínimamente operativas se convierte en una labor hercúlea.

Llegados a este punto, te planteas la posibilidad de contratar a un “Responsable de Informática y Sistemas”, o sea, un Ingeniero Informático que llegará de la nada a meterse en tu casa y ocupar un cargo de director que te va a costar un ojo de la cara y que ni siquiera sabes si podrás rentabilizar. Pero espera espera…. Tu cuñado no es un “friki” de esos como el tal Sheldon Cooper que sabe mogollón de esas cosas???

Pues sí, el tío sabe hablar hasta en Klingon, si es que por hablar habla hasta con el Fax….

Y así sigue la historia que todos conocemos… Pero sabes que existe otra opción? (más…)

Primera semana de IkarosBlog

Posted by MrDedalo

Por XavierCrespo.·.

Primero que nada quiero comenzar este post dando las gracias por vuestra espectacular acogida, hace apenas 1 semana que dimos comienzo a esta aventura y la verdad es que estamos muy satisfechos con los resultados obtenidos.

Buenas #IkFrikis, hoy es viernes y ya son más de las 6 de la tarde, que os parece si después de una semana de trabajo nos sentamos a charlar un poquito con un par de cafés de por medio.

Como ya mencioné en el post inaugural, uno de nuestros objetivos es el de procurar atraer a este espacio a los autores mas renombrados e influyentes así como a jóvenes promesas del blogging y el emprendimiento tecnológico en habla hispana, razón por la cual no paramos de enviar invitaciones a todos estos para que colaboren con nosotros en dicho propósito. (más…)

Sobre lo digital y lo colaborativo

Posted by Carlos Goga

Una de las preguntas que más me ocupa es determinar cuál está siendo el impacto de lo digital en nuestra sociedad. De alguna manera, considero que ha sido y está siendo el principal motor de cambio civil.
Aunque cuando me detengo y observo, lo primero que siempre me llega es mucho ruido, ajetreo estresante y destellos cegadores. Sin embargo, con el tiempo, he alcanzado ese punto de vista sosegado y sereno desde el que analizar mejor. Hoy por hoy, identifico seis ejes de innovación, y de decisión, a los que nos vemos abocados como empresas e individuos, sobre los que tenemos que pronunciarnos simple y llanamente por ser sujetos de una sociedad digital.
Los tres primeros ejes de innovación atañen especialmente a las instituciones. Estos son: (más…)

Método Lean StartUp para startups de base tecnológica

Posted by Alfonso Prim Sorbet

Por Alfonso Prim Sorbet

Durante años nos han transmitido que los grandes proyectos empresariales han estado basados en emprendedores con una intuición que rozaba lo milagroso. Seguro que has oído comentar que Steve Jobs no hablaba con clientes, no hacia test de mercado ni experimentos, sino que lanzaba productos fruto de su ingenio y sabía crear necesidades.

No estoy en absoluto de acuerdo…

En 2008, antes de lanzar el primer Iphone, Jobs tuvo sobre la mesa la posibilidad de lanzar el iphone o el ipad (dos equipos de desarrollo habían estado trabajando en paralelo). Ambas tecnologías se desarrollaron a la vez, pero ¿por qué eligió lanzar primero el Iphone? ¿Inspiración divina? ¿Intuición? (más…)