Instalando Eclipse y Android SDK

Eclipse es uno de los IDEs de programación libres mas populares, y la razón es la gran variedad de plugins que existen para este entorno. En este tutorial instalaremos eclipse además del plugin Android SDK necesario para programar en esta plataforma.

Lo primero que tenemos que hacer es dirigirnos a la página de descargas de Eclipse: http://eclipse.org/downloads/ y descargar la versión para nuestro sistema operativo.


Instalación:

Ubuntu:
Una vez descargada versión para linux, nos movemos a la carpeta donde la descargamos:

cd Descargas

Descomprimios el archivo:

tar xzf eclipse-SDK-4.2.1-linux-gtk.tar.gz

Movemos la carpeta extraida a la carpeta personal

sudo mv eclipse ~/

Creamos una lanzador:

sudo chmod 755 /usr/bin/eclipse

Pegamos dentro el siguiente código:(cambiando el nombre de usuario)

#!/bin/sh
export ECLIPSE_HOME="/home/usuario/eclipse"
$ECLIPSE_HOME/eclipse $*

Le damos permisos de ejecución

sudo chmod 755 /usr/bin/eclipse

Preparando java:

sudo add-apt-repository ppa:webupd8team/java

sudo apt-get update && sudo apt-get install oracle-java7-installer

Instalando el plugin de android en eclipse:
Abrimos eclipse, luego: menú > ayuda > install new software > add
En el dialogo que aparece escribimos:
Name: Plugin Android
Location: https://dl-ssl.google.com/android/eclipse/

Nos aparecerán varios paquetes para instalar, marcamos todos y hacemos clic en el botón "siguiente".

Se checkearán las dependencias y se instalará el plugin,  una vez instalado el plugin y reiniciada la aplicación nos saldrá un mensaje que dice que no hay ninguna versión de android instalada y nos abrirá el Android SDK Manager, aquí es bueno asegurarse de tener varias versiones instaladas.

Windows:
La instalación eclipse y android SDK en Windows ws relativamente facil:
- Descargar la versión classic para 32  o 64 bits dependiendo de la arquitectura que tengas, sigues las indicaciones del instalador: http://eclipse.org/downloads/.
- Descargar e instalar el JDK  disponible desde la pagina de descargas de oracle: http://www.oracle.com/technetwork/java/javase/downloads/, la instalación de java también es muy sencilla, basta con seguir las indicaciones.
- La instalación del plugin Android SDK se hace de la misma manera que en ubuntu.

Fácil no?, ya sea en linux o en windows: atrévete a instalar Eclipse y cuéntanos tus experiencias.

Si te ha gustado esta entrada:

  Comenta.

  No cuesta nada!!!

Instalando NetBeans IDE

NetBeans es el entorno de programación java preferido por muchos por su facilidad para desarrollar y la rapidez con la que se pueden crear aplicaciones.  NetBeans es libre, multiplataforma y provee todos los elementos necesarios para trabajar con este lenguaje incluyendo un IDE (entorno de desarrollo integrado) para Swing que es el conjunto de librerías gráficas de java, aunque también permite lenguajes como: JavaScript, PHP, Python, Ruby, Groovy y C/C++ entre otros.

Instalación En Ubuntu.

En Ubuntu se encuentra en los repositorios, por lo que lo se puede instalar desde el centro de software o con este comando:

sudo apt-get install netbeans

o bien haciendo click en este botón

Instalar NetBeans

Nota: La versión que está en los repositorios aveces presenta algunos problemas, por lo que yo recomiendo bajarlo desde la pagina de descargas de NetBeans.org como se explica a continuación.

Para tener la última versión:
Descargar la versión para Linux desde el sitio de descargas.
Para instalarlo, primero nos movemos a la carpeta donde lo descargamos:

cd Descargas

Le asignamos permisos de ejecución:

sudo chmod +x netbeans-*

Ejecutamos el instalador con:

sudo ./netbeans-*

En modo gráfico: Clic derecho/ propiedades/ permisos/ permitir ejecutar como programa.

