Diferencias de visión entre el programador y los usuarios
Escrito por CristianDeluxe | Archivado en Programación, diseño web
(Sin Valorar)
Loading ...Me ha hecho mucha gracia esto, me ha gustado tanto que incluso la he traducido.
Seguro que todos los que programamos, nos sentiremos identificados con esta imagen:
Â
Diferencias de visión entre el programador y los usuarios
Aparte de ser divertido es incluso educativo.
Muchas veces nos centramos en muchos elementos que el usuario final no va a valorar, el usuario no quiere conocer que hay “detrás” de la aplicación, sino en lo que es capaz de hacer, o digamos de mostrarle.Â
 La imagen original la he sacado del blog Gran Angular.
Tags: diferencias, humor, programador, usuario, visión
Guardando ajustes para nuestra aplicación con CakePHP
Escrito por CristianDeluxe | Archivado en diseño web
(1 valoraciones, media: 5.00 de 5) Loading ...Si te gusta desarrollar páginas aplicaciones web con PHP y aún no usas ningún framework de los varios que hay, no se a qué estás esperando, no voy a exponer aquà las múltiples ventajas de usar un framework, o cuál es mejor, todo se lo puedes preguntar a Google.
Yo personalmente uso CakePHP, y algunas veces, necesitamos guardar los ajustes de nuestra aplicación, por ejemplo: claves API, emails, datos de contacto, etc..
Navegando por The Bakery (de entrada casi obligatoria para cualquier desarrollador de CakePHP) me encontré con este artÃculo escrito por Cameron Perry en el que explicaba cómo guardar en nuestra base de datos todos los ajustes en un array serializado.
Es casi lo que necesito, pero no me gusta la idea de tenerlo todo en un array, es un atraso, teniendo bases de datos potentÃsimas como es MySQL, por lo que me puse manos a la obra y modifiqué el trabajo de Cameron.
La idea básicamente es la misma, pero en vez de guardar todos los ajustes juntos en una columna voy a guardar cada uno por separado, esto nos permitirá que los admins de nuestra aplicación puedan cambiar los ajustes como ellos quieran.
Vamos a ponernos manos a la obra.
1) Crear nuestra tabla en la base de datos
El primer paso obviamente es crear la tabla donde se almacenarán todos los ajustes, podemos hacerlo con una simple consulta como esta:
-
`id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
-
`key` VARCHAR(48) NOT NULL,
-
`value` TEXT,
-
PRIMARY KEY (`id`),
-
UNIQUE KEY `key` (`key`)
-
)
2) Crear el modelo, el controlador y las vistas
Utilizando “cake bake” creamos rápidamente el modelo, el controlador y las vistas.
Una vez creado, modifica el archivo de modelo, en este caso “setting.php” (normalmente está en la carpeta “app/models”), con lo siguiente:
-
var $name = 'Setting';
-
var $key = 'Opc'; // Se puede cambiar por lo que quieras
-
var $custom_settings = array();
-
-
// Recibe los datos de configuración de la base de datos
-
function getcfg(){
-
// Consigue los datos de configuración de la base de datos y los mete en un array
-
$cfgs = $this->find('all', array('fields'=>array('id','key','value')));
-
-
// Si no es un array salimos
-
if( !is_array($cfgs) ) return;
-
-
// Procesamos cada configuración
-
foreach($cfgs as $cfg) {
-
-
// Crea el array para usarlo más tarde
-
$data_array = array(
-
'id' => $cfg['Setting']['id'],
-
'key' => $cfg['Setting']['key'],
-
'value' => $cfg['Setting']['value'] );
-
$this->custom_settings[] = $data_array;
-
-
// Escrebe el array en la configuración de CakePHP
-
Configure::write($this->key . '.' . $cfg['Setting']['key'], $cfg['Setting']['value']);
-
}
-
}
-
}
3) Modificar el archivo AppController
Bien, lo siguiente es modificar el archivo AppController, si aún no lo has creado ¿a qué esperas?, debe estar en “app/app_controller.php”.
-
-
var $uses = array('Setting');
-
-
function beforeFilter(){
-
// Procesa nuestras configuraciones de la base de datos
-
$this->Setting->getcfg();
-
}
-
}
4) ¡Usarlo!
Pues ya está todo listo, ahora podemos usar nuestros ajustes en cualquier sitio, un ejemplo de cómo hacerlo es:
-
SI has cambiado el valor de la variable key en el paso 2 debes cambiarlo aquà también, por ejemplo, si has definido $key como "MyApp" tienes que leer la configuración asÃ:
-
<pre lang="php">echo "Mi configuración" . Configure::read('MyApp.title'); //devuelve 'Mi pedazo de página';
Como ves CakePHP te deja hacer lo que tengas en la mente, y nunca está de más trabajar sobre el código que otra persona ha realizado, es uno de los principios fundamentales del open source, coger algo que ya está hecho y adaptarlo a sus necesidades. ¡Tú también puedes hacer lo mismo!
Checkboxes y botones de radio con estilo con jQuery
Escrito por CristianDeluxe | Archivado en diseño web
(Sin Valorar) Loading ...Si quieres cambiar tus viejos y aburridos checkboxes y botones de radio por otros con mucho más estilo puedes probar con esta extensión para jQuery.
El funcionamiento es muy simple:
-
$("input").checkize({
-
checked:"images/checked.gif",
-
checked_down:"images/checked_down.gif",
-
checked_hover:"images/checked_hover.gif",
-
-
unchecked:"images/unchecked.gif",
-
unchecked_down:"images/unchecked_down.gif",
-
unchecked_hover:"images/unchecked_hover.gif"
-
});
-
});
Puedes ver una demo funcionando aquÃ: http://totmacher.eu/jquery/radio/demo/
Fuente en modo texto: http://totmacher.eu/jquery/radio/src/jquery.checkize.js
Descargar código de ejemplo + fuente en un .zip: http://totmacher.eu/jquery/radio_v0.2.zip
Fuente:Â Love and Theft
Tags: botones, buttons, Checkboxes, extension, formularios, jquery, radio
Imágenes de calidad para tus proyectos cada semana
Escrito por CristianDeluxe | Archivado en Diseño Gráfico
(Sin Valorar) Loading ...La web Templates.com es conocida por aquellos que buscan material para diferentes productos de diseño, tienen modelos en 3D, ilustraciones, iconos y plantillas para sitios web.Â
Ahora anuncian en su blog, que cada semana ofrecerán una imágen de calidad totalmente gratis para tus proyectos, pero sólo estará disponible durante esa semana, en cuanto termine volverá a ser de pago, asà que aprovecha y visita la sección cada semana para obtener una nueva imagen gratuita.Â
Hay que registrarse para obtener la imágen, pero el registro es completamente gratuito.
La imágen que ofrecen esta semana (sin marcas de agua) es:
Â
Imagen Gratuita de la semana en Template.com
Â
Enlaces:
Templates.com
VÃa:
WebResourcesDepot
Tags: diseño, gratis, imagenes, templates
Escritorio de Leopard creado con jQuery
Escrito por CristianDeluxe | Archivado en diseño web
(Sin Valorar) Loading ...Â
Escritorio de Leopard realizado con JQuery
Â
Los chicos de Nettuts nos traen un completo tutorial que nos muestra cómo crear el escritorio de Leopard con jQuery, una librerÃa de javascript, sin duda una muestra más de que cada vez las webs se van acercando más a las aplicaciones de escritorio.Â
Ya se ha hecho algo parecido pero en vez de emular a Mac emula a Windows y está creada con la librerÃa Ext JS.
Podéis ver una demo pulsando en el siguiente enlace:
Demo de escritorio de Leopard creado con jQuery
Y el tutorial lo podéis encontrar pulsando aquÃ.
Enlaces:
Tags: ajax, javascript, jquery, leopard, mac, windows
Nueva versión: Deluxe CSV2LMX Converter 2.0.1
Escrito por CristianDeluxe | Archivado en Móviles
(Sin Valorar) Loading ...He tenido que lanzar una nueva versión del programa ya que ocurrÃan algunos fallos al abrir archivos CSV con comentarios, lo que ocasionaba archivos LMX de 0Kb.
Puedes descargártela de aquÃ: Deluxe CSV2LMX Converter
Tags: 6110, Converter, CSV2LMX, Deluxe, gps, landmark, nokia, poi, radares, route
Deluxe CSV2LMX Converter v0.1 Beta
Escrito por CristianDeluxe | Archivado en Móviles
(Sin Valorar) Loading ...Edit: Nueva versión 0.2.
He decido separar en dos páginas el contenido de este post:
Deluxe CSV2LMX Converter (Información sobre el programa y actualizaciones)
Tutorial Radares para 6110 con Route 66 (Tutorial)
¡¡Deja tus sugerencias en los comentarios y veremos a ver que se puede hacer!!
Tags: 6110, gps, Móviles, nokia, poi, radares, route 66, symbian
Consejos a la hora de enfrentarse a un tema nuevo
Escrito por CristianDeluxe | Archivado en Producción musical
(Sin Valorar) Loading ...Este es un tutorial que creé hace tiempo, está en algunos foros, pero creo que es buena idea tenerlo aquÃ, no es muy avanzado pero te servirá para poder tener una buena base a la hora de componer en tu PC.
Es esencial tener un ritmo de trabajo adecuado para poder crear la música que queramos sin tener que preocuparnos por el apartado técnico, ni de buscar los sonidos adecuados para no perder lo que algunos artistas denominan el “flow” (sentimiento, inspiración).
Lo primero de todo es elegir un programa con el que nos sintamos a gusto trabajando, para aquellas personas que aun se encuentren indecisas les recomiendo que para empezar a componer música en un PC utilicen FL Studio, ya que es uno de los más fáciles de manejar consiguiendo resultados a los pocos minutos de usar el programa, pero para este tutorial nos vale cualquiera.
A continuación deberemos surtirnos de samples (Sonidos) adecuados para el tema que queramos componer.
Lo siguiente que deberemos hacer es una especie de “boceto” del tema con unos pocos instrumentos principales (como pueden ser un piano, un bajo o si estas haciendo otro tipo de música un sintetizador cualquiera podrÃa valerte. También necesitaremos unos samples de percusiones (bombos, cajas, charles, etc..)) para poder definir el ritmo, sin preocuparte de que esos sonidos sean los que tu quieres realmente, cuando tengás más avanzado el tema será el momento de cambiar samples y sintes, ahora lo que debemos hacer estructurar como queremos que sea el tema.
Hay que tener en cuenta que un tema suele contener:
Introducción: Normalmente 4 u 8 compases, es importante que la introducción enganche al oyente animándole a seguir escuchando nuestro tema.
Estrofa: Normalmente van delante del estribillo y suelen durar entre 8 y 16 compases, suele tener menos instrumentos que el estribillo o la introducción (aunque depende del gusto del compositor)
Estribillo: La parte mágica de la canción, son esas frases que se nos quedan grabadas en el cerebro y no podemos evitar tararear, normalmente en este punto la música tiende a subir, suele durar entre 8 y 16 compases
Final: El final de la canción también importa, puedes acabar con un simple fade-out (El volumen se baja progresivamente) o con un final apoteósico tu eliges.
Podemos combinar estas partes como queramos:
INTRO – ESTROFA – ESTROFA – ESTRIBILLO – ESTROFA – ESTRIBILLO – FINAL
INTRO – ESTRIBILLO – ESTROFA – ESTRIBILLO – ESTROFA – ESTRIBILLO – ESTRIBILLO – FINAL
ETC…
Un fallo que tienen muchas personas es que empiezan a añadir efectos a los instrumentos desde el principio del tema, lo recomendable es que hagas el boceto de tu tema con los instrumentos sin efectos (reverbs, delays, etc…) y los introduzcas cuando el tema este avanzado, e incluso antes de la masterización. Esto aparte de ahorrarte CPU (procesamiento de tu PC) también ayuda a pulir más el tema sin apoyarte en los efectos.
Con los efectos se debe seguir una regla: si se nota el efecto, es que tiene demasiado (almenos que utilicemos el efecto como instrumento principal). No conviene abusar de reverbs y demás efectos porque pueden hacer que nuestro tema suene completamente artificial.
En resumen, lo que quiero decir con este post es: que cuando estés inspirado te concentres en volcar lo que tienes en tu cabeza al programa, sin importar si suena mejor o peor, si está mal ecualizado, etc.. hay que aprovechar esos momentos de inspiración para crear nuestro tema, seguramente tengas muchos dÃas en los que la inspiración brille por su ausencia y puedas dedicarlos a retocar tus temas, reemplazar instrumentos, y llenar de detalles tu producción.
Tags: dj, música, Producción musical
Pacman en CSS
Escrito por CristianDeluxe | Archivado en De todo un poco
(1 valoraciones, media: 5.00 de 5) Loading ...
Captura de pantalla del Pacman original
¿Quién no conoce el Pacman? ¿Quién no ha jugado alguna vez a este juego? El tÃpico comecocos, comebolas, o como queramos llamarlo.
Hace ya algunos años desde que su creador, Toru Iwatani, creara un buen dÃa al comecocos mientras contemplaba una pizza a la que faltaba una porción, allá por el principio de los años 80.
Estamos en el 2008 y es increÃble ver cómo evoluciona la informática y la diferencia entre:
Antes: Para jugar al Pacman necesitabas desplazarte a los recreativos, o al bar de tu barrio y gastarte el dinero para poder echar una partida (esto en sà tenÃa su emoción, ya que intentabas por todos los medios no morir y cuando sólo te quedaba tu última moneda, lo que te jugabas en esa máquina no eran pixeles, aquello eran vidas de verdad)
Ahora: Puedes jugar al pacman en casi cualquier sitio, desde “consolas” de 1€ en la tienda de los chinos, en tu móvil, en el ordenador (ya sea mediante Flash, software o emuladores), etc..
Pero si aún no era bastante con la cantidad de ports que se han realizado del Pacman ahora Román Cortés ha creado un Pacman utilizando sólamente CSS y Javascript, como comenta en su blog:
“Pacman CSS no usa imágenes, sólo arte CSS vectorial y redimensionable compuesto de cientos de caracteres de la fuente Verdana, y código javascript para la animación y el juego. Ocupa menos de 9kb descomprimido (y menos de 3kb con zip).”
Pacman realizado con CSS y JavaScript
La verdad es todo un logro, cuando veo las cosas que se pueden hacer con CSS no dejo de acordarme de algunas webs que todavÃa basan su diseño en tablas coloreadas a la antigua usanza (<table bgcolor=”#F2C342″…)
Puedes echar un mini-vicio entrando en el post del juego, aunque te aviso, (¿todavÃa?) no es un Pacman 100% operativo, por ejemplo los fantasmas no te hacen daño, y las cápsulas grandes no sirven para nada, pero merece la pena jugar a un Pacman creado completamente con fuentes.
Si quieres saber más sobre Pacman:
- Entrada en la Wikipedia
- ArtÃculo en: el PixeBlog de Pedja
- ArtÃculo sobre Toru Iwatani (Creador del juego)
Lo leà en: PuntoGeek – Pacman creado totalmente en CSS
La web del autor del juego: Román Cortés
Tags: css, javascript, juegos, Pacman
Probando la carga de tu aplicación web con Apache Bench
Escrito por CristianDeluxe | Archivado en diseño web
(1 valoraciones, media: 5.00 de 5) Loading ...Nuestra aplicación
Todos los que programamos, ya sea aplicaciones web o simplemente aplicaciones, independientemente de la plataforma, solemos hacerlo con mucho cariño, sobre todo si es un proyecto que nos interesa, ya sea por los resultados o por el simple hecho de tener un reto y aprender de él.
Generalizando un poco, se podrÃa decir que los programadores engullimos grandes cantidades de información, tutoriales, artÃculos… para implementar todas las mejoras posibles (Optimizaciones, protecciones de seguridad, caché… ), sobre todo si la vamos a mostrar al público en general (como es el caso de una aplicación web).
Llega el esperado momento de terminar, hasta ahora todo está correcto, tenemos nuestra aplicación funcionando en nuestra máquina y parece que casi todos los bugs están solucionados, normalmente (si no estamos en un entorno profesional) es el mismo programador y algún colega de confianza, el que prueba la aplicación en su propio PC.
¿Dónde surge el problema?
Como en el entorno de desarrollo probamos nuestra aplicación con pocos usuarios no podemos comprobar cuanta CPU y memoria va requerir nuestra aplicación en un entorno real y en situaciones lÃmite.
Un ejemplo es, que algún contenido de nuestra web aparezca en un blog popular o que sea portada en sitios como menéame, donde podamos recibir cientos de visitas en escasos minutos.
Hay algunas webs programadas por los “newbies” que por ejemplo sacan un listado con todos los registros de la base de datos, esto no puede parecer un problema cuando estás programando y tienes un par de registros de prueba, pero una vez que nuestra base de datos crezca… pues imagina las consecuencias de varios usuarios a la vez intentando recuperar 12.000 registros de la base de datos… ¿Resultado? Sobrecarga de nuestro servidor y probablemente muchos usuarios no podrán acceder al contenido.
Por ello es recomendable que monitorizemos nuestra aplicación y sepamos qué partes consumen más CPU, y cuales se podrÃan optimizar para conseguir un mayor rendimiento.
Un ejemplo de optimización serÃa una tienda de coches online (es lo primero que se me ha ocurrido), si un cliente quiere comprar coches de la marca “Seat”, en vez de sacar el listado con todos las demás marcas, podemos filtrar ese resultado ajustándonos a lo que el cliente requiere. Con ello reduciremos carga de CPU al servidor, haremos que nuestra aplicación vaya mucho más ligera y todo ello influirá en el tiempo que los usuarios tienen que esperar .
¿Cómo puedo medir el rendimiento?
Con todas las distribuciones de Apache se incluye la herramienta Apache Bench. La utilidad de este programa es enviar varias peticiones simultáneas a nuestro servidor y asà poder comprobar el tiempo que tarda en cargar y procesar cada página, el número de peticiones que se han podido servir, la carga del servidor y otros datos interesantes.
Apache Bench es, por decirlo de alguna manera, “independiente” del resto, es decir, no tiene porqué ser Apache, puedes usarlo con cualquier servidor, como LigHTTPD o con cualquiera que soporte el protocolo HTTP.
Normalmente se recomienda usar en un entorno local para obtener resultados más fiables y seguramente no querrás probarlo en tu servidor de producción 
.
¿Cómo se usa Apache Bench?
Apache Bench (ab) normalmente viene incluida con nuestro Apache, si estás en un entorno linux probablemente ya tengas Apache instalado, en cambio en Windows no viene incluido, por lo que si aún no lo tienes instalado te recomiendo XAMPP, puedes descargarlo en la página del proyecto.
Si abrimos el programa (ab.exe en Windows) sin ningún comando nos aparecerá la ayuda del programa:
C:\xampp\apache\bin\>ab
ab: wrong number of arguments
Usage: ab [options] [http://]hostname[:port]/path
Options are:
-n requests Number of requests to perform
-c concurrency Number of multiple requests to make
-t timelimit Seconds to max. wait for responses
-p postfile File containing data to POST
-T content-type Content-type header for POSTing
-v verbosity How much troubleshooting info to print
-w Print out results in HTML tables
-i Use HEAD instead of GET
-x attributes String to insert as table attributes
-y attributes String to insert as tr attributes
-z attributes String to insert as td or th attributes
-C attribute Add cookie, eg. 'Apache=1234. (repeatable)
-H attribute Add Arbitrary header line, eg. 'Accept-Encoding: gzip'
Inserted after all normal header lines. (repeatable)
-A attribute Add Basic WWW Authentication, the attributes
are a colon separated username and password.
-P attribute Add Basic Proxy Authentication, the attributes
are a colon separated username and password.
-X proxy:port Proxyserver and port number to use
-V Print version number and exit
-k Use HTTP KeepAlive feature
-d Do not show percentiles served table.
-S Do not show confidence estimators and warnings.
-g filename Output collected data to gnuplot format file.
-e filename Output CSV file with percentages served
-h Display usage information (this message)
De momento los comandos que nos interesan son: -n y -c.
El comando -n seguido de un número indica la cantidad de peticiones a realizar. Un número entre 100 y 1000 es un buen valor para comenzar
El comando -c seguido de un número indica las peticiones simultáneas que se realizarán. Este valor puede variar bastante dependiendo de qué esperas de tu aplicación. En nuestro caso pondremos un valor de 30.
Para nuestra prueba usaremos la siguiente dirección: “http://localhost” que es la dirección local por defecto cuando instalamos Apache, para lanzar ab usaremos lo siguiente:
ab -n 1000 -c 30 http://localhost/
Lo que le estamos pidiendo al programa es que realize 30 peticiones simultáneas por segundo hasta completar las 1000 peticiones. El programa nos muestra lo siguiente:
This is ApacheBench, Version 2.0.40-dev <$Revision: 1.146 $> apache-2.0 Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/ Copyright 2006 The Apache Software Foundation, http://www.apache.org/ Benchmarking localhost (be patient) Completed 100 requests Completed 200 requests Completed 300 requests Completed 400 requests Completed 500 requests Completed 600 requests Completed 700 requests Completed 800 requests Completed 900 requests Finished 1000 requests Server Software:       Apache/2.2.8 Server Hostname:       localhost Server Port:           80 Document Path:         / Document Length:       1789 bytes Concurrency Level:     30 Time taken for tests:  26.828125 seconds Complete requests:     1000 Failed requests:       0 Write errors:          0 Total transferred:     2020000 bytes HTML transferred:      1789000 bytes Requests per second:   37.27 [#/sec] (mean) Time per request:      804.844 [ms] (mean) Time per request:      26.828 [ms] (mean, across all concurrent requests) Transfer rate:         73.50 [Kbytes/sec] received Connection Times (ms)              min mean[+/-sd] median  max Connect:       0   0  3.1     0     15 Processing:  125 797 170.9   796   1297 Waiting:     125 797 170.8   796   1296 Total:       125 798 170.9   796   1312 Percentage of the requests served within a certain time (ms)  50%   796  66%   859  75%   906  80%   921  90%  1015  95%  1078  98%  1140  99%  1187  100%  1312 (longest request)
Si deseas más información puedes consultar la ayuda oficial.
Tags: apache, diseño web, herramientas
Loading ...