martes, 21 de marzo de 2017



TEMAS IMPORTANTES:

  • Propiedad de objetos web innerHTML

Se trata de la propiedad innerHTML que fue introducida por Microsoft en Internet Explorer como un método de acceso rápido al contenido completo de un contenedor en HTML.
Podemos usar innerHTML para recuperar el contenido actual de un contenedor o insertar nuevo contenido en ese contenedor.
Por contenedor entendemos aquello que está entre las cláusulas < div > y < /div >.
El elemento DIV define un contenedor genérico, el cual permite a los programadores definir estilos o bloques de contenido.

Como parámetros a DIV tenemos ID, CLASS y ALIGN, aunque éste último cada vez se emplea menos en favor de las CSS.



Ejemplos de uso de DIV.
<div id="primero">
<p>Algún texto.</p>
<p>Un poco más de texto.</p></div>
<div id="segundo"></div>
El primero de los ejemplos muestra 2 párrafos de texto en la página, mientras que el Segundo no muestra nada; simplemente es un contenedor vacío en estos momentos.
Podemos recuperar el contenido de DIV de la siguiente forma:
   var contenido = document.getElementById('primero').innerHTML;
La variable contenido almacena ahora todo el texto de los dos párrafos así como las marcas < p > y 
< /p >.

Podríamos reemplazar los dos párrafos completamente asignándoles un nuevo valor.
   document.getElementById('primero').innerHTML = '<p>Un parrafo de texto para reemplazar los dos anteriores.</p>’;

TOMADO DE: 

Validación de formularios con HTML5:

HTML5 nos permite definir patrones de validación para los diferentes campos de un formulario, se realiza en el lado del cliente (navegador web).

Métodos de validación de formularios con HTML5

HTML5 ofrece diferentes métodos de validación de formularios client-side utilizando diferentes atributos para el elemento <input>. Los más destacados son type, pattern y required.

El atributo <type>:

Indicamos al navegador el tipo de control que debe ejercer sobre el elemento <input>. en HTML4 nos acostumbramos a <input type="text" /> pero a partir de HTML5 podemos utilizar una amplia gama:

  • Color                                      
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
Si los datos introducidos en el campo del formulario no coinciden con el tipo especificado, el navegador lanzará un aviso al usuario y el formulario no se enviará.
Ej:
<input type="email" name="email">

El atributo pattern:

Define patrones de Validación.

Las expresiones regulares, conocidas como regex (del inglés regular expression), permiten validar una cadena de texto frente a palabras, caracteres y patrones de una forma muy flexible a la vez que concisa. Al poner un regex como valor del atributo pattern en un <input> decimos al navegador cuál es el valor aceptable para este campo del formulario.

<label for="tel">Teléfono (9 dígitos comenzando por 9, 8, 7 o 6)</label>
<input type="text" pattern="^[9|8|7|6]\d{8}$">

No mezclar Las propiedades del HTML 5 con un pattern, mejor utilizar el HTML 4
<input type=”text”>

Personalizar avisos con el atributo title:

title podemos personalizar estos avisos.
Por ejemplo:

<input type="text" name="twitter_username"
       pattern="^@?(\w){1,15}$"
       title="Este no parece un usuario de twitter válido">

El atributo required:

Se utiliza para decir al navegador los campos del formulario que son requeridos de forma obligatoria, es decir, que no pueden quedar vacíos.

Basta con poner required o required="required". 

Por ejemplo:
<input type="text" name="twitter_username"
       pattern="^@?(\w){1,15}$"
       title="Este no parece un usuario de twitter válido"
       required>

TOMADO DE: https://cybmeta.com/validacion-de-formularios-con-html5


Publicado por en No hay comentarios:

sábado, 18 de marzo de 2017



[2017-15-03]

CLASE  07:
Se realiza la calificación del proyecto por grupos y se realizan las respectivas correcciones.

La Dinámica de la clase consistió en subir el proyecto correspondiente a cada grupo a través del servidor que el docente indico con el número y la palabra escogida por el grupo y así mantener todos los archivos en una sola carpeta que los diferencia de los demás proyectos.

 Servidor grupo 03: smb://192.168.200.101/fresa15

