Extensiones para el Objeto String en Javascript

p>En mi post anterior escribí sobre como se podían extender los metodos para el objeto String (trim,ltrim,rtrim),
viendo la necesidad de mas metodos reutilizables en nuestras aplicaciones, pongo algunas extensiones muy utilizadas
a la hora de desarrollar un sitio web.

left: Nos devolverá los n primeros caracteres de una cadena

String.prototype.left = function(n){
  var s = this.toString()
  if(n>s.length)
  {
      n=t.length
  }
  return s.substring(0, n)
}

right: Nos devolverá los n últimos caracteres de la cadena

String.prototype.right = function(n){
  var s = this.toString()
  var t=s.length
  if(n>t)
  {
      n=t
  }
  return s.substring(t-n, t)
}

mid: Nos devolverá una cadena desde la posición n, con c caracteres

String.prototype.mid = function(n, c){
  // Si c = 0 devolver toda la cadena desde la posición
  var s = this.toString()
  // Si sólo se pasan los dos primeros argumentos
  if(arguments.length<2) {
      c=s.length-n+1
  }
  if(c<1) {
      c=s.length-n+1
  }
  if(n+c >s.length) {
     c=s.length-n+1
  }
  if(n>s.length) {
      return ""
  }
  return s.substring(n-1,n+c-1)
}

strReverse: Nos devuelve la cadena invertida

String.prototype.strReverse = function(){
  var s = this.toString()
  var i=s.length
  var t=""
  while(i>-1){
      t=t+ s.substring(i,i+1)
      i--
  }
  return t
}

contains: Nos devuelve true si encuentra la cadena

String.prototype.contains = function(t) {
  return (this.indexOf(t) >= 0)
}

countOf: Devuelve el numero de ocurrencias de la cadena

String.prototype.countOf = function(char) {
  var count = 0
  var len = this.toString.length
  if(char.length > len) { return 0 }
  for (i = 0; i < len; i++) {
      (this.charAt(i)==char) ? count++ : ''
  }
  return count
}

numberPart: Nos devuelve la parte numérica de una cadena alfanumérica

String.prototype.numberPart = function() {
  return this.replace(/[^0-9|.|-]/g, '')
}

ucFirst: Nos devolverá la cadena con la primera letra en mayúsculas

String.prototype.ucFirst = function () {
    str = this.toString();
    var f = str.charAt(0).toUpperCase();
    return f + str.substr(1, str.length-1);
}

ucWords: Nos devolverá la cadena con la primera letra de cada palabra en mayúsculas

String.prototype.ucWords = function () {
     str = this.toString();
    return (str+'').replace(/^(.)|s(.)/g, function ( $1 ) { return $1.toUpperCase ( ); } );
}

Recursos

Browsershots : Testea tu web en varios navegadores

Qué es Browsershots?

Browsershots hace capturas de pantallas de su diseño web en distintos navegadores. Es un servicio de código abierto creado por Johann C. Rocholl. Cuando usted envía su dirección web, es añadida a la cola de trabajos. Un número de computadoras distribuídas abrirá su sitio web en su navegador. Luego se harán capturas de pantallas y se cargarán aquí en el servidor central.

Como funciones?

Pues entras a la web y solo tienes que poner la url de la pagina web que deseas testear, siguiente paso es elegir que Sistemas Operativos quieres que lo prueben, y que navegadores para cada sistema Operativo, y le das click en Enviar.

Ahora nos darán una url de acceso directo para revisar los resultados de la consulta. Esta url tiene una expiración. Finalmente nos devolverán las capturas de pantalla según las opciones elegidas. (Ver resultados para Craftyman.net)

Muy útil verdad?

Recursos

FEBE: realiza backups de firefox

FEBE(Firefox Environment Backup Extension) permite hacer rápidamente copias de seguridad de sus extensiones, temas, historial, cookies, etc, en Firefox.

Características

  • Programación de copias automáticas.
  • Recordatorio de copias de seguridad.
  • Copias de seguridad definidas por el usuario.
  • Archivos de ayuda incluidos.
  • FEBE 6.0 usa los componentes nativos de Firefox para comprimir.
  • Envíe sus copias automáticamente a su Box.Net con un único click.
  • Puede hacer copia rápidamente de extensiones en modo individual.
  • Permite restaurar una copia de seguridad.

Tipos de Backup

FEBE permite 2 tipos básicos de copias de backup.

Selectivo

Aquí podemos escoger que partes de Firefox se harán backups.

Perfil Completo

Esta opción simplemente hara un backup completo de todo Firefox.

Copias de seguridad programadas

FEBE puede programar una copia de seguridad cada día, semana, mes, o simplemente no realizar el backup automatico.

