Contador de visitas

Redes Sociales

martes, 30 de mayo de 2017

Mayo 24 del 2017

  12:04    

CONTINUACIÓN DEL PROYECTO DE AULA.

4. Basado en el código HTML anterior, se le aplica un Template tipo Html / Responsive desing.

DIGITADOR: cod.30 Camila Rosado
BASES:            -Javier Luna
                  -Valeria Rojas
                  -Dolly Pinzón
                  -Nicol Cruz

5. Entregado el paso anterior se realiza dos copias, la primera se validará con Html5.

DIGITADOR: cod.11 Paula Gonzalez
BASES:            -Julian Goméz
                  -Daniel Almeida
                  -Juan Rincón
                  -Daniel Peréz

6. Y la segunda se validará con Javascript.

DIGITADOR: cod.5  Mónica Blanco
BASES:            -Angela Barajas
                  -Juana Gelvez
                  -Camila Martínez
                  -Sebastian Sierra

7. Utilizando el mismo diseño del template se crea un segundo archivo(formulario.html), donde se debe visualizar cajas de texto, cajas de selección de los campos (nombre, e-mail, teléfono fijo, Teléfono celular, observación de la atención), lo anterior es para crear un PQRSF (Peticiones, Quejas, Reclamos, Sugerencias y Felicitaciones).Todo este item (el 7 ), debe ir validado.

DIGITADOR: cod.13 Juan Jimenez
BASES:            -Sara Mejía 
                  -Salma Osorio
                  -Silvia Lara
                  -Juan Soler

8. Basado en todo lo anterior, se debe programar el ejercicio propuesto por el Docente, utilizando todo lo desarrollado desde el punto 1 hasta el 7. Todo debe ser programado en JavaScript.

DIGITADOR: cod.34 Marian Suarez
BASES:            -Laura Ríos
                  -Andrés Martinez
                  -Danna Hernandez
                  -Valentina Vargas.

  No Comments

sábado, 20 de mayo de 2017

Mayo 17 del 2017

  14:22    

Se inicia la realización del proyecto .

Se dicta el ejercicio para que todos lo tenga presente y se inicia la realización de la fase 1.

Llegamos hasta la fase 3.

1: Crear el algoritmo de la aplicación, según enunciado del ejercicio propuesto por el Docente.

DIGITADOR: cod.37 Nicolas Vasquez
BASES:            - Nicol Gomez
                  - Jary Suárez 
                  - Juan Amado

2. Basado en el algoritmo anterior, se crea el pseudocódigo.

DIGITADOR: cod.26 María Pinzón
BASES:             -Nicol Salazar
                   -Andrés Cardozo
                   -Diana Ortíz
                                 
3. Construcción del código HTML, necesario para empezar a crear la aplicación, según el enunciado del item 1.

DIGITADOR: cod.15 Juan Londoño.
BASES:             -Yerly Almarales
                   -Natalia Palacio
                   -Elkin Morales
<form>
<p>

<center>
Observacion de la atencion:
    
<select name="semana" id="semana">
  
  <option value="">Seleccione una opci&oacute;n</option>

    <option value="Peticiones">Peticiones</option>
 
   <option value="Quejas">Quejas</option>
 
   <option value="Reclamos">Reclamos</option>
  
  <option value="Sugerencias">Sugerencias</option>
    
  <option value="Felicitaciones">Felicitaciones</option>
    
  </select>
   
  </p>

    
 <br><br>


 <div>
 <label for="nombre">Nombre</label>
 <input type="text" name="nombre" id="nombre" pattern="[a-zA-ZáéíóúÁÉÍÓÚñÑ ]{2,48}" required/>
  <i class="fa fa-check check-ok"></i>
 </div>
 <div>

 <div>
 <label for="correo">Email</label>
 <input type="email" name="correo" id="correo" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" required/>
  <i class="fa fa-check check-ok"></i>
 </div>
<div>
Movil<input type="tel" name="telefono" pattern="[0-9]{10}"required/>
</div>


