May 17, 2013

Buayacorp

HTML5 Template Tag: la novedad

Para solventar el uso de templates, personalmente uso y me encanta Mustache, ya que tiene El 7 de mayo, se publicó el borrador de la etiqueta template de HTML5, Y se puede hacer algo como esto:
HTML:
 
<template id="template-row">
  <tr class="">
     <td></td>
     <td></td>
     <td></td>
  </tr>
</template>
 
Y repetir el template dentro de una tabla con el siguiente script:
JAVASCRIPT:
 
var t = document.querySelector("#tabla tbody"),
row = document.getElementById("template-row");
var td = row.getElementsByTagName("td");
td[0].textContent = "1";
td[1].textContent = "Nombres";
td[2].textContent = "Apellidos";
t.appendChild(row.content.cloneNode(true));
 
El código anterior permite reutilizar el template dentro de una tabla en cualquier contexto. Este ejemplo fue la fila de una tabla, sin embargo podemos usarlo con listas, párrafos, imágenes o lo que se nos ocurra siguiendo algunas limitaciones.

Para tener en cuenta:

  • El código dentro de template no es mostrado por el navegador.
  • El código dentro de template no es parte del documento, es decir que document.getElementById('#template-row'); no tiene hijos.
  • Los templates son inactivos hasta que son usados, es decir, que las imágenes no se cargan, archivos multimedia no son reproducidos y scripts no son ejecutados.
Por el momento ningún navegador soporta la etiqueta, pero ya lo veremos muy pronto. Podemos ver un ejemplo completo se puede ver en JSFiddle, por mientras todavía nos queda Mustache.

Visto en Frontend.pe.

by braulio at May 17, 2013 10:26 PM

Maestros del Web (Editorial)

Ok Glass, Google: ¿Qué es Google Glass?

Google Glass

Aunque dentro de la conferencia especial del Google I/O 2013, no se hizo un segmento dedicado exclusivamente a Google Glass, ningún expositor se quedó sin mencionar por lo menos alguna característica del proyecto.

De hecho ya son muchas las fotos, videos e impresiones que inundan la red gracias a los “exploradores” que hasta ahora pudieron recibir el dispositivo. Si alguna vez se encuentra a alguien en la calle gritando ¡Ok Glass take a picture! o moviendo la cabeza de forma extraña, sonría no hay por qué temer.

Le llegó reemplazo al smartphone

Cada vez tenemos más sensores trabajando en conjunto con Internet, accesorios deportivos, utensilios domésticos, y hasta plantas que podemos monitorear o controlar para nuestro propio beneficio gracias al “Internet of Things”.

Google Glass se presenta como la nueva alternativa, no solo de navegar por la web a través de gestos y comandos de voz, también de mantener una verdadera interacción entre el mundo real y el ambiente virtual (realidad aumentada).

Esta variable de la información digital en línea, busca albergarse en plataformas móviles que podamos manipular sin esfuerzo, aunque a Google Glass le falta trabajo para cumplir perfectamente con dicho papel, no hay duda que se adecúa con propiedad.

¿Cómo funciona?

Lo que en su momento fue conocido como Project Glass, un prototipo diseñado por la gente de Google[x], se presentó al mundo en el Google I/O 2012, donde pudo ser reservado exclusivamente por los desarrolladores que asistieron al evento y asumieron su costo (1500 dólares), a cambio recibieron un bloque de cristal numerado como comprobante.

Glass proyecta la imagen a una micro pantalla de alta definición, allí la información está organizada en forma de “timeline” por el que navegas a través de diferentes tarjetas utilizando un “touchpad”.

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" src="http://www.youtube.com/embed/4EvNxWhskf8" width="640"></iframe>

Estos “items” se alimentan de servicios web (Glassware), comunicados por medio de la API Google Mirror.

Dicho intercambio de datos se realiza en línea y no requiere la ejecución de código en el dispositivo. Para que este proceso funcione, Glass necesita una conexión a Internet que puede ser vía Wifi, Bluetooth o “tethering” con un smartphone.

El equipo tiene una cámara de 5 megapíxeles para tomar fotografías y video a una resolución de 720p, la capacidad de almacenamiento es de 16GB (12GB para el usuario) que pueden sincronizarse con la nube de Google.

Un aspecto interesante es la recepción del sonido, Google Glass transmite vibraciones que son conducidas por los huesos del cráneo hasta el oído medio.

Experimentar la web a través de los sentidos

Además de las aplicaciones del New York Times y Path, se unieron a la plataforma Twitter, Facebook, Evernote, Tumblr, Elle y CNN. Por ahora el proyecto continúa en desarrollo e incluso las listas para adquirir el prototipo están cerradas.

