martes, 11 de diciembre de 2012

Números mágicos

En términos de programación, un "Magic Number" es una constante numérica usada para identificar un ente (ya sea valor de un diccionario, un estado, una constante...). Algo que directamente podría interpretarse como una mala práctica. Desde luego, el uso de estos números, no condiciona el propio código en sí, ya que seguirá funcionando perfectamente; ahora bien, no se puede decir lo mismo en cuanto a la mantenibilidad del mismo.

Buscando en la wikipedia sobre estos bichitos, encuentro dos códigos para una misma tarea.

   for i from 1 to 52
       j := i + randomInt(53 - i) - 1
       a.swapEntries(i, j)

En este primer código, encontramos que nos devuelve 52 valores aleatorios de un Array.

   constant int deckSize := 52
   for i from 1 to deckSize
       j := i + randomInt(deckSize + 1 - i) - 1
       a.swapEntries(i, j)

En este, ya comprendemos un poco más. Resulta que el 52 es el tamaño de una baraja (deckSize) en cartas.

Obviamete, y para mi gusto, el hecho de tener una variable que identifique con su nombre el porqué de un valor, no es suficiente.

Usemos enumerados por favor. En este caso, podríamos tener por ejemplo, un enumerado llamado Deck (baraja). Aquí nos hemos ido a .NET:


Ahora, el uso de un enumerado, junto con una buena descripción de la variable, nos lo dice todo:





Hay una herramienta para ello: 13 herramientas esenciales para el desarrollador web Ninja

Destacaré algunas herramientas que considero útiles a la hora de desarrollar web, y lo mejor de todo, casi todas son completamente gratis!!

Herramientas generales

  • Fiddler : Uno de las mejores herramientas para hacer debug HTTP hoy en día.

Herramientas generales para exploradores & Plugins

Inspección y debugging en cliente


Subtítulos en vídeos con HTML 5

Es de todos sabido, o por lo menos, conocida, la nueva etiqueta de HTML 5 <video>, gracias a la cual se pueden reproducir de manera nativa en el entono web, vídeos. Pues bien, resulta que HTML 5 ha ido más allá, dándonos más control.

En este caso, con la característica de los subtítulos, lo cuales están ganando terreno cada vez más.


La idea es que estos subtítulos cumplan con el sistema Closed Caption para que las personas con deficiencia auditiva o visual puedan comprender el contenido que les queremos transmitir, o simplemente para dotar a nuestros vídeos de una transcripción en otros idiomas.
Dependiendo del navegador podremos utilizar diferentes formatos, como por ejemplo TTML, SRT, WebVTT, etcétera. En este post hablaremos del último nombrado.


40 APIs para diseñadores web y programadores

Una API (Application Programming Interface) es un conjunto de reglas y especificaciones que los programas de software pueden seguir para comunicarse o relacionarse con cualquier otro.

Como sabemos los desarrolladores, hay cientos de APIs para hacer casi cualquier cosa imaginable online. Algunas son mejores que otras, y algunas definitivamente más útiles que otras.

Entre otras, tenemos:

  • APIs de Google, entre las que se encuentran la de Places, Geocoding, Blogger, Calendar, YouTube,  etc.
  • APIs de Yahoo!, entre las que están Flickr, Delicious, Meme, etc.
  • API de Twitter
  • API de Facebook
  • API de Digg.
  • ....

Resto del artículo (fuente original).

Tests en Javascript


Cuando trabajamos con lenguajes dinámicos como Javascript los tests son mucho más importantes que en lenguajes estáticos. Ahora que he empezado a usar mas Javascript en la vida real y tener cosas más complejas que aplicaciones básicas con node.js o Knockout, mantener el código funcionando se hace más complicado y los tests más necesarios.

La principal razón por la que los tests son más necesarios se porque no hay una fase de compilación como tal. Esto provoca que no podamos detectar fallos hasta el momento de ejecutar la aplicación, pero sobre todo impide aprovechar las capacidades de análisis estático de un compilador moderno.

viernes, 16 de noviembre de 2012

Programming Windows 8 Apps with HTML, CSS, and JavaScript (Second Preview)

Desarrollo de Aplicaciones Windows 8 Apps con HTML, CSS y Javascript.

Accceso a blog oficial de Microsoft en el que podemos acceder a la dercarga de la "Second Preview" (en formato pdf) del título oficial de próxima publicación orientado al desarrollo de aplicaciones para Windows App Store con HTML, CSS y Javascript.

Acceso, igualmente, a los vídeos y soluciones que tratan en el libro. Lo que ellos llaman, "Second Preview’s companion content"

Aquí el enlace.

Microsoft HTML 5


Links a páginas que pueden ser de interés

Channel 9 MSDN

MVA – Microsoft Virtual Academy

jueves, 13 de septiembre de 2012

Tutorial HTML 5 para principiantes

Se trata de un tutorial (en inglés, pero como es para beginners... no problem!) para comenzar con HTML 5 y sus etiquetas.

Cuando se haya completado este tutorial, se tendrá un conocimiento básico del HTML y sabrá obtener un dominio y construir un sencillo website.

Resto del artículo (fuente original)

martes, 11 de septiembre de 2012

ASP .NET, creando Custom Validators

Pese a que los validadores (de .NET) llevan en nuestras algunos cuantos años (si no recuerdo mal, Microsoft los introdujo en la versión 2.0).

Pero han sacado una versión 2 del framework web, y en éste han incluido un nuevo framework. Aquí, han metido una serie de validadores específicos que cubren los típicos escenarios como validación de la presencia, tipo de datos o intervalos[...].

Resto del artículo (fuente original)

Otra guía más de conceptos básicos de jQuery

Por ahí se dice que es el tutorial definitivo para aprender jQuery de un modo rápido, sencillo y eficaz. Vosotros mismos....

Aquí está el enlace.

viernes, 7 de septiembre de 2012

Tutorial de Backbone.js

Una excelente introducción a Backbone.js, y además.... en castellano!!

Llevo un tiempo analizando y aprendiendo a trabajar con la librería Backbone.js y me parece una librería estupenda para desarrollar aplicaciones JavaScript. El mayor problema que estoy encontrando es la falta de tutoriales y documentación al respecto, y por ese motivo he decido crear un pequeño tutorial donde se analice el funcionamiento de la librería. Este tutorial lo iré desarrollando poco a poco en distintas entradas, intentando resaltar los aspectos más importantes y analizando cada uno de sus componentes.