Luego lo ejecutas y sigues las indicaciones del instalador.

Instalación en Windows

Descargar la versión para Windows desde el sitio de descargas.
Ejecutar el instalador y seguir las indicaciones.

Versión portable:
La pagina de descargas también ofrece una versión independiente del sistema operativo ya que trae los ejecutables para Windows y para Linux dentro de la misma carpeta (netbeans/bin), pero hay que configurar la ruta para el jdk.

Si quieres programar en java, entonces anímate a probar NetBeans y nos cuantas cómo te ha ido.

Si te ha gustado esta entrada:

  Comenta.

  No cuesta nada!!!

Agregar filas a una tabla desde un Formulario

Con este sencillo ejemplo les mostraré como agregar filas a una tabla desde un formulario, validar el formulario, y agregar un botón a la tabla para eliminar la fila.



Descargar el código

Si te ha gustado esta entrada:

  Comenta.

  No cuesta nada!!!

Area de dibujo con canvas

Una de las utilidades que incorpora html5 es la etiqueta <canvas> que permite trabajar con formas en dos dimensiones dentro de un documento html, además podemos manipularlo con javascript o jquery para darle usos muy creativas.

El siguiente es un ejemplo de un área de dibujo creado con canvas que permite dibujar con una paleta de colores.



Descargar el código

Si te ha gustado esta entrada:

  Comenta.

  No cuesta nada!!!

Como crear un Count Down para Ubuntu

El día de hoy aprenderemos como crear un sencillo contador regresivo para ubuntu como este:

También aprenderemos a personalizarlo, subirlo y como insertarlo en un blog o web.
Pero vamos paso a paso:

1- Estuctura de archivos.
- Creas una carpeta con el nombre widged.

- Crearemos tres archivos dentro de "widged": widged.html , estilo.css  y fechas.js 
- Luego descargaremos un cuarto archivo llamado jquery.js desde aquí (clic derecho guardar enlace) y lo guardamos también dentro de la carpeta "widged".

2- Estructura del widged.

 Tendremos un contenedor principal y cuatro contenedores mas que estarán al mismo nivel:

3- Contenido de los archivos

widged.html

<!DOCTYPE html>
<html>
<head>
  <title>Ubuntu Countdown</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="fechas.js"></script>
  <link type="text/css" rel="stylesheet" href="estilo.css" media="screen"/>
  <meta http-equiv="Content-Type" content="text/html; gcharset=ISO-8859-1"/>
</head>
<body>
  <!-- ________________Contenedor principal_________________ -->
  <div class="principal">


  <!-- _______________Contenedor para la imagen________________ -->
  <!-- El logo de Ubuntu de la versión en cuestión o imagen  -->
  <div class="marco1" id="marco1">
  <img id="logo" src="logo1.png" />     
  </div> 


  <!-- _______________Contenedor para el contador________________ -->
  <!-- debe estar bacia, se llena con una funcion javascript -->
  <!-- contendrá la leyenda de días faltantes y lik de descarga -->
  <div class="marco2" id="indic"></div> 


  <!-- ____________Contenedor para la barra de progresso_____________ -->
  <!-- debe estar bacia, se llena con una funcion javascript -->
  <div id="cont"><div id="progress"> </div> </div>
   

  <!-- ____________Contenedor para el boton "acerca de"_____________ -->
  <!-- Este div se convierte en un botón que muestra los creditos -->
  <div id="web" onclick="about();"> <a > Acerca de</a></div>


  <!-- ________________Contenedor para los creditos____________________ -->
  <!-- Este div está oculto por defecto,se muestra con el boton"acerca de" -->
  <div id="creditos">
  <br>Este widged ha cido creado por:<br><b>

  <!-- tu nombre y link personal -->
  <a href="la ruta de tu facebook/twetter/etc" target="_blank">Tu nombre</a>
  </b><br>para:<br>

  <!-- aqui pones la ruta de tu web -->
  <a href="http://www.tu_web.com/" target="_blank">
  <b>www.tu_web.com</b><br><br>

    <!-- aqui pones la ruta de tu foto -->
  <img id="foto" src="tu-foto.jpg"/></a><br>

  <!-- botón para ocultar los creditos -->
  <div class="boton" onclick="about_close();">cerrar</div>
  </div>
  </div> <!-- cierra el div principal -->
