viernes, 30 de enero de 2015

INTEGRACION DE JS EN PLANTILLAS

Efecto sexy, calendario y hojas cayendo





Explicación:

  • Efecto sexy
Se trata de un efecto que simula una doblez en la página, de la cuál el usuario puede estirar hasta mostrar el código de la página, siendo en realidad esa doblez una imagen con transparencia que se hace más grande.


  • Calendario
Es básicamente lo que se puede apreciar, un calendario. No obstante, en lugar de ser estático se puede buscar la fecha que se desee en él

  • Hojas 
El efecto original eran copos de nieve, pero como son imágenes cayendo, sustituí la idea original con una que casaba mejor con mi plantilla.


Código



<!Doctype html>
<html lang="es"><html>
<head>
<!meta charset="utf-8"/>
<title>Ejercicio css</title>
<style type="text/css">
img { 

  float: top;
  float: left;
  float: bottom;
  border-radius: 15px ;
}

h1{
text-align: center;
font: oblique bold 120% cursive;
font-size: 380%;
color: white; 
margin: 10px;
height: 150px;
text-align: center;
padding: 8px;
width: 80%;
border: transparent;
background: #58D3F7;
border-radius: 15px ;
}
#cssmenu{
height: 200px;
width: 250px;
padding-top: 20px;
padding-right:20px;
font-family: Comic Sans MS;
text-align: left;
float:left;
margin-left: -270px ;
background: #FAAC58;
border-radius: 15px ;
margin-top: 60px;
}
 
li a{ color:#000000; }



#contenedor {
width:1300px; 
border:1px solid #333333;
height: 1500px;
background-color:#FFF8F0;
margin:40px auto; 

border-radius: 15px ;
text-align:left;

}

h2{ font-family: MV Boli; }

#contenido{
float:left;
margin-right: 20px ;
background: #58FAAC;
width: 900px;
border-radius: 15px ;
padding-top: 20px;
padding-right:20px;
padding-left:20px;
padding-bottom:20px;
margin-top: -220px;
margin-left: 300px;
}
#csmenu2{
position:relative;
height: 270px;
width: 275px;
top: 280px;
right:0px;
font-family: Comic Sans MS;
text-align: left;
float:left;
margin-left: -270px ;
background: pink;
border-radius: 15px ;
margin-top: 60px;
}
#contenido img{ margin-top: -35px;
       margin-left: 700px;

}
.centrado{
          margin-left: 500px;
          margin-top: 80px;}
</style>


<!-- Para el efecto despliegue -->

<script type="text/javascript" src="jquery1.3min.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
<script type="text/javascript" src="turn.js"></script>
<script type="text/javascript" src="ajaxcodedisplay.js"></script>
<link rel="stylesheet" href="turn.css">

<!------------------------------->



<script language="JavaScript">

