viernes, 29 de febrero de 2008

Misión Géminis 48: el concurso PHP de Microsoft en Latinoamérica

Misión Géminis 48 es un concurso realizado por Microsoft para desarrolladores de América Latina, donde deberán demostrar sus conocimientos sobre .NET y PHP. La inscripción es gratuita y habrá un premio de 1.000 dólares.

El concurso estará dividido en dos fases: primero hay que responder una serie de preguntas de clasificación. Luego, tendrás que desarrollar una aplicación basada en PHP y migrarla a .Net, contando con 21 días para llevar a cabo la tarea. Entérate de los detalles.

Como dije, participar es gratis. Para registrarte deberás tener una cuenta de Windows Live ID. Tienes hasta el 29 de febrero para hacerlo y recibirás un e-mail de confirmación.

Durante la primera fase deberás responder 10 preguntas de “selección múltiple” acerca de los lenguajes de programación .Net y PHP. Contestando correctamente el 80% del cuestionario podrás descargarte una aplicación modelo en PHP y pasar a la segunda fase.

La aplicación a migrar/desarrollar es un sistema de Control Epidemiológico, basado en Linux Fedora 7, MySQL 5.2 y PHP 5.

En la segunda fase tendrás que subir la aplicación migrada a ASP.Net a través del sitio del concurso, teniendo sólo 48hs para hacerlo, desde el 25 al 27 de Marzo de este año.

El ganador del premio principal se llevará 1.000 dólares, el segundo y tercer puesto 800 dólares cada uno. También habrá un premio especial que entregará Mercado Libre, de 1000 dólares. Los premios serán otorgados en la moneda local del país del ganador.

El jurado estará compuesto por especialistas de Microsoft y Mercado Libre (sponsor del concurso).

¡Haz clic aquí para entrar al sitio oficial de Misión Géminis 48 y comienza ya a participar!

CodeIgniter 1.6.1 vs. Kohana 2.1.1

Además de CakePHP, uno de los frameworks que más ha llamado mi interés como una alternativa real y práctica en el eventual caso de necesitar uno para proyectos personales es CodeIgniter. Por eso me llamó la atención este artículo, que compara a CodeIgniter 1.6.1 con otro framework desconocido para mí: Kohana.

Kohana es en realidad un "fork" (división del desarrollo del código) de CodeIgniter, que aparentemente surgió de la insatisfacción de sus usuarios cuando se hizo evidente que sus desarrolladores estaban más interesados en actualizar su CMS comercial ExpressionEngine que en corregir los errores reportados y tener en cuentas las nuevas características pedidas.

Pero Kohana toma un camino único distinto a CodeIgniter porque:

  • Es conducido por una comunidad, no por una empresa.
  • Está basado en un OOP estricto que requiere PHP5.
  • No tiene conflictos de nombres de espacio.
  • Tiene una verdadera auto-carga de clases.
  • Está adherido a la iniciativa GoPHP5.org.
  • Sus helpers son clases estáticas, no funciones:
    form::open() en lugar de form_open()

Y la conclusión de la revisión es:

"CodeIgniter es muy bueno para pequeños a medianos proyectos, especialmente para servidores heredados que tienen PHP4 instalado. Su fantástica guía de usuario hace que programar en CodeIgniter ser muy eficiente".

"Kohana es probablemente mejor para proyectos más grandes que necesitan extensiones más flexibles. PHP5 ofrece mejor soporte de OOP desde su fundación, además, su mejor implementación de características lo hace un fuerte competidor a su predecesor".


Fuente: VivaPHP

miércoles, 27 de febrero de 2008

IE7: la librería Javascript para corregir Internet Explorer

IE7 es una librería Javascript que logra que el Internet Explorer interprete los documentos de acuerdo con los estándares, solucionando muchos problemas con CSS y haciendo que los PNGs transparentes se vean correctamente sobre todo en IE5 y 6.

Y es que, si de estándares hablamos, ya sabemos que IE6 parece hacer caso omiso de ellos. El propio Microsoft está impulsando su desuso y el cambio a IE7. Ya vimos que IE8 pasó la prueba del Acid2. Prepárate entonces para el cambio con esta librería Javascript.