</body>
</html>

fechas.js
Contiene las funciones que hacen el cálculo de las fechas y escriben el resultado en el html.

// lo que esta en esta funcion se ejecute al cargar la pagina.
$(document).ready(function(){ 
 
   // Fecha de lanzamiento de la última versión    
   var old = new Date(2012, 9, 28, 0, 0, 0);

   // Fecha de lanzamiento de la próxima versión
   var fecha = new Date(2013, 2, 28, 0, 0, 0);

   // Esto captura la fecha del sistema
   var hoy = new Date(); 
 
   // Esto obtiene los dias restantes
   var dif = fecha.getTime() - hoy.getTime();  
   var diferencia = Math.floor(dif / (1000 * 60 * 60 * 24));

   // Muestra en el widged los dias restantes
   document.getElementById("indic").innerHTML = "Faltan <br>"
   +" <span id= \"dias\" style= \"display: inline-block;\">"
   +diferencia+"</span><br> dias";

   // Obtiene los dias que van transcuriendo hasta el lanzamiento
   var dif2 = fecha.getTime() - old.getTime();  
   var lapso = Math.floor(dif2 / (1000 * 60 * 60 * 24));

   // calcula el porcenteje de dias transcurridos
   var porcentaje = Math.floor(((lapso-diferencia)*100)/lapso);

   // Selecciona el div progress
   progres_bar = document.getElementById('progress');
   // Cambiamos el porcentaje de width al porcentaje de dias transcurridos
   progres_bar.setAttribute('style','width: '+porcentaje+'%;');

   //---------------------- * --------------------------------------
   //--Cambiamos el texto de dias faltantes por el link de descarga
   //--Esto ocurre cuando quedan cero dias para el lanzamiento
   //---------------------------------------------------------------
   if (diferencia==0) {
     
   document.getElementById("marco1").innerHTML ="<a href=\"http://www.ubuntu.com"
   +"/download\"><img id=\"logo\" src=\"logo1.png\"/> </a>";

   document.getElementById("indic").innerHTML = "<a href=\"http://www.ubuntu.com"
   +"/download\">Disponible <br><span id= \"dias\" style= \"display: inline-block;\">"
   +"Descargalo</span><br> ya!</a>";
  } 
})

// Muestra los creditos
function about(){
    creditos = document.getElementById("creditos");
    creditos.setAttribute('style','display:inline');
}

// Oculta los creditos
function about_close(){
    creditos = document.getElementById("creditos");
    creditos.setAttribute('style','display:none');
}

Y por último agregamos el archivo:
estilo.css
Este carga la imagen de fondo detras del logo, crea los colores naranja y el color y estilo del texto y otros elementos.

.principal, #about{
    width:100%;
    height:100%;
    background-color:#111; 
    border-radius: 20px;
}
.marco1{
    width:100%;
    height:80%;
    border-radius: 20px ;
    background-color:#000;
    background-image: url("gun_metal.png");
    background-repeat: repeat;
    background-attachment: fixed;
}

#cont, #progress{
    height: 4px;
    width: 100%;    
    background: #000;
}

.marco2, #progress{
    width:100%; 
    background: -moz-linear-gradient(19% 75% 90deg, #EB470f, #F58423);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5842f),to(#EB4701));
    background: -o-linear-gradient(rgb(96%, 49%, 13%),rgb(92%, 28%, 6%));
    font-size:1em;
    font-family:monospace;
    text-align: center;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
    padding: 2px 0px 0px 0px;
}

#dias{
    color:#fff;
    font-size:2em;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
}

#logo{
     width:100%;
}

#web{ 
    color:#4C4C4C;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    text-align: center;
    cursor: pointer; 
    font-family:monospace;
    padding: 4px;

}