Nuestro fundador @cvander es uno de los afortunados que tiene acceso a Google Glass y se encuentra probando a fondo su tecnología, habrá que estar pendiente de sus impresiones.

A continuación les compartimos el “unboxing”, disfruten:

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" src="http://www.youtube.com/embed/S9rf8KmRPaE" width="640"></iframe>


Dany Correa para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo


Síguenos en: @maestros | Fan page

by Dany Correa at May 17, 2013 08:27 PM

Línea de código

Estructura Javascript for of

El otro día veíamos como realizar una estructura Javascript for in. Hoy vamos a hablar sobre la estructura Javascript for of. A día de hoy la estructura Javascript for of está en formato experimental y propuesta para ser includa dentro de Ecma Script 6.

La estructura Javascript for of permite que dentro de la ejecución del bucle tengamos acceso al elemento que estemos tratando, algo más parecido a lo que hacen otros lenguajes mediante sentencias de estructura for each. Y es que la estructura Javascript for in solo nos proporciona el índice o secuencial del elemento que queremos tratar.

La sintaxis de la estructura Javascript for of es la siguiente:

  1. for (variable of objeto) {
  2. // sentencias
  3. }

Donde objeto será el objeto sobre el que queramos iterar y variable contendrá el elemento sobre el que estamos iterando.

Vamos a ver como funciona la estructura JJavascript for of, para ello lo primero será crear un array de elementos:

  1. var nombres = ["victor","pedro","carmen","irene","luis"];

Lo siguiente será definir la estructura Javascript for of con el array nombres como objeto:

  1. for (name of nombres)
  2. document.write(name + "</br>");

En este caso la variable name contiene el elemento de array que estamos tratando, por lo cual simplemente tenemos que volcarlo por pantalla.

A la hora de probarlo tienes que utilizar el navegador Mozilla Firefox, ya que es el único navegador que a día de hoy está ofreciendo esta estructura de forma experimental.Similar Posts:

La entrada Estructura Javascript for of aparece primero en Linea de Codigo.

by Víctor Cuervo at May 17, 2013 06:00 PM

Maestros del Web (Editorial)

Herramientas educativas anunciadas en el Google I/O 2013

Google i/o 2013
Google I/O 2013 inició con la presentación de los “updates” y nuevas APIs (Google Play Services) donde la geolocalización, la comunicación multiplataforma y el almacenamiento e intercambio de datos en la nube, le brindarán a los usuarios una experiencia más personal e intuitiva con los mapas, los juegos y la música.

Las opciones adicionales de Google Now o Racer, un experimiento de Chrome que saca máximo provecho de los recursos de este navegador (Google Cloud, Web Audio, Paper.js, etc.), demostraron la búsqueda continua de Google por hacer escalables todas sus plataformas, y claro, el sector educativo no podía quedarse afuera.

Chromebook para aprender en la escuela

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" src="http://www.youtube.com/embed/TVqe8ieqz10" width="640"></iframe>

Desde el inicio del año la forma en que trabajan Gmail, Google Drive y Google Plus es más estrecha, además de compartir el espacio de almacenamiento (15GB) herramientas como Google Keep (listas y notas) o Google Forms (cuestionarios), enriquecieron las posibilidades de producir y compartir otros tipos de contenido.

Hoy dispositivos como el Chromebook y Google Play for Education, nuevo espacio en la tienda de aplicaciones, se mostraron como el complemento ideal para todos los interesados en involucrar las nuevas tecnologías al salón de clase.

La idea de Google es que alumnos y profesores tengan acceso completo a las herramientas nativas (Google Apps for Education) y a todas las aplicaciones móviles ya disponibles en Google Play, desde un dispositivo diseñado para trabajar en la web, fácil de usar y equipado con toda la tecnología de marcas como Samsung, Lenovo y Acer.

Sin Hangouts no hay Google Plus

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" src="http://www.youtube.com/embed/vF5RovO5R8w" width="640"></iframe>

No hay duda sobre las ventajas que ha significado el desarrollo de los Hangouts para incrementar la interacción en las comunidades educativas que podemos crear en Google Plus.

El nuevo diseño de su “layout” permite la clasificación más ordenada del contenido por medio de “hashtags”, además el video y las fotos han cobrado mayor relevancia (espacio) para propiciar una navegación más divertida e inmersiva.

Tal vez parezca un detalle menor, pero habilitar la posibilidad para guardar la historia de las conversaciones también resulta bastante conveniente, sobre todo en ambientes formales como el de la escuela o la universidad.