Es muy importante seguir los estándares, pero también sabemos, si vemos las estadísticas de nuestros sitios, que Internet Explorer es usado por un increíble número de usuarios (alrededor del 85%).

Sabiendo que IE6 tiene los días contados, deberíamos encontrar una solución para que nuestros sitios funcionen correctamente hasta que llegue el día en que los estándares se cumplan a rajatabla. Ahí es donde entra la librería Javascript IE7.

Veamos los estándares HTML y CSS que soporta:

  • Selectores CSS:
    • parent > child
    • adjacent + sibling
    • adjacent ~ sibling
    • [attr], [attr=”value”], [attr~=”value”] etc.
    • .multiple.classes (fixa el bug)
    • :hover, :active, :focus (para todos los elementos).
    • :first-child, :last-child, only-child, nth-child, nth-last-child
    • :check, :disabled, :enabled
    • :empty, :contains(), :not()
    • :before/:after/content:
    • :lang()
  • Soporta hojas de estilo importadas.
  • Preserva la cascada de la hoja de estilo.
  • No altera la estructura del documento.
  • No comprueba repetidamente el árbol del DOM usando Javascript.
  • Usa CSS puro para reforzar las reglas de las hojas de estilo.
  • Soporta el modelo de caja de la W3C en modo estándar o quirk.
  • fixed positioning (Flicker libre).
  • overflow:visible
  • min/max-width/height
  • Fixa elementos rotos de (X)HTML (abbr, object).
  • Comportamiento estándar de los formularios.
  • Soporta transparencia alpha en archivos PNG.
  • El script es liviano (sólo 11KB).
  • Trabaja a partir de Microsoft Internet Explorer 5 en adelante (sólo en Windows, obviamente).

Haz clic aquí para descargar la librería Javascript IE7.


Fuente: ElWebmaster

lunes, 25 de febrero de 2008

OpenX monta tu propio servidor de anuncios

OpenX es un servidor de anuncios para sitios web que puedes instalar en tu propio servidor, se trat de un software Open Source programado con PHP y usa una base de datos en MySQL.

OpenX lo tiene todo para que puedas administrar todos los anuncios de tus sitios web, con reportes avanzados, te permite tener un control avanzado de los anuncios que se muestran, puedes llevar un registro del rendimineto de tu publicidad online.

Con OpenX tienes la libertdad de mezclar anuncios de otros tipos cómo adsense, intercambio de banners, etc., todo desde una interface muy fácil de usar.

Puedes ver más información acerca de OpenX o descargalo totalmente gratis.



Fuente: Blog de Carlos Leopoldo

miércoles, 20 de febrero de 2008

Sitios utiles para programadores

En este articulo voy a poner algunos sitios de donde pueden sacar tutoriales, codigos, clases, etc. en diversos lenguajes(c, php, python, perl, ruby, java...). A mi me sacaron de mas de un apuro, y queria compartirlos con todos:

En otro momento seguire esta lista. Si saben de otras paginas(que hay miles) agregenlas en los comentarios.

sábado, 16 de febrero de 2008

Namespaces y MySQL Native Driver en PHP 5.3

Para los desarrolladores que ya no pueden seguir esperando más, la próxima versión 5.3 de PHP incluirá varias de las cosas originalmente planeadas para PHP6. Así, PHP 5.3, planeada para mediados de año, espera introducir nuevas e importantes características sin requerir una actualización radical de versiones, cosa que valorarán usuarios y proveedores de hosting.

Y entre todas ellas, quizás la más anticipada sea el soporte de Namespaces, una característica que los mismos usuarios habían comenzado a pedir desde hace casi 2 años. Los Namespaces nos permiten separar clases y demás elementos en espacios distintos de nuestra aplicación, facilitando por lo tanto la modularidad en la misma y evitando conflictos de nombres de funciones y métodos.

Otra novedad es la inclusión de la librería mysqlnd (MySQL Native Driver for PHP). Esta librería, reemplazará la antigua libmysql y ofrecerá muchas ventajas sobre esta. La actual librería, libmysql, fue desarrollada en un principio para C y C++, mientras que mysqlnd ha sido desarrolllada y optimizada para PHP, aprovechando todas las ventajas de la estructura interna del Zend Engine.

