Posts filed under ‘Programación’

34 Cheat Sheets para Diseñadores y Desarrolladores

jQuery 1.2 Cheat Sheet

Via Web And Designers descubro una gran recopilación de Cheat Sheets obligadas para todo diseñador y/o desarrollador web, hay de jQuery, Protoype, PHP, Photoshop, Dreamweaver, Ilustrator, InDesign, etc y etc.

Verlas todas: link

diciembre 1, 2009 at 10:35 am 2 comentarios

mootools + PHP = mooHP

mooTools es un framework javascript que ha crecido de una forma basta abrupta, por lo mismo hoy en día es uno de los frameworks mas importantes y usados por desarrolladores. Pero se imaginan programar de la misma forma que mooTools pero en PHP?, pues ya es un hecho y se llama mooHP.

mooHP es un novedoso framework con la particularidad de que su sintaxis es idéntica a la de mooTools, novedoso no?. Así que si tu eres uno de los adeptos a mooTools y aun no te acostumbras a otros frameworks PHP, este puede ser tu punto de partida sin tener que pasar por un gran esfuerzo intentando conocer una sintaxis nueva.

Mírenlo ustedes mismo.

<?php
include("mooHP2/dom.class.php");
include("mooHP2/element.class.php");
include("mooHP2/css.class.php");
include("mooHP2/utility.class.php");

//New instance of the dom class
$t = new dom();

//Loads a template from file
$t->loadFile("base.html");

//Gets element by css selector  and sets it's HTML content.
$t->SE("body")->setHTML("");

//Selected ellement: body adopts  new element
$t->SE("body")->adopt( $t->element("div", array("id"=>"header") ,"Hello world!") );

//Body adopts  <br />
$t->SE("body")->newLine();

$picked = "";
if (isset( $_GET["cd"] )) {
 $picked = " you have selected #".$_GET["cd"];
}

//Body adopts new element div: with assigned properties as second argument and text as content;
$t->SE("body")->adopt( $t->element("div", array("style"=>"margin:10px; padding:10px; border:1px solid #444;"), "Counting down:".$picked) );

// $select  = new Element()
$select = $t->element("select", array("name"=>"cd"), "");

//Body adopts new element of type form
$t->SE("body")->adopt( $t->element("form", array("id"=>"newForm","method"=>"get") ) );
//Selects new element by ID and adopts previously defined element $select
$t->S("newForm")->adopt( $select );
// #newForm adopts new Element input
$t->S("newForm")->adopt( $t->element("input", array("type"=>"submit", "value"=>"CLICK!") ) );

for ($i=1; $i<=20; $i++) {
	//$newOption is new option element
	$newOption = $t->element("option", array("value"=>$i), "Count down: " . $i );
	//$select adopt as it's first child the $newOption element
	$select->adoptTop( $newOption );
	if ( isset($_GET["cd"]) && $_GET["cd"] == $i ) {
		//Setting an attribute to an element
		$newOption->setProperty("selected","selected");
	}
}

//Body accepts  new style rules
$t->SE("body")->setStyle("margin","10px");

//Body adopts <br/>
$t->SE("body")->newLine();

//Appending text to the body
$t->SE("body")->appendText("and here comes the appended text");

//Body is adopting the inc.html contents
$t->SE("body")->adopt( $t->includeFile("inc.html") );

if (!isset( $_GET["cd"] )) {
	//Make simple alert with javascript
	$t->alert("Hello and welcome to mooHP");
}

//Setting the <title> tah innerHTML
$t->setPageTitle("..:: Hello and welcome to mooHP ::..");

//Creating new instance of the css class
$newCss = new css();
//Setting rule in css
$newCss->setStyle("color","#ff9900");
//Setting rules in css
$newCss->setStyles(array("font-weight"=>"bold","font-size"=>"24px" ));
//Writing the defined css to element
$newCss->writeToElement( $t->S("header") );