Mapas inteligentes

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" src="http://www.youtube.com/embed/THxJHcR1D2c" width="640"></iframe>

Las actualizaciones de Google Maps buscan proporcionar una mayor personalización, recorrer virtualmente el mundo a nivel de la calle, adentro de edificios, museos, el océano, etc., es una de esas actividades que seguramente estimularán positivamente el aprendizaje y la capacidad de explorar de muchos estudiantes.

Prácticamente cualquier necesidad relacionada con información y comunicación la puedes satisfacer con Google. Esto significa una ventaja especial cuando pensamos en el trabajo y el tipo de relación transversal que debe mantener un profesor con sus alumnos, padres de familia, colegas, institución y claro, los contenidos digitales.


Dany Correa para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo


Síguenos en: @maestros | Fan page

by Dany Correa at May 17, 2013 03:01 AM

May 16, 2013

Línea de código

Manejar objetos JSON con acentos en PHP

Si estas creando objetos JSON en PHP es posible que te encuentres ante la necesidad de manejar objetos JSON con acentos. En estos casos hay que realizar una serie de manipulaciones sobre dichos textos para poder manejar objetos JSON con acentos en PHP de la forma correcta.

Y es que después de realizar el siguiente código:

  1. $objeto = new stdClass();
  2. $objeto->texto = "Víctor";
  3. $json = json_encode($objeto);
  4. echo $json;

Te encuentres con la desagradable sorpresa de que el resultado del objeto JSON contenga un null.

{"texto":null}

Es por ello que tenemos que saber como manejar objetos JSON con acentos en PHP. El truco está en convertir los textos que necesitemos en UTF8. Esto lo podemos hacer de dos formas. La primera forma es que todo el sistema en el que trabajemos funcione en UTF8 en su totalidad, por lo cual las cadenas ya son UTF8.

La segunda forma es convertir la cadena que estemos utilizando en UTF8. Y es que la función json_encode está esperando un parámetro que sea puramente UF8.

Para convertir el texto en UTF8 utilizamos la función utf8_encode pasándola la cadena como parámetro.

  1. $objeto->texto = utf8_encode("Víctor");

Una vez que hemos manipulado el objeto JSON con acentos en PHP obtendremos la siguiente respuesta:

{"texto":"V\u0092ctor"}

Similar Posts:

La entrada Manejar objetos JSON con acentos en PHP aparece primero en Linea de Codigo.

by Víctor Cuervo at May 16, 2013 06:00 PM

May 15, 2013

Línea de código

Crear un objeto JSON en PHP

JSON es una notación de objetos en formato Javascript. Mediante JSON podemos realizar un intercambio sencillo de datos entre el cliente y el servidor. En este artículo vamos a ver como crear un objeto JSON en PHP.

Lo primero que haremos para crear un objeto JSON en PHP será crear un objeto en PHP. El objeto que vamos a crear es una pregunta de la categoría de un test

Pregunta - Altura del monte Everest.
Categoria - Cultura.
Respuestas - 8850, 8900 y 8875.

Pasamos a crear el objeto en PHP:

  1. $pregunta = new stdClass();
  2. $pregunta->titulo = "Altitud del monte Everest";
  3. $pregunta->categoria = "Cultura";

En el caso de las respuestas, al ser varios valores, vamos a crear un array con todos los valores posibles.

  1. $pregunta->respuestas = array(8850,8900,8875);

Si creamos el array con los indices por defecto la estructura JSON que generemos será una estructura con una sola propiedad respuestas. Si queremos crear un objeto JSON en PHP dónde pueda tener una estructura para poder acceder a los valores de forma más sencilla podemos asignar nombres a las propiedades:

  1. $pregunta->respuestas = array("respuesta1"=>8850,"respuesta2"=>8900,"respuesta3"=>8875);

Lo siguiente para crear un objeto JSON en PHP será convertir el objeto en JSON. Para ello nos vamos a apoyar en la función json_encode. A la función json_encode le pasaremos el objeto PHP que acabamos de crear:

  1. $json = json_encode($pregunta);

Si ahora volcamos el contenido de la variable $json veremos que tiene una estructura JSON.

{"titulo":"Altitud del monte Everest","categoria":"Cultura","respuestas":{"respuesta1":8850,"respuesta2":8900,"respuesta3":8875}}

Con esto ya hemos creado un objeto JSON con PHP.Similar Posts:

La entrada Crear un objeto JSON en PHP aparece primero en Linea de Codigo.