Resto del artículo (fuente original)

martes, 17 de julio de 2012

Páginas para desarrolladores Android en inglés


Además de los mejores recursos para Android en español nada es comparable con la inmensa cantidad de contenidos en inglés.

Android developers: La referencia oficial de Android. Podemos encontrar en ella el SDK y una guía de referencia cubriendo la mayor parte de los temas necesarios para crear tus propias aplicaciones en Android, desde lo más básico hasta guías para publicar en Google Play o para optimizar procesos.

Stackoverflow: El mayor lugar de preguntas y respuestas sobre programación. Los usuarios votan las mejores respuestas a una pregunta, lo que hace que éstas aparezcan más arriba en la página. Todo lo que puedas preguntarte ya se ha tratado antes en esta página, seguro. Es la referencia de cualquier lenguaje de programación, y Android no iba a ser una excepción.

Vogella: Impresionante blog con una cantidad inmensa de tutoriales. En el apartado de Android podemos encontrar una referencia completa para aprender sobre cualquier tema. Los apartados son muy extensos y altamente detallados, por lo que es casi imposible no encontrar lo que buscas aquí. Además tiene la gran ventaja de que los va actualizando a la última versión de Android, algo que no ocurre en la mayoría de las páginas y que sirve de mucho para estar al tanto de todas las novedades sobre el API.

Android UI Design Patterns: Como bien he querido hacer ver en la serie de posts sobre interfaces de usuario que inicié hace poco, la parte visual es casi tan importante como la funcionalidad. En ocasiones incluso más, porque un usuario puede dejar de usarla simplemente porque no le guste su apariencia. Es por eso que este blog nos será de mucha utilidad para tomar sus ideas como referencia.

Android Patterns: En la línea de la anterior, pero de una forma muy visual, nos dan ideas sobre los patrones de diseño más empleados para aplicaciones Android. Excelente opción para inspirarse a la hora de diseñar nuestras propias aplicaciones.

Si conoces alguna otra página que pueda ser de utilidad, coméntala en la parte inferior de esta entrada.

Resto del artículo (fuente original)

Mejorar la apariencia de la interfaz de usuario en Android


Centrándonos en los aspectos relacionados con la apariencia visual, sobre todo en los colores y decorados, los consejos para este caso son los siguientes:
1. Utiliza colores y diseños simples
El minimalismo está a la orden del día, y no es sólo un capricho o una moda pasajera. La tendencia a destacar el contenido sobre el continente consigue evitar distraer al usuario con lo que rodea a la información y conseguir que se centre en lo que realmente importa. Esto es más significativo si cabe en aplicaciones móviles, donde cualquier adorno innecesario nos hará malgastar el ya de por sí reducido espacio de pantalla.
2. Emplea gamas cromáticas complementarias, y con poca cantidad de colores diferentes
Los colores empleados en el tema de un diseño deben ajustarse a una gama de colores que permitan ser combinados entre sí. Es una tarea complicada de llevar a cabo a ojo, pero hoy en día existen muchas herramientas útiles para esta tarea, como puede Color Scheme Designer. No te excedas con la cantidad de colores a usar, dos ó tres serán más que suficientes para la mayoría de los contextos. Escoge tus colores y cíñete a ellos en todas las pantallas de tu aplicación.
3. Evita los efectos de relieve
A diferencia de los degradados o los sombreados, que usados con cuidado pueden darle un toque profesional a nuestra aplicación, los efectos de relieve deberían ser eliminados de la interfaz. Destruyen la sensación de limpieza que conceden las estructuras planas y le otorgan un aspecto tosco al conjunto. Recuerda: lo importante es el contenido, no incluyas elementos innecesarios que puedan distraer la atención.
4. Crea un alto contraste entre la letra y el fondo
Este detalle es siempre importante en cualquier aplicación para facilitar la legibilidad y evitar que la vista se canse, pero más aún en una aplicación para un dispositivo móvil, que en ocasiones se emplea en situaciones extremas de luz, como puede ser la exposición directa al sol.
5. Evita los negros puros sobre los blancos
Al igual que es importante el contraste, un exceso del mismo puede resultar perjudicial. Prueba a sustituir los negros por grises oscuros para letras con fondo blanco. A la inversa, por el contrario, funciona bastante bien, aunque no estaría de más que probases con algún tono de gris muy claro sobre los fondos negros.
6. Aporta imagen de marca
A nadie le va a llamar la atención de primeras una aplicación cuya apariencia es igual a la de otros miles de aplicaciones. Al final la funcionalidad es lo más importante, pero al usuario medio se le suele ganar por el impacto inicial, y este se puede conseguir con una mínima personalización del tema básico.
7. No abuses de bordes y recuadros
Siguiendo con el aspecto de la limpieza visual, recomiendo tratar de minimizar al máximo los bordes y los recuadros innecesarios. La interfaz Holo de Android ya ni siquiera enmarca por completo las cajas de texto. Ese el estilo a seguir.

Resto del artículo (fuente original)

lunes, 11 de junio de 2012

Usabilidad en el diseño de Apps


Otra charla del congreso web​.
Para empezar, repasaremos las 10 leyes de la simplicidad:
1) Reducir, La manera más sencilla de alcanzar la simplicidad es mediante la reducción razonada.
Para cualquier producto de consumo, una persona tiene actualmente decenas de opciones. 30 variedades de cereales son, probablemente, más de las que un consumidor necesita. En medio del caos, la simplicidad aparece como una estrategia casi imprescindible: este consumidor no tiene tiempo de estudiar todas las posibilidades, tiene que captar el mensaje y entender el producto de un vistazo.

La simplicidad aplica en muchos ámbitos: el diseño del propio producto, el packaging, la publicidad, etc. Maeda sugiere una estrategia para buscar esta simplicidad: el modelo SHE (Shrink, Hide, Embody):
  • Reducir el tamaño
  • Esconder: no hace falta que los atributos y funciones del producto estén todos visibles simultáneamente, sino solo cuando el consumidor los necesita.
  • Incorporar la calidad en el producto, sin que se vea exteriormente.
