Ir a contenido
Está usando una versión antigua de su navegador. Este sitio web no está preparado para su visualización en navegadores obsoletos.
Por favor, por su seguridad, instale un navegador más actualizado y seguro.

Navegador Internet Explorer 8  Navegador Google Chrome  Navegador Mozilla Firefox
 

blog

07 sep

Fantástica extensión para HTML para tu IDE

0 comentarios Programación , Web

Los que nos dedicamos al desarrollo web tendemos a usar IDEs pero acabamos tecleando mucho código HTML. ¿No hay alguna forma de hacer más cómodo el escribir HTML y CSS? Sí, hay una forma, y es espectacular: Zen Coding.

 

Zen Coding es una extensión para los IDEs y editores de código más conocidos:  Aptana/Eclipse, Visual Studio, Netbeans, Coda, TextMate, Komodo, Notepad++, Dreamweaver, Ultraedit, BBEdit... que se basa en la expansión de expresiones para autocompletar código HTML, XML y XSL. Basta con instalar el plugin en nuestro IDE favorito y escribir la estructura que deseamos usando una sintaxis muy similar a los selectores CSS. Así, para escribir toda la estructura de un menú en HTML bastaría con escribir:

 

div#dvContainer>div#dvHeader>div.dvUser+div#dvMenu>ul#ulMenu>li.liMenuItem*4

 

Lo que, una vez expandido, da como resultado:

 

<div id="dvContainer">
    <div id="dvHeader">
        <div class="dvUser"></div>
        <div id="dvMenu">
            <ul id="ulMenu">
                <li class="liMenuItem"></li>
                <li class="liMenuItem"></li>
                <li class="liMenuItem"></li>
                <li class="liMenuItem"></li>
            </ul>
        </div>
    </div>
</div>

 

Cualquier desarrollador web puede escribir selectores CSS a gran velocidad, así que, ¿por qué no dejar de teclear docenas de etiquetas HTML y que ese trabajo lo haga nuestro IDE?

 

Las posibilidades de Zen Coding son inmensas, es lo suficientemente flexible como para escribir casi cualquier estructura que necesitemos:

 

div#dvContainer>div#dvHeader>(div.dvUser+div#dvMenu>ul#ulMenu>li.liMenuItem*5)+div#dvContent>form#fLogin[name=loginform method=post action]>fieldset>(label[for=login]{Usuario}+input[type=tex name=login])+(label[for=pass]{Password}+input[type=tex name=pass])+input[type=submit]

 

Y por supuesto, no sólo para HTML, ya que podemos generar cualquier estructura XML:

 

libraries>library#id$*5>address[type]+tlf[type]

 

Así que, baja el plugin para tu IDE e instálalo, y deja de teclear etiquetas eternamente; deja que tu IDE haga el trabajo sucio.

 



30 ago

Imágenes de relleno para diseños y bocetos

0 comentarios Programación , Web , Diseño

Cuando estamos haciendo un boceto de web o diseñando una nueva web pero aún no tenemos material del cliente solemos usar imágenes de stock para rellenar los huecos, lo que se llaman placeholder images. Pero hay una forma más cómoda: usar servicios de imágenes automáticas, basta con poner el src de la img apuntando a uno de estos servicios para tener imágenes aleatorias acordes a nuestro diseño. Conozco dos servicios así:

 

Lorem Pixum

 

Con un nombre que recuerda al conocido Lorem Ipsum, Lorem Pixum nos devuelve una imagen aleatoria del tamaño indicado, con la ventaja de que podemos pedir además una temática concreta. Por ejemplo:

 

src="http://lorempixum.com/400/200/sports/1/Texto de la imagen"

 

 

La sintaxis de la ULR es:

 

http://lorempixum.com/ANCHO/ALTO/CATEGORÍA/ID/TEXTO 

 

siendo todos los parámetros opcionales. En categorías, podemos elegir entre abstract, animals, city, food, nightlife, fashion, people, nature, sports, technics y transport.

 

Placehold

 

