Agregar descripción en la parte inferior de las imágenes web con CSS

EjemploAlgunos sitios web dentro de sus artículos integran un cuadro con una imagen y una pequeña descripción en la parte inferior de esta. Esto es ventajoso por que un usuario normal por lo general lo primero que mira no es texto sino contenido gráfico, y que mejor si este está acompañado de una pequeña descripción de lo que trata. Así se sentirá impulsado a leer el artículo completo. Además es una buena práctica SEO, pues estos textos cercanos a las imagenes sirven para los motores de búsqueda de imágenes.

¿Cómo lograrlo?

Con unas simple líneas CSS y HTML podemos lograr añadir textos descriptivos debajo de las imágenes.

Primero el código de estilos, dentro de las etiquetas <head>:

 <style type="text/css">
.picture {
background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif;
}
.picture img {
border: 1px solid #CCCCCC;
vertical-align:middle;
margin-bottom: 3px;
}
.right {
margin: 0.5em 0pt 0.5em 0.8em;
float:right;
}
.left {
margin: 0.5em 0.8em 0.5em 0;
float:left;
}
</style>

Ahora dentro del <body> de nuestro documentos html:

<div class="picture left" style="width:220px;"> 
<img src="marte.jpeg" alt="Planeta Marte" width="210" height="210" /> <br />
Marte, apodado a veces como el Planeta Rojo, es el cuarto planeta del Sistema Solar.
</div>

Por supuesto luego de esas líneas puede venir en contenido completo del artículo ó tema que trata la página.

Podemos colocar la imagen a la izquierda ó derecha, como gustemos y se vea mejor. He aquí un ejemplo. ¿Verdad que se ve mas atractiva una página web de esta forma?

PHPExcel, libreria PHP para leer y escribir archivos de Excel

Creo que el título lo dice todo. Esta librería permite leer y manipular el contenido de una hoja de cálculo hecha con Microsoft Excel. Vamos directo al grano y veamos un ejemplo. Usaremos Microsoft Office Excel 2007 para la hoja de cálculo, ósea el archivo tendrá la extensión xlsx. También usaremos la versión 5.2.x de PHP.

1. Descargue la libreria PHPExcel

Descargamos la ultima versión. Después de descomprimirla ubicamos la carpeta Clases y la movemos a una carpeta donde pondremos nuestro ejemplo para este caso se llamará phpexcel_ejemplo. De tal manera que quede así: \ruta_servidorphpexcel_ejemploClases.

2. Creamos un documentos de Excel

La hoja de cálculo tendrá el siguiente formato: (descargar archivo de ejemplo). La ubicamos en la carpeta phpexcel_ejemplo.

3. Creamos la interfaz web

Mediante HTML creamos una formulario para el ingreso de los valores, y también escribimos código para usar la librería PHPExcel. Este archio lo guardamos con el nombre de index.php en la carpeta phpexcel_ejemplo.

 <?php
/** Incluir la ruta **/
set_include_path(get_include_path() . PATH_SEPARATOR . './Classes/');

/** Clases necesarias */
require_once('PHPExcel.php');
require_once('PHPExcel/Reader/Excel2007.php');

// Variables de la página
$_VIEWDATA = array(
'v_precioTotal' => 0,
'v_descuento' => 0,
'v_precioFinal' => 0
);

// Petición de cálculo?
if (isset($_REQUEST['boton_calcular'])) {
// Cargando la hoja de cálculo
$objReader = new PHPExcel_Reader_Excel2007();
$objPHPExcel = $objReader->load("calculo.xlsx");

// Asignar hoja de calculo activa
$objPHPExcel->setActiveSheetIndex(0);

// Asignar data
$objPHPExcel->getActiveSheet()->setCellValue('automatico', $_REQUEST['transmision_Automatica']);
$objPHPExcel->getActiveSheet()->setCellValue('cuero', $_REQUEST['asientos_Cuero']);
$objPHPExcel->getActiveSheet()->setCellValue('suspension', $_REQUEST['suspension']);

// Calculos
$_VIEWDATA['v_precioTotal'] = $objPHPExcel->getActiveSheet()->getCell('total')->getCalculatedValue();
$_VIEWDATA['v_descuento'] = $objPHPExcel->getActiveSheet()->getCell('descuento')->getCalculatedValue();
$_VIEWDATA['v_precioFinal'] = $objPHPExcel->getActiveSheet()->getCell('final')->getCalculatedValue();
}
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo</title>
</head>