/*
Dynamic Calendar II (By Jason Moon at http://www.jasonmoon.net)
Permission granted to Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

var ns6=document.getElementById&&!document.all
var ie4=document.all

var Selected_Month;
var Selected_Year;
var Current_Date = new Date();
var Current_Month = Current_Date.getMonth();

var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var Current_Year = Current_Date.getYear();
if (Current_Year < 1000)
Current_Year+=1900


var Today = Current_Date.getDate();

function Header(Year, Month) {

   if (Month == 1) {
   Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
   }
   var Header_String = Month_Label[Month] + ' ' + Year;
   return Header_String;
}



function Make_Calendar(Year, Month) {
   var First_Date = new Date(Year, Month, 1);
   var Heading = Header(Year, Month);
   var First_Day = First_Date.getDay() + 1;
   if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
       ((Days_in_Month[Month] == 30) && (First_Day == 7))) {
      var Rows = 6;
   }
   else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
      var Rows = 4;
   }
   else {
      var Rows = 5;
   }

   var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">';

   HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>';

   HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>';

   HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>';

   var Day_Counter = 1;
   var Loop_Counter = 1;
   for (var j = 1; j <= Rows; j++) {
      HTML_String += '<tr ALIGN="left" VALIGN="top">';
      for (var i = 1; i < 8; i++) {
         if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {
            if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {
               HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';
            }
            else {
               HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Day_Counter + '</td>';
            }
            Day_Counter++;    
         }
         else {
            HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';
         }
         Loop_Counter++;
      }
      HTML_String += '</tr>';
   }
   HTML_String += '</table></td></tr></table>';
   cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
   cross_el.innerHTML = HTML_String;
}


function Check_Nums() {
   if ((event.keyCode < 48) || (event.keyCode > 57)) {
      return false;
   }
}



function On_Year() {
   var Year = document.when.year.value;
   if (Year.length == 4) {
      Selected_Month = document.when.month.selectedIndex;
      Selected_Year = Year;
      Make_Calendar(Selected_Year, Selected_Month);
   }
}

function On_Month() {
   var Year = document.when.year.value;
   if (Year.length == 4) {
      Selected_Month = document.when.month.selectedIndex;
      Selected_Year = Year;
      Make_Calendar(Selected_Year, Selected_Month);
   }
   else {
      alert('Please enter a valid year.');
      document.when.year.focus();
   }
}


function Defaults() {
   if (!ie4&&!ns6)
   return
   var Mid_Screen = Math.round(document.body.clientWidth / 2);
   document.when.month.selectedIndex = Current_Month;
   document.when.year.value = Current_Year;
   Selected_Month = Current_Month;
   Selected_Year = Current_Year;
   Make_Calendar(Current_Year, Current_Month);
}


function Skip(Direction) {
   if (Direction == '+') {
      if (Selected_Month == 11) {
         Selected_Month = 0;
         Selected_Year++;
      }
      else {
         Selected_Month++;
      }
   }
   else {
      if (Selected_Month == 0) {
         Selected_Month = 11;
         Selected_Year--;
      }
      else {
         Selected_Month--;
      }
   }
   Make_Calendar(Selected_Year, Selected_Month);
   document.when.month.selectedIndex = Selected_Month;
   document.when.year.value = Selected_Year;
}

</script>


<!-- Para la lupa -->




<!------------------>



</head>
<body  onLoad="Defaults()">
<div id="target"><a href="#" class="codeexample" ></a></div>
<div id='contenedor'>
<img src="libro-abierto.jpg" width="270" height="200" alt="libro">
<h1>CUENTAME UN CUENTO</h1>
<p></p>
<div id='cssmenu'>
<ul>
  <li><a href='https://es-la.facebook.com/notes/juan-carlos-g%C3%B3mez/autovaloraci%C3%B3n-cuento-el-verdadero-valor-del-anillo/10151460096772219'><span>El verdadero valor del anillo</span></a></li>
  <li><a href='http://irenia.blogia.com/2004/042801-elefante-encadenado-jorge-bucay.php'><span>El elefante encadenado</span></a></li>
  <li><a href='http://www.psicoweb.unlugar.com/alas.html'><span>Las alas son para volar</span></a></li>
  <li><a href='http://www.psicoweb.unlugar.com/ranitas.htm'><span>Las ranitas en la crema</span></a></li>
  <li><a href='http://www.psicoweb.unlugar.com/prostibulo.htm'><span>El portero del prostíbulo</span></a></li>
  <li><a href='http://las1001noches.bligoo.es/cuento-el-tesoro-enterrado-jorge-bucay#.U-B0vvl_smk'><span>El tesoro enterrado</span></a></li>
</ul>
</div>
<div id='csmenu2'>
<div id=NavBar style="position:relative;width:286px;top:5px;" align="left">
<form name="when"><table>
<tr>
   <td><input type="button" value="<-- Last" onClick="Skip('-')"></td>
   <td> </td>
   <td><select name="month" onChange="On_Month()">

<script language="JavaScript1.2">
if (ie4||ns6){
   for (j=0;j<Month_Label.length;j++) {
      document.writeln('<option value=' + j + '>' + Month_Label[j]);
   }
}
</script>

       </select>
   </td>
   <td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td>
   <td> </td>
   <td><input type="button" value="Next -->" onClick="Skip('+')"></td>
</tr></table></form></div>
<div id=Calendar style="position:relative;width:238px;top:-2px;" align="left"></div>
</div>

<div id='contenido'>
<h2>Lluvia nocturna</h2>
<p>Era una noche tranquila y oscura, la humedad se podía respirar, incluso palpar. Cerró los ojos para sentir el viento, agudizó sus sentidos para recibir toda la información que le pudiesen transmitir<br>
Cada parte de su cuerpo estaba preparada para percibir la densidad del ambiente, para escuchar el murmullo del viento entre las hojas, aquellos susurros naturales que parecía que en cualquier momento se tornarían en palabras entendibles. Supo a ciencia cierta que iba a llover, todo lo indicaba a pesar de que no podía ver las nubes. <br>
La luna no brillaba aquella noche nubosa, no había ni un recóndito espacio en el cielo que diese esa posibilidad, por lo que el bosque era más sombrío que de costumbre.
De seguro no habría tormenta, el ambiente no tenía para nada esa sensación cálida y esa presión electrificada, en cambio, el agua que se aproximaba podía hasta olerse.
Se apresuró a atravesar el bosque a pesar de que la visibilidad era mínima, esquivando con agilidad felina cada rama, cada arbusto y cada raíz que sobresalía de la tierra. Su habilidad era realmente admirable, pero todo era cuestión de práctica, aquel bosque había formado parte de su infancia y esos recorridos nocturnos siempre fueron habituales
desde el momento en el que perdió su miedo a los lugares oscuros.
A medida que avanzaba, empezó a sentir el disimulado impacto de diminutas y silenciosas gotas en su rostro, la lluvia por fín comenzaba, mas aún no había llegado a su ansiado destino.
Paulatinamente la frecuencia con que descendían las gotas de lluvia fue aumentando a la par que la sensación húmeda de las hojas con las que en ocasiones se rozaba al pasar.
No tardó demasiado en llegar a su claro favorito. Una vez allí, paró un momento para tomar algo de aliento, tras esto y ya colocada en el centro del lugar, cerró los ojos, inspiró profundamente y se dispuso a extender sus brazos, como si fuese a darle un abrazo al viento.
Así dispuesta, comenzó a dar vueltas sobre si misma, girando y girando en una danza silenciosa en mitad de la oscuridad y sintiendo en su piel cada pequeña gota de lluvia y sintiéndose viva como nunca antes.
<br><br>
<h2 style="font-family: MV Boli; font-size: 12pt">Melani</h2>
</p>
<img src="bosque.gif" alt="bosque">
</div>

<img class="centrado" src="hada-libro-gif.gif" alt="hada">


</div>

<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/
  
  //Configure below to change URL path to the snow image
  var snowsrc="images.gif"
  // Configure below to change number of snow to render
  var no = 10;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600; 
  
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }

  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }

  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}

if (ie4up||ns6up){
    snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

</script>




</body>
</html>




Botón loco, botón de imprimir y texto que parpadea




Explicación:



  • Botón loco
El botón naranja situado bajo "Regular places" es imposible de clicar, ya que siempre que se deja el cursor sobre él, se desplaza

  • Botón de imprimir
Siendo realmente una imagen de una impresora la cual es clicable, manda la orden al pc de imprimir la página

  • Texto que parpadea
Aunque en la imagen no es apreciable, el texto de "Bienvenido" cambia de naranja a blanco constantemente


Ésta vez no adjuntaré los archivos sino que sólo colocaré el HTML


Código


<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head><!-- Created by Artisteer v4.0.0.58475 -->
    <meta charset="utf-8">
    <title>Inicio</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="style.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
    <link rel="stylesheet" href="style.responsive.css" media="all">


   <!-- <script src="jquery.js"></script> 
    <script src="script.js"></script>
    <script src="script.responsive.js"></script> -->
<meta name="description" content="Description">
<meta name="keywords" content="Keywords">



<style>.art-content .art-postcontent-0 .layout-item-0 { border-top-width:1px;border-top-style:solid;border-top-color:#957941;margin-top: 5px;margin-bottom: 5px;  }
.art-content .art-postcontent-0 .layout-item-1 { padding-right: 10px;padding-left: 10px;  }
.ie7 .post .layout-cell {border:none !important; padding:0 !important; }
.ie6 .post .layout-cell {border:none !important; padding:0 !important; }

</style>



<script src="include/global.js" type="text/javascript"></script>
<script src="include/prototype.js" type="text/javascript"></script>
<script src="include/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">

a {
font-size: 24px;
color: #C00;
margin: 10px;
}
div#cajatexto {
background-color: #efefef;
padding: 10px;
margin: 10px;
}

div#cajatexto p {
padding: 0;
margin: 0 0 15px 0;
}



</style>

<!--parpadeo-->

<script type="text/javascript">
window.setInterval (BlinkIt, 500);
var color = "orange";
function BlinkIt () {
var blink = document.getElementById ("blink");
color = (color == "#ffffff")? "red" : "#ffffff";
blink.style.color = color;
blink.style.fontSize='36px';}
</script>


<style> HTML,BODY{cursor: url("image.cur"),  url("image .cur"), auto;} </style>

</head>
<body  onLoad="changeIt();" onClick="moveIt();">
<div id="art-main">
<header class="art-header clearfix">


    <div class="art-shapes">
<h1 class="art-headline" data-left="87.51%">
    <a href="#">GoGreen</a>
</h1>
<h2 class="art-slogan" data-left="87.51%">Stay Green When You Travel</h2>

<div class="art-object0" data-left="0%"></div>
<div class="art-textblock art-object557410578" data-left="100%">
        <div class="art-object557410578-text"> </div>
    
</div>
            </div>

                        
                    
</header>
<nav class="art-nav clearfix">
    <div class="art-nav-inner">
    <ul class="art-hmenu"><li><a href="inicio.html" class="active">Inicio</a></li><li><a href="contacts.html">Contacts</a></li></ul> 
        </div>
    </nav>
<div class="art-sheet clearfix">
            <div class="art-layout-wrapper clearfix">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-sidebar1 clearfix"><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Reasons to Travel Green</h3>
        </div>
        <div class="art-blockcontent"><ol><li>In ante  diam lacus eget rutrum ultricies ultricies.  <a href="#">more</a></li><li>Tempus nisi integer fusce primis mattis ligula ante ipsum.  <a href="#">more</a></li><li>Vestibulum ipsum mi.  Netus maecenas sociis. <a href="#">more</a></li><li>Montes sagittis praesent nec ultricies volutpat ut nunc.  <a href="#">more</a></li><li>Sem at pellentesque euismod justo.  <a href="#">more</a></li><li>Mi nunc magna blandit id pulvinar gravida ac lacus egestas quam. <a href="#">more</a></li></ol></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Quick Links</h3>
        </div>
        <div class="art-blockcontent"><p><a href="#">Suspendisse pharetra auctor</a></p><p><a href="#">Nunc a sollicitudin est</a></p><p><a href="#">Lobortis sit purus dapibus nunc at.</a></p><p><a href="#">Tellus nullam pede nunc amet. </a></p><p><a href="#">Fusce eget curae tempus odio. </a></p></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Follow Us</h3>
        </div>
        <div class="art-blockcontent"><p><img width="60" height="60" alt="" src="images/1311950644_facebook.png"><img width="60" height="60" alt="" src="images/1311950637_flickr.png"><img width="60" height="60" alt="" src="images/1311950634_rss.png"></p></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Photo Gallery</h3>
        </div>
        <div class="art-blockcontent"><p><img width="205" height="136" alt="" src="images/shutterstock_12843229.jpg" style="margin:0;"></p></div>
</div></div>
                        <div class="art-layout-cell art-content clearfix"><article class="art-post art-article">
                                
                                                
                <div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-1" style="width: 100%" >
        <div id="blink">Bienvenido</div><p><img width="300" height="200" alt="" src="images/shutterstock_3608177.jpg" style="float:left;"></p><p>Quis sem in tempus ligula mollis suscipit mi ante quam. Posuere phasellus et nec blandit primis sagittis amet  rutrum nunc arcu metus quis tortor diam enim tincidunt.  Nisi morbi ipsum ut quam mi non ante et cursus tincidunt sagittis. Urna leo bibendum odio erat.</p><p>Eget elit id donec metus ante eu et non a quisque leo orci dui eu. Platea sed eu vestibulum adipiscing in metus. Blandit curabitur praesent morbi in non auctor luctus. </p><p><a href="#" class="art-button">Read more</a><br><br><input type="image" src="print.png" onclick="window.print()"></p>
    </div>
    </div>
</div>
<div class="art-content-layout-br layout-item-0">
</div><div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-1" style="width: 100%" >
        <h3>Popular Places</h3><span id="button1" style="position:relative;z-index:10"></span>

<script>

/*
Uncatchable button script by Craig Casey (craig_c_11@hotmail.com)
Featured on JavaScript Kit (http://javascriptkit.com)
For this and over 400+ free scripts, visit http://javascriptkit.com
*/

