jueves, 25 de mayo de 2017


[2017-24-05]

CLASE  15:

Se continua la realización del proyecto y se avanza desde la 2da Base hasta la quinta. (inicio de la sexta).

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

DIGITADOR: cod.26 Juan Pedraza

3. Construcción del código HTML, necesario para empezar a crear la aplicación, según el enunciado del item 1.

DIGITADOR: cod.13 Juan Franco

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

DIGITADOR: cod.10 Maria Duarte

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

DIGITADOR: cod.28 Sebastian Ramirez

Se realiza clase extra el [2017-25-05] en la cual se Finaliza el proyecto de grupo y se entrega el resultado de las tres últimas bases:

6. Y la segunda se validará con Javascript.

DIGITADOR: cod.33  William Rodriguez

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.18 Leonardo Gonzalez

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.31 Laura Rodriguez

Tomado de: www.coldivinoamor.com/espaciovirtual

Código base de la etapa 8:

<script>

function validar(){
var name1=document.getElementById("nombre").value
var time2=document.getElementById("tiempo").value
var date3=document.getElementById("calendario").value
var male4=document.getElementById("maletas").value
var destinity5=document.getElementById("dest").value
var transport6=document.getElementById("trans").value
var transpo=transport6.charAt(0)
var delboton=document.getElementById("enviar")

if(name1.length==0) {
// Si no se cumple la condicion…
alert('[ERROR] ingresar su nombre');
return false
}
else if (time2.length==0) {
// Si no se cumple la condicion…
alert('[ERROR] El campo debe tener una hora');
return false
}
else if (date3.length==0) {
// Si no se cumple la condicion…
alert('[ERROR] El campo debe tener una fecha');
return false
}
else if(document.getElementById("enviar")){
alert("Tiquete vendido")

}

if(destinity5.length==13){
var precioinicial=40000
precioinicial=parseFloat(precioinicial)
}
else {
var precioinicial=100000
precioinicial=parseFloat(precioinicial)
}

if(male4.length==7){
var pasaje=(precioinicial*2)/100
pasaje=precioinicial+parseFloat(pasaje)
}
else if(male4.length==5){
var pasaje=(precioinicial*5)/100
pasaje=parseFloat(precioinicial)-parseFloat(pasaje)
}
else{
var pasaje=(precioinicial*25)/100
pasaje=precioinicial-parseFloat(pasaje)
}

if(transpo=="C"){
document.body.style.backgroundColor = "#1495ce";
var preciofinal=(pasaje*10)/100
preciofinal=parseFloat(pasaje)-parseFloat(preciofinal)
}
else if(transpo=="B"){
document.body.style.backgroundColor = "#17c762";
var preciofinal=pasaje*5/100
preciofinal=parseFloat(pasaje)-parseFloat(preciofinal)
}
else{
document.body.style.backgroundColor = "white";
var preciofinal=pasaje
}
alert("El precio inicial era de"+ " "+ precioinicial)
alert("Precio despues de considerar el numero de maletas"+ " " +pasaje)
alert("Valor a pagar" + " " + preciofinal)
}

</script>

martes, 23 de mayo de 2017


MANUALES (Continuación) :

AÑADIENDO ESTILO CON FONT AWESOME

Las webfonts, 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>
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;
}

Muestra además un check al lado del campo en cuanto los datos introducidos sean válidos.
TOMADO DE: 

MANUALES:

Validación - Los nuevos input HTML5 para formularios.

Ahorro considerable de código combinando los nuevos input y atributos pero no está estandarizado.

Elementos para formularios en HTML5:

  • Datalist
  • Keygen
  • Output
  • Number
  • Range
  • Tel
  • Email
  • Color
  • Search
  • Url
  • Date
  • Datetime
  • Datetime-local
  • Month
  • Time
  • Week
Explicación breve de cada elemento:

Datalist input HTML5

Aglutina varios valores predefinidos que facilitan el auto-completado de un campo tipo input.
Es decir, según el usuario va escribiendo, el navegador abre una lista desplegable con las diferentes opciones a seleccionar. Es muy parecido a un combo o lista.

keygen HTML5

Es un campo para enviar claves en el autentificado web.

Al enviarse el formulario se crean 2 claves, una pública que se envía al servidor y que posteriormente se usará para seguir auntentificándonos en el sistema, y otra privada que se almacena localmente en el navegador.

output HTML5

Esta nueva etiqueta representa el resultado de un cálculo entre los diferentes input de un formulario.
Tened en cuenta que solo representa y no se recoge dicho dato en el envío del formulario. 

number input HTML5


Este input valida automáticamente que los valores introducidos sean numéricos, con el consiguiente ahorro de código en la recepción o validación de los formularios.