En el fondo, se trata de evitar la tentación de contar algo por el simple hecho de poder contarlo, de hacer gala de todos los beneficios y atributos del producto (por ejemplo, unas galletas integrales, con Omega3, con vitaminas, sin azúcar, etc.). El posicionamiento está en la mente del consumidor, y éste no hace listas de pros y contras cuando está delante del lineal del supermercado.


2) Organizar, La organización permite que un sistema complejo parezca más sencillo.
Agrupar la información simplifica la comprensión y el recuerdo. 30 variedades de cereales quizá sean imposibles de memorizar, pero cinco gamas son más asequibles. Si cada gama de productos tiene un posicionamiento claro y una propuesta de valor diferenciada, el consumidor sabrá distinguirlas y recordarlas. Por ejemplo, Danone ha hecho un gran ejercicio de simplificación al crear las plataformas de Vitalínea, Activia o Danonino (aunque luego tenga cierta tendencia a expandir exageradamente cada gama).

En el lineal de un supermercado, el consumidor busca categorías antes que marcas, así que la buena organización es fundamental: dirige la vista del cliente, simplifica su proceso de decisión y le ayuda a encontrar lo que quiere comprar.


3) Tiempo, El ahorro de tiempo simplifica las cosas.
A nadie le gusta esperar; y la frustración de la espera es aún mayor en un momento en que todos tratamos de comprimir en un día decenas de actividades, exprimiendo las horas y correteando de un lado a otro. Para ahorrar tiempo también puede ayudar el modelo SHE: reducir el tiempo (con productos como un GPS que indica la ruta más corta, o un libro de cocina con recetas listas en cinco minutos), esconderlo (entretener a las personas que esperan en una cola con un video), e incorporarlo (indicar el tiempo de lectura en un artículo). El objetivo es doble: reducir el tiempo de espera y hacer esa espera más tolerable.

En el mundo del marketing, la ley del tiempo puede llevar a diseñar productos cuyo beneficio principal es ahorrar tiempo (arroz listo en 3 minutos), a diseñar procesos de compra más rápidos (las listas en los supermercados online), a crear productos autoexplicativos, que se pueden usar desde el primer minuto sin libro de instrucciones (como el iPhone, que literalmente no tiene instrucciones) o a crear campañas promocionales donde el regalo es tiempo (por ejemplo, un servicio de limpieza doméstica).


4) Aprendizaje, El conocimiento simplifica todo.
Todos nos hemos enfrentado a una tarea que nos parecía muy compleja la primera vez y trivial al cabo de un tiempo. Aprender a conducir es un reto, pero luego se hace de forma automática, casi sin pensar.

Para amar un producto hay que conocerlo, hay que pasar la barrera de la primera cita y llegar al noviazgo lo más rápidamente posible. Educar al consumidor es fundamental para que aprecie la marca, especialmente aquellas con propuestas de valor más premium.

En la innovación de las marcas, a menudo basada en constantes lanzamientos, enseñar es también un punto clave: lo peor que le puede pasar a un producto es que el consumidor no sepa para que sirve, o no sepa que hacer con él.


5) Diferencias, La simplicidad y la complejidad se necesitan entre sí.
La simplicidad solo se percibe como contraste de la complejidad. Por eso es cada vez más relevante, porque la complejidad aumenta en todas las áreas de la vida. Lo ideal es encontrar un ritmo que alterne las dos situaciones extrayendo lo mejor de cada una.

Un anuncio sin sonido destaca en un mar de anuncios gritones; una página en blanco de un periódico sobresale entre tanta letra negra; un aparato con un sólo botón sorprende frente a otro con 10 botones; un producto con un sólo beneficio se entiende mejor que uno que pretende ser bueno en todo. Como algunas artes marciales, donde la estrategia consiste en apoyarse en la fuerza del contrincante, la simplicidad se apoya en complejidad de los demás.


6) Contexto, Lo que se encuentra en el límite de la simplicidad también es relevante.
No se puede simplificar algo solamente centrándose en sus aspectos definitorios; el contexto en el que se sitúa es clave para percibir su simplicidad. Demasiado enfoque es negativo, se ven sólo los árboles y no el bosque.

Al diseñar un producto, no sólo hay que hacerlo sencillo, potente y elegante, sino pensar en como se verá en los dos momentos de la verdad: en el lineal, entre otros muchos productos, y en casa del consumidor.


7) Emoción, Es preferible que haya más emociones a que haya menos.
Llenar de emoción un producto puede requerir alejarse de la simplicidad, para introducir nuevos niveles de significado. Hay personas que eligen productos sencillos y minimalistas, como algunos móviles o un iPod, y lo primero que hacen es personalizarlos, con pegatinas, fundas y todo tipo de accesorios. Dotar de sentimiento y emoción a un objeto es una característica muy humana.

Aunque parezca contradecir la ley de reducir, hay algunas cosas donde más es mejor que menos: más cariño, más amor, más intensidad, más significado.

En los últimos años, muchas campañas de marketing se han centrado casi exclusivamente en comunicar emociones, olvidando los aspectos racionales y contando historias extrañas y complejas. El reto es mantener el nivel emocional, aunándolo con un enfoque más simple y directo.


8) Confianza, Confiamos en la simplicidad.
Los aparatos y los servicios que utilizamos son cada vez más complejos, pero para nosotros es irrelevante: confiamos en que harán bien su misión, y los usamos sin tener ni idea de como funcionan. El paradigma es un coche, que casi todo el mundo sabe utilizar pero casi nadie sabe como funciona por dentro.

La simplicidad transmite confianza, y la confianza nos ahorra tiempo y esfuerzo. Las marcas son el paradigma de la confianza, y ese es su mayor valor. No deben confundirse en batallas de precios o perderse en innovaciones innecesarias.

Para las marcas de servicios, la confianza es especialmente relevante, ya que al no existir un objeto físico es lo único que garantiza la calidad al cliente. En gran consumo, las marcas que consigan aprender de un cliente y simplificar sus decisiones tendrán mucho ganado.


