programación

javascript / programación — 1 Comment
26
Jul 11

Necesitas saber CoffeeScript

CoffeeScript es un pequeño y bonito lenguaje de programación que compila en JavaScript creado por Jeremy Ashkenas, luego de leer este libro

Si conoces bien JavaScript no te costará nada de trabajo aprender CoffeeScript y muy probablemente agradecerás lo elegante y simple de su sintáxis, la cual se inspira mucho en Ruby o Python. Pero CoffeeScript no se trata solo de quitar parentesis y corchetes a JavaScript, sino que el lenguaje incluye bondades como comprensiones y herencia pseudo-clásica. Además de que el código generado está tan optimizado no es de sorprender que a menudo el JavaScript resultante es mucho más eficiente que uno generado a pesar de seguir siendo bastante legible.

Habrá una inevitable y comprensible resistencia al cambio de parte de algunos desarrolladores, pero la importancia de CoffeeScript es evidente para cualquiera que esté prestando atención. Personalmente, empecé a experimentar con CoffeeScript a finales del 2010 y ahora se ha vuelta una herramienta indispensable en mi workflow.

Si los ejemplos en la documentación oficial no te bastan, el mejor recurso para aprender a entender CoffeeScript es el excelente tutorial de PeepCode.

javascript / programación — 3 Comments
12
Oct 10

El nuevo Twitter y el misterio del hash bang

Una de las cosas que más me llamaron de la atención cuando empecé a probar el nuevo Twitter fue la curiosa sintaxis de sus urls, que comienzan con los simbolos #!, también conocidos como hash-bang,

Continue reading →
IPhone / programación / web 2.0 — 12 Comments
28
Jul 10

PadPressed



Hoy fue el lanzamiento oficial de PadPressed, un plugin para WordPress que transforma tu sitio en una aplicación HTML5 para ser navegado comodamente desde una iPad.

Si quieren quedar bien con estos hipster y early-adopters con dinero que son los usuarios de iPad, les recomiendo que compren el plugin y lo instalen en su sitio. Pero corran antes de que se acaben.

Fue hace poco más de un mes qué Andres y Jason me mostraron la idea y me invitaron a formar parte de este proyecto al que simplemente no me pude negar. Muchas horas de desarrollo y miles de líneas de código después puedo decir que ésta ha sido una de las experiencias más gratificantes en mi carrera como diseñador/desarrollador web.

Las tecnologías involucradas son lo último y lo más avanzado en diseño web basado en estándares: HTML5, CSS3 y Javascript. Es dificil de creer todo lo que es posible hacer cuando tienes permiso de ignorar por completo a Internet Explorer. Es sorprendente.

Aprendí muchísimo con éste proyecto y aunque me falta el tiempo necesario para hacer todos los tutoriales, screencasts, conferencias online, etc. que quisiera, me gustaría compartir algo de lo que aprendí con ustedes. Así que pueden preguntar lo que quieran sobre el desarrollo de PadPressed en los comentarios de este post y prometo que haré mi mejor esfuerzo por responder.

Por cierto, si quieren darse una idea de como se ve PadPressed, pueden visitar este humilde sitio desde una iPad o desde Safari 4 cambiando su User Agent.

open source / programación — 4 Comments
17
Mar 10

CodeHere

En un post anterior, les platiqué de mis eternos problemas para insertar snippets de código en este humilde blog. En aquella ocasión había llegado a la conclusión que Gist era la herramienta perfecta pero la verdad es que tiene un defecto: el código no se ve en el feed.

Así que se me ocurrió que no era necesario para nada escribir el código “a mano” en el post (lo cual apesta) sino que es más fácil subirlo WordPress, adjuntarlo al post y luego usar un plugin para colorear el código. Y aqui les presento éste plugin.

Bueno, lo presento despues del salto.

Continue reading →
entrepreneur / programación / web 2.0 — 8 Comments
1
Mar 10

Video de HTML5 para principiantes

Creo que le debo una explicación a mi audiencia: La semana pasada durante la transmisión en vivo de la conferencia antes anunciada experimenté una serie de problemas técnicos que finalmente hicieron imposible que ésta se llevara a cabo con éxito.

No está de más decir que fue una fuente de frustración personal, puesto que llevaba casi mes y medio preparando todo para ese día y me daba mucha pena con las casi 200 personas que llegaron a estar viendo el evento en vivo.

Pero bueno, creo que en lo que resuelvo estos problemas técnicos, lo más indicado es entregar lo prometido. Así que grabe de manera offline la conferencia y aqui está para todos ustedes.

Continue reading →
javascript / programación — No Comments
17
Dec 09

Pequeño tip para que las imágenes quepan en el viewport del iPhone

Resulta que estoy haciendo una versión especial para el iPhone de un proyecto – que les anunciaré la próxima semana– y me topé con un problema: las imágenes cuyas dimensiones exceden el ancho de la pantalla aparecen mochas y sin ninguna forma de hacer scroll.