a{
    color:#808080;
    text-decoration: none;
    text-transform:
    font-family: Courier, monospace;
}
a:hover{
    color:#fff;
}
#creditos{
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    text-align: center;
    background-color: #070707;
    width: 100%;
    height:100%;
    position: absolute; left: 0px; top: 0px;
    border-radius: 20px;
    color:#4C4C4C;
    font-size: 15px;
    font-family:arial,helvetica,sans-serif;
    display: none;
}

.textbox{
    font-size: 15px;
    width: 25%;
    max-width: 25%;
 }

.boton{
    display: inline-block;
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    cursor: pointer;
    font-family:monospace;
    background: -moz-linear-gradient(center top,rgba(
        255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 100% ); 
    border: 1px solid #999;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;    
    border-radius: 4px;
    color:#fff;
    bottom:5px;    
}

.boton:hover{
    box-shadow: 0px 0px 5px #fff;
    -webkit-box-shadow: 0px 0px 5px #fff;
    -moz-box-shadow: 0px 0px 5px #fff;
    
}
.boton:active{
    top:1px;
}
#foto{
    width: 33%;
    padding: 0% 33% 0% 33%;
}

No olviden colocar las imágenes en la carpeta widged.

4- Hospedaje.

Si cuentas con un servidor solo lo subes, copias la ruta y listo.

Si no cuentas con un servidor puedes usar una cuenta de Dropbox (crear cuenta e instalar) como yo lo hago.
Guardas la carpeta widged en tu carpeta publica de dropbox, y copias el enlace público de widged.html.

4- Insertarlo en tu web o blog.

Este es el código para insertarlo en tu web:

<iframe frameborder="0" width="200" height="250" scrolling="no"src="widged.html">
Ubuntu countdown</iframe>

Donde "widged.html" lo sustituyen por la ruta completa en el servidor o por el enlace público de dropbox.
Por ejemplo este es el código para insertarlo desde mi cuenta, lo pueden probar y darse cuenta de lo rápido y fiable que resulta cargarlo desde el servidor de Dropbox

<iframe frameborder="0" width="200" height="250" scrolling="no"
src="https://dl.dropbox.com/u/59010066/web/widged/widged.html">
Ubuntu countdown</iframe>

Y por último aquí esta el count down funcionando.

Descargar este ejemplo

Si te ha gustado esta entrada:

Comenta.

  No cuesta nada!!!

Validación de formularios con JavaScript

Hace unas semanas comenzamos con el tema de expresiones regulares específicamente aplicadas a la validación de correo electrónico, el día de hoy vamos a ampliaremos el tema de validación de formularios.

El ejemplo con el que trabajaremos contiene tres campos: nombre, edad y correo electrónico, estos son los campos por validar, además incluiremos un botón imput tipo submit y uno tipo reset:

Lo primero es mostrar el código del formulario:

<!DOCTYPE html>
<html>
<head>
  <title>Mi p&aacute;gina</title>       
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <link type="text/css" rel="stylesheet" href="estilos/estilo2.css" media="all">   
  <script src="js/functions.js" type="text/javascript"></script>
</head>
<body>
  <form action="save.php" method="post" onsubmit="return validar();">
      <span>nombre</span><br/>
      <input type="text" id="name" name="name"></input>
      <span id="error_name" class="error"></span> <br/> 
      <span>edad</span><br/>
      <input type="text" id="age" name="age"></input>        
      <span id="error_age" class="error"></span><br/>
      <span>e-mail</span><br/>
      <input type="text" id="mail" name="mail"></input>    
      <span id="error_mail" class="error"></span><br/><br/>
      <input type="submit"></input><br/>
      <input type="reset" id="reset" name="reset"></input>
   </form>
 </body> 
</html>


En este código destacan tres etiquetas "span" sin contenido:
<span id="error_name" class="error"> </span>
<span id="error_age" class="error"> </span>
<span id="error_mail" class="error"> </span> 

