miércoles, 8 de marzo de 2017

INICIO DEL PROYECTO. (CLASE N°6)

En esta clase dimos inicio al proyecto,para iniciar el profesor recogía una memoria y un cuaderno de dos estudiantes del grupo, después nos explicó el proyecto.

El proyecto era el siguiente:

1. tener un template limpio (al oprimir un enlace ir a el sitio exacto)

2.carpeta :decimob_grupo03

Indicación: El sitio web debe ser navegable

4. ejercicio:caja de texto que riba numeros de el 1 al 50,no debe aceptar letras,numeros superiores a 50 ni menores a 1, a el momento de orpimir el boton se debe visualizar su correspondiente numero romano8si los numeors dijitados estan entre 1 y 25 ,me debe aparecer dentro de su template en la parte superior izquierda, pero si es de 26 al 50 en la parte inferior derecha(inner.html)

5.adicional de el ejercico crear un archivo que se llama derechos.html :contiene su foto y al frente tener primer nombre y primer apellido,debajo de el la palabra mi blog y al momento de ser oprimido mediante un blank aparece su blog.(table)

Indicacion: todos los titles deben tener el nombvre de el proyecto”proyecto decimo b”

Después de la fecha el docente indicó lo siguiente en la web:

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.

miércoles, 1 de marzo de 2017

(CLASE Nº5)

En la primera hora de clase nos dirigimos a la sala de informática y allí conformamos los grupos de trabajo para el proyecto y el docente explico las pautas para el trabajo.

GRUPO DE TRABAJO: (Nº3)
-Karen Villamizar.
-María García.
-Daniel Camacho.
-Nicolas Toledo.
-Silvia Gonzalez.

En la segunda hora socializamos las dudas con el docente acerca de las publicaciones en la pagina web y explico estas.

Bootstrap jQuery Modal

Las ventanas modales de Twitter Bootstrap se crean usando un plugin de jQuery personalizado. Se puede usar para crear ventanas modales para enriquecer la experiencia del usuario o para añadir funcionalidad a los usuarios.

En este artículo vamos a explicar como disponer de ventanas modales de Twitter Bootstrap Modals.

En nuestro <head> deberemos añadir los estilos de Bootstrap.

<link href="bootstrap.css" rel="stylesheet">

La ventana ya presenta una visualización bastante buena pero podemos cambiarla editando la hoja de estilos.

En nuestro <body> necesitaremos crear un link que abrirá la ventana:

<a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Abrir ventana modal</a>

Ahora tendremos justo debajo el código que representa la ventana en display:none.

<div id="example" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a data-dismiss="modal" class="close">×</a>
        <h3>Cabecera de la ventana</h3>
     </div>
     <div class="modal-body">
         <h4>Texto de la ventana</h4>
        <p>Mas texto en la ventana.</p>                
    </div>
    <div class="modal-footer">
        <a href="index.html" class="btn btn-success">Guardar</a>
        <a href="#" data-dismiss="modal" class="btn">Cerrar</a>
    </div>
</div>

Y finalmente solo faltará incluir los scripts antes de la etiqueta de cierre </body>:

<script src="jquery.js"></script>
<script src="bootstrap-modal.js"></script>

Ver más documentación

Ver ejemplo en funcionamiento

TOMADO DE: https://www.jose-aguilar.com/blog/bootstrap-modal/

CRONOGRAMA PRIMER BIMESTRE

miércoles, 22 de febrero de 2017

VENTANAS EMERGENTES Y VENTANAS MODAL. (CLASE Nº4)

-Este día realizamos una evaluación escrita sobre innerhtml la respuesta era la siguiente :
<script>
document.getElementById("rta").innerHTML=rta;
</script>

Las ventanas emergentes

Las ventanas emergentes o popups son esas ventanas que aparecen de forma automática sin que el usuario las haya solicitado. Su contenido suele ser de tipo publicitario y no tienen un tamaño fijo, aunque lo más habitual es que no ocupen la totalidad de la pantalla.