by Víctor Cuervo at May 15, 2013 06:00 PM

Adseok

Google Europe, Google Reader, o por qué temer la nueva generación de Penguin

Matt Cutts anuncia que la nueva generación de Google Penguin está a tan solo unas semanas de ser una realidad. Uno de sus puntos fuertes será una mejor valoración de qué web es un sujeto de autoridad. Esto, que en principio suena bien y que, por ejemplo, podría quitar autoridad a la Wikipedia y dársela a las fuentes originales – y fuentes de autoridad – podría ser todo lo contrario en el sentido que comento a continuación.

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/xQmQeKU25zg" width="560"></iframe>

¿Por qué mezclar temas tan dispares como Penguin, reader o la actitud de Google en Europa? Es solo una idea, que puede tener cierta lógica o no.

El cierre de Google Reader por parte de Google levantó muchas ampollas entre los internautas más fieles a sus feeds por una sencilla razón: no había ningún motivo para cerrarlo. Era un producto hecho, sin costes de mantenimiento y con unos usuarios fieles y “amantes” de la herramienta. Google, con una actitud no conocida hasta ese momento, decide ignorar todos sus principios anteriores – por lo menos los de cara al público – y lo cierra para obligar a sus usuarios a usar Google +.

Buscando hace poco información sobre el programa de la BBC Horizon de esta temporada, encontré un documental que no conocía. Se titula Google and the World Brain y aunque no es demasiado bueno y es algo incompleto y farragoso, me llamó la atención, de nuevo, la actitud de Google.

El documental trata de los problemas legales de Google Books en Europa, y de cómo una idea genial, la de poner a disposición de todo el mundo y gratuitamente cualquier libro escrito en el mundo, esconde detrás la simple motivación comercial. No quiero entrar en el tema del Copyright y demás. Pero esto no es lo que me llama la atención, que bueno. Es la actitud, de alguna forma, comentada en el punto anterior. Desde EEUU, Google envía a dos de sus empleados para convencer a algunas de las bibliotecas más importantes de que donen sus libros para ser escaneados. Aparecen tres o cuatro. El entrevistador va a un monasterio catalán que donó sus libros al proyecto y al monje se le ve orgulloso por su aportación. Cuando le comenta que están usando esos libros para poner publicidad, el monje probablemente se siente estafado y rechaza hacer ningún comentario al respecto. Cuando hace lo mismo con el inglés, éste está de acuerdo, aunque yo creo que sin pensarlo mucho, diciendo que de alguna forma tienen que amortizar la inversión de escanear los libros.

Y luego llega ex responsable de la biblioteca nacional de Francia. No es que me guste su personalidad, pero explica perfectamente lo que sucede de la siguiente forma: llegan dos jóvenes americanos empleados de Google, vestidos con traje en lugar de con hoodies porque creen que en Europa queda mejor el traje para hacer negocios. Me comentan que quieren hacer ésto, diciéndome lo ambicioso y enorme del proyecto, a pesar de que ya conocía los problemas al respecto de Alemania. Para terminar me hacen un regalo antes de irse. Se trata de un libro sobre trenes (o algo así, no me acuerdo bien, que pretende despertar esa imagen del espíritu romántico de la lectura en los trenes viejos). Y esto es lo que creyeron los americanos que ganaría la voluntad del responsable de la mayor biblioteca de Francia.

Cierran la única herramienta que la gente realmente quiere de Google, junto con Gmail, y aparentemente tratan a un alto empleado como si fuera un simple profesor romántico de pueblo retirado.

Si tenemos en cuenta lo expuesto anteriormente podemos esperar que con los próximos pasos que vayan dando se preocupen cada vez menos de la imagen hacia el exterior, el – don’t be evil -. Lejos queda la idea, basada en su excelente marketing, de que Google es, además de un enorme negocio, algo así como la Wikipedia. Esto no quiere decir que no sigan haciendo cosas buenas, o desarrollando ideas geniales. Simplemente quiero decir que en temas maduros, como su buscador, solo vale una cosa: su AdSense. No su usuario, su AdSense. Hace poco hicieron unas pruebas quitando la url verde de sus resultados, que es casi mejor que el título para saber qué te vas a encontrar, y la respuesta general fue “hay que conseguir meter un resultado patrocinado más arriba del todo como sea”. Si no recuerdo mal, no es hasta hace poco que estos cambios solo se valoran como algo para mejorar su publicidad más que para mejorar la experiencia del usuario.