La razón por la que no tienen contenido es porque se les asignará un texto de forma dinámica a través  de JavaScript. Estas etiquetas deben estar ocultas al cargar la pagina, y esto lo conseguiremos mediante css:

.error
{
 color:red; 
 display:none;
}

Aquí utilizamos el class "error" al que pertenecen estas etiquetas para ocultarlas y colorearlas de rojo.

Ahora veamos el código Javascript:

function validar() {
  
  /* SE OBTIENEN LOS ELEMENTOS NOMBRE, EDAD Y MAIL */
  fname = document.getElementById('name');
  age = document.getElementById('age');
  mail = document.getElementById('mail');

  /* SELECCIONA LAS ETIQUETAS DE ERROR Y LAS OCULTA */
  sp_fname = document.getElementById('error_'+fname.id );
  sp_fname.setAttribute('style','display: none');

  sp_age = document.getElementById('error_'+age.id);
  sp_age.setAttribute('style','display: none');

  sp_mail = document.getElementById('error_'+mail.id);
  sp_mail.setAttribute('style','display: none');

  continuar = true; /*envio activado por defecto*/

  /*SE EVALUAN LAS EXPRESIONES*/
  /* 1- QUE El CAMPO NOMBRE NO ESTE VACIO*/
  if (fname.value.length <= 0) {
    sp_fname.innerHTML = "Por favor digite un nombre válido";
    sp_fname.setAttribute('style','display:inline');
    continuar = false; /*se desactiva el envio y se muestra el mensaje de error*/
  }
  /*2- QUE EL CAMPO EDAD NO ESTE VACIO Y CONTENGA SOLO NUMEROS*/
  if (age.value.length <= 0  || isNaN(age.value)) {
    sp_age.innerHTML = "Por favor digite una edad válida";
    sp_age.setAttribute('style','display:inline');
    continuar = false; /*se desactiva el envio y se muestra el mensaje de error*/
  }
  /*3- SE VALIDA LA EXPRESION REGULAR PARA E-MAIL*/
  if (/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/.test(mail.value)){
        /*no hacer nada*/
  }
  else{
 sp_mail.innerHTML = "Por favor digite un e-mail válido";
 sp_mail.setAttribute('style','display:inline');
 continuar = false; /*se desactiva el envio y se muestra el mensaje de error*/
 }
  
  /*CUALQUIERA DE LAS EVALUACIONES ANTERIORES PUEDE ANULAR EL ENVIO*/
  return continuar;
}

En cada "if" se evalúa uno  de los campos, y si la expresión no pasa la evaluación, entonces se escribe el error,  se muestra la etiqueta junto al campo correspondiente: 

sp_fname.innerHTML = "Por favor digite un nombre válido";
sp_fname.setAttribute('style','display:inline');

Y por último, se marca en false la variable continuar, esto detendrá el envío del formulario:

continuar = false;

Este código es muy sencillo y se pueden validar la cantidad de campos que se quiera y fue creado con la intención de aprender a dominar JavaScript.
Actualmente existen métodos mas sencillos para lograr esta validación basados en jQuiery y derivados.

Descargar archivos de este ejemplo:validacion-de-formularios.rar.
ver este ejeplo online. 


Si te ha gustado esta entrada, comenta es gratis!!!  o Suscríbete a nuestro blog.

Multi editor de codigo Sublime Text 2.0

Aunque no es una herramienta libre, Sublime Text es un excelente y potente editor de código, su interfase es sencilla, limpia e intuitiva, con cierto parecido a la interfase de pestañas de Chrome, soporta el uso de Snippets y Plugins, es altamente configurable y es gratuito, aunque la versión de pago ofrece algunas funciones extra y cuesta $59.



Esta aplicación me ha resultado muy útil en diseño web por la facilidad de manejar archivos html y css con marcadores, auto completado y auto guardado.
La verdad es que he quedado muy impresionado con el webcast de Sublime text presentada por desarrolloweb en el que muestran lo potente que puede ser esta herramienta y la activa que es su comunidad en español, pues ya han preparado una guía para el uso de esta herramienta disponible desde aquí.