PHP 5.3 está disponible en este momento sólo como un snapshot de desarrollo, pero se puede instalar fácilmente siguiendo estas instrucciones.

Fuente: VivaPHP

8 propiedades CSS que casi nadie usa (aunque debería)

Algunas propiedades CSS no son tan conocidas pero pueden sernos de suma utilidad a la hora de dar un diferencial al diseño de nuestros sitios web. Igualmente debemos tener la precaución de fijarnos que algunas no funcionan en todos los navegadores.

De esta forma podremos lograr efectos innovadores como máscaras de capas, sombra en los textos, ajuste de fuentes o configuración del formato de un sitio para su impresión, incluyendo la disposición de los elementos. Veamos entonces estas propiedades CSS.

Haciendo clic en cada ítem accederás a la página de cada propiedad para conocerla en detalle:

  1. Clip:
    clip: rect(5px, 40px, 45px, 5px)
    Funciona como un “clipping mask” en Adobe Illustrator, para los que desconozcan el efecto es similar a poner una hoja de papel con un cuadrado calado en el medio. Lo que se ve a través de la ventana será la capa “de abajo”. Así podemos mostrar encuadres de nuestro sitio, entre otras cuantas cosas que se nos puedan ocurrir.
  2. Text-shadow (sombra para el texto):
    text-shadow: color, x-coordinate, y-coordinate, blur radius
    text-shadow: #000000 10px -5px 1px
  3. Quotes (comillas para las citas):
    q { quotes: '"' '"' }

    Nota:
    Quotes no es soportado actualmente por Internet Explorer.
  4. Marks (genera marcas de corte o diferencia):
    @page: { marks: ; }
  5. Page-break-before/after:
    page-break-before: (always|auto|empty string|left|right);
    page-break-after: (always|auto|empty string|left|right);
    Esta propiedad es muy recomendable, acomoda una página para que se imprima por “sectores” respetando los elementos h3 con su respectivo contenido, para no dejar un título “colgado” y en otra hoja el contenido correspondiente.

  6. Font-stretch (maneja el aspecto de la fuente):
    font-stretch: (normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit)
  7. Font-variant (fuente variante):
    font-variant: (normal | small-caps)
    Sirve para mostrar frases en una tipografía de menor tamaño y con tododos los caracteres en mayúsculas.
  8. Table-layout:
    table-layout: (auto | fixed)
    Sirve para acomodar el layout (estructura) del diseño de la página, que cargará mucho más rápido.

No dudes en experimentar con estas propiedades, sólo ten la precaución de testearlas antes de subir los cambios a tu página web en caso de no estar muy familiarizado con el uso de estilos CSS.

Fuente: SEOMoz


Sacado de: El Webmaster

viernes, 15 de febrero de 2008

10 errores a la hora de diseñar iconos

Es muy fácil criticar lo que alguien ha creado o diseñado pero si las críticas las tomamos para no cometer los mismos errores es mejor, en el blog de TurboMilk leí un post muy interesante llamado 10 Mistakes in Icon Design, aquí los menciono:

  1. Insuficiente diferenciación entre iconos.
  2. Demasiados elementos en un mismo icono
  3. Elementos innecesarios
  4. Falta de unidad en el set de iconos
  5. En los iconos pequeños demasiada perspectiva y sombras
  6. Hacer metamorfosis exagerada de los iconos originales
  7. Poner características nacionalistas en los iconos
  8. Poner imágenes de interfaces reales en iconos
  9. El texto dentro de los iconos
  10. Piexeles fuera de su marco
Fuente: Blog de Carlos Leopoldo

domingo, 10 de febrero de 2008

Aprende HTML con ejemplos

Si estás interesado en aprender HTML o quieres mejorar tus conocimientos sobre este fabuloso lenguage de marcado de texto que es lenguage utilizado para casi todas las páginas de Internet, HTML Playground es un sitio web donde puedes aprender para que sirve cada una de las etiquetas utilizadas en el HTML, además que puedes jugar con ellas cambiando algunos atributos y viendo el resultado inmediatamente.

