Lista de sitios donde puedes aprender sobre Diseño web.

Como comentaba en el post anterior, si quieres aprender algo solamente depende ti lograrlo. Toda la documentacion y tutoriales esta internet, solamente tenemos que encontrarla. En este campo de la programación web personalmente pienso que es mas fácil de cualquier otra, solo basta que escribas en Google : "Tutorial sobre diseño web" y recibirás muchos resultados donde aprender. 

Hoy quiero compartir con ustedes un articulo donde listan muchos lugares donde aprender programación y diseño web, con algunas opciones de pago y otras gratuitas, como siempre con estos temas de programación web la mejor documentacion esta en ingles pero tal vez a alguien mas le puedan ser útil esta información.

Yo personalmente he aprendido mucho de algunas de los sitios web que se listan ahi.

link: http://www.smashingmagazine.com/2014/02/14/learning-resources-roundup/

Gibbon sitio web con infinidad de cursos para aprender gratis

Gibbon es un sitio web donde puedes aprender lo que sea. La filosofía de Gibbon es que en internet esta toda la información que necesitamos para aprender algo nuevo, el problema es que esta muy dispersa y desorganizada.

Gibbon funciona de la siguiente manera : Si por ejemplo sabes mucho sobre como hacer ricos pasteles , como conocedor del tema sabes  identificar que documentación , vídeos o libros que son  buenos para aprender y cuales deberían de leer y en que orden los principiantes para llegar a ser un gran pastelero como tu.

Ok sabiendo todo este conocimiento solo tienes que crear un curso y ingresar los link, vídeos o escribir artículos para guiar a los principiantes para que se conviertan en profesionales. Como vez no tienes que escribir largos artículos explicando como hacer pasteles, lo único que tienes que hacer es armar los pasos a seguir para aprender hacer pasteles, suministrando los links donde esta la información.

Como ves Gibbon se nutre de los cursos que sus usuarios crean diariamente, de esta manera puedes saber fácilmente por donde empezar y paso a paso volverte un profesional. Ojeando un poco los cursos que actualmente existen mire de todo tipo como por ejemplo:

• Programación
• Diseño de interfaces
• SEO
• Educación 2.0
• Emprendimiento
• multimedia
• edicion de vide
• Etc

Es un sitio relativamente nuevo y me he decidido a escribir sobre el por la cantidad de cursos que se están creando y son de acceso gratuito para todos, lo único malo es todos los cursos están en ingles solamente encontré uno en español. Pero como mencione antes, los cursos son creados por los mismo usuarios así que animo a mis lectores a crear cursos en español para la comunidad del habla hispana.

link: https://gibbon.co/

Libro gratuito de Nodejs a traves de koans

Ese es el titulo del libro que hoy les traigo : " Introduccion a NodeJs a traves de koans " libro gratuito en español sobre la programacion con Nodejs. ¿ Pero que son koans ? bueno copio y pego la definición que sale en el libro.

"El término koan proviene de la filosofía Zen oriental. Es el nombre que se le da a un pequeño problema que un maestro plantea a su discípulo para evaluar su progreso. Suelen ser breves y escuetos y, a menudo, con apariencia trivial o absurda pero que, sin embargo, suponen para el discípulo un paso más en su 2"

"Los koans en el ámbito informático fueron idea de Joe O’Brien y Jim Weirich, de EdgeCase, como forma de alcanzar “la iluminación” en el aprendizaje del lenguaje Ruby. Manteniendo la analogía con la filosofía Zen, los koans de Ruby son peque-ños trozos de código donde se sustituye alguna parte con unos guiones bajos ‘__’, al estilo de los ejercicios de rellenar el hueco, que el alumno deberá cambiar por el código que piense que es el correcto para que el ejercicio ejecute sin errores."

Este libro es un excelente referencia si quieres conocer mas sobre Nodejs,  he revisado el libro  personalmente creo que tiene temas muy técnicos y los lectores principiantes que no tienen mucha experiencia con javascript creo que se sentirán abrumados. Pero si tienes experiencia con javascript este libro te permitirá despejar muchas dudas y sin duda aprender este lenguaje.

Segun leo en la web, el libro se mantendrá actualizado constantemente.

Link : http://nodejskoans.com/

