miércoles, 24 de mayo de 2017

Clase N° 18

Se termina el proyecto.

Duración del proyecto= 5 horas con 2 minutos.

martes, 23 de mayo de 2017

<!DOCTYPE html>



 <html class="no-js"> 
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

<link rel="stylesheet" href="css/custom-styles.css">

<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">

<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>

<script type="text/javascript">
var re= /[^a-zA-ZáéíóúÁÉÍÓÚñÑ ]/;

function BlockChars(){
var OK = re.test(document.getElementById('pasajero').value);
if (OK){
alert("Nombre no valido");
}
else{
if(document.getElementById('pasajero').value!="") caja_pasajero=1;
else caja_pasajero=0;
return caja_pasajero;
}
}

function verificar(){
var fecha1 = document.getElementById('fecha').value;
var hora1 = document.getElementById('hora').value;
var a = document.getElementById('destino').value;
var b = parseInt(document.getElementById('maletas').value);
var c = document.getElementById('aerolinea').value;
caja_fecha="";
if(fecha1!=""){
fecha1=fecha1.split("-");
var fecha_actual = new Date();
if(fecha1[0]>=fecha_actual.getFullYear() && fecha1[1]>=fecha_actual.getMonth() +1 && fecha1[2]>=fecha_actual.getDate()){
caja_fecha=1;
}
else{
caja_fecha="";
alert("Fecha no valida");
}
}
else{
caja_fecha=0;
}

caja_pasajero=BlockChars();

if( caja_pasajero==1 && caja_fecha==1 && hora1!=""){
pasaje();
}
else{
if(caja_pasajero==0 || fecha1=="" || hora1=="" ) alert("Hace falta llenar algun campo");
}
}

function pasaje() {

var a = document.getElementById('destino').value;
var b = parseInt(document.getElementById('maletas').value);
var c = document.getElementById('aerolinea').value;
// body...

if (a=="internacional") {
var vp = 500000;
} else {
var vp = 150000;
}

if (b>3) { var pasaje=(( vp*0.02)*b)+vp;

} else {
if (b>0) {

var pasaje = vp*0.95;

} else {

var pasaje = vp*0.75;
}

}

if (c=="avianca") {

var pasaje = pasaje*0.90;
imagen = '<img size=100px src="img/avianca.png"/>';
document.getElementById("imagen").innerHTML= imagen;

} else {

if (c== "aviatur") {var pasaje = pasaje*0.95;
imagen = '<img size=100px src="img/aviatur.jpg"/>'
document.getElementById("imagen").innerHTML= imagen;
}

else {var pasaje = pasaje*1;
imagen = '<img size=100px src="img/otros.jpg"/>'
document.getElementById("imagen").innerHTML= imagen;}

}

document.getElementById("rta").value = pasaje;
var men = "el precio de su tiquete para vuelo " + a + " es de:"
document.getElementById("men").innerHTML = men;

}

</script>
<body>




<div class="container">

<div class="row-fluid">

<div class="span8 offset2">
<div class="site-header">
<div class="logo">
<h1>EJERCICIO</h1>
</div>
<div class="menu">
<div class="navbar">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="fw-icon-th-list"></i>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="index.html">INICIO</a></li>
<li><a href="DERECHOS.html">DERECHOS</a></li>

</ul>
</div>
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">Services</option>
<option value="#">Work</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>

<table border=0>

<tr>
<td> <font color="white"> Pasajero </font><input type="text" name="pasajero" id="pasajero" autocomplete="off" title="requerido: Letras">
</td>
</tr>
<tr>
<td> <font color="white"> Fecha </font> <input type="date" name="fecha" id="fecha" autocomplete="off"></td>
</tr><tr>
<td><font color="white">Hora </font><input type="time" required name="hora" id="hora" autocomplete="off"> </td>

</tr><tr>
<td><font color="white"> Maletas</font><input type="text" value="0" name="maletas" id="maletas" autocomplete="off"></td>
</tr><tr></font>
<td><select id="aerolinea" autocomplete="off" >
<option value="avianca">avianca</option>
<option value="aviatur">aviatur</option>
<option value="otros">otros</option>

</select></td>
</tr>
<tr>
<td>
<select id="destino" autocomplete="off" >
<option value="nacional">nacional</option>
<option value="internacional">internacional</option>

</select>
</td>
</tr>
<tr>

