25.3.13

HTML5 - parte 9 - Ventana Modal

Les paso un código muy sencillo armado solamente con CSS3 y HTML5 para tener en nuestro navegador una ventana modal, ya sea para una notificación como para un simple formulario

<!DOCTYPE html>
<head>
<title>Ventana Modal</title>

<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}

.modalDialog:target {
display: block;
pointer-events: auto;
}

.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }
</style>
</head>

<body>

<a href="#openModal">Abrir ventana Modal</a>

<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Cerrar" class="close">X</a>
<h2>Ventana Modal</h2>
<p>Esta ventana funciona con HTML5 y CSS3</p>
<p>Realmente es muy sencillo su implementación, la podemos usar para una notificación hasta un formulario</p>
</div>
</div>

</body>
</html>


Codigo
http://chopapp.com/#5ew2n6eq
SkyDrive

22.3.13

Google Keep

La gente de Google a lanzado Google Keep (adosado a google drive) se trata de un servicio web para incluir notas con fotos y otras cosas más, de esta manera estaría compitiendo con EverNote o OneNote de MS Este servicio lo podemos navegar por medio de https://drive.google.com/keep/ o bien utilizando la App para andrioid

20.3.13

HTML5 - parte 8 - pseudo Rockola

Les paso un ejemplo sencillo en el cual podran armar una psudo rockola con imágenes y musica, en este código usaremos cuatro imágenes y un mismo tema para cada imágen pero con formatos mp3 y wma, realmente es muy sencillo de armar, aparte la mayoría del código ya viene del ejemplo 7 anterior <!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Dummy</title>
        <link rel="stylesheet" type="text/css" href="Styles/Site.css" />
        <script type="text/javascript" src="JS/jquery-1.7.1.js"></script>
<script type="text/javascript" src="JS/Fade.js"></script>
    </head>

    <body>
        <div id="contenedor">
            <div id="subcontenedor1">
                <ul id="Lista">
                    <li><img src="Images/ArminvanBuuren.jpg" alt="ArminvanBuuren" id="imagen1" onMouseOver="javascript:document.getElementById('t1').play();" onMouseOut="javascript:document.getElementById('t1').pause();"/></li>
                    <li><img src="Images/Deadmau5.jpg"       alt="Deadmau5" id="imagen2"       onMouseOver="javascript:document.getElementById('t2').play();" onMouseOut="javascript:document.getElementById('t2').pause();"/></li>
                    <li><img src="Images/MarkusSchulz.jpg"   alt="MarkusSchulz" id="imagen3"   onMouseOver="javascript:document.getElementById('t3').play();" onMouseOut="javascript:document.getElementById('t3').pause();"/></li>
                    <li><img src="Images/SandervanDoorn.jpg" alt="SandervanDoorn" id="imagen4" onMouseOver="javascript:document.getElementById('t4').play();" onMouseOut="javascript:document.getElementById('t4').pause();"/></li>
                </ul>
            </div>
          
            <div id="subcontenedor2">
                <img src="Images/ArminvanBuuren.jpg" alt="ArminvanBuuren" id="imagen1g"/>        
                <img src="Images/Deadmau5.jpg" alt="Deadmau5" id="imagen2g"/>        
                <img src="Images/MarkusSchulz.jpg" alt="MarkusSchulz" id="imagen3g"/>        
                <img src="Images/SandervanDoorn.jpg" alt="SandervanDoorn" id="imagen4g"/>
            </div>
        </div>

<audio id="t1">
<source src="Music/ArminvanBuuren.mp3" type="audio/mp3"/>
<source src="Music/ArminvanBuuren.wma" type="audio/wma"/>
</audio>
<audio id="t2">
<source src="Music/Deadmau5.mp3" type="audio/mp3"/>
<source src="Music/Deadmau5.wma" type="audio/wma"/>
</audio>
<audio id="t3">
<source src="Music/MarkusSchulz.mp3" type="audio/mp3"/>
<source src="Music/MarkusSchulz.wma" type="audio/wma"/>
</audio>
<audio id="t4">
<source src="Music/SandervanDoorn.mp3" type="audio/mp3"/>
<source src="Music/SandervanDoorn.wma" type="audio/wma"/>
</audio>
</body>
</html>