html playground

Visita el sitio de htmlplayground eso sí todo está inglés pero de una manera muy sencilla.

Fuente: Blog de Carlos Leopoldo

Componentes para un sitio web exitoso

¿Qué hay detrás de un sitio web exitoso? ¿Qué es lo que le falta a un sitio para ser aún mejor? De seguro todo programador/emprendedor web alguna vez se ha formulado estos dos interrogantes.

En el artículo “What makes a good website“, nos brindan siete elementos esenciales para lograr un buen sitio y proponen la Analogía del Iceberg (lo que el usuario no vé es mucho más sustancial que lo que percibe).

Los siguientes elementos se deben tener en cuenta para que nuestro sitio web alcance el éxito que deseamos.

Propósito: Cuáles son nuestros objetivos, por qué tenemos un sitio web, cómo mediremos su éxito. Preguntas que debemos plantearnos en una primera instancia.

Diseño: La cuidadosa selección de colores, alineaciones, el interés visual y estética es lo primero que observará el usuario.

Contenido: El contenido es lo fundamental. Deberemos comprender qué objetivos tienen nuestros usuarios, en base a ellos, brindaremos nuestros contenidos. Cada página de nuestro sitio debe tener fijados sus propósitos.

Arquitectura: ¿Cómo están organizadas las páginas dentro del sitio? ¿La navegación es intuitiva? ¿La información es accesible?

Usabilidad y accesibilidad: Tenemos que tener en cuenta que no todos los usuarios tienen los mismos conocimientos en cuanto a Internet y puede que tampoco todos cuenten con los mismos recursos. Es importante conocer a quienes visitan nuestro sitio para saber cuáles serán los problemas que se les presenten (plugins para Flash, tipo de conexión, navegador que utilizan, resolución de pantalla, idioma sin regionalismos, etc.).

Campañas de publicidad online: Respetar las normas de posicionamiento. Definir a quiénes queremos orientarnos y mantenernos en continua capacitación sobre temas referentes a SEO (optimización para los motores de búsqueda).

Material técnico: ¿Es el nombre de nuestro sitio fácil de recordar? ¿Contamos con un buen proveedor de Internet? ¿Hay demasiados sitios alojados en nuestro servidor? ¿El diseño y las tecnologías que utilizamos nos permitirán crecer y soportar un mayor número de usuarios?


Analogía del Iceberg


Fuente: ElWebmaster

viernes, 8 de febrero de 2008

Funciones PHP: Optimizar código