Yo no creo que Penguin quiera buscar los resultados de más calidad, o que sea una herramienta contra el spam, pero no hay forma de estar seguro. Hay SEOs que creen que quizá estos cambios les acaben beneficiando porque su web es de mucha calidad. Yo les diría que se olviden. Me da la impresión de que asociamos estos cambios tipo Penguin con mejoras contra el spam y el black hat en favor del white hat del que nos habla Matt Cutts en sus vídeos, que todos vamos a beneficiarnos. Yo creo que es el mismo error que pensar que Google mantendría el reader solo por sus usuarios fieles o que respetaría el copyright de los autores: En todo caso, ambos tipos de seo serán cada vez menos relevantes.

by Adseok at May 15, 2013 09:32 AM

Maestros del Web (Editorial)

¿Por qué utilizar Google Apps en clase?

Google apps

Google Apps for Education ofrece una colección completa de herramientas para elaborar y editar documentos, hojas de cálculo, presentaciones, evaluaciones e incluso crear sitios web, con la posibilidad de almacenar toda la información y compartirla en la nube.

Solo necesitas un navegador

En 2012 más de 20 millones de alumnos y profesores alrededor del mundo ya habían adoptado la tecnología de Google para dinamizar sus procesos académicos, apropiandose de una plataforma que facilita el trabajo y aprendizaje en línea.

Si bien las posibilidades se expanden en los programas especiales que se ofrecen a escuelas y universidades, como los paneles de administración de usuarios y aplicaciones, utilizar Google Apps for Education en el aula, hará de la comunicación y colaboración procesos seguros y más efectivos.

Imaginar, desarrollar e implementar

Aplicar la experiencia e innovación tecnológica de Google en el sector educativo, no requiere más que la motivación necesaria para aprovechar sus recursos.

Todos conocemos la importancia del correo electrónico (Gmail) para mejorar la conectividad, asignar actividades, compartir material y hasta darle asesoría a los estudiantes, además es posible mantener una interacción constante vía chat, realizar videollamadas (Google Talk) mientras actualizas el calendario de actividades (Google Calendar) y compartes los documentos para trabajar en clase con Google Drive.

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" src="http://www.youtube.com/embed/qve-aB0Ax-Q" width="640"></iframe>

La oportunidad de crear wikis por medio de Google Sites o implementar la plataforma de Blogger para desarrollar proyectos grupales online, son otras ideas sencillas que vale la pena incorporar dentro de las nuevas metodologías pedagógicas.

Si quieres profundizar más en el uso de las aplicaciones o certificarte como asesor oficial, visita el sitio de entrenamiento de Google Apps for Education.


Dany Correa para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo


Síguenos en: @maestros | Fan page

by Dany Correa at May 15, 2013 02:23 AM

May 14, 2013

Línea de código

Estructura Javascript for in

La estructura Javascript for in nos permite recorrer una lista de elementos de una forma sencilla. Javascript for in es una estructura en bucle que nos permite tratar los elementos indicados en la sentencia.

Pero para ver el uso de la estructura Javascript for in lo primero que haremos será crear un array de elementos, los cuales recorreremos y presentaremos en pantalla.

  1. var nombres = ["victor","pedro","carmen","irene","luis"];

La estructura Javascript for in tiene la siguiente sintaxis:

  1. for (variable in objeto) {
  2. // Acciones
  3. }

En el caso del tratamiento del array el objeto será el propio array y la variable será a la que se vaya asignando uno de los valores del índice del array. Es decir, en cada vuelta del bucle el valor de la variable será un nuevo valor del índice.

De esta forma podemos sacar por consola todos los índices utilizando la estructura Javascript for in.

  1. for (indice in nombres) {
  2. console.log(indice);
  3. }

Es importante destacar que con la estructura Javascript for in lo que tenemos es el índice del elemento, no el elemento en sí, como sucede con las sentencias for each de otros lenguajes.

Es por ello que para mostrar por pantalla (o consola) los nombres del array tenemos que utilizar el índice como acceso al contenido del array. Es decir, ponerlo dentro de los corchetes.

  1. ombres[indice];

Utilizaremos esta sentencia dentro de la estructura Javascript for in:

  1. for (indice in nombres)
  2. document.write(nombres[indice]+"</br>");

Con estas pequeñas líneas y el uso de la estructura Javascript for in hemos volcado el contenido de los elementos del array por pantalla.Similar Posts:

La entrada Estructura Javascript for in aparece primero en Linea de Codigo.

by Víctor Cuervo at May 14, 2013 06:00 PM

Buayacorp

Nginx + PHP FPM + PHP APC + Memcached + Batcache