<body>
<form id="formulario" method="post" name="formulario" action="index.php">
<table>
<tr>
<th>Transmisi&oacute;n autom&aacute;tica :</th>
<td>
<select id="transmision_Automatica" name="transmision_Automatica">
<?php if(isset($_REQUEST['transmision_Automatica'])) { ?>
<option value="<?php echo $_REQUEST['transmision_Automatica']; ?>" selected="selected"><?php echo $_REQUEST['transmision_Automatica']; ?></option>
<?php } ?>
<option value="No">No</option>
<option value="Si">Si</option>
</select>
</td>
</tr>
<tr>
<th>Asientos de cuero:</th>
<td>
<select id="asientos_Cuero" name="asientos_Cuero">
<?php if(isset($_REQUEST['asientos_Cuero'])) { ?>
<option value="<?php echo $_REQUEST['asientos_Cuero']; ?>" selected="selected"><?php echo $_REQUEST['asientos_Cuero']; ?></option>
<?php } ?>
<option value="No">No</option>
<option value="Si">Si</option>
</select>
</td>
</tr>
<tr>
<th>Suspensi&oacute;n:</th>
<td>
<select id="suspension" name="suspension">
<?php if(isset($_REQUEST['suspension'])) { ?>
<option value="<?php echo $_REQUEST['suspension']; ?>" selected="selected"><?php echo $_REQUEST['suspension']; ?></option>
<?php } ?>
<option value="No">No</option>
<option value="Si">Si</option>
</select>
</td>
</tr>
<tr>
<th>&nbsp;</th>
<td>
<input id="boton_calcular" name="boton_calcular" type="submit" value="Calcular" />
</td>
</tr>
</table>
</form>
<?php if (isset($_REQUEST['boton_calcular'])) { ?>

<h2>Detalles del Precio</h2>
<p>Basado en tus preferencias, el precio de tu carro será S/. <?php echo number_format($_VIEWDATA['v_precioFinal'], 2); ?> Nuevos Soles.</p>
<table>
<tr>
<th>Precio Total:</th>
<td><?php echo number_format($_VIEWDATA['v_precioTotal'], 2); ?> Nuevos Soles</td>
</tr>
<tr>
<th>Descuento:</th>
<td><?php echo number_format($_VIEWDATA['v_descuento'] * 100, 2); ?>%</td>
</tr>
<tr>
<td colspan="2"><hr noshade="noshade"></hr>
</tr>
<tr>
<th>Total Final:</th>
<td><?php echo number_format($_VIEWDATA['v_precioFinal'], 2); ?> Nuevos Soles</td>
</tr>
</table>
<p><a href="index.php">Calcular nuevo precio</a></p>

<?php } ?>
</body>
</html>

4. A probar ...!

Vamos al navegador web y escribirmos http://localhost/phpexcel_ejemplo/index.php y tendremos una interfaz con los datos que obtenemos de la hoja de cálculo.

Seguramente se nos ocurrirá muchas cosas en la cual emplear está interesante librería. ¿Y que tal si la combinamos con AJAX?. La librería PHPExcel contiene documentación detallada para usarla correctamente, además de muchos otros ejemplos.

Optimización de Aplicaciones PHP: lado del cliente

Encontre en Slideshare esta interesante presentación de PHPBarcelona Conference, donde se dan consejos bien útiles para la optimización de aplicaciones hechas con PHP desde lado del cliente. Por ejemplo un aspecto interesante es la regla del 20/80 que es el tiempo de carga de la página principal de una web. 20% corresponde al lado del servidor (entregar index.html) y el 80% al cliente (cargar css, javascript, flash, imagenes, etc). Es en ese 80% donde se debe dar la optimización. Además se explica el uso de Firebug para ayudarnos a corregir dichos problemas.

Les dejo el enlace para que ustedes mismos puedan beneficiarse de esta diapositiva.

Optimizacion

Editores de texto WYSIWYG para Drupal

En Deziner Folio se ha realizado un lista de 7 editores de texto para Drupal, aunque puede también nos sirve para nuestros proyectos personalizados.

YUI Rich Text Editor

UI control que reemplaza los controles textarea de los documentos HTML conviertiendo en un editor de contenido potente.

YUI Rich Text Editor

TinyMCE

TinyMCE es uno de los más recomendados editor de texto. Es totalmente configurable y personalizable, fácil de integrar con nuestro CMS (Content Management Systems) favorito. Su configuración avanzada hace que este editor se acerque casi a los editores de texto de escritorio, por su facilidad de uso.

TinyMCE

FCKeditor

Es otro de los más conocidos y recomendados editor de contenido. Pese a que es bien potente no necesita ningún tipo de instalación en la máquina cliente.

FKCeditor

HtmlArea

Una interesante herramienta para el edición de contenido. 

HtmlEditor

WYMeditor

WYMeditor es un editor hecho con XHTML/JavaScript.

WYMeditor

widgEditor

widgEditor es un editor de contenido simple. Fácil de instalar y personalizar.

widgEditor