Aunque cada vez van siendo menos usadas, debido principalmente a los sistemas de bloqueos y restricciones que posibilitan los propios navegadores, conviene conocer precisamente el sistema de protección que tenemos ante estos elementos emergentes que la mayoría de las veces son involuntarios para el usuario.

En cuanto a su forma de presentarse, aunque se utilice la denominación general de ventanas emergentes, pueden ser:

Emergentes: Se presentan en primer plano superponiéndose a la ventana activa. Su contenido suele ser principalmente publicitario y su uso suele ser muy abusivo.

Sumergidas: En este caso aparecen bajo la ventana principal y pueden ser bastante más peligrosas que las emergentes, ya que la función publicitaria no parece que se ajuste a esta forma de presentación y en algunos casos pueden llevar códigos ocultos destinados a escribir cookies u otras funciones de control.

TOMADO DE:

http://www.ite.educacion.es/formacion/materiales/157/cd/m2_1_navegacion/las_ventanas_emergentes1.html

EJERCICIO EN CLASE:

<html>

<head>

<title>emergente</title>

</head>

<body>

<a href="" onclick='javascript:window.open("pagina.html","miventana","width=300,height=200,menubar=no,top=130,left=930")'>Abrir</a>

</body>

</html>

Cómo hacer una simple ventana modal con HTML y Javascript

Según se afirma en la Wikipedia, la aparición de Lightbox animó a otros desarrolladores a crear proyectos similares, como el popular Thickbox, basado en jQuery. Lightbox y sus descendientes son aplicaciones escritas en Javascript que hacen un uso intensivo del DOM para mostrar contenido web de forma modal y visualmente atractiva. Andrés Nieto ha recopilado en su página más de veinte de esos proyectos.

Si bien es cierto que no hay que estar inventando la rueda todos los días, porque ya alguien lo hizo por nosotros, hay circunstancias en las que necesitamos una rueda hecha a medida. Por eso, saber cómo se han hecho otras ruedas puede sernos útil para hacer la nuestra.

A continuación explicaré los elementos básicos que necesitamos para hacer una rueda, perdón, una simple ventana modal con HTML y Javascript…

Primero necesitamos un contenedor, un espacio donde ubicar el contenido web que deseamos mostrar. Normalmente ésto 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. Y por último, necesitaremos también alguna forma de ocultar el contenedor. ¡Manos a la obra!

Pega al final de la sección body de tu 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í pones tu contenido web
</div>

Los atributos más importantes de este 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).

Dentro del DIV deberás colocar el contenido web que deseas mostrar. ¡Procura que quepa dentro del contenedor!

Luego crea un elemento de script en tu código HTML e inserta las siguientes líneas:

function mostrarVentana()
{
    var ventana = document.getElementById(‘miVentana’);
    ventana.style.marginTop = “100px”;
    ventana.style.left = ((document.body.clientWidth-350) / 2) + “px”;
    ventana.style.display = ‘block’;
}

Esta función Javascript obtiene una referencia al contenedor a través de su id, lo coloca en el centro del documento mostrado en el navegador, y lo hace visible.

Por último, agrega éstas líneas de código:

function ocultarVentana()
{
var ventana = document.getElementById(‘miVentana’);
ventana.style.display = ‘none’;
}

Esta función obtiene una referencia al contenedor a través de su id, y lo hace invisible.

Y ya ‘tá.

Con ésto tenemos todos los elementos básicos para hacer una simple ventana modal con HTML y Javascript. A partir de aquí puedes mejorar el proyecto con todo lo que se te ocurra, o simplemente con las funcionalidades que requiera tu proyecto web.

TOMADO DE:

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

VENTANA MODAL SENCILLA SIN JAVASCRIPT