9) Fracaso, En algunos casos nunca es posible alcanzar la simplicidad.
A pesar de la enorme importancia que le otorgo a la simplicidad, en algunos casos la complejidad es necesaria. Hay temas demasiado difíciles, llenos de matices y detalles que no pueden ser explicados de un plumazo. Sin embargo, las personas rechazan cada vez más un enfoque complejo (leer un párrafo de más de 6 líneas, memorizar algo que no puedo aprender de un vistazo, etc.). El resultado es que la simplicidad se convierte en simplismo, se cae en lugares comunes y cualquier cosa se acaba pareciendo a muchas otras.

Cuando una marca tiene un producto suficientemente bueno y diferente, no debe tener miedo de explicar su complejidad, si es necesario para apreciar su valor. Hay que darle un voto de confianza a los consumidores, y tratarlos/tratarnos como seres inteligentes.


10) La Única, La simplicidad consiste en sustraer lo que es obvio y añadir lo específico.
Las diez leyes, resumidas en una. Cualquier campaña de marketing puede aprender de esta ley: eliminar textos absurdos y repetitivos, tópicos mencionados por todas las marcas, guiños que nadie entiende, etc; y añadir mensajes relevantes, que aporten valor al que los escucha, que diferencien de la competencia, que den una buena razón para levantarte de tu silla, ir a la tienda y comprar el producto.


Ejemplo: Una app para bajar en una tienda y que muestra las ofertas actuales que tiene, o algo relativo a comprar, no puede ocupar 50Mb, nadie la bajará usando 3G.
Para probar apps móviles en distintos dispositivos y tamaño de pantallas, tenemos:

Artículos originales:

Diseño para programadores


​Esto es una entrada que tiene que ver con la charla de "Diseño para programadores". No se trata más que de saber qué y cómo meter algo de diseño a nosotros los back end capaces de hacer sistemas de la leche pero sin diseño alguno.

Para empezar, se recomienda la herramienta Balsamiq mockups, con la que puedes hacer un diseño, imprimirlo, y poder discutir sobre él sobre papel. Tiene un efecto de mano alzada únicamente para dejar claro, en caso de estar con el cliente, que es un mockup.

Así, lo que tendremos que mirar desde un principio es tanto el color como el espacio:
Usemos la rueda cromática para ver qué colores combinan --> para elegir


más de un color, no tenemos más que trazar un triángulo equilátero, poner la punta del mismo sobre el color que queremos combinar, y nos dará dos colores.

Tip: Usar 3 colores --> 2 principales y 1 para darle algo de vida
  • Usemos la paleta, como se muetra en esta web
  • Tipografía, las familias se clasifican en:
    • Serif
    • Sans Serif
Con respecto a la tipografía, podemos usar:
  • Web Safe
  • Google fonts, esta además, mola mucho porque está libre de derechos, y tiene previsualizaciones estupendas.
Tip: Usar 2 tipografías, una con Serif y otra sin Serif
  • Consistencia, como por ejemplo, esta web
Podemos usar frameworks como Blueprint o 52framework

viernes, 18 de mayo de 2012

CSS Arrows Please

CSS Arrows Please es a las flechitas CSS lo que Spin.js a los spinners, :) Se trata de una web donde puedes crear flechitas CSS para poder incorporar fácilmente a tus hojas de estilos, perfectas para tooltips o mensajes emergentes.



Resto del artículo (fuente original)

Spin.js


Spin.js es una librería para crear animaciones de “cargando”, conocidos como spinners, sin requerir de imágenes ni estilos CSS adicionales.

Funciona perfectamente en todos los navegadores y es un script escrito en Javascript que puede añadirse fácilmente en cualquier sitio web, sin dependencias con jQuery o similares.

Spin.js

Resto del artículo (fuente original)

lunes, 14 de mayo de 2012

La Androteca

Enlaces para encontrar tutoriales de Android de forma rápida.

Resto del artículo (fuente original)

Juice UI (jQuery UI)

Juice UI is an open-source collection of WebForms components that brings jQuery UI Widgets to your project with ease.

Resto del artículo (fuente original)

CSS Checkbox Styles

A very nice collection of checkboxes made purely in CSS3 by me. The checkboxes you see above are nothing but the labels for their respective inputs while the checkbox inputs are hidden because these have a very limited CSS styling support. These checkboxes will work in all the major browsers except Internet Explorer 8 and below.

Resto del artículo (fuente original)

Traduce tus selectores css al lenguaje natural

El nombre SelectOracle suena a publicidad de un producto de base de datos, pero no lo es: se trata de una herramienta en línea que traduce selectores válidos a algo parecido al inglés habitual (está formado por las palabras “Selector” y “Oracle”).

Resto del artículo (fuente original)

A jQuery plugin to track page scroll depth

This is a jQuery plugin that tracks how far down the page a user has scrolled and then reports data back to Google Analytics using the GA Events API. The default behavior reports on the 25%, 50%, 75%, and 100% scroll marks. It also sends an initial "Baseline" event to use as a benchmark.


Resto del artículo (fuente original)

Crossfilter.js: Fast Multidimensional Filtering for Coordinated Views

Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser. Crossfilter supports extremely fast (<30ms) interaction with coordinated views, even with datasets containing a million or more records; we built it to power analytics for Square Register, allowing merchants to slice and dice their payment history fluidly.

Resto del artículo (fuente original)

Herramientas y metodologías para una mejor codificación

Optimization and organization can mean many things, but what does it mean to you? Doing things faster, better, or more efficient? Does it mean doing things more programmatically, simplistically, or using tools that are more suited to the job?

Resto del artículo (fuente original)

Responsive CSS that scales

CSS for a big site is different to CSS for a small, or even medium sized-site. The way CSS was intended, when you create a new piece of functionality for your website you simply write some new CSS to style it - easy.

Resto del artículo (fuente original)

Class Extensions Explained


One of the features added to Objective-C 2.0 is Class Extensions.

If you have feature requests or bugs, http://bugreport.apple.com/ is your friend!

Resto del artículo (fuente original)

Crea una Página Web en HTML5 y CSS

Es un vídeo de youtube

Fuente original

Cross-Browser Debugging CSS

I was helping Laura (a developer who works with me) learn about cross-browser debugging this week, which got me excited to share my process.

Resto del artículo (fuente original)

What JavaScript taught me about C# – Understanding ‘Access to modified closure’

