Contador de visitas

Redes Sociales

martes, 21 de marzo de 2017

Marzo 15 del 2017

  17:28    

PROYECTO DE AULA.

El profesor nos puso a hacer un trabajo combinando la ventana modal, ventana emergente, en un template. 
mi grupo fue: 
-Silvia Lara.
-Juan Londoño.
-Daniel Almeida.
-Paula Gonzalez.
- y yo Juan David.



Lo anterior, fue el archivo index del proyecto de informática de lo que hablé anteriormente. A continuación, fotos de la parte del ejercicio que desarrollamos mi grupo y yo.



  No Comments

miércoles, 15 de marzo de 2017

Marzo 8 del 2017

  6:21    

PROYECTO:

<html>
<head>
<title>Proyecto_grupo02_10a</title></head></html></head>
<h2><a href="VENTANA MODAL Y CAJA DE TEXTO.html">Volver</a><h2>
<body background="banner.jpg">
</body>
<script>
function verificar(){
var dia=document.getElementById("semana").value;
var caja=document.getElementById("valor").value;
if(caja.length!=0 && dia!=""){
if(!isNaN(caja)){
  
  if(caja<=30 && caja>=1){

    if(dia=="Lunes" || dia=="Miercoles" ){
      
      if(caja%2==0){      

       // alert("Puede transitar (arriba-izquierdo).");
    var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
      ventana.style.top = "0px"; // Definimos su posición vertical. La ponemos fija para simplificar el código
      ventana.style.left = "5px"; // Definimos su posición horizontal
      ventana.style.display = 'block'; // Y lo hacemos visible
      document.getElementById("mensaje1").innerHTML="Puede transitar ";
      document.getElementById("titulo").innerHTML=dia+"-Numero par";
      }
    
      else{
      //  alert("No puede transitar (abajo-izquierdo).");
    var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
      ventana.style.top = "70%";
      ventana.style.bottom = "0px"; // Definimos su posición vertical. La ponemos fija para simplificar el código
      ventana.style.left = "2px";
      ventana.style.display = 'block'; // Y lo hacemos visible
    document.getElementById("mensaje1").innerHTML="No puede transitar ";
    document.getElementById("titulo").innerHTML=dia+"-Numero impar";
      }

    }    

    if(dia=="Martes" || dia=="Jueves" ){
      
      if(caja%2==0){      

       // alert("Puede transitar (arriba-derecho).");
    var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
      ventana.style.top = "0px"; // Definimos su posición vertical. La ponemos fija para simplificar el código
    ventana.style.left = "73%"; 
      ventana.style.right = "0px"; // Definimos su posición horizontal
      ventana.style.display = 'block'; // Y lo hacemos visible
    document.getElementById("mensaje1").innerHTML=" Puede transitar ";
    document.getElementById("titulo").innerHTML=dia+"-Numero par";
      }
    
      else{
        //alert("No puede transitar (abajo-derecho).");
    var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
    ventana.style.top = "70%";
      ventana.style.bottom = "0px"; // Definimos su posición vertical. La ponemos fija para simplificar el código
    ventana.style.left = "73%"; 
      ventana.style.right = "0px"; // Definimos su posición horizontal
      ventana.style.display = 'block'; // Y lo hacemos visible
    //ventana.style.position = 'absolute';
    document.getElementById("mensaje1").innerHTML="No puede transitar ";
    document.getElementById("titulo").innerHTML=dia+"-Numero impar";
      }

    }    
  }

  else{
    alert("El numero  no esta entre 1 y 30");
  }

}

else{
    alert("No es un numero (no usar caracteres diferentes a numeros)");
  }

}
else{
  alert("Le hace falta completar una casilla");
}

document.getElementById("semana").value="";
document.getElementById("valor").value="";
}

function ocultarVentana()
{
  //document.getElementById("reproductor").innerHTML="";
    var ventana1 = document.getElementById('miVentana'); // Accedemos al contenedor
    ventana1.style.display = 'none'; // Y lo hacemos invisible
}
</script>
<body>
<!--<div id="capa">-->
<div id="miVentana" style="position: fixed; width: 400px; height: 200px; top: 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" id="titulo"></div>
 <p style="padding: 5px; text-align: justify; line-height:normal" id="mensaje1"></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>      
<!--</div>-->
<div class="content">
  <div id="header">
    <div class="title">
    </div>
  </div>
  <div id="main">
    <div class="center">
      <p>
    <br><br><br><br><br><br><br>
    <center><font color="blue">Seleccione un dia de la semana</font><select name="semana" id="semana">
    <option value="" selected>Seleccione una opci&oacute;n</option>
    <option value="Lunes">Lunes</option>
    <option value="Martes">Martes</option>
    <option value="Miercoles">Miercoles</option>
    <option value="Jueves">Jueves</option>
      </select>
     </p>
    
     <font color="blue">Escriba la fecha (1-30)</font><input type="text" name="valor" id="valor" autocomplete="off">
     <br><br>
     <button type="button" onclick='verificar()' >Oprimir aqui</button></center>
      
     
      <br />
</body>
</p>
</html>

  No Comments

lunes, 13 de marzo de 2017

Marzo 8 del 2017

  18:57    

FUNCIONES.

             <sccript>
             function sumar ( ){
             var a=ParseInt (prompt ("a"));
             var b= ParseInt (prompt ("b"));
                    alert (a+b);
             }    </script> 
             <body>
             <imput type = "button"
                        value = "oprimir"
                        onclick = "sumar ( )">
             <img src ="_" onclick = "sumar( )"></body>


STREET VIEW: Visualiza calles.
GOOGLE MAPS: Visualiza el mapa.

FUNCIÓN EXTERNA.

function muestra Mensaje ( ) {
alert (´Gracias por pinchar´);
}
<imput type ="button" value ´pinchar y veras´)}
onclick = "Muestra mensaje ( )"/>

  No Comments

martes, 7 de marzo de 2017

Marzo 1 del 2017

  17:16    

Bootstrap


El plug-in Modal es una ventana de cuadro de diálogo / emergente que aparece en la parte superior de la página actual.

Tip: Los complementos pueden ser incluidos de forma individual (usando "modal.js" de rutina de carga de archivos individuales), o todos a la vez (utilizando "bootstrap.js" o "bootstrap.min.js").

Tamaño modal


Cambiar el tamaño de la modal mediante la adición de la .modal-sm clase de los pequeños modales o  .modal-lgla clase de grandes modales.
Agregue la clase de tamaño al <div>elemento con la clase .modal-dialog
El "contenido modal" parte:
El <div>con class="modal-content"estilos modal (borde, color de fondo, etc.). Dentro de esta <div>, añadir el modal de encabezado, cuerpo y pie de página.
La .modal-headerclase se utiliza para definir el estilo de la cabecera de la modal. El <button>interior de la cabecera tiene un data-dismiss="modal"atributo que cierra el modal si hace clic en él. La .closeclase estilos El botón de cierre, y los .modal-titleestilos de clase de la cabecera con una línea de altura adecuada.
La .modal-bodyclase se utiliza para definir el estilo para el cuerpo de la modal. Añadir cualquier tipo de código HTML aquí; párrafos, imágenes, vídeos, etc.
La .modal-footerclase se utiliza para definir el estilo del pie de página de la modal. Tenga en cuenta que esta zona está alineado a la derecha de forma predeterminada.
El "modal" parte:
El padre <div>de la modal debe tener un ID que es el mismo que el valor del atributo de destino de los datos utilizados para activar la modal ( "myModal").
La .modalclase identifica el contenido de <div>como modal y trae enfoque a la misma.
La .fadeclase añade un efecto de transición que se desvanece el referente dentro y fuera. Eliminar a esta clase si no desea este efecto.
El atributo role="dialog"mejora la accesibilidad para las personas que utilizan lectores de pantalla.

La .modal-dialogclase define la anchura apropiada y el margen de la modal.

¿Que son ventanas modales?


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

  

  No Comments