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)

[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/

[2017-22-02]

CLASE  04:

Se realizó evaluación correspondiente a la habilidad # 2, esta se basa en ejercicios de aplicación sobre inner HTML.

EVALUACIÓN:

<html>
<head>
<title>Ejercicio 2</title>
</head>

<script >

function i(){
var a= parseInt(document.getElementById("a").value);

var rta= (a*19/100)
//document.getElementById("rta").value= a * 19/100 ;
document.getElementById("mirespuesta").innerHTML= a * 19/100 ;
}
</script>

<body>
<div id="mirespuesta"></div>
 VALOR DEL PRODUCTO <input type="text" id="a"><br><hr><hr>
<input type="button" value="valor del iva" onclick="i();"><br>

</body>

</html>

• Se explica el Tema sobre Ventanas Emergentes y Ventanas Modales:

VENTANA EMERGENTE O POP UP:

•  Llamar otra página y necesitan permisos del cliente.

Una ventana emergente (en inglés se le conoce como pop-up window) es una ventana del navegador de internet que:

•         Aparece automáticamente, sin ser solicitada.
•          Usualmente despliega publicidad
•          Dirige tráfico de Internet a ciertas páginas
•          Recopila direcciones de correo electrónico.

También existen ventanas emergentes que son parte de una página web.

Una nueva variante de las ventanas emergentes es que en lugar de que las ventanas aparezcan encima de las demás, aparecen por debajo de la ventana en la que está navegando el usuario, ocultando así qué página originó la ventana emergente.Se le conoce en inglés como pop-under (aparece por debajo).

Es posible abrirlas, cerrarlas y pasar datos de una ventana a otra.

TOMADO DE: 

http://aprenderinternet.about.com/od/Glosario/g/Que-Es-Una-Ventana-Emergente.htm

CÓDIGO DE LA VENTANA EMERGENTE:

<html>

<head>

<title>emergente</title> 

</head>

<body>

<a href="#"onclick='javascript:window.open

("pagina.html","_blank","width=800,height=1200,menubar=no,top=40,left=50")'>Abrir</a>

<br><br><br>

<span onclick='javascript:window.open("http://www.google.com","_blank")'>hola</span>

<br><br>

<input type="button" onclick="javascript:window.close();" value="Cerrar esta Pagina">

</body>

</html>

WINDOW.OPEN: Tiene 3 parámetros: " ", " ", " "

• El primer parámetro es: Página o producto que se va a abrir o mostrar.
• El Segundo parámetro es: Dónde se va abrir (self o blank)  
• El Tercer parámetro son: Las Propiedades (medidas (px) y menubar (yes o no)).

top y left: Esquina superior Izquierda.

NOTA:  Las pantallas crecen de izquierda-a-derecha y arriba-hacia-bajo.

VENTANA MODAL: 

Se divide en Dos el tamaño horizontal para que quede en la mitad de la página.

Una ventana modal es una ventana que se encuentra sobre todas las demás ventanas de la misma aplicación, hasta que se cierra o se abre otra ventana modal. 

TOMADO DE:  

http://digital.ni.com/public.nsf/allkb/7CCD41E4B665E196862573FC0076DC1F

display:none (Oculta Información)

Elementos básicos que se necesitan para realizar una ventana modal con HTML y Javascript.

Se necesita un contenedor, un espacio donde ubicar el contenido web que deseamos mostrar. Normalmente esto se hace con la etiqueta DIV. Este contenedor formará parte de la página web, pero no se mostrará cuando se visualice la página: será un elemento invisible. Luego necesitamos alguna manera de mostrar el contenedor, y su contenido, cuando nos haga falta.Por último, necesitaremos también alguna forma de ocultar el contenedor.

Al final de la sección body de la página web el siguiente código:

<div id=”miVentana” style=”position: fixed; width: 350px; height: 190px; top: 0; left: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: #333333 3px solid; background-color: #FAFAFA; color: #000000; display:none;”>
Aquí se coloca el contenido web
</div>

Atributos más importantes del DIV son:

id: el identificador del elemento, que nos permitirá recuperarlo y acceder a él a través del DOM.
display: le indicamos al navegador que no muestre este elemento (none).

TOMADO DE: 
http://www.hinojosachapel.com/2008/11/como-hacer-una-simple-ventana-modal-con-html-y-javascript.aspx#.WLNtGtLhDcs

[2017-15-02]

CLASE  03:

EVENTOS JAVASCRIPT:

Las aplicaciones web creadas con el lenguaje JavaScript pueden utilizar el modelo de programación basada en eventos. Los eventos hacen posible que los usuarios transmitan información a los programas. 

Los scripts se dedican a esperar a que el usuario "haga algo" (que pulse una tecla, que mueva el ratón, que cierre la ventana del navegador), el script responde a la acción del usuario normalmente procesando esa información y generando un resultado.

TOMADO DE: http://librosweb.es/libro/javascript/capitulo_6.html

Eventos: Condicionados a cualquier clase de objetos (Botón, Cajas de Texto).

<body>: Es un objeto que contiene todos los objetos. Es el Contenedor más grande.

TIPOS DE EVENTOS

El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en inglés de la acción asociada al evento. 

onblur: Deseleccionar el elemento.

Elementos para los que está definido:

<button>, <input>, <label>, <select>, <textarea>, <body>

onchange : Deseleccionar un elemento que se ha modificado.     

• ·         <input>, <select>, <textarea>

onclick: Pinchar y soltar el ratón.     

• ·         Todos los elementos

ondblclick: Pinchar dos veces seguidas con el ratón.        

• ·         Todos los elementos

onfocus: Seleccionar un elemento.

• ·         <button>, <input>, <label>, <select>, <textarea>, <body>

onkeydown: Pulsar una tecla (sin soltar).   

• ·         Elementos de formulario y <body>

onkeypress:  Pulsar una tecla.        

• ·         Elementos de formulario y <body>

onkeyup: Soltar una tecla pulsada.  

• ·         Elementos de formulario y <body>

onload: La página se ha cargado completamente. 

• ·         <body>

onmousedown: Pulsar (sin soltar) un botón del ratón.        

• ·         Todos los elementos

onmousemove: Mover el ratón.      

• ·         Todos los elementos

onmouseout  : El ratón "sale" del elemento (pasa por encima de otro elemento).

• ·         Todos los elementos

onmouseover: El ratón "entra" en el elemento (pasa por encima del elemento). 

• ·         Todos los elementos

onmouseup:  Soltar el botón que estaba pulsado en el ratón.        

• ·         Todos los elementos

onreset: Inicializar el formulario (borrar todos sus datos).

• ·         <form>

onresize: Se ha modificado el tamaño de la ventana del navegador.       

• ·         <body>

onselect: Seleccionar un texto .        

• ·         <input>, <textarea>

onsubmit: Enviar el formulario.       

• ·         <form>

onunload: Se abandona la página (por ejemplo al cerrar el navegador).  

• ·         <body>

     TOMADO DE:

http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.html

document.getElementById

Permite obtener la referencia a un elemento de la página mediante el id de dicho elemento (Llama por medio del id a un elemento).

Por ejemplo, si tenemos una imagen representada por el siguiente código HTML:

<img src="foto.jpg" id="mifoto"/>

Podríamos obtener una referencia a dicha imagen mediante el siguiente código JavaScript:

<script type="text/javascript">

  foto=document.getElementById("mifoto")

</script>

Una vez obtenida la referencia al elemento, podemos acceder a todas sus propiedades, ya sea para lectura o escritura.

TOMADO DE: http://lineadecodigo.com/javascript/documentgetelementbyid/

EJERCICIO DE CLASE:

Se realiza un ejercicio javascript donde se coloca en práctica lo explicado por el Docente como lo es la función document.getElementById y poder modificar texto en cualquier posición del sitio web. 

Se tiene dos cajas de texto donde se introducen dos valores y se tienen tres botones que al oprimirlos darán sus respectivos resultados de acuerdo a las operaciones asignadas a cada uno de ellos.

<script>

function s(){

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

var b = parseInt(document.getElementById("b").value);

//alert ( a + b);

//document.write( a + b);

var rta = a + b;

document.getElementById("rta").value = rta;

document.getElementById("holita").innerHTML = "<marquee><b><font color='#ff0000'>" + "Esto es el resultado de mi suma = " + (a + b ) + "</font></b></marquee>";

}

function r(){

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

var b = parseInt(document.getElementById("b").value);

//alert ( a + b);

//document.write( a + b);

document.getElementById("rta").value = a - b;

document.getElementById("holita").innerHTML = "<marquee><b><font color='#ff0000'>" + "Esto es el resultado de mi resta = " + (a - b ) + "</font></b></marquee>";

}

</script>

<body>

<label>A:</label> 

<input type="text" id="a" autocomplete="off">

<br>B: <input type="text" id="b">

<br>Rta: <input type="text" id="rta" readonly >

<hr>

&nbsp;&nbsp;<input type="button" value="Sumar" onclick="s();" >

&nbsp;&nbsp;<input type="button" value="Restar" onclick="r();">

&nbsp;&nbsp;<input type="button" value="Multiplicar" >

<hr>

<div id="holita">esto es mi mensaje</div>

<hr>

</body>

[2017-08-02]

CLASE  02:

En esta Clase el Docente parte de una dinámica, la cual consiste en enviar un correo y que en este se encuentre el enlace de lo requerido por parte del profesor. Esta se realiza en grupos y hace parte de la Nota de la Primera Habilidad del Bimestre.

Se realiza en el transcurso de la clase la inscripción al SENA y se llenan algunos formularios.

El enlace que correspondió al Grupo #5 fue el de buscar en Google Maps o Street View la ubicación del Supermercado Éxito de la Rosita, Bucaramanga, Santander, Colombia.

https://www.google.com/maps/place/exito+la+rosita/@7.1132565,-73.1231993,3a,75y,331.88h,90.89t/data=!3m7!1e1!3m5!1smybc8AOIYzg3X-gPdauGxw!2e0!6s%2F%2Fgeo1.ggpht.com%2Fcbk%3Fpanoid%3Dmybc8AOIYzg3X-gPdauGxw%26output%3Dthumbnail%26cb_client%3Dsearch.TACTILE.gps%26thumb%3D2%26w%3D392%26h%3D106%26yaw%3D14.507466%26pitch%3D0%26thumbfov%3D100!7i13312!8i6656!4m5!3m4!1s0x8e683fda7fff9d91:0x42d0d4bda2232d61!8m2!3d7.1133802!4d-73.1231547!6m1!1e1?hl=es

Se consulta en clase sobre las funciones  de Javascript y funciones para arrays.

Algunas de las funciones más útiles para el manejo de arrays son:

 Length: calcula el número de elementos de un array.

var vocales = ["a", "e", "i", "o", "u"];

var numeroVocales = vocales.length; // numeroVocales = 5

concat(), se emplea para concatenar los elementos de varios arrays.

var array1 = [1, 2, 3];

array2 = array1.concat(4, 5, 6);   // array2 = [1, 2, 3, 4, 5, 6]

array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]