If you’ve spent any time writing C# using a copy of ReSharper you will have come across the phrase ‘Access to modified closure’. It’s a well known warning and there are plenty of StackOverflow questions and blog posts about it.

Resto del artículo (fuente original)

Download Files in ASP.NET MVC 3 using Controller Action

Last week I was conducting a training for one of my clients on ASP.NET MVC 3 features. They had a file server, hosting various types of reports and were using an ASP.NET Web Form application as a front-end to download the reports on the client machine. Now since they planned on migrating the ASP.NET WebForms to ASP.NET MVC, they expected a similar functionality in MVC too.

Resto del artículo (fuente original)

Prototypes in JavaScript

When you define a function within JavaScript, it comes with a few pre-defined properties; one of these is the illusive prototype. In this article, I’ll detail what it is, and why you should use it in your projects.

Resto del artículo (fuente original)

Hebras, lambdas… y bugs

Cuando uno empieza a mezclar ciertas cosas tiene que andarse con bastante ojo para no liarla. La programación concurrente es una de esas cosas que, en cuanto requiere compartir información entre procesos/hebras (de la forma que sea), se convierte en algo que hay que tratar con cariño para evitar introducir condiciones de carrera[...]

Resto del artículo (fuente original)

Curso de Programación Andriod

Es un vídeo de youtube

Fuente original

Entendiendo los prototipos en JavaScript

Estoy preparando alguna presentación sobre JavaScript y, aunque intuía o sospechaba algunos aspectos sobre el modelo de orientación a objetos que se implementa en JavaScript, quería pisar terreno firme. El artículo que traduzco hoy me ha parecido muy esclarecedor, así que aquí lo comparto con vosotros, traducido a español.

Resto del artículo (fuente original)

How to customize MPVolumeView?

I have tried many methods to implement a regular UISlider and control the device volume, but it's all Native-C functions which results in many untraceable bugs.

Resto del artículo (fuente original)

jueves, 10 de mayo de 2012

How-To Pass Data from UITableView to Detail View Controller

This tutorial show you how to display detailed information in the iOS Detail View Controller by selecting an item in the UITableView. This tutorial will display a list of items in UITableView and when you select the item, the description and picture of the corresponding object will display in the Detail View Controller.

Resto del artículo (fuente original)

A crash course on Core Graphics

Core Graphics (CG), a.k.a. Quartz, is an old API included in both Cocoa and Cocoa Touch. It allows you to draw paths, shapes, shadows and gradients on the so-called graphic destinations or Graphic Contexts (we will come back later on this concept).

Resto del artículo (fuente original)

How-To Pass Data from UITableView to Detail View Controller

This tutorial show you how to display detailed information in the iOS Detail View Controller by selecting an item in the UITableView. This tutorial will display a list of items in UITableView and when you select the item, the description and picture of the corresponding object will display in the Detail View Controller.

Resto del artículo (fuente original)

Tutorial on How-To Increment and Decrement a Global Counter Variable

This is a tutorial to demonstrate how - to implement a globally visible integer counter to step through records of an Array. This tutorial shows how to code the IBAction button to increment and decrement a counter which can be used to retrieve an objectAtIndex in an Array;

Resto del artículo (fuente original)

How-To Create an IOS 5 Twitter App

With IOS 5 SDK Apple has introduced an API to allow a developer to incorporate a Twitter interface in their apps.The API offers two interfacing options: to get information from Twitter using Twitter extensive API by implementing the TWRequest class or sending tweets to Twitter by implementing the TWTweetComposeViewController to create a sheet.

Resto del artículo (fuente original)

How To Use the UIAlertView

The UIAlertView is much more that a simple alert popover, which it does very smartly. The UIAlertView can be enhanced to be used as an input form as well. You can add custom buttons and other design elements that direct users, display important information, capture information from users and more.

Resto del artículo (fuente original)

How-to Use Property List Files to Store Data in iPad or iPhone App

One of vital elements of any iOS application is the info.plist file. This graph based file contains important configuration settings for your application to run normally. For instance you set the icons your app requires in the plist file. The same can be said for the storyboard, an entry must be made to tell the application which element to load first.

Resto del artículo (fuente original)

How-To Develop an AVPlayer iPAD Application and AirPlay

AirPlay is not new, it was introduced with the IOS 4.3 version of the SDK. What is new is the enhancements and various other improvements that were made to the AirPlay API. One of new features that is really interesting is the abillity to interface content from your iOS on iPAD application with Apple TV 2 or mirror content from an iPad 2 device with a Apple TV 2.

Resto del artículo (fuente original)

miércoles, 9 de mayo de 2012

Web services en Objective-C con RestKit

Obtener la respuesta de un Web Service en Cocoa/Objective-C no es muy complicado. De hecho, podemos encontrar muchísimas librerías que nos puede ayudar con este cometido como wsdl2objc , JSONKit , csoap , sudzc... pero hay uno en especial que se diferencia del resto "RestKit".

Resto del artículo (fuente original)

Custom UINavigationController Back Button

A common thing in client apps i write is custom back images, mostly because the apps have a custom UINavigationBar image, so its good to have them themed together. You can see what this looks like for this tutorial:


Resto del artículo (fuente original)

jQuery Vector Maps

JQVMap is a jQuery plugin that renders Vector Maps.  It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9.  Legacy support for older versions of Internet Explorer 6-8 is provided via VML.

Resto del artículo (fuente original)

martes, 8 de mayo de 2012

How to Create an Video Player in jQuery, HTML5 & CSS3

In this tutorial we will code an Video Player from Impressionist UI by Vladimir Kudinov. We will code it with CSS3 for the styling and the “MediaElement.js” for the functionality. MediaElement.js is a HTML5 audio and video player that also works for older browsers using Flash and Silverlight to mimic the HTML5 MediaElement API.

Resto del artículo (fuente original)

lunes, 7 de mayo de 2012

Guía iOS: Desarrollando aplicaciones para dispositivos móviles

Esta guía aparte de su versión online está disponible para descargar en pdf o epub así como en versión de Kindle en Amazon incluyendo todos los ejemplos actualizados para iOS5.

Resto del artículo (fuente original)

Create an Interactive Map with jQuery and Dreamweaver—Positioning dots

