La optimización de imágenes es un práctica obligada en la publicación en línea, que trae consigo ventajas como mejorar la navegación del lector, reducir el tiempo de carga o hasta un mejor posicionamiento. La forma tradicional es usar un editor gráfico, como Photoshop o Gimp, sin embargo Yahoo! tiene un alternativa bastante cómoda: Smush it.

smush-it-optimizar-imagenes

Smush It es un sencilla aplicación que permite optimizar imágenes de manera masiva. Se pueden indicar las imágenes desde nuestro disco duro o desde una URL, el resultado es un archivo zip con todas las imágenes optimizadas.

La disminución de tamaño depende de la imagen, pero normalmente va de un 10% hasta 60% y la pérdida de calidad es a penas notoria.

Una alternativa rápida si necesitamos optimizar grandes cantidades de imágenes.

Sitio: smushit.com

chrome-experiment

Los estándares web están teniendo una transformación, como es el caso de  HTML5 vs Flash, es por de más cierto que HTML5 tiene mucho potencial para establecerse como estándar oficial y que quizás cuando eso pase Flash tendrá que haber encontrado un mercado de nicho propio. Mientras eso sucede los invito a visitar esta interesante galería de Javascript de alto nivel, Chrome Experiment que tienen como objetivo recoger los mejor de Javascript y de estándares abiertos como HTML5, Canvas, SVG.

La idea básica es demostrar que hay diseñadores usándolos, que hacen la web más rápida, sencilla y eficiente, en pocas palabras, según los propios autores del sitio, tratan de ser congruentes con el espíritu de Chrome. El sitio es por demás recomendable, les dejo un videos de lo que pueden encontrar y en el sitio todo pueden probarlo por ustedes mismo, no está por demás advertir que deberán de tener un navegador que cumpla con los últimos requerimientos en cuanto a estándares para poder tener una experiencia completa.

Continuar leyendo →

introduccion-code-igniter

Este artículo es una excelente colaboración de Jesus Yepes, segundo de la serie de artículos de introducción a Code Igniter.

Bienvenidos a la segunda parte de nuestra introducción a Code Igniter. En la primera parte, vimos muy por encima qué es Code Igniter y cómo usarlo, cuales son sus características y modo de uso, qué es MVC, cuales son los principales ficheros de Code Igniter para su configuración. En esta segunda parte, expondremos un par de ejemplos sobre cómo usar las vistas, cuándo, y cómo podemos hacer que el desarrollo de nuestra aplicación web sea más rápido gracias a estas.

Empezamos, ¿qué es una vista?

Las vistas se almacenarán en nuestro directorio /application/views de nuestro servidor local. Las vistas son, básicamente, código html. Vamos a hacer un ejemplo, que simplemente llame a la vista blogandweb.php y muestre su contenido, que será simplemente "Buenas, usuarios de blog and web!".

Varias notas: nos vamos a crear un controlador, que será el que usemos por defecto, y lo llamaremos "controlador" (Revisa el primer capítulo si tienes dudas, de todas formas, los controladores van en application/controllers/). El controller, Controlador.php.

class Controlador extends Controller {

function __construct()
{
parent::Controller();
}
function index()
{
$this->load->view('blogandweb');
}
}

La vista, blogandweb.php

<html>
<head>
<title>Bienvenidos a blog and web!</title>
</head>
<body>

<h1>Bienvenidos a blog and web!</h1>

</body>
</html>

Una vez creados, nos iremos a application/config/routes.php, y estableceremos el controlador por defecto a “controlador”


$route['default_controller'] = "controlador";
$route['scaffolding_trigger'] = "";

Tal y como dijimos en el capítulo uno, cuando alguien entre directamente a nuestra web y no pida explícitamente qué controlador y qué método quiere ver, por defecto usaremos el controlador “controlador” y el método por defecto (vacío), es decir, la función index() de ese controlador.

code-igniter-hola-mundo

El ejemplo no es muy útil, pero es un comienzo…

Pasándole variables a nuestra vista

Continuar leyendo →

perfiles-firefox

Firefox esconde muchos secretos, pero una de las funcionalidades menos conocidas y más útiles de Mozilla Firefox para aquellos que desarrollan páginas web es el uso de perfiles de usuario. Firefox permite crear perfiles específicos que incluyen aquellos plugins, temas o extensiones que un usuario puede necesitar. Además, tanto los marcadores, como el historial de navegación, descargas, etc., son exclusivos de este nuevo perfil.

¿Y para qué quiero yo perfiles? Por ejemplo, puede ser conveniente arrancar un perfil de Firefox con todos aquellos plugins que se usan para desarrollo o pruebas, y tener otro perfil para uso más general y sin tantos plugins. Así ahorramos consumo de memoria y mantenemos nuestro perfil por defecto a prueba de fallos. En este artículo os mostraré cómo configurar un perfil, cómo arrancarlo o cómo tener dos perfiles abiertos a la vez.

Lo primero es cerrar Fifefox, asegurándonos que no se está ejecutando en segundo plano. Luego, y en función del sistema operativo ejecutamos “firefox.exe -profilemanager“:

Aministrador-perfiles-firefox

Esto nos abrirá esta ventana:

Aministrador-perfiles-firefox-2

Continuar leyendo →

La velocidad de carga de un sitio web es uno de los factores más importantes para una buena experiencia al usuario, adicionalmente, Google ya ha comentado que es un factor que toma en cuenta en el posicionamiento en su buscador.

tiempo-de-carga

Una manera hasta divertida de leer la velocidad de carga es Which loads faster? con el que puedes poner a competir tu sitio con otro y ver quien carga más rápido. Incluso puedes comparar con varias repeticiones (repeat) o hacer una competencia con varias páginas.

Muy recomendado el uso de la extensión Speed page o Speed tracer para evaluar y disminuir el tiempo de carga de un sitio web.

Los reto a ganarle a Blog and Web :P

Sitio: whichloadsfaster.com

Blog and Web es un blog de Blógstica

Términos de uso - Política de privacidad