Mayo 24 del 2017

0 comentarios
El día de hoy se continuó con el proyecto del periodo.

Por mi parte intenté hacer un código que hiciera lo siguiente:
(Este código no es el del proyecto, es una prueba que yo hice)

Pedir -pasajero
      -hora
      -fecha
      -maleta
      -destino
      -transporte
 Si el destino es departamental, el valor del pasaje es 40.000$, si es nacional es 100.000$

    - Si el número de maletas es mayor a 3, el valor del pasaje aumenta en 2%                       
    - Si el número de maletas es mayor o igual a 1, el valor del pasaje disminuye en 5%    
    - Si el número de maletas es cero, el valor del pasaje disminuye en 2,5%                 


       -Si el transporte es copetran el "total" será el 10% del pasaje, y este "total" se le deberá disminuir al valor del pasaje

       -Si el transporte es berlinas el "total" será el  5% del pasaje, y este "total" se le deberá disminuir al valor del pasaje

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
 <title></title>
</head>

   <script>

 function valorfinal(){

 var d = document.getElementById("destino").value


         if(d == "Departamental"){var pasaje = 40000}
         else {var pasaje = 100000}


var m = document.getElementById("maleta").value


     if (m > 3) { var valorpasaje = pasaje + (pasaje/100)*2}
     else if (m >=1) {var valorpasaje = pasaje - (pasaje/100)*5}
     else {var valorpasaje = pasaje - (pasaje/100)*2.5}
     
  var t = document.getElementById("transporte").value 

   if (t == "Copetran") {var valortotal = valorpasaje - (valorpasaje/100)*10}
   else {var valortotal = valorpasaje - (valorpasaje/100)*5}


  var pasajero = document.getElementById("pasajero").value
  var hora = document.getElementById("hora").value
  var fecha = document.getElementById("fecha").value


 alert("Hola " + pasajero + ".\nCon destino " + d +  " a las " + hora + " con fecha del " + fecha + ".\nCon " + m + " maletas el valor de su pasaje es de: " + valorpasaje + "$. En " + t + " su valor total a pagar es de: \n\n" + valortotal + "$"  )

}

   </script>


<body>

<form action="javascript:valorfinal()">

Pasajero:    <input type="text" size="30" placeholder="Pasajero" id="pasajero" required> <hr>

Hora:        <input type="time" size="30" id="hora" required>  <hr>

Fecha:       <input type="date" size="30" id="fecha" required> <hr>

Maletas:      <input type="number" id="maleta" min="0" placeholder="Número de maletas" required> <hr> 

Destino:<br> <select id="destino" size="2" required>
               <option>Departamental</option>
                  <option>nacional</option>
             </select> <hr>  

Transporte:<br> <select size="2" id="transporte" required>
               <option>Copetran</option>
                  <option>Berlinas</option>
               </select> <hr>             
        
<input type="submit" value="Enviar tiquete">

</form>

</body>

</html>
Mañana se continuará el proyecto en la primera hora de clase.

Publicar un comentario

Mayo 17 del 2017

0 comentarios
El día de hoy se inició el proyecto del segundo bimestre, yo pertenezco al sexto grupo, a nosotros nos corresponde la validación en javascript.

Hoy solo pudo trabajar el primer grupo y un poco el segundo.

A continuación, un ejercicios que realicé en CSS:

El ejercicio consiste en cambiar el diseño de una caja de texto, como se mostrará a continuación:




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cajatexto</title>
</head>

     <style>

     input.hola{border:10px solid #7342AF;
                font-size:25px;
                font-family: Helvetica;
                padding-top:15px; 
                padding-left:10px;
                padding-bottom:15px;
                padding-right:30px;
                border-radius:50px; 
                background:#769FCF;
                background: linear-gradient(left, #769FCF, #265287);
                background: -moz-linear-gradient(left, #769FCF, #265287);
                background: -webkit-linear-gradient(left, #769FCF, #265287);
                background: -o-linear-gradient(left, #769FCF, #265287);
                color:#22343E;
                }

       input.hola:hover
               {
                font-family: Arial;
                padding-top:1px; 
                padding-left:5px;
                padding-bottom:200px;
                padding-right:100px;
                border-radius:5px; 
                background:#206A12;
                background: linear-gradient(left, #206A12, #3EA72A);
                background: -moz-linear-gradient(left, #206A12, #3EA72A);
                background: -webkit-linear-gradient(left, #206A12, #3EA72A);
                background: -o-linear-gradient(left, #206A12, #3EA72A);
                color:#E26209;}

                input.hola:focus
               {
                font-family: Arial;
                padding-top:1px; 
                padding-left:5px;
                padding-bottom:200px;
                padding-right:100px;
                border-radius:5px; 
                background:#206AAF;
                background: linear-gradient(left, #206AAF, #3EA98A);
                background: -moz-linear-gradient(left, #206AAF, #3EA98A);
                background: -webkit-linear-gradient(left, #206AAF, #3EA98A);
                background: -o-linear-gradient(left, #206AAF, #3EA98A);
                color:#E26209;}

/* ___________________________________________________________________________________________________________________________ */
  input.caja
  {
  border: 1px solid #DBE1EB;
  font-size: 18px;
  font-family: Arial, Verdana;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  background: #FFFFFF;
  background: linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -moz-linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -webkit-linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -o-linear-gradient(left, #FFFFFF, #F7F9FA);
  color: #2E3133;
  }
  
 input.caja:hover{
                font-family: Arial;
                padding-top:1px; 
                padding-left:5px;
                padding-bottom:200px;
                padding-right:100px;
                border-radius:5px; 
                background:#206A12;
                background: linear-gradient(left, #206A12, #3EA72A);
                background: -moz-linear-gradient(left, #206A12, #3EA72A);
                background: -webkit-linear-gradient(left, #206A12, #3EA72A);
                background: -o-linear-gradient(left, #206A12, #3EA72A);
                color:#E26209;}


  input.caja:focus
  {
                font-family: Arial;
                padding-top:1px; 
                padding-left:5px;
                padding-bottom:200px;
                padding-right:100px;
                border-radius:5px; 
                background:#406E32;
                background: linear-gradient(left, #406E32, #FF0);
                background: -moz-linear-gradient(left, #406E32, #FF0);
                background: -webkit-linear-gradient(left, #406E32, #FF0);
                background: -o-linear-gradient(left, #406E32, #FF0);
                color:#E26209;
  }

   

/* ___________________________________________________________________________________________________________________________ */


  textarea.caja{border: 1px solid #DBE1EB;
  font-size: 18px;
  font-family: Arial, Verdana;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  background: #FFFFFF;
  background: linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -moz-linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -webkit-linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -o-linear-gradient(left, #FFFFFF, #F7F9FA);
  color: #2E3133;}

textarea.caja:hover
               {
                font-family: Arial;
                padding-top:1px; 
                padding-left:5px;
                padding-bottom:200px;
                padding-right:100px;
                border-radius:5px; 
                background:#206A12;
                background: linear-gradient(left, #206A12, #3EA72A);
                background: -moz-linear-gradient(left, #206A12, #3EA72A);
                background: -webkit-linear-gradient(left, #206A12, #3EA72A);
                background: -o-linear-gradient(left, #206A12, #3EA72A);
                color:#000;}


textarea.caja:focus
               {
                font-family: Arial;
                padding-top:1px; 
                padding-left:5px;
                padding-bottom:200px;
                padding-right:100px;
                border-radius:5px; 
                background:#406E32;
                background: linear-gradient(left, #406E32, #FF0);
                background: -moz-linear-gradient(left, #406E32, #FF0);
                background: -webkit-linear-gradient(left, #406E32, #FF0);
                background: -o-linear-gradient(left, #406E32, #FF0);
                color:#E26209;}

  
     </style>

<body>

<center><input type="text" class="hola" placeholder="HOLAAAAAAAAA"></center>
<hr>



 <input type="text" class="caja" size="30" placeholder="Input Text"> 
 <br>
 <textarea cols="25" rows="10" class="caja" placeholder="Textarea"></textarea>


</body>

</html>






Publicar un comentario

Mayo 10 del 2017

0 comentarios
El día de hoy no hubo clase de informática debido al día E.

La próxima clase se dará inicio al proyecto del bimestre, en el cual yo junto con otros 3 compañeros seremos la base del digitador, este es quien escribe todo el código, y nosotros somos su apoyo. El tiempo dado para el proyecto serán 4 horas de clase, el día 17 y el 24 de mayo. 








Publicar un comentario

Mayo 03 del 2017

0 comentarios
El día de hoy se realizó evaluación individual y escrita, mi nota fue 100 ya que tenía hecho un ejercicio dejado el fin de semana.

Se hizo la introducción al proyecto de este periodo, en el que todo el grado 10-B será un equipo.

A continuación, el ejercicio dejado el fin de semana:


El objetivo era recrear lo más parecido posible la anterior imagen.

Este es el código HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<link rel="stylesheet" type="text/css" href="estiloej2-03-05-2017.css">

<h1>Titulo</h1><br>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. <a class="crojo">Ut enim ad minim veniam,</a>
     quis nostrud <a class="camarillo">exercitation ullamco laboris</a> nisi ut aliquip.
<br>
<h2>Subtitulo</h2>

     Lorem ipsum dolor sit amet, <span class="hola">consectetur <span class="adios">adipisicing</span> elit, sed do eiusmod
     tempor</span> incididunt ut labore et dolore <span class="morado">magna aliqua. Ut enim ad minim</span> veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip.

<br><hr><br>

<table >
<caption>Titulo de la tabla</caption>
<tr>
<td></td>
<td class="uno">Titulo columna 1</td>
<td class="uno">Titulo columna 2</td>
</tr>

<tr>
<td class="uno">Titulo fila 1</td>
<td>Lorem ipsum dolor </td>
<td>Lorem <span>ipsum</span> dolor </td>
</tr>

<tr>
<td class="dos">Titulo fila 2</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor </td>
</tr>

<tr>
<td></td>
    <td class="dos">Titulo columna 1</td>
<td class="dos">Titulo columna 2</td>
</tr>


</table>

<br><br>

<hr>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud <span>exercitation ullamco laboris nisi ut aliquip.</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip.<br><br>

     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip.<br><br>

     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore <span class="chao">magna aliqua. Ut enim ad minim</span> veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>


</body>

</html>

El siguiente es el CSS:

h1{color:#38DB47;
   text-decoration: blink}

.crojo {color:#F00;
  font-weight:700;
  text-decoration: none}

.camarillo{color:#EACF20;}

h2{color:#14507A;}

span.hola{color:red;
  text-decoration: underline;}

span.adios{color:blue;
       font-style: italic; }

.morado{color:#D03FD5;}

span{color:purple;}

table, tr, td {border: 1px solid black;
      border-collapse: collapse;
      padding-bottom:7px;
     padding-top:7px; 
     padding-left:7px;
     padding-right:7px; }

caption{color:blue;}

td{color:#28B73E;
   font-weight: 600}

td.uno{font-weight:700;
       color:#EACF20;}

td.dos{font-weight: 700;
       color:red;}

td div{font-weight: 600;
       color:#EACF20;}

td span{font-style: italic;
        color:#28B73E;} 

div{color:#ACD53F;}

div span{color:#F413DD;}     

span.chao{color:#5C951B;
      text-decoration: underline; }





Publicar un comentario