Crear Tooltips con jQuery y TinyTips

tinyTips es un plugin para jQuery muy ligero el cual nos permite agregar Tooltips a nuestras páginas Web muy fácilmente.

Este tutorial nos muestra como implementar esta funcionalidad en nuestra página Web.

Paso 1 : Incluir los Scripts y CSS

Crearemos un archivo html donde incluiremos los JavaScripts y CSS (el Framework jQuery lo podemos llamar desde Google).




Luego inicializaremos los tooltips


En el código vemos 3 inicializaciones:

  • La primera es para todos los enlaces con clase tTip, colocaran el atributo title como Tooltip.
  • La segunda crea tooltips personalizados con el código html que se puede apreciar.
  • La tercera colocara tooltips a imágenes con clase tTip.

Paso 2 : Generando el código HTML

Ahora crearemos los elementos anteriormente inicializados para generar los tooltips.

Tooltip jQuery #1 Tooltip Personalizado

Ejemplo:

zp8497586rq

Multiples columnas utilizando listas y CSS

http://Bestbettafish.com/

rear listas con multiples columnas en nuestra Web es una manera muy utíl de reducir espacio innecesario y aprovecharlo con otros modulos, por ejemplo en mi blog tengo una lista de categorías en el sidebar, estan en 2 columnas y para mi encajan a la perfección.
Para lograr este objetivo solo es necesario crear una lista (ul) y convertir las filas(li) en elementos flotantes, dandole como ancho una medida en porcentaje, si queremos utilizar 2 columnas debemos colocar como ancho un 50% (width:50%;).

HTML: Armaremos la lista HTML.

  • CSS
  • XHTML
  • Semantics
  • Accessibility
  • Usability
  • Web Standards
  • PHP
  • Typography
  • Grids
  • CSS3
  • HTML5
  • UI

CSS: Crearemos clases para tipos de columnas.

ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
.dos_columnas li { width:50%;}
.tres_columnas li { width:33.333%; }
.cuatro_columnas li { width:25%; }
.cinco_columnas li { width:16.666%; }

Ejemplo HTML

jfdghjhthit45

Upload de varios archivos con PHP y Plupload

a target=”_blank” href=”http://www.plupload.com/”>Plupload es una librería JavaScript que nos brinda la funcionalidad de subir archivos múltiples al servidor, esta librería no solo incorpora Flash para subir archivos, también podemos utilizar HMTL5, Silverlight y BrowserPlus, de todas las alternativas que tenemos para el upload, este script se encarga de escoger cual utilizara en los navegadores, por ejemplo: si mi navegador no soporta Flash entonces Plupload escogerá otra alternativa y yo como usuario no veré ningún cambio ya que son internos.

Otra característica es que al utilizar etiquetas HTML podemos modificar el aspecto de los botones y la lista de archivos en cola.

Utilizando Plupload

Primero tenemos que bajarnos esta librería, la cual nos trae varios archivos que no necesitaremos en la implementación.
Descargar Plupload
Ahora sacaremos código del archivo custom.html y modificaremos algunos parámetros.

Javascript

Aquí llamaremos algunos scripts para las alternativas de subir archivos, luego crearemos una función que podemos configurar a nuestro gusto: peso máximo de archivo, restricción de archivos por extensión, redimensionar archivos, configuración de botones para el upload.






HTML

El div con id=”filelist” nos devolverá que tipo de tecnologías soporta el navegador para subir archivos, el id=”pickfiles” será el botón para seleccionar archivos y id=”uploadfiles” para subirlos.

Custom example

No runtime found.

[Select files] [Upload files]

Ejemplo de Upload multiple personalizado

jfdghjhthit45

zp8497586rq

Exportar a Excel con PHP

Existen clases, funciones y otros scripts con la finalidad de generar archivos excel, esta manera de exportar a excel con PHP consiste en poner cabeceras que lo codificaran como un verdadero excel y nos retornara un archivo descargable, con este método no tendremos que invocar a ningún archivo que haga este proceso de conversión.

Cabeceras PHP para Archivo Excel

Este código deberá estar en la parte superior de nuestro archivo .php
[php]
header('Content-type: application/vnd.ms-excel');
header("Content-Disposition: attachment; filename=reporte_videos.xls");
header("Pragma: no-cache");
header("Expires: 0");
[/php]