In Create an Interactive Map with jQuery and Dreamweaver, Chris Converse shows how to design and create a rich interactive map for a web site using the open-source scripting library jQuery and the tools in Dreamweaver.

Resto del artículo (fuente original)

12 Most Popular jQuery Plugins of April 2012

Here we are again for another monthly round-up of the most popular jQuery plugins of April 2012, these 12 plugins will make you WOW!

Resto del artículo (fuente original)

jQuery Auto Suggest Plugin


​Auto Suggest is a lightweight (6kb minified) jQuery auto-complete plugin with lots of features.
The plugin features over 25 options and callbacks and is styled using only css which makes it one of the most customisable auto-complete plugins available.​

Resto del artículo (fuente original)

Background Process for a Heavy Task

This is the third part of the series of articles on accessing the web with your Android application and retrieving data. This article will focus on the right element you have to use in your Android application when you are 'doing a heavy task' like accessing the Internet.

Resto del artículo (fuente original)

GSON library and JSON Strings

This is the second part of the article series on Android code to connect your app to the Internet and retrieve data. In this article we will use libraries to treat JSON strings we receive from the server.

Resto del artículo (fuente original)

Tutorial gratis de programación en Javascript

Manuales de Javascript completos, para aprender todas las bases del lenguaje; Manuales destinados a introducir la Javascript, en el marco de la programación web; videotutoriales

Resto del artículo (fuente original)

10+1 Super Herramientas de Usabilidad y Optimización Web

A veces estamos tan concentrados en generar tráfico a nuestro site a través de diferentes estrategias como SEO, SEM o Social Media que nos olvidamos de analizar qué hacen los usuarios una vez llegan a nuestro site.

Resto del artículo (fuente original)

Visitor.js: personaliza tu sitio web para cada tipo de visitante

​Una de las cosas más importantes para un sitio web es conocer a sus visitantes para de esta manera poder brindarles la información, productos o servicios que les interesen. Pero como hacemos para averiguar algunos datos de los usuarios?

Resto del artículo (fuente original)

MailCheck.js: jQuery Plugin Suggesting Fixes for Commonly Mistyped Email Addresses

The jQuery plugin that suggests a right domain when your users misspell it in an email address.

Resto del artículo (fuente original)

Tutorial de Backbone.js


​Llevo un tiempo analizando y aprendiendo a trabajar con la librería Backbone.js y me parece una librería estupenda para desarrollar aplicaciones JavaScript. El mayor problema que estoy encontrando es la falta de tutoriales y documentación al respecto, y por ese motivo he decido crear un pequeño tutorial donde se analice el funcionamiento de la librería. Este tutorial lo iré desarrollando poco a poco en distintas entradas, intentando resaltar los aspectos más importantes y analizando cada uno de sus componentes.

Resto del artículo (fuente original)

Empezando con Web API


Son un par de links que sirven para empezar viendo qué y cómo se crean:
Para comenzar es bastante útil.

Recursos libres de UI para iOS

Who likes goodies?

Resto del artículo (fuente original)

LungoJS


El día 21 de diciembre, el gran Manu y yo asistimos a una demo del uso de un framework para aplicaciones web móviles.

