Cambiar el look del modo consola de Google Chrome

Estas aburrido del mismo estilo del modo consola de Google Chrome ?

En esta pagina puedes personalizarlo, aunque no son oficiales y puede que tengan algún bug escondido se agradece el esfuerzo por hacer el proceso de desarrollo menos monótono.

Linik : http://devthemez.com/themes/chrome-developer-tools

Y un tips que mire hoy en twitter para buscar funciones en modo consola con Chrome :

Solo crea una "Add Watch Expresion" con el nombre de la función y después haz click derecho sobre ella.

Crea imágenes interactiva con thinglink.com

Navegando hoy por la red me he encontrado con un servicio muy interesante que nos permite insertar información, vídeos y links dentro de una imagen, de esta manera nuestra imagen puede ofrecer información adicional  sobre lo que se muestra.

El servicio es gratuito y tiene una versión de pago para empresas. Se me ocurren muchos campos de como usar este servicio ya sea en productos , presentaciones , educación , etc. La verdad que los usos son innumerables.

El servicio funciona  como una red social donde puedes seguir a otros usuarios y ver sus creaciones , una de las cosas que mas me gusta es que te permite insertar tu imagen con una simple etiqueta <img> HTML.

 bueno ahora les dejare unos ejemplos para que se den una idea de lo que hablo.

Link: https://www.thinglink.com

Centrado Horizontal y vertical con CSS ( El santo grial !!! )

En nuestro trabajo como programador Web en la etapa de maquetacion es común encontrarse con la situación en la  que quieres centrar un elemento en la pantalla vertical y horizontalmente, yo siempre he recurrido a google para buscar las mejores técnicas para lograr esto, lo que ocasiona que en cada proyecto nuevo que hago siempre uso una técnica diferente y he visto muchas que cumple el objetivo.

Pero esta vez he encontrado una de las mejores que visto y sencillas de usar con diferentes elementos HTML en un articulo que aunque esta en ingles es muy sencillo de entender y con muchos ejemplos.

Aqui el articulo : http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

Herramienta super sencilla para crear cursos en internet

Esta es la herramientas mas sencilla que he encontrado hasta ahora para crear cursos en internet , Si alguna vez has tenido  la idea de enseñar sobre algún tema esta es tu oportunidad.



link: https://eliademy.com/

Herramientas para pruebas Cross-browser para tus proyectos web

Hoy en día las personas navegan en Internet con múltiples dispositivos por lo cual nuestros proyectos web necesitan estar preparados para cualquier resolución de pantalla , para solucionar este problema es que surgieron algunas técnicas como   " Responsive design " y "Adaptive design" de esta manera nuestras App web pueden adaptarse a cualquier resolución de pantalla y mostrar la información correctamente.

Existe una gran multitud de dispositivos móviles hoy en día y puede llegar a ser todo un reto desarrollar un sitio web que presente la misma consistencia y experiencia al usuario en todos ellos. Por esta razón siempre es buena idea hacer pruebas de Cross-browser  en palabras siemples significa probar nuestro proyecto en diferentes versiones de navegadores como  Internet Explorer, Chrome, Safari, Firefox , Opera , ect.

Cuando estamos en esta etapa de prueba siempre es bueno hacerte algunas de las siguientes preguntas:

¿ Se mira el sitio correctamente ?

¿ La interacción es la misma ?

¿ Mi sitio web luce correctamente en móviles ?

 ¿ Esta optimizado para móviles ?

Nuestro objetivo con esto es conseguir una experiencia consistente en una gran variedad de dispositivos para el usuario final , para ayudarnos en esta meta existen muchas herramientas disponibles que puede ayudarnos en el proceso de probar nuestros sitios en diferentes resoluciones, algunas siendo de pagos y otras gratuitas y los re-dimensionadores que solo emulan las resoluciones de pantalla.

Algunas de las herramientas disponibles son estas : 

De pago

http://vanamco.com/ghostlab/

http://html.adobe.com/edge/inspect/

http://www.browserstack.com/

Redismensionares

http://jamus.co.uk/demos/rwd-demonstrations/

http://lab.maltewassermann.com/viewport-resizer/

http://cybercrab.com/screencheck/

http://www.studiopress.com/responsive/

Existen también unos programas llamados emuladores que cumplen la misma función pero crean entornos  de pruebas de móviles en tu Pc de escritorio, Maximiliano Firtman ha creado una lista de emuladores que puedes consultar:

http://www.mobilexweb.com/emulators

Y por ultimo los navegadores también tienen algunas herramientas para probar tus sitios por ejemplo google chrome en el modo consola tienes estas opciones a las que puedes acceder por DevTools > Settings > Overrides.

  Firefox también no se queda atrás con su modo "Responsive Design View" : 

https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View

También existen algunas herramientas para mostrar en el navegador una previa vista de tu APP Android ó IOS sin que tu cliente tenga que instalar tu APP

http://www.appsurfer.com/
https://app.io/