Finalmente dedique un poco de tiempo para reducir el consumo de CPU que estaban causando ciertos spammers, especialmente hace un par de dias. Por el momento se ve bastante bien.
cpu

by alex at May 14, 2013 04:30 PM

A Facebook update in real life

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="407" src="http://www.youtube.com/embed/JvQcabZ1zrk?feature=oembed" width="724"></iframe>

by alex at May 14, 2013 04:05 PM

Otro blog más

Los tuits de la semana (58, edición web)

Van pasando las semanas desde el último ‘tuits de la semana’, y toca edición recopilatorio de temas web, antes de que se pierdan en la inmensidad el océáno Twitter…

La noticia, desde luego, es el cambio pontecialmente sísmico provocado por el abandono de WebKit por parte de Google…

RT @brucelBy me: Hello Blink, the new engine that will power Opera’s browsers and Chrome henceforth http://www.brucelawson.co.uk/2013/hello-blink/

RT @antonello Chromium Blog: Blink: A rendering engine for the Chromium project http://bit.ly/17dDwzg al final parece que no habrá monocultivo webkit

from May 2010: “Dear Google: Please fork WebKit” (via @brucel) http://obm.as/16rilq6

:-| WebKit fracture puts a pinch on open-source browser efforts (Webware, CNET) http://obm.as/12tiRnd

RT @robertclariso RT ‏@softmodeling: RT @zef: Code Hard or Go http://hypercritical.co/2013/04/12/code-hard-or-go-home (on WebKit and forking in open source projects)

Contenidos en castellano, para que no se diga (pero, en serio, si te dedicas a esto y no lees inglés con facilidad, te lo estás perdiendo casi todo):

la webmaster academy de google, ahora en español http://obm.as/YkETJ0

HTML5 se sigue moviendo…

RT @iandevlin<hgroup> removed from the #HTML5 specification: http://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html (link via @cgiffard)

Y CSS, y las técnicas para trabajar con CSS, ni te cuento…

Working with flexbox (Adobe Developer Connection, via @webmonkey) http://obm.as/YYiqy5

RT @htmlboySimpletastic, a Sass-based grid framework by the talented @mrrocks: https://github.com/mrrocks/simpletastic

RT @p7rOnce you realise you can make a Bootstrap framework theme to make your site look like Geocities, this is inevitable http://divshot.github.com/geo-bootstrap

RT @brucel ptb/flexgrid: a flexbox-based CSS grid in 3.6k, non-flex browsers get fluid Bootstrap 3 layout, IE6, 7 fixed layout http://bit.ly/15ByJsk

@kazuhito CSS Architectures: Scalable and Modular Approaches http://bit.ly/13LnFow

RT @WPMigrations RT @speckyboy: Write less, do more: CSS Style http://ow.ly/jDHWE

BEM, la metodología de yandex para ‘desarrollar sitios de forma efectiva’ http://obm.as/11izp5e

LayoutIt! – Interface Builder for Bootstrap http://obm.as/15LwhQ3

Una gota de tipografía…

Why You Should Consider A Ligature Icon Font For Your Next Project http://obm.as/14p89mE

…una de usabilidad…

@brad_frost Usability Checklist http://userium.com/ This is fantastic.

…algo sobre diseño ‘touch’…

RT @kazuhito LukeW | An Event Apart: Designing for Touch http://bit.ly/16s5INe

…y una ración completa de accesibilidad:

RT @WPMigrations RT @speckyboy: Making accessible icon buttons http://ow.ly/jDHDw

YDN Blog: Accessible Data Tables http://obm.as/11PFEdT

RT ‏@UOCicommunity RT @AccessiQ: Part II of the ultimate accessible HTML and CSS checklist for developers is now live http://bit.ly/htmlcsschecklistpartii #a11y

RT @UOCicommunity RT @dennisl: Results of @WebAIM survey of #web users with #lowvision http://webaim.org/projects/lowvisionsurvey/ #a11y #stats #ux

RT @mundoaccesibleGuía Breve de Accesibilidad Web http://www.w3c.es/Divulgacion/GuiasBreves/Accesibilidad

Un poco de WordPress…

RT @WPMigrationsRT @wpengine: Free WordPress Framework Guide – Get a Rundown of the 7 Best | @wpmudev http://bit.ly/10sqsmu

QueryPosts.com . better WordPress code reference. via @WPMigrations http://obm.as/11kBfvT

Consejos para mejorar la seguridad de WordPress. via @qmarcos http://obm.as/ZHzSqU

…y, ya para acabar, una herramienta interesante:

Codassium, un editor de texto colaborativo más un chat de vídeo basado en WebRTC http://obm.as/10NHslc

Un día de estos, más.

by csr at May 14, 2013 02:36 PM

Variable not found

Unity 3.0, con soporte oficial para ASP.NET MVC

ASP.NET MVCHasta ahora, los desarrolladores que queríamos usar Unity con ASP.NET MVC teníamos que recurrir a triquiñuelas o componentes no oficiales, como Unity.MVC3. No es que fuera especialmente incómodo ni que tuviera contraindicaciones, pero la verdad es que no dejaba de resultar curioso que no existieran adaptadores específicos “oficiales” para tecnologías tan difundidas como ASP.NET MVC, o WebAPI.

Pues bien, desde hace unas semanas tenemos disponible la versión 3.0 de Unity, que ha venido acompañando también a la reluciente versión 6 de la Enterprise Library. Como sabemos, esta creación del equipo de Patterns & Practices de Microsoft contiene un conjunto de componentes reutilizables llamados “application blocks” que resuelven problemáticas comunes en el desarrollo de sistemas, como logging, tracing, acceso a datos, gestión de excepciones y otras, incluyendo por supuesto inyección de dependencias e inversión de control.

En este post vamos a ver cómo podemos usar fácilmente esta nueva versión de Unity en nuestras aplicaciones ASP.NET MVC y algunas de las novedades que ofrece para este tipo de sistemas.

1. Instalación

Como es habitual, la instalación del componente la realizaremos usando Nuget:
PM> Install-Package unity.mvc
imageEsta acción instalará varios paquetes dependientes y creará un par de archivos en la carpeta App_Start: UnityConfig.cs y UnityMvcActivator.cs.

En el primero de ellos encontramos la configuración de contenedor, es decir, es el punto en el que registraremos nuestras clases e interfaces para posteriormente usarlas en la resolución de dependencias. En UnityMvcActivator.cs, en cambio, se encuentra el código de inicialización específico de la integración para ASP.NET MVC. Más adelante veremos para qué son útiles y qué tenemos que tocar en ambos archivos.

Por comodidad, no tendremos que incluir en el global.asax.cs código para inicializar el contenedor. El mismo paquete Unity.Mvc incluye automáticamente una llamada a UnityWebActivator.Start() durante el proceso de inicialización utilizando el componente WebActivatorEx, una útil herramienta que permite introducir módulos de forma dinámica, durante el arranque.

2. Registro de componentes

El registro de interfaces y clases la realizaremos como siempre, sobre el contenedor Unity. Para ello, sólo tenemos que dirigirnos hacia el archivo UnityConfig.cs e implementarlo de la misma forma que siempre:
public static void RegisterTypes(IUnityContainer container)
{
    // NOTE: To load from web.config uncomment the line below. [...]
    // container.LoadConfiguration();

    // TODO: Register your types here
    // container.RegisterType<IProductRepository, ProductRepository>();

    container.RegisterType<IProductServices, ProductServices>();
}
Por supuesto, podríamos incluir tantos pares interfaz-clase como sean necesarios para nuestros propósitos.

3. Instancias per request

Ya he comentado muchísimas veces por aquí la importancia de hacer que los componentes que implementen IDisposable sean liberados al finalizar la misma. De no ser así, estaríamos creando una bomba de relojería: si no se liberan componentes, en cada petición podemos estar perdiendo memoria o recursos, y eso, a la larga, ya os digo que no es una historia con final feliz ;-)

La nueva versión de Unity y su componente de integración con MVC ha simplificado bastante la gestión del ciclo de vida de estas instancias y ha eliminado algunas de las cosas feas que teníamos que hacer antes, como la creación de instancias usando HierarchicalLifetimeManagers para vincularlas a un contenedor padre que era liberado al finalizar la petición. Ahora podemos ir bastante más al grano a la hora de registrar las clases, usando directamente un PerRequestLifetimeManager:
public static void RegisterTypes(IUnityContainer container)
{
    container.RegisterType<IProductServices, ProductServices>(
            new PerRequestLifetimeManager());
}
Sólo con esto ya conseguimos que las instancias sean únicas por request, es decir, que si desde varios puntos del proceso de la petición se solicita un objeto de un tipo registrado, la instancia será única y compartida para todos ellos.