Dicho framework es opensource, lo cual lo hace más interesante.
Se trata de una API Javascript para dispositivos móviles sin usar librerías. Hace uso de HTML5, CSS3, LESS y ooCSS.

  • Da acceso mediante ORM a WebSQL
  • Provée de eventos como TAP, SWIPE, TOUCHSTART, etc.,
  • Enrutar (o sea, usando el atributo data-target, puedes moverte mediante Javascript.
  • Sólo permite consumir servicios REST (json)
  • Se puede hacer uso de TEMPLATES, DATA-BINDING, SCROLLs...
Luego tiene acceso a componente físicos del teléfono (llamados Sugars)
  • Notificaciones con full-CSS3
  • Acceso al GPS (tanto la posición como la información geográfica)
  • Gestionar múltiples idiomas
  • Conectar a servicio sociales (Foursquare, Twitter, Google+, etc)
  • Calendario full-CSS3
Os recuerdo que estamos hablando de aplicaciones móviles.
Lo más acojonante, es que es un proyecto abierto que te puedes bajar desde GitHub y modificarlo a tu antojo.

Proyecto en GitHub

Plugin jQuery para navegación con móvil

Some people like to bitch and whine about a responsive web approach, others embrace it. I can’t blame them, they probably still use ajax to replace iframes…

Resto del artículo (fuente original)

Buenas prácticas con jQuery

Algunos consejos prácticos que os pueden ser de utilidad.

Resto del artículo (fuente original)

Fundamentos de jQuery

The purpose of this book is to provide an overview of the jQuery JavaScript library; when you're done with the book, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning. This book was designed as material to be used in a classroom setting, but you may find it useful for individual study.

Resto del artículo (fuente original)

20 plugins jQuery para trabajo con formularios HTML

Have you ever wondered about the forms that you have to fill up when you browsing through certain websites, or when you login to a certain online account? Personally, I find them to be a hassle most of the time and I see the deed as something necessary but never put much thought into it.

Resto del artículo (fuente original)

iOS design resources

Somebody on Twitter suggested that I make a list of all the resources mentioned in the presentation I posted yesterday. Great idea! Here goes.

Resto del artículo (fuente original)

42 cursos gratuitos sobre Informática dictados por reconocidas Universidades


​A continuación se dispone de una lista de 42 cursos gratis en línea compilados por el sitio Open Culture, sobre Informática y dictados por reconocidas universidades como Stanford, MIT, IIT, Harvard, Universidad de California en Berkeley, Notre Dame y otras.

Entre los cursos tenemos sobre Inteligencia Artificial, programación, redes, motores de búsquedas, Internet, sistemas operativos.

Los cursos están en distintos formatos.  Tienen podcasts en iTunes, vídeos en Youtube y también documentos y materiales del curso directamente desde el sitio web de las Universidades.

Diseño de Interfaces móviles


¿Qué es lo que un diseñador debe de saber?
“El diseño no sólo es que esté bonito, el diseño es saber sintetizar”.

Estudios demuestran que el 60% del éxito dentro del mundo del desarrollo se debe al diseño. A todos los presentes recomendó tomar en cuenta los siguientes puntos:
Preguntas clave al desarrollar aplicaciones móviles.
  • ¿Qué problema resuelve la aplicación?
  • ¿Qué otros productos realizan tarea similar?
  • ¿Pude interactuar con los usuarios como otras aplicaciones de éxitos?
  • ¿La forma en que funciona la hace única?
  • ¿Qué valor aporta a la audiencia?
Normas básicas en aplicaciones móviles.
  • Al utilizar una aplicación se tendrá que una tarea específica en mente.
  • Pueden estar en movimiento mientras se accede a la aplicación. Cualquier aplicación en diseño debe ser fácil de usar.
  • El área de interacción debe ser fácil de aprovechar.
  • Los diseños deben ser gráficamente ligeros, sobre todos por lo lentos de las conexiones a Internet.
  • El tamaño de los móviles hace que las soluciones gráficas deban ser optimizadas para diferentes resoluciones, sin que el usuario tenga que hacer ZOOM o SCROLL.
Planeación de la interfaz.
  • El diseño puede ser a partir de un producto del cliente.
  • Crear desde cero la aplicación.
“Hay que siempre tomar en cuenta al usuario final”.
Estudio de la interfaz.
  • Interfaz de usuario.
    • Familiarizarse con el móvil. Usarlo y entender cómo es que funciona.
    • Conceptualizar. Desarrollar conceptos de código y guías.
    • Producir. Diseñar con las directrices.
    • Finalizar. Finalizar, sintetizar y hacer que funcione.
  • Concepto de la interfaz. Estudiar las características físicas de la plataforma a diseñar.
  • Producción de la interfaz. Se comienza con la idea general y se va trabajando con referencias visuales. “Se inicializa como 1.0”
  • Trabajar con estándares de móviles. Cada plataforma tiene sus propias guías, en todo momento se deben tomar en cuenta.
Mejores prácticas de diseño para móviles.
Ejemplos:
  • Opciones simples y espacio en blanco.
  • Utilizar imágenes y videos dependiendo las posibilidades del usuario.
  • Prioridad en contenido.
  • Variedad de tamaños en las diferentes plataformas.
  • Estar al día con los cambios a cada momento del medio.
  • Diseñar.

Libros técnicos


He rescatado una de esas carpetas con enlaces, y me he encontrado con unos cuantos con descarga de libros de índole técnica, o sea, de los nuestros:
Hay un huevo, así que lo más cómodo, creo que es buscar en función de las necesidades.

Codemotion 2012


​Este pasando sabado 24 marzo, el gran Manu y el escribiente estuvieron en Madrid, más concretamente, en la Facultad de Informática de la Universidad Politécnica, asistiendo a un evento que trataba de reunir a desarrolladores (fijarse sino en el nombre del evento). y que se centraba en el desarrollo, sin importar la tecnología, el lenguaje o la metodología; un punto de encuentro para desarrolladores y comunidades, en el cual poder conocer las ultimas tendencias en desarrollo.
Sucesivas sesiones de trabajo, más de 1000 personas, sponsors desde Firefox, a Amazon, IBM, etc.
Los ponentes que he visto, desdeluego han hecho un gran trabajo, pero como siempre, el hecho de elegir un track entre 7, hace que te tengas que fiar de las referencias del mismo que se pueden leer gracias al hashtag asociado.
Otra cosa, curiosa más que nada, es que se rompió el mito de que este es un mundo mayoritariamente masculino, ya que se podía ver alguna mujer que otra, incluso dando charlas y eventos (ellas también pueden con esto).
Así, he aquí una serie de links de lo más variopintos, que seguramente iré actualizando:
Como curiosidad, comentar que se celebraba paralelamente en Roma otro evento igual, y que bueno, otra vez gracias a los hashtags, estoy pudiendo salvar alguna presentación:
Estos son enlaces genéricos sobre el evento en sí, así como opiniones y recopilaciones:

Useful Collection of iOS Tools and Resources for Designers

Apple App Store has just reached 25 billions downloads few days ago and it's still counting to hit even higher downloads. No doubt about it, iOS development has been a hot topic, a phenomenal industry that makes billion of dollars. A successful app requires a good planning.Wire-framing is one of the important processes in planning stage to understand the flow of your app and also to identify possible issue with the usability and potential technical issue. Sketching and prototyping able to let you understand your app better. If it's not your own project, it will be far easier to explain it to your clients as well.

iPhone Wireframe Templates for Sketching

Resto del artículo (fuente original)

Qué son las técnicas de Refactoring

Las técnicas de Refactoring fueron puestos en evidencia por Martin Fowler en su libro: Refactoring “Improving the desing of existing code”. Si tienen la suerte de poder llegar a leer ese libro no se lo olvidarán jamás. Estoy 100% convencido, que después de su lectura, la forma en que escribirán código será totalmente diferente. Voy a empezar explicando los conceptos básicos.

Resto del artículo (fuente original)

Navegador de contenido sensible con CSS3

Today we’ll show you how to create a content navigator with CSS only. The idea is to have several slides or content layers that we’ll show or hide using the :target pseudo-class. With CSS transitions we can make the slides appear in a fancy way. We’ll also make the whole thing responsive.

Resto del artículo (fuente original)

Autenticación y registro de formularios con HTML5 y CSS3

In this tutorial we are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class :target. We will style it using CSS3 and an icon font. The idea behind this demo is to show the user the login form and provide a link to “switch” to the registration form.

Resto del artículo (fuente original)

Introducción a npm (node.js)

Sin duda muchos de los artículos referentes a node.js tanto en español como en inglés van directamente relacionados a demostrar/explicar como crear aplicaciones como mejorar tu ritmo de trabajo o cuan concurrente y rápido es node.js.

Resto del artículo (fuente original)

Variables CSS

If you are a developer then you are very familiar with variables and they are probably one of your best friends. A variable is by definition a temporary storage which contains some known or unknown quantity or information, a value.

Resto del artículo (fuente original)

Conferencia: CSS y CSS3

CSS, u hojas de estilo en cascada, es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML. CSS3 está dividido en varios documentos separados, llamados módulos. Cada módulo añade funcionalidades a las definidas en CSS2, de manera que se preservan las anteriores para mantener la compatibilidad. En esta nueva conferencia de ADWE veremos las ventajas e inconvenientes de su uso a día de hoy, diferentes frameworks de trabajo, buenas compatibilidades con los diferentes navegadores, etc...

Resto del artículo (fuente original)

CSS3 signup form


If you’re about to launch a new web product or you just need to improve the user experience for an existing web form, then this tutorial is for you.

In this article you’ll find out how to design a clean and attractive CSS3 signup form.

Resto del artículo (fuente original)

JavaScript Style Guides And Beautifiers

Today we're going to explore JavaScript style guides, specifically: their importance, style guides worth reviewing and tools that can assist in automated code beautification or style enforcement.

Resto del artículo (fuente original)

jQuery maxlength en un textbox multilinea (textarea)

Si alguna vez hemos usado en asp.net los textbox multilinea nos habremos dado cuenta que la propiedad maxlength no funciona.

Resto del artículo (fuente original)

Números aleatorios en Objective-C

En muchas ocasiones necesitamos aportar un poco de azar a nuestras aplicaciones para dotarlas de realismo o aportar una experiencia de usuario más enriquecida. Hacer esto en Objective-C, para los que venimos de otros lenguajes como C, Java o Pascal no es complejo aunque para los nuevos les puede resultar complejo encontrar la solución ya que es un tema que se considera trivial y no suele estar como tema principal en los hilos de foros de programación.

Resto del artículo (fuente original)

20 CSS Codes to simplify your web styling tasks

Web styling is a very challenging task for designers, as they are expected to fulfill all the requirements of the clients. It becomes tougher when you are not familiar with a website styling and you are given that site to modify. Many designers have set their styling procedures to remember their work; these CSS codes snippets are very helpful for the other designers.

Resto del artículo (fuente original)

Creating a jQuery plugin with grunt

Vídeo explicativo, con enlace a Github incluído.

Resto del artículo (fuente original)

viernes, 4 de mayo de 2012

Validación en Javascript. Código muy limpio.

In a recent project I had to validate a form in Javascript, I've done it thousands of times, but during this one instance I had a stroke of ... oh my god I can really do this ... moment. Essentially it cleaned up about 40 lines of code down to about five or six, and ontop of that, you can easily set variables inside your operation or outside, its just beautiful:

Resto del artículo (fuente original)

Revisión de los Frameworks MVC de Javascript

Over the last several months I have been in a constant search for the perfect javascript MVC framework. Driven by a dire need for the right level of abstraction and features, I have tried out - some more cursorily than others - every framework I could get my hands on. Here lies a brief synopsis of each framework. Lastly, I share the framework which I ultimately decided on.

Resto del artículo (fuente original)

Foundation: diseñar sitios web para múltiples dispositivos móviles

An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

Resto del artículo (fuente original)

10 Plugins de Javascript para construir diagramas y gráficos

A plethora of amazing free Javascript plugins for plotting charts and graphs are now present online. Many good charting libraries are available. The rapid increase in the availability of this kind of plugins is because of the fact that people are no longer dependant on Flash. Modern browsers and sophisticated computing has made it easy to render live data. Advancement in various vector drawing technologies like VML, SVG and Canvas has also made it possible.

Resto del artículo (fuente original)

jQuery Slide Panel Plugin

The jQuery slidePanel Plugin lets you easily open slide panels from the left or right which contain either the default content or content loaded using Ajax.

Resto del artículo (fuente original)

Useful Collection of iOS Tools and Resources for Designers

Apple App Store has just reached 25 billions downloads few days ago and it's still counting to hit even higher downloads. No doubt about it, iOS development has been a hot topic, a phenomenal industry that makes billion of dollars. A successful app requires a good planning. Wire-framing is one of the important processes in planning stage to understand the flow of your app and also to identify possible issue with the usability and potential technical issue. Sketching and prototyping able to let you understand your app better. If it's not your own project, it will be far easier to explain it to your clients as well.

Resto del artículo (fuente original)

Scraping Web Pages With jQuery, Node.js and Jsdom

I always found it odd that accessing DOM elements with Ruby, or Python, wasn’t as easy as it was with jQuery. Many HTML parsing libraries employ Simple API for XML (SAX) that can handle extremely large XML documents, but is cumbersome and adds complexity. Other parsing libraries use XML Path Language (XPath), which is conceptually simpler than SAX, but still more of an effort than jQuery. I was pleasantly surprised to discover that it’s possible to use jQuery to parse web pages with Node.js. This is accomplished by using jsdom, “a javascript implementation of the W3C DOM”.

Resto del artículo (fuente original)

Javascript Garden. Documentación.

JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.

Resto del artículo (fuente original)

Chosen, plugin Javascript para jQuery (con enlace a GitHub)

Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.

Resto del artículo (fuente original)

RailwayJS - Node.js MVC framework

Railway is the Node.JS MVC framework based on ExpressJS, fully ExpressJS-compatible. It allows you to build web applications in a similar manner as in Ruby On Rails.

Resto del artículo (fuente original)

The Node Beginner Book

The aim of this document is to get you started with developing applications with Node.js, teaching you everything you need to know about "advanced" JavaScript along the way. It goes way beyond your typical "Hello World" tutorial.

Resto del artículo (fuente original)

Node.js manual


This manual consists of three different sections:

  • The Node.js API Reference documents the core Node.js modules
  • The Node.js Guide contains articles and code samples on coding in Node.js
  • The Javascript Reference contains doucmentation about the Javascript language


jueves, 3 de mayo de 2012

Introducción a la programación asíncrona con Node.js II

En la introducción a la programación asíncrona con Node.js II de hoy vamos a profundizar un poco más en este estupendo framework de sockets asíncronos para JavaScript del lado del servidor. El objetivo de hoy es sentar las bases que nos permitan saltar a temáticas más complejas en próximas entregas de la serie.

Resto del artículo (fuente original)

Introducción a la programación asíncrona con Node.js

Node.js es una librería y entorno de ejecución de E/S dirigida por eventos y por lo tanto asíncrona que se ejecuta sobre el intérprete de JavaScript creado por Google V8. Lo cierto es que está muy de moda aunque no es algo nuevo puesto que existen librerías como Twisted que hacen exactamente lo mismo pero si es cierto que es la primera basada en JavaScript y parece que tiene un gran rendimiento o eso dicen los benchmarks.

Resto del artículo (fuente original)