//Creating new instance of the css class
$newCss2 = new css();
//Setting rule in css
$newCss2->setStyle("border","10px solid #DDD");
//Setting rule in css
$newCss2->setStyle("padding","10px");
//Writing the defined css as #newForm selector in $t dom instance
$newCss2->writeToDom("#newForm", $t);

//Writing the page   if true is passed as argument the page will be compresed
$t->writePage(true);

?>

En lo personal no lo he probado, ya que es un framework bastante nuevo, así que si alguno de ustedes lo ha ocupado, seria bueno saber que tal les fue, cuales fueron sus impresiones, etc. Como última nota, mooHP funciona sobre versiones 5.2.1 de PHP en adelante.

Demo | Descarga | Artículo relacionado
.

Ver VideosTe VerdeImagenes para hi53GP

noviembre 3, 2007 at 8:02 pm 12 comentarios

Pownce Tiene API

Por fin, después de una larga espera, Pownce ha liberado su API para todos nosotros. Esperemos ahora aparezcan aplicaciones para linux, ya que el gran tope que había hasta ahora, era que su producto, como funciona con Adobe AIR no daba soporte a los linuxeros.

Una muy buena noticia para todos los desarrolladores que esperábamos esta API con ansias, además contamos con una wiki, en la cual esta la documentación de como usarla y tenemos además el Grupo en Google Groups de esta API.

Noticia Oficial: The Pownce Blog – Pownce Public API
.

Ver VideosTe VerdeImagenes para hi53GP

octubre 30, 2007 at 3:04 pm 2 comentarios

Railsify: Plugins para Ruby on Rails

Railsify es un directorio de recursos para trabajar con Ruby on Rails, en este puedes encontrar una variedad de herramientas y plugins para tus aplicaciones.

Es un sitio relativamente nuevo pero que de seguro con la gran comunidad que existe tras este lenguaje de programación, y framework ira creciendo día a día. Todos los recursos son absolutamente gratis. Puedes crearte una cuenta, publicar tus propios plugins y incluso tiene un feed para que éstes al tanto de los nuevos agregados.

Railsify - Directorio de Recursos para Ruby on Rails

Este es uno de esos sitios que vale la pena tener en sus favoritos, sobre todo si estas trabajando con Ruby on Rails. Actualmente cuenta con más de 100 plugin, y algunas de las categorías con las que cuenta son: Imágenes y Gráficos, HTML Helpers, Paginación, Testeo, Captcha, Active Record, Autentificación, Seguridad y Protección, etc.

Enlace: Railsify (vía pixelco.us)
.

Ver VideosTe VerdeImagenes para hi53GP

septiembre 24, 2007 at 11:12 am 1 comentario

CakePHP en Español

CakePHPEsta muy claro que documentación de CakePHP en español es muy poca, prácticamente todo esta en ingles, y si no eres muy dotado en este idioma te seria de gran dificultad el uso de este framework, hasta hoy.

Un grupo de usuarios del Grupo en Español de CakePHP decidieron poner marcha una versión en español, creando cakephp-es.org, dándose el trabajo de traducir el actual manual y crear nuevos artículos.

Conjunto a al grupo y al sitio, tienen además un canal, #cakephp-es, en el servidor freenode, y han subido un bakery para crear nuevos artículos y generar la documentación en español como debería ser.

Sin duda un gran avance, que obviamente requiere de toda la ayuda de la comunidad hispanohablante para llevar a cabo y que se convierta en un punto oficial de ayuda para todos.

Enlace: Cakephp-es
.

Ver VideosTe VerdeImagenes para hi53GP

septiembre 24, 2007 at 9:47 am 8 comentarios

Artículos Interesantes

He encontrado estos dos artículos que creo son interesantes de leer y tener en cuenta.

Full Web 2.0 API List
Una gran lista de API’s publicas a las que podemos acceder y ocupar en nuestros desarrollos, hay de todo tipo. Me impresiono ver esta gran lista y creo que faltan algunas que han aparecido recientemente, pero con las que tienen, hay para divertirse un buen rato, a parte en los comentarios puedes encontrar otras API’s mas.