Pero aún falta un detalle para que las instancias sean liberadas correctamente al finalizar la petición. La pista la encontramos en el archivo UnityMvcActivator.cs que Nuget ha dejado en la carpeta App_Start:
public static void Start() 
{
    var container = UnityConfig.GetConfiguredContainer();

    FilterProviders.Providers.Remove(
        FilterProviders.Providers
                       .OfType<FilterAttributeFilterProvider>()
                       .First());

    FilterProviders.Providers.Add(
        new UnityFilterAttributeFilterProvider(container));

    DependencyResolver.SetResolver(new UnityDependencyResolver(container));

    // TODO: Uncomment if you want to use PerRequestLifetimeManager
    // Microsoft.Web.Infrastructure.DynamicModuleHelper.DynamicModuleUtility
    //          .RegisterModule(typeof(UnityPerRequestHttpModule));
}
Simplemente descomentamos la llamada a RegisterModule() del final y nuestras instancias serán liberadas al finalizar la petición de forma automática :-)

Seguro que habréis observado también que al comienzo de este método se elimina el proveedor de filtros por defecto y se establece el de Unity. Efectivamente, ¡tenemos de serie inyección de dependencias en filtros! En breve escribiré un post al respecto para que veamos cómo se implementan.

4. Sorpresa final: ¡convenciones!

Pues sí, esta es una de las grandes novedades que he podido descubrir hasta el momento de esta nueva versión. De la misma forma que ya se podía hacer con otros contenedores IoC, ahora Unity soporta el registro de componentes basado en convenciones, de forma que podemos ahorrarnos bastante trabajo a la hora de mantenerlo.

¿Un ejemplo rápido de su utilidad? Pues por ejemplo que ya no tendremos que asociar mil interfaces del tipo IMyComponent a la clase MyComponent: simplemente indicaremos a Unity que debe usar la convención de nombrado para interfaces y clases con nombres equivalentes :-)

Así, en una única línea en el método RegisterTypes() de UnityConfig.cs podemos decirle que todas las clases pertenecientes al ensamblado de la aplicación MVC deben asociarse a interfaces cuyo nombre corresponda con ellas (es decir, sea igual pero comenzando por “I”), y siempre con tiempo de vida por petición:
public static void RegisterTypes(IUnityContainer container)
{
    container.RegisterTypes(
       AllClasses.FromAssemblies(typeof(MvcApplication).Assembly),
       WithMappings.FromMatchingInterface,
       WithName.Default, 
       WithLifetime.Custom<PerRequestLifetimeManager>
    );
}
Por supuesto, las convenciones son totalmente configurables, por lo que con mucha probabilidad podremos adaptarlas a nuestras necesidades. Otro día escribiré también algo más sobre esto ;)

Enlaces:

Publicado en Variable not found.

by José M. Aguilar (noreply@blogger.com) at May 14, 2013 07:05 AM

Maestros del Web (Editorial)

Udemy, cursos en línea con los instructores más grandiosos del mundo

<left>udemy</left>

Udemy es una plataforma de cursos en línea que reúne a los instructores más grandiosos del mundo ayudando a los estudiantes “a realizar movimientos” y lograr sus metas a través del conocimiento y experiencia de éstos profesores. El proyecto fue fundado en 2010 con la ayuda de varios capitales, entre ellos Insight Venture Partners.

Encontrarás cursos de pago y gratuitos, los cuales puedes seguir con un registro utilizando tu correo electrónico o cuenta de Facebook. Si quieres convertirte en profesor de cursos en línea puedes trabajar en su plataforma el diseño y publicarlo con la opción de generar ganancias o dejarlo de forma gratuita.

Contenido ordenado y práctico

La visualización de los cursos de forma interna es bastante práctico, al ingresar a una lección automáticamente se abre la lectura o vídeo y en una barra lateral derecha tienes la opción de ver otros materiales, cuestionarios y tomar notas, si no te sirve tienes opción de esconderla.

guitar-udemy-inside

Como en otras plataformas puedes aprender de varios cursos a la vez, pero recuerda mantener el enfoque terminar uno a la vez y no llenarte de demasiada información. ¿Qué te parece Udemy como plataforma de cursos en línea?

No olvides revisar


Eugenia Tobar para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo


Síguenos en: @maestros | Fan page

by Eugenia Tobar at May 14, 2013 07:00 AM

May 13, 2013

Variable not found

Enlaces interesantes 117

Enlaces interesantesEstos son los enlaces que he ido recopilando durante la semana pasada. Espero que os resulten interesantes :-)

.Net

Asp.net

Azure / Cloud

Conceptos/Patrones/Buenas prácticas

Data access

Html/Css/Javascript

Visual Studio/Complementos/Herramientas

Eventos

Otros

Y no olvidéis que normalmente podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

by José M. Aguilar (noreply@blogger.com) at May 13, 2013 07:05 AM