<td><input type="button" onclick="verificar();" value=" Calcular" title="oprima aca para Calcular el precio de su pasaje">
</td>
</tr>
<tr>
<td><font color="white"> <div id="men"></div>
<input type="text" id="rta" readonly="display:none" ></td> </font>
<td><div id=imagen></div></td>
</tr>
</table>

</div>
</div>
</div>
</div>

<div class="site-footer">
<div class="row-fluid">
<div class="span6 align-right">
<h1>Designed By</h1>
<ul>
<li><a href="http://www.alltemplateneeds.com">www.alltemplateneeds.com</a></li>
<li><a href="http://www.alldesignneeds.com">www.alldesignneeds.com</a></li>
</ul>
</div>
<div class="span6">
<h1>Images From</h1>
<ul>
<li><a href="http://www.wallpaperswide.com">www.wallpaperswide.com </a></li>
<li><a href="http://www.wallcoo.net">www.wallcoo.net</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$('#myCarousel').carousel({
interval: 1800
});
</script>

</body>

</html>

LINK PARA DESCARGAR TODO EL EJERCICIO= http://www.dropbox.com/s/htbeodm6dxvdb2h/proyecto.zip?dl=0

domingo, 21 de mayo de 2017

Mayo 17 /2017

Clase N° 17

Se incia el proyecto, el cual es el siguiente=

viernes, 12 de mayo de 2017

Mayo 10 /2017

Clase N° 16

Se pierde clase a causa de:

EL DÍA E

viernes, 5 de mayo de 2017

Mayo 3 /2017

Clase N° 15

Se realizó una evaluación escrita acerca de los temas vistos en los últimos manuales publicados en http://laweb.coldivinoamor.com/

1) p a span em {text-transform: uppercase;}

2) p, a, span, em {text-transform: uppercase;}

3) ¿Qué máquina modificó Augusta?

4) ¿Cual es la representación de el selector universal?

SOLUCIÓN

1) Modifica poniendo la primera letra de cada palabra en mayúscula a un elemento "em" que este dentro de un span, y este debe estar dentro de un a, que igualmente este dentro de un p.

2) Modifica poniendo la primera letra de cada palabra en mayúscula a todos los elementos que estan especificados. Es decir modifica tanto a p, como a, span y em.

3) La máquina mecánica de de uso general de Charles Babbage, es decir la máquina analítica.

4) Un asterisco (*)

NOTA= se especificó de que forma va a ser realizado el proyecto, y se asignaron los temas para cada base.

martes, 2 de mayo de 2017

EJERCICIO PROPUESTO

CÓDIGO HTML=

<html>
<head><title>Ejercicio Web</title><link rel="stylesheet" href="estilo.css" type="text/css" media="all" /></head>
<body>
<h1 id="titulo_principal">Lorem ipsum dolor sit amet</h1>

<p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse gravida</strong>, metus a scelerisque sollicitudin, lacus velit
ultricies nisl, nonummy tempus neque diam quis felis. <span class="importante">Etiam sagittis tortor</span> sed arcu sagittis tristique.</p>

<h2 id="titulo2">Aliquam tincidunt, sem eget volutpat porta</h2>

<p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a href="https://asgardia.space/en/" target="_blank">Aenean turpis metus, <em>aliquam non</em>, tristique in</a>, pretium varius, sapien. Proin vitae nisi. Suspendisse <span class="destacado">porttitor purus ac elit</span>. Suspendisse eleifend odio at dui. In in elit sed metus pretium elementum.</p>

<table summary="Descripción de la tabla y su contenido">
<caption>Título de la tabla</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="especial">Título columna 1</th>
<th scope="col" class="especial">Título columna 2</th>
</tr>
</thead>

<tfoot>
<tr>
<th scope="col"></th>
<th scope="col">Título columna 1</th>
<th scope="col">Título columna 2</th>
</tr>
</tfoot>

<tbody>
<tr>
<th scope="row" class="especial">Título fila 1</th>
<td>Donec purus ipsum</td>
<td>Curabitur <em>blandit</em></td>
</tr>
<tr>
<th scope="row">Título fila 2</th>
<td>Donec <strong>purus ipsum</strong></td>
<td>Curabitur blandit</td>
</tr>
</tbody>
</table>

<div id="adicional">
<p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac, lorem</span>. Curabitur blandit, eros sed gravida aliquet, risus justo
porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue.</p>

<p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit elit, vehicula vulputate</span>, venenatis in,
posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi feugiat ante, eu congue magna mi non nisl.</p>

<p>Vivamus ultrices aliquet augue. <a href="https://www.nasa.gov/" target="_blank">Donec arcu pede, pretium vitae</a>, rutrum aliquet, tincidunt blandit, pede.
Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut ullamcorper nisi quis mi.</p>
</div>

</body>
</html>

CÓDIGO CSS=

table, tr, th, td {border:1px solid #000; border-collapse:collapse; padding:5px;}

h1#titulo_principal { color: teal; }

strong { color: red; }
span.importante { color: orange; }

h2#titulo2 { color: blue; }

span.desetacado { color: purple; }

a { color: red; }
a em { color: blue; }

a:hover{color: blue;
font-style: italic;}

div#adicional p { color: olive; }
div#adicional span#especial { color: fuchsia; }
div#adicional a { color: green; }

div#adicional a:hover{color: blue;
letter-spacing: 10px;
}

caption { color: blue; }
td { color: green; }
td strong { color: orange; }
th { color: red; }

th.especial { color: orange; }

CAMBIAR EL ESTILO CSS DE UNA WEB DINÁMICAMENTE

Cambiar el estilo CSS de una web dinámicamente. JavaScript

En numerosas ocasiones, varios desarrolladores y/o diseñadores web se han topado con la necesidad de llevar a cabo una adaptación dinámica de estilos en espacios de un sitio Web. Es común encontrar clientes y patrocinadores que deseen mostrar un conjunto estandarizado de información arraigado por distintos estilos, con el objetivo de adaptarse al medio o al momento.

Dichos estilos, generados en base a los patrones de diseño de nuestra elección, se plasmarán en el sitio en algún momento, que será determinado por alguna condición y/o variable establecida previamente, y con ello lograr obtener el dinamismo necesario para desplegar dicha información con distintos patrones de estilo.

Este dinamismo es especialmente útil para aquellos proyectos donde es preciso plasmar varios mensajes en poco espacio, o donde se desea manejar un ambiente más ad hoc a la situación del visitante de nuestro sitio.

El uso de estilos mediante CSS nos permite crear toneladas de trucos ingeniosos y adaptaciones increíbles, especialmente con la incursión de CSS3 ha ido adentrándose en terrenos anteriormente desconocidos para las hojas de estilo, pero como lenguaje en muchas circunstancias su función sigue limitándose a lo estilístico.

Su manejo de dinamismo no ha sido bien adaptado, y es por ello que en esta clase de proyectos es aún recomendable respaldarnos y utilizar un lenguaje como JavaScript, o en su defecto un lenguaje del lado servidor como PHP, que nos permita llevar a cabo el uso de variables dinámicas y condicionamiento.

Cambiar estilos CSS dinámicamente con JavaScript

Mediante JavaScript obtenemos la capacidad de crear funciones que nos regresen resultados basados en operaciones y cálculos, podemos obtener los atributos de los elementos, nos permite manejar clases predefinidas para tomar directamente datos y utilizarlos como condicionales, e incluso nos da la posibilidad de obtener información de APIs o Webservices, para que en base a los datos recibidos podamos cambiar el estilo de nuestro sitio, sin necesidad de usar bases de datos o hosting sofisticado.

Supongamos que hemos sido requeridos para desarrollar una página web o blog donde el color del fondo pueda ser elegido por el usuario. Al incorporar a JavaScript al juego del diseño, esta tarea será tan sencilla de codificar que en menos de lo que esperamos será totalmente funcional.

El primer paso es conocer la estructura que utiliza JavaScript paraa manejar el estilo CSS de todos aquellos elementos que cuentan con una id asignada, a los que llamaremos objetos. Un objeto tendrá varios atributos los cuales podemos llamar adhiriendo un punto al nombre del objeto, seguido del nombre del atributo que queremos obtener o modificar (objeto.atributo), por ejemplo si tenemos un elemento “div” cuyo “id” es “header”, al momento de escribir “header.style” estamos llamando al atributo “style” de dicho elemento.

También podemos mandar llamar con el nombre de la etiqueta del elemento, en el caso del ejemplo anterior, si escribimos “div.style” llamaremos a todos los elementos “div” que se encuentran en nuestro código, dentro de los cuales también se encuentra el “div header”.

Para modificar los atributos de estilo CSS existen dos formas básicas, la primera es recurrir al atributo “style” y la segunda modificar el atributo “class”. En lo personal me inclino más por utilizar la segunda opción pues es más fácil de manejar, controlar y estandarizar el estilo de esa manera.

Como nuestro objetivo es modificar el fondo de toda la página, entonces debemos adaptar la sintaxis para que modifique directamente el elemento “body”, para lo que podemos recurrir al elemento “document” de JavaScript.

Tomando en cuenta todos los factores, la estructura quedará conformada como alguna de las siguientes maneras, “document.body.style.backgroundColor” o “document.body.className=’nombre’”.

Ahora debemos determinar de que manera el usuario podrá elegir el color de fondo, puede ser mediante elementos de formulario como un “select box” donde elija una opción, un campo de texto donde inserte el nombre, o podemos recurrir a un elemento más visual y hacerlo mediante un menú que muestre los colores de fondo disponibles.

Si utilizamos el atributo “style” nuestro código debe quedar estructurado de la siguiente manera:

<html>

<head>

<style>

body    {

background-color: #000000;

color: #FFFFFF;

padding: 20px;

font: 18px Arial, Tahoma;

}

div {

width: 50px;

height: 50px;

border: 1px solid #FFFFFF;

}

</style>

<script>

function cambiar_fondo_con_style(colorsel){

var color = document.getElementById(colorsel).style.backgroundColor;

document.body.style.backgroundColor= color;

}

</script>

</head>

<body>

<p>Da click en un recuadro para cambiar el fondo de la página</p>

<div id = "1" style = "background-color: #999;" onclick = "cambiar_fondo_con_style(id)"></div>

<div id = "2" style = "background-color: #333;" onclick = "cambiar_fondo_con_style(id)"></div>

<div id = "3" style = "background-color: #666;" onclick = "cambiar_fondo_con_style(id)"></div>

</body>

</html>

Agregamos los estilos necesarios para agregar color al cuerpo y letras de la página, así como para darle una medida estándar a los recuadros del menú donde elegiremos el color.

Creamos una función para el cambio dinámico de fondo, a la cual le enviaremos como parámetro el “id” de los recuadros. Dentro de esta función guardamos en una variable de nombre “color” el código que corresponde al color de ese recuadro y finalmente asignamos ese código al fondo del elemento body.

Dicha función será llamada mediante un evento “onclick” agregado en cada elemento “div”, para que al momento de dar click con el puntero del Mouse sobre algún recuadro, automáticamente tome el color de éste como fondo.

Pero si deseamos utilizar class en vez del atributo “style” lo que debemos hacer es estructurar nuestro código de la siguiente manera:

<html>

<head>

<style>

body    {

background-color: #000000;

color: #FFFFFF;

padding: 20px;

font: 18px Arial, Tahoma;

}

div {

width: 50px;

height: 50px;

border: 1px solid #FFFFFF;

}

.fondo1 {

background-color: #999;

}

.fondo2 {

background-color: #333;

}

.fondo3 {

background-color: #666;

}

</style>

<script>

function cambiar_fondo_con_class(id){

document.body.className='fondo'+id;

}

</script>

</head>

<body>

<p>Da click en un recuadro para cambiar el fondo de la página</p>

<div id="1" class ="fondo1" onclick="cambiar_fondo_con_class(id)"></div>

<div id="2" class ="fondo2" onclick="cambiar_fondo_con_class(id)"></div>

<div id="3" class ="fondo3" onclick="cambiar_fondo_con_class(id)"></div>

</body>

</html>

De esta manera nos ahorramos utilizar el atributo dentro de cada elemento y la función de JavaScript queda mucho más limpia.

TOMADO DE= http://www.lawebera.es/como-hacer/ejemplos-css/cambiar-estilo-css-web-dinamicamente-i.php

Informática - Angela Barajas

miércoles, 24 de mayo de 2017

Mayo 24 /2017

Mayo 24 /2017

Clase N° 18

martes, 23 de mayo de 2017

PROYECTO

domingo, 21 de mayo de 2017

Mayo 17 /2017

Mayo 17 /2017

Clase N° 17

viernes, 12 de mayo de 2017

Mayo 10 /2017

Mayo 10 /2017

Clase N° 16

viernes, 5 de mayo de 2017

Mayo 3 /2017

Mayo 3 /2017

Clase N° 15

martes, 2 de mayo de 2017

EJERCICIO PROPUESTO

CAMBIAR EL ESTILO CSS DE UNA WEB DINÁMICAMENTE

Cambiar el estilo CSS de una web dinámicamente. JavaScript

Cambiar estilos CSS dinámicamente con JavaScript

Archivo del blog

Datos personales