range input HTML5


Este input es muy parecido al HTML5 number input, la diferencia radica en que en este caso la única manera de especificar el valor es mediante su slider con sus correspondientes límites.

tel input HTML5


Resulta muy últil en los dispositivos móviles actuales.
El dispositivo móvil detecta que el input es de tipo ‘tel’ y al pulsar en él automáticamente sale el teclado telefónico del móvil para insertar el número en cuestión.
email input HTML5
El elemento por defecto detecta que el campo debe ser rellenado con contenido válido de una cuenta de email, por lo que mostrará una @ en el teclado y hará las verificaciones pertinentes para cumplir los requisitos de una dirección de email.

color input HTML5


Representa una paleta (selector) de colores sin necesidad de añadir plugins ni códigos adicionales como veníamos haciendo hasta ahora. Así con un solo click podemos elegir facílmente un color.
search input HTML5
El campo contendrá valores de búsqueda, así el propio input nos proporciona un dato válido y el teclado del dispositivo móvil mostrará el botón ‘buscar’.
url input HTML5
Se parece bastante a el input tel de HTML5. Este campo cuando se visualiza en dispositivos móviles facilita en el teclado las teclas ‘.’, ‘/’, y ‘.com’.

date input HTML5


Este elemento vale para representar en nuestra web un datepicker o calendario, el formato de la fecha devuelto es ‘AAAA-MM-DD’.
datetime input HTML5
Input similar al anterior solo que este último además de la fecha envía también la hora. El formato de fecha y hora devuelto es el siguiente: ‘AAAA-MM-DDTHH:MMZ’.
Este elemento está sin implementar en casi todos los navegadores y solo funciona a medias en Safari.

datetime-local input HTML5

Más de lo mismo, elemento idéntico al datetime pero sin enviar la zona horaria. El formato devuelto es: ‘AAAA-MM-DDTHH:MM’.
Month input HTML5
Input para representar mes y año con formato ‘AAAA-MM’.

Time input HTML5


Con la inserción de este elemento en un formulario facilitaremos la entrada de datos para horas, el formato de la info enviada es: ‘HH:MM:SS’.

Week input HTML5


Inserción del número de la semana de un año en cuestión. Su formato es ‘YYYY-WNN’ –> ‘2014-W07’.



Validacion - DE FORMULARIOS CON HTML5 Y EXPRESIONES REGULARES SIN USO DE JS.

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.

HTML5 Forms Input Type Support Wufoo

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.

Pongamos una serie de condiciones previas para cada uno de los campos:
    • 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 opcional  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:
css_invalid_support
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;
}
Tomado de: 

viernes, 19 de mayo de 2017


[2017-17-05]

CLASE  14:

Se empieza el proyecto correspondiente al segundo bimestre, por inicio de bases, en la clase se explica el tema el cual fue escogido por un estudiante al azar y se alcanzó a realizar una parte de la segunda base.

El tema se basa: Un programa en el cual se leen los datos de los pasajeros sobre la venta de tiquetes tipo terrestre, el cual lee el nombre del pasajero, hora, fecha, tipo de destino (si es nacional o departamental), empresa, valor del pasaje y la cantidad de maletas (Si no lleva maletas se le dará un 25% de descuento y si lleva más de 3 se dará un incremento al precio del 2% por cada maleta, también se dará un descuento del 5% si lleva 1 maleta) y según el tipo de empresa que haya utilizado; si es copetran se dará un 10% de descuento pero si al contrario utiliza la empresa de transportes Berlinas, sólo se dará un 5% de descuento.

El valor del pasaje nacional es de: $40.000
Valor del pasaje departamental es de: $100.000

Se explica la metodología y se dan las reglas sobre el proyecto, la última base es la encargada de validar todo el formulario con Javascript y añadir de estilo la opción de cambiar de color de fondo según el tipo de empresa que se escoja.


Se deja en claro que cada base si termina su proyecto (parte de este) ya tiene su nota asegurada es decir quien haga falta y no termine su proyecto se irá automáticamente a presentar evaluación escrita y sin apuntes sobre todos los temas vistos.

PROYECTO.



MANUALES:

¿Qué son los Algoritmos?.


Es un conjunto ordenado de pasos a seguir (instrucciones concretas) que llevan a resolver un determinado problema

Condiciones:
  • Ser correcto (Resuelve el problema).
  • Ser finito (Conduce a la solución en un tiempo dado).
  • Ser flexible  (No es exclusivo para un tipo de problema sino que sirve como método general para distintos datos).
  • Ser claro (comprensible por otras personas).
  • Ser eficiente (ahorro de tiempo y recursos).
  • Ser portable (independiente de la máquina o del lenguaje utilizado).
