Code of World

jquery datepicker selector de tiempo

2010-07-28T20:28:00.003+02:00

Aqui teneis un buen datepicker para jquery, un poco al estilo de gwt.

Algunos ejemplos:

http://labs.perifer.se/timedatepicker/

Descargar/ver el código:

http://labs.perifer.se/timedatepicker/jquery.timePicker.js

jQuery 1.4 Novedades y mejoras

2010-02-15T21:59:00.002+01:00

Lanzada una nueva versión de jQuery, con novedades y más rápida que nunca:

http://jquery14.com/

http://pupunzi.open-lab.com/2010/01/15/what-is-new-in-jquery-1-4/

http://www.algodegeek.com/2010/01/15/15-caracteristicas-del-nuevo-jquery-1-4/

imagen reemplazando texto

2009-08-09T16:27:00.004+02:00

código html a substituir mediante css por una imagen:
<h2>Hola Mundo</h2>

código css:

h2 {

text-indent: -5000px;

background:url(hola_mundo.gif) no-repeat;

width: 150px; /* tamaño de la imagen */

height:35px;

overflow:hidden;

}

Codeigniter Diagrama de Flujo

2009-07-12T16:50:00.002+02:00

Index.php sirve de front controller, inicializa los recursos necesarios para correr codeigniter.
El Router examina la petición HTTP para determinar que debe hacer con ella.
Si existe el archivo en la caché, es mandado directamente al navegador, saltándose el proceso normal de ejecución.
Security. Antes que el controlador sea cargado, la petición HTTP y cualquier información enviada por el usuario es filtrada por seguridad.
El controlador carga el modelo, las librerías base, plugins, helpers, y los recursos necesarios para los procesos especificados en la petición.
La vista es renderizada por el sistema en el navegador y si cacheo está habilitado, es guardad para próximas peticiones.

La información ha sido extraída de la guía de usuario de codeigniter: http://codeigniter.com/user_guide/overview/appflow.html

plugin colorpicker jquery ui

2009-06-25T16:55:00.004+02:00

jaEste plugin permite seleccionar colores de la misma forma en que se realiza en photoshop.
La web del proyecto dispone de algunos ejemplos:
http://eyecon.ro/colorpicker/

Ejemplo simpletip (tooltip) plugin jquery

2009-06-11T20:08:00.005+02:00

El siguiente ejemplo utiliza el plugin para crear tooltips llamado Simpletip.
Con este código conseguimos poner a una tabla en cada una de sus celdas un tooltip diferente para cada fila, el resultado es algo así:
También podemos cargar el contenido del tooltip por ajax.
Aquí el código rápido de ejemplo:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>


<title>TOOLTIP</title>

<style type="text/css">

table tr td{ background-color:yellow;}

.tooltip{ position: absolute; top: 0; left: 0; z-index: 3; display: none; background-color:red; }

</style>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>

<script type="text/javascript" src="http://jquery-simpletip.googlecode.com/files/jquery.simpletip-1.3.1.js"></script>

<script type="text/javascript">

  $(function(){

      $.each($("table tr td"),function(){

          var cadena = $(this).parent().attr("id");

          var pos = cadena.indexOf("_");

          var id_producto = cadena.substr(pos+1);

          $(this).simpletip({content: $("#tooltip_"+id_producto).html(), fixed: true , position: ["100", "-25"]  });


      });

  });

</script>

</head>

<body>

  <table>

      <tr>

          <th>Nombre</th>

          <th>Dirección</th>


      </tr>

      <tr id="fila_1"><td>Pepe lopez</td><td>c/ el callejon 292</td></tr>

      <tr id="fila_2"><td>Pepe Martinez</td><td>Perrito picasso 92</td></tr>


  </table>

  <div class="tooltip" id="tooltip_1">Tooltip de  prueba1<img width="60" height="30" src="http://www.gamedealdaily.com/product_images/ps3sixaxis.jpg" alt="" /></div>

  <div class="tooltip" id="tooltip_2">Tooltip de  prueba2<img width="60" height="30" src="http://www.gamedealdaily.com/product_images/ps3sixaxis.jpg" alt="" /></div>


</body>

</html>

div con bordes redondeados y ancho fijo

2009-06-08T18:32:00.003+02:00

html de ejemplo:


<div class="box">

<h2>Cabecera</h2>

