jueves, 30 de marzo de 2017



[2017-29-03]

CLASE  09:

  • El Docente da a conocer las notas finales correspondientes al primer bimestre, los estudiantes que hicieron falta por presentar el acumulativo la clase pasada, lo presentaron y obtuvieron la nota según su desempeño.

  • Los estudiantes realizan ensayo para sus debidas presentaciones (Danza)

  • Se estipula por parte del Docente que la siguiente clase (5-04-17) se dará inicio al SEGUNDO BIMESTRE.


jueves, 23 de marzo de 2017




[2017-22-03]

CLASE  08:

Se socializa el Tip #17 de la página de informática en donde se aclara que se debe actualizar el Blog antes del Viernes-6:00pm.

[ 17 ] - Recomendación Especial. Les recuerdo estar leyendo esta web constantemente y en especial los viernes después de las 6:00 p.m. momento en que ya realice publicación para el fin de semana. De igual manera el Blog ya debería estar actualizado a esta fecha.


Se dan a conocer las notas correspondientes del proyecto realizado en grupos:
Nota 1: 90
Nota 2: 100

Se explica cómo sacar el respectivo promedio de la materia y quien tenga su promedio igual o mayor a 60 queda exento del acumulativo y su nota de prueba saber es = 100.Las 4 habilidades corresponden al 70% y recursos, socio afectivo al 5%.

Acumulativo= 100 y prueba saber = 100

Nota definitiva de la Materia = 100



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>



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: 



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. 


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: 

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)