var btnbgcol="orange"
var fntcol="black"
var ok=(document.getElementById||document.all)?1:0
if (ok)
var cross_el=document.getElementById? document.getElementById("button1"):button1

/* Type your TEXT message below but DO NOT use double quotation marks, use 
SINGLE quotation marks instead */
message = "Comparte en Facebook"

// No need to edit below this line

var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes

function changeIt(){
if (!ok)
return
cross_el.innerHTML='<button style="background-color:'+btnbgcol+'" onmouseDown="moveIt();" onmouseOver="moveIt()">'+message+'</button>'
}

function setRandom(){
random1=Math.floor(Math.random()*301)
random2=Math.floor(Math.random()*401)

}

function moveIt(){
if (!ok)
return
setRandom()
cross_el.style.top=random1+'px'
cross_el.style.left=random2+'px'

if (document.all){
if (cross_el.offsetTop-standardbody.scrollTop>standardbody.clientHeight)
cross_el.style.top=random1*(-2/3)+'px'
}
else{
if (cross_el.offsetTop-window.pageYOffset>window.innerHeight)
cross_el.style.top=random1*(-2/3)+'px'
}

}
</script>
    </div>
    </div>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-1" style="width: 33%" >
        <h4>Fishing</h4><p><img width="100" height="99" alt="" src="images/001.jpg" style="float: left;"></p><p>Vivamus blandit ultricies et nisi vestibulum amet arcu quam semper.  Dui pretium a est orci ac vitae commodo pellentesque.  Vestibulum eros elit nascetur ligula  orci in. Pulvinar  posuere odio quis a. </p>
    </div><div class="art-layout-cell layout-item-1" style="width: 34%" >
        <h4>Hiking</h4><p><img width="100" height="99" alt="" src="images/002.jpg" style="float: left;"></p><p>Sapien praesent nunc egestas nec habitasse at eleifend nisl. Lacus nulla felis suscipit maecenas. Non fermentum quam sed. Mollis rutrum feugiat leo donec in malesuada sed congue id consectetuer a.  Pellentesque pellentesque porta blandit nulla.</p>
    </div><div class="art-layout-cell layout-item-1" style="width: 33%" >
        <h4>More Activities</h4><p><img width="100" height="99" alt="" src="images/003.jpg" style="float: left;"></p><p>In tellus convallis ac aenean congue taciti.  Ut eu nisl conubia faucibus enim nunc. Leo ut at eget curabitur justo curae pellentesque ligula nisi. Dictumst et condimentum hendrerit leo quis leo. Mauris interdum faucibus aenean hymenaeos sem.</p>
    </div>
    </div>
