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, 9 de agosto de 2009
imagen reemplazando texto
código html a substituir mediante css por una imagen:
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.
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());
}
viernes, 27 de febrero de 2009
Menú e interfaz Mac Os con jQuery
iconDock es un plugin de jQuery que simula el “efecto dock” de Mac Os.
Demos:
También hay una serie de extensiones que simulan la interfaz del sistema operativo leopard:
Demos:
También hay una serie de extensiones que simulan la interfaz del sistema operativo leopard:
jueves, 26 de febrero de 2009
mParallax para Mootools
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:
Con ie7 y firefox funciona, pero en mi versión de ie6 da problemas.
En estos enlaces se puede ver funcionando, es muy interesante:
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:
miércoles, 25 de febrero de 2009
Titanium
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
lunes, 23 de febrero de 2009
Optimización de la velocidad de carga
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é.
Un add-on para firefox que analiza páginas, te dice porque son lentas y te dice cómo mejorarlo. (necesita firebug):
domingo, 22 de febrero de 2009
Mapeo relacional de objetos php
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:
sábado, 21 de febrero de 2009
Generador imágenes dinámicas (Codeigniter)
<?php
class Imagenes extends Controller {
function Imagenes()
{
parent::Controller();
}
function getimage(){
$this->load->database();
$db_request = $this->db->query('SELECT * FROM imagenes WHERE id_imagen='.$this->uri->segment(3));
$fila = $db_request->row();
$fichero_imagen = $fila->nombre_imagen;
$path = './documentos-imagenes/';
if(file_exists($path.$fichero_imagen)){
$config['image_library'] = 'gd2';
$config['source_image'] = './documentos-imagenes/'.$fichero_imagen;
$config['maintain_ratio'] = FALSE;
$default = array('width', 'height');
$array= $this->uri->uri_to_assoc(4, $default);
$config['width'] = $array['width'];
$config['height'] = $array['height'];
$config['dynamic_output'] = TRUE;
$config['quality'] = 90; //calidad de 0 a 100%
$this->load->library('image_lib', $config);
if (!$this->image_lib->resize())
{
echo $this->image_lib->display_errors();
}
}
}
}
/* End of file imagenes.php */
/* Location: ./system/application/controllers/imagenes.php */
Ahora podemos generar imágenes, por ejemplo en cualquier otra página php:
$this->load->helper('url'); // Utilizamos el url helper
echo '<img src="'.site_url("imagenes/getimage/1/width/90/height/100").'" />';
echo '<img src="'.site_url("imagenes/getimage/2/width/100/height/150").'" />';
Le pasamos el identificador y el tamaño. Podemos también añadirle más parámetros y opciones.
De forma sencilla y rápida podemos tener cualquier imagen, adaptada al tamaño que queramos, en cualquier sitio de la web.
martes, 17 de febrero de 2009
Carrusel con jQuery y php
Archivo que muestra el carrusel
<?php
include_once 'jcarousel_functions.php';
$jcarousel_visible = 3;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<!--
jQuery library
-->
<script type="text/javascript" src="lib/jquery.js"></script>
<!--
jCarousel business javascript
-->
<script type="text/javascript" src="lib/jcarousel.lite.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function() {
$(".carousel").jCarouselLite({
auto: 2000,
speed: 800,
btnNext: ".next",
btnPrev: ".prev",
scroll: <?php echo $jcarousel_visible;?>,
visible: <?php echo $jcarousel_visible;?>
});
});
/* ]]> */
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Carrosel con jQuery</h2>
<h3>Ejemplo de implementación con php</h3>
<div class="carousel">
<ul class="jcarousel-list">
<?php
$jcarousel_items = jcarousel_getItems();
foreach ($jcarousel_items as $item) {
echo '<li><p>'.$item['title'].'</p><a href="'.htmlspecialchars($item['src']).'"><img src="'.htmlspecialchars($item['src']).'" width="113" height="125" alt="'.htmlspecialchars($item['title']).'" /></a></li>';
}
echo '<li></li>';
?>
</ul>
</div>
<button class="prev"><<</button>
<button class="next">>></button>
</div>
</body>
</html>
Fichero con las funciones
<?php
$jcarousel_items = array(
array(
'title' => 'item 1',
'src' => 'images/image1.jpg',
),
array(
'title' => 'item 2',
'src' => 'images/image2.jpg',
),
array(
'title' => 'item 3',
'src' => 'images/image3.jpg',
),
array(
'title' => 'item 4',
'src' => 'images/image4.jpg',
),
array(
'title' => 'item 5',
'src' => 'images/image5.jpg',
),
);
/**
* This function returns the number items. Typically, this
* would fetch it from a database (SELECT COUNT(*) FROM items) or
* from a directory.
*/
function jcarousel_countItems()
{
global $jcarousel_items;
return count($jcarousel_items);
}
/**
* This function returns the items. Typically, this
* would fetch it from a database (SELECT * FROM items LIMIT $limit OFFSET $offset) or
* from a directory.
*/
function jcarousel_getItems($limit = null, $offset = null)
{
global $jcarousel_items;
// Copy items over
$return = $jcarousel_items;
if ($offset !== null) {
$return = array_slice($return, $offset);
}
if ($limit !== null) {
$return = array_slice($return, 0, $limit);
}
return $return;
}
?>
Más información aquí
Descargar ejemplo
Suscribirse a:
Entradas (Atom)