<div>
Teléfono <input type="tel" name="telefono" pattern="[0-9]{7}"required/>
</div>
<br>
<textarea name="coment" onkeypress="return limitar(this)"  required></textarea>

<br>
<div>
<input type="submit" value="Enviar">
</div>

  

  No Comments

miércoles, 17 de mayo de 2017

Mayo 16 del 2017

  3:55    

ALGUNOS DE LOS NUEVOS TIPOS DE CAMPOS INTRODUCIDOS CON HTML5

No es ninguna novedad enumerar los nuevos tipos de campos introducidos por HTML5, pero siempre hay algún despistado. Es una forma bastante sencilla de incluir una validación básica simplemente delimitando el tipo de datos a incluir. Relaciono los más conocidos, pero ojo: hay algunos navegadores modernos que aún no los reconocen.
HTML5 Forms Input Type Support Wufoo

VALIDACIÓN DE FORMULARIOS.

La etiqueta <input> y que explicaremos brevemente sólo como introducción. Mucho más interesante es el atributo pattern que estudiaremos.

El atributo pattern permite en cualquier campo <input> de tipo texto y utilizando las sobradamente conocidas expresiones regulares delimitar exactamente la sintaxis de una cadena válida.

TIPOS DE TYPE:

  • type=”number” Podemos enviar enteros, estableciendo un mínimo y un máximo como input de texto.
  • type=”range” Podemos enviar enteros, estableciendo un mínimo y un máximo utilizando un control gráfico.
  • type=”color” Nos permite seleccionar desde un “color picker” un color y enviarlo como hexadecimal.
  • type=”date” Nos permite seleccionar una día concreto. En los navegadores más avanzados aparece un calendario.
  • type=”month”, type=”week”, type=”time” Nos permiten seleccionar distintas unidades de tiempo: mes, semana o año.
  • type=”email” Permite enviar una dirección de email con una pobre validación a nivel de cadena.
  • type=”url” Permite enviar una url con una pobre validación a nivel de cadena.
  • type=”tel” Para el envío de números de teléfono.
  • type=”search” Para definir campos de búsqueda, aunque realmente se comporta como un campo de tipo texto.
tomado de:https://oscargascon.es/validacion-de-formularios-con-html5-y-expresiones-regulares-sin-uso-de-js-utilizacion-de-css-y-fontawesome-para-mostrar-campos-validos-en-formularios/

EJERCICIO.
<!-- Font Awesome in header -->
 <link rel="stylesheet" type="text/css" href="style8.css" />

<!-- Form -->
<form>
<div>
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,48}" required/>
  <i class="fa fa-check check-ok"></i>
</div>
<div>
<label for="apellidos">Apellidos</label>
<input type="text" name="apellidos" id="apellidos" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,64}" required/>
  <i class="fa fa-check check-ok"></i>
</div>
<div>
<label for="correo">Email</label>
<input type="email" name="correo" id="correo" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" required/>
  <i class="fa fa-check check-ok"></i>
</div>
<div>
<label for="usuario">Usuario</label>
<input type="text" name="usuario" id="usuario" pattern="^([a-z]+[0-9]{0,2}){5,12}$" required/>
  <i class="fa fa-check check-ok"></i>
</div>
<div>
<label for="pass">Contraseña</label>
<input type="password" name="pass" id="pass" pattern="[A-Za-z0-9!?-]{8,12}" required/>
  <i class="fa fa-check check-ok"></i>
</div>
  <div>
<button type="submit">Enviar</button>
  </div>
</form>

CSS:
/* Basic Styles */

form {
width: 25em;
}

div {
margin: .25em;
}

label {
display: inline-block;
width: 6em;
}

input {
width: 12em;
}

button {
  display: block;
  margin: 0 auto;
}

/* Validation Styles */

input:valid {
  background-color: #BBFFF0;
}

.check-ok {
  color: lime;
}

input:invalid ~ .check-ok {
  display: none;
}