</div>
<div class="art-content-layout-br layout-item-0">
</div><div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-1" style="width: 100%" >
    <a  onclick="Effect.toggle('d1','slide'); return false;">Testimonials</a>
<div id="d1" style="display:none;"><p>      Ligula urna aptent volutpat dui vel. Quis nisi nullam ac ut. Fringilla tincidunt et fermentum praesent malesuada etiam congue litora id. Ipsum ullamcorper placerat amet enim condimentum malesuada.  Ultrices nunc maecenas ligula magna tincidunt.<br>      Sit ultrices metus ut.<br><br>      Neque orci adipiscing aliquet at arcu. Libero a aliquam cras porttitor morbi tempor nisl est porta.  Lorem nunc nostra turpis dapibus sit netus hac. Curabitur ac a morbi tempus libero ac viverra.<br>      Justo quis lorem arcu.  </p>
   
        </div>
    </div>
</div>
</div>
                                
                </article></div>
                    </div>
                </div>
            </div>
    </div>
<footer class="art-footer clearfix">
  <div class="art-footer-inner">
<p><span style="font-size:13px;"><span style="font-weight:bold;">Fusce et sapien.<a href="#">Privacy Policy</a><span style="font-size:11px;">|</span></span></span>Icono <a href="http://www.iconfinder.com/browse/iconset/web2badges/#readme">set</a> A.<a href="http://www.soulvisual.com/blog/">Jeremy Roux</a></p><p><br></p>
    <p class="art-page-footer">
        <span id="art-footnote-links"><a href="http://www.artisteer.com/" target="_blank">Web Template</a> created with Artisteer.</span>
    </p>
  </div>
</footer>

</div>


</body></html>



Lightbox




Explicación:

Es un efecto bastante conocido que se basa en que, al hacer click en la imagen,aparecerá en grande en mitad de la pantalla con el fondo oscurecido

Código


<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head><!-- Created by Artisteer v4.0.0.58475 -->
<meta charset="utf-8">
<title>Inicio</title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="style.css" media="screen">
<!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
<link rel="stylesheet" href="style.responsive.css" media="all">

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="jquery.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<meta name="description" content="Description">
<meta name="keywords" content="Keywords">

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />



<style>.art-content .art-postcontent-0 .layout-item-0 { border-top-width:1px;border-top-style:solid;border-top-color:#957941;margin-top: 5px;margin-bottom: 5px; }
.art-content .art-postcontent-0 .layout-item-1 { padding-right: 10px;padding-left: 10px; }
.ie7 .post .layout-cell {border:none !important; padding:0 !important; }
.ie6 .post .layout-cell {border:none !important; padding:0 !important; }

</style></head>
<body>
<div id="art-main">
<header class="art-header clearfix">


<div class="art-shapes">
<h1 class="art-headline" data-left="87.51%">
<a href="#">GoGreen</a>
</h1>
<h2 class="art-slogan" data-left="87.51%">Stay Green When You Travel</h2>

<div class="art-object0" data-left="0%"></div>
<div class="art-textblock art-object557410578" data-left="100%">
<div class="art-object557410578-text"></div>
</div>
</div>

</header>
<nav class="art-nav clearfix">
<div class="art-nav-inner">
<ul class="art-hmenu"><li><a href="inicio.html" class="active">Inicio</a></li><li><a href="contacts.html">Contacts</a></li></ul>
</div>
</nav>
<div class="art-sheet clearfix">
<div class="art-layout-wrapper clearfix">
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell art-sidebar1 clearfix"><div class="art-block clearfix">
<div class="art-blockheader">
<h3 class="t">Reasons to Travel Green</h3>
</div>
<div class="art-blockcontent"><ol><li>In ante diam lacus eget rutrum ultricies ultricies. <a href="#">more</a></li><li>Tempus nisi integer fusce primis mattis ligula ante ipsum. <a href="#">more</a></li><li>Vestibulum ipsum mi. Netus maecenas sociis. <a href="#">more</a></li><li>Montes sagittis praesent nec ultricies volutpat ut nunc. <a href="#">more</a></li><li>Sem at pellentesque euismod justo. <a href="#">more</a></li><li>Mi nunc magna blandit id pulvinar gravida ac lacus egestas quam. <a href="#">more</a></li></ol></div>
</div><div class="art-block clearfix">
<div class="art-blockheader">
<h3 class="t">Quick Links</h3>
</div>
<div class="art-blockcontent"><p><a href="#">Suspendisse pharetra auctor</a></p><p><a href="#">Nunc a sollicitudin est</a></p><p><a href="#">Lobortis sit purus dapibus nunc at.</a></p><p><a href="#">Tellus nullam pede nunc amet. </a></p><p><a href="#">Fusce eget curae tempus odio. </a></p></div>
</div><div class="art-block clearfix">
<div class="art-blockheader">
<h3 class="t">Follow Us</h3>
</div>



<div class="art-blockcontent"><p><img width="60" height="60" alt="" src="images/1311950644_facebook.png"><img width="60" height="60" alt="" src="images/1311950637_flickr.png"><img width="60" height="60" alt="" src="images/1311950634_rss.png"></p></div>
</div><div class="art-block clearfix">
<div class="art-blockheader">
<h3 class="t">Photo Gallery</h3>
</div>
<div class="art-blockcontent"><p><img width="205" height="136" alt="" src="images/shutterstock_12843229.jpg" style="margin:0;"></p></div>
</div></div>
<div class="art-layout-cell art-content clearfix"><article class="art-post art-article">
<div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-1" style="width: 100%" >
<h3>Bienvenido</h3><p><a class="example-image-link" href="foto.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward." style="float:left;"><img class="example-image" src="foto.jpg" alt=""/></a> </p><p>Quis sem in tempus ligula mollis suscipit mi ante quam. Posuere phasellus et nec blandit primis sagittis amet rutrum nunc arcu metus quis tortor diam enim tincidunt. Nisi morbi ipsum ut quam mi non ante et cursus tincidunt sagittis. Urna leo bibendum odio erat.</p><p>Eget elit id donec metus ante eu et non a quisque leo orci dui eu. Platea sed eu vestibulum adipiscing in metus. Blandit curabitur praesent morbi in non auctor luctus. </p><p><a href="#" class="art-button">Read more</a></p>
</div>
</div>
</div>
<div class="art-content-layout-br layout-item-0">
</div><div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-1" style="width: 100%" >
<h3>Popular Places</h3>
</div>
</div>
</div>
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-1" style="width: 33%" >
<h4>Fishing</h4><p><img width="100" height="99" alt="" src="images/001.jpg" style="float: left;"></p><p>Vivamus blandit ultricies et nisi vestibulum amet arcu quam semper. Dui pretium a est orci ac vitae commodo pellentesque. Vestibulum eros elit nascetur ligula orci in. Pulvinar posuere odio quis a. </p>
</div><div class="art-layout-cell layout-item-1" style="width: 34%" >
<h4>Hiking</h4><p><img width="100" height="99" alt="" src="images/002.jpg" style="float: left;"></p><p>Sapien praesent nunc egestas nec habitasse at eleifend nisl. Lacus nulla felis suscipit maecenas. Non fermentum quam sed. Mollis rutrum feugiat leo donec in malesuada sed congue id consectetuer a. Pellentesque pellentesque porta blandit nulla.</p>
</div><div class="art-layout-cell layout-item-1" style="width: 33%" >
<h4>More Activities</h4><p><img width="100" height="99" alt="" src="images/003.jpg" style="float: left;"></p><p>In tellus convallis ac aenean congue taciti. Ut eu nisl conubia faucibus enim nunc. Leo ut at eget curabitur justo curae pellentesque ligula nisi. Dictumst et condimentum hendrerit leo quis leo. Mauris interdum faucibus aenean hymenaeos sem.</p>
</div>
</div>
</div>
<div class="art-content-layout-br layout-item-0">
</div><div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-1" style="width: 100%" >
<h3>Testimonials</h3><blockquote> Ligula urna aptent volutpat dui vel. Quis nisi nullam ac ut. Fringilla tincidunt et fermentum praesent malesuada etiam congue litora id. Ipsum ullamcorper placerat amet enim condimentum malesuada. Ultrices nunc maecenas ligula magna tincidunt.<br> Sit ultrices metus ut.<br><br> Neque orci adipiscing aliquet at arcu. Libero a aliquam cras porttitor morbi tempor nisl est porta. Lorem nunc nostra turpis dapibus sit netus hac. Curabitur ac a morbi tempus libero ac viverra.<br> Justo quis lorem arcu. </blockquote>
</div>
</div>
</div>
</div>
</article></div>
</div>
</div>
</div>
</div>
<footer class="art-footer clearfix">
<div class="art-footer-inner">
<p><span style="font-size:13px;"><span style="font-weight:bold;">Fusce et sapien.<a href="#">Privacy Policy</a><span style="font-size:11px;">|</span></span></span>Icono <a href="http://www.iconfinder.com/browse/iconset/web2badges/#readme">set</a> A.<a href="http://www.soulvisual.com/blog/">Jeremy Roux</a></p><p><br></p>
<p class="art-page-footer">
<span id="art-footnote-links"><a href="http://www.artisteer.com/" target="_blank">Web Template</a> created with Artisteer.</span>
</p>
</div>
</footer>

</div>

<a href="pez.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>


</body></html>

jueves, 29 de enero de 2015

DIA CIENTO CINCUENTA 29/01/2015

Hoy hemos tenido prueba de validación.
En diseño expusimos todos los libros que quedaban, además, tenemos un nuevo trabajo que hacer, que consistirá en rediseñar unos panfletos publicitarios que nos trajo, el mío será de masmovil.

PRUEBA DE VALIDACION 1305.6 RECUPERACIÓN


<P>Fecha:  9/01/2015 Módulo: MF0951_2 Unidad Formativa: UF1305.6
Nombre:                                                fecha de inicio:                                       
</P>
<BODY>
<H2><U>INSTRUCCIONES:</U>Esta prueba de validación se compone de una batería de preguntas tipo test y  unos ejercicios de código en Java con redacción<b>ESTA PRUEBA ES PERSONAL </b></H2> El objetivo de esta prueba es validar todos los conocimientos de la Unidad de competencia  y demostrar que se ha asimilado correctamente.
En este caso el test es opcional para tod@s aquellos que hayan aprobado el anterior.
La  batería de preguntas se encuentran más abajo. Pregunta correcta 0,5 puntos, incorrecta o vacia -0,2 puntos.
Respuestas:
1.-
2.-
3.-
4.-
5.-
6.-
7.-
8.-
9.-
10.-
11.-
12.-
13.-
14.-
15.-
16.-
17.-
18.-
19.-
20.-































Preguntas del test:
1.- ¿Qué evento se ejecuta cuando un usuario selecciona un elemento del formulario?

a) onselect.
b) onchange.
c) onselecction.
d) Ninguna es correcta.

2.- ¿Qué evento se ejecuta cuando un usuario cambia el estado de un formulario?

a)onchanging.
b)onselecting.
c)onchange.
d)Ninguna es correcta.

3.-¿ Cuál de los siguientes eventos, no es un evento ratón?

a)onclick.
b)onmouseup.
c)oncontextmenu.
d)Todos son eventos de ratón.

4.- ¿Qué evento se ejecuta cuando se mueve el puntero del ratón por la página?

a)onmouseup.
b)onmousedown.
c)fonmouse.
d)Ninguna es correcta.

5.- ¿Qué evento se ejecuta cuando el puntero del ratón sale del área ocupada por un elemento de la página?

a)onmouseover.
b)onmouse.
c)onmouseout.
d)Ninguna es correcta.

6.- ¿Qué evento se ejecuta cuando el puntero del ratón entra en un área ocupada por un objeto?

a)onmouseover.
b)onmouse.
c)onmouseout.
d)Ninguna es correcta.

7.- ¿Qué evento se ejecuta cuando el usuario suelta el botón del ratón que anteriormente había puesto?

a)desmouse.
b)onmousefree.
c)onmouseup.
d)Todas son correctas.

8.- ¿ Qué evento se ejecuta cuando el usuario pulsa una tecla?

a)onkerdown.
b)onkeyup.
c)onkeyfree.
d)Ninguna es correcta.

9.- ¿Qué evento se ejecuta cuando el usuario deja pulsada una tecla durante un tiempo determinado?

a)onkeypressed.
b)onkeypressing.
c)onkey.
d)Ninguna es correcta.

10.- ¿Qué evento se ejecuta cuando se libera la pulsación de una tecla?

a)onkeyfree.
b)onkeyup.
c)withoutkey.
d)Ninguna es correcta.

11.- ¿Qué evento se ejecuta cuando un ejemplo pierde el foco de la aplicación?

a)nofocus.
b)onblur.
c)withoutfocus.
d)Todos son válidos.

12.- ¿Qué evento se ejecuta cuando un elemento gana el foco de la aplicación?

a)focusin
b)onfocus
c)allfocus
d)Ninguna es correcta.

13.- ¿Qué evento se ejecuta cuando el visitante aprieta el botón de enviar el formulario?

a) onsubmit.
b) onsend.
c) onsending.
d) Ninguna es correcta.

14.- ¿Qué evento se ejecuta cuando se mueve un frame?

a)onframe.
b)onmove.
c)onwindow.
d)Todos pueden llegar a ser correctos.

15.- ¿Qué evento se ejecuta cuando se redimensiona la ventana del navegador?

a) onresize.
b) onsize.
c) onwindow.
d) Todos pueden llegar a ser correctos.

16.- El evento unload se ejecuta cuando la página se ha cerrado o descargado:

a) Verdadero.
b) Falso.
17.- ¿Qué evento se ejecuta cuando se carga la página?

a) oncharge.
b) onchange.
c) Son correctas a) y b).
d) Ninguna es correcta.

18.- ¿Qué evento se ejecuta cuando un usuario arrastra un objeto por la ventana del navegador?

a) onleave.
b) ondrag.
c) ondrop.
d) Ninguna es correcta.

19.- ¿Qué evento se ejecuta cuando se detiene la carga de una página?

a) onfail.
b) onabort.
c) onfaildown.
d) Todas son correctas.

20.- ¿ Qué evento se ejecuta cuando no se puede cargar un documento?

a) onfail.
b) onabort.
c) onfaildown.
d) Todas son correctas.

Ejercicio de código: En el archivo html y css adjuntado desarrollar lo siguiente:
  • METAS RELLENADOS CON COHERENCIA POR FAVOR
  • Aplicar todos los conceptos de un código sencillo y fácil de mantener.
  • Apartado de <NOSCRIPT> colocado y completado.
  • Código comentado en HTML y en el .js
  • Que la distribución de los objetos en el html sea USABLE y con conceptos de Diseño, al igual que las acciones a realizar de los eventos.
  • Scripts a realizar:
    • Que al cargar la página salga un mensaje con las instrucciones de manipulación del examen.
    • En el Lugar de las etiquetas números y cadenas, poner colores de fondo e imagen de sustitución <HTML> MODO TEXTO SIN EVENTO
    • Que al hacer clic en Nombre y Apellidos lo sustituya por un nombre y apellidos introducido por el usuario, con la mejor rutina de control posible. Aplicar bucle de repetición.
    • Poner un Input color despues de Colores de Fondo que cambie el color de fondo del DIV al ejecutar el evento onchange en el INPUT.
    • Elegir dos fotos y que cambie la foto con los eventos onmouse dentro del DIV al pasar por encima y salir del DIV.


JS


// Función apellidos() para cambiar el nombre y apellidos por defecto al que el usuario desee

function apellidos()
{

//el do while nos insistirá hasta que escribamos algo en el prompt, con intención de no dejar el h2 vacío
do{
var nuevo=prompt('Por favor, introduce tu nombre y tus apellidos','')
document.getElementById('nombre').innerHTML=nuevo

}while(nuevo=="")
//El confirm nos dará el ok para continuar
var pregunta=confirm('¿Los datos son correctos?')
if(pregunta==true)
{
window.alert('Puede proceder con el programa')

}


}



//Con la siguiente función, la imagen del div se sustituirá por otra

function foto()
{

document.getElementById('ima1').src="images2.jpg"

}

//Con ésta, la imagen volverá a ser la anterior al salir el ratón del div

function nuevafoto()
{
document.getElementById('ima1').src="images.jpg"

}



//Con esta función, el segundo div cambiará de color de fondo


function colorin()
{
document.getElementById('div2').style.background=colores.micolor.value


}