En PHP Benchmark hacen algunas pruebas de eficiencia con respecto a funciones similares de PHP. A continuación voy a hacer un breve repaso, con algunos añadidos:

  • Usar HTML ante PHP: Si necesitas escribir HTML hazlo directamente sin utilizar echo o print. Usa PHP para imprimir información sólo cuando sea necesario.
  • Variables: Favorece siempre que puedas el uso de variables estáticas. No utilices variables que no necesites (ocupan memoria). Evita las variables globales en la medida de lo posible. Usa constantes.
  • Unset: Utiliza la función unset para destruir variables y liberar memoria, sobre todo con arrays o variables extensas. PHP usa un Garbage Collector, pero en mitad de un script puedes usarlo para maximizar la memoria disponible (útil en servidores limitados).
  • Bucles: Revisa bien los bucles en tus programas, si no es necesario un bucle, evitalo. Si puedes ahorrarte ciclos, hazlo. Comprueba la condición de parada y nunca uses funciones en ella (vuelca en una variable antes del bucle). En términos de velocidad un do..while es más rápido que un while, que a su vez es más rápido que un for.
  • Inclusiones: Organiza bien tu código y evita en lo posible el uso de funciones como include_once() y require_once(). Estas funciones son muy utiles para comprobar si un script ya ha sido procesado, pero son muy costosas. En su lugar utiliza include() y require().
  • Supresión de errores @: Al colocar una @ antes de una función evitamos que se muestre un posible mensaje de error. Muy útil, pero muy costoso. Es preferible utilizar un funcion() or ....
  • Random: Si queremos generar valores aleatorios con la función rand(), es recomendable utilizar la familia de funciones mt_rand(). Esta función utiliza un algoritmo de Mersenne Twister mucho más eficiente y rápido.
  • Uso de comillas en PHP: Las comillas simples interpretan literales, sin embargo, las comillas dobles además interpolan el valor de variables. Da siempre preferencia a las comillas simples y nunca escribas símbolos de dolar sin escapar (\$) en comillas dobles, ralentiza mucho la ejecución.
  • Comprobar si existen variables: Siempre se debería utilizar una función para comprobar si existe una variable. Entre las funciones isset(), empty() y is_array(), la primera es la más rápida y eficiente.
  • Operador ===: En las comparaciones, la diferencia del operador === con el operador == es que este último hace una comprobación de tipos de variables antes. Si estás seguro de que son del mismo tipo, utiliza el primero.
  • Memoria y velocidad: Utiliza memory_get_usage() y microtime() para comprobar la velocidad y la memoria que consume tu código.
  • Comparaciones: Los if / else son siempre más rápidos que los switch / case.
  • Las siguientes funciones son alias de las de su derecha. Utilizar la función de la izquierda es mucho más lento que usar la de la derecha:
    • chop -> rtrim
    • close -> closedir
    • die -> exit
    • dir -> getdir
    • diskfreespace -> disk_free_space
    • fputs -> fwrite
    • ini_alter -> ini_set
    • is_writeable -> is_writable
    • join -> implode
    • pos -> current
    • rewind -> rewinddir
    • strchr -> strstr
    • sizeof -> count
    Curiosamente, fputs, a pesar de ser un alias, se comenta que es más rápida que fwrite.
  • Incrementos: Cuando incrementamos una variable del modo $i++ es más lento que si lo hacemos ++$i. La diferencia es que la primera forma primero usa su valor y luego lo incrementa, en cambio, la segunda primero la incrementa y luego la usa. La segunda forma es más rápida, puesto que utiliza 3 opcodes, en lugar de los 4 opcodes de la primera. Usarla cuando sea posible.
  • Imprimiendo textos: La función echo es más rápida que la función print, además de otras diferencias.
  • Expresiones regulares: El uso de regexp es muy contradictorio. Como ventajas tenemos que usan muy poca de memoria, muy potentes y ahorran mucho código. Como desventajas son muy lentas, muy difíciles para novatos o personas que no conozcan teoría de autómatas y lenguajes formales. Personalmente, aconsejo evitarlas a no ser que sean muy necesarias. Por ejemplo, la expresión regular preg_match("![0-9]+!", $foo); reconoce cualquier cadena que sea un número, esto es mucho mas eficiente usando la función ctype_digit($foo);. Las funciones strcasecmp(), strpbrk() y stripos() pueden ayudar mucho.
  • Reporte de errores: Utiliza E_STRICT como nivel de error para hacer debug en tu código PHP. Revisando los logs podrás ver todos los avisos de posibles errores con un nivel máximo.
  • Separaciones: split() permite utilizar expresiones regulares, mientras que explode() no. Intenta utilizar explode siempre antes que la función split.

Fuentes: 12 PHP tricks / PHP benchmarks / 7 tips for PHP / More PHP tips.


Sacado de: Emezeta Blog

jueves, 7 de febrero de 2008

7 errores de accesibilidad que se cometen a menudo

En Digital Web Magazine pude leer un post sobre accesibilidad que incluye un listado de los 7 errores más cometidos. Conocerlos a fondo nos permitirá no sólo no equivocarnos nosotros, sino también aplicar lo aprendido en cada sitio que realicemos, ya sea personal o para nuestros clientes. Un detalle importante sugerido es que se realicen pruebas de uso con personas, previamente al lanzamiento de un sitio. Es la única forma de realizar un estudio a fondo.

Los errores más comunes de accesibilidad:

1. Creer en productos sin ponerlos a prueba

Muchas herramientas, como algunos CMS afirman crear páginas accesibles, cuando únicamente fuerzan la aparición de etiquetas alt y generan un HTML sólo formalmente válido.