Hace unos dias desarrolloweb ha presentado dos webcast explicando como instalar, configurar y utiliza Sublime text 2, aqui les dejo las grabaciones, tambén pueden suscribirse en desarrolloweb para recibir información de los proximos Webcast que se estarán presentando.


Conociendo Sublime Text 2:




Sublime Text 2, 2º round, Desde cero!






Algunas de sus principales características:

- Soporte de Snippets y Plugins para extender funciones.
- Soporte nativo para infinidad de lenguajes. 
-Preview de la estructura del código a un lado del tab. Es muy útil para desplazarse por el archivo y puede ocultase si se quiere.
- Multi Selección de un término por diferentes partes del archivo con Cmd+D en Mac OS X o Ctrl+D en Windows y Linux.
- Multi Cursor para escribir texto de en diferentes posiciones en al mismo tiempo.
- Paleta rápida de comandos Shift+Cmd+P en Mac OS X o Shift+Ctrl+P en Win y Linux.
- layouts configurables para trabajar con única o múltiples ventanas.

- Remarcado de sintaxis es completamente configurable.
- Búsqueda Dinámica de expresiones regulares, archivos, proyectos, directorios, o por todo a la vez.  
- Auto completado y marcado y desplazamiento de llaves.
- Configuración completa de las funciones y atajos de techado.

Puedes bajarte Sublime text 2.0 para Linux, Windows y Mac OS desde su página de descargas: http://www.sublimetext.com/2. 
También en esta página encontrarás la version portable. El paquete para Linux también es portable, ya que solo lo descomprimimos y lo utilizamos.

Para instalarlo en Ubuntu: descargamos la versión para Linux o lo podemos hacer mediante este comando:

32 bits

wget http://c758482.r82.cf2.rackcdn.com/Sublime%20Text%202.0.1.tar.bz2
tar -zxvf Sublime Text 2.0.1.tar.bz2

64 bits

wget http://c758482.r82.cf2.rackcdn.com/Sublime%20Text%202.0.1%20x64.tar.bz2
tar -zxvf Sublime Text 2.0.1 x64.tar.bz2

Si te ha gustado esta entrada, comenta es gratis!!! o Suscríbete a nuestro blog.

Expresiones Regulares y JavaScript

Es común que en internet hagamos uso de formularios: para hacer compras, para escribir comentarios, para descargar software, suscripciones, etc. Y es muy común que esa información que digitamos sea comprobada por el sitio web para saber si es válida o no, esto con el fin de prevenir que llegue información errónea al servidor.  Así que si agregas algún formulario a tu web, te verás en la necesidad de validarlos.

Por ejemplo si en tu formulario tienes un campo de email, deberás validar si lo que está introduciendo el usuario es realmente un email. Esta comprobación debe hacerse en la maquina cliente y no en el servidor que ya que éste tiene una gran carga de transacciones y es mucho mas rápido y eficiente hacerlo en la máquina cliente.

Para realizar tal efecto, claro está, usaremos lenguajes del lado del cliente como JavaScript para validar si la cadena introducida por el usuario es un email. Y al trabajar con validaciones con cadenas nos usaremos expresiones regulares.

Las expresiones regulares son modelos que describen las combinaciones de caracteres en el texto. Se podrían definir como una serie de caracteres que forman un patrón, que serán reemplazados por la cadena que cumpla con el patrón, de tal forma que podemos comparar el patrón con otros conjuntos de caracteres para ver las coincidencias. 

La expresión regular inicia con /^ y finaliza con $/. 

/^ expresión regular $/

Un email se compone de cuatro partes:

usuario + @ + servidor + dominio

Nombre

Debe de empezar por letra o numero. Al menos tiene una letra o número. La letra o número se expresa mediante el carácter \w. Para asegurarnos de que la letra o número aparece al menos una vez utilizaremos el modificador +.

