Diseño de páginas web

Personalizado para tu negocio

Sean cuales sean tus necesidades, creamos diseños a medida para tu negocio. Somos especialistas en diseño de páginas web.

Desarrollo web

En el servidor y en el cliente

Si tienes en mente un proyecto, ponte en contacto con nosotros. Somos especialistas en desarrollos en PHP y en HTML5.

Blog

Integrar el cargador de ficheros de WordPress

A menudo, cuando utilizamos un plugin para WordPress, vemos que podemos subir con él ficheros mediante el diálogo que trae el propio WordPress:

cargador_de_archivos_de_wordpress

¿Cómo podemos utilizarlo nosotros en nuestros plugins? Su uso es un poco enrevesado, y no está documentado en el Codex. La mayor parte de la magia se realiza mediante JavaScript.

A partir de ahora vamos a asumir que tienes experiencia en desarrollo sobre WordPress, y que tienes, igualmente, un plugin sobre el que añadir el cargador de ficheros.
Toggle

En primer lugar vamos a añadir a la página los ficheros JavaScript necesarios:

        public static function register_scripts() {
            wp_enqueue_script(
                'miplugin-media-uploader-script',
                WP_PLUGIN_URL . '/miplugin/js/media.uploader.js',
                array('jquery', 'media-upload', 'thickbox'));
        }

Declaramos una función estática en el objeto de nuestro plugin (puedes ponerlo también en funciones convencionales). Esta función utiliza wp_enqueue_script() para registrar y cargar un nuevo script JavaScript, que recibe tres parámetros:

  1. Nombre con el que registramos el fichero.
  2. Ruta al fichero JavaScript.
  3. Array de dependencias (si las tuviera).

A continuación creamos el fichero js/media.uploader.js con el siguiente contenido:

jQuery(document).on('ready', function () {
	jQuery('#tuboton').on('click',function (e) {
		e.preventDefault();
		tb_show('', 'media-upload.php?type=image&TB_iframe=true&flash=0');
    });

    window.send_to_editor = function (html) {
		var imgurl = jQuery('img',html).attr('src');
		// Haz lo que desees con la ruta de la imagen
		tb_remove();
    };
});

Paso a paso: Cuando se cargue el documento, hacemos dos cosas:

  1. Al hacer clic en el botón con id “tuboton”, se mostrará el diálogo que nos permite subir una imagen. Lo hacemos mediante tb_show(). Fíjate que indicamos en el parámetro “type” el valor “image”. Podría también haber sido “video” o “file” entre otros.
  2. Definimos la función window.send_to_editor, que por defecto recibe un texto html. Aquí hacemos un pequeño hack: este popup está pensado para insertar imágenes a un post (es decir, enviarlas al editor), y lo hace en forma de código HTML (opcionalmente con un elemento <a>). Nuestro plugin no está interesado en el código HTML, sino en la ruta de la imagen. ¿Cómo la conseguimos? No es lo más eficiente, pero sí lo más rápido: utilizando jQuery. Finalmente, y tras apuntar la ruta de la imagen, eliminamos la ventana.

¿Y cómo utilizamos la imagen? Tras obtener su ruta en imagurl, podemos hacer con ella lo que deseemos: por ejemplo, añadirla a un input oculto, mostrar una miniatura, completar la ruta en un campo de texto, etc.

Esperamos que esta miniguía te haya sido de utilidad para integrar el cargador de ficheros de WordPress en tus propios plugins.

Algoritmos: subarray máximo

Hoy vamos a hablar de desarrollo web en particular. Ni de nada relacionado con las últimas tecnologías de programación. Vamos a estudiar varios algoritmos de cálculo del subarray máximo, en mi opinión, muy bonitos. Pero primero planteemos el problema:

Se trata del problema del subarray máximo: Tenemos un array numérico que incluye valores tanto positivos como negativos. Queremos saber cuál es su subarray, de elementos contiguos, cuya suma de sus elementos nos da un valor máximo. Por ejemplo, supongamos el siguiente array:

[-2, 1, -3, 4, -1, 2, 1, -5, 4]

Su subarray máximo sería (en índices basados en cero) el que va de la posición 3 a la 6:

[4, -1, 2, 1]

Cuyo resultado nos da 6.

Tómate un minuto para esbozar sobre papel un algoritmo que resuelva este problema. O al menos trata de esbozarlo mentalmente. Cuando hayas terminado, continúa leyendo.

Lo más probable es que hayas llegado a una solución de complejidad cuadrática O(n²), o dicho mal y rápido: un bucle dentro de otro bucle. Vamos a ver una posible solución de este tipo en PHP:

