Diseño Plano (Flat Design) como tendencia web

Categoria : Diseño Web, Informatica · No Comentario · Por Aug 13th, 2013

Flat Design / Diseño Plano

 

Sin dudas el presente año 2013 han salido/ganado campo muchas tendencias web como ser el diseño responsivo, encabezados o menú estáticos, desarrollo para dispositivos con la tecnología “retina display”, transparencias con CSS, el uso de los códigos QR en las secciones de contacto, paginas minimalistas, desplazamiento vertical infinito (Infinite Scrolling), animaciones con CSS3, imágenes de fondo con “ruido gausiano” (blur), diseño plano (flat design) entre otras.

En la siguiente nota hablare un poco sobre el diseño plano, mejor conocido como “Flat Design“, el cual ha tomado auge este año en el desarrollo de sitios y aplicaciones web. Primero definiré lo que es el diseño plano y la diferencia con el termino skeumorfismo.

MVC: Modelo Vista Controlador

Categoria : Diseño Web, Informatica, Programacion · No Comentario · Por Mar 27th, 2012

Después de disfrutar de una deliciosa taza de cafe y escuchar un poco de musica Reggae, me dispongo a escribir sobre el Modelo Vista Controlador (MVC), cuyos orígenes datan desde 1979 cuando Trygve Reenskaug implemento esta metodologia en Xerox PARC. Desde que inicie como programador web he utilizado este patron de arquitectura para desarrollar aplicaciones, ya que posee multiples ventajas las cual mencionare a medida vaya explicando sobre el MVC.

Que es Modelo Vista Controlador?

Es un patrón de arquitectura de software que separa los datos de una aplicación, la interfaz de usuario, y la lógica de negocio en tres componentes distintos. El patrón de llamada y retorno MVC (según CMU), muy común en el desarrollo de aplicaciones web, donde la vista actua como un documento HTML y el código que provee de datos dinámicos a la página. El modelo es el Sistema de Gestión de Base de Datos (Oracle, MySQL, entre otros.) y la Lógica de negocio, y el controlador es el responsable de recibir los eventos de entrada desde la vista.

Elementos que involucran el Modelo Vista Controlador:

Como pueden visualizar en la imagen de esta entrada, existen tres elementos que componen el Modelo Vista Controlador, a continuación una breve definición.

  • Modelo: Esta es la representación específica de la información con la cual el sistema opera. En resumen, el modelo se limita a lo relativo de la vista y su controlador facilitando las presentaciones visuales complejas. El sistema también puede operar con más datos no relativos a la presentación, haciendo uso integrado de otras lógicas de negocio y de datos afines con el sistema modelado.
  • Vista: Este presenta el modelo en un formato adecuado para interactuar, usualmente la interfaz de usuario.
  • Controlador: Este responde a eventos, usualmente acciones del usuario, e invoca peticiones al modelo y, probablemente, a la vista.

Se utiliza Actualmente?

Claro, por cierto muy de moda, a continuación enumerare algunos frameworks que utilizan esta metodología:

Lenguaje Licencia Nombre
Objective C Apple Cocoa
Ruby MIT Ruby on Rails
Ruby MIT Merb
Ruby MIT Ramaze
Java Apache Grails
Java GPL Interface Java Objects
Java LGPL Framework Dinámica
Java Apache Struts
Java Apache Beehive
Java Apache Spring
Java Apache Tapestry
Java Apache Aurora
Java Apache JavaServerFaces
JavaScript GPLv3 ExtJS 4
Perl GPL Mojolicious
Perl GPL Catalyst
Perl GPL CGI::Application
Perl GPL Gantry Framework
Perl GPL Jifty
Perl GPL Maypole
Perl GPL OpenInteract2
Perl Comercial PageKit
Perl GPL Cyclone 3
Perl GPL CGI::Builder
PHP GPL Self Framework ( php5, MVC, ORM, Templates, I18N, Multiples DB)
PHP LGPL ZanPHP
PHP LGPL Tlalokes
PHP GPL SiaMVC
PHP LGPL Agavi
PHP BSD Zend Framework
PHP MIT CakePHP
PHP GNU/GPL KumbiaPHP
PHP MIT Symfony
PHP MIT QCodo
PHP GNU/GPL CodeIgniter
PHP BSD Kohana
PHP MPL 1.1 PHP4ECore
PHP BSD PRADO
PHP GNU FlavorPHP
PHP Apache 2.0 Yupp PHP Framework
PHP BSD Yii PHP Framework
PHP GPL Logick PHP Framework
PHP GPL Osezno PHP Framework
PHP MIT (sPHPf) Simple PHP Framework
Python ZPL Zope3
Python Varias Turbogears
Python GPL Web2py
Python BSD Pylons
Python BSD Django
.NET Castle Project MonoRail
.NET Apache Spring .NET
.NET Apache Maverick .NET
.NET MS-PL ASP.NET MVC
.NET Microsoft Patterns & Practices User Interface Process (UIP) Application Block
AS3 Adobe Open Source Cairngorm
AS3 y Flex MIT License CycleFramework