Pese a ser una ayuda, es precisa la revisión manual para que las páginas tengan una verdadera accesibilidad humana, real.

Para compensar estos problemas hay que dedicar tiempo a la formación de los desarrolladores, documentar los fallos y trucos, y hacer siempre pruebas de usuarios.

2. Tomar demasiada responsabilidad

Los sitios no suelen desarrollarse según el plan previsto. El cliente tiende a introducir cambios con facilidad. Así, no suele ser buena idea intentar acaparar la responsabilidad del desarrollo y mantenimiento del sitio.

Es preferible concienciar al cliente de la importancia de la accesibilidad, formarle y tratar de pasar la responsabilidad de que el mantenimiento sea accesible a alguien de la empresa cliente.

Se deben crear manuales de mantenimiento accesible y dejar por escrito que la accesibilidad del sitio y su mantenimiento es responsabilidad del cliente una vez entregado el producto.

Practica lo que predicas. El código entregado debe ser impecable, o cualquier error tenderá a ser repetido sistemáticamente por el cliente al mantener el sitio.

3. Planificar únicamente para el peor escenario

No hay que perder la perspectiva. Pensar únicamente en los discapacitados puede hacernos olvidar cualquier cosa que no pueda ser leída por un lector de pantalla.

Un lector de pantalla es sólo una herramienta. Asegúrate de que sabes realmente cómo funciona con tu página, pregúntale a quien lo usa a diario.

Lo importante es asegurar lo básico:

  • Semántica correcta.
  • Contenido que tiene sentido cuando se lee u oye.
  • Texto alternativo para el contenido visual.
  • Encabezados y enlaces que tengan sentido fuera de contexto.

Si no se merma lo anterior, se pueden ir introduciendo soluciones extras para:

  • Colores de bajo contraste.
  • Combinaciones de color que no ven fácilmente quienes padecen ceguera al color.
  • Texto pequeño o de tamaño fijo.
  • Elementos que se solapan al cambiar el tamaño del texto.

Los diseñadores deberían:

  • Asegurar lo básico.
  • Mostrar al cliente lo bien que funciona en todos los dispositivos.
  • Introducir la idea de realce progresivo.
  • También debe adiestrar al cliente en el manejo de plantillas para contenido (sin diseño).
  • No olvidar los buscadores.
  • Usar CSS y Javascript como herramienta de usabilidad.
  • Debe poner el diseño gráfico al servicio de la usabilidad.
  • Hacer un diseño flexible (que el sitio pueda crecer fácilmente).

4. Compartir problemas con el visitante

Los usuarios no tienen la culpa de que tú recibas mucho spam o que tu cliente sólo utilice Internet Explorer. En lugar de largos formularios anti-spam ofrécele al usuario final una vía para contactar y dale importancia a esa comunicación.

5. Intentar resolver problemas fuera de nuestra área de experiencia

El que los tamaños de letra se puedan hacer más grandes no es tu problema ni un requerimiento específico del sitio, sino de los fabricantes de navegadores y sistemas operativos. Limítate a poner un buen tamaño de letra marcado en unidades redimensionables.

Eso sí, si finalmente incorporas alguna ayuda artificial para cambiar el tamaño de letra no hagas una cosa vulgar como usar un icono muy pequeño de un color que apenas contrasta con el fondo.

6. Ocultar o anular intensificaciones de accesibilidad/usabilidad

No pasa nada malo por poner discreta pero visiblemente un enlace del tipo “saltar enlaces” que lleve directamente al contenido y se salte los enlaces de navegación que hay antes de llegar a éste. Tampoco pasa nada por por marcar claramente los diferentes estados de los enlaces.

Quizás este tipo de ayudas no contribuyen a que la página tenga un aspecto deslumbrante, pero cumple un buen propósito para muchos usuarios.

Asegúrate de que los refuerzos de accesibilidad pueden ser usados por sus destinatarios, y que si te saltas los principales estándares tienes una buena razón para ello y los test de usuarios se superan fácil.

7. Abastecer a tu cliente y no a SU cliente