Contenido HTML a Exportar

Utilizaremos la base de datos para obtener los registros y posteriormente recorrerlos y pintarlos dentro de una tabla html.
[php]
$cn = mysql_connect("localhost", "root", "123456");
<div style="display: none"><a href=&#039;http://tradingstrategiess.com/&#039; title=&#039;trading strategy&#039;>trading strategy</a></div>mysql_select_db("db", $cn);
$q = "SELECT id,nombre,email,departamento FROM usuario";
$rs = mysql_query($q, $cn);
$tot = mysql_num_rows($rs);
[/php]
[html]
<table>
<thead>
<tr>
<td>ID</td>
<td>Nombres</td>
<td>E-Mail</td>
<td>Departamento</td>
</tr>
</thead>
<tbody>
<?php while($row = mysql_fetch_assoc($rs)):?>
<tr>
<td><?php echo $row[&#039;id&#039;]?></td>
<td><?php echo $row[&#039;nombre&#039;]?></td>
<td><?php echo $row[&#039;email&#039;]?></td>
<td><?php echo $row[&#039;departamento&#039;]?></td>
</tr>
<?php endwhile;?>
</tbody>
</table>
[/html]

Con estos simples pasos podemos exportar a excel con PHP.

jfdghjhthit45
zp8497586rq

Tutorial SEO : Introducción

n este tutorial básico para SEO, aprenderemos una pequeña teoría sobre este proceso, como configurar nuestro Website para que se posicione mejor en los motores de búsqueda, algunas herramientas para nuestros blogs y servicios Web que nos ayudaran en el seguimiento.

¿Qué es SEO?

El SEO (Searh Engine Optimisation) como bien lo dice significa optimización para los motores de búsqueda, en la practica el SEO no se debe ver como un proyecto, sino como un proceso que requiere mucho tiempo y paciencia ya que las variables consideradas importantes para el posicionamiento Web cambian con frecuencia y esto nos obliga a seguir optimizando nuestra Web.

Utilizando la etiqueta

La etiqueta será siempre la más importante en este proceso de SEO, este tiene que ser siempre único y describir lo mejor posible nuestro Website. Recordar también que no debemos abusar de esta etiqueta con demasiados caracteres, si vemos en los resultados de búsqueda en Google, solo muestra los primeros 65 caracteres del title.</p> <pre name="code" class="html"><title>Free Online Games | Free Games | Download Games | Games.com

Nota: Existe un meta tag “title” que no debe ser utilizado ya que genera confusión si lo ponemos diferente de la etiqueta “title” y generara redundancia si la ponemos igual, en conclusión: no debe utilizarse ya que todos los motores de búsqueda utilizan la etiqueta “title” y no el meta tag para el posicionamiento.

¿Cómo utilizar el meta tag “description”?

El meta tag “description” es una etiqueta que los motores de búsqueda toman en cuenta como un resumen de tu Website y al igual que el “title” este debe ser único para cada página. Esto quiere decir que debes preparar un párrafo donde describa todo lo interesante de tu Website y cada sección de ella con pocas palabras.
Siempre evitar pegar en este meta tag un texto enorme ya que no servirá para optimizar en los motores de búsqueda, los caracteres recomendados en Google son de 150 aprox.

 

¿Cómo utilizar el meta tag “keywords”?

Este meta tag no ayuda mucho en el SEO, solo se recomienda utilizarlo para colocar palabras relacionadas al “title”, como por ejemplo colocando palabras mal escritas que podrían ser buscadas en algún motor de búsqueda como por ejemplo:

Como vemos, hay palabras mal escritas que podrían ser buscadas de esa manera en los motores de búsqueda, esto ayudara a relacionar las palabras y ser encontrados.

Meta Tags SEO en WordPress

Si estamos utilizando WordPress y queremos agregarle los Metas para el SEO podemos descargar All in One SEO Pack, este es un plugin muy bueno que nos ayudara mucho, tiene la opción para generar meta tags automáticos según los títulos, tags y resumen del post, también puede personalizarse manualmente en cada post.

jfdghjhthit45

zp8497586rq