Beneficios del Modelo Vista Controlador

  • Facil
  • Flexible
  • Separación de elementos (Datos–>Implementación–>Interfaz)
  • Ahorro de recurso tiempo, muy vital en una organización.
  • Reutilizar de código.

Por ultimo te comento que si tienes amplios conocimientos en el area, puedes aventurarte a crear tu propio framework basado en el Modelo Vista Controlador, como en el siguiente video (ingles), por cierto la persona que esta desarrollando el framework esta utilizando el lenguaje PHP, tu puedes utilizar el lenguaje que te sientas mas comodo:

Fuente: Wikipedia

Less: Un framework para hojas de estilo de forma dinámica

Categoria : Diseño Web, Lenguajes de Programación · No Comentario · Por Mar 17th, 2012

A medida va transcurriendo el tiempo, muchas tecnologías, frameworks y lenguajes de programación van quedando obsoletos, y a la vez van surgiendo soluciones que logran ahorrar recursos dentro de una organización. Hoy hablare sobre la “evolución” de CSS (Cascading Style Sheets). Muchos programadores FrontEnd (Los que programan la parte visual en una aplicación…) les gustaría ahorrarse tiempo escribiendo hojas de estilo (CSS), esto se puede lograr mediante el framework Less.

Definamos Less

Te comento que Less extiende a CSS con un comportamiento dinámico, gracias a variables, mixins, operaciones y funciones lo gusta a todo programador. Un aspecto muy importante es que Less se ejecuta tanto en el lado del navegador (Chrome, Firefox y Safari) como en el lado del servidor con Node.js y Rhino.

Incluyendo Less en nuestros proyectos

Client-side (Lado del navegador)

Incluye tu hoja de estilo antes que la librería de Less de la siguiente forma:
[cc lang=”css” tab_size=”2″ lines=”40″] [/cc]
Luego incluye la librería de Less, la cual puedes descarga Aca ambas lineas dentro de la etiqueta <head>. Un regla de Less, es incluir tu(s) hoja(s) de estilo antes del llamado de Less.
[cc lang=”javascript” tab_size=”2″ lines=”40″]


[/cc]

Client-side (Lado del servidor)

La forma mas rápida de instalar Less en tu servidor es utilizando la utilidad npm de la siguiente forma:
[cc lang=”html” tab_size=”2″ lines=”40″]
$ npm install less
[/cc]

¿Como es la sintaxis de Less?

Como mencione anteriormente, Less incluye elementos que nos ahorran al momento de codificar una hoja de estilo (CSS), su sintaxis es bastante fácil, veamos un ejemplo:
[cc lang=”css” tab_size=”2″ lines=”40″]
// CSS TRADICIONAL

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

// EJEMPLO CON LESS

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}
[/cc]

Mas ejemplos sobre Less Aqui…

Algunos tutoriales de Less (Ingles)

Sitio Oficial: Lesscss.org
Descargar: Less

Elaborar presentaciones en el navegador gracias a Impress.js

Categoria : Diseño Web, Informatica, Javascript, Programacion · No Comentario · Por Feb 27th, 2012

Librerías, librerías y mas librerías señores y señoras, esta vez se trata de una libreria javascript llamada Impress.js que nos permitira crear presentaciones con transiciones y otro tipos de efectos muy “cool”, combinando tecnologia CSS3.

Es importante aclarar que obtendras excelentes resultados en navegadores modernos, en cuanto para navegadores mas antiguos, el creador de la libreria se ha preocupado y ha agreagado un poco de compatibilidad, muchos usuarios opinan que el rendimiento de esta libreria en navegadores modernos es mejor que en los navegadores antiguos, y esto es logico.

Es compatible con los siguientes navegadores: Ultimas versiones de Chrome/Chromium, Safari 5.1, Firefox 10, agregando algunos elementos de HTML5 funciona con Internet Explorer 10, no funciona con Opera ya que este navegador no soporta los elementos “transform” del CSS3.

 

Compatibilidad con navegadores moviles (Telefonos y Tabletas)

Originalmente esta libreria no fue creada para dispositivos móviles, esto debido al hardware. Pero para el caso de las tabletas, nos comenta el creador de la libreria que existen algunas que si ejecutan la libreria sin ningún tipo de problema, entre esas tabletas que han pasado la prueba son el iPad de Apple y el Blackberry Playbook de Rim.