Puede crear múltiples soluciones, siempre teniendo en cuenta el menor tiempo posible y el menor coste.

Se necesitan: 
  • Datos
  • Variables
  • Condiciones para la solución del problema.
Pasos para realizar un algoritmo:




DIAGRAMA DE FLUJO:

Flujo grama de Procesos o Diagrama de Procesos, representa la secuencia o los pasos lógicos (ordenados) para realizar una tarea mediante unos símbolos. Dentro de los símbolos se escriben los pasos a seguir. 

Proporciona una información clara, ordenada y concisa.

¿Cómo hacer un diagrama de flujo?:

1. Realizar el algoritmo.
2. Pasos con secuencias lógicas.

Reglas para la construcción de un diagrama de flujo:

1. Todos los símbolos han de estar conectados

 2. A un símbolo de proceso pueden llegarle varias líneas

 3. A un símbolo de decisión pueden llegarle varias líneas, pero sólo saldrán dos (Si o No, Verdadero o Falso).

 4. A un símbolo de inicio nunca le llegan líneas.

 5. De un símbolo de fin no parte ninguna línea.


Símbolos Fundamentales:




Ejemplo:






mod significa: Dividir en el diagrama de flujo.



PSEUDOCÓDIGO:

En programación, lenguaje artificial e informal útil para programadores para el desarrollo de algoritmos.


No es un lenguaje de programación verdadero y, no puede ser compilado y ejecutado. 

PSeInt: Ejecuta algunos pseudocódigos pero con fines educativos.

Descripción de los algoritmos utilizando una mezcla de lenguaje común, con instrucciones de programación, palabras claves. 

El objetivo es que el programador se centre en la solución lógica del algoritmo y no en la implementación de un lenguaje de programación concreto (con las posibles complicaciones en las reglas sintácticas); Ayuda a "pensar" un programa antes de escribirlo en un lenguaje de programación formal.


jueves, 11 de mayo de 2017


[2017-10-05]


No hay clase por el Día E (Día de la excelencia por parte del Gobierno). Se realizan actividades en jornada especial (6:15 am a 12:00 pm).

A principio de Semana se organizan los grupos/ bases para el proyecto y se asignan los temas para cada base:

Temas de las Bases:

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

DIGITADOR: cod.07 Maryan Cienfuegos

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

DIGITADOR: cod.26 Juan Pedraza
           
3. Construcción del código HTML, necesario para empezar a crear la aplicación, según el enunciado del item 1.

DIGITADOR: cod.13 Juan Franco

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

DIGITADOR: cod.10 Maria Duarte

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

DIGITADOR: cod.28 Sebastian Ramirez

6. Y la segunda se validará con Javascript.

DIGITADOR: cod.33  William Rodriguez

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.18 Leonardo Gonzalez

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.31 Laura Rodriguez       

Se da a conocer el tiempo para el proyecto:

El proyecto se realizará en 4 horas de clase, empezando el día 17 (2 horas) y terminando el 24  (2 horas) de mayo de 2017.

Tomado De: http://laweb.coldivinoamor.com/

jueves, 4 de mayo de 2017


[2017-03-05]

CLASE  13:

Se realiza evaluación escrita con apuntes sobre el tema asignado el fin de semana para consultar.

1.¿Qué función realiza la siguiente regla de CSS?

/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }

2. ¿Qué función realiza la siguiente regla de CSS?
p a span em { text-decoration: underline; }
Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>.

3. Nombre de quien diseñó la máquina analítica:
Charles Babbage.
4. ¿Qué realiza la etiqueta <em>?
Es el elemento apropiado para marcar con énfasis las partes importantes de un texto. Resalta el Texto.
Se revisa el ejercicio propuesto en la página web de informática.
Ejercicio Propuesto:


Explicación Proyecto correspondiente al Segundo Bimestre:
Se realizará un proyecto por salón / grupo, la metodología; conformar grupos pequeños en el que estén dos personas que serán las bases/apoyos para una persona que será la encargada de digitar y es la única que podrá realizar el trabajo en el computador, cada uno de los grupos tendrá un tema o una parte del proyecto que deberá hacer y este se pasará al siguiente grupo y así sucesivamente hasta llegar al grupo final. Para la culminación de este proyecto se tendrá la disponibilidad de 6 horas; 3 clases y será responsabilidad de todo el curso puesto que se deberá llevar un buen manejo del tiempo, cada clase el docente se quedará con la parte del proyecto que se realice en cada una de estas.

Temas a tener en cuenta para el proyecto:


  • HTML.
  • HTML 5.
  • Validación de javascript.
  • Método Hack.
  • CSS.