Un integrante del grupo el cual es escogido al azar es el encargado de resolver el error o la pregunta que le realizó el docente y así se obtiene otra nota.

El ejercicio correspondiente al proyecto se subió al template escogido por el grupo la anterior clase.

 Ejercicio Proyecto:
<html>
<head>
<title> Nuestro Proyecto Decimo B</title>
</head>

<script>

  <div  id="hola"></div>

function romano(){

 var a = document.getElementById("num").value;

if (a == 1) {document.getElementById("hola").innerHTML = "I"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 2) {document.getElementById("hola").innerHTML = "II"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 3) {document.getElementById("hola").innerHTML = "III"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 4) {document.getElementById("hola").innerHTML = "IV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 5) {document.getElementById("hola").innerHTML = "V"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 6) {document.getElementById("hola").innerHTML = "VI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 7) {document.getElementById("hola").innerHTML = "VII"; document.getElementById("error").innerHTML = "<hidden>"} 
else if (a == 8) {document.getElementById("hola").innerHTML = "VIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 9) {document.getElementById("hola").innerHTML = "IX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 10) {document.getElementById("hola").innerHTML = "X"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 11) {document.getElementById("hola").innerHTML = "XI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 12) {document.getElementById("hola").innerHTML = "XII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 13) {document.getElementById("hola").innerHTML = "XIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 14) {document.getElementById("hola").innerHTML = "XIV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 15) {document.getElementById("hola").innerHTML = "XV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 16) {document.getElementById("hola").innerHTML = "XVI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 17) {document.getElementById("hola").innerHTML = "XVII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 18) {document.getElementById("hola").innerHTML = "XVIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 19) {document.getElementById("hola").innerHTML = "XIX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 20) {document.getElementById("hola").innerHTML = "XX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 21) {document.getElementById("hola").innerHTML = "XXI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 22) {document.getElementById("hola").innerHTML = "XXII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 23) {document.getElementById("hola").innerHTML = "XXIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 24) {document.getElementById("hola").innerHTML = "XXIV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 25) {document.getElementById("hola").innerHTML = "XXV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 26) {document.getElementById("adios").innerHTML = "XXVI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 27) {document.getElementById("adios").innerHTML = "XXVII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 28) {document.getElementById("adios").innerHTML = "XXVIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 29) {document.getElementById("adios").innerHTML = "XXIX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 30) {document.getElementById("adios").innerHTML = "XXX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 31) {document.getElementById("adios").innerHTML = "XXXI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 32) {document.getElementById("adios").innerHTML = "XXXII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 33) {document.getElementById("adios").innerHTML = "XXXIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 34) {document.getElementById("adios").innerHTML = "XXXIV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 35) {document.getElementById("adios").innerHTML = "XXXV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 36) {document.getElementById("adios").innerHTML = "XXXVI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 37) {document.getElementById("adios").innerHTML = "XXXVII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 38) {document.getElementById("adios").innerHTML = "XXXVIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 39) {document.getElementById("adios").innerHTML = "XXXIX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 40) {document.getElementById("adios").innerHTML = "XL"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 41) {document.getElementById("adios").innerHTML = "XLI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 42) {document.getElementById("adios").innerHTML = "XLII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 43) {document.getElementById("adios").innerHTML = "XLIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 44) {document.getElementById("adios").innerHTML = "XLIV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 45) {document.getElementById("adios").innerHTML = "XLV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 46) {document.getElementById("adios").innerHTML = "XLVI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 47) {document.getElementById("adios").innerHTML = "XLVII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 48) {document.getElementById("adios").innerHTML = "XLVIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 49) {document.getElementById("adios").innerHTML = "XLIX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 50) {document.getElementById("adios").innerHTML = "L"; document.getElementById("error").innerHTML = "<hidden>"}

else {document.getElementById("error").innerHTML = "<img src='images/ejercicio.png' width=670 height=400> <br><H1>(No digite numeros decimales)</H1>";
document.getElementById("hola").innerHTML = "<hidden>"; document.getElementById("adios").innerHTML = "<hidden>"}

}

function validar(e) {

tecla = (document.all) ? e.keyCode : e.which;

if (tecla==13) {javascript:romano();}
  
}
</script>

