Blog Ascariz Web 2.0 » JavaScript http://blog.ascariz.es Programación Web DotNetNuke, ASP.NET, C#.NET,Diseño Mon, 14 Nov 2011 09:02:31 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Ejemplos y tutoriales en HTML5 Rocks http://blog.ascariz.es/index.php/2011/10/20/ejemplos-y-tutoriales-en-html5-rocks/ http://blog.ascariz.es/index.php/2011/10/20/ejemplos-y-tutoriales-en-html5-rocks/#comments Thu, 20 Oct 2011 09:12:35 +0000 Ascariz http://blog.ascariz.es/?p=1705 Google esta impulsando muy fuerte la integración de HTML5 en la nuevas características de HTML5, concretamente son Internet Explorer en sus versiones 6,7,8.

Bueno Google ha creado un sitio de nombre HTML5 Rocks en donde nos ofrece una presentación que explica todo sobre HTML5 de una manera por mas sencilla.

También ofrece ejemplos de codigo HTML5 y tutoriales para empezar a involucrarnos en esta evolución de la web, les recomiendo visitar y ver la presentación es por mas muy interesante.

Facebook Twitter Google Reader Google Bookmarks Google Gmail LinkedIn Technorati Favorites .]]> http://blog.ascariz.es/index.php/2011/10/20/ejemplos-y-tutoriales-en-html5-rocks/feed/ 0 jQuery 1.4: 15 nuevas características que debes conocer para usar el JQuery http://blog.ascariz.es/index.php/2010/01/18/jquery-1-4-15-nuevas-caracteristicas-que-debes-conocer-para-usar-el-jquery/ http://blog.ascariz.es/index.php/2010/01/18/jquery-1-4-15-nuevas-caracteristicas-que-debes-conocer-para-usar-el-jquery/#comments Mon, 18 Jan 2010 14:41:01 +0000 Ascariz http://blog.ascariz.es/?p=1540 jQuery 1.4 ha sido lanzado y en Nettuts+ no han perdido el tiempo y han publicado un artículo imprescindible, en el que hacen un repaso a las nuevas características y mejoras que podemos encontrar. La versión 1.4 de jQuery no es simplemente una versión de mantenimiento con la corrección de algunos “bugs”; incorpora muchas características y mejoras nuevas:

1.- Pasar atributos a jQuery(…)
2.- Los métodos “nextUntil”, “prevUntil” y “parentsUntil”
3.- Enlazar múltiples controladores de eventos
4.- Definir una función diferente de “easing” por cada propiedad que estamos animando.
5.- Nuevos eventos live()
6.- Controlar el contexto de una función
7.- Anadir un retraso a la ejecución de las animaciones
8.- Comprobar si un elemento tiene algo con el selector “:has()”
9.- Desenvolver elementos con unwrap()
10.- Eliminar elementos sin borrar datos
11.- Mejoras en el método index(…)
12.- Los métodos de manipulación DOM aceptan “callbacks”
13.- Determinar el tipo del objeto
14.- Mejoras en el método Closest(…)
15.- Los nuevos eventos focusIn y focusOut

jQuery 1.4 Released: The 15 New Features you Must Know » »

Facebook Twitter Google Reader Google Bookmarks Google Gmail LinkedIn Technorati Favorites .]]> http://blog.ascariz.es/index.php/2010/01/18/jquery-1-4-15-nuevas-caracteristicas-que-debes-conocer-para-usar-el-jquery/feed/ 0 WordPress Ganador de Open Source CMS Award en el 2009 http://blog.ascariz.es/index.php/2009/12/14/wordpress-ganador-de-open-source-cms-award-en-el-2009/ http://blog.ascariz.es/index.php/2009/12/14/wordpress-ganador-de-open-source-cms-award-en-el-2009/#comments Mon, 14 Dec 2009 15:12:26 +0000 Ascariz http://blog.ascariz.es/?p=1482 Estaba muy emocionado la semana pasada al enterarse de que WordPress ha sido galardonado con el mejor en general Open Source CMS Award en el 2009 Open Source CMS Awards. Este es un hito para nosotros, ya que es la primera vez que hemos ganado este premio, y marca un cambio en la percepción pública de WordPress, de blog de software para todas las funciones de CMS. No contest pequeño, el Open Source CMS Awards recibió más de 12.000 candidaturas y más de 23.000 votos a través de cinco categorías.

Como Hiro Nakamura dijo que cuando el tiempo se inclinó primero a la tierra y el espacio en Times Square: “Yatta!”