La otra opción es más simple pero también muy útil. Placehold.it nos permite insertar una imagen plana con el tamaño escrito en ella. Si Lorem Pixum es ideal para diseño terminados a falta de material por parte del cliente, Placehold.it es perfecto para bocetos. Basta con llamar a la URL pasándole el tamaño deseado:

 

src="http://placehold.it/350x309"

 

 

La sintaxis de la URL es:

 

http://placehold.it/TAMAÑO/COLORFONDO/COLORTEXTO.TIPO&text=TEXTO

 

Siendo todos opcionales excepto el tamaño. El tamaño puede ser de la forma ANCHOXALTO o sólo ANCHO, en cuyo caso la imagen será un cuadrado. Los colores de fondo y texto van en hexadecimal, por ejemplo, 99FF99. El texto debe ponerse siempre al final de la URL y los espacios cambiarse por el símbolo '+'. El tipo puede ser .jpg, .gif o .png (por defecto es GIF) y puede ponerse detrás de cualquier otro parámetro aunque por claridad es mejor ponerlo al final. Un ejemplo más elaborado sería:

 

src="http://placehold.it/430x285/99FF99/22CC00.jpg&text=Probando+Placehold.it"

 

 

Conclusión

 

Con estos dos servicios de imágenes de relleno podemos acelerar el trabajo con bocetos y diseños de webs al no tener que andar buscando imágenes, recortando... ya que nos permiten insertar imágenes de cualquier tamaño sin salir de nuestro editor de código favorito.

 

 



28 jul

Congelando la versión de una aplicación Rails

0 comentarios how-to , Programación , RoR

El ecosistema de las aplicaciones Ruby on Rails es bastante extenso, y puede generar problemas a la hora de mover la aplicación al servidor de producción o al actualizar el servidor. Rails ofrece una posibilidad: congelar la versión de una aplicación.

 

La base es muy simple: en una aplicación Rails, se usará la versión definida en RAILS_GEM_VERSION en config/environment.rb... salvo en el caso de que en el directorio /vendor de la aplicación exista un directorio /vendor/rails con el código del framework, en cuyo caso se usará este. Así, da igual la versión de Rails que exista en el servidor, la aplicación usará la versión incluida en su directorio /vendor.

 

¿Cómo congelamos la versión?

 


Seguir leyendo


23 jul

MySQL sobre Linux, a fondo

0 comentarios Linux , how-to , Programación , BBDD , MySQL

Una impresionante presentación de Yoshinori Matsunobu, uno de los mayores expertos en BBDD (Principal Infrastructure Architect en DeNA, MySQL Lead Consultant en MySQL/Oracle/Sun, Oracle ACE Director...) explicando todo lo que se necesita saber para la administración de bases de datos MySQL bajo Linux: SSD/HDD y cómo elegir el sistema de ficheros más adecuado, elegir la CPU más adecuada, el tamaño de swap, la configuración de red... aquí está el sumario de la presentación.

 

Estas son las diapositivas de un tutorial de 3 horas que impartió en la MySQL Conference and Expo 2011.

 

También se pueden descargar las diapositivas en formato PDF.



09 jun

Liberado Simply Cover

0 comentarios Programación , Software , OpenSource

Simply Cover Simply Cover es sencilla una aplicación para ofrecer una portada para la web de un pequeño negocio durante el tiempo que tarda en publicar su web, o para que pequeños negocios que sólo requieren el dominio para email pero no van a tener web puedan mostrar algo a los usuarios.

 

En ambos casos el usuario sientre frustración al visitar una web que pone "En construcción" o peor aún, ver una web en blanco o un mensaje del proveedor, y esto genera un rechazo y mala imagen para la pequeña empresa o negocio. Con Simply Cover pequeños negocios, tiendas locales... pueden presentar una pequeña web con descripción, fotos, formulario de contacto, etc.

 

Además ofrece un sencillo gestor de contenidos para administrar la portada web. Sólo requiere 2MB de espacio de alojamiento y soporte para PHP, ni siquiera requiere base de datos, de forma que puede instalarse incluso en los planes de alojamiento más baratos (o en planes de sólo email).

 

