jQuery Mobile es fácil de usar, rápido y permite desarrollar aplicaciones web con la apariencia de una aplicación de smartphone.
Sus ventajas:
-Sintaxis familiar y consiste a jQuery.
-Ligera y uso mínimo de dependencias con imágenes.
-Potente sistema de themes framework, para dar un estilo de forma sencilla.
-Soporte táctil e interacción de ratón.
-Arquitectura modular.
domingo, 2 de diciembre de 2012
miércoles, 28 de julio de 2010
jquery datepicker selector de tiempo
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:
lunes, 15 de febrero de 2010
jQuery 1.4 Novedades y mejoras
Lanzada una nueva versión de jQuery, con novedades y más rápida que nunca:
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/
domingo, 9 de agosto de 2009
imagen reemplazando texto
código html a substituir mediante css por una imagen:
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;
}
domingo, 12 de julio de 2009
Codeigniter Diagrama de Flujo
- 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.
jueves, 25 de junio de 2009
plugin colorpicker jquery ui
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/
La web del proyecto dispone de algunos ejemplos:
http://eyecon.ro/colorpicker/
jueves, 11 de junio de 2009
Ejemplo simpletip (tooltip) plugin jquery
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:
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>
lunes, 8 de junio de 2009
div con bordes redondeados y ancho fijo
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;
}
miércoles, 20 de mayo de 2009
Subida múltiple de ficheros con SWFUpload
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í.
La documentación y toda la información necesaria se puede encontrar en la web del proyecto.
Las demos están aquí.
sábado, 2 de mayo de 2009
¿cuándo usar iteradores?
¿Cuándo usar iteradores?
Hay tres casos en los que usar iteradores es extremádamente útil:
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.
jueves, 30 de abril de 2009
iterators (iteradores) en PHP5
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
domingo, 19 de abril de 2009
miércoles, 1 de abril de 2009
sábado, 28 de marzo de 2009
Sixthsense, integrando la información con el mundo real
Sixthense es un proyecto desarrollado por MIT, ellos lo describen cómo:
En el video podemos ver unas demostraciones:
"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:
domingo, 22 de marzo de 2009
Autocompletar campo / input de texto con jQuery y php
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>
<script
type="text/javascript"
src="js/jquery.js"></script>
<script
type="text/javascript">
$(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>
<input
id="search-text"
type="text"
name="search-text"
/>
</body>
</html>
miércoles, 18 de marzo de 2009
Manejo del DOM con JQuery en pocas palabras
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()
domingo, 15 de marzo de 2009
prettyPhoto a Jquery lightbox clone
lunes, 9 de marzo de 2009
Selenium IDE
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
viernes, 6 de marzo de 2009
Paginación con Codeigniter
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');
}
}
?>
martes, 3 de marzo de 2009
Ubiquity add-on para Firefox
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.
Suscribirse a:
Entradas (Atom)