Google Maps a pantalla completa con paneles sobre el mapa.

Recientemente he comenzando una web app donde el mapa de GoogleMaps tiene que estar como background y todo el contenido de la aplicacion sobre el al estilo de ventanas flotantes. Este tipo de web app es muy comun actualmente, por lo cual queria compartir con ustedes la manera en como lo hice para que puedan aplicarlos en sus proyectos.

En el siguiente link de jsFiddle encontraran todas las clases necesarias como poderlo reproducir en sus proyectos, he usado boostrap 3 para el estilo de los paneles. Lo importante seria que los elementos que quieres que floten sobre el mapa tienen que tener la clase "overMap" adicional a esta clase tienes que agregar otra la cual determinara la posicion en sobre el mapa , aqui una lista de las que puedes usar:

• overMap-topCenter
• overMap-topLeft
• overMap-topRight 
• overMap-bottomCenter
• overMap-bottomRight
• overMap-bottomLeft
• overMap-centerAll
• overMap-centerLeft
• overMap-centerRight

Segun cual asignes determinara la posicion.



Creo que no se ve muy bien en la vista previa de jsFiddle , asi que les dejo el enlace directo a la aplicacion a pantalla completa donde podras ver mejor el resutado:

link : http://jsfiddle.net/SaulBurgos/3FtbC/4/embedded/result,js,html,css/

Guia y lineamientos de como se trabaja y organiza un proyecto web profesional

Si te has preguntado alguna vez como las grandes compañías de desarrollo web organizan y trabajan sus proyectos, solo por curiosidad o para prepararte en una entrevista de trabajo, tengo algo muy bueno para ti.

North es un documento en Github que recopila las mejores practicas y estándares sobre el desarrollo de aplicaciones web modernas, el cual abarca temas como :

Como organizar los proyectos. 

Tecnologías actuales en uso.

Metodologías de seguimientos de proyectos.

Consejos sobre HTML , CSS , javascript, etc.

Control de versiones.

Roles y responsabilidades del equipo.

Diseño visual, patrones de diseño y rendimiento.

Si dispones del tiempo y quieres estar preparado sobre como es el proceso de desarrollo web profesional y como esta organizado te recomiendo esta lectura. Tal vez encuentres muchos términos que no entiendes y tendrás que investigar por tu cuenta pero al final te aseguro que valdrá la pena.

Una de las cosas mas interesante de este documento es que sus autores dicen que se mantendrá siempre actualizado con las ultimas practicas y metodologías,  ya esto del desarrollo web cambia constantemente y lo mejor es siempre es contar con la ultima información disponible.

Link: https://github.com/snugug/north

CSS: es mejor usar translate en lugar de Position:absolute y Top/left

Paul Irish ha escrito un post en su pagina personal donde explica el por que es mejor mover objetos con translate en lugar de TOP y LEFT con posición absoluta.

La mejora de desempeño se nota mucho cuando estamos hablando de animaciones,por lo que usar esta tecnica para objectos estáticos no tiene sentido. Si te interesa este tema de animacion de objetos con CSS te recomiendo que veas el siguiente video. (video en ingles).



Tambien te puede interesar leer el articulo completo donde explica en detalle el por que de la mejora de desempeño usando translate, tambien encontraras link a los ejemplos.

link: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Error Wampserver 2.4 no corre correctamente

Algunas veces cuando instalas Wampserver te encuentras que el servidor no levanta correctamente y su icono no  pasa del color amarillo. Para saber realmente en que modulo esta ocurriendo el problema necesitamos hacer lo siguiente:

 Click izquierdo en el icono de wampserver para ver el menu  > apache > Service , y ver si el servicio esta corriendo correctamente. Si no es asi y esta detenido tenemos que ver los apache logs que estan en el mismo menu y veras una lista de errores que puedes consultar con Google.

Otro problema comun es que alguna aplicacion esta usando el puerto 80, que es el mismo que usa wampserver , en este caso lo puedes probar usar la opcion : "Test port 80" en el mismo menu de apache >service

Ahora hacemos el mismo proceso con mysql,  Click izquierdo en el icono de wampserver para ver el menu  > service > Service , y ver si el servicio esta corriendo correctamente. Si no es asi y esta detenido tenemos que ver los mysql logs que estan en el mismo menu .