Web Design 101: Floats
En Digital Web Magazine, publicaron un excelente articulo, en el que explican con detalle y con 14 ejemplos la definición y uso de Float. Este articulo explica en detalle, su comportamiento, como ocupar varios Floats, típicos errores y su solución, entre otros.

Bonus
77 Resources to Simplify Your Life as a Web Designer
Extensa lista de bastantes recursos para simplificarnos la vida y hacerla mas fácil, hay de todo, herramientas de colores, herramientas para el uso CSS, Iconos, Templates, etc y etc.


.

Ver VideosTe VerdeImagenes para hi53GP

septiembre 17, 2007 at 11:22 pm 1 comentario

Comparativa de Framework para aplicaciones web

En Wikipedia encontré una interesante comparativa de una gran variedad de Framework para nuestros desarrollos web, hace poco les comentaba una lista de estos para PHP, pues acá hay otros lenguajes como Java, Ruby, ASP.NET, Groovy, ColdFusion, entre otros.

En esta lista pueden ver sus últimas versiones, enlace a sus artículos dentro de Wikipedia, y una tabla en donde se comparan las características de cada uno. Si todavía no se deciden por uno para sus trabajos, esta seria una buena guía.

Enlace: Comparison of web application frameworks
.

Ver VideosTe VerdeImagenes para hi53GP

septiembre 17, 2007 at 4:55 pm 2 comentarios

Lista de Framework MVC para PHP

Desde que un amigo me hablo de CakePHP, me metí en ese Framework y no lo he soltado mas, de hecho a veces intento participar del grupo, pero el tiempo que me queda entre la Universidad, el trabajo, la familia y la polola (novia), es casi nulo.

Además de este Framework, que mas de alguna vez he mencionado acá también, existen una gran variedad, incluso hay algunos en español. Acá les presento una lista de Framework con arquitectura MVC para hacer tus desarrollos PHP mas ágiles y profesionales.

Ahora es cosa de ustedes elegir el que mas se acomode a sus necesidades.

Vía

.

Ver VideosTe VerdeVideos 3GP3GPsomos tu y yo

septiembre 14, 2007 at 1:05 pm 49 comentarios

Errores típicos en Javascript

A quien no le ha pasado alguna vez que cuando programa en javascript al momento de ver funcionando, manda error, o que en un navegador funciona y en otro no, o peor aun a veces no funciona y no manda error. Bueno esos dolores de cabeza son debido a que a veces javascript es muy sensible o muy estricto en algunas cosas. En este artículo pretendo dar a conocer una serie de errores típicos y como los podemos solucionar.

Cuidado con la coma.

Este es un error un tanto típico, sobre todo cuando trabajamos con objetos o arreglos. Observen en el siguiente código.

<script type="text/javascript">
  var MyObj = {
        nombre : "Victor",
        pais : "Chile",
  }
</script>

Al esta todo correcto, pues no, la coma que esta el final, después de “Chile”, esta alterando el correcto funcionamiento, en algunos navegadores les va a mandar un error de sintaxis debido a un bug que traen consigo. Pues la solución es simplemente quitar esa coma.

“this” no siempre es esto, cambia según su lanzador.

Observemos un código de ejemplo.

<input type="button" value="Enviar" id="submit" />
<script type="text/javascript">
var myForm = function () {
    this.alert = "Hello world";
    this.onClickAction = function() {
        alert(this.alert );
    }
}();
document.getElementById("submit").onclick =  myForm.onClickAction;
</script>

Con el código anterior, asignamos al evento onclick sobre el button, la acción del objeto myForm, con el cual cuando hagamos clic en este debería aparecer un alert con el mensaje “Hello world”.

A su sorpresa no dice “Hello world”, dice “undefined”. Esto sucede porque “this” es sobreescrito por el objeto input, es decir si en vez de poner this.alert ponen this.value el mensaje seria “Enviar”. Bien para solucionar esto deben reemplazar “this” por “self” y agregar esta variable dentro del código, entonces el resultado final seria.