input:valid ~ .check-ok {
  display: inline;
}

  • VALIDACIONES CON EXPRESIONES REGULARES
    • Según wikipedia: Una expresión regular, a menudo llamada también regex, es una secuencia de caracteres que forma un patrón de búsqueda, principalmente utilizada para la búsqueda de patrones de cadenas de caracteres u operaciones de sustituciones.

    Nombre: Admitiremos nombres de cualquier nacionalidad, incluyendo nombres compuestos y la mayoría de normas de acentuación. El número de caracteres será como mínimo 3 y como máximo 32. La verdad es que es una expresión regular ciertamente compleja, pero debemos de tener en cuenta la mayoría de las posibilidades. Esto nos dejaría un código similar a esto:



    <div>
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,48}" required/>
    </div>
    

    Apellidos: Del mismo modo aceptaremos cualquier carácter independientemente de la nacionalidad, con una tamaño entre 2 y 64 caracteres.
    

    <div>
<label for="apellidos">Apellidos</label>
<input type="text" name="apellidos" id="apellidos" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,64}" required/>
</div>
    


    

    


    Email: HTML5 ya provee de un tipo de campo email, aunque su validación es bastante pobre. Podríamos complementarla con una expresión más compleja.
    

    

    
<div>
    




    

    
<label for="correo">Correo electrónico</label>
    



    

    
<input type="email" name="correo" id="correo" pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required/>
    


    
</div>
    

    

    

    
Usuario: Vamos a solicitar para el usuario de acceso al servicio una cadena de letras minúsculas, con un número opcionalmente de hasta dos dígitos al final. La cadena completa tendrá entre 5 y 12 caracteres.
    

    





    

    <div>
<label for="usuario">Usuario</label>
<input type="text" name="usuario" id="usuario" pattern="^([a-z]+[0-9]{0,2}){5,12}$" required/>
</div>
    

    
Password: Por último vamos a solicitar una cadena como contraseña, la cual podrá contener letras mayúsculas, minúsculas, números y los caracteres !?-. Su tamaño: entre 8 y 12 caracteres.
    

    
<div>
<label for="pass">Contraseña</label>
<input type="password" name="pass" id="pass" pattern="[A-Za-z0-9!?-]{8,12}" required/>
</div>
    

    

    

    

    
PSEUDOCLASES EN CSS PARA LA VALIDACIÓN
    

    
En CSS3 se añadieron dos pseudoclases relacionadas con la validez de los campos: :valid e :invalid que nos van a permitir dotar de mayor visibilidad a los errores y aciertos de los usuarios al completar los formularios. Por supuesto con un soporte desigual entre los distintos navegadores como verás en el siguiente gráfico:
    

    

    

    

    

    
Añadiendo un poco de CSS podemos hacer que sea un poco más vistoso el resultado válido al introducir un campo.
    

    

    

    input:valid {
  background-color: #BBFFF0;
}
    

    

    

    

    

    
AÑADIENDO UN POCO MÁS DE ESTILO CON FONT AWESOME
    

    

    

    

    
Como ya he hablado en otros posts soy un gran fan de las webfonts, que nos permiten incluir diseño gráfico de forma muy sencilla, fácilmente reutilizables y con una muy baja penalización en el rendimiento web.
    

    
Nuevamente voy a volver a utilizar CSS y Font Awesome para incluir algo más vistoso en la validación. Para ello incluyo en el header la página un link a Font Awesome.
    

    

    

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    

    

    

    

    
A continuación incluyo el siguiente código HTML después de cada input, con el icono check que me proporciona Font Awesome.
    

    

    

    <i class="fa fa-check check-ok"></i>
    

    

    

    

    
Por último solo quedan incluir las siguientes lineas CSS que me permiten por medio del selector de siblings (hermanos o parientes) mostrar el check cuando el contenido del input sea válido u ocultarlo cuando no.
    

    

    

    .check-ok {
  color: lime;
}
 
input:invalid ~ .check-ok {
  display: none;
}
 