function max_subarray($array) {
   $max = 0;

   for ($i = 0; $i < count($array); $i++) {
      $sum = 0;
      for ($j = $i; $j < count($array); $j++) {
         $sum += $array[$j];
         if ($sum > $max) {
            $max = $sum;
         }
      }
   }
   return $max;
}

Es decir, es una solución de fuerza bruta con la que calculamos todas las sumas posibles de todos los subarrays que podemos extraer del array principal. Este algoritmo está bien. Es sencillo, eficiente, su resultado es siempre correcto; pero los hay mejores.

Podemos resolverlo mediante un enfoque recursivo mediante la técnica de divide-y-vencerás, obteniendo una complejidad del tipo O(n log n). Pero, ¿y si te digo que lo puedes resolver mediante un algoritmo lineal de O(n)? ¿Te animas a demostrarte a ti mismo lo buen programador que eres? Pista: la clave está en las sumas inferiores a cero.

Vamos a ver la solución:

function max_subarray2($A) {
   $mejorHastaAhora = $mejorDeAhora = 0;

   for ($i = 0; $i<count($A); $i++) {
      $mejorDeAhora += $A[$i];
      if ($mejorDeAhora < 0) {
         $mejorDeAhora = 0;
      }
      if ($mejorDeAhora > $mejorHastaAhora) {
         $mejorHastaAhora = $mejorDeAhora;
      }
   }

   return $mejorHastaAhora;
}

Tenemos dos contadores:

  1. mejorDeAhora, que lleva la suma parcial en curso.
  2. mejorDeTodos, que almacena el mejor resultado de todos los calculados. Si mejorDeAhora es superior a mejorDeTodos, actualizamos este último.

Como decíamos, la clave está en las sumas inferiores a cero: cada vez que una suma parcial baje de cero, reiniciamos el sumatorio “mejorDeAhora”: Recuerda que una de las precondiciones era que hubiera tanto números positivos como negativos, luego alguna suma de uno o más elementos debe ser superior a cero.

Si además hacemos uso de la función max() disponible en la mayoría de lenguajes de programación, nos quedaría así de sencillo:

function max_subarray3($A) {
   $mejor = $sumatorio = 0;
   for ($i = 0; $i<count($A); $i++) {
      $sumatorio = max($sumatorio+$A[$i], 0);
      $mejor = max($sumatorio, $mejor);
   }
   return $mejor;
}

Y así es como, mediante un poco de ingenio, hemos pasado de tener una función de orden cuadrático a orden lineal. Puedes hacerte una idea del impacto en rendimiento que puede tener esto en grandes volúmenes de datos.

¡Esperamos que hayas disfrutado de este post!

oEmbed y WordPress: URL vitaminadas

¿Conoces oEmbed? Muy posiblemente sí, aunque no lo sepas. Se trata de una tecnología que permite generar automáticamente un fragmento de código HTML enriquecido a partir de una URL. Por ejemplo, desde un vínculo a un vídeo de YouTube obtendríamos el código HTML completo del reproductor para visualizar el vídeo. O con el link a un tweet, que obtendríamos un snippet enriquecido, con el contenido del tweet, el avatar del usuario, botones de FAV y RT, etc. No estamos hablando de una biblioteca de programación que detecte servicios a partir de las URL y genere unilateralmente cada fragmento HTML. Se trata de un protocolo que implementan los propios servicios, como YouTube o Twitter. Existen implementaciones de oEmbed para los principales lenguajes de programación de desarrollo web, incluso para jQuery por si quisieras probarlo sin complicaciones.

Para muestra, un botón (el código HTML de este tweet se ha generado automáticamente por el motor oEmbed de Twitter):

oEmbed en WordPress

Desde la versión 2.9, WordPress ofrece la posibilidad de añadir Embeds (Incrustados), la herramienta que nos permite añadir un post y que con solo copiar la URL de, por ejemplo, un vídeo de Vimeo, este aparezca automáticamente. Por debajo funciona con el protocolo oEmbed.