<input type="button" value="Enviar" id="submit" />
<script type="text/javascript">
var myForm = function () {
    var self = this;
    this.alert = "Hello world";
    this.onClickAction = function() {
        alert(self.value);
    }
}();
document.getElementById("submit").onclick =  myForm.onClickAction;
</script>

Nótese que se agrego var self, esto es porque si no lo agregamos IE manda un error.

Cuidado con el nombre de tus variables

Procure no asignar un nombre a una variable idéntico al de un ID en el documento.

<input type="button" id="ElBoton">
<script type="text/javascript">
    ElBoton = get("ElBoton");
</script>

En la mayoría de los navegadores este código no debería mandar error, pero en algunos manda un error del tipo “objeto indefinido”, simplemente como solución, sean creativos o en vez de una variable “ElBoton” pongan “_ElBoton”.

Replace, solo reemplaza la primera coincidencia

La función replace para los string en javascript, solo reemplaza la primera coincidencia, al contrario a funciones del tipo str_replace de PHP. Por ejemplo.

<script>
    var title = "Errores típicos en Javascript".replace(" ","_");
    alert(title);
</script>

El siguiente código arrojaría el siguiente resultado:

Errores_típicos en Javascript

Para solucionar esto y que replace funcione en todas las coincidencias, debemos recurrir a las expresiones regulares, de la siguiente forma.

<script>
     var title = "Errores típicos en Javascript".replace(/ /g,"_");
     alert(title);
 </script>

No siempre ParseInt da los resultados esperados.

ParseInt es una funciona bastante buena, con la que podemos transformar variables del tipo string al tipo int, por ejemplo.

dia = "09";
var  numdia = parseInt(dia);

Lo esperado de esa operación seria que numdia tenga como valor 9, pero para nuestra sorpresa es 0!!.

Bueno esto tiene una explicación lógica y matemática que no explicare mucho (mi matemática siempre ha sido pésima). Cuando el primer carácter de un String es cero, parseInt interpreta el valor en base a 8. Para solucionar este problema debemos cambiar su base a 10 de la siguiente manera:

 var  numdia = parseInt(dia, 10);

Ya con esto nuestro resultado es el esperado, obviamente 9.

Asignando Eventos

La forma típica de asignar un evento a algo es la siguiente:

windows.onclick = funcion_asociada;

Esta manera tiene dos grandes errores:

  1. Sobreescribe otros eventos que se hagan creado.
  2. Puede causar errores de memoria en ciertos navegadores en algunas circunstancias.

La solución, ocupa alguna librería que le permita asociar eventos, como por ejemplo Prototype. Es tan simple como esto:

Event.observer(window, load, funcion_asociada);

Cuidado con los tiempos

Cuando creamos un objeto y le asignamos un evento o queremos realizar una acción en este, hay que tener cuidado, ya que la creación de estos requiere de un tiempo, y una vez cumplido se puede trabajar en estos. Revisemos el siguiente ejemplo

var myInput = document.createElement('input');
document.body.appendChild(myInput);
myInput.focus();
myInput.select();

En el código anterior, simplemente creamos un elemento y lo insertamos en el cuerpo, una vez realizado, asignamos el curso al objeto creado y lo seleccionamos. Bien, a nuestra sorpresa el focus() y selec() no funcionaran en algunos navegadores, el problema esta en que Javascript tiene una ejecución linea, con esto quiero decir, que ejecuta todas lineas una tras otra sin esperar a que la anterior termine. En este caso el error se debe a que el objeto no se alcanzo a establecer bien antes de hacer el focus() y el select();. La solución a este problema seria algo así.

var myInput = document.createElement('input');
myInput.id = "newInput";
document.body.appendChild(myInput);
setTimeout("document.getElementById("newInput").focus(); document.getElementById("newInput").select()", 10);

Ahora si el input es creado y seleccionado.

El punto y coma (;) es importante

Este es un punto que encuentro importante. En todo lenguaje existe una forma de terminar una instrucción, por ejemplo el ; (punto y coma), en javascript este es opcional es decir.