En el siguiente ejemplo yo estoy recibiendo el siguiente error en mis mysql logs: 

2014-02-18 09:21:24 13472 [Note] Plugin 'FEDERATED' is disabled.
2014-02-18 09:21:24 13472 [Note] InnoDB: The InnoDB memory heap is disabled
2014-02-18 09:21:24 13472 [Note] InnoDB: Mutexes and rw_locks use Windows interlocked functions
2014-02-18 09:21:24 13472 [Note] InnoDB: Compressed tables use zlib 1.2.3
2014-02-18 09:21:24 13472 [Note] InnoDB: Not using CPU crc32 instructions
2014-02-18 09:21:24 13472 [Note] InnoDB: Initializing buffer pool, size = 128.0M
2014-02-18 09:21:24 13472 [Note] InnoDB: Completed initialization of buffer pool
2014-02-18 09:21:24 13472 [Note] InnoDB: Highest supported file format is Barracuda.
2014-02-18 09:21:24 13472 [Note] InnoDB: 128 rollback segment(s) are active.
2014-02-18 09:21:24 13472 [Note] InnoDB: Waiting for purge to start
2014-02-18 09:21:24 13472 [Note] InnoDB: 5.6.12 started; log sequence number 1625997
2014-02-18 09:21:24 13472 [Note] Server hostname (bind-address): '*'; port: 3306
2014-02-18 09:21:24 13472 [Note] IPv6 is available.
2014-02-18 09:21:24 13472 [Note]   - '::' resolves to '::';
2014-02-18 09:21:24 13472 [Note] Server socket created on IP: '::'.
2014-02-18 09:21:25 13472 [Note] Event Scheduler: Loaded 0 events
2014-02-18 09:21:25 13472 [Note] wampmysqld: ready for connections.
Version: '5.6.12-log'  socket: ''  port: 3306  MySQL Community Server (GPL)

Esto es debido al que tengo instalado el servicio IIS de windows.

Para resolver este problema existen muchas opciones que tienes que testear, las cuales puedes encontrar con una simple busqueda en Google. A continuacion dejare el link que a mi me ha ayudado a resolver el problema:

 http://forum.wampserver.com/read.php?2,73392

De forma general de todas las opciones que hablan, yo desactive IIS y cambie el puerto de wampserver a 8080.

Mide que tan rapido carga tu sitio web

La rapidez con la que un usuario carga tu pagina es muy importante. Tu visitante puede  desesperarse y abandonar tu sitio en cuestión de segundos. Por esa razón siempre es bueno optimizar nuestros sitios web para que carguen con la mayor brevedad posible.

Para ayudarnos con esto Google nos ofrece una herramienta de medición llamada PageSpeed con la cual nos guiara por el proceso de optimizacion con los pasos a seguir.  PageSpeed es muy facil de usar solamente escribe la url de tu sitio web y das click en analizar.

De inmediato veras el resultado de tu web valorado para moviles y escritorio. Al mismo tiempo  te muestra recomendaciones de como hacer la optimizacion para tu sitio. Pero ojo no te esfuerces demasiado en conseguir el puntaje de 100, como dije son recomendaciones no es algo obligatorio que tienes que conseguir, pero siempre es bueno tener un buen puntaje.

link: https://developers.google.com/speed/pagespeed/insights/

Tal vez usar jquery no sea necesario

El titulo es mi traducción personal a un articulo muy interesante que encontré sobre el uso excesivo de jquery en nuestros proyectos web. Se que jquery nos ahorra muchas lineas de código y nos hace la vida mas fácil , pero también es bueno saber que podemos obtener el mismo resultado sin usar jquery como dependencia en nuestros proyectos solo con código nativo javascript de los navegadores.

Recomiendo dar una ojeada a los siguientes links con muchos ejemplos de como hacer las cosas sin usar jquery

http://youmightnotneedjquery.com/
http://blog.adtile.me/2014/01/16/a-dive-into-plain-javascript/

Pero tambien deben de leer por que jquery es lo que es :

https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o/edit#

Consejos para hacer pruebas de rendimiento con Google Chrome