Lo he liberado con una licencia GNU AFFERO GENERAL PUBLIC LICENSE. Más información en la sección sobre Simply Cover o directamente en el repositorio Simply Cover en GitHub.



15 feb

He liberado jquery.maxlen

0 comentarios Programación , Javascript , OpenSource

Maxlen es un plugin para jQuery para tener un control adecuado y flexible sobre el número máximo de caracteres en un textarea.

 

Lo he liberado con una licencia MIT X11. Más información en la sección sobre Maxlen o directamente en el repositorio Maxlen en Github.



01 feb

Código PHP más cómodo con namespaces

0 comentarios how-to , Programación , PHP

En la versión 5.3 de PHP se añadió soporte para una de las características típicas de otros lenguajes como C++ o Java: los namespaces.

 

Aparte de su uso habitual, los namespaces en PHP ofrecen una funcionalidad que puede ser usada a modo de pequeño truco para reducir los nombres de clase demasiado largos.

 

Antes de los namespaces las librerías, frameworks... debían asegurarse de no pisar los nombres de clases o funciones de otras librerías que el usuario estuviese usando, por lo que solían añadir prefijos. Por ejemplo, Worpress añade un 'WP_' a sus clases y funciones. Esto en ocasiones genera nombres excesivamente largos rozando el ridículo, siendo un ejemplo clásico el de la clase CaseInsensitive del motor Lucene en el Zend Framework: Zend_Search_Lucene_Analysis_Analyzer_Common_Text_CaseInsensitive.

 

El pequeño truco consiste en usar los namespaces como accesos directos para acortar el nombre de las clases que nos interesen:

 

 

use Zend_Search_Lucene_Analysis_Analyzer_Common_Text_CaseInsensitive as CaseInsensitive;
$icase = new CaseInsensitive();

 

 

Un pequeño truco muy útil para hacer la vida más sencilla, que resulta obvio en cuanto te lo cuentan. Se puede ampliar información sobre los namespaces con un artículo de introducción a ello en: How to use PHP namespaces de Craig Buckler.



15 ene

Base de datos de países

0 comentarios Programación , BBDD , MySQL

En muchas situaciones necesitamos una base de datos de países, con su código y nombre. Usando MySQL es muy sencillo conseguirlo, ya que una de las bases de datos de ejemplo de MySQL es, precisamente, una base de datos de países, que incluye tres tablas:

 

  • Country: información de países, con código, nombre local del país, código internacional, continente, región, superficie, capital...
  • City: información de algunas ciudades de cada país. No están todas las de cada país.
  • CountryLanguage: idiomas de cada país, oficiales y co-oficiales, indicando el porcentaje de cada uno.

 

Para usarla basta con descargar el script SQL de http://dev.mysql.com/doc/index-other.html. Hay dos scripts preparados, uno para MyIsam (http://downloads.mysql.com/docs/world.sql.gz) y otro para InnoDB (http://downloads.mysql.com/docs/world_innodb.sql.gz) que son idénticos salvo que las tablas se crean con el motor especificado y en el caso de InnoDB con integridad referencial (y las claves ajenas necesarias).

 

Tras descargar el archivo y descomprimirlo, basta con conectarnos a MySQL e importar las tablas:

 

 

$ mysql -u root -p
Enter password:
mysql> source /path/al/archivo/world_innodb.sql

 

 

Estos datos tienen copyright de la Oficina de Estadística de Finlandia: http://tilastokeskus.fi/tup/kvportaali/index_en.html.

 

No se adaptará a todas las posibles situaciones donde necesitemos países e idiomas, pero para muchos casos, como mostrar un desplegable de países, nos vale de sobra.

 



Creative Commons License Esta web http://alvaroremesal.net , su contenido, texto e imágenes está licenciado bajo una Licencia Creative Commons Reconocimiento-Compartir bajo la misma licencia 3.0 España.

2012 - Álvaro Remesal Royo   Avisos legales

logo-acms