NicEdit

NicEdit es un editor de contenido creado con JavaScript/AJAX, permite la fácil edición de contenido.

NicEdit

amCharts: crea gráficos con Flash y JavaScript

amCharts nos brinda una serie de herramientas para la creación de gráficos dentro de nuestras páginas web:

Pie & Donut chart (tajada/torta/rosquilla)

Pie chart 

Line & Area chart (lineas)

Line chart 

Column & Bar chart (columnas/barras)

Line chart 

Scatter & Bubble chart (burbujas dispersas)

XY chart 

Todos estan disponibles para descargas, con características limitidas, una de las cuales es que muestra un link en la parte superior-izquierda: chart by amCharts.com. Para quitar ese enlace debemos pagar 85 euros. 

Lo interesante de estas utilidades es que son totalmente configurables y trabaja con los datos obtenidos de formatos XML ó archivos de texto TXT, los cuales podemos generarlos con lenguajes de servidor como PHP, ASP, etc.

Gaia Ajax Widgets, herramientas para aplicaciones AJAX en ASP .NET

Gaia Ajax Widget

Gaia Ajax Widget es una librería AJAX para ASP .NET, la cual incluye herramientas tales como:

Interesante herramienta para los desarrolladores en ASP .NET.

Listado de librerías, frameworks y herramientas para AJAX, DHTML y JavaScript

Ajax, DHTML, Javascript

Con esto de las aplicaciones web 2.0, se han desarrollado una gran cantidad de utilidades/herramientas/framework para el desarrollo web con JavaScript, DHTML (HTML dínamico) y AJAX. He aquí el gran listado:

Ver Artículo Completo ››

Encuesta de la semana: Framework para JavaScript

La aplicaciones web actuales hacen uso de JavaScript, y como desarrolladores webs debemos estar a la par con el avance en este campo. Es por ello que se recomienda el uso de una librería o framework para facilitarnos la programación de este tipo de aplicaciones, pero ¿Cuál de tantos?. Aquí una lista de los mas conocidos.

Microsoft Silverlight y un demo de su uso

Microsoft Silverlight es un plug-in compatible con varias plataformas y buscadores que te pueden ayudar a crear aplicaciones multimedia interactivas y de última generación a partir de Microsoft .NET para Web. Silverlight ofrece un modelo de programación flexible con soporte para AJAX, Virtual Basic, C#, Python y Ruby, y se integra con aplicaciones de Web antiguas. Con Silverlight puede ofrecer de una forma rápida y rentable videos compatibles con todos los buscadores más conocidos en Windows boMac OS.

En resumen Microsoft Silverlight es un complemento para navegadores web con funcionalidad para reproducir videos, gráficos vectoriales y animaciones, es como un aplicación similar a Adobe Flash Player.

Es compatible con S.O. de Microsoft y Mac OS, en las distribuciones de Linux "podrá" ser soportada con una utilidad llamada Moonlight. Y en cuanto a navegadores, compatible con IE6 SP2, IE7, Firefox 1.5 - 2 y Safari. Opera para más adelante.

La versión actual es 1.1 Alpha Sept Preview lanzado el 05/09/07.

Parece que Microsoft desea/esta entrando al dominio del Adobe Flash, pues sabe que ahora más que nunca se esta sacando partido de este tipo de aplicaciones en la web. 

He aquí un ejemplo de lo que se puede hacer el Silverlight, quise probarlo en Firefox 2 sobre Ubuntu, pero ... por supuesto aún no es soportada! El ejemplo se trata del famoso Buscaminas.

Buscamina 

Por otra parte será cuestión de investigar acerca de este complemento de Microsoft.

Enlaces | Documentación, Buscamina, Wikipedia

Videobox: Lightbox para Videos

Seguramente se acuerdan de Lightbox, lo mencionamos en un articulo anterior, es una utilidad en JavaScript que permite mostrar imágenes en una ventanita aparte dentro del navegador.

Ahora bien Videobox, es justamente lo mismo pero en vez de imágenes muestra videos como pueden ser de: YouTube, Google Video, MetaCafe, iFilm ó cualquier archivo flash.

El tamaño del script JS es de 6kb. Usa la librería mootools y swfobject para embelir archivos flash.

Videobox 

Como usarlo

Referenciamos 3 archivos JavaScript necesarios y el archivo de estilos CSS en la parte del <head>.

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>
<link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen" />

Y aquí lo importante

<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">tu video, o si gustas coloca una imagen del video</a>

Adicionalmente puede cambiar el tamaño del video dentro del atributo rel:

<a href="http://www.youtube.com/watch?v=VhtIydTmOVU" rel="vidbox 800 600" title="caption">our video1</a>

Enlaces | Videobox

Navegación

Categorias

Archivos