<p>Contenidot</p>

</div>

Imágenes necesarias para el css:

código css:

.box {

width: 418px;

background: #fffce7 url(img/bottom.gif) no-repeat left bottom;

}

.box h2 {

padding: 10px 20px 0 20px;

background: url(img/top.gif) no-repeat left top;

}

.box p {

padding: 0 20px 10px 20px;

}

Subida múltiple de ficheros con SWFUpload

2009-05-20T20:10:00.003+02:00

Esta librería combina lo mejor de flash y javascript para realizar subida múltiple de ficheros. Podemos incluso crear una barra de progreso con javascript.
La documentación y toda la información necesaria se puede encontrar en la web del proyecto.
Las demos están aquí.

¿cuándo usar iteradores?

2009-05-02T12:35:00.002+02:00

¿Cuándo usar iteradores?
Hay tres casos en los que usar iteradores es extremádamente útil:

Utilizamos un paquete o librería que devuelve un iterador.
Cuando queremos procesar un vasto número de elementos.
Cuando no hay otra manera de obtener todos los elementos de una colección con una sóla llamada.

La alternativa a los iteradores son los vectores (arrays). Los iteradores aportan una interfaz uniforme y encapsulación. Si utilizamos vectores podemos beneficiarnos de las funciones de php, cómo sort, array_search, array_combine, array_merge ... Para la gestión de muchos elementos, hay que tener en cuenta que el iterador gestiona mejor la memoria (sólo asigna memoria para el elemento actual).

iterators (iteradores) en PHP5

2009-04-30T11:09:00.002+02:00

Ejemplo de iteradores de la librería SPL, a partir de php5 está incluída por defecto.


<?php

class Animal{

    private $name;

    function __construct($name){

        $this->name =  $name;


    }

    function get_name(){

        return $this->name;

    }

}

/*** array de objetos ***/

$perro = new Animal('perro');


$gato = new Animal('gato');

$cerdo = new Animal('cerdo');

$array = array($perro, $gato);




/*** crear el array de objetos ***/

$arrayObj = new ArrayObject($array);



/*** añadir un objeto al array ***/


$arrayObj->append($cerdo);



/*** iterar el array ***/

for($iterator = $arrayObj->getIterator();


 /*** checkear si es válido ***/

 $iterator->valid();

 /*** mover al siguiente objeto del array ***/


 $iterator->next())

{

/*** imprimir la posición y el valor actual del array de objetos ***/


echo $iterator->key() . ' -> ' . $iterator->current()->get_name() . '<br />';


}



?>

El resultado es:

0 -> perro

1 -> gato

2 -> cerdo

Metodologías ágiles de desarrollo

2009-04-19T12:13:00.002+02:00

Las metodologías ágiles actualmente más populares:

Recursos php / php resources

2009-04-01T16:49:00.004+02:00

PHP Scripts

W3Schools Tutorial

Good PHP Tutorials

Php.net

PHP Video Tutorials

PHP Coding Tutorials

Introduction to OOP using PHP

Beginners PHP

php user class

300+ free-use PHP scripts - E...

Phpfreaks

Phpdeveloper.org

Zend

Phphacks.com

Top 10 CMS List

codewalkers.com

Php resources

jQuery Tutorials for Beginner...

PHP Design Patterns Examples

Php resource index

Phpbuilder.com

Tizag.com Simple PHP Tutorial

Information for PHP

PHP for Beginners

CakePHP Framework

free web developer resources

Prado framework

Pear php

PHP patterns

How To take backup of your we...

Freelance PHP Programmers

sendcard - free ecard script

WAMP, PHP 5 for Windows

PHPFrance

DevNetwork Forums

roScripts

symfony framework

PHP Sense

Sourcebench - building a bett...

Makebeta - Tutorials and Tool...

Free Directory Script

Docebo

AllSyntax.com

Bytes.com | PHP Development F...

Search PHP Scripts

New Earth Online

PHP on Trax - MVC Webframewor...

Rate an Article Script

Google Page Rank Script

PHP Comment Script

phpLinkCheck - Check if a lin...

A MVC (Model-view-controller)...

Planet PHP - news

Introduction To PHP 5

Php 4 -> 5 Migration Guide

Phpclasses.org

OO Overview part II

OO Overview part I

Php Freakz

Joomla PHP CMS