Aunque el cliente sólo use Internet Explorer no debes diseñar el sitio sólo para ese navegador. Aunque el cliente es mucho más cercano para nosotros que el usuario final debemos pensar en éste, aunque aparentemente no se queje, pues los usuarios finales insatisfechos no se quejan, simplemente se van del sitio sin dejar más rastro.

No hay que complacer en todo al cliente simplemente porque es el cliente. Tú no eres su mayordomo, sino un profesional que entiende bastante de esto.

Asegúrate de tener a mano ejemplos reales e impactantes que te ayuden a explicar al cliente porqué algunas cosas no son una buena idea.

No actúes impulsivamente. Cada cambio importante debe ser probado y consultado con otros miembros de nuestro equipo.

Reduce al mínimo el número de interlocutores con el cliente para que no haya líos con lo que se le va a hacer o no al cliente y quién lo ha dicho.

Empieza un catálogo con historias exitosas de diseño centrado en el usuario. Te ayudará en el futuro.

Fuente: ElWebmaster

miércoles, 6 de febrero de 2008

jQuery: Framework JavaScript completisimo

JQuery es un framework JavaScript que facilita el trabajo con Ajax, DOM, tiene efectos, etc. Es la mezcla perfecta entre los frameworks de Ajax, como Prototype, y frameworks de efectos, como Ext, aunque se puede mezclar con Ext y Prototype.

Tiene una cierta similitud con el YUI, pero es mucho mas simple, igual de completo, y bastante mas facil de aprender.

La documentacion es buena, sin ser excelente. Pero de nuevo es un framework muy sencillo para aprender, y puede hacer cosas muy completas.


Les dejo un pequeño mini-tutorial de JQuery. Sacado del Getting Started del sitio de JQuery.


Primero necesitamos un HTML de pruebas(test.html):



<html>

<head>

<script src="jquery.js"></script>
<script>
//aca va nuestro codigo
</script>
</head>
<body>
<!-- aca va el html -->
</body>
</html>

JQuery tiene la funcion $(document).ready(callback), que una vez que esta cargada la pagina(textos, imagenes, etc) llama el callback pasado como parametro:



$(document).ready(function(){
//aca hacemos lo que queremos
});

entonces podemos hacer un link, que en vez de ir a la pagina muestre una alerta "Hola Mundo":


$(document).ready(function(){
$("a").click(function(){
alert("hola mundo");
return false;
});
});

Con $("a").click(callback) se agrega un handler para el evento onclick de todos los elementos "a"(links) del sitio. El callback que se le pasa es la funcion que hara de handler para el evento. En este caso, en vez de ir a la direcion a la que apunta el link, mostrara un alert con el texto "Hola Mundo". Si queremos que ademas de mostrar el Hola Mundo vaya a la direccion a la que apunta, sacamos el return false:



$(document).ready(function(){
$("a").click(function(){
alert("hola mundo");
});
});

Con la funcion $(elemento) se selecciona el elemento que quieran:


$("a") apunta a todos los links de la pagina.

$("#menu > a") apunta a todos los links con el ID "menu".

$("ul > li") apunta a todos los "li" que sean hijos de un "ul".


Mas informacion sobre los selectores en <a href="http://http//docs.jquery.com/Selectors">Documentacion de Selectores</a> (ingles).


AJAX:


para hacer un request ajax por el metodo post se hace de la siguiente forma:


$.post(url, variables, callback)


por ejemplo, este seria el codigo para un sistema de rating(como youtube, por ejemplo):