Realiza los backups en tu box.net

Otra opción mas que ofrece FEBE, es realizar tus backups en línea, en tu cuenta de Box.net.

Recursos

Detecta funciones o clases existentes en PHP

Al desarrollar en grupo muchas veces sucede que por alguna extraña razón se nos ocurren las mismas funciones y/o clases, estas dos funciones detectan si una función y/o clase han sido creadas.

Detectar Función

function existeFuncion($nombreFuncion)
{
	if(function_exists($nombreFuncion))
	{
		return "Función $nombreFuncion existe!";
	}
	else
	{
		return "Función $nombreFuncion disponible!";
	}
}
//ejemplo
echo existeFuncion('getListados');

Detectar Clase

function existeClase($nombreClase)
{
	if(class_exists($nombreClase))
	{
		return "Clase $nombreClase existe!";
	}
	else
	{
		return "Clase $nombreClase esta disponible";
	}
}
//ejemplo
echo existeClase('Articulo');

Trim, LTrim y RTrim en Javascript

Trim es una Funcion y/o Metodo muy conocido en distintos lenguajes de programacion, esta funcion realiza el corte de espacios en blanco de los extremos de una cadena,esta funcion extiende tambien a ltrim(left trim) y rtrim(right trim). En Javascript no vienen incorporado, es por eso que veremos la manera de implementarlo, una forma es como un metodo para los tipo String y la otra es como una simple funcion(stand-alone).

Javascript Trim como metodos

String.prototype.trim = function() {
	return this.replace(/^s+|s+$/g,"");
}
String.prototype.ltrim = function() {
	return this.replace(/^s+/,"");
}
String.prototype.rtrim = function() {
	return this.replace(/s+$/,"");
}
// ejemplo trim, ltrim y rtrim
var cad = "  Metodo trim(),ltrim(),rtrim() ";
alert("*" + cad.trim() + "*");
alert("*" + cad.ltrim() + "*");
alert("*" + cad.rtrim() + "*");

Javascript Trim como funciones Stand-Alone

function trim(cad)
{
	return cad.replace(/^s+|s+$/g,"");
}
function ltrim(cad)
{
	return cad.replace(/^s+/,"");
}
function rtrim(cad)
{
	return cad.replace(/s+$/,"");
}
// ejemplo trim, ltrim y rtrim
var cad = " funciones trim,ltrim,rtrim  ";
alert("*" + trim(cad) + "*");
alert("*" + ltrim(cad) + "*");
alert("*" + rtrim(cad) + "*");

Compatibilidad

Las funciones anteriormente explicadas hacen el uso de expresiones regulares, que son compatibles con JavaScript 1.2 + o JScript 3.0 +. Si se requiere funciones para versiones antiguas de Javascript 1.0, aqui dejo las funciones compatibles para antiguas versiones.

function ltrim(str)
{
	var k = 0;
	for(k = 0; k < str.length && isSpace(str.charAt(k)); k++);
	return str.substring(k, str.length);
}
function rtrim(str)
{
	var j=str.length-1
	for(j=str.length-1; j>=0 && isSpace(str.charAt(j)) ; j--) ;
	return str.substring(0,j+1);
}
function trim(str)
{
	return ltrim(rtrim(str));
}
function isSpace(charToCheck)
{
	var whitespaceChars = " tnrf";
	return (whitespaceChars.indexOf(charToCheck) != -1);
}

Anatips: tooltip para Prototype

Anatips es una librería para hacer tooltips y es muy sencillo de utilizar.
Ha sido probado con Firefox 2+, IE 6+, Opera 9+, y Safari 3.1

Ahora explicaremos como implementarlo en una imagen, para este ejemplo utilizaremos Prototype 1.6.0. Para ello descargaremos Anatips desde aqui, que nos vendrá con Prototype.

Crearemos un archivo .html en incluiremos en el head los javascript y CSS

<script src="builder.js type="text/javascript"></script>
<script src="prototype.js type="text/javascript"></script>
<script src="anatips.js type="text/javascript"></script>
<link href="anatips.css" media="screen" type="text/css" />

Dentro del body incluiremos una imagen con class=”anatips” y con title=”Descripción Tooltip”, el class sera para
identificar que el title debe mostrase como el estilo tooltip de Anatips.

<img src="foo.jpg" class="anatips" title=""/>

Eso es todo, muy simple verdad?

Recursos

Multidropdown: menus relacionales con Prototype

MultiDropDown es un script para realizar la tarea de convertir una respuesta json en
elementos de un dropdown, y poder construir dropdowns relacionales. Este script esta probado en distintos navegadores(Firefox 2+, IE 6+, Safari 9+).

