martes, 25 de junio de 2013

Ahorcado en java


package exercise18;

import java.io.File;
import java.io.FileNotFoundException;
import java.util.Scanner;

/**
 *
 * @author Chuy Juarez
 */
public class Exercise18 {

    static final String PalabraSecreta = "PalabraSecreta.txt";

    public static void main(String[] args) {
        Scanner lectura = new Scanner(System.in);
        Scanner archivo = null;
        String palabrasecreta, posibilidad, fin = "sigue",solucion="";
        int oportunidad = 0;
        try {
            archivo = new Scanner(new File(PalabraSecreta));
        } catch (FileNotFoundException e) {
            System.out.println("El archivo " + PalabraSecreta + " no existe \nFin del programa");
            System.exit(0);
        }
        palabrasecreta = archivo.next();
        char palabraSecretaChar[] = palabrasecreta.toCharArray();
        System.out.println("la primera letra de la palabra comienza con " + palabraSecretaChar[0] + " y tiene " + palabrasecreta.length() + " letras en total");
        System.out.println("Acepta el reto y Adivina la palabra ");
        char resuelto[] = new char[palabrasecreta.length()];
        resuelto[0] = palabraSecretaChar[0];
        do
        {
            System.out.println("\nDigita una letra ");
            posibilidad = lectura.nextLine();
            char posibilidadChar[] = posibilidad.toCharArray();
            int i;
            char aux = 0, aux2 = 1;
            for (i = 0; i < palabrasecreta.length(); i++)
            {
                if (posibilidadChar[0] == palabraSecretaChar[i])
                {
                    resuelto[i] = palabraSecretaChar[i];
                    aux = resuelto[i];
                    aux2 = palabraSecretaChar[i];
                   
                }
                System.out.println(" " + resuelto[i]);

            }
            if (aux != aux2)
            {
                oportunidad++;
                System.out.println("Intentos fallidos " + oportunidad + "  Tolerancia 2");
            }
            else
            {
                char auxiliar;
                solucion="";
                for(i=0;i<palabrasecreta.length();i++)
                {
                    auxiliar=resuelto[i];
                    solucion=solucion+auxiliar;
                }
                if(solucion.equalsIgnoreCase(palabrasecreta))
                {
                    fin="fin";
                }
            }
        } while (fin.equals("sigue") && (oportunidad != 2));
        if(solucion.equalsIgnoreCase(palabrasecreta))
        {
            System.out.println("Exelente  la solucion es "+palabrasecreta);          
        }
        else
        {
            System.out.println("Suerte para la proxima ");
        }
    }
}


Ahora solo creamos en la carpeta del proyecto un archivo llamado PalabraSecreta.txt el cual tendrá la palabra secreta que queremos descubrir



Solución clase 17 iCarnegie aprende a leer un archivo desde java


package juarezSolisExercise17;
import java.util.Scanner;
import java.io.File;
import java.io.FileNotFoundException;

/**
 * @author ChuyJuarez
 * Este programa funciona a la perfección puede usted añadir o cambiar lo valores de archivo.
 * El se encargara de calcular o indicar algun error.
 * Hecho por Jesus Santos Juarez Solis TIC03
 */
public class JuarezSolisExercise17
{
    static final String DATA_PATH = "DataFile.txt";
    public static void main(String[] args)
    {
        //Scanner will read in the file.
        //In Eclipse, if you "right click" the word Scanner and choose "Open Declaration",
        //you can see the class methods available to you
        Scanner fileReader = null;
        try
        {
            fileReader = new Scanner(new File(DATA_PATH));
        }
        catch (FileNotFoundException e)
        {
            System.out.println("The file "+DATA_PATH+" was not found!\nThe program terminates now.");
            System.exit(0);
        }
        float largo=0,suma=0,contador=0,promedio,numero;
        String numAux="";
        try
        {
            do
            {
                numAux=fileReader.next();
                numero=Float.parseFloat(numAux);
                System.out.println("Debug: theFloat: "+numero);
                contador++;
                suma=suma+numero;
                if(numero>largo)
                {
                    largo=numero;
                }
            }while(numero==Float.parseFloat(numAux));
        }
        catch(Exception e)
        {
            try
            {
                numero=Float.parseFloat(numAux);
            }
            catch(Exception ex)
            {
                System.out.println("Error probablemente exista una cadena no reconocida como Float");
            }
            promedio=suma/contador;
            System.out.println("Count of numbers read = "+contador+"\nSum of numbers read = "+suma+"\nAverage of numbers read = "+promedio+"\nLargest number read = "+largo);
        }
    }
}
  

Ahora dentro de la carpeta de tu proyecto crea un archivo DataFile.txt con los siguientes datos
23.4 44.8 98.756 98.758 11 toma en cuenta los epacios

Solución 16 iCarnegie comprende el try & catch


/**
 *
 */
package juarezSolisExercise16;
import java.util.Scanner;
/**
 * @author park
 *
 */
public class JuarezSolisExercise16
{

/**
* @param args
* @param varible
*/
public static void main(String[] args)
{
String ASK_NUMBER = "Please enter a number (enter \"stop\" to stop): ";
Scanner keyboard = new Scanner(System.in);
int contador=0;
float numero = 0,promedio,suma=0;
String variable="";
System.out.println(ASK_NUMBER);
variable=keyboard.nextLine();
while(variable.compareToIgnoreCase("stop")!=0)
{
try//es simple try intentara convertir un texto a numero si el texto es un numero lo hará si
//el texto es una letra o contiene una letra no lo hará y fallara así que try lo enviara a catch
{
numero=Float.parseFloat(variable);
suma=numero+suma;
contador++;
}
catch(Exception e)
{
System.out.println("Error: "+e.getMessage());
}
System.out.println(ASK_NUMBER);
variable=keyboard.nextLine();
}
promedio=suma/contador;
System.out.println("\nEl promedio de la suma de los "+contador+" numero(s) es "+promedio);
}

}

Solución clase 15 iCarnegie aprende a usar boolean


/**
 *
 */
package exercise15;
import java.util.Scanner;
/**
 * @author Chuy Juarez
 *
 */
public class Exercise15
 {
public static void main(String[] args) {
String ASK_YEAR = "Please enter a year:";
Scanner keyboard = new Scanner(System.in);
//Ask for a Year
System.out.println(ASK_YEAR);
System.out.println("Student's code goes here");
boolean variable=true;
if(variable==keyboard.hasNextInt())
{
int year=Integer.parseInt(keyboard.nextLine());
boolean testA=true;
boolean testB=true;
boolean testC=true;
if(testA==((year%4)==0)&&testB==((year%100)!=0))
{
System.out.println(year+" Is a leap year");
}
else
{
if(testA==((year%4)==0)&&testB==((year%100)==0)&&testC==((year%400)==0))
{
System.out.println(year+" Is a leap year");
}
else
{
System.out.println(year+" Is not a leap year");
}
}
}
else
{
System.out.println("Error digite un numero entero");
}
}
}

Solución clase 14 iCarnegie


/**
 *
 */
package exercise14;
import java.math.BigDecimal;
import java.math.RoundingMode;
import java.text.DecimalFormat;
import java.util.Scanner;
/**
 * @author Chuy Juarez
 *
 */
public class Exercise14 {
private static String ASK_NUMBER = "Input a real number between 0 and 100 : ";
public static void main(String[] args) {
Scanner keyboard = new Scanner(System.in);
System.out.println(ASK_NUMBER);
try {
String text = keyboard.next().trim();
System.out.println("Debug: You just entered: "+text);
float num=Float.parseFloat(text);
if(num<=100&&num>=0)
{
BigDecimal entero = new BigDecimal(num);
   entero = entero.setScale(0, RoundingMode.HALF_UP);
   System.out.println("Número redondeado: "+entero);
}
else
{
System.out.println("Error solo puedes introducir numeros entre 0 y 100");
}
} catch (Exception e) {
System.out.println("Error: "+e.getMessage());
}
}

}

miércoles, 12 de junio de 2013

Resolucion iCarnegie Exersice13



Resolucion iCarnegie Exersice13


package exercise13;
import java.util.Scanner;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileReader;

/**
 * @author Chuy Juarez
 * Esto funciona totalmente modifique el archivo DataFile.txt y compruebe
 *Resuleto por Chuy Juarez
 */
public class Exercise13 {
static final String DATA_PATH ="DataFile.txt";
/**
* @param args not used in this project
*/
public static void main(String[] args)
{
Scanner fileReader = null;
try {
fileReader = new Scanner(new File(DATA_PATH));
} catch (FileNotFoundException e) {
System.out.println("The file "+DATA_PATH+" was not found!");
System.out.println("The program terminates now.");
System.exit(0);
}
System.out.println("Student's code goes here");
int limite=fileReader.nextInt(),contador=0;
System.out.println("Cantidad de cadenas "+limite+"\n");
while(contador<limite)
{
String cadena1=fileReader.next();
System.out.println("cadena "+(contador+1)+" "+cadena1);
contador++;
if(contador==limite)
{
limite=fileReader.nextInt();
contador=0;
System.out.println("\nCantidad de cadenas "+limite+"\n");
while(contador<limite)
{
cadena1=fileReader.next();
System.out.println("cadena "+(contador+1)+" "+cadena1);
contador++;
}
}

}

}

}

lunes, 10 de junio de 2013

Como ligar una Base de Datos a una Web

Primero creamos nuestro formulario


<!DOCTYPE html>
<html>
    <head>
        <title>Almacen</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <form name="almacen" id="almacen" action="index.jsp" method="post">
            <table border="1" cellspacing="2" cellpadding="0">
                <thead>
                    <tr>
                        <td>
                            Dato
                        </td>
                        <td>
                            Informaci&oacute;n
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            Nombre del Producto
                        </td>
                        <td>
                            <input type="text" name="producto" id="producto"/> 
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Precio
                        </td>
                        <td>
                            <input type="text" name="precio" id="precio"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Cantidad
                        </td>
                        <td>
                            <select name="cantidad">
                                <option value="5.5">5.5 Kilos</option>
                                <option value="10.5">10.5 Kilos</option>
                                <option value="15.5">15.5 Kilos</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Fecha
                        </td>
                        <td>
                            <input type="date" name="fecha" id="fecha"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="submit" name="guardar" value="Guardar"/>
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
        <div>TODO write content</div>
    </body>
</html>

por esta ocasión no aplicaremos validación ni estilo el tutorial pasado lo vimos así que podemos dar el estilo que mas nos agrade. (para validar con el archivo .js y para estilo con el .css).

Ahora creamos  nuestra clase java

package operacionesAlmacen;
import java.text.SimpleDateFormat;
import java.util.Date;
public class almacen 
{
    private String producto,fechaAux;
    private int precio;
    private double cantidad,total;
    private Date fecha;
    SimpleDateFormat f=new SimpleDateFormat("yyyy-MM-dd");

    public almacen() {
    }

    public String getProducto() {
        return producto;
    }

    public void setProducto(String producto) {
        this.producto = producto;
    }

    public String getFechaAux() {
        return fechaAux;
    }

    public void setFechaAux(String fechaAux) {
        this.fechaAux = fechaAux;
    }

    public int getPrecio() {
        return precio;
    }

    public void setPrecio(int precio) {
        this.precio = precio;
    }

    public double getCantidad() {
        return cantidad;
    }

    public void setCantidad(double cantidad) {
        this.cantidad = cantidad;
    }

    public Date getFecha() {
        return fecha;
    }

    public void setFecha(Date fecha) {
        this.fecha = fecha;
    }

    public double getTotal() {
        return total;
    }

    public void setTotal(double total) {
        this.total = total;
    }
    
    public void Total()
    {
        setTotal(precio*cantidad);
        try{
            setFecha(f.parse(fechaAux));
        }
        catch(Exception e){
            
        }
    }
}

esta clase recibirá los valores de html los cuales serán enviados por un archivo .jsp


Creamos nuestra conexión BD



package operacionesAlmacen;
//Se impota la libreria de SQL
import java.sql.*;
import java.util.logging.Level;
import java.util.logging.Logger;
//import com.mysql.jdbc.*;
public class Bd {
    //Se declaran las variales
    Connection conn;   //Variable conn de tipo Connection. Nos sirve para establecer la conexion.
    Statement smt;     //Variable smt de tipo Statement. Nos sirve para ejecutar sentencias sql
    ResultSet rs=null; //Variable rs de tipo ResultSet. Nos sirve para almacenar el resultado de una consulta SQL
    String mensaje="";// Variable para desplegar mensajes.


   
   
    /*Ahora realizamos un metodo para conectarse a la base de Datos
    para conestarse a una base de datos se necesitan tres cosas
    1.-El nombre de la base de datos 2.- usuario 3.- pasdword
    El throws nos sirve para que el error no lo maneje el metodo el SQLException es solo para que se encarge de los errores de sintaxis SQL*/
                           
    public Bd(String bd, String user, String password)
    {
                          // Bd recibe el nombre de la base de datos
                          // user recibe el nombre del usuario
                          // password recibe la contraseña del usuario
        String url="jdbc:mysql://localhost/"+bd;
       
        try{
            Class.forName("com.mysql.jdbc.Driver");
            conn=DriverManager.getConnection(url,user,password); // abre la conexion y se guarda en conn
            smt=conn.createStatement();  //smt queda preparada para realizar ejecutar sentencias sql
            mensaje= "Coneccion realizada correctamente a la base de datos :"+url;          
            //System.out.println(mensaje);
        } catch (ClassNotFoundException ex) {
            Logger.getLogger(Bd.class.getName()).log(Level.SEVERE, null, ex);
        }
        catch(SQLException e){
            mensaje="Error al conectar a la base de datos \nError:"+e;
            //System.out.println(mensaje);
        }
       
    }
    public String desconectarBd(){
    String texto;
   
    try{
        conn.close();
        texto="BD desconectada exitosamente";
    }
    catch(Exception e){
        texto="Error al desconectar la BD";
    }
    return texto;
}

   
    public ResultSet consultaBd(String sql){      
        try {
            rs=smt.executeQuery(sql);
           
            mensaje="consulta ejecutada correctamente";          
        }
    catch(Exception e){
        mensaje="Error en la consulta a la tabla de la BD "+e+" sql "+sql;
    }
    return rs;
    }  

    public String actualizaBd(String sql){
        String texto;
        try{
            smt.executeUpdate(sql);
            texto="Actualización correcta";
        }
        catch(Exception e){
            texto="Error al ejecutar la actualización "+e+" sql "+sql;
        }
        return texto;
    }

}


esto realizara la conexión entre la aplicación web y la base de datos.

Para esto debemos tener una Base de Datos

crearemos una pequeña base el siguiente comando copias y pegas todo tal como esta.

create database almacen;
use almacen;
create table Datos(id  int unsigned auto_increment primary key,
Producto char(15),
Precio int,
Cantidad double,
Fecha date,
Total double
);

con esto crearemos una base llamada almacén con una tabla llamada Datos y unos campos llamados
id, Producto, Precio, Cantidad, Fecha Total.

Creamos una clase java la cual ejecutara las sentencias sql

package operacionesAlmacen;
public class operacionesBd 
{
    almacen a;
    String sql;
    Bd bd=new Bd("almacen","root","utsjr");/*almacen es el nombre de mi base de datos root es el administrador y utsjr es la contraseña*/

    public operacionesBd(almacen a) {
        this.a = a;
    }
    public void insertarNuevosProductos()throws Exception
    {
        sql="insert into datos (Producto,Precio,Cantidad,Fecha,Total)"
                + "values ('"+a.getProducto()+"',"+a.getPrecio()+","+a.getCantidad()+",'"+a.getFechaAux()+"',"+a.getTotal()+")";
        
        System.out.println("sql"+sql);
        bd.actualizaBd(sql);       
    }
    
}



Después creamos el .jsp que sera nuestra pagina dinámica y nos ayudara a pasar los datos de .html a .java


<%@page import="operacionesAlmacen.almacen"%>
<%@page import="operacionesAlmacen.operacionesBd"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Almacen</title>
    </head>
    <body>
        <%
        almacen a=new almacen();
        a.setProducto(request.getParameter("producto"));
        a.setPrecio(Integer.parseInt(request.getParameter("precio")));
        a.setFechaAux(request.getParameter("fecha"));
        a.setCantidad(Double.parseDouble(request.getParameter("cantidad")));
        a.Total();
        operacionesBd obd=new operacionesBd(a);
        obd.insertarNuevosProductos();      
        %>
        <table border="1" cellspacing="2" cellpadding="0">
                <thead>
                    <tr>
                        <td>
                            Dato
                        </td>
                        <td>
                            Informaci&oacute;n
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            Nombre del Producto
                        </td>
                        <td>
                            <% out.print(a.getProducto()); %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Precio
                        </td>
                        <td>
                            <% out.print(a.getPrecio()); %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Cantidad
                        </td>
                        <td>
                            <% out.print(a.getCantidad()); %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Fecha
                        </td>
                        <td>
                            <% out.print(a.getFecha());
                            %>
                        </td>
                    </tr>
                </tbody>
            </table>
    </body>
</html>


aquí importamos todas las clases de java  ahora podemos ejecutar el programa y analizar como funciona dudas o aclaraciones gto.aje.2@hotmail.com 





sábado, 25 de mayo de 2013

Botones circulares HTML5


Despues de tu creacion de botones de el articulo anterior solo agrega esto 

-o-border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
-ms-border-radius: 200px;
border-radius: 200px;/*Este es el comando que hace el cambio puedes omitir los demás */

Suma vectores java

Suma en java con lógica humana


package sumarvectores;
import java.util.Scanner; 
public class SumarVectores {  
    public static void main(String[] args) 
    {
     Scanner leer = new Scanner(System.in);
     int v1,v2,v3,lim1,lim2;
     String num1="",num2="";
     System.out.print("Ingrese el primer numero: ");
     num1= leer.nextLine();
     char [] caracteres1=num1.toCharArray();
     int[] vec1 = new int[num1.length()];

    for (int i = 0; i < num1.length(); i++){
        vec1[i] = caracteres1[i]-48;
    }
     System.out.print("\nIngrese el segundo numero:");
     num2= leer.nextLine();
     char[] caracteres2 = new char[num2.length()];
     caracteres2 = num2.toCharArray();
     int[] vec2 = new int[num2.length()];

    for (int i = 0; i < num2.length(); i++){
        vec2[i] = caracteres2[i]-48;
    }    
     
     v1=num1.length();
     v2=num2.length();     
     if (v2>v1)
     {
         v3=v2;
         lim1=v3-v1;
         lim2=v3-v2;
     }
     else
     {
         v3=v1;
         lim1=v3-v1;
         lim2=v3-v2;
     }
     int val3=0,aux=0;
     int[] vec3 = new int[v3];
     for(int i=(v3-1); i>=0; i--)
     {
         int valv1 = 0;
         if (i>=lim1)
         {
             valv1 = vec1[i-lim1];
         }
         int valv2 = 0;
         if (i>=lim2)
         {
             valv2 = vec2[i-lim2];
         }
         val3=valv1+valv2+aux;
         aux=0;
            if(val3>9)
            {
                if(i==0)
                {
                   vec3[i]=val3; 
                }
                else
                {
                    aux=1;
                    vec3[i]=val3-10;                    
                }                
            }
            else
            {
                vec3[i]=val3;
            }
                               
      } 
     for(int i=0;i<v3;i++)
     {
         System.out.println("\nResultado "+vec3[i]);
     }
    }
}


Cualquier duda escriban a mi correo el.chuuiy@gmail.com  o bien en el salón pueden preguntarme jaja.

Formulario en HTML5

Formulario en HTML5 bien Alineado 


Quieres que tu formulario quede así como la siguiente imagen.




Creamos un proyecto y dentro de el las siguientes carpetas y archivos tal como lo muestra la siguiente imagen

En el Index 



<!DOCTYPE html>
<!-- 
docs.jquery.com/Plugins/Validation
jQuery plugin Validation  (para bajar plugis para hacer carruceles de imagenes)

-->
<html>
    <head>
        <title>Web con Formulario</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery-1.9.1.js"></script>         <!-- validar los dts usuario-->
        <script type="text/javascript" src="js/jquery_validate.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
        <script type="text/javascript" src="js/validar.js"></script>
        <script type="text/javascript" src="js/fecha.js"></script>
        <link rel="stylesheet" type="text/css" href="css/estilo.css">
        <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.9.2.custom.css">
    </head>
    <body>
        <form id="datosUsuario" name="datosUsuario" action="datos.jsp" method="POST">    
            <label >Nombre de Usuario: </label>
            <input type="text" id="usuario" name="usuario" value="" /><br />
             <label>Password:  </label>
            <input type="password" id="pass" name="pass" /><br />
            <label>Confirma tu Password:  </label>
            <input type="password" id="pass2" name="pass2" /><br />
             <label>Edad:  </label>
            <input type="text" id="edad" name="edad" /><br />
             <label>Correo:  </label>
            <input type="text" id="correo" name="correo" /><br/>
            <label>Telefono: </label>
            <input type="text" id="telefono" name="telefono" /><br/>
            <label>Numero de integrantes: </label>
            <select id="integrantes" name="integrantes">
                <option value="">Elige una opcion</option>
                <option values="1">1</option>
                <option values="2">2</option>
                <option values="3">3</option>
                <option values="4">4</option>
                <option values="5">5</option>
            </select><br/>
            <label>Fecha de nacimiento</label>
            <input type="text" id="fecha" name="fecha"/><br/>            
             <label>Sexo: </label>
            <select id="sexo" name="sexo">
                <option value="">Elige una opcion</option>
                <option value="m">Mujer</option>
                <option value="h">Hombre</option>
            </select><br />
             <fieldset>
                 <legend>Selecciona tu(s) pasatiempo(s)</legend>
               <label id="nadarL">Programar</label><input type="checkbox" id="nadar" name="nadar" value="ON" /><br />
               <label id="leerL">Leer</label><input type="checkbox" id="leer" name="leer" value="ON" /><br />
               <label id="bailarL">Bailar</label><input type="checkbox" id="bailar" name="bailar" value="ON" />
             </fieldset><br />
             <input id="aceptar" type="submit" name="aceptar" value="Aceptar"/>
        </form>  
    </body>
</html>

 *En la fecha pueden declarar un input tipo date y da un calendario con buen diseño por default si ustedes quieren diseñar el calendario declaren su calendario tipo texto *


En fecha


$(function ()
{
   $("#fecha").datepicker({
       changeMonth:true,
       changeYear:true
   }); 
});


En validar

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
$(function(){
   $('#datosUsuario').validate({
       rules:{
           'usuario':{
               required:true,
               minlength:3
               
           },
           'pass':{
               required:true,
               rangelength:[5,30]
           },
           'pass2':{
               required:true,
               equalTo:'#pass'
           },
           'edad':{
               required:true,
               range:[18,90]
           },
           'correo':{
               required:true,
               email:true
           },
           'telefono':{
               required:true,
               rangelength:[10]
           },
           'integrantes':{
               required:true
           },
           'fecha':{
               required:true
           },           
           'sexo':{
               required:true
           }
       },
       messages:{
           'usuario':{
               required:'Campo Obligatorio',
               minlength:'Requiere por lo menos 3 caracteres'
           },
           'pass':{
               required:'Campo Obligatorio',
               rangelength:"Debe contener entre 5 y 30 caracteres"
           },
           'pass2':{
               required:'Campo Obligatorio',
               equalTo:'Debe coincidir con su contraseña anterior'
           },
           'edad':{
               required:'Campo Obligatorio',
               range:"Solo entre 18 y 90 años"
           },
           'correo':{
               required:'Campo Obligatorio',
               email:"Introduce una direccion valida"
           },
           'telefono':{
               required:'Campo Obligatorio',
               rangelength:"Numero con 10 digitos"
           },
           'integrantes':{
               required:'Campo Obligatorio'
           },
           'fecha':{
               required:'Campo Obligatorio'
           },
           'sexo':{
               required:'Campo Obligatorio'
           }
       }
   }); 
});


En estilo


*
{
    margin:0px;
    padding:0px;
    list-style: none;
}
body
{
    background-color: #0099ff;
    margin-bottom: 10%;
    margin-top: 10%;
}

form
{
    clear: both;
    width: 80%;
    height: 900px;
    margin: auto;
    left: 10%;
    border: solid #333333;
    background-color: #33ccff;
    padding-top: 70px;
}
form label
{   
    clear: both;
    float: left;
    text-align: right;    
    padding: 10px;
    margin-left: 35%;    
    width: 150px;
}

form input
{
    clear: both;    
    margin-top: 10px;
    margin-bottom: 10px;
}
select
{
    clear: both;
    margin-top: 10px;
    margin-bottom: 10px;
}
label.error
{
    clear: both;
    position: absolute;
    color: #cd0a0a;
    right: 21%;
    width: 300px;
    text-align: left;
}
fieldset
{
    clear: both;
    width: 60%;
    margin-left: 20%;
    height: 130px;
}
legend
{
    text-align: center;
}
#bailar
{
    clear: both;
    position: absolute;
    right: 66%;
    top: 85%;
}
#bailarL
{
    clear: both;
    position: absolute;
    right: 67%;
    top: 85%;
    width: 80px;
    height: 5px;    
    text-align: right;
    line-height: 12px;
}
#leer
{
    clear: both;
    position: absolute;
    right: 66%;
    top: 81%;    
}
#leerL
{
    clear: both;
    position: absolute;
    right: 67%;
    top: 81%;
    width: 80px;
    height: 5px;    
    text-align: right;
    line-height: 12px;    
}
#nadar
{
    clear: both;
    position: absolute;
    right: 66%;
    top: 77%;     
}
#nadarL
{
    clear: both;
    position: absolute;
    right: 67%;
    top: 77%;
    width: 80px;
    height: 5px;    
    text-align: right;
    line-height: 12px;    
}
#aceptar
{
    clear: both;
    position: absolute;
    width: 80px;
    text-align: center;
    left: 48%;
}














lunes, 20 de mayo de 2013

Botones en HTML5

Ahora que sabemos los elementos principales de una pagina web comenzaremos a crear botones. primeramente definimos nuestra lista


<nav id=Menu>  
    <ul id="listaMenu">
        <li>
            <a href="URL_enlace1">Enlace 1</a> 
        </li>
        <li>
            <a href="URL_enlace2">Enlace 2</a>
        </li>
        <li> 
            <a href="URL_enlace3">Enlace 3</a> 
        </li>
    </ul>

</nav>

Ya que tenemos nuestro menú nos dirigimos al diseño a nuestro archivo css


#Menu o #listaMenu
{
     /* Aquí definimos sus dimensiones y su posición puede ser desde el nav o desde el ul*/
}

#lisaMenu li
{
    display: inline;/*Con esto definimos que el orden de nuestro menú sera horizontal y no vertical */
}

#listaMenu li a
{

#listaMenu li a
{
    display: block;/*Con esto comenzamos a definir el botón aun que aun no lo vemos*/
    float: left;/*Nos indica si queremos ordenarlos de izquierda a derecha o al contrario(right)*/
    text-decoration: none;/*Ahora desaparecemos el subrayado */
    margin-right: 10px;/*Indica el margen de espacio entre botón y botón margin-right se refiere solo al margen derecho*/
    text-align: center;/*Nos alinea el  texto al centro del boton*/
    height: 50px;/*Con esto definimos la altura del boton */
    line-height: 50px;/*No basta con alinear el texto al centro tenemos que colocarlo justo en medio del botón. Este comando realiza justo esa operación*/
    width: 15%;/*Se puede también definir por pixeles (px) es el ancho del botón*/
/*Y si no quieres definir alto y ancho padding: Altopx Anchopx; */
    background: #bbe210;/*El color del fondo del botón*/
    border-top: 2px solid #2315a3;/*Es el color del margen de arriba si no colocamos solid no lo veremos*/
    border-right: 2px solid #2315a3;/*Color del margen derecho*/
    border-bottom: 2px solid #2315a3;/*Color del margen inferior*/
    border-left: 2px solid #2315a3;/*Color del margen izquierdo*/
    color: #ffffff;/*Color del texto del boton*/
    font-size: 130%;/*Tamaño de la letra*/
    font-family: sans-serif;/*Estilo de letra*/
    font-weight: bold;
    font-style: oblique;
}

Aumenta el Tamaño de tus letras HTML5

En el archivo css que es nuestra hoja de estilo
#id
{
    font-size: 300%;/*Este comando aumentara del tamaño original de tus letras hasta el que tu desees*/
    font-family: sans-serif;/*Indica el tipo de letra*/
    font-weight: bold;/*Hacemos texto en negrita*/
    font-style: oblique;/*Definimos el estilo oblicuo o cursiva*/
}

HTML5 Alinea el texto en medio del campo


    Esto se define en la hoja de estilo css
#id
{
    height: 50px;/*Con esto definimos la altura del campo */
    line-height: 50px;/*Del mismo tamaño de la altura definimos line-height y el texto se colocara justo en medio del campo*/
    text-align: center;/*Este comando centrara el texto*/
}

martes, 14 de mayo de 2013

Elementos básicos de tu pagina web

Ahora continuaremos con nuestra pagina web.

De entrada al crear un proyecto Web Application tenemos
<html>
        <head>
                <title>Mi Pagina Web HTML5</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                /*Esta linea es para hacer relación con nuestro estilo con terminación .css */
                <link rel="stylesheet" type="text/css" href="css/estilo2.css">
                /*href  se refiere a la carpeta que creaste dentro de tu proyecto y el nombre del archivo observa    
                el articulo HTML desde NeatBeans*/
        </head>
        /*head indica la cabecera aquí colocamos el nombre y descripción de nuestra pestaña*/
        <body>
                /* Aquí es donde comenzaremos a trabajar. En este lugar se aloja todo el contenido de nuestra    
                pagina web*/
        </body>    
</html>

Comenzaremos a trabajar dentro del <body> y a programar nuestro archivo .css
para poder realizar esto debemos crear un id a todos nuestros elementos

<body id="bodyWeb">
        <header id="headerWeb">
                /*Una opcion para centrar el titulo es <h1 align="center">Titulo</h1>*/
                <h1>Mi pagina web html</h1>
        </header>
        <nav id="navWeb">
                /*nav es un menú de selección*/
                <ul>
                        <li>
                                <a href="index.html"> Inicio </a>
                                /*a href="index.html" Se refiere a un link */
                        </li>
                        <li>
                                <a href="index.html"> Contacto </a>
                        </li>
                        <li>
                                <a href="index.html"> Informacion </a>
                        </li>
                </ul>
        </nav>
        <div>
                /*div Es un contenedor de textos aquí podemos colocar todo el contenido de nuestra pagina*/
                <aside id="asideWeb">
                        Es una barra lateral donde colocamos algunos temas relacionados
                </aside>
                <section id="sectionWeb">
                        /*En section colocamos todo el contenido principal de nuestra pagina*/
                        <article>
                                <header>
                                        <h3>Titulo de mi articulo o publicacion</h3>
                                </header>
                                <img src="imagenes/Imagen2.jpg" width="500px" height="350">
                               /*src indica la carpeta que contiene la imagen y su nombre de la imagen con su
                               extensión*/
                               <p>
                                       <h4>Parrafo</h4>
                               </p>
                               <footer>
                                       <h5>Puede ser pie de pagina</h5>
                               </footer>
                       </article>
                </section>
                <footer id="footerWeb">
                        <h5>Derechos de autor y términos de la pagina</h5>
                        /*h5 Indica el tamaño de la letra*/
                </footer>
        </div>      
</body>

Si ejecutáramos en este momento nuestro proyecto seria un desorden total para eso tenemos que programas todos los id en nuestro archivo con terminación  .css. Estos son algunos comandos para dar formato a nuestra pagina



/*Resetear el navegador*/
*
{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
/*Etiquetas*/
body
{  
    background-color: #333333;
}
#headerWeb
{
    width: 80%; /*Espacio ocupado en la pagina web*/
    background-color: #821835; /*Color del fondo*/
    max-width: 1100px; /* Máximo de espacio que ocupara en la pagina*/
    margin: 5px auto;/*Espacio entre un componente y el siguiente*/
    height: 60px;/*Altura*/
    text-align: center;/* Alineación del texto al centro*/
}
#headerWeb h1
{
    color: #82b6cd;
}
#navWeb
{
    width: 80%;
    background-color: #003155;
    max-width: 1100px;
    margin: 2px auto;
}
#navWeb ul
{
    padding: 10px;/*Otra forma de dimensionar un elemento*/
}
#navWeb ul li
{
    display: inline;    /*Tipo de alineación de las lineas dentro del ul*/
}
#navWeb ul li a
{
    text-decoration: none;/*Hipervínculos sin subrayado*/
    color: #ffffff;
    font-size: 17px;/*Tamaño de letra*/
    font-weight: bold;/*Formato de letra en negrita*/
}
#navWeb ul li a:visited
{
    text-decoration: none;
    color: #119cff;
}
#navWeb ul li a:hover
{
    font-size: 15px;
    background-color: #0091b3;
}
#asideWeb
{
    background-color: #486a9a;
    float: right;
    width: 19.7%; /*Ancho*/
    margin-right: .3%;/*Margen derecho*/
    color: #b30a06;
    max-height: 1100px;/*Altura máxima*/
    height: 100px;/*Altura inicial*/
   
}
#divWeb
{
    color: #003155;
    width: 80%;
    max-width: 1100px;
    margin: 5px auto;
    background-color: #006287;
}
#sectionWeb
{
    background-color: #a0afc8;
    width: 80%;
}
.reiniciar
{
    clear: both;
}
#footerWeb
{  
    background-color: #003155;
    font-family: sans-serif;/*Tipo de letra*/
    clear: both;
    font-size: 12px;
    color: #ffffff;
    width: 100%;
    max-width: 1100px;
    height: 50px;
}




Así quedaría nuestra pagina 

Esto es solo el comienzo aprenderemos mas en las próximas publicaciones dudas o aclaraciones gto.aje.2@hotmail.com






viernes, 10 de mayo de 2013

HTML desde NetBeans

Buenos días el día de hoy aprenderemos a crear un proyecto para poder comenzar a programar en HTML5


Abrimos NetBeans y damos click en nuevo proyecto

Seleccionamos Java Web y Web Application y damos continuar

Siguiente

Siguiente

y Siguiente

Ahora se crean 2 carpetas en automático pero necesitamos una mas
Nos dirigimos a la ubicación del archivo por lo general NetBeansProjects/NombredelProyecto/web y creamos una carpeta llamada css 


Ahora después de haber creado la carpeta regresamos y sobre ella ...



click auxiliar web y Style Sheet y click en continuar

Asignamos un nombre

Aparecerá esta ventana con este código. No importa borre todo


Ahora escribimos el siguiente código para hacer relación a nuestro estilo de hoja

<h1> indica el tamaño de la letra
</h1> indica el cierre de h1
<ul> nos dice que comenzaremos una serie de lineas
<li> es la linea


Abrimos la pestaña de estilo y editamos nuestro estilo
digitamos ul{} y en automático se activan los campos debajo
del campo del código.

No tenemos que escribir ningún comando solo elegir nuestro estilo
y listo. La opción de Background es el estilo des fondo.



Después de ejecutarlo queda así.

                                             Es todo por esta ocasión  cualquier pregunta acerca de cualquier tema solo debes publicarla y resolvemos tu duda.