Además de ganar en la categoría global más abierto Source CMS, WordPress fue nombrada primera finalista en el Best Open Source PHP CMS categoría. Esto es importante porque no estábamos ni siquiera en el top 5 años pasado, y ahora estamos # 2, por delante de Joomla! Como se indica en el sitio Award, “WordPress hecho su camino en los cinco primeros por primera vez. El hecho de que se superó con Drupal por un margen muy pequeño indica lo popular que se ha convertido con los usuarios, así como a los desarrolladores durante el año pasado “.

Cada día miles de personas nuevas están adoptando WordPress al poder no sólo en sus blogs pero los sitios y comunidades enteras, sin comprometer la facilidad de uso o de escalabilidad (como sería el caso de un legado CMS). Cada miembro de la comunidad de WordPress, de desarrollador principal al comienzo del usuario, debe estar orgulloso de ser parte de este impulso: Felicitaciones a todos nosotros!

Vía: wordpress

Facebook Twitter Google Reader Google Bookmarks Google Gmail LinkedIn Technorati Favorites .]]> http://blog.ascariz.es/index.php/2009/12/14/wordpress-ganador-de-open-source-cms-award-en-el-2009/feed/ 2 Mostrar/ocultar capas DIV pulsando sobre un enlace http://blog.ascariz.es/index.php/2009/12/03/mostrarocultar-capas-div-pulsando-sobre-un-enlace/ http://blog.ascariz.es/index.php/2009/12/03/mostrarocultar-capas-div-pulsando-sobre-un-enlace/#comments Thu, 03 Dec 2009 16:24:04 +0000 Ascariz http://blog.ascariz.es/?p=1472 Ejemplo de como ocultar y mostrar capas “div” con enlaces para cualquier lenguaje de programación HTML, ASP , PHP y . NET

<html>
<head>
<script LANGUAGE=”javascript”>
var capa
function cambio(idCapa){
if (document.layers) capa = eval(”document.” + idCapa);
if (document.all) capa = eval(idCapa + “.style”);
if (document.getElementById) capa = eval(’document.getElementById(”‘ + idCapa + ‘”).style’);

if ((capa.visibility == “hidden”) || (capa.visibility == “hide”)){
  capa.visibility = (document.layers) ? “show” : “visible” ;
}else{
  capa.visibility = (document.layers) ? “hide” : “hidden” ;
}
}
//–>
</script>
</head>
<body>
<div id=”capa1″ style=’position:relative;’>
Esta es la capa 1
</div>
<div id=”capa2″ style=’position:relative;’>
Esta es la capa 2
</div>
<a href=”#” onclick=”cambio(’capa1′)”>Muestra/oculta la capa 1</a>
<br>
<a href=”#” onclick=”cambio(’capa2′)”>Muestra/oculta la capa 2</a>
</body>

Facebook Twitter Google Reader Google Bookmarks Google Gmail LinkedIn Technorati Favorites .]]> http://blog.ascariz.es/index.php/2009/12/03/mostrarocultar-capas-div-pulsando-sobre-un-enlace/feed/ 2 Javascript : Recorrer elementos de un formulario. Función y código Fuente http://blog.ascariz.es/index.php/2009/05/28/javascript-recorrer-elementos-de-un-formulario-funcion-y-codigo-fuente/ http://blog.ascariz.es/index.php/2009/05/28/javascript-recorrer-elementos-de-un-formulario-funcion-y-codigo-fuente/#comments Thu, 28 May 2009 12:17:17 +0000 admin http://blog.ascariz.es/?p=1268 Función y Código Fuente  para recorrer los elementos de un formulario y sus propiedades con Javascript cliente.

Este es un simple ejemplo en el que podemos ver las propiedades NAME,TYPE y VALUE.(existen muchas más). Para ello usaremos la colección elements que nos proporcionara todos los nodos del documento.

Usando la propiedad document.frm.elements.length podremos saber el número de items y así recorrer todos los elementos del documento HTML



<script>
function RecorrerForm(){
var sStr = "";
var frm=document.frm;
for (i=0;i<document.frm.elements.length;i++)
{
sAux += "NOMBRE: " + frm.elements[i].name;
sAux += “TIPO : ” + frm.elements[i].type;
sAux += “VALOR: ” + frm.elements[i].value + “\n” ;
}
alert(sStr);
}
</script>


<form name="frm">
<input type="text" value="" name="nombre"><br>
<input type="text" value="" name="apellidos"><br>
<input type="text" value="" name="telefono"><br>
<input type="text" value="" name="ciudad"><br>
<input type="text" value="" name="pais"><br>
<input type="submit" value="Aceptar" onclick="javascript:RecorrerForm();" >
</form>

Posiblemente este ejemplo no tenga mucha útilidad pero es una pequeña muestra de la potencia de javascript al recorrer la jerarquia de NODOS de un documento HTML.