En un día normal cuando quieres probar alguna app web, usas Google Chrome como todo usuario normal lo haria, pruebas como cargan las paginas, imágenes, scripts, ect. Una vez terminado esto sacas tus tiempos y empiezas hacer optimizaciones.

No hay ningún problema con esto con excepción de que no es una prueba justamente adecuada, por que lo que necesitas es un entorno de pruebas limpio. Esto es importante cuando medimos la calidad y rendimiento de la experiencia web que creamos, cuanto mas rápida tu web mejor.

Esto normalmente es llamado una Cleanroom , que viene siendo que mantengas tu entorno ordenado y limpio antes de usarlo. Como desarrolladores tenemos múltiples extensiones instaladas , apps y programas por ahí en nuestro sistema operativo. Algunas de ellas corriendo en el background las cuales ya habíamos olvidado que estaban ahí hasta que las necesitamos de nuevo.

Para usuarios normales esto no causa de mayor problemas, pero como desarrolladores web necesitamos tener mucho cuidado con esto, por que estas apps y extensiones son susceptibles a las mismas reglas de uso de memoria y recursos del sistema como toda aplicación normal.  Ahora si estas probando tu aplicación en el navegador con todas estas extensiones y apps instaladas esto puede afectar los resultados de tus pruebas, los cuales no reflejan el verdadero resultado.

He leído de algunos desarrolladores que han pasado horas tratando de optimizar sus aplicaciones sin éxito solo para descubrir que el problema no era su aplicación sino una extensión que tenia instalada.

Con Google Chrome podemos tener una cleanroom para nuestras pruebas usando un perfil de usuario nuevo, guia para esto en este link :

https://support.google.com/chrome/answer/2364824?hl=en-GB

Tambien Google nos enseña 2 opciones para crear una cleanroom para nuestras pruebas en este link :

https://developers.google.com/chrome-developer-tools/docs/clean-testing-environment

En general algunas reglas a seguir para realizar nuestras pruebas :

Prueba tu navegador con un perfil de usuario limpio 

Asegurate que no tienes apps y extensiones corriendo

Cierra ventanas y tabs secundarias

Otros navegadores pueden ser configurados de la misma manera.

link: http://addyosmani.com/blog/ghostbusting-for-front-end-developers/

 

Crear una sesion en 2 dominos distintos con PHP y Curl no es posible (creo)

Siempre se da la ocasión que necesitas crear una sesión en una aplicación y al mismo tiempo tiene que crearse una sesión para el mismo usuario en otro sistema en otro dominio, porque de alguna manera comparten datos o cosas por el estilo.

Para hacer esto podemos hacer uso de http://enable-cors.org/ que permite comunicación entre dos dominios distintos. Otra forma de hacer esto es usando JSONP , que no es mas que un simple truco para superar las restricciones de "same domain policy" en peticiones Ajax.

Pero hoy quiero hablar de tratar de crear una sesión desde PHP usando Curl , Curl nos permite hacer peticiones a una URL desde PHP y recibir los datos en el mismo script. Lo lógico de pensar  es que si puedo hacer una petición desde PHP y enviar parámetros en la petición, entonces puedo enviar las credenciales del usuario al mismo tiempo para crear la sesión en 2 sistemas distintos.

Bueno en teoría si funciona, el script al que hagas la petición desde PHP recibirá los datos y responderá como se espera pero lo que no funciona es al momento de crear la sesión. Si tratas de crear la sesión usando JSONP enviando los datos en la query string funcionara perfectamente pero con Curl no funcionara.

El problema es con la identificación de la sesión, normalmente cuando tu inicias una sesión con PHP se crea un identificador único el cual luego es pasado a nuestro navegador en forma de cookie ó GET , ese identificador es guardado en el servidor y la próxima vez  que un script llama a  "session_start()" PHP verifica ese  identificador en el servidor, si lo encuentra entonces hay una sesión creada. En caso de no encontrar el identificador de la sesión PHP creara uno nuevo.

Entonces la petición Curl no puede recibir el identificador de la sesión que se creo en PHP , por lo tanto cuando visitas el sitio B  no existe el identificador en el servidor para tu navegador. Este comportamiento no pasa con JSONP.

Puedes hacer pruebas usando las funciones session_name() , session_id() de PHP y podrás comprobar que los identificadores de las sesión no son los mismos usando Curl en el sitio A y B.

He leído en algunas paginas que puedes pasar el identificador se sesion del sitio A al B en los parámetros para usar el mismo ID, pero no lo he llegado a comprobar no tengo idea de como hacerlo. No soy un experto en PHP si me he equivocado por favor corríjanme para poder aprender también.

He escrito esta entrada  por si alguna persona también tuvo la idea como yo de usar Curl para crear sesiones y no tiene idea de por que no funciona.

Que es un OKR ? ( Objective and Key Result )

No tenia idea de que diablos era un OKR , pero en este video los chicos de mejorando.la queda muy bien explicado. Hasta ahora me estoy dando cuenta de la buena herramienta que son. Esta es una corta definicion sacada de la web de mejorando.la.

" La idea de los OKRs es manejar objetivos personales medibles y enfocados a la visión de la empresa. Los OKRs deben ser públicos, y su función será medir el crecimiento a nivel de empleado, equipo u organización. "

Y aqui el video:


Link : https://mejorando.la/

Explicacion como trabaja la programacion orientada a objetos en javascript

El siguiente es un video donde explican detalladamente como funcion la programacion orientada a objetos ( OOP ) en Javascript , mejor explicacion no puedes conseguir. Recomendado en caso que no sepas como trabaja o simplemente quieras reafirmar tus conocimientos.

Bueno el unico problema es que esta en ingles, pero si habilitas los subtitulos y con la ayuda de google translate podras entenderlo sin problemas. No olvides visitar el link de la pagina oficial , por que ofrecen una herramienta para visualizacion de objectos muy buena donde puedes practicar y ver como tus objectos estan formados y su herencia.

link: http://www.objectplayground.com/

Como comunicar 2 iframe con diferentes dominios

Mas que escribir un tutorial sobre este tema quiero compartir los link donde yo he encontrado la respuesta a esta duda, basicamente existe una nueva API window.postMessage que permite enviar eventos desde dentro de un iframe hacia su padre contendor.

Los publico por que me fue muy dificil encontrar estos link y quiero ayudar a otros con el mismo problema.

En el siguiente link podras encontrar una explicacion detallada de como funciona este metodo cuando no usamos la API HTML5

 http://softwareas.com/cross-domain-communication-with-iframes

Este es la definicion de la API :

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

Aqui un tutorial de como usar la API

http://davidwalsh.name/window-postmessage

Los mejores 100 codigos de Codepen del 2013

El sitio Codepen ha publicado sus 100 mejores codigos publicados del 2013 basado en un algoritmo ninja que ellos tienen. Recomiendo revisar la lista por que hay unos experimentos realmente interesantes que puedes reutilizar en tus propios sitios web, como por ejemplo butones, loader, menus , ect.

link: http://codepen.io/2013/popular

Utilisima herramienta para crear screenshot de tus web Apps

Piensa en esta situacion :

Pasas el tiempo programando una aplicacion web super cool y ahora quieres presentarla a tu audiencia de una forma muy atractiva en situaciones comunes de la vida real y en un determinado dispositivo. Bueno lo primero que piensas es en bajar un template photoshop de un iphone por ejemplo y hacer el montaje tu mismo como por ejemplo en este link : http://365psd.com/day/2-219/

Bueno supongamos que no quieres hacer el montaje tu mismo ó que no sabes como usar photoshop, la verdad que no hay mucho que hacer en estas situacion hasta ahora.

Les presento : Placeit.net una herramienta para hacer este tipo de montajes automaticamente por ti, solo tienes que subir tu imagen y seleccionar el tipo de situacion de la vida cotidiana que mas te guste, pero eso no es todo tambien puedes usar la url de tu sitio web y placeit.net automaticamente creara un screenshot de tu sitio web, y el resultado es muy bueno.

Por ejemplo la imagen de presentacion de esta entrada es de este blog, ha quedado super cool aah? El servicio ofrece una opcion gratuita y de pago.

link : https://placeit.net/#!/stages/listening-music-black-iphone-4

Interesante concepto de tienda online para vender tus productos conoce : Junkstr

La idea de vender productos en linea no ha cambiado nada en los ultimos años, es por eso que esta idea me ha gustado mucho. Basicamente replica la venta por lotes de productos en la web, la misma dinamica usada en los mercados de pulgas.

El proyecto fue desarrollado pro Patricio Vidal y Rodolfo Berríos , desde mi blog los felicito por su idea me parece muy util. Para saber mas sobre como function Junkstr mira el siguiente video. ( por cierto me gusta mucho el nombre )



Ttambien tienes la opcion de que puedes regalar un articulo, me parece excelente.

Link : http://www.fayerwayer.com/2014/01/junkstr-vende-tus-cachureos-por-lotes-fw-startups/

Video tutorial introduccion a Google Maps API

Si alguna vez te ha interesado en crear mapas para tu sitios webs en Google Developers han publicado 4 vídeos introductorios sobre la API de Google Maps, aunque están en ingles puedes poner los subtitulos, los cuales pueden guiarte mejor. Los vídeos cubren lo mas básico para  principiantes que quieren comenzar a trabajar con mapas en sus webs.







Adicional a estos videos puedes ver el capitulo de ejemplo de mi libro introductorio a Google Maps donde puedes encontrar un pequeño tutorial sobre como empezar con Google Maps en este link

http://webmasternoob.blogspot.com/2016/01/libro-google-maps-javascript-indice.html


Tambien google tiene un Curso oficial: https://www.udacity.com/course/google-maps-apis--ud864

link: http://googlegeodevelopers.blogspot.com/2013/12/fab-friday-is-google-maps-video-fest.html

Jquery Mobile : Overlay Panel desde abajo

JQuery Mobile recientemente a agregado un interesante widget llamado "panel" el cual es muy bonito para mostrar informacion en los lados de tu App.  Pueden un ejemplo aqui : 

http://view.jquerymobile.com/1.3.2/dist/demos/widgets/panels/ 

A mi me gusta mucho esta manera de mostrar informacion. Recientemente necesitaba usar uno de esos panales pero queria que este saliera desde abajo, intentando imitar el comportamiento de algunas Apps que habia visto pot ahi.

Bueno JQuery Mobile no tiene esa funcionalidad por ahora en los panales, seguro lo agregan mas adelante, Asi que despues de una extensa busqueda en internet sin exito, he decidido programarlo yo mismo y a mi paracer el resultado quedo bastante decenton,  no perfecto pero decente :)

Como lei en muchas paginas en interent, hay bastante gente buscando este comportamiento por lo cual decidi compartirlo.  Haciendo click en "list of items" podran abrir el panel con una listview de JQuery Mobile

El color de piel de jesus

Sobre el color de piel de jesus : 

Según el consenso de expertos científicos Jesús era, como la mayoría de Judios del primer siglo, probablemente un hombre de piel oscura. Algunos artistas occidentales populares representaron a jesus como blanco de ojos azules ,Talvez impulsados por algunos versículos bíblicos que que hablan sobre la pureza, la rectitud y la oscuridad del pecado y del mal.

El único problema es que las representaciones son históricamente inexactas,Escrituras cristianas dicen muy poco acerca de la apariencia física de Jesús. Ellos no hacen ningún comentario sobre la nariz, color de ojos, pigmentación de la piel ó el cabello . Como algunos historiadores y teólogos han planteado, el silencio de las Escrituras sobre el tema de color de la piel de Jesús es fundamental para el gran atractivo del cristianismo con gente de varias etnias. En un mundo donde la raza a menudo divide a las comunidades e incluso las iglesias, las representaciones bíblicas del hijo de Dios lo posicionan como uno que puede unir esas brechas.

Como Martin Luther King Jr.’s dijo una vez : "¿Por qué Dios hizo a Jesús blanco, cuando la mayoría de los pueblos del mundo no son blancos? 

Su respuesta fue : "El color de la piel de Jesús es de poca o ninguna importancia" porque lo que hizo a Jesús excepcional  fue "Su disposición a entregar su voluntad a la voluntad de Dios.".

Mientras esperamos su llegada la mayoria seguirá creyendo que jesus luce como un super modelo escandinavo de ojos azules.

link: http://www.theatlantic.com/politics/archive/2013/12/insisting-jesus-was-white-is-bad-history-and-bad-theology/282310/