var myName = "victor"
var myLastName = "san martin";

Ambos funcionan en la mayoría de los navegadores, pero se ha notado comportamientos extraños en ciertos navegadores. Conjunto a esto se ha vuelto bastante famoso el uso de compresores, pues estos su primera tarea es eliminar espacios y saltos de linea, punto importante que permitía que funcionase nuestro código anterior. Bien, imaginemos que pasamos por un compresor, esto nos dejaría algo así:

var myName = "Victor"var myLastName = "san martin";

Sin duda mandaría error, aunque en algunos compresores mas avanzados, encuentran este error y le asignan automáticamente el ; al final cuando falta, por ejemplo ShrinkSafe es un muy buen compresor y que identifica algunos errores como este.

Comentario

Estas son algunos de los problemas típicos en los que uno se puede enfrentar al momento de programar en Javascript, sin duda si de una vez por todas, se estableciera un poco el como un navegador interpreta algo, sin duda nos ahorrarian bastantes horas, con dolor de cabeza incluidos, pero se ve algo dificil.

Como sugerencia, les recomiendo instalar Firebug. Es una extensión muy buena, que funciona tanto en Firefox como en otros navegadores. Con esta extensión podemos identificar rápidamente nuestro error, además de ver como se comporta javascript, las peticiones realizadas por AJAX, etc y etc.

Obviamente dejo abierto el artículo, a comentarios, reclamos, etc., y si conocen algún error típico mas, no duden en comentarlo también.

Notas

No me referí a ningún navegador en si, siempre intente decir “en algunos navegadores”, claro que los entendidos en el tema saben a que navegador me refiero.
No porque haya hecho un comentario acerca de Prototype, quiere decir que lo ocupen, en lo personal lo recomiendo bastante, pero es a su elección. Tienen buenas opciones para elegir, como por ejemplo JQuery y Mootools.

Artículo inspirado y en parte basado en Nine Javascript Gotchas por Fitzblog.com
.

Ver VideosTe VerdeVideos 3GP3GPsomos tu y yo

septiembre 12, 2007 at 5:03 pm 8 comentarios

Buenas prácticas al programar

Una de las cosas que más odio, es cuando me piden ayuda o me pasan el código fuente de algún programa, y al ver este, no se entiende nada. Todo en una sola linea, variables que no se entienden, cero indentación, etc.

Mucho se habla de al momento de realizar un sitio web, que el código fuente, tanto sea html, css, javascript, sea muy claro, tanto que sea mejor tomado por los buscadores como para optimizar el trabajo. En si no solo debes enfocarte en la parte pública, por decirlo de alguna forma, lo ideal es tener una reglas para programar, para que este sea entendible y claro, tanto para ti, como para otras personas que algún día tendrían que lidiar con tu código.

Mas que nada las buenas prácticas nos ayudan a:

  • Fácil compresión por parte del programador.
  • Claridad y correctitud del código.
  • Fácil comunicación entre programadores.
  • Unificación de criterios.
  • Fácil integración y reutilización.

Ocupa nombres de variables claros

Con esto quiero decir que si van a crear sus variables que mas o menos se entienda cual es su contenido por ejemplo:

$a = "1986"; $e = "21"; $p = "chile"; $c = "Santiago";

No es lo mismo que escribir:

$anio = "1986";
$edad = "21";
$pais = "Chile";
$ciudad = "Santiago";

Si se fijan son variables bastante entendibles y que en cualquier parte del código nos daremos cuenta cual es su contenido. Además de esto, es bueno que elijan nombres de variables cortos y obviamente lo más claro posible.

Las llaves se ven mucho mejor en una linea cada una

Este es un pequeño tip, pero que ayuda bastante al momento de ordenar el código, no es lo mismo.

function test($say=false){ if($say){ echo "hello world"; }}

a esto.

function test ($say = false)
{
    if ($say)
    {
        echo "hello world";
    }
}

Si se fijan esta todo mucho mas claro.

Indenta, ¡INDENTA!

