Buscar en el Blog

Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas

viernes, 18 de diciembre de 2015

Desarrollo de un evaluador de expresiones algebraicas




Desarrollo de un evaluador de
expresiones algebraicas.
En C++, C#, Visual Basic .NET, Java, PHP, JavaScript y  Object Pascal
 Rafael Alberto Moreno Parra

Páginas 308 

jueves, 30 de abril de 2015

CSS3 y Javascript avanzado



Jordi Collell Puig
Pag. 86
El CSS es un lenguaje de estilos empleado para definir la presentación, el formato y la apariencia de un documento de marcaje, sea html, xml, o cualquier otro. Comúnmente se emplea para dar formato visual a documentos html o xhtml que funcionan como espacios web. También puede ser empleado en formatos xml, u otros tipos de documentos de marcaje para la posterior generación
de documentos.
Las hojas de estilos nacen de la necesidad de diseñar la información de tal manera que podemos separar el contenido de la presentación y, así, por una misma fuente de información, generalmente definida mediante un lenguaje de marcaje, ofrecer diferentes presentaciones en función de dispositivos, servicios, contextos o aplicativos. Por lo que un mismo documento html, mediante
diferentes hojas de estilo, puede ser presentado por pantalla, por impresora, por lectores de voz o por tabletas braille. Separamos el contenido de la forma, composición, colores y fuentes. La especificación del CSS la mantiene el World Wide Web Consortium (W3C http://www.w3c.org).

miércoles, 6 de agosto de 2014

Precarga tu página con jQuery y CSS


Hay veces en que una pagina es muy pesada o al momento que esta cargando los elementos se ven desordenados.
Vamos  a implementar un ejemplo sencillo y funcional. Usaremos la libreria "JQuery".

Implentacion


<div id="preloader">
    <div id="loader">&nbsp;</div>
</div>


Creamos un archivo style.css y lo guardamos en la carpete csss

body {
    overflow: hidden;
}
/* preloader */
#preloader {
    position: fixed;
    top:0; left:0;
    right:0; bottom:0;
    background: #000;
    z-index: 100;
}
#loader {
    width: 200px;
    height: 200px;
    position: absolute;
    left:50%; top:50%;
    background: url(../img/loader.gif) no-repeat center 0;
    margin:-50px 0 0 -50px;
}


Creamos un archivo "js" llamado scripts.js y la ubicamos en la carpeta "js"


$(window).load(function() {
    $('#preloader').fadeOut('slow');
    $('body').css({'overflow':'visible'});
})

Finalmente el codigo html.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
<title>Preload...</title>
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
   
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div id="preloader">
    <div id="loader"></div>
</div>
<div id="main">
 <img src="http://www.imagenzone.net/fondos-de-pantalla/Anime/Fondo-Anime-04.jpg"/>
</div>
</body>
</html>


 Nota: en la carpeta img deben tener el archivo loader.gif



martes, 18 de marzo de 2014

El Gran Libro de HTML, CSS3 y Javascript



Autor: Juan Diego Gauchat

Pahinas: 337


Introducción

HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una mejora
de esta ya antigua tecnología, sino un nuevo concepto para la construcción de sitios web y
aplicaciones en una era que combina dispositivos móviles, computación en la nube y
trabajos en red.
Todo comenzó mucho tiempo atrás con una simple versión de HTML propuesta para
crear la estructura básica de páginas web, organizar su contenido y compartir información.
El lenguaje y la web misma nacieron principalmente con la intención de comunicar
información por medio de texto.
El limitado objetivo de HTML motivó a varias compañías a desarrollar nuevos lenguajes
y programas para agregar características a la web nunca antes implementadas. Estos
desarrollos iniciales crecieron hasta convertirse en populares y poderosos accesorios.
Simples juegos y bromas animadas pronto se transformaron en sofisticadas aplicaciones,
ofreciendo nuevas experiencias que cambiaron el concepto de la web para siempre.
De las opciones propuestas, Java y Flash fueron las más exitosas; ambas fueron
masivamente adoptadas y ampliamente consideradas como el futuro de Internet. Sin
embargo, tan pronto como el número de usuarios se incrementó e Internet pasó de ser
una forma de conectar amantes de los ordenadores a un campo estratégico para los
negocios y la interacción social, limitaciones presentes en estas dos tecnologías probaron
ser una sentencia de muerte.
El mayor inconveniente de Java y Flash puede describirse como una falta de
integración. Ambos fueron concebidos desde el principio como complementos (plug-ins),
algo que se inserta dentro de una estructura pero que comparte con la misma solo
espacio en la pantalla. No existía comunicación e integración alguna entre aplicaciones y
documentos.
La falta de integración resultó ser crítica y preparó el camino para la evolución de un
lenguaje que comparte espacio en el documento con HTML y no está afectado por las
limitaciones de los plug-ins. Javascript, un lenguaje interpretado incluido en navegadores,
claramente era la manera de mejorar la experiencia de los usuarios y proveer
funcionalidad para la web. Sin embargo, después de algunos años de intentos fallidos para
promoverlo y algunos malos usos, el mercado nunca lo adoptó plenamente y pronto su
popularidad declinó. Los detractores tenían buenas razones para oponerse a su adopción.
En ese momento, Javascript no era capaz de reemplazar la funcionalidad de Flash o Java. A
pesar de ser evidente que ambos limitaban el alcance de las aplicaciones y aislaban el
contenido web, populares funciones como la reproducción de video se estaban
convirtiendo en una parte esencial de la web y solo eran efectivamente ofrecidas a través
de estas tecnologías



jueves, 20 de febrero de 2014

Fundamentos de jQuery

Fundamentos de jQuery

Textos originales:
Rebecca Murphey
Traducción y adaptación a español:
Leandro D’Onofrio
Correcciones:
Gustavo Raúl Aragón, Pablo Maronna, Denis Ciccale y otras personas
Con contribuciones de James Padolsey, Paul Irish y otros.
Bajo licencia Creative Commons




sábado, 4 de junio de 2011

Validacion de Formularios con jQuery

Hola a todos, en esta ocasión veremos como validar un formulario HTML con la librería jQuery y usando un plugin llamado Validate.

Para esto necesitamos los siguientes archivos:

  1. jQuery: El cual pueden descargarlo desde Aqui
  2. Validate: El plugin de validacion basado en la libreria jQuery, este plugin lo pueden descargar de este enlace.
  3. validacion.js: Este archivo es el que nosotros crearemos.
Manos a la obra:

Primero el script o codigo html de la pagina con el formulario que vamos a validar.

<!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=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/validar.js"></script>
</head>

<body>
<form id="form1" name="form1" method="post" action="www.google.com">
  <p>&nbsp;</p>
  <p>
    <label>nombre
      <input type="text" name="nombre"  />
    </label>
  </p>
  <p>
    <label>email   
      <input name="email" type="text" id="email" />
    </label>
  </p>
  <p>
    <label>contraseña
      <input type="password" name="pass" id="pass" />
    </label>
  </p>
  <p>
    <label>Repetir Contraseña
      <input type="password" name="pass2" id="pass2" />
    </label>
  </p>
  <p>
    <label>
      <input type="submit" name="button" id="button" value="Enviar" />
    </label>
  </p>
  <p>&nbsp;</p>
</form>
</body>
</html>

Lo que nos interesa es el formulario y los componentes, controles o etiquetas que lo conforman, como por ejemplo:

id="form1" 
<input type="text" name="nombre"  />
<input name="email" type="text" id="email" />
<input type="password" name="pass" id="pass" />
  <input type="password" name="pass2" id="pass2" />

Se debe poner atencion a los valores que tienen por "id" y "name", porque son estos valores los que usaremos en la validacion.

Dentro de las etiquetas "head" del documento html, debemos incluir los archivos que valos a usar, como son:
<head>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/validar.js"></script>
</head>

Primero se debe incluir la libreria jquery., luego el plugin y despues el archivo que nosotros vamos a crear, el cual es validar.js.


Los Archivos con extension "js", los he colocado dentro de una carpeta llamada "js", para tener en orden nuestro archivos, es por eso que cuando incluimos los archivos usamos "js/elarchivoaincluior", donde "js" es el directorio o carpeta donde se ubican los script o archivos a incluir.









Ahora el script validar.js

$(document).ready(inicio);
function inicio()
{
    $("#form1").validate
    (
        {
            rules:
            {
                nombre: {
                        required: true
                        }
                        ,
                email:    {
                        email:true
                        }
                        ,
                pass:    {
                        required:true,
                        minlength:8
                        }
                        ,
                pass2:    {
                        required:true,
                        equalTo: "#pass"
                        }   

            }
            ,
            messages:
            {
                nombre: {
                        required: "* Debe Llenar este campo"
                        }
                        ,
                email:    {
                        email:"Debe ingresar una direccion de correo valido"
                        }
               
                       
            }             
        }
    );
  
   
   
}



El resultado sera el siguiente:









Explicacion del Script:

$(document).ready(inicio);
Con esto le indico que cuando la pagina este lista, ejecuta la funcion inicio.


Dentro de la funcion inicio se encuenta la validacion del formulario.


$("#form1").validate({reglas,mensajes})
En la linea de  $("#form1") indicamos que el formulario que contenga el id form1, sea el que recibira o donde se aplicara la validacion.
dentro de validate(), recibe las reglas de validacion y los mensajes a mostrar, sino se colocan los mensajes a mostrara apareceran los mensajes por defecto, que estan en ingles.


rules:
            {
               Nombrecampo: {
                          instruccion:valor,
                          instruccion2:valor2
                        }
             }




En el codigo anterior lo que haces es definir las reglas por cada campo que contenga el formulario, indicando para ellos el nombre del campo y dentro de llaves las instrucciones de la validacion, si son varios campos, estos se separan por una coma.

  rules:
            {
                nombre: {
                        required: true
                        }
                        ,
                email:    {
                        email:true
                        }
                        ,
                pass:    {
                        required:true,
                        minlength:8
                        }
                        ,
                pass2:    {
                        required:true,
                        equalTo: "#pass"
                        }   

            }





Para separar el bloque de reglas de validacion y los mensages de validacion, se usa la coma.

    rules:
            {
               
              aqui las reglas de validacion     

            }
            , //separadas por una coma
            messages:
            {
               
                aqui los mensajes
                      
            }  

Y finalmente el apartado de los mensages de nuestro script


messages:
            {
                nombre: {
                        required: "* Debe Llenar este campo"
                        }
                        ,
                email:    {
                        email:"Debe ingresar una direccion de correo valido"
                        }
               
                       
            } 

Sino se incluye ningun mensaje para un campo validado, entonces se mostrara el mensaje por defecto.

Explicacion de las instrucciones de validacion:

required:true Quiere decir requerido, que debe ser ingresado si o si.
email:true  Quiere decir que debe ser ingresado un email(correo) valido.
minlength:8 Que el numero de digitos minimos a ser ingresado debe ser 8.
equalTo: "#pass"  Igual a, quiere decir que este campo tiene que ser igual a otro campo, pasado como parametro el id del campo, en este caso el id del campo es pass.


Para mas informacion sobre las instrucciones de validate, pueden ingresar a la pagina oficial de jQuery y buscar el apartado del plugin Validation.


Nos vemos... hasta otra oportunidad.







Google+ Seguidores