join(separador), es la función contraria a split(). Une todos los elementos de un array para formar una cadena de texto. Para unir los elementos se utiliza el carácter separador indicado

var array = ["hola", "mundo"];

var mensaje = array.join(""); // mensaje = "holamundo"

mensaje = array.join(" ");    // mensaje = "hola mundo"

pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye en 1 elemento.

var array = [1, 2, 3];

var ultimo = array.pop();

// ahora array = [1, 2], ultimo = 3

push(), añade un elemento al final del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)

var array = [1, 2, 3];

array.push(4);

// ahora array = [1, 2, 3, 4]

shift(), elimina el primer elemento del array y lo devuelve. El array original se ve modificado y su longitud disminuye en 1 elemento.

var array = [1, 2, 3];

var primero = array.shift();

// ahora array = [2, 3], primero = 1

unshift(), añade un elemento al principio del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)

var array = [1, 2, 3];

array.unshift(0);

// ahora array = [0, 1, 2, 3]

reverse(), modifica un array colocando sus elementos en el orden inverso a su posición original:

var array = [1, 2, 3];

array.reverse();

// ahora array = [3, 2, 1]

TOMADO DE:  
http://librosweb.es/libro/javascript/capitulo_3/funciones_y_propiedades_basicas_de_javascript.html