blog-infor

Pautas del proyecto:

Realizar una pagina con la pestaña del inicio y derechos.

La pestaña de inicio debe tener:

Una caja de selección que de a elegir los días de lunes a jueves.

Una caja de texto validada para que se coloquen números del 1 al 30

Hacer los if correspondientes.

Al darle al botón de submit debe aparecer una mensaje en el lugar indicado según el if.

Día de entrega: 15 de marzo.

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.

Images

01/03/2017

código de ventanas modales y ventanas emergentes

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

tambien:

<html>
<head>
<title>hinojosachapel.com | Una simple ventana modal con HTML y Javascript</title>
<script type="text/javascript">
function mostrarVentana()
{
var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
  ventana.style.marginTop = "100px"; // Definimos su posición vertical. La ponemos fija para simplificar el código
  ventana.style.marginLeft = ((document.body.clientWidth-350) / 2) + "px"; // Definimos su posición horizontal
  ventana.style.display = 'block'; // Y lo hacemos visible
}

function ocultarVentana()
{
var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
ventana.style.display = 'none'; // Y lo hacemos invisible
}
</script>
</head>
<body>
Haz click <a href="javascript:mostrarVentana();">aquí</a>
<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;">
<div style="font-weight: bold; text-align: left; color: #FFFFFF; padding: 5px; background-color:#006394">Título de la ventana</div>
<p style="padding: 5px; text-align: justify; line-height:normal">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum a est. Suspendisse vehicula, nisl vitae molestie pulvinar, eros nunc volutpat neque, sit amet ultricies nulla sem at ipsum.</p>
<div style="padding: 10px; background-color: #F0F0F0; text-align: center; margin-top: 44px;">
<input id="btnAceptar" onclick="ocultarVentana();" name="btnAceptar" size="20" type="button" value="Cerrar Ventana" />
</div>
</div>
</body>
</html>

Images

cronograma primer periodo

Images

Feb-22-2017

Ventanas modal sencillas 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;
}

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

Images

15-02-2017

inner.html

eventos--> el usuario"hace algo" el script responde a la accion generando un resultado

"event handlers"-->"manejadores de eventos"

objetos frecuentes usados:

Evento
onclick

Descripción
Pinchar y soltar el ratón

Evento
onfocus

Descripción
Seleccionar un elemento

Evento
onblur

Descripción
Deseleccionar el elemento

Evento

onkeypress

Descripción
Pulsar una tecla

Evento
onkeydown

Descripción
Pulsar una tecla (sin soltar)

<script type="text/javascript">
function sumar() {
var a= parseInt (document.getElementById("a").value);
var b= parseInt (document.getElementById("b").value);
document.getElementById("rta").value = a + b;
}
function resta() {
var a= parseInt (document.getElementById("a").value);
var b= parseInt (document.getElementById("b").value);
document.getElementById("rta").value = a - b;
}
function multi() {
var a= parseInt (document.getElementById("a").value);
var b= parseInt (document.getElementById("b").value);
document.getElementById("rta").value = a * b;
}

</script>

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="resta" onclick="resta();">
<br>
<input type="button" value="multiplicacion" onclick="multi();">
<br>

</body>

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

Images

08-02-17

En la primera hora de informática el profesor la dio para la inscripción a sofia plus.

en la segunda hora se hizo investigación sobre funciones en javascript y se hizo una actividad que tenia como premio la habilidad 1:

Images

02-01-17

El profesor nos dio una charla de inicio de año y se trabajo un ejercicio con el código funcion:

En programación, una función es un grupo de instrucciones con un objetivo en particular y que se ejecuta al ser llamada desde otra función o procedimiento. Una función puede llamarse múltiples veces e incluso llamarse a sí misma (función recurrente).

Ejercicio de funcion:

<html>
<head><title>2017</head></title>
<body>
<script>
function sumar(){
var a= parseInt(prompt("a"));
var b= parseInt(prompt("b"));
alert(a+b);
} sumar();
</script>
</body>
</html>

http://www.alegsa.com.ar/Dic/funcion.php

blog-infor

Marzo 8 de 2017

PROYECTO INFORMÁTICA

01/03/2017

cronograma primer periodo

Feb-22-2017

15-02-2017

08-02-17

02-01-17

contador de visitas

Popular Posts

Acerca de mí

Archivo del Blog