HTML

HTML
http://chopapp.com/#5qpgprka

CSS

CSS
http://chopapp.com/#kovyb0zr

JavaScript

JavaScript
http://chopapp.com/#klktcihx

Bajar ejemplo completo (SkyDrive)

5.3.13

HTML5 - parte 7 - Fade de imagenes

Les paso un ejemplo para jugar un poco con imagenes dentro de nuestra pagina, podemos tener una coleccion de thumbnails o vista en miniaturas y al pasar el raton por encima de ellas podemos ver la foto en tamaño real, realmente es muy sencillo se utiliza como libreria complementaria jquery-1.7.1.js }
He aqui el codigo

Pagina HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Dummy 7</title>
        <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="JS/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="JS/Fade.js"></script>
    </head>

    <body>
        <div id="contenedor">
            <div id="subcontenedor1">
<ul id="Lista">
                    <li><img src="Images/imagen005.jpg" alt="Floppy" id="imagen1" onMouseOver="inimg1()" onMouseOut="outimg1()"/></li>
                    <li><img src="Images/imagen012.jpg" alt="Gorda" id="imagen2" onMouseOver="inimg2()" onMouseOut="outimg2()"/></li>
                    <li><img src="Images/imagen013.jpg" alt="Negra" id="imagen3" onMouseOver="inimg3()" onMouseOut="outimg3()"/></li>
                    <li><img src="Images/imagen015.jpg" alt="Tommy" id="imagen4" onMouseOver="inimg4()" onMouseOut="outimg4()"/></li>
                </ul>
            </div>
         
            <div id="subcontenedor2">
                <img src="Images/imagen005.jpg" alt="Floppy" id="imagen1p"/>       
                <img src="Images/imagen012.jpg" alt="Gorda" id="imagen2p"/>       
                <img src="Images/imagen013.jpg" alt="Negra" id="imagen3p"/>        
                <img src="Images/imagen015.jpg" alt="Tommy" id="imagen4p"/>
            </div>
        </div>
</body>
</html>

Codigo

Hoja de estilos

#contenedor
{
    margin:0px auto;
    width:800px;
    height:650px;
    background-color:Gray;
}

#subcontenedor1
{
    margin:0px auto;
    width:800px;
    height:150px;
}

#subcontenedor2
{
    margin:0px auto;
    width:800px;
}

#Lista
{
    list-style-type:none;
    margin:0px 0px 0px 140px;
}

#Lista li
{
    float:left;
    margin-left:20px;
    margin-top:20px;
}

#Lista li:hover
{
    border:2px solid red;
}

#subcontenedor1 img
{
    width:100px;
    height:100px;
    display:block;
}

#subcontenedor2 img
{
    width:450px;
    height:450px;
    position:absolute;
    margin:5px 175px 40px 175px;
    display:none;
    border:2px solid red;
}

a:link {
    color: #034af3;
    text-decoration: underline;
}

a:visited {
    color: #505abc;
}

a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active {
    color: #12eb87;
}

codigo

JavaScript

function inimg1()
{
    $('#imagen1p').fadeIn(500);
};
function outimg1()
{
    $('#imagen1p').fadeOut(500);
};
function inimg2()
{
    $('#imagen2p').fadeIn(500);
};
function outimg2()
{
    $('#imagen2p').fadeOut(500);
};
function inimg3()
{
    $('#imagen3p').fadeIn(500);
};
function outimg3()
{
    $('#imagen3p').fadeOut(500);
};
function inimg4()
{
    $('#imagen4p').fadeIn(500);
};
function outimg4()
{
    $('#imagen4p').fadeOut(500);
};


Codigo

Codigo completo en ZIP

1.3.13

HTML5 - parte 6 - formularios

Les paso un ejemplo de los nuevos input que se utilizan en HTML5 Se le puede agregar el atributo required para que un campo sea requerido y si al intentar enviar el formulario, aparecerá un popup indicando que se debe ingresar un dato
De igual manera podemos utilizar el atributo placeholder para que en el input figure una leyenda, como por ejemplo "ingrese su mail"
Otro atributo es autofocus, que al cargar la pagina el foco se posicionará en el input seleccionado



Código
SkyDrive