Facebook Twitter Google Reader Google Bookmarks Google Gmail LinkedIn Technorati Favorites .]]> http://blog.ascariz.es/index.php/2009/05/28/javascript-recorrer-elementos-de-un-formulario-funcion-y-codigo-fuente/feed/ 2 Libros de desarrollo web 2.0 para PHP, ASP, .NET, Ajax, JQuery, XHTML, CSS http://blog.ascariz.es/index.php/2008/11/26/libros-de-desarrollo-web-20-para-php-asp-net-ajax-jquery-xhtml-css/ http://blog.ascariz.es/index.php/2008/11/26/libros-de-desarrollo-web-20-para-php-asp-net-ajax-jquery-xhtml-css/#comments Wed, 26 Nov 2008 14:38:19 +0000 admin http://blog.ascariz.es/?p=603 En  la web www.librosweb.es podemos encontrar una serie de libros totalmente gratuitos de desarrollo destinados a principiantes.

  • Symfony, la guía definitiva.
  • Introducción a AJAX
    • Incluye Google Maps, Prototype, jQuery y decenas de ejemplos.
  • Introducción a JavaScript
    • Aprende a manejar eventos, validar formularios y crear otras utilidades comunes.
  • Introducción a CSS
    • Incluye las propiedades de CSS 2.1 y decenas de ejemplos.
  • Introducción a XHTML
    • Aprende cómo crear páginas web accesibles y que validen.
Facebook Twitter Google Reader Google Bookmarks Google Gmail LinkedIn Technorati Favorites .]]> http://blog.ascariz.es/index.php/2008/11/26/libros-de-desarrollo-web-20-para-php-asp-net-ajax-jquery-xhtml-css/feed/ 0 Imprimir páginas web + Imprimir Div + Javascript + Imprimir http://blog.ascariz.es/index.php/2008/10/22/imprimir-paginas-web-div-javascript-imprimir/ http://blog.ascariz.es/index.php/2008/10/22/imprimir-paginas-web-div-javascript-imprimir/#comments Wed, 22 Oct 2008 13:45:53 +0000 admin http://blog.ascariz.es/?p=324 Código Fuente para imprimir partes especificas con capas + JavaScript, Muy util para todo tipo de páginas web.

<!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>
<script>
function imprimir(que) {
var ventana = window.open(”", “”, “”);
var contenido = “<html><body onload=’window.print();window.close();’>”;
contenido = contenido + document.getElementById(que).innerHTML + “</body></html>”;
ventana.document.open();
ventana.document.write(contenido);
ventana.document.close();
}</script>
</head><body>
<a href=”javascript:imprimir(’pp’)”>imprimir</a>
<div id=”pp”>contenido imprimible</div>
</body>
</html>
Facebook Twitter Google Reader Google Bookmarks Google Gmail LinkedIn Technorati Favorites .]]> http://blog.ascariz.es/index.php/2008/10/22/imprimir-paginas-web-div-javascript-imprimir/feed/ 10 JavaScript – window.open http://blog.ascariz.es/index.php/2008/10/06/javascript-windowopen/ http://blog.ascariz.es/index.php/2008/10/06/javascript-windowopen/#comments Mon, 06 Oct 2008 19:31:36 +0000 admin http://blog.ascariz.es/?p=236 El problema de tener una página compleja con varios enlaces es el que, al ingresar a uno y volver, uno tiene que esperar a que la pagina se redibuje de nuevo, lo cual puede ser molesto. Una solución es abrir una ventanita en el enlace. Muchos la implementan usando un evento onclick que llama a window.open(), de la siguiente forma:

<a href=”#” onclick=”window.open(’pagina.html’,'window’,'params’)”>Bla</a>

El problema con eso es que sólo funciona con Javascript. Uno podría cambiar el gato por pagina.html para que funcionara sin Javascript, pero en el navegador con Javascript hace lo mismo en la ventana original, ADEMÁS de abrir la ventana. Y sólo queremos abrir la ventana.

Solución: Agreguemos un return false para evitar tal efecto indeseado.

<a href=”pagina.html” onclick=”window.open(this.href,’window’,'params’);return false”>Bla</a>

(this.href en Javascript apunta al valor del atributo href de este tag (el <a>), que en este caso es ‘pagina.html’)

Otra: siempre es útil encapsular las cosas que ocupamos mucho. Por ejemplo, suponiendo que tengamos muchos enlaces de la forma anterior, en los cuales sólo varía la dirección de la página, podemos crear la siguiente función:

<script language=”Javascript”>
function abrir(pagina) {
window.open(pagina,’window’,'params’);
}
</script>

Y luego, aplicarla de la siguiente forma:

lt;a href=”pagina.html” onclick=”abrir(this.href);return false”>

Facebook Twitter Google Reader Google Bookmarks Google Gmail LinkedIn Technorati Favorites .]]> http://blog.ascariz.es/index.php/2008/10/06/javascript-windowopen/feed/ 0 Navegador de Google Chrome http://blog.ascariz.es/index.php/2008/09/25/navegador-de-google-chrome/ http://blog.ascariz.es/index.php/2008/09/25/navegador-de-google-chrome/#comments Thu, 25 Sep 2008 08:10:22 +0000 admin http://blog.ascariz.es/?p=144 Google lanzó hace unos días Google Chrome, un nuevo navegador de código abierto que buscará brindarles a usuarios en todo el mundo, una mejor experiencia en la red.


Disponible en 43 idiomas, Google Chrome es una nueva propuesta de navegador, basada en la simplicidad y poder que los usuarios esperan de cualquier producto de Google.

Una barra de búsqueda y dirección combinada lleva al usuario a donde quiere ir, tipeando unas pocas letras o palabras.

Cuando los usuarios abren una nueva pestaña en Google Chrome, podrán visualizar una página con imágenes de los sitios que más visitan, búsquedas recientes y marcadores, haciendo fácil la navegación.

Cada pestaña del navegador corre en un proceso independiente; al aislar las pestañas, si una se traba o tiene comportamientos poco usuales, las demás se mantienen estables y funcionales, así los usuarios pueden continuar trabajando sin tener que reiniciar Google Chrome.

Google también incluyó un nuevo motor JavaScript, V8, que no solamente acelera las aplicaciones web de hoy, pero que habilita toda una nueva generación de aplicaciones web que no podrían existir en los navegadores existentes.

Facebook Twitter Google Reader Google Bookmarks Google Gmail LinkedIn Technorati Favorites .]]> http://blog.ascariz.es/index.php/2008/09/25/navegador-de-google-chrome/feed/ 0 tablesorter: Ordenar tablas de una forma sencilla http://blog.ascariz.es/index.php/2008/09/22/tablesorter-ordenar-tablas-de-una-forma-sencilla/ http://blog.ascariz.es/index.php/2008/09/22/tablesorter-ordenar-tablas-de-una-forma-sencilla/#comments Mon, 22 Sep 2008 18:18:27 +0000 admin http://blog.ascariz.es/?p=136 Tablesorter es un plugin de jQuery que nos permite de una forma muy sencilla ordenar las columnas de una tabla sin tener que refrescar la página. Puede ordenar por diversos tipos de datos (texto, números, monedas, fechas, …) y posee múltiples opciones de personalización y ampliación.

Lo mejor es que es muy sencillo de utilizar. Lo primero que tenemos que hacer es enlazar en el head de nuestro documento a la librería jQuery y al plugin tablesorter.

<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/jquery.tablesorter.js” type=”text/javascript”></script>

 Ahora supongamos que tenemos una tabla como ésta.

<table cellpadding="0" cellspacing="0" id="miTabla">
<thead><tr><th>Nombre</th>
<th>Apellidos</th>
<th>Email</th>
<th>Cargo</th>
<th>Web</th>
</tr>
</thead>
<tbody>
<tr><td>Alfredo</td>
<td>P&eacute;rez  </td>
<td>apererez@gmail.com</td>
<td>Supervisor</td>
<td>http://jseomos.com</td>
</tr><tr><td>Francisco</td>
<td>Hern&aacute;ndez </td>
<td>fhernandez@yahoo.com</td>
<td>Comercial</td>
<td>http://jseomos.com</td>
</tr><tr><td>Ana</td>
<td>Sanabria</td>
<td>anas@gmail.com</td>
<td>Comercial</td>
<td>http://jseomos.com</td>
</tr><tr><td>Javier</td>
<td>D&iacute;az</td>
<td>jdiaz12@gmail.com</td>
<td>Administrativo</td>
<td>http://jseomos.com</td>
</tr><tr><td>Juan</td>
<td>Alvez</td>
<td>jalves@hotmail.com</td>
<td>T&eacute;cnico</td>
<td>http://jseomos.com</td>
</tr></tbody></table>

Lo único de lo que nos tenemos que asegurar es que tenga un identificador -en este caso miTabla- y una estructura en la que aparezcan correctamente utilizados el THEAD y el TBODY.

Ahora tan sólo queda indicarle al plugin que tabla deseamos ordenar cuando el documento se haya cargado.

$(document).ready(function()
{
$(”#miTabla”).tablesorter();
}
);

El siguiente ejemplo, con algo de CSS para darle un mejor aspecto, utiliza tablesorter

Facebook Twitter Google Reader Google Bookmarks Google Gmail LinkedIn Technorati Favorites .]]> http://blog.ascariz.es/index.php/2008/09/22/tablesorter-ordenar-tablas-de-una-forma-sencilla/feed/ 0