input:valid ~ .check-ok {
  display: inline;
}
    

    

    

    

    

    

    

    

    

    tomado de:http://saramejiao.blogspot.com.co/

       /

      No Comments

    miércoles, 10 de mayo de 2017

    Mayo 10 del 2017

      18:10    

    DÍA E:

    En este día E el cuál es la celebración de la excelencia.

    El cual hicimos actividades en grupo, oración y hicimos una actividad de lectura para los niños.

    También vimos un vídeo donde se ve previamente partes del colegio y como los estudiantes aprendemos de los profesores a ser unas buenas personas en el mañana.



      No Comments

    jueves, 4 de mayo de 2017

    Mayo 3 del 2017

      12:41    

    Hoy hicimos evaluación, mi nota fue 100 porque realicé un ejercicio dejado el fin de semana.

    El ejercicio fue este:

    HTML:

     <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>

    <link rel="stylesheet" type="text/css" href="estiloej2-03-05-2017.css">

    <h1>Titulo</h1><br>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. <a class="crojo">Ut enim ad minim veniam,</a>
         quis nostrud <a class="camarillo">exercitation ullamco laboris</a> nisi ut aliquip.
    <br>
    <h2>Subtitulo</h2>

         Lorem ipsum dolor sit amet, <span class="hola">consectetur <span class="adios">adipisicing</span> elit, sed do eiusmod
         tempor</span> incididunt ut labore et dolore <span class="morado">magna aliqua. Ut enim ad minim</span> veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip.

    <br><hr><br>

    <table >
    <caption>Titulo de la tabla</caption>
    <tr>
    <td></td>
    <td class="uno">Titulo columna 1</td>
    <td class="uno">Titulo columna 2</td>
    </tr>

    <tr>
    <td class="uno">Titulo fila 1</td>
    <td>Lorem ipsum dolor </td>
    <td>Lorem <span>ipsum</span> dolor </td>
    </tr>

    <tr>
    <td class="dos">Titulo fila 2</td>
    <td>Lorem ipsum dolor</td>
    <td>Lorem ipsum dolor </td>
    </tr>

    <tr>
    <td></td>
        <td class="dos">Titulo columna 1</td>
    <td class="dos">Titulo columna 2</td>
    </tr>


    </table>

    <br><br>

    <hr>

    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud <span>exercitation ullamco laboris nisi ut aliquip.</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip.<br><br>

         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip.<br><br>

         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore <span class="chao">magna aliqua. Ut enim ad minim</span> veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>


    </body>

    </html>

     CSS:

     h1{color:#38DB47;
       text-decoration: blink}

    .crojo {color:#F00;
       font-weight:700;
       text-decoration: none}

    .camarillo{color:#EACF20;}

    h2{color:#14507A;}

    span.hola{color:red;
      text-decoration: underline;}

    span.adios{color:blue;
           font-style: italic; }

    .morado{color:#D03FD5;}

    span{color:purple;}

    table, tr, td {border: 1px solid black;
          border-collapse: collapse;
          padding-bottom:7px;
         padding-top:7px; 
         padding-left:7px;
         padding-right:7px; }

    caption{color:blue;}

    td{color:#28B73E;
       font-weight: 600}

    td.uno{font-weight:700;
           color:#EACF20;}

    td.dos{font-weight: 700;
           color:red;}

    td div{font-weight: 600;
           color:#EACF20;}

    td span{font-style: italic;
            color:#28B73E;} 

    div{color:#ACD53F;}

    div span{color:#F413DD;}     

    span.chao{color:#5C951B;
          text-decoration: underline; }

    Lo anterior es un texto decorado con CSS.

    (Copiar y pegar en un editor de texto el anterior ejemplo para así apreciarlo mejor)

    También se comenzó a hablar sobre el proyecto de este periodo, las pautas para el mismo serán publicadas más adelante. Todo mi grado (10 A) es un equipo, y es una especie de competencia contra el grado (10 B)

      No Comments