Existen dos formas de utilizarlo:

  1. Si tenemos habilitada la opción Incrustados en Ajutes > Multimedia, podremos usarlo automáticamente. La única condición es que la URL se encuentre en solitario en su propia línea, y no enlace a ningún sitio.
  2. Si no tenemos habilitada la opción, podemos usarlo igualmente utilizando el shortcode , que permite igualmente añadir un ancho y alto máximo (por ejemplo http://example.com/service?v=123).

Wordpress aplica una política de whitelist para permitir servicios. Es decir, de manera predeterminada no está disponible cualquiera, sino que debe estar en la lista de autorizados. Entre estos servicios disponibles tenemos YouTube, Vimeo, DailyMotion, Flickr, PollDaddy, Twitter, Instagram o SlideShare.

¡Esperamos que esta miniguía os haya sido de utilidad!

Flexbox, las nuevas interfaces flexibles de CSS3

Flexbox es la palabreja con la que se denomina al flexible box layout, que podríamos traducir como maquetación de cajas flexibles. ¿Y qué se esconde tras esto? Ni más ni menos que una nueva forma de maquetar interfaces mediantes CSS3.

Webshims: Polyfill para JavaScript

Webshims Lib es una biblioteca polyfill modular centrada en implementaciones preciosas de las características ya estables de HTML5, de manera que los desarrolladores puedan escribir código moderno, interoperable y robusto para todos los navegadores. Funciona sobre jQuery y Modernizr.

¿Pero qué es un polyfill?

Es un término acuñado por Remy Sharp que define una porción de código (o un plugin) que proporciona la base tecnológica que tú, como programador, esperas que ofrezca nativamente el navegador.

Por ejemplo, el propio Remy Sharp colgó un gist con un ejemplo de polyfill que permite que navegadores antiguos ofrezcan soporte a localStorage y a sessionStorage mediante las cookies. Fue a partir de este gist desde el que hace dos años comenzó el desarrollo de Webshims Lib.

Webshims Lib

Actualmente funciona sobre la mayoría de navegadores (incluso IE6), y su funcionamiento es vergonzosamente sencillo:

<!-- dependencies: jQuery + Modernizr with yepnope -->
<script src="js/jquery-1.7.1.js"></script>
<script src="js/modernizr-yepnope-custom.js"></script>

<!-- reference the base script -->
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
   // implement all unsupported features || call polyfill
   // before DOM-Ready to implement everything as soon and
   // as fast as possible
   $.webshims.polyfill();

   // or load only specific features you need
   // $.webshims.polyfill('forms json-storage');

   $(function(){
      //use all implemented API-features on DOM-ready
   });
</script>

Características:

wp_mail DB: Plugin para WordPress

A todos nos encanta WordPress, el popular CMS que utilizamos tanto para blogs como para páginas de propósito general. Tal como funciona out of the box es una verdadera delicia. Y si creemos que le falta algo, se lo añadimos mediante plugins. Este fue el caso cuando pensamos en qué ocurre con aquellos emails que envía WordPress mediante la función wp_mail, y que por alguna razón no llegan a su destino. ¿Y si algún cliente ha completado el formulario de contacto de tu web, y por alguna razón no te llega el mail? ¿Cómo podríamos enterarnos?

Por eso, hemos creado un pequeño plugin que almacene esta información en la base de datos, y permita consultarla desde el Escritorio de WordPress:

Vista de los correos enviados mediante wp_mail

Podrás localizar todos los emails enviados por WordPress con wp_mail() en el menú Herramientas, bajo la opción “Sent emails”.

Descargar

Apache + PHP + MySQL en Mac OS X

En esta guía vamos a ver cómo podemos tener en nuestro equipo un entorno de desarrollo MAMP, para poder testear las páginas con las que trabajamos. En concreto vamos a ver cómo hacer esto sobre OS X Lion.

MAMP: Pasos para su instalación

  1. Habilitar PHP en Apache.
  2. Configurar hosts virtuales.
  3. Iniciar el sevidor web Apache.
  4. Instalar MySQL.
  5. Instalar phpmyadmin.

Como ves, no vamos a instalar ni PHP ni Apache. Esto es porque OS X Lion lo trae ya instalado. Solo nos tenemos que preocupar por integrarlo y por añadir un sistema gestor de bases de datos. ¡Vamos allá!

1. Habilitar PHP en Apache

Como ya sabes, OS X Lion trae incorporado PHP. Para comprobarlo, vamos a abrir terminal y vamos a ejecutar:

$ php -v

PHP 5.3.15 with Suhosin-Patch (cli) (built: Jul 31 2012 14:49:18)
 Copyright (c) 1997-2012 The PHP Group
 Zend Engine v2.3.0, Copyright (c) 1998-2012 Zend Technologies

Lo cual nos indica que está instalado PHP 5.3.15 con el parche de seguridad Suhosin.

Para habilitarlo en Apache vamos a editar el fichero /etc/apache2/httpd.conf, y vamos a descomentar la siguiente línea:

#LoadModule php5_module libexec/apache2/libphp5.so

Y con esto ya hemos habilitado PHP en Apache!

2. Configurar hosts virtuales

De manera predeterminada Apache trae los siguientes hosts:

  • http://localhost/~tuusuario/ – Con el contenido de la carpeta /Users/tuusuario/Web/.
  • http://localhost/ – Con el contenido de la carpeta /Library/WebServer/Documents/.

En este ejemplo vamos a alojar cada nuevo host virtual en una carpeta dentro de /Library/WebServer/Documents/. Por tanto, vamos a otorgar permisos de escritura a nuestro usuario:

sudo chmod g+w /Library/WebServer/Documents/

Y ahora vamos a habilitar los hosts virtuales en Apache. Editamos de nuevo el fichero /etc/apache2/httpd.conf y descomentamos la siguiente línea:

Include /private/etc/apache2/extra/httpd-vhosts.conf

Y con esto ya tendríamos nuestro entorno preparado para alojar hosts virtuales.

Host virtual de ejemplo

Vamos a crear un ejemplo. Un host llamado pagina01.local. Lo primero será mapear ese nombre a nuestro host. Con esto logramos que haya un nombre único que apunte a nuestro equipo. Para ello editamos como administradores el fichero /etc/hosts y añadimos la siguiente línea:

127.0.0.1 pagina01.local

Ahora creamos la carpeta donde se alojará la página:

mkdir /Library/WebServer/Documents/pagina01.local/

Y añadimos a la carpeta que acabamos de crear un fichero index.php, que es el archivo predeterminado, con el siguiente contenido:

<?php phpinfo(); ?>

Por último, vamos indicar a Apache que hemos creado un host virtual, dónde lo hemos creado, con qué nombre se accederá, etc. Editamos el fichero /etc/apache2/extra/httpd-vhosts.conf y añadimos lo siguiente:

<VirtualHost *:80>
 ServerAdmin admin@example.com
 DocumentRoot "/Library/WebServer/Documents/pagina01.local"
 ServerName pagina01.local
 ServerAlias *.pagina01.local
 ErrorLog "/private/var/log/apache2/pagina01.local-error_log"
 CustomLog "/private/var/log/apache2/pagina01.local-access_log" common
 </VirtualHost>

Y con esto ya está preparado para funcionar nuestro nuevo host virtual. En cuanto iniciemos el servidor web, podremos consultar la página.

3. Iniciar el servidor web Apache

Por defecto Mac OS X no arranca el servidor web. Para hacerlo simplemente tendremos que acceder a las preferencias del sistema, y en el apartado “Compartir” marcamos la opción “Compartir Web”:

Ventana de habilitación de compartir webs en OS X

¡Y ya tenemos iniciado el servidor web! Puedes probar que ha funcionado accediendo a http://pagina01.local/. Si todo ha ido bien hasta ahora, te saldrá la configuración de PHP.

4. Instalar MySQL

Los equipos de escritorio no incorporan un servidor de bases de datos. Al tratarse de un estándar, vamos a instalar MySQL.

Accedemos a http://dev.mysql.com/downloads/mysql/ y descargamos la versión DMG. Cuando lo hayamos descargado, instalaremos los tres ficheros:

MySQL en el Finder

Una vez instalado, arrancamos el servidor de bases de datos, yendo a las Preferencias del Sistema, accediendo a MySQL y pulsando sobre “Start MySQL Server”:

Preferencias MySQL en entornos MAMP

Ahora vamos a introducir la contraseña del usuario root. Lo podemos hacer o bien así:

$ /usr/local/mysql/bin/mysqladmin -u root password 'contraseña'

O bien siguiendo los pasos del siguiente comando:

$ sudo /usr/local/mysql/bin/mysql_secure_installation

Y con esto ya tenemos instalado, iniciado y preparado nuestro servidor de bases de datos.

5. Instalar phpMyAdmin

PhpMyAdmin es el frontend MySQL más popular. Además funciona en PHP, por lo que nos viene de perlas para poner a prueba nuestra recién creada instalación del entorno MAMP.

Podemos instalarlo en un nuevo virtual host. Para ello tan solo debemos seguir los pasos del apartado en que creamos el virtual host pagina01.local, y crear uno llamado, por ejemplo, phpmyadmin.local

Descargamos la última versión desde http://www.phpmyadmin.net/home_page/downloads.php y la descomprimimos en /Library/WebServer/Documents/phpmyadmin.local/

Por último, copiamos el fichero config.sample.inc.php a config.inc.php, y sustituimos esta línea:

$cfg['Servers'][$i]['host'] = 'localhot';

por esta:

$cfg['Servers'][$i]['host'] = '127.0.0.1';

¡Y ya lo tenemos! Si accedemos a http://phpmyadmin.local/ con nuestro usuario root, y la contraseña que establecimos al instalar MySQL, tendremos acceso al frontend phpMyAdmin.

A partir de aquí, ya podrás crear nuevos hosts virtuales y sus bases de datos a medida que los necesites para poder trabajar sobre tu entorno de desarrollo local.

¡Disfruta de tu entorno MAMP!

Ámbitos en eventos JavaScript

Últimamente mi buen amigo Álex me está animando a que dé una oportunidad a CoffeeScript, el preprocesador de JavaScript que más está triunfando. Hablando de todo un poco, hemos comentado que JavaScript tiene algunas peculiaridades que, cuando uno empieza a trabajar con él, le descoloca un poco. Por ejemplo, el hecho de que su orientación a objetos esté basada en prototipos. Otra de esas peculiaridades que han salido a relucir es el cómo se manejan los ámbitos en eventos JavaScript. O dicho de otra forma: ¿Dónde debería apuntar this cuando estamos en la función manejadora de un evento?

Sublime Text 2: Por dónde empezar

¿Por qué aprender Sublime Text 2? En el mundo del desarrollo web hay realmente muy pocas herramientas de verdad imprescindibles. De entre todas ellas, probablemente la más importante sea la aplicación en la que tecleamos el código. Si bien podemos utilizar un editor de texto completamente espartano, como pueda ser el bloc de notas, en nuestro día a día solemos emplear herramientas con un mayor número de características que nos asistan en el desarrollo. Por ejemplo, conexión SFTP/FTP, reconocimiento de sintaxis, autocompletado, plugins, o gestión de proyectos. En Windows una herramienta muy popular durante mucho tiempo ha sido Notepad++. En entornos Mac algunas herramientas son TextMate o Coda. En Linux, yo al menos, siempre he utilizado Kate, aunque una opción igualmente popular es Gedit.

echo “Hola mundo!”;

¡Bienvenidos a esta nueva etapa de gnoma!

Quizás hayas llegado hasta este post buscando gnoma en Google. Puede que te hayas puesto en contacto con nosotros por asuntos de trabajo y quieras saber más sobre quiénes somos. O quizás hayas llegado tratando de acceder a otro blog. Voy a tratar de explicarte dónde estás.

Antes de nada, deja que me presente: Mi nombre es Jesús Ruiz-Ayúcar, y desde hace 5 años ejerzo como profesional del desarrollo web. Los tres últimos años he estado como freelance trabajando principalmente sobre mi nombre. Pero también registré un nombre comercial a principios de 2010 -gnoma- con el que poder identificar mis trabajos. Tanto con mi propio nombre, como con la marca gnoma, he vendido proyectos hechos no solo por mí, sino en colaboración con otras empresas o profesionales freelance, en especial con mi hermana: Olalla Ruiz-Ayúcar, que desde hace más de 8 años se dedica profesionalmente al diseño y la maquetación de páginas web (además de otras muchas cosas). Juntos, iniciamos ahora esta web en la que darnos a conocer y exponer nuestros trabajos.

Ahora que sabes quiénes somos y a qué nos dedicamos, quizás te preguntes por qué este proyecto necesita un post de bienvenida. Hasta ahora, cada uno de los que formamos parte de gnoma, veníamos utilizando en la mayoría de los casos nuestros datos personales (nombre, página web, perfiles en redes sociales) como marca. A partir de ahora, en el sector del diseño y desarrollo web, promocionaremos juntos nuestro trabajo:

  • Web: en http://gnoma.es.
  • Redes sociales. Somos @genomaweb en Twitter. También en Facebook.
  • Correo electrónico. Como dirección de propósito general, puedes contactarnos en hola@gnoma.es.
  • Impresos. Todos los impresos continuan con la guía de estilo de gnoma.
  • Teléfono. El teléfono de contacto continua siendo el mismo.

Respecto a esta página, el apartado principal y absoluto protagonista es y será el blog. En él, se publicarán artículos de distintos tipos: tutoriales, reviews, guías, etc. Te invitamos a que te suscribas a nuestro RSS! :-)

Además del blog, hay 4 apartados más:

  • Servicios – Enumerando aquellos servicios y tecnologías en los que estamos capacitados para trabajar.
  • Portfolio – Con una selección de proyectos realizados en los últimos 2 años.
  • Contactar – Formulario de contacto estándar.
  • Conónocenos – Donde podrás saber un poco más del equipo detrás de Gnoma.

Te invitamos a que navegues por nuestra página. Si algo te gusta, o te disgusta, o si tienes alguna sugerencia, o alguna crítica, estaremos encantados de escucharla.

¡Bienvenido!