PROBADOR HTML Y CODIGOS GRATIS
Aplicaciones en codigos htlm
Como sabeis tambien podeis insertar aplicaciones html en vuestra web , aqui podreis comprobar su funcionamiento y como quedaran una vez implementadas , tambien más abajo encontrareis varios codigos html de interes general muy utiles para crear webs más profesionales y imprsionar a los visitantes.
Ventana Flotante:
Pon una ventana con una imagen o mensaje para tus visitantes , la venta ya contiene la 'X' de cerrar y la puedes situar en la porcion de la pantalla que desees bottom = abajo, top =arriba, left =iz , right =der y tambien podeis darles porciones en Px o % como por ejemplo (top=50px , que seria arriba pero bajando 50 pixeles o left=33% que seria iz pero en el primer 1/3 de pantalla)
<div id='ventana-flotante'>
<a class='cerrar' href='javascript:void(0);' onclick='document.getElementById('ventana-flotante').className = 'oculto''>x</a>
<div id='contenedor'>
<div class='contenido'>
AQUI VA EL MENSAJE O IMAGEN, PUES ESTA PARTE
ES UN CONTENEDOR
</div>
</div>
</div>
<style>
#ventana-flotante {
width: 180px; /* Ancho de la ventana */
height: 180px; /* Alto de la ventana */
background: #ceffad; /* Color de fondo */
position: fixed;
top: 100px;
left: 50%;
margin-left: -90px;
border: 1px solid #adffad; /* Borde de la ventana */
box-shadow: 0 5px 25px rgba(0,0,0,.1); /* Sombra */
z-index:999;
}
#ventana-flotante #contenedor {
padding: 25px 10px 10px 10px;
}
#ventana-flotante .cerrar {
float: right;
border-bottom: 1px solid #bbb;
border-left: 1px solid #bbb;
color: #999;
background: white;
line-height: 17px;
text-decoration: none;
padding: 0px 14px;
font-family: Arial;
border-radius: 0 0 0 5px;
box-shadow: -1px 1px white;
font-size: 18px;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
}
#ventana-flotante .cerrar:hover {
background: #ff6868;
color: white;
text-decoration: none;
text-shadow: -1px -1px red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#ventana-flotante #contenedor .contenido {
padding: 15px;
box-shadow: inset 1px 1px white;
background: #deffc4; /* Fondo del mensaje */
border: 1px solid #9eff9e; /* Borde del mensaje */
font-size: 11px; /* Tamaño del texto del mensaje */
color: #555; /* Color del texto del mensaje */
text-shadow: 1px 1px white;
margin: 0 auto;
border-radius: 4px;
}
.oculto {-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;-ms-transition:1s;opacity:0;-ms-opacity:0;-moz-opacity:0;visibility:hidden;}
</style>
<!--[if IE]>
<style>
.oculto {display:none}
</style>
<![endif]-->
Texto en movimiento:
Muy util , yo lo uso para las donaciones , ya que puedo agradecer el acto recordandoselo a todos los visitantes
<marquee id="ejemplo" direction="right">CAMBIA AQUI EL TEXTO QUE DESEES QUE SALGA</marquee>
Reloj Fecha personalizado:
Reloj donde apreciamos la fecha y hora , personalizable
<script type="text/javascript" src="http://www.24webclock.com/clock24.js"></script>
<table border="0" bgcolor="#3D700B" cellspacing=1 cellpadding=3 class="clock24st" style="line-height:14px; padding:0;">
<tr><td bgcolor="#88ED23" class="clock24std" style="font-family:arial; font-size:12px;"><a href="http://www.24webclock.com/de/"><img src="http://www.24webclock.com/ico.gif" width="14" height="14" border="0" alt="gratis uhren für homepage" align="left" hspace="2"></a> <a href="http://www.24webclock.com/es/" style="text-decoration:none;"><span class="clock24s" id="clock24_48434" style="color:#3D700B;">relojes web</span></a></td></tr>
</table>
<script type="text/javascript">
var clock24_48434 = new clock24('48434',-180,'%M / %dd / %yyyy %W %HH:%nn:%ss %P','es');
clock24_48434.daylight('AR'); clock24_48434.refresh();
</script>
Comprobador de presencia:
Con este pequeño codigo podremos saber cuantos visitantes estan online en esa pagina a tiempo real(o casi).
<script type="text/javascript" src="http://widgets.amung.us/small.js"></script><script type="text/javascript">WAU_small('pgwnga9kklf2')</script>
Banner seguidor:
En este codigo podeis insertar el codigo html como un anuncio o banner , politica de cookies , y mucho más, y colocarlo en la porcion de la pantalla que decidamos y seguira al visitantes mientras suba o baje por la web.
Yo lo suelo usar para implementar mis anuncios seguidores o colocar la politica de la pagina con el anuncio obligatorio del uso de cookies en EU(todas las webs legales debemos tener el aviso del uso de cookies) sino teneis aun podeis ir a esta web--> http://cookie-script.com os registrais gratuitamente y personalizais vuestro anuncio sobre las cookies , alli os facilitan el codigo, y lo implementais en su lugar.
IMPORTANTE : PONER EL ANUNCIO EN HEAD PARA QUE NO SE QUEDE ESTATICO
<style>
.oculto {display:none}
</style>
<![endif]-->
<style type="text/css">
#flotante1 {
position: fixed;
bottom: 0;
left: 50px;
width: 100px;
height: 100px;
}
</style>
<div id="flotante1">TU CODIGO HTML AQUI</div>
Pagina Pop-under:
Cuando nuestros visitantes acedan a nuestra web(boton,link etc) se abrira una segunda web con nuestra publicidad o anuncios , ofertas, etc.
IMPORTANTE : INTRODUCIR EN HEAD PARA QUE SEA AUTOMATICO AL ACCEDER A VUESTRA WEB
<script language='JavaScript'>window.open('http://www.web2.com', 'geoflotante', '');</script>
Introducir elemento flash:
Con este codigo podeis situar vuestro elemnto flash en una caja del tamaño que decidais.
<object type="application/x-shockwave-flash" data="URL de tu elemento flash *.swf" width="350" height="300">
<param name="flash" value="URL de tu elemento flash *.swf" />
<param name="quality" value="high" />
<img src="noflash.png" width="350" height="300" alt="Imagen en sustitución de flash" />
</object>