$(document).ready(function() {
// generate markup
$("#rating").append("Please rate: ");

for ( var i = 1; i <= 5; i++ ) $("#rating").append("<a href='#'>" + i + "</a> "); // add markup to container and apply click handlers to anchors $("#rating a").click(function(e){ // send request $.post("rate.php", {rating: $(this).html()}, function(xml) { // format and output result $("#rating").html( "Thanks for rating, current average: " + $("average", xml).text() + ", number of votes: " + $("count", xml).text() ); }); // stop normal link click return false; }); });


El codigo de rate.php seria el siguiente:

('STORE', 'ratings.dat');

function
put_contents($file,$content) {
$f = fopen($file,"w");
fwrite($f,$content);
fclose($f);
}

if(isset(
$_REQUEST["rating"])) {
$rating = $_REQUEST["rating"];
$storedRatings = unserialize(file_get_contents(STORE));
$storedRatings[] = $rating;
put_contents(STORE, serialize($storedRatings));
$average = round(array_sum($storedRatings) / count($storedRatings), 2);
$count = count($storedRatings);
$xml = "$average$count";
header('Content-type: text/xml');
echo
$xml;
}

?>

EFECTOS:


En el siguiente codigo, se usan 3 funciones:


$(document).ready(
function(){
$("a").toggle(
function(){
$(".stuff").hide('slow');
},
function(){
$(".stuff").show('fast');
}
);
});

La funcion toggle(funcion1, funcion2) cambia cual de las dos funciones que se pasan como argumentos se va a

ejecutar ante cierto evento, en este caso siendo un link, el onclick. Entonces, la primera vez

que se haga click en el link, ejecutara la funcion 1, la segunda vez ejecuta la funcion 2, y la tercera

vez ejecuta la funcion 1, etc.


La funcion show(velocidad) muestra un elemento escondido(el estilo "display: none") en la velocidad

elegida, que puede ser 'fast', 'slow', 'normal', o el tiempo deseado en milisegundos.


La funcion hide(velocidad) es igual, pero en vez de mostrar un elemento oculto, esconde un elemento visible


Esto es a grandes rasgos lo que se puede hacer con JQuery.


Sitio Oficial

Descarga

Documentacion

Tutoriales

PHPPDO 1.0 RC1

PDO (PHP Data Objects) es una extensión que provee una capa de abstracción de acceso a datos para PHP5, con lo cual se consigue hacer uso de las mismas funciones para hacer consultas y obtener datos de distintas de bases de datos. PDO fué considerada experimental hasta PHP 5.0 y a partir de PHP 5.1 se la considera estable y viene incluída por defecto en cada instalación típia de PHP5.

Pero la mayoría de los servicios de hosting compartidos no incluyen soporte de PDO en sus servidores, lo que significa que estamos estancados con las viejas funciones de las bases de datos y no podemos migrar nuestra aplicación a PDO.

Afortunadamente ya existe PHPPDO, que ofrece una capa de abstracción sobre las típicas funciones de bases de datos de PHP para tener una API muy similar a la de PDO y de esta manera contar con el camino allanado para una eventual migración completa a PDO.

Después de usar PHPPDO, migrar completamente a PDO es sólo cuestión de cambiar una sóla línea de código (incluso esto puede ser automático, con este script detecte la presencia de PDO).


Download: PHPPDO 1.0 RC1.

Fuente: VivaLinux

martes, 5 de febrero de 2008

GotApi.com: Un sitio para programadores

Bueno el primer recurso que pongo para programadores, ya que yo soy uno, es lo que mas conozco.

En GotApi.com encotrnamos una facil y rapida referencia a los lenguajes libres mas comunes, como PHP, Ruby/RoR, Perl, Pyhton, Javascript, AJAX, Java, etc. Pero una de las cosas que mas me gusto de este sitio es que tambien tiene referencia a varios Frameworks, tales como CakePHP, Struts, Prototype, JQuery, etc., asi como tambien lenguajes de bases de datos MySql y PostgreSql.

En fin, un sitio muy util a la hora de desarrollar en casi cualquier lenguaje.

Link: www.gotapi.com

Empieza una futura comunidad

Saludos a todos. Cree este blog con la idea de a futro crear una comunidad de diseñadores, programadores, administradores de redes, etc.
La intencion de este blog es comentar sobre recursos de programacion o diseño de paginas web para lograr que la web sea mejor en diseño, usabilidad, contenido, rendimiento.
¿Como puede esto ser una comunidad? Por ahora de una forma poco practica. Si quieren que algun contenido aparezca en este blog, escriban a sebastianchoren@gmail.com contandome sobre el recurso, y aparece si o si en el blog!

Espero que se sumen a esta proupuesta

Saludos

 
free web counter