<body>

<!-- Para que funcione al dar enter, tuve que quitarle el <form> :/ -->

 <center>
  <label for="numero">Digite un numero del 1 al 50</label>
  <input type="number" min="1" max="50" id="num" onkeypress="validar(event);">

  <input type="button" value="Oprimir" onclick="javascript:romano();">
 </center>

<!-- </form> -->             

  <br><br><br><br><br><br><br><br><div id="error" align="center"></div>

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div id="adios" align="right"></div>

</body>

</html>


 Se utiliza la función de cómo validar la tecla enter para que cumpla una función al momento de digitar el número, para esto se toma el siguiente ejemplo:

 
<html>
<head>
<script type="text/javascript">
function validar(e) {
  tecla = (document.all) ? e.keyCode : e.which;
  if (tecla==13) alert ('Has pulsado enter');
}
</script>
</head>
<body>
<input type="text" onkeypress="validar(event)" />
</body>

</html>
TOMADO DE: http://www.lawebdelprogramador.com/foros/JavaScript/1427953-Reconocer-la-presion-de-la-tecla-enter.html


Se utiliza propiedades del HTML 5 como insertar un tipo de caja para número, este se utiliza en casos de validar formularios  y el tipo "number" permite introducir el valor mínimo y máximo que se desee aceptar.

 En algunos casos este tipo de etiquetas se pueden introducir dentro de un <form>, el cual define formularios, recolecta información de usuario por medio del input.

 El <input> es el elemento más importante del <form> y este se utiliza dependiendo de los atributos correspondientes.

 TOMADO DE:  https://www.w3schools.com/html/html_form_input_types.asp

Enlace para ver el Proyecto: 
https://drive.google.com/file/d/0B3Zt6C8fendwbXVFcnMxZFlDblU/view?usp=sharing


Publicado por en No hay comentarios:

sábado, 11 de marzo de 2017



[2017-08-03]

CLASE  06:

 Se inicia la realización del Proyecto y el Docente explica la temática, se dan las reglas, las cuales deben seguir  los estudiantes y el proyecto se basó en (día de clase): Solo se debe realizar con la memoria de un estudiante el cual fue escogido por el docente e igualmente solo se trabaja con los apuntes (cuaderno o carpeta) de un solo estudiante.

 1. Se descargó el Template donde se trabaja. 

https://freewebsitetemplates.com/preview/mustacheenthusiast/index.html

2. Se realiza lo requerido por el Profesor:

  • Debe existir una carpeta con el nombre de decimob_grupo03 (el número del grupo corresponde al asignado), donde el contenido que tendrá será el proyecto.
  • El sitio web debe ser  navegable.
  • Crear archivo que se llama derechos.html en donde dicho archivo contiene la foto y al frente el primer nombre y apellido de cada estudiante y debajo un link que visualice en otra página el blog de cada uno de los estudiantes. (Se hace mediante una tabla) 
  • Todos los title del sitio web deben llamarse con el nombre de su proyecto: proyecto     decimo b

Ejercicio a realizar en el proyecto:

Caja de texto que reciba números del 1-50 solo números, no debe aceptar letras ni números mayores a 50 ni menores a 1 tiene que mandar mensajes de error y  al momento de oprimir el botón se debe visualizar su correspondiente número en romano pero si los números digitados esta entre 1-25 se visualizará en el  lado superior izquierdo, y entre 26-50 en lado inferior derecho.

Se alcanzo a realizar el Módulo de derechos durante la clase:



El Docente Publica lo que se debe realizar para la próxima clase y cómo será la calificación del proyecto:

Basado en el trabajo realizado en clase 2017-03-08, se indica lo siguiente:
1. Pueden terminar el proyecto en Casa, basado en la copia de seguridad del grupo.
2. Los integrantes del grupo NO SE DEBEN REUNIR, cada uno debe trabajar desde su casa y comunicarse en horarios normales (6 a.m. hasta 7:00 p.m.) con sus compañeros de grupo.
3. No se admiten quejas sobre el hecho de haber trasnochado, lo que hace falta del trabajo deben realizarlo en grupo.
4. El día 2017-03-15, deben entregar la usb marcada(Primer Nombre, Primer Apellido), junto con la carpeta que se indico en clase.
5. El trabajo debe contener todas las recomendaciones que indico el docente en clase.
6. Se pedirá dicho trabajo a cualquier integrante del grupo.
7. Al inicio de clase se entregará el trabajo, no existirá tiempo para correcciones, debido a que ya fueron realizadas en casa por cada uno de los integrantes del grupo.
8. Cada integrante debe tener documentación sobre su proyecto en la usb, cuaderno y Blog. 
Exposición del trabajo despúes de la entrega de la Usb.
9. Todos los integrantes del grupo deben exponer.
Nota: Evaluación escrita individual sobre el trabajo.

TOMADO DE: 
http://laweb.coldivinoamor.com/a280a068feb81d89cb2e29ccc569a151/publicaciones_decimo.php

Publicado por en No hay comentarios:

viernes, 3 de marzo de 2017



PUBLICACIÓN ESPECIAL POR PARTE DEL DOCENTE
(Tema: PROYECTO)

El Docente publica los acuerdos definidos para la entrega del proyecto y comunica lo siguiente:

  • Los grupos de trabajo asignados el día de clase NO SE DEBEN REUNIR, debido a que no existirá trabajo de proyecto del periodo para trabajar en casa.

  • El trabajo de proyecto grupal se realizará en horas de clase.

  • Se publicaran los ejercicios (herramientas funcionales) propios que se necesitan para la construcción del proyecto.

  • Cada integrante debe descargar los ejercicios.

  • Dichos ejercicios, cada alumno debe realizarle modificaciones y así entender la mecánica de los mismos.

  • Los ejercicios deben estar almacenados en memoria usb personal.

  • Si los integrantes de un grupo no alcanzan a terminar el proyecto, el docente se queda con el trabajo y a la siguiente clase el docente le entrega nuevamente el trabajo consignado y así podrá terminar el proyecto.

Si algún integrante de cualquier grupo:

    • No descarga por su propio medio los ejercicios, ni realiza los ejercicios así no le funcionen, el estudiante se hace acreedor de un trabajo de proyecto individual, como también queda registrado automáticamente para la realización del acumulativo.
    • No participa en la realización del proyecto, queda registrado automáticamente para la realización del acumulativo.
    • No tiene memoria usb de los ejercicios (herramientas) indicadas en esta publicación, queda registrado automáticamente para la realización del acumulativo.

  • Si en la realización de los proyectos no alcanzamos a realizar las exposiciones, el criterio de evaluación será 100% escrito individual.
  • Si todo el grado/grupo trabaja a favor del conocimiento y se observa que TODOS han trabajado en sus respectivos proyectos de su grupo, le realizaré a dicho grado/grupo una EXCELENTE Oferta de Nota.
Herramientas para el trabajo en Grupo:
  • Eventos de Javascript
  • Validación con Html5. 
  • Ejercicio de Clase - Ventana Emergente. 
  • Ejercicio de Clase - Ventana Modal. 

Nuevo código para ventanas Modales. 
Ventana Modal sencilla sin Javascript.  
  • Saber Trabajar con templates free y su código en html y en css, tal y como se trabajó en el periodo 4 del 2016.

  • Todos los integrantes del grupo, deben tener su blog actualizado a la última clase.
  • Todos los integrantes del grupo, deben tener su cuaderno de apuntes actualizado a la última clase.

TOMADO DE:  http://laweb.coldivinoamor.com (Módulo Décimo)
Publicado por en No hay comentarios:

jueves, 2 de marzo de 2017


[2017-01-03]

CLASE  05:

La clase tiene un horario especial debido a que es Miércoles de Ceniza y se maneja 
horario B por lo cual, la duración de las horas de clase fueron reducidas.

 El Docente explicó el proyecto a realizar el cual se manejará por grupos de 5 o 6 estudiantes, la organización de los grupos se llevo a cabo en el salón, esto se realizó al azar pues los nombres de cada uno de los estudiantes se depositó en una bolsa y el Docente se encargó de conformar los grupos sacando los papeles correspondientes a la cantidad de miembros de un Grupo.

 Se explican las reglas a tener en cuenta para la entrega del Proyecto:

  • Realizar todos los requerimientos que exija el Docente de acuerdo al tema que le corresponde a cada grupo, NO DESCUIDAR LA LISTA, el tema del proyecto se publicará en la nueva web 2017 en la cual todos los estudiantes podrán visualizar lo que debe llevar el proyecto de contenido y cómo y por cuál medio se debe hacer llegar el proyecto al Docente.
  • Todos los estudiantes deberán trabajar por igual y desempeñarse en armonía en el grupo asignado. Cada integrante del grupo tendrá una función especifica y se logrará un TRABAJO EN EQUIPO, de no ser así , se le informará al Docente sobre los inconvenientes que se tiene y el se hará cargo de solucionarlos llegando a un acuerdo con el estudiante que está inconforme y en desacuerdo con el trabajo.

IMPORTANTE:

Se realizará una sustentación del proyecto trabajado por cada grupo pero esto no quiere decir que cada persona expondrá lo que le correspondió hacer de acuerdo a su función, todos los integrantes del grupo deben saber y tener conocimientos sobre el proyecto en general, qué se le modificó, los errores que se presentaron e inconvenientes que se lograron solucionar y sobre todo tener un conocimiento base del código manejado en todas las áreas como lo son el Diseño, los ejercicios y conceptos requeridos por el Docente y el manejo de la unión de todos los aspectos , menú, etc.

Los estudiantes podrán añadir y modificar el proyecto a su gusto siempre y cuando cumplan con la lista de aspectos que requiere el Docente y se debe tener en cuenta que lo que se añada es porque se tiene conocimiento sobre ello y es posible que se pida al grupo o al estudiante la demostración de cómo lo realizó como también puede ser que no se requiera una explicación en el preciso momento.

La Fecha de entrega y sustentación del trabajo es: Miércoles 08 de Marzo del 2017.

Mi grupo es el Número 3 del Grado 10B, y está conformado por: 
  • Karen Villamizar.
  • Silvia Gonzales.
  • María Sarmiento.
  • Nicolas Toledo.
  • Daniel Camacho.
  • María García.
Se socializó la Nueva Web de Informática correspondiente al año 2017:

http://laweb.coldivinoamor.com/

El Docente puede bloquear el acceso a la web de un estudiante o de un grado completo. Se explica la funcionalidad de esta web y se verifican todos los cambios que se muestran como ejemplos para hacer énfasis a esta nueva modalidad. Es una web más dinámica y permite visualizar la publicación del grado en el que se cursa, también se tiene el módulo de los cronogramas (4 bimestres) , noticias principales, Apertura del blog, manuales (está en construcción este modulo) y los Tips importantes para el buen funcionamiento de la clase.

Es posible cambiar el color de la web cuando se ingresa al usuario correspondiente y se tiene disponibilidad de nuevos indicadores como lo son el número de camisas - cabello que tiene cada estudiante apuntadas y la cantidad de correos recibidos por parte del Ingeniero.

Se Aclaran dudas sobre los ejercicios que no son posibles de ejecutar y es muy IMPORTANTE: verificar el código de algunos ejercicios porque de utilizar librerías estas se deben guardar con el respectivo código base y de este modo se ejecutará el ejercicio.

Librerías como:
  • El código CSS.
  • Libreria jquery.
  • bootstrapmodal.

Las librerías producen pequeños eventos.

Una librería es un archivo o conjunto de archivos que se utilizan para facilitar la programación. Las librerías, también llamadas "frameworks", consisten en archivos de código a los que llamamos al principio de la página, por ejemplo, un librería javascript será un archivo en javascript que insertamos al principio de la página.

Para que un archivo sea una librería, este debe poder  usarse en distintas páginas, no sólo del mismo sitio, sino de varios sitios. Además debe modificar el código de tal manera que nos facilite la inserción de nuevo código en la página.

Un ejemplo de librería sería la inclusión de un archivo reset.css que nos resetea la página para que ésta se vea igual en todos los navegadores.

TOMADO DE: http://aprende-web.net/librerias/

Publicado por en No hay comentarios:
Suscribirse a: Entradas (Atom)