Demostracion de Impress.js

Si quieres hacer la demostracion, prueba haciendo click Aqui y luego presiona la tecla espaciadora (La mas grande del teclado =) ).

Otros Ejemplos usando la libreria Impress.js

CSS 3D transforms (Presentación)
What the Heck is Responsive Web Design (Presentación)
Data center virtualization with Wakame-VDC (Presentación)

lioshi.com (Sitio Web)
nice-shots.de (Sitio Web)
alingham.com (Sitio Web)

Sitio Oficial: Impress.js

Github como plataforma de desarrollo colaborativo

Categoria : Diseño Web, Informatica, Programacion · No Comentario · Por Feb 13th, 2012

El dia de hoy hablare sobre un servicio muy “de moda” entre la comunidad de desarrolladores, hablo de Github, el cual es un servicio que nos permite alojar diferentes tipos de proyectos usando el control de versiones Git y logrando el objetivo de trabajo colaborativo. Este servicio fue lanzado en febrero del 2008, pero desde el 2010 opera como Github Inc.

Un poco sobre Git…

Profundizando un poco mas sobre el control de versiones Git, te comento que es un software multi-plataforma (Windows, Mac Os y Linux) gratis y de código abierto, que fue creado por el popular Linus Torvalds, en un inicio se penso como un motor de bajo nivel sobre el cual otros pudieran escribir la interfaz de usuario o front end como Cogito o StGIT. A medida fueron creciendo las aportaciones de los programadores se convirtió en un software muy veloz y eficiente para el control de versiones.

Actualmente algunos de los proyectos que utilizan Git como herramienta son: Linux Kernel, Perl, Eclipse, Gnome, KDE, Qt, Ruby on Rails, Android, PostgreSQL, Debian entre otros.

El servicio de hospedaje Github

Ahora entrare un poco mas en detalles sobre el servicio Github, algunos de los proyectos de código abierto que están usando esta plataforma son: jQuery, reddit, Sparkle, curl, Ruby on Rails, node.js, ClickToFlash, Erlang/OTP, CakePHP, Redis, y entre otros. Cuenta con funciones de redes sociales como feeds, podrás seguir a otras personas, podrás aportar con ideas mediante un comentario en los diferentes proyectos.

Grandes Ventajas

Ademas de tener copia de respaldo de nuestros proyectos en la nube, podemos disfrutar de las siguientes ventajas:

  • Un Wiki
  • Gestion de Usuarios (Control sobre los usuarios involucrados en cada proyecto)
  • Seguimiento de problemas en nuestros proyectos (Si el proyecto es publico los usuarios podrán crear tickets)
  • Comparación de código (Visualizar cambios entre versiones)

En cuanto a Precios

Como mencionan en su sitio web, si tu proyecto es código abierto (open source), Github no te cobra nada absolutamente, esto significa que debe ser publico. En cambio si es privado cuenta con una serie de paquetes, su plan basico va desde 5 repositorios privados y un colaborador por 7 dólares al mes, y se extiende hasta 125 repositorios privados y equipos de personas ilimitados por 200 dólares al mes. A continuación la tabla de planes:


Sitio Oficial: www.Github.com

jsPerf: Midiendo el rendimiento de tu Javascript

Categoria : Diseño Web, Informatica, Javascript · No Comentario · Por Feb 5th, 2012

En la web existen un gran número de herramientas que ayudan a monitorear el rendimiento de nuestras aplicaciones, una de esas “web-tools” se denomina jsPerf, el cual nos permite crear comparativas entre código midiendo el rendimiento de Javascript y a la vez posibilidad de compartir dichos resultados.

A continuación más detalles sobre jsPerf…

¿Que es un API?

Es tiempo de hablar un poco sobre un término que en los últimos años se ha vuelto muy popular, me refiero a las API, cuyas siglas significan (Application Programming Interface). La primera vez que utilicé un API fue hace 8 años en un proyecto de inventarios, en resumen era una aplicación de escritorio (desktop) el cual me permitía usar las funcionalidades nativas del sistema operativo como por ejemplo “Guardar como”, “Abrir” entre otras opciones. Dicho concepto se expandió y hoy en día ya contamos con API para desarrollar aplicaciones web y móviles.

Coldfusion: Lenguaje de Programacion

Categoria : Diseño Web, Informatica, Programacion, Software · (3) Comentarios · Por Jan 17th, 2012

Hace aproximadamente 11 meses me mude a vivir a la ciudad de San Pedro Sula, Honduras a trabajar con una empresa del extranjero, fue un verdadero reto para mi por muchos factores, el mas importante aprender un nuevo lenguaje de programación denominado Coldfusion de Adobe, a continuación pretendo definir y darte una idea sobre este lenguaje de programación.

