Santos Laserna Programación web: febrero 2015

En esta unidad formativa hemos realizado varios tipos de efectos que dan un poco de vida a la pagina.

A continuación, presento unos ejemplos de lo que hemos conseguido:

Adaptación de un div desplegable con un efecto de transición que se ejecuta al pasar el ratón por encima del div y se oculta al salir del div.

Efecto de icono que se rota al pasar por encima el ratón y aparece la información.

Efecto de sombra en un div y en el texto y efecto ejemplo de imagen reducida en .png de 8, 16 y 32 bits.

Efecto de area de imagen que modifica una imagen al pasar el ratón por encima de una zona delimitada.

Se ha añadido a la página original una pestaña adicional a la que hemos llamado "Motocross" y en ella hemos incrustado un .gif de alta resolución y un Lettering en la tipografía GREENCLEW.

En la página contacto, se ha añadido un formulario de consulta y un iframe de un mapa de google maps.

HTML:

<!DOCTYPE html>

<style>

.cajafotos

{

position: relative;

bottom: 10px;

background-color: #ffffff;

border-radius: 11px;

opacity: 0.70;

box-shadow: 0px 0px 13px #000000;

width:10%;

height:35%;

left:10px;

margin-left: 10px;

text-align:center;

color: white;

/*Efecto de sombra chula para el texto*/

text-shadow: black 0.05em 0.05em 0.2em;

/*Efecto de sombra chula con drop-shadows*/

-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

</style>

</head>

<body>

<style>

#lat{

position:absolute;

right:1px;

top:100px;

/* Con transition ajustamos la velocidad de despliegue del DIV */

transition: 1s;

background-color: #e0e0e0;

}

#social{

position:relative;

right:1px;

width:138px;

top:5px;

height: 433px;

transition: 1s;

}

</style>

<ul class="art-hmenu"><li><a href="main.html" class="active">Main</a></li><li><a href="motocross.html">Motocross</a></li><li><a href="contact-us.html">Contact Us</a></li></ul>

</nav>

<a href="#">Greenclew</a>

</h1>

<h2 class="art-slogan" data-left="18.43%">Web Design and Internet Marketing</h2>

</div>

</header>

</div>

<h5>Fresh<br>

actual<br>

ImPressive</h5>

</div>

</div><div class="art-content-layout layout-item-2">

</div>

<br><br><br><br><br><br><h4 style="text-align:center;">Projects</h4>

<p style="text-align:center;">Etiam pharet, tellus sit amet congue vulputate.</p>

</div>

</div>

<br><br><br><br><br><br><h4 style="text-align:center;">Ideas</h4>

<p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

</div>

<br><br><br><br><br><br><h4 style="text-align:center;">process</h4>

<p style="text-align:center;">Aenean citudin imperdiet dignissim posuere id.</p>

</div>

</div>

<br><br><br><br><br><br><h4 style="text-align:center;">Offers</h4>

<p style="text-align:center;">Cras elit nisl, rhoncus nec dolor iaculis ultricies.</p>

</div>

</div>

<h3>PROGRESSION IMAGE QUALITY</h3>

</div>

<center> Ejemplo de imagen a 8 bits.</center><br clear="all">

</div>

</div>

<center>Ejemplo de imagen a 16 bits.</center><br clear="all">

</div>

</div>

<center>Ejemplo de imagen a 32 bits.</center><br clear="all">

</div>

</div><div class="art-content-layout layout-item-2">

<h3>Latest News</h3>

</div>

Lorem ipsum dolor sit amet aenean sollicitudin arcu.<br clear="all">

</div>

Etiam pharetra, tellus sit amet congue vulputate.<br clear="all">

</div>

Curabitur gravida felis, sit amet scelerisque.<br clear="all">

</div>

Donec vel neque in neque porta sed sit amet lectus.<br clear="all">

</div>

Morbi tristique posuere consequat vel neque in neque.

</div><div class="art-layout-cell layout-item-3" style="width: 50%" >

<h1>Quality and Efficiency</h1>

</map>

function mouseover1()

{

document.getElementById("imagsust").src = "images/tele2.jpg";

}

function mouseout1()

{

document.getElementById("imagsust").src = "images/tele1.jpg";

}

</script>

// Using multiple unit types within one animation.

$( "#readbuton" ).click(function() {

$( "#textoanimado" ).animate({

width: "80%",

opacity: 1,

marginLeft: "0.6in",

fontSize: "2em",

borderWidth: "10px"

}, 1500 );

});

</script>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris. Pellentesque ac felis tellus.</p>

</div>

</div><div class="art-layout-cell layout-item-3" style="width: 25%" >

<h3>Services</h3>

<ul>

<li>Suspendisse pharetra auctor pharetra.</li>

<li>Nunc a sollicitudin est.</li>

<li>Curabitur ullamcorper gravida felis</li>

<li>Sit amet scelerisque lorem iaculis sed.</li>

<li>Donec vel neque in neque porta venenatis sed sit amet lectus.</li>

<li>Morbi tristique posuere consequat.</li>

<li>Maecenas ut lorem lacus.</li>

<li>Suspendisse et sem eleifend massa.</li>

<li>Donec ut hendrerit enim.</li>

</ul>

</div>

</article></div>

</div>

</div><footer class="art-footer clearfix">

<br>

<ul>

<li><a href="#">Welcome</a></li>

<li><a href="#">People</a></li>

<li><a href="#">Management</a></li>

</ul>

</div><div class="art-layout-cell layout-item-1" style="width: 18%">

<p style="font-size:18px;">LOCATION</p>

<br>

<ul>

<li><a href="#">Address</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</div><div class="art-layout-cell layout-item-1" style="width: 25%">

<p style="font-size:18px;">ABOUT</p>

<br>

<ul>

<li><a href="#">Company</a></li>

<li><a href="#">Terms</a></li>

</ul>

</div><div class="art-layout-cell" style="width: 37%">

Icons by <a href="http://artdesigner.lv">Artdesigner.lv</a></span><br></p>

</div>

</footer>

</div>

<span id="art-footnote-links"><a href="http://www.artisteer.com/" target="_blank">Web Template</a> created with Artisteer.</span>

</p>

</div>

</body></html>

Santos Laserna Programación web

martes, 24 de febrero de 2015

Técnicas de verificación

PROCESO DE VALIDACIÓN

HTML:

CSS:

Efectos de javascript

En esta unidad formativa hemos realizado varios tipos de efectos que dan un poco de vida a la pagina.

HTML: