DIA CIENTO VEINTICINCO 10/12/2014

Hoy ha sido un día un poco diferente, que tampoco está mal. En programación seguimos con ejercicios pero, además, fuimos a la escuela taller después del descanso a formatear los ordenadores portátiles y a instalar Ubuntu en los de sobremesa. Fue una experiencia interesante ya que sabía que se podía cambiar el sistema operativo instalando otro o incluso tener dos en un pc, pero no lo había hecho hasta ahora.
En diseño tube un pequeño percance con el illustrator y el cartel había desaparecido, de hecho he perdido gran parte del trabajo que había hecho, pero por suerte había guardado un pdf, no con todo, pero algo se ha podido salvar.

DIA CIENTO VEINTICUATRO 09/12/2014

Hoy, ya finalizado el puente, hemos vuelto a la rutina.
En programación hemos estado resolviendo diversos ejercicios de javaScript y, en diseño, seguimos con el cartel. Yo por mi parte, no le he dado por finalizado completamente ya que hay que hacer una prueba de impresión, pero quedará más o menos así.
En programación, además, nos hemos descargado el Ubunto y grabado en un dvd

DIA CIENTO VEINTITRES 5/12/2014

Hoy hemos continuado en programación con otro ejercicio similar al de ayer, pero con isNaN en este caso. Era bastante simple, introducías un número y te decía si era cierto que no era un número o si era falso, luego con dos botones más introducíamos en cada uno un dato, en uno un dato numérico y en el otro uno de texto para de nuevo obtener respuesta a lo mismo. Finalmente, un botón de reset borraba el resultado.
En diseño hemos visto la guía de diseño web, acerca de la importancia de los márgenes etc para la composiciónd e páginas web, más o menos basado en repasar conceptos anteriores ya que no quedaron del todo interiorizados. Nos dividimos en grupos además para mirar distintas secciones en la composición web y explicamos cada uno buscando ejemplos de páginas web que guardaran estos criterios y aquellas que estaban mal diseñadas según los mismos.

DIA CIENTO VEINTIDOS 4/12/2014

Hoy en diseño gráfico seguimos con los carteles, mi chica arlequin sigue en proceso pero ya va pareciéndose más a lo que busco. En programación hemos vuelto con los ejercicios a resolver a la vez y, en la misma plantilla de ejercicios de estas últimas veces, el primero por el momento,ya está finalizado, queda si acaso ayudar a algún compañero a que lo acabe. Se basaba en una calculadora que, en vez de tener botones donde clicar los números, tenemos tres espacios donde escribir qué número y operador deseamos. Ha llevado trabajo hasta que he comprendido su funcionamiento, luego fue más rápido de finalizar logrando su correcto funcionamiento.
Hoy además nos sacaron del aula para sacarnos fotos todos juntos (menos un compañero que esataba ausente hoy) con el cartel de la Escuela Taller y, además como última noticia, hemos intentado cambiar la estructura física de la clase (disposición de las mesas etc) pero al no ser funcional completamente, hemos vuelto a como estábamos hasta prontas ideas de colocación.

DIA CIENTO VEINTIUNO 03/12/2014

Hoy terminé todos los ejercicios,los cuales ya están subidos al blog, mas aún falta acabar los resúmenes, que se están haciendo eternos porque tenemos dos puntos más que ocupan varios folios, pero ya voy por el último subrayando, queda pasarlo al blog.
En diseño me he volcado en el cartel ya que hay que entregarlo en poco tiempo, lo cuál espero que pueda cumplir con el plazo dado que estoy haciendo un trabajo más elaborado del acostumbrado y el primero ni me convenció el resultado.
En principio había dibujado en illustrator una máscara de cero, con sus plumas etc y en photoshop la pinté con sombras, luces etc, pero cuando fui a montarlo todo en el cartel, no quedaba como creí al principio y, dado que no me estaba gustando porque estaba muy elaborado para un fondo tan vacío, pues lo dejé aparcado.
Lo siguiente que hice, después de buscar muchas fotos y dibujos con los que trabajar y que descarté en seguida ya que no podía integrarlos a mi idea principal, ice yo misma uno en papel, lo escanee, hice calco de imagen con illustrator y, dado el desastroso resultado tuve que unir todos los trazos que quedaron sueltos (que eran casi todos).
Ahora ya tiene mejor aspecto, se nota lo que es el dibujo y, tras romperme mucho la cabeza, sobre todo con la perspectiva y simetría de los ojos (aunque sigo pensando que me quedó un poco biroja la chica) he comenzado a darle color con photoshop.
Hoy además ya nos cedieron nuestras compañeras la cafetera que tenían en el taller y, como última noticia del día, también tuvimos una reunión del equipo wiki para hablar sobre los contenidos que quedan por subir y Alberto propuso una idea de subir archivos de código en el contenido.

CALCULADORA EN JS

Visualización

Explicación

Se trata de una calculadora realizada en la web con elementos html js y css completamente funcional, que actúa como una de sobremesa, con la diferencia,a demás, que se puede clicar y mover por la página al antojo del usuario, a parte de hacerla aparecer y desaparecer clicando los botones.

HTML

<!DOCTYPE html>

<html lang="es">

  <head>

    <title>Calculadora</title>

    <meta  content="text/html; charset=iso-8859-1">

    <meta name="Description" content="Una caqlculadora elaborada con javascript">

    <LINK REL="stylesheet" HREF="calculadora.css" TYPE="text/css">

    <SCRIPT  src="jquery-1.10.2.js"></script>

    <script src="jquery-ui.js"></script>

  <script src="main.js"></script>

  <scriptsrc="jquery-1.9.0.js"></script>

  <script>

  $(function() {

    $( "#draggable" ).draggable();

  });

 

 $(document).ready(function(){

  $('.fade').click(function(){

   $('#contenido').toggle('fade',1500); 

  });

  $('.explode').click(function(){

   $('#contenido').toggle('explode',1500);

  });

 });

 </script>

  </head>

  <body>

  <div><button class="fade">Desvanecer</button><button class="explode">Explotar</button></div>

  

  <div  id="draggable">

  <div id="contenido" style="display:none;">

<FORM id="calculadora"  NAME="Calc">

 

 

<input class="escribir" type="text" name="dato" value=0 readonly="readonly" name="ver"/>

<img class="imagen1" src="8.png" alt="numero8">

<img class="imagen2" src="4.png" alt="numero4">

<table>

<tr>

<th><INPUT class="teclas" TYPE="button" NAME="1" VALUE=" 1 " OnClick="Calc.dato.value += '1'"></th>

<th><INPUT class="teclas" TYPE="button" NAME="2" VALUE=" 2 " OnCLick="Calc.dato.value += '2'"></th>

<th><INPUT class="teclas" TYPE="button" NAME="3" VALUE=" 3 " OnClick="Calc.dato.value += '3'"></th>

<th><INPUT class="operador" TYPE="button" NAME="+" VALUE=" + " OnClick="Calc.dato.value += ' + '"></th>

</tr>

<tr>

<th><INPUT class="teclas" TYPE="button" NAME="4" VALUE=" 4 " OnClick="Calc.dato.value += '4'"></th>

<th><INPUT class="teclas" TYPE="button" NAME="5" VALUE=" 5 " OnCLick="Calc.dato.value += '5'"></th>

<th><INPUT class="teclas" TYPE="button" NAME="6" VALUE=" 6 " OnClick="Calc.dato.value += '6'"></th>

<th><INPUT  class="operador"  TYPE="button" NAME="-" VALUE=" - " OnClick="Calc.dato.value += ' - '"></th>

</tr>

<tr>

<th><INPUT class="teclas" TYPE="button" NAME="7" VALUE=" 7 " OnClick="Calc.dato.value += '7'"></th>

<th><INPUT class="teclas" TYPE="button" NAME="8" VALUE=" 8 " OnCLick="Calc.dato.value += '8'"></th>

<th><INPUT class="teclas" TYPE="button" NAME="9" VALUE=" 9 " OnClick="Calc.dato.value += '9'"></th>

<th><INPUT  class="operador"  TYPE="button" NAME="*" VALUE=" x " OnClick="Calc.dato.value += ' * '"></th>

</tr>

<tr>

<th><INPUT class="botoncillo" class="limpiar" TYPE="button" NAME="limpiar" VALUE=" c " OnClick="Calc.dato.value = ''"></th>

<th><INPUT class="teclas"TYPE="button" NAME="0" VALUE=" 0 " OnClick="Calc.dato.value += '0'"></th>

<th><INPUT class="botoncillo" TYPE="button" NAME="=" VALUE=" = " OnClick="Calc.dato.value = eval(Calc.dato.value)"></th>

<th><INPUT  class="operador" TYPE="button" NAME="/" VALUE=" / " OnClick="Calc.dato.value += ' / '"></th>

</tr>

</table>

</FORM>

</div>

</div>

</body>

</html>

CSS

body {

font-family: sans-serif; 

text-align:center;

}

#calculadora { 

font: bold 14px Arial,sans-serif;

background-color: #9DD2EA; 

border-radius: 3px;

height: 500px;

padding: 20px;

width: 302px;

position: relative;

top:300px;

left:300px;

}

.teclas{ 

background-color: #FFFFFF;

border-radius: 3px;

color: #888888;

cursor: pointer;

    float: left;

height: 36px; 

line-height: 0px;

margin: 0 7px 11px 0; 

text-align: center;

transition: all 0.4s ease 0s; 

width: 66px;

border:0px;

font: bold 14px Arial,sans-serif;

}

.operador { 

background-color: #FFDAB9;

margin-right: 0; 

border-radius: 3px;

width: 66px;

height: 36px;

line-height: 0px;

border:0px;

margin: 0 7px 11px 0; 

font: bold 14px Arial,sans-serif;

cursor: pointer;

}

.escribir{

text-align:right;

width: 200px;

height: 50px;

border-radius: 3px;

border:0px;

background-color: #E0F8E0;

font: bold 14px Arial,sans-serif;

}

.botoncillo{

background-color: #F3F781;

margin-right: 0; 

border-radius: 3px;

width: 66px;

height: 36px;

line-height: 0px;

border:0px;

margin: 0 7px 11px 0; 

font: bold 14px Arial,sans-serif;

cursor: pointer;

}

table{

  

      width:320px;

      height:320px;

      margin-top: 50px;

      padding-right:300px;

   

}

.imagen1{

position: absolute;

top:440px; 

left: 150px;

}

.imagen2{

       position: absolute;

top:80px; 

}

.teclas:hover {

    background: #F2F5A9 ;

}

.botoncillo:hover {

    background: #F2F5A9 ;

}

.operador:hover {

    background: #F2F5A9 ;

}

#draggable {

width: 302px;

height: 500px; 

padding: 0.5em;

border:1px;

}

#contenido{

border-radius: 20px;

height: 500px;

opacity: 0.9;

display:none;

 

}

JS

No lo adjunto, por ser excesivamente largo, pero se puede encontrar en éstas páginas

http://codigos-taz.blogspot.com.es/2013/02/efecto-aparecer-y-desaparecer-un-div.html

http://codigos-taz.blogspot.com.es/2013/02/efecto-aparecer-y-desaparecer-un-div.html

EJERCICIO FOR DE JS

Enunciado

• -Programa que muestre un menú y que se salga al pulsar cancelar en una ventana tipo confirm es como un prompt va asignada a una variable. El menú da 4 opciones, suma, resta, multi y división. En cada opción del switch se llamará a una función que pedirá 2 números y hará la cuenta y devolverá el resultado con return. Por lo tanto la llamada a la función estará asignada a una variable que luego mostraremos antes de llegar al break del case correspondiente con un alert. En resumen 5 funciones, una con el menú y otras 4 para las operaciones que devolverán el resultado a la función del menú.

Mi código

HTML

<!DOCTYPE html>

<html lang="es">

  <head>

    <title>Maratón de JavaScript</title>

    <meta  content="text/html; charset=iso-8859-1">

    <meta name="Description" content="descripción de la página">

    <LINK REL="stylesheet" HREF="prueba.css" TYPE="text/css">

    <SCRIPT language=javascript src="prueba.js"></script>

  </head>

  <body>

  <h1>Maratón de JavaScript</h1>

  <img class="trebol" src="suerte.png" alt="Trebol" />

  <h2>Nombre y apellidos</h2>

  <h2>Melani Abascal</h2>

  <h3>Números</h3>

  <div class="caja1"><br/>

  <img class="julio" src="unnamed.jpg" alt="Julio" onclick="ope()"/>

  </div>

  <h3>Cadenas</h3>

  <div class="caja2">

   

  </div>

  </body>

</html>

JS

 var num1,num2,a,ope,opcion

function ope(){

//Declaramos que muestre el mensaje booleano para continuar o no

do{

opcion=confirm('¿Deseas realizar operaciones?','')

if (opcion==false){

window.alert("Fin de programa")

//Esta función ya existe de forma predeterminada, no hace falta crearla, y es la que cerrará finalizando el programa en caso de pulsar cancelar, es decir, devolver un false

ventana_secundaria.close()

}

//Mostramos el menú y pedimos los números

ope=prompt('Estas son las opciones a realizar, escoge la de tu agrado: \n 1) Suma \n 2) Resta \n 3)Multiplicación \n 4) División','')

ope=parseInt(ope)

num1=prompt('Introduce el primer número','')

num2=prompt('Introduce el segundo número','')

num1=parseFloat(num1)

num2=parseFloat(num2)

switch(ope){

case 1:

//En cada caso llamamos a otra función que se encargará de operar y devolver el resultado 

resultado=suma()

break

case 2:

resultado=resta()

break

case 3:

resultado=multi()

break

case 4: 

resultado=divi()

break

default:

//Por si se introduce un número no perteneciente al menú

window.alert("El número no pertenece a ninguna opción de este menú")

}

//Mostramos el resultado

window.alert("El resultado es :" +a)

}while(opcion!=false)

}

function suma(){

a=num1+num2

return a

}

function resta(){

a=num1-num2

return a

}

function multi() {

a=num1*num2

return a

}

function divi() {

a=num1/num2

return a

}