Puede contener puntos y guiones además de las letras y números. Esta combinación podrá aparecer, es por ello que utilizaremos el modificador * (cero o varias veces). Insertaremos toda la combinación entre paréntesis.

Su expresión regular, para ambos casos, será la siguiente:

\w+([\.-]?\w+)*

Dominio

Irá al final, detrás de un punto. Podrá tener dos (.es, .fr, .it,...) o tres letras (.com, .net, .org,..) o cuatro (.mobi, info,...). Si queremos indicar un número concreto de caracteres lo expresamos con el número entre los operadores { y }

Además podemos tener varios dominios seguidos (.com.ar, .com.uk,....) es por ello que deberemos de usar el modificador +. Ya que el dominio podrá aparecer varias veces.

Su expresión regular será como sigue:

(\.\w{2,3,4})+

La expresión regular final para validar el email con JavaScript sería: 

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/

Ahora colocamos la Expresión dentro del código JavaScript:

function validarEmail(valor)
     {
       /** comentario**/
       if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/.test(valor))
       {
         alert("La dirección de email " + valor + " es válida.");
       } else 
       {
         alert("Gracias!, email guardado");
       }
     }

Esta es la métrica para escribir expresiones regulares:

^	Principio de entrada o línea.
$	Fin de entrada o línea.
*	El carácter anterior 0 o más veces.
+	El carácter anterior 1 o más veces.
?	El carácter anterior una vez como máximo (es decir, indica que el carácter anterior es opcional).
.	Cualquier carácter individual, salvo el de salto de línea.
x|y	x o y.
{n}	Exactamente n apariciones del carácter anterior.
{n,m}	Como mínimo n y como máximo m apariciones del carácter anterior.
[abc]	Cualquiera de los caracteres entre corchetes. Especifique un rango de caracteres con un guión (por ejemplo, [a-f] es equivalente a [abcdef]).
[^abc]	Cualquier carácter que no esté entre corchetes. Especifique un rango de caracteres con un guión (por ejemplo, [^a-f] es equivalente a [^abcdef]).
\b	Límite de palabra (como un espacio o un retorno de carro).
\B	Cualquiera que no sea un límite de palabra.
\d	Cualquier carácter de dígito. Equivalente a [0-9].
\D	Cualquier carácter que no sea de dígito. Equivalente a [^0-9].
\f	Salto de página.
\n	Salto de línea.
\r	Retorno de carro.
\s	Cualquier carácter individual de espacio en blanco (espacios, tabulaciones, saltos de página o saltos de línea).
\S	Cualquier carácter individual que no sea un espacio en blanco.
\t	Tabulación.
\w	Cualquier carácter alfanumérico, incluido el de subrayado. Equivalente a [A-Za-z0-9_].
\W	Cualquier carácter que no sea alfanumérico. Equivalente a [^A-Za-z0-9_].

Mas informacion: expresiones regulares

 

Si te ha gustado esta entrada, comenta es gratis!!! o Suscríbete a nuestro blog. 

Traducir Página Web con JavaScript

Hola a todos, días atrás tuve la necesidad de investigar e implementar este código y logré encontrar la forma de traducción de un texto en mi web madiante eventos,  en realidad lo que hace es reemplazar el contenido de una etiqueta tipo Paragraph <p> o de cualquier tipo de etiqueta. Además agiliza mucho más tu sitio ya que es más rápido para cargar que una copia de tu página indexada.

A mi me fue muy útil, les dejo el código Saludos… 

<html>
<head>
<title>Una Web + Libre</title>
<h1>Una Web + Libre</h1>
<script type="text/javascript">

 
function español()

{ 

<!--funciones y contenido a nuestras etiquetas-->
document.getElementById("p1").innerHTML = "Bienvenidos!";
document.getElementById("p2").innerHTML = "Todo el parrafo estaria aquí Una Web + Libre";
}

 
function ingles()

{
document.getElementById("p1").innerHTML = "Welcome!";
document.getElementById("p2").innerHTML = "Paragraph here A web + freer";

}

</script>

 
</head>
<body onload="español()"><!--ejecutamos la función inicial-->