Dutch PHP resource

PHP Web Scripts

Jaslabs: High performance php

PHP Resources

XAMPP for Windows

XAMPP

Uyusuk'un Sanalhaneesi

SQLite tutorial for PHP 5

phpRiot()

object persistence

symfony - MVC Framework for l...

HOT php Scripts

Sixthsense, integrando la información con el mundo real

2009-03-28T16:53:00.003+01:00

Sixthense es un proyecto desarrollado por MIT, ellos lo describen cómo:

"SixthSense" is a wearable gestural interface that augments the physical world around us with digital information and lets us use natural hand gestures to interact with that information.

En el video podemos ver unas demostraciones:

Autocompletar campo / input de texto con jQuery y php

2009-03-22T18:19:00.001+01:00

Archivo autocomplete.php:

<?php

if
(strlen($_GET['search-text'])

< 1)
{

print
'[]';

exit;

}

$terms
= array(

'jquery',

'javascript',

'java',

'xml',

'rpc',

'xhtml',

'html',

'php'

);

$possibilities
= array();

foreach
($terms as

$term) {

if
(strpos($term,
strtolower($_GET['search-text']))===

0) {

$possibilities[]
= "'".
str_replace("'",

"\\'",
$term)

."'";

}

print
('['.
implode(',
', $possibilities)
.']');

Archivo que llama a autocomplete.php para obtener el listado de sugerencias:

<html>

<head>

<title>Auto
Complete</title>

$(document).ready(function()
{

$('#search-text').attr('autocomplete',

'off');

var $autocomplete
= $('<ul
class="autocomplete"></ul>')

.hide()

.insertAfter('#search-text');

$('#search-text').keyup(function(){

$.ajax({

'url':
'autocomplete.php',

'data':

{'search-text':
$('#search-text').val()},

'dataType':
'json',

'type':
'GET',

'success':
function(data)
{

if (data.length){

$autocomplete.empty();

$.each(data,

function(index,
term){

$('<li></li>').text(term).appendTo($autocomplete)

.click(function()
{

$('#search-text').val(term);

$autocomplete.hide();

});

$autocomplete.show();

}

});

</script>

</head>

<body>

</body>

</html>

Manejo del DOM con JQuery en pocas palabras

2009-03-18T18:40:00.002+01:00

Crear nuevo elementos html utilizar $() (función factory).
Insertar un nuevo/s elemento/s, dentro de cada elemento/s correspondiente/s:

.append()
.appendTo()
.prepend()
.prependTo()

Insertar nuevo/s elemento/s adyacentes al elemento/s correspondiente/s:

.after()
.insertAfter()
.before()
.insertBefore()

Insertar nuevo/s elemento/s cerca del elemento/s correspondiente/s:
- .wrap()
- .wrapAll()
- .wrapInner()
Reemplazar cada elemento/s correspondiente/s con un nuevo/s elemento/s:
- .html()
- .text()
- .replaceAll()
- .replaceWith()
Eliminar elemento/s para cada correspondiente/s elemento/s:
- .empty()
Eliminar para cada correspondiente/s elemto/s y sus descendientes, pero sin borrarlos del DOM:
- .remove()

Más información

prettyPhoto a Jquery lightbox clone

2009-03-15T18:22:00.003+01:00

Este plugin de jquery nos sirve para mostrar galerías o imágenes de forma modal, al estilo de lightbox.

Es compatible con los siguientes navegadores:

Firefox 3.0 (Mac/PC/Linux)
Firefox 2.0 (Mac/PC)
Safari 3.1.1 (Mac)
Opera 9+ (Mac/PC)
Internet Explorer 6.0 (PC)
Internet Explorer 7.0 (PC)

Demo y descarga

Selenium IDE

2009-03-09T22:29:00.002+01:00

Selenium es, en pocas palabras, un juego de herramientas que permite probar sistemas web de manera automatizada. Las pruebas que realiza son como las que haría cualquier usuario desde un navegador, con la ventaja de que las hace mucho mas rápido y nos evita el trabajo repetitivo de probar una y otra vez lo mismo “a mano”.

Las características que nos ofrece son:

Grabación y reproducción de casos de test
Selección inteligente de campos mediante sus ids, nombres o XPath
Autocompletado para todos los comandos de Selenium
Paso a paso
Debug y puntos de parada
Guardar los test como HTML, php, C# ...

Podemos, por ejemplo, rellenar un formulario y capturar todo, para reproducirlo posteriormente, además introduciendo nuevos comandos en las pruebas que grabamos.

Sólo se puede grabar con firefox. Pero podemos lanzar las pruebas en distintos navegadores: ie, safari, opera…con el selenium core.

Dispone de librerías en distintos lenguajes para utilizar los comandos de forma nativa, con selenium remote control. En las pruebas que guardamos las podemos obtener en código C# con Nunit, Phpunit con php..

También se puede lanzar las pruebas desde línea de comandos para verificar en distintos navegadores y sin necesidad de abrirlos.

Pequeña introducción con asp .NET

Video de introducción

Paginación con Codeigniter

2009-03-06T20:31:00.005+01:00

En el ejemplo leemos de una base de datos que contiene una tabla llama news y dispone de dos campos str_title_new y pk_new(identificador, clave primaria). Mostramos el título de la noticia y el paginador.

<?php class News extends Controller { function News() { parent::Controller(); $this->load->helper('url'); } function list_news() { $this->load->library('pagination'); $this->load->model('news_model');

$config['base_url'] = site_url('news/list_news/'); $config['total_rows'] = $this->news_model->get_total_number_news(); $config['per_page'] = '3'; //Número de noticias por página $config['num_links'] = '3'; //Número de enlaces antes y después de la página actual $config['first_link'] = '<<'; //Texto del enlace que nos lleva a la página $config['last_link'] = '>>'; //Texto del enlace que nos lleva a la última página$this->pagination->initialize($config); $query = $this->news_model->get_news($config['per_page'],

$this->uri->segment(3)); //le pasamos el total de elementos por página y el offset foreach ($query->result() as $row) { echo $row->str_title_new; }

echo '<p>'.$this->pagination->create_links().'</p>'; //de esta forma imprimimos el paginador } } ?>

Y el modelo:

<?php class News_model extends Model{ function News_model() { parent::Model(); $this->load->database(); } function get_news($number_items,$offset) { $query = $this->db->get('news',$number_items,$offset); return $query; }

function get_total_number_news()

{ return $this->db->count_all('news'); } } ?>

Ubiquity add-on para Firefox

2009-03-03T15:40:00.002+01:00

Mozilla labs está desarrollando un add-on para firefox que permitirá extender el navegador con nuevas funcionalidades.
En el video podemos ver cómo hoy en día no podemos ni mandar un mapa interactivo de google maps. Podemos compartirlo pero sólo mediante un enlace. Los mashup han sido una revolución y con este add-on se muestra que todavía quedan muchos puntos que mejorar o en los que innovar en la web 2.0.

Ubiquity for Firefox from Aza Raskin on Vimeo.

Centrar mapa y ajustar zoom Google Maps

2009-03-01T17:39:00.006+01:00

Para centrar el mapa y ajustar el zoom de forma dinámica con la api de google maps, debemos utilizar el objeto GLatLngBounds.
En el ejemplo creamos 3 marcadores y añadimos una ventana html a cada uno, con el título.
Con bounds.extend(latlng) lo que hacemos es ampliar el mapa para que incluya el punto.
Según la documentación:

Amplía este rectángulo de modo que contenga el punto proporcionado. En sentido longitudinal, se amplía en la dirección más pequeña de las dos posibles. Si son iguales, se amplía en el límite este.


if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(38.34741700000001,-0.48521199999999), 13);
var bounds = new GLatLngBounds();

var p0 = new GLatLng(38.34741700000001,-0.48521199999999);
var m0 = new GMarker(p0);
bounds.extend(m0.getPoint());
var html0 = '<div><h4>El Foc Alacant</h4></div>';
GEvent.addListener(m0,'click', function(){
m0.openInfoWindowHtml(html0);
});
map.addOverlay(m0);

var p3 = new GLatLng(38.53535099999999,-0.13092299999999568);
var m3 = new GMarker(p3);
bounds.extend(m3.getPoint());
var html3 = '<div><h4>La Cava Aragonesa</h4></div>';
GEvent.addListener(m3,'click', function(){
m3.openInfoWindowHtml(html3);
});
map.addOverlay(m3);

var p4 = new GLatLng(38.344663999999995,-0.48466999999999416);
var m4 = new GMarker(p4);
bounds.extend(m4.getPoint());
var html4 = '<div><h4>Restaurante Ibéricos</h4></div>';
GEvent.addListener(m4,'click', function(){
m4.openInfoWindowHtml(html4);
});
map.addOverlay(m4);

//Ajustar el zoom según los límites
map.setZoom(map.getBoundsZoomLevel(bounds));

 //Centrar el mapa de acuerdo a los límites
map.setCenter(bounds.getCenter());
}

Menú e interfaz Mac Os con jQuery

2009-02-27T19:57:00.003+01:00

iconDock es un plugin de jQuery que simula el “efecto dock” de Mac Os.

Demos:

http://icon.cat/software/iconDock/0.8b/dock.html

También hay una serie de extensiones que simulan la interfaz del sistema operativo leopard:

Demo interfaz leopard

Web con el tutorial

mParallax para Mootools

2009-02-26T20:11:00.006+01:00

Este plugin permite crear una superposición de capas que simulan un paisaje con profundidad y además con movimiento cuando pasamos el cursor sobre él. Sólo con javascript (mootools y el citado plugin mParallax).
La descripción según podemos leer en la web del proyecto:

mParallax is an adaptation for MooTools framework of jParallax whose its author, Stephen Band, describes it like "jParallax turns a selected element into a 'window', or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

Con ie7 y firefox funciona, pero en mi versión de ie6 da problemas.

En estos enlaces se puede ver funcionando, es muy interesante:

Demo con imágenes

Demo con texto

Titanium

2009-02-25T16:03:00.003+01:00

Appcelerator Titanium es una plataforma de código abierto que sirve para desarrollar rich applications de escritorio usando tecnologóas cómo html, css, javascript, flash o silverlight.

Aquí tenemos una pequeña introducción:

Se puede descargar desde la web del proyecto http://titaniumapp.com/download

Optimización de la velocidad de carga

2009-02-23T19:44:00.003+01:00

Siempre he tenido curiosidad porque tarda más o menos tiempo en cargar una web. Aquí tenéis una pequeña explicación de donde se inverte el tiempo y cómo se realizan las peticiones.

Menos del 10-20% del tiempo de carga de una página se invierte en la descarga del html. El resto, un 80-90% del tiempo es necesario para la carga de componentes de la página (imágenes, scripts, css..).

Para optimizar el tiempo de carga, las principales cosas que tenemos que tener en cuenta son:

La especificación HTTP/1.1 define que los navegadores no pueden descarga más de dos componentes en paralelo por hostname. Por ejemplo, si se sirven imágenes desde múltiples hostnames, podemos obtener más de 2 descargas a la vez (en paralelo).
En cambio con la descarga de scripts no ocurre igual, el navegador no empieza otras descargas, incluso si utilizan diferentes hostnames. Esto es debido a que en muchas ocasiones, los navegadores bloquean las peticiones HTTP adicionales mientras se están descargando los scripts.
Aunque la página esté en caché y no haya demasiada actividad de descarga, se producen intervalos de tiempos en los que no se realiza descarga, en vez de eso, el tiempo se gasta por el navegador procesando el parseo del html, javasctipt y el css, además de la carga de los componentes desde su caché.

En esta web hay más información, sobre las best practices (las mejores prácticas):

http://developer.yahoo.com/performance/rules.html

Un add-on para firefox que analiza páginas, te dice porque son lentas y te dice cómo mejorarlo. (necesita firebug):

http://developer.yahoo.com/yslow/

Mapeo relacional de objetos php

2009-02-22T19:54:00.005+01:00

ORM (Object relational mapping o mapeo relacional de objetos) es una técnica utilizada en algunos lenguajes de programación para convertir datos entre el sistema de tipos utilizado en un lenguaje de programación orientado a objetos y el utilizado en una base de datos relacional. En la práctica esto crea una base de datos orientada a objetos virtual, sobre la base de datos relacional. Esto posibilita el uso de las características propias de la programación orientada a objetos (básicamente herencia y polimorfismo). Un 35% de tiempo de desarrollo de software está dedicado al mapeo entre objeto y su correspondiente relación. Hay paquetes comerciales y de uso libre disponibles que desarrollan el mapeo relacional de objetos, aunque algunos programadores prefieren crear sus propias herramientas ORM.

Proyectos en php: