Video de Validación en el prototipo

A continuación el link para ver el video de las validaciones que le asignamos a nuestro prototipo.

https://www.youtube.com/watch?v=0NpexikbxsE

Semana del 20 - 24 de Octubre

Durante esta semana realizamos las exposiciones de la unidad 4. Al equipo Puma nos asignaron el tema 4.3 Manipulación de objetos (Validación de formularios). A continuación les dejaremos unas fotos de nuestra exposición, al igual que los ejemplos que utilizamos para explicar nuestro tema.

Validación de campo de texto obligatorio

<!DOCTYPE html>

<html lang = "ES">

<head>

    <meta charset="UTF-8">

    <meta name = "author" content = "Mary Karen Garcia Salas">

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/bootstrap-theme.min.css" rel="stylesheet">

    <link href="theme.css" rel="stylesheet">

    <script language="javascript" type="text/javascript">

        //busca caracteres que no sean espacio en blanco en una cadena

        function vacio(q) {

                for ( i = 0; i < q.length; i++ ) {

                        if ( q.charAt(i) != " " ) {

                                return true

                        }

                }

                return false

        }

        //valida que el campo no este vacio y no tenga solo espacios en blanco

        function valida(F) {

                

                if( vacio(F.campo.value) == false ) {

                        alert("Introduzca un cadena de texto.")

                        return false

                } else {

                        alert("OK")

                        //cambiar la linea siguiente por return true para que ejecute la accion del formulario

                        return false

                }

                

        }

    </script>

</head>

<body>

    <div class="container">

        <div class="col-md-12">

            <div class="page-header">

                <h1 class="text-center"><strong>Validación texto obligatorio</strong></h1>

            </div>

        </div>

        <form class="form-horizontal" name="formulario" method="get" action="" onsubmit="return valida(this);">

            <div class="form-group">

                <label class="col-lg-2 control-label">Introduzca cadena de texto:</label>

                <div  class="col-lg-3">

                  <input type="text" class="form-control" id="campo" placeholder="Introduzca texto">

                </div>

            </div>

            <div class="form-group">

                <div class="col-lg-offset-2 col-lg-8">

                  <button type="submit" name="validar" value="validar" class="btn btn-primary">Validar</button>

                </div>

            </div>

        </form>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

</body>

</html>

Validación de correo electrónico

<!DOCTYPE html>

<html lang = "ES">

<head>

    <meta charset="UTF-8">

    <meta name = "author" content = "Mary Karen Garcia Salas">

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/bootstrap-theme.min.css" rel="stylesheet">

    <link href="theme.css" rel="stylesheet">

    <script language="javascript" type="text/javascript">

       function mostrar_informacion(txt){

    

    //expresion regular

        var b=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/

        

        //comentar la siguiente linea si no se desea que aparezca el alert()

        alert("Email " + (b.test(txt)?"":"no ") + "válido.")

        

        //devuelve verdadero si validacion OK, y falso en caso contrario

        return b.test(txt)

        }

       /* function validacion() {

        valor = document.getElementById("campo").value;

        if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor)) ) {

          return false;

        }

        }*/

    </script>

</head>

<body>

    <div class="container">

        <div class="col-md-12">

            <div class="page-header">

                <h1 class="text-center"><strong>Validación de correo electrónico</strong></h1>

            </div>

        </div>

        <form class="form-horizontal" name="formulario" method="get" action="" onsubmit="return mostrar_informacion(this.email.value)">

            <div class="form-group">

                <label class="col-lg-2 control-label">Introduzca correo electronico:</label>

                <div  class="col-lg-3">

                  <input type="text" class="form-control" id="email" placeholder="correo@ejemplo.com">

                </div>

            </div>

            <div class="form-group">

                <div class="col-lg-offset-2 col-lg-8">

                  <button type="submit" name="enviar" value="validar" class="btn btn-primary">Validar</button>

                </div>

            </div>

        </form>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

</body>

</html>

Validación del select

<!DOCTYPE html>

<html lang = "ES">

<head>

    <meta charset="UTF-8">

    <meta name = "author" content = "Mary Karen Garcia Salas">

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/bootstrap-theme.min.css" rel="stylesheet">

    <link href="theme.css" rel="stylesheet">

    <script language="javascript" type="text/javascript">

        function valida_envia(){ 

            //valido el interés 

            if (document.fvalida.interes.selectedIndex==0){ 

                alert("Debe seleccionar un interés.") 

                document.fvalida.interes.focus() 

                return 0; 

            } 

            //el formulario se envia 

            alert("Muchas gracias por enviar el formulario"); 

            document.fvalida.submit(); 

        }                                                                                       

    </script>

</head>

<body>

    <div class="container">

        <div class="col-md-12">

            <div class="page-header">

                <h1 class="text-center"><strong>Validación del select</strong></h1>

            </div>

        </div>

        <form class="form-horizontal" name="fvalida" method="get" action="" >

            <div class="form-group">

                    <label class="col-lg-2 control-label" for="selectbasic">Interés</label>

                        <div  class="col-lg-2">

                            <select id="interes" name="interes" class="form-control">

                                <option value="Elegir">Elegir 

                                <option value="Comercial">Deportes 

                                <option value="Clientes">Música 

                                <option value="Proveedores">Manualidades

                            </select>

                        </div>

            </div>

            <div class="form-group">

                <div class="col-lg-offset-2 col-lg-8">

                  <button type="submit" name="enviar" value="Enviar" class="btn btn-primary" onclick="valida_envia()">Enviar</button>

                </div>

            </div>            

        </form>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

</body>

</html>

Validación del número telefónico

<!DOCTYPE html>

<html lang = "ES">

<head>

    <meta charset="UTF-8">

    <meta name = "author" content = "Mary Karen Garcia Salas">

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/bootstrap-theme.min.css" rel="stylesheet">

    <link href="theme.css" rel="stylesheet">

    <script language="javascript" type="text/javascript">

        function validacion3(formulario) {

        var er_tel = /^\d{3}-\d{3}-\d{4}$/               ///^\d{10}$/             ej.9999999999 

                                                         ///^\d{3}-\d{3}-\d{4}$/  ej.900-900-9000  

                                                         ///^\(\d{3}\)\s\d{7}$/  ej.(900) 9009000  

        //comprueba campo telefono

        if(!er_tel.test(formulario.tel.value)) { 

            alert('Introduzca un telefono valido')

            return false

        }  

        alert('El telefono es correcto.')

        return false            //cambiar por return true para ejecutar la accion del formulario

    }

                                                        

    </script>

</head>

<body>

    <div class="container">

        <div class="col-md-12">

            <div class="page-header">

                <h1 class="text-center"><strong>Validación de numero telefonico</strong></h1>

            </div>

        </div>

        <form class="form-horizontal" name="FormValidacion3" method="get" action="" onsubmit="return validacion3(this)" >

            <div class="form-group">

                <label class="col-lg-2 control-label">Introduzca número telefónico:</label>

                <div  class="col-lg-3">

                  <input type="text" class="form-control" id="tel" name="tel" placeholder="900-900-9000 ">

                </div>

            </div>

            <div class="form-group">

                <div class="col-lg-offset-2 col-lg-8">

                  <button type="submit" name="boton_envio" value="validar" class="btn btn-primary" >Validar</button>

                </div>

            </div>

        </form>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

</body>

</html>

Validar longitud

<!DOCTYPE html>

<html lang = "ES">

<head>

    <meta charset="UTF-8">

    <meta name = "author" content = "Mary Karen Garcia Salas">

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/bootstrap-theme.min.css" rel="stylesheet">

    <link href="theme.css" rel="stylesheet">

    <script language="javascript" type="text/javascript">

        function validacion3(formulario) {

        var er_control = /^\d{8}$/              ///No. de control 8 digitos 

                                                          

        //comprueba campo telefono

        if(!er_control.test(formulario.control.value)) { 

            alert('Introduzca un número de control valido')

            return false

        }  

        alert('El número de control es correcto.')

        return false            //cambiar por return true para ejecutar la accion del formulario

    }

                                                        

    </script>

</head>

<body>

    <div class="container">

        <div class="col-md-12">

            <div class="page-header">

                <h1 class="text-center"><strong>Validación de numero de control</strong></h1>

            </div>

        </div>

        <form class="form-horizontal" name="FormValidacion3" method="get" action="" onsubmit="return validacion3(this)" >

            <div class="form-group">

                <label class="col-lg-2 control-label">Introduzca número de control:</label>

                <div  class="col-lg-3">

                  <input type="text" class="form-control" id="control" name="control" placeholder="No de control">

                </div>

            </div>

            <div class="form-group">

                <div class="col-lg-offset-2 col-lg-8">

                  <button type="submit" name="boton_envio" value="validar" class="btn btn-primary" >Validar</button>

                </div>

            </div>

        </form>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

</body>

</html>

Avances del diseño del prototipo

A continuación les dejo el link del video de como cambió nuestro proyecto con las modificaciones que le hicimos con la herramienta de bootstrap.

https://www.youtube.com/watch?v=1OaWBYgJERU

Semana del 13 - 17 de Octubre

Durante esta semana realizamos las exposiciones de la unidad 3. Al equipo Puma nos tocó realizar la exposición del tema 3.5. Modelo de caja. En este tema explicamos en clase con un ejemplo y código de lo que se trata el modelo de caja en la programación web, lo cual nos ayudará a entender mejor su función.

En estas imagenes nuestro compañero Jose Guadalupe nos muestra con la herramienta Dreamweaver como se muestran las cajas con cada etiqueta que se utiliza.

 Nuestro compañero Javier nos muestra una imagen en donde nos explica las partes que utilizan CSS en el moodelo de caja.

Una servidora les muestra en las imágenes como se modifica el CSS para que nuestra  página se muestre de la siguiente manera. 

Video de la implementación de Bootstrap a nuestro prototipo

A continuación un video con los avances de nuestro prototipo. Ya utilizando la herramienta Bootstrap.

https://www.youtube.com/watch?v=0p4NRMC2r-4

Semana del 6 - 10 del Octubre

Durante esta semana realizamos ciertas modificaciones a nuestro prototipo por peticiones del maestro, al igual que avanzamos incluyendo la herramienta Bootstrap para darle un mejor diseño a nuestro proyecto. 

Tambien comenzaron las exposiciones de la unidad 3 aunque nuestro equipo tendrá que exponer el lunes de la siguiente semana. Al igual que tendremos más avances en cuanto al diseño de nuestro prototipo.

Video del Prototipo

A continuación les dejo el link del video de como diseñamos nuestra página con solo utilizar lenguaje HTML puro. Al igual lo copiamos a una carpeta dentro del XAMPP para poder abrirlos desde el navegador.

https://www.youtube.com/watch?v=C_-88CztGV4

Semana del 29 de Septiembre al 3 de Octubre

Esta semana realizamos los primeros diseños de nuestros prototipos, ya conforme fuimos agregando mas cosas el profesor nos fue haciendo algunas observaciones para que mejorara nuestro diseño. Aquí les muestro algunas capturas de pantalla.