<input align="center" type=image src="ruta de la bandera española" width="40" height="30" onClick="español();">

<input align="center" type=image src="ruta de la bandera Inglesa" width="40" height="30" onClick="ingles();">

<p align="center" id="p1" ></p>
<p align="center" id="p2" ></p>

</body>
</html>

Ver ejemplo online.

Si te ha gustado esta entrada, comenta es gratis!!! o Suscríbete a nuestro blog.
 

Charsets y Entidades HTML

Los charsets son codificaciones que podemos incluir en nuestras paginas web para visualizar correctamente algunos caracteres como por ejemplo a ñ-Ñ del alfabeto español o símbolos acentuados o especiales de una región, ideogramas o fonemas. Para caracteres especiales del español se utilizan UTF-8 ó ISO-8859-1 que los podemos incluir el código html de declarándolo en los metatypes de la siguiente manera:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

o bien

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Existen diversos charsets para diferentes idiomas por ejemplo para el chino:

<META HTTP-EQUIV= "Content-Type"CONTENT="text/html;charset= chinese">

Estándar ISO 8859

El estándar ISO 8859 fue formado por diferentes paquetes de caracteres para las lenguas más comunes. Este estándar fué definido por la ECMA (Asociación de Fabricantes Europeos de Computadoras) en 1980, y aprobado posteriormente por la ISO (Organización Internacional de Normas), y es el que se debe usar en el lenguaje HTML.

Las principales familias de caracteres pertenecientes al ISO 8859 son:

ISO-8859-1 (Latin1): cubre las lenguas de Europa del Oeste, incluyendo francés, español, catalán, vasco, portugués, italiano, albanés, holandés, alemán, inglés, sueco, noruego y otras más.

ISO-8859-2 (Latin2): Lenguas de Europa Central y Occidental, como checo, polaco, rumano, croáta y esloveno.

ISO-8859-3 (Latin3): esperanto y maltés.

ISO-8859-4 (Latin4): estonio, el letón, lituano y lapón.

ISO-8859-5 (alfabeto cirílico): Búlgaro, bielorruso, macedonio, ruso, servio y ucraniano.

ISO-8859-6 (alfabeto árabe): comprende las letras básicas de la lengua árabe.

ISO-8859-7 (griego): cubre todas las letras de la lengua griega.

ISO-8859-8 (hebreo): abarca los caracteres necesarios para escribir en hebreo y yídish.

ISO-8859-9 (Latin5) y ISO-8859-10 (Latin6): amplía los conjuntos de caracteres latinos anteriores, añadiendo las letras que faltaban para poder escribir completamente en turco y en islandés, letón, el esquimal, el lapón y las demás lenguas nórdicas.

Juegos de caracteres UCS y UNICODE

Estos estándares son mas recientes, más completos y unificados: el UCS (Juego Universal de Caracteres), que es en realidad el ISO-10646, evolución del estándar ISO-8859, y el UNICODE, que contienen en un solo charset todos los caracteres mundiales. Ambos estándares se basan en asignar un número hexadecimal único a cada carácter.

Entidades HTML

Las entidades html es código con los que el interprete html reconoce de forma directa ciertos caracteres.

Podemos utilizar entidades HTML en los casos en que el charset que usamos no reconozca cierto carácter o en el caso de usar caracteres reservados para el interprete de código html como <,>.

Los mas conocidos son los de acentuación y la ñ del español entre otras:

Caracteres html mas comunes

símbolo	código	símbolo	código
á	á	Á	Á
é	é	É	É
í	í	Í	Á
ó	ó	Ó	Ó
ú	ú	Ú	Ú
ñ	ñ	Ñ	Ñ

algunos símbolos html

símbolo	código	símbolo	código
<	&lt;	>	&gt;
&	&amp;	"	&quot;
¡	&iexcl;	¢	&cent;
¬	&not;	°	&deg;
µ	&micro;	¶	&para;
©	&copy;	®	&reg;

Ver ejemplo de html entities