Esto mas que una buena práctica, es una regla en todo lenguaje. Con la indentación uno puede organizar o segmentar el código, dejar más claro y óptimo el entendimiento de este, basándome en el ejemplo anterior la indentacion se refiere a esto.

function test ($say = false)
{
    if ($say)
    {
        echo "hello world";
    }
}

Si se fijan hay un espacio en cada linea, eso es la indentacion y equivale en lo normal a un tab por nivel o a 4 espacios.

Siempre comenta tu código, ¡no tienes memoria de elefante!.

Esta es una regla que últimamente se ha vuelto más fuerte, con el uso de SVN o de proyectos Open Source, es de vital importancia comentar que hace cada función o clase, para lograr su entendimiento. En el comentario deben ir como mínimo:

  • Breve descripción de que realiza
  • Parámetros que este recibe, más su tipo
  • Valor de salida o retorno y su tipo
  • Fecha de su última modificación

Un ejemplo de este tipo seria.

/**
  * Devuelve la fecha en formato d/m/Y
  *
  * @param integer $time Tiempo formato UNIX equivalente a time()
  * @return string sucess
  * @created 2008-09-11 20:00 UTC-4
  * @last modified 2008-09-11 22:28 UTC-4
  * @author Quest http://www.crazychile.net
  * @licence MIT 1.1
  **/
function myDate($time=null)
{
    if (is_null($time))
    {
        $time = time();
    }
    return date("Y/m/d", $time);
}

La anterior es un comentario algo extendido, pero es bastante práctico.

Decidete por un idioma

Esto es una bobería dirían algunos, o es algo tonto, pero hay programadores que escriben sus códigos en como 3 idiomas, no faltan las variables o funciones llamas algo asi.

addCiudad
EditaName
devuelveValue

Si realizamos algo, que sea de forma ordenada, aunque no lo crean estos cambios tan minúsculos nos ayudan bastante, no sólo en la programación sino además en el orden de nuestras cosas. Además aprovechando que estamos viendo nombres, es ideal que utilicen un estilo “camelize” es decir:

addDate
editUser
viewMyProfile

Este es un estilo que se ha ido generalizando debido a los frameworks que existen actualmente, por ejemplo en CakePHP cuando creamos un Model y el nombre del archivo es my_model.php la variable que genera es $MyModel.

Ordena tus Arreglos y Consultas

Esto también va con el orden y es muy recurrente ver arreglos mal formados. Ordenar indentando y agrupando nuestros arreglos de la misma forma en que lo realiza el tab <pre> cuando queremos imprimir el contenido de un arreglo, por ejemplo.

$myPlaces = array(
   'home' => array(
        'pieza', 'cocina','patio','comedor','living'
    ),
    'institute' => array(
        'sala','biblioteca','sala de computación','casino'
    )
);

Lo mismo va para las consultas SQL, se ven mucho mejor organizadas por grupos, ejemplo.

$sql = mysql_query("
    SELECT Page.id, Page.title, Page.content, Page.hits
    FROM pages as Page
    WHERE
        Page.title LIKE '%" . $queryTitle . "%'
        AND
            Page.hits > 100
    ORDER BY Page.title ASC
    LIMIT " . $queryLimit . "
);

Siguiendo estas reglas, tu programación será más clara y expedita, además quiero remarcar que esto no es sólo para un lenguaje, es decir, no porque haya puesto sólo códigos PHP estas reglas solo sirvan para este, lo ideal es tener esto a nivel global y generar nuestros códigos más limpios.

Aunque no lo crean cuando me pasan un código desordenado, prefiero perder un par de minutos en ordenarlo que en intentar entender este tipo de desorden, no se quizá sea algo “exquisito” pero no soporto algo que sea ilegible.

Dejo el post abierto, para comentarios y ver que otras reglas tienen ustedes.
.

Ver VideosTe VerdeVideos 3GP3GPsomos tu y yo

septiembre 11, 2007 at 11:08 pm 6 comentarios

Entradas antiguas



Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.