HTML


<!DOCTYPE html>
<html lang="es">

  <head>
    <title>Prueba 1305.7</title>
    <meta  content="text/html; charset=iso-8859-1">
    <meta name="Description" content="Prueba de validación de la unidad formativa 1305.7">
    <LINK REL="stylesheet" HREF="prueba.css" TYPE="text/css">
    <SCRIPT language=javascript src="prueba.js"></script>
    <!--Dada la posibilidad de que algún navegador no esté actualizado, por ende no podrá interpretar el contenido JavaScript, le mostraremos con esto al usuario un mensaje para que lo actualice y, además, le mostraremos distintas páginas para descargar de forma gratuita un navegador actualizado entre los más usados-->
    <NOSCRIPT>

  Este navegador no comprende los scripts que se están ejecutando, debe actualizar su versión de

  navegador a una más reciente. Por favor escoja entre las diversas opciones que le mostramos.

  <br><br>



  <!--<a href=http://windows.microsoft.com/es-es/windows/downloads>Microsoft</a>.<br>-->
  <!--Dejo comentado éste enlace ya que internet explorer dejará de existir para ser sustituido por otro navegador-->
  <a href=http://www.opera.com/es-es>Opera</a>.<br>
  <a href=http://support.apple.com/kb/dl1531?viewlocale=es_ES>Safari</a>.<br>
  <a href=https://www.mozilla.org/es-ES/firefox/new/>Firefox</a>.<br>
  <a href=http://www.google.com/intl/es/chrome/>Chrome</a>.<br>

    </NOSCRIPT>
  </head>
  <body onload="window.alert('Bienvenid@, por favor sigue estas instrucciones para un correcto funcionamiento del programa: \n 1)Primeramente haz click en nombre y apellidos e introduce los tuyos \n 2)Si pasas el cursor por el div, la imagen cambiará, también cuando lo retires \n 3)Al hacer click en el botón de color al lado del segundo div, aparecerá una paleta, escoge tu color y aplica cambios, el color del div cambiará al que escojas')">
  <h1>Prueba de validación 1305.7</h1>
  <img class="trebol" src="suerte.png" alt="Trebol" />
  <h2 id="nombre" onclick="apellidos()">Nombre y apellidos</h2>
  <h3>Imagen de sustitución</h3>
  <div  onmouseover="foto()" onmouseout="nuevafoto()" class="caja1"><br/>
 
  <img id="ima1" src="images.jpg" alt="imagen1"/>
 
  </div>
  <h3>Colores de fondo</h3>
  <form  id="colocado" name="colores">
  <input type="color" name="micolor" value="" onchange="colorin()"/>

 
  </form>
  <div id="div2" class="caja2">
 
   
  </div>
  </body>

</html>


CSS




body{
padding: 40px;
}
h1 {
float: left;
color: #9be663;
margin-left: 425px;
font-family: verdana;
margin-top: 60px;
font-size: 30pt;
}
.trebol {
position: relative;
left: 200px;
}
h2 {
color:#fc9720;
font-family: verdana;
margin-top: 20px;
}
h3 {
color:#9be663;
font-family: verdana;
margin-top: 80px;
font-size: 18pt;
}
.caja1 {
position: relative;
margin-left: 340px;
margin-top: 40px;
width: 800px;
height: 500px;
border: solid #fc9720 5px; 
Border-radius: 5%;
}
.caja2 {
position: relative;
margin-left: 340px;
margin-top: 40px;
width: 800px;
height: 500px;
border: solid #fc9720 5px; 
Border-radius: 5%;
}

#colocado{

position: relative;
margin-left: 170px;
margin-top: 40px;

}

#ima1{

position:relative;
margin-left: 250px;
margin-top: 130px;

}

miércoles, 28 de enero de 2015

DIA CIENTO CUARENTA Y NUEVE 28/01/2015

Hoy hemos estado repasando para el examen dado que mañana ya finalmente lo realizaremos.
En diseño coloqué mediante photoshop un dibujo de unas alas a modo de tatuaje en la espalda de una chica.
Referente a la empresa, seguimos dándole vueltas al logotipo, cada vez con ideas más interesantes

martes, 27 de enero de 2015

DIA CIENTO CUARENTA Y OCHO 27/01/2015

Hoy tuvimos entrevista con nuestro primer cliente, también como ejemplo de cómo hay que desenvolverse en una entrevista profesional y ya nos transmitió su idea de logotipo los plazos en los que quiere tener las cosas finalizadas etc.
Le dimos además otra perspectiva al logotipo de la empresa, además de seguir repasando para el examen.
También hemos comentado acerca de las nuevas gafas holográficas de windows y hemos visto el spot publicitario.
En diseño elaboré un gif en photoshop de un cartel de neón.

lunes, 26 de enero de 2015

DIA CIENTO CUARENTA Y SIETE 26/01/2015

Hoy hemos presentado nuestras cubiertas de libros en diseño gráfico.
En programación seguimos repasando para el examen del próximo día y, además, nos hemos reunido los miembros de la futura empresa para poner en común las ideas de logotipo, de momento no nos decantamos por ninguna definitiva, sino por un par de ellas a las que habrá que darle más vueltas.

analytics