¿Les ha pasado? Están de suerte, pues descubrí una manera muy simple de solucionarlo con solo un poquito de jQuery.

Continue reading →
open source / programación — 3 Comments
14
Dec 09

CSML

CSML es una pequeña clase (requiere PHP5) que permite generar tags de HTML, usando selectores de CSS sin salir de sus bloques de código, sin necesidad de hacer complicadas concatenaciones ni aprender sintaxis complicadas.

download-button

Hay una cosa que odio: mezclar bloques de PHP con bloques de HTML. Será que CakePHP me ha mal acostumbrado a tener separadas las vistas de la lógica, pero de verdad me molesta código que se ve así (tomado del tema default de WordPress):

No se a ustedes, pero a mí tanto <? ?> me marea y luego se me hace muy dificil entender donde empieza y donde termina un bloque. Desgraciadamente éste tipo de programación es muy común en el mundo de WordPress, algunos pupulares temas y plugins son verdaderos spaghettis indescifrables, y esto es en cierta manera porque asi es la manera en que WP está escrito.

CakePHP, por otra parte, tiene una solución interesante para este problema (en realidad, creo que es una solución para un problema distinto, pero denme chance) en la forma del HTMLHelper, pero para tags complicados y con muchos atributos, el código se vuelve demasiado y a mi siempre me cuesta recordar el orden de los parametros.

Cuando decidí aventarme a crear temas premium para WP, una solución para éste problema fue una de las principales razones para escribir el Duperrific Theme Engine de donde finalmente extraigo lo que ahora les presento como CSML.

Ejemplo:

Como verás csml::tag() toma un selector como parametro y regresa un tag de HTML, mientras que csml::entag() toma una cadena y la envuelve con el selector designado en el segundo parametro. En el caso de csml::entag() el segundo parametro tambien puede ser un array de selectores, lo que hará que anide los selectores uno dentro de otro, empezando por el último selector del array.

Aunque la forma más facil de utilizar csml, es usando las dos funciones incluídas: t() y en() que son wrappers para csml::tag() y csml::entag() respectivamente y además imprimen el tag.

Un ejemplo más de la vida real:

Apenas estoy empezando en esto de liberar cosas que he hecho, así que espero que les resulte tan útil como a mí me ha resultado. Si la usan me avisan y si encuentran algún bug me dicen o, mejor aún, forkean el proyecto y lo arreglan.

download-button

interfaz / programación — 4 Comments
10
Mar 09

Atlas, un IDE de desarrollo WYSIWYG para Cappuccino

Cuando descubrí cappuccino por primera vez me quedé completamente asombrado y supe que iba a ser un parteaguas en la forma en que se programan aplicaciones web.

Curiosamente no ha hecho tanto ruido como yo esperaba, jQuery, Prototype y MooTools siguen siendo las herramientas favoritas de muchos de nosotros. Pero viendo esto que están desarrollando, creo que esto puede cambiar en cualquier momento: Atlas, un IDE de desarrollo 100% WYSIWIG corriendo en el navegador

Aqui les dejo un video para qe lo vean en acción:

programación — 3 Comments
16
Jul 08

Gestures en el iPhone con Javascript

Me quedé agradablemente sorprendido con esta implementación en Javascript de los gestures (¿Cual es la traducción al español de esa palabra?) típicos de las aplicaciones del iPhone. Me pregunto si la masa de usuarios de esta plataforma justifica desarrollar aplicaciones (o sitios) web específicos. ¿No es casi como una versión 2.0 del internet explorer required noventero?

En fin, la demo me parece increíble y me dan ganas de crear algo así.

Video en Youtube

programación / video — 2 Comments
2
Jun 08

Deshazte del CSS en línea en tu HTML

Find
Uploaded with plasq’s Skitch!

Si te llegaras a encontrar en la muy hipotética situación en la que alguien te envía un gran archivo de HTML para que lo embellezcas y descubres con horror que está lleno de in-line css y casi estás al borde del llanto ante la perspectiva de tener que quitarlo todo a mano, uno por uno, a las 2:53 de la madrugada después de un día ajetreado. ¡No te preocupes! si tu editor de texto (el mío es textmate) permite hacer búsquedas/reemplazos utilizando expresiones regulares, entonces probablemente puedas buscarlas usando la siguiente:


(style=([^>]+))

Y listo, solo falta que las remplaces con una cadena vacía. Cabe destacar que esto solo funcionará correctamente cuando el atributo style sea el ultimo del tag como en

<p class="red_paragraph" style="background:#FF0000; color:#FF6634;"> [...] </p>

pero no funcionará si los atributos son al revés

<p style="background:#FF0000; color:#FF6634;" class="red_paragraph" > [...] </p>

Pero como este no era el caso, no me preocupé en refinar mi expresión, después de todo eran las 2:53 de la madrugada y aun tenía que terminar de diseñar una pagina para la mañana siguiente. Pero si ustedes no saben nada de expresiones regulares y quieren aprender, yo les recomiendo que comiencen por este sitio donde explican muy bien de que va todo este rollo.

← Older Entries