Características

  • Su implementación es muy sencilla.
  • El dropdown puede ser totalmente modificable.
  • Soporta dropdowns dependientes.

Implementación

Para este ejemplo utilizaremos PHP y MySQL, primero entramos a un administrador para MySQL, sea PHPMyAdmin u otro y ejecutamos este script.

CREATE DATABASE `librerias` ;
CREATE TABLE `librerias`.`lista` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nombre` VARCHAR( 50 ) NOT NULL
)
CREATE TABLE `librerias`.`detalle` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`lista_id` INT NOT NULL ,
`nombre` VARCHAR( 50 ) NOT NULL
)
INSERT INTO lista(id ,nombre)
VALUES
('1', 'Javascript'),
('2', 'CSS'),
('3', 'PHP'),
INSERT INTO detalle(`id` ,`lista_id` ,`nombre`)
VALUES
('1', '1', 'Prototype'),
('2', '1', 'Mootools'),
('3', '1', 'jQuery'),
('4', '1', 'YUI'),
('5', '1', 'Dojo'),
('6', '2', 'BluePrint'),
('7', '2', 'DockMenu'),
('8', '2', 'Multibox'),
('9', '3', 'CSS dropdown Menu'),
('10', '3', 'FPDF'),
('11', '3', 'JPGraph'),
('12', '3', 'PHPLinq'),
('13', '3', 'PHPMailer');

Este script creara una DB(librerias), dos tablas (lista y detalle) y llenara con algunos registros las tablas. La tabla detalle es dependiente de lista por en campo lista_id.

Ahora construiremos dos archivos .php (json_lista.php y json_detalle.php), en los cuales incluiremos este código respectivamente.

// json_lista.php
//incluimos la conexion
require 'cn.php';
//guardamos la consulta
$query = "SELECT *FROM lista";
//ejecutamos la consulta
$rs = mysql_query($query);
$rows=array();
//recorremos los registros retornados
while($row=mysql_fetch_assoc($rs))
{
	$rows[]=$row;
}
//devolvemos en formato json la data
echo json_encode($rows);
// json_detalle.php
//incluimos la conexion
require 'cn.php';
//recibimos el parámetro (lista_id)
$param = (int)$_REQUEST['id'];
$rows=array();
//verificamos el parametro
if ($param!=0)
{
	//guardamos la consulta
	$query = "SELECT *FROM detalle WHERE lista_id='$param'";
	//ejecutamos la consulta
	$rs = mysql_query($query);
	//recorremos los registros retornados
	while($row=mysql_fetch_assoc($rs)){
		$rows[]=$row;
	}
}
//devolvemos en formato json la data
echo json_encode($rows);

Eso es todo del lado del servidor, este es un ejemplo claro en el ámbito del trabajo.
Ahora pasemos a la vista del usuario con el html.

Primero debemos incluir la librería Prototype.js y multidropdown.js en el head de tu pagina web.

<script src="prototype.js" type="text/javascript"></script>>
<script src="multidropdown.js" type="text/javascript"></script>

Ahora pondremos dos dropdown, uno sera la lista cabecera y la otra sera su detalle la cual se llenara nuevamente en el evento onchange de la cabecera.

Listas
<select id="lista" name="lista">
<option value="0">vacio</option>
</select>
Detalles
<select id="deta" name="deta">
<option value="0">vacio</option>
</select>

Luego nos queda nada mas que llamar a la función que generara los dropdown.

//parametro url,id_dropdown
getJson('json.php','lista');
//carga de lista dependiente
$('lista').observe('change',
	function(el){
		getJson('json2.php','deta',$F('lista'))
	});

Recursos

jsTree: Componente Treeview para jQuery

jsTree es una librería Javascript para crear listas Treeview fácilmente desde diversos tipos de fuentes de datos(HTML, JSON, XML).

Características

  • Permite diversas fuentes de datos para crear el Treeview(HTML, JSON, XML)
  • Soporta Drag & drop
  • Personalizarían fácil con CSS
  • Navegación por teclado
  • Soporte múltiple para copiar, mover
  • Soporte de callbacks(onchange, oncreate, ondelete, …)

Para ete ejemplo utilizaremos el formato JSON que sera llamado externamente por el Treeview.

Primero nos descargamos el componente Treeview de aquí y lo descomprimimos, en esa carpeta encontraras documentación, varios ejemplos y la carpeta source y _lib la cual contendrán los archivos que necesitamos, podemos llevarlo a otra carpeta o trabajar ahí creando un archivo demo_json.html por ejemplo.
Dentro del html creado incluiremos las librerías necesarias de esta manera.

<head>
<script src="source/_lib/_all.js"></script>
<script src="source/tree_component.js"></script>
<link type="text/css" href="source/tree_component.css" />
<link type="text/css" href="source/style.css" />

luego de esto crearemos un div dentro de body identificandolo con un id

<div class="demo" id="demo"></div>

Ahora nos tocara crear un archivo de texto donde contenga la data para el Treeview en formato JSON, crearemos un archivo llamado json.txt. Para este ejemplo este sera el contenido del archivo.

{
	attributes: { id : "node_1" , rel : "drive" },
	data: "C:",
	icons: "images/hd.png",
	state: "open",
	children: [
		{
			attributes: { id : "node_2" , rel : "folder" },
			data: "Documents and settings",
			children: [
				{
					attributes: { id : "node_6" , rel : "adm" },
					data: "Administrator",
					icons: "images/locked.png"
				},
				{
					attributes: { id : "node_3" , rel : "folder" },
					data: "All Users"
				},
				{
					attributes: { id : "node_7" , rel : "folder" },
					data: "George"
				}
			]
		},
		{
			attributes: { id : "node_5" , rel : "adm" },
			data: "Program files",
			icons: "images/locked.png"
		},
		{
			attributes: { id : "node_4", rel : "adm" },
			data: "Windows",
			icons: "images/locked.png"
		}
	]
}

Ya tenemos el div contenedor del Treeview y los datos en formato JSON, lo único que nos queda es colocar un script el cual hara la conversión de estos datos a un Treeview dentro del div.

    $(function() {
      tree1 = new tree_component();
      tree1.init($("#demo"), {
        data  : {
          type  : "json",
          url   : "json.txt"
        }
      });
    });

Listo. Un Treeview muy fácil de usar.

Recursos

Detectar Sistema Operativo con Javascript

Javascript tiene un objeto llamado “window.navigator”, y sus propiedades nos permiten conocer datos de sobre nuestro navegador. Una de sus propiedades es el “appVersion”, la cual usaremos para detectar el tipo de Sistema Operativo que estamos usando.

Código

El siguiente código lo pondremos dentro de la etiqueta <script type="text/javascript"> en el head de nuestra pagina

var navInfo = window.navigator.appVersion.toLowerCase();
var so = 'Sistema Operativo';
function retornarSO()
{
	if(navInfo.indexOf('win') != -1)
	{
		so = 'Windows';
	}
	else if(navInfo.indexOf('linux') != -1)
	{
		so = 'Linux';
	}
	else if(navInfo.indexOf('mac') != -1)
	{
		so = 'Macintosh';
	}
	return so
}

A continuación la llamaremos desde nuestra pagina web

Código

Este código sera puestro dentro del body.

Ver Sistema Operativo

Recursos

Como realizar un buen POST

Siguiendo en curso de blogs luego de haber creado uno en 3 simples pasos, vamos a aprender como realizar una buena redacción.
Este es el formulario de redacción, donde veras una caja de texto para el titulo de nuestro POST, y un área de texto amplia para su contenido.

El contenido del POST para llegar a ser fácil, entretenido, intuitivo a la hora de leerlo, tiene que tener una imagen descriptiva, algunas etiquetas que hagan mas atractivo la entrada.
Aquí menciono algunas etiquetas para mejorar la apariencia

Relación de Etiquetas

  • negrita  <strong>negrita</strong>
  • cursiva  <em>cursiva</em>
  • subrayada  <u>subrayada</u>
  • separar párrafos  <p>parrafo</p>
  • Listas como esta  


    <ul>
    <li>Primero </li>
    <li>Segundo</li>
    </ul>

  • Listas Enumeradas  


    <ol>
    <li>Primero </li>
    <li>Segundo</li>
    </ol>

Nota: Para poder poner las etiquetas a las palabras el contenido de la entrada tiene que estar en modo Edición de HTML, los links , agregar imagenes, cambiar el formato de texto, cambiar el color del texto, los puedes realizar del modo “Redactar” que es mas fácil

Modo Edición en HTML

Modo Redactar

Ahora para categorizar nuestro POST podemos agregarle una etiqueta. Una Etiqueta sirve para poder saber el grupo o relación de los POST, podrías agregar algunas etiquetas para probar, si quieres que el POST tenga mas etiquetas, puedes separarlos por “,” (videos, cómicos, videos cómicos).

Despues de tener nuestro POST listo y queremos publicarlo, simplemente le daremos click en “PUBLICAR ENTRADA”, pero que paso si no terminaste de redactar y se te acabo el tiempo. al dar click en “GUARDAR AHORA” el POST ira al borrador, y cuando entres y acabes la edites de tu POST, podrás publicarlo.

POST publicado