Escrito por J.F. el Martes, 31 de Julio del 2007 a las 15:15
Un script muy simple para hoy. Validar que existe un campo vacío, a pesar de que se haya pulsado la barra espaciadora, gracias a Javascript:
HTML:
-
-
-
-
<!--
-
function verificar()
-
{
-
if(form1.nombre_campo.value.replace(/ /g, '') == '')
-
{
-
alert("Debe Ingresar un valor ");
-
form1.nombre_campo.focus();
-
form1.nombre_campo.select();
-
return false;
-
}
-
}
-
-->
-
</script>
-
-
</head>
-
-
-
<input name="nombre_campo" type="text" size="15" maxlength="15">
-
<input type="button" name="Validar" value="Validar" onclick="verificar()">
-
</form>
-
</body>
-
</html>
Categoria: Javascript
Escrito por J.F. el Lunes, 30 de Julio del 2007 a las 15:19
Little Boxes es otra página web con un gran diseño gráfico, en la cual podrás encontrar códigos CSS ya montados, disponibles para maquetar tu página. Los hay de varias columnas, tanto juntas como separadas, diseños centrados, etc.
Enlace: | Little Boxes
Categoria: Recursos
Escrito por J.F. el Domingo, 29 de Julio del 2007 a las 15:00
Si lo tuyo no es diseñar tu propia página web desde 0, no tienes por qué resignarte a poseer una página austera, sin mucho color y una apariencia simple. Gracias a Internet disponemos de cientos de páginas desde las cuales podemos descargas Templates o Plantillas ya hechas para elaborar nuestro sitio web. La cosa consiste en escoger una que no guste, y o bien nos quedamos con ella tal cual está, o podemos optar por comenzar a sustituir imágenes, retocar aspectos en la hoja de estilos, añadir más opciones etc. Por ello he hecho una recopilación de 50 Templates que me agradan, y que quisiera compartir. Todos ellos los he conseguido seleccionándolos de algunas páginas que ofrecen plantillas gratuitas, y las condiciones de uso y licencia de cada plantilla se encuentran explicadas en un archivo de texto. Todas ellas vienen con sus imágenes, y hojas de estilos correspondientes. También he incluido algunas plantillas Flash, a pesar de que no sean sitios que me gusten aquellos diseñados unicamente con Flash, ésto del diseño web es cuestión de gustos, y en algún caso determinado queda muy elegante y vistoso.
Descarga: | 50 Plantillas HTML+CSS y Flash gratuitas
También recomiendo: | Descargar pack de iconos variados
Categoria: Recursos, HTML, CSS
Escrito por J.F. el Sábado, 28 de Julio del 2007 a las 14:55
Vía Infected-FX me topo con un interesante ejemplo realizado mediante Javascript con el uso de la librería Jquery. Jquery es una librería Javascript que simplemente has de incluir como cualquier script que se encuentra en una hoja aparte para comenzar a utilizarla. El efecto es muy curioso y la verdad que resulta bastante vistoso, así que si deseas implementar éste sistema, aquí tienes el ejemplo del libro funcionando y su código. En la demo que puedes ver en el anterior enlace el libro que aparece es demasiado pequeño pero si te fijas en los comentarios parece que puedes poner el tamaño que desees a tu gusto. Copio y pego el código tal cual de la página:
JavaScript:
-
<script type="text/javascript" src="jquery.js"></script>
-
-
<script type="text/javascript">
-
-
// set constants
-
var $pageheight = 189; // our single page height
-
var $pagewidth = 146; // our single page width
-
-
var $pageYpos = 0; // current Y position of our bg-image (in both pages)
-
-
$(document).ready(function(){ // When the page is ready
-
-
/* left page turner */
-
$("#leftpage").click( function() {
-
$pageYpos = $pageYpos + $pageheight; // update Y postion
-
$("#leftpage").css("background-position", "0px "+$pageYpos+"px");// move the background position
-
-
setTimeout ('$("#flip").css("background-position", "top center");', 200);
-
setTimeout ('$("#rightpage").css("background-position", "146px "+$pageYpos+"px");', 200);
-
-
}); // close leftpage click function
-
-
/* right page turner */
-
$("#rightpage").click( function() {
-
$pageYpos = $pageYpos - $pageheight; // note: minus page height
-
$("#rightpage")
-
.css("background-position", "0px "+$pageYpos+"px");
-
-
$("#flip").css("background-position", "top left");
-
setTimeout ('$("#flip").css("background-position", "top center");', 200);
-
setTimeout ('$("#leftpage").css("background-position", "146px "+$pageYpos+"px");', 200);
-
-
}); // close rightpage click function
-
}); // close doc ready
-
-
</script>
Categoria: Curiosidades, Javascript
Escrito por J.F. el Sábado, 28 de Julio del 2007 a las 13:39
En ésta ocasión vamos a ver como sustituir el menú normal de una página web al pusar el botón derecho, por un menú que puede ser de navegación con distintas opciones, elaborado por nosotros mismos. Para ello voy a usar un script que me encontré en MetodoVT, el cual he modificado para adaptarlo un poco más a mi gusto. Para hacerlo funcionar tan solo hay que seguir los siguientes pasos:
El script está en una hoja javascript a parte, por lo que enla página que vayamos a utilizar el menú, deberemos hacer la llamada e incluir dicho script. De la siguiente manera lo conseguimos, incluyendo las siguientes líneas en el head:
HTML:
-
<script src="escript1.js"></script>
Para darle formato al menú, definimos unos cuantos estilos CSS, que puedes modificar tranquilamente a tu gusto, mejorando la apariencia con imágenes, etc.
CSS:
-
<style>
-
.contenedor{
-
display:none;position:absolute;z-index:99999999;
-
width:200px;height:auto;color:#FFFFFF;
-
background-color: #999999;
-
}
-
-
.contenedor a{width:200px;height:25px;
-
color:#FFFFFF;font-weight: bold;
-
text-decoration: none;
-
}
-
-
.contenedor a:alink,a:vlink{
-
width:200px;color:#FFFFFF;
-
font-weight: bold;
-
}
-
-
.contenedor a:hover{
-
width:190px;color:#FFFFFF;
-
font-weight: bold;text-decoration:underline;
-
}
-
.titulo{
-
text-align: center;
-
font-weight: bold;
-
width:200px;
-
*width:220px;/*Para IE*/
-
background-color: #075181;
-
color: #FFFFF;
-
}
-
li{
-
padding-left: 5px;
-
}
-
</style>
Una vez seguidos éstos pasos, tan solo debemos ver la parte html, la cual podremos modificar todo lo que queramos exceptuando el <div id="pmenu" class="contenedor"> que es el que permite que funcione el menú contextual. Aquí está el código:
HTML:
-
<div id="pmenu" class="contenedor">
-
<div class="titulo">Informática Práctica
</div>
-
<li><a href="http://pagina1.com">Link 1
</a></li>
-
<li><a href="http://pagina2.com">Link 2
</a></li>
-
<li><a href="http://pagina3.com">Link 3
</a></li>
-
</div>
Para obtener el script, y ya de paso ver un ejemplo puedes descargartelo, y comenzar a modificar a tu gusto.
Descarga: | Menú personalizado con Javascript al pulsar botón derecho.
Categoria: CSS, Javascript
Escrito por J.F. el Viernes, 27 de Julio del 2007 a las 21:34
Bueno señores, guarden bien éstas 2 direccioens entre sus favoritos, puesto que son 2 páginas web con multitud de recursos hechos mediante CSS para implemente en nuestras páginas web. Veamos los sitios web en cuestión, y algunos de los múltiples ejemplos que ofrecen:
www.cssplay.co.uk: página web con montones de menús variados de todo tipo. También disponen de Layouts y Boxes. Particularmente lo que más me gusta son los menús de navegación. Los hay de todo tipo, horizontales,verticales, solo texto, con imágenes, deplegables de varios niveles, etc. Algunos ejemplos que me han gustado en un rápido vistazo:
www.dynamicdrive.com: Ésta página ya tiene más variedad. También tiene muchos menús, y además hay otros elementos como formularios y plantillas. Algunos ejemplos rápidos:
Categoria: Recursos, Herramientas online, CSS