Aunque hay más formas de hacer modales sin necesidad de Javascript, quizá la más cómoda sea mediante el selector :target, un elemento muy olvidado pero muy útil. Gracias a él vamos a decirle a un ‹a› con un ancla en su href que el elemento al que está anclado y oculto se muestre al ejecutarse :target, es decir, que cuando pinchemos en el botón nos muestre la ventanita modal.

Código HTML:

/* El botón */
‹a href=”#modal” title=”” class=”btn”›Pincha aquí‹/a›
/* La modal */
‹div id=”modal”›
   ‹a href=”#cerrar”›‹/a›
   ‹div id=”modalContent”›
      ‹h1›Soy una ventana modal‹/h1›
      ‹p›Hecha sin JS ni jQuery, solo CSS3‹/p›
      ‹a href=”#cerrar”›X‹/a›
   ‹/div›
‹/div›

Código

CSS:

/* Creamos unos estilos para el botón */
.btn{
   position:relative;
   padding:8px 16px;
   font-family:'psychotik';
   font-size:1.2em;
   font-weight:normal;
   color:#fff;
   text-shadow:none;
   border-radius:16px;
   background:#00A6B6;
   box-shadow:inset 2px 2px 1px #007f8b;
}
.btn:hover{
   background:#FF9C00;
   box-shadow:inset 2px 2px 1px #995f02;
}
/* Un bloque que ocupe toda la pantalla y contendrá nuestra modal... */
#modalContent{
   position:absolute;
   top:50%;
   left:50%;
   z-index:6;
   margin:-2% 0px 0px -150px;
   float:left;
   width:300px;
   color:#fff;
   line-height:22px;
   padding:15px;
   border-radius:5px;
   background:#00A6B6;
   border:1px solid #fff;
   box-shadow:0px 2px 1px #999;
}
/* ... los estilos de la ventana central ... */
#modal{
   position:fixed;
   top:0px;
   left:0px;
   z-index:5;
   float:left;
   width:100%;
   height:100%;
   background:rgba(0,0,0,0.2);
   display:none;
   opacity:0;
}
/* ... y un ‹a› transparente que ocupa todo el espacio para poder cerrar la modal desde cualquier punto */
#modal > a{
   position:fixed;
   top:0px;
   left:0px;
   z-index:1;
   float:left;
   width:100%;
   height:100%;
}
El elemento clave, le decimos que cualquier elemento susceptible de absorber esta propiedad, se muestre, o lo que es lo mismo, cuando pulsemos el botón, se ejecutará :target y nos mostrará la modal
:target{
   display:block!important;
   opacity:1!important;
}
/* Un botón de cerrar para no despistar al usuario */
#modalContent > a{
   position:absolute;
   top:-4px;
   right:-4px;
   color:#00A6B6;
   border-radius:2px;
   background:#fff;
   padding:4px;

}

TOMADO DE: http://www.psychotik.net/ventanas-de-alerta-chulas-y-animadas-con-css3/#cerrar

miércoles, 15 de febrero de 2017

EVENTOS Y InnerHTML (CLASE N°3)

Iniciando la clase en sala de informática el profesor nos dio 10 minutos para inscribirnos en el curso de ingles del SENA, luego empezamos tema nuevo:

-Explicación de concepto y tipos de eventos.

-Ejercicio incluyendo todos los temas vistos el año anterior mas InnerHTML.

6.2. Modelo básico de eventos

6.2.1. Tipos de eventos

En este modelo, cada elemento o etiqueta XHTML define su propia lista de posibles eventos que se le pueden asignar. Un mismo tipo de evento (por ejemplo, pinchar el botón izquierdo del ratón) puede estar definido para varios elementos XHTML diferentes y un mismo elemento XHTML puede tener asociados varios eventos diferentes.

El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en inglés de la acción asociada al evento. Así, el evento de pinchar un elemento con el ratón se denomina onclick y el evento asociado a la acción de mover el ratón se denomina onmousemove.

La siguiente tabla resume los eventos más importantes definidos por JavaScript:

Evento	Descripción	Elementos para los que está definido
`onblur`	Deseleccionar el elemento	`<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>`

Los eventos más utilizados en las aplicaciones web tradicionales son onload para esperar a que se cargue la página por completo, los eventos onclick, onmouseover, onmouseout para controlar el ratón y onsubmit para controlar el envío de los formularios.

Algunos eventos de la tabla anterior (onclick, onkeydown, onkeypress, onreset, onsubmit) permiten evitar la "acción por defecto" de ese evento. Más adelante se muestra en detalle este comportamiento, que puede resultar muy útil en algunas técnicas de programación.

Las acciones típicas que realiza un usuario en una página web pueden dar lugar a una sucesión de eventos. Al pulsar por ejemplo sobre un botón de tipo <input type="submit"> se desencadenan los eventos onmousedown, onclick, onmouseup y onsubmit de forma consecutiva.

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

Propiedad de objetos web innerHTML

La propiedad más interesante de los objetos Web a los que podemos acceder, no forma parte del Standard oficial de HTML.

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. Rápidamente el resto de exploradores lo añadieron en su soporte de lenguaje.

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 cuál permite a los programadores definir estilos o bloques de contenido.

Como parámetros a DIV tenemos ID, CLASS y ALIGN, aunque éste ultimo 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: https://manuais.iessanclemente.net/index.php/Propiedad_de_objetos_web_innerHTML

EJERCICIO:

<script>
function sumar(){
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("mirespuesta").innerHTML= a + b;
}

function sumar2(a, b){
document.getElementById("rta").value= a + b;
document.getElementById("mirespuesta").innerHTML= a + b;
}


function restar(){
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("mirespuesta").innerHTML= a - b;
}
function multi(){
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("mirespuesta").innerHTML= a * b;
}


sumar2(32, 2);
</script>


<body>
<div id="mirespuesta">hola</div>
A: <input type="text" id="a"><br>
B: <input type="text" id="b"><br>
RTA: <input type="text" id="rta" readonly ><br>
<input type="button" value="Sumar" onclick="sumar();" ><br>
<input type="button" value="Restar" onclick="restar();" ><br>
<input type="button" value="multiplicar" onclick="multi();" ><br>

</body>

miércoles, 8 de febrero de 2017

CONTINUACIÓN DEL REPASO TEMAS VISTOS EN EL 2016.(CLASE N°2)

-En la primera hora de clase se realiza la actualización de datos en Sofia Plus para aprendices del SENA y se resuelven dudas respecto a las horas SENA, actividades y cursos de inglés en la sala de informática.

-En la segunda hora de clase se recibe información acerca del Pre icfes- Helmer Pardo y luego se hace búsqueda de algunas direcciones por Street View las cuales son enviadas al correo henryferrei@gmail.com.

En la primero hora de clase se realiza la actualización de datos en Sofia Plus para aprendices del SENA.

Karen Villamizar
Karen Capataz
Gustavo Quijano
Mariana Alzate
Paula Medellín
Camila Montoya
Camila Caballero
Maria García

Habilidad 1=100

miércoles, 1 de febrero de 2017

INDUCCION Y PAUTAS PARA EL 2017, REPASO DE LOS TEMAS VISTOS EN EL 2016. (CLASE N°1)

PRIMER BIMESTRE

-El profesor dio la inducción y pautas de trabajo para el año 2017, no estuve presente en esta clase sin embargo me adelante con mi compañera de sala de informática (Karen Capataz) del tema visto, también envié un correo al profesor en el que redacte mi excusa y mi permiso.

-Se trabaja los conocimientos vistos del 2016, se busca complementarlos y posteriormente ampliarlos.

Se realizó un ejercicio de Javascript en Sala

<html>
<head>
function suma() [
var a=parseInt(prompt(“a”))
var b=parseInt(prompt(“b”))
alert(a+b)
]
</head>
<body>
<input type=”button”
onclick=”suma()” value=”oprima”>
</body>
</html>