¿Que es Coldfusion?

Pues como nos explica Wikipedia, Coldfusion es un servidor de aplicaciones y un lenguaje de programación (Si dos cosas en uno) usado para desarrollar aplicaciones de Internet, generalmente sitios web generados dinámicamente. Para que tengas idea, es un lenguaje similar a ASP, JSP o PHP. Corre en forma concurrente con la mayoría de los servidores web de Windows, Mac OS X, Linux y Solaris. El servidor de aplicaciones web de ColdFusion trabaja con el servidor HTTP para procesar peticiones de páginas web. Cada vez que se solicita una página de ColdFusion, el servidor de aplicaciones ColdFusion ejecuta el guion o programa contenido en la página.

Actualmente lo he usadoSe adapta muy bien con gestores de bases de datos como MySybase, Oracle, MySQL, SQL Server, o Access). Una de las cosas que me gusta del lenguaje es que tiene “2 modos” de programar, la primera es la forma natural del lenguaje mediante etiquetas similar a HTML, y la segunda de forma de “Script” similar a Java y Javascript, para programadores con mayor experiencia o que quieren seguir con la metodologia de los lenguajes antes mencionados. Igual que en HTML, las etiquetas (tags) tienen atributos, dichos atributos variaran dependiendo de cada etiqueta, Adobe posee buena documentación en linea sobre dichas etiquetas, aqui puedes ver un listado de las etiquetas por defecto del lenguaje, pero te comento que si deseas desarrollar una etiqueta para que realize una accion en especifico lo puedes lograr gracias a los Custom Tags (Etiquetas Desarrolladas por el Usuario).

ColdFusion también tiene tags para COM, Corbay Appletsy Servletsde Java. ColdFusion fue diseñado para desarrollar sitios complejos y de alto tráfico. ColdFusion está diseñado para correr en máquinas multi-procesador, y permite construir sitios que pueden correr en clusters de servidores. Es un lenguaje que se ejecuta en el servidor web, hablando en otras palabras el código de ColdFusion se ejecutaría primero que tu código de Javascript. Coldfusion tiene problemas de inestabilidad y es capaz de soportar poca carga, este problema sólo puede solucionarse poniendo gran cantidad de servidores web balanceados entre sí.

Google declara la guerra a los "Copiadores de Contenido"

Categoria : Diseño Web, Informatica · (1) Comentario · Por Feb 26th, 2011

Google modifica algoritmo de busquedasGoogle ha anunciado un cambio importante en sus algoritmos de búsqueda, tal vez imperceptible para muchos usuarios, pero que debe mejorar drásticamente la calidad de los resultados de búsqueda de Google.

Con este paso, Google se dirige a las explotaciones de contenido – un nombre común para los sitios de baja calidad cuyo principal objetivo es atraer tráfico de búsqueda por apilamiento (sobre todo) el contenido de inútil, por lo general mediante la producción de grandes cantidades de texto de baja calidad o copiándolo de sitios web con el contenido original.

Google no entró en detalles del cambio, pero se dice que afectará a la clasificación de los muchos sitios en la web. Esta actualización está diseñada para reducir el ranking de los sitios de baja calidad, sitios que son de bajo valor agregado para los usuarios, copiar contenidos de otros sitios web o sitios que no son sólo muy útil. Al mismo tiempo, proporcionará una mejor clasificación de los sitios de alta calidad, osea los sitios con contenido original.

Esto es muy importante para los verdaderos generadores de contenido, estaremos pendientes de mas información al respecto.

Vía: Google Blog y Mashable

qrTip: Plugin de jQuery para desplegar códigos QR sobre enlaces

Categoria : Diseño Web, Informatica, Javascript, Programacion · (2) Comentarios · Por Feb 13th, 2011

qrTip es un excelente plugin de jQuery que podremos implementar en nuestros proyectos web, consiste en mostrar códigos QR sobre los enlaces que nosotros queramos en nuestro sitio web, como lo muestra la imagen.

Con este plugin se puede proporcionar un enlace a una versión móvil de tu sitio web, por lo que la gente pudiera escanear el código QR mediante sus teléfonos móviles. Aún no es compatible con todos los navegadores y dispositivos.

Les aconsejo visitar la fuente original, para obtener detalles más específicos sobre los archivos y librerías a utilizar: kovshenin.com

Si desean crear códigos QR (Quick Response) o conocer un poco más sobre dicha tecnología les recomiendo visitar el siguiente enlace: mayadigital.com/2010/10/27/likify-te-permite-crear-un-qr-code-para-paginas-en-facebook/

Demo: kovshenin