"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:
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:
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.
domingo, 1 de marzo de 2009
Centrar mapa y ajustar zoom Google Maps
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());
}
Suscribirse a:
Entradas (Atom)