Escrito por J.F. el Jueves, 11 de Octubre del 2007 a las 16:40
A la hora de interpretar correctamente algunos caracteres especiales como las tildes, la ñ y otro tipo de símbolos poco usuales, lo correcto para asegurarnos de que se visualicen correctamente en todos los navegadores es usar los códigos especiales de cada uno. Para ello nos vendrá bien ésta tabla de caracteres en la que podemos encontrar el código para toda clase de símbolos:
Enlace: | Tabla de caracteres especiales
Categoria: HTML, General
Escrito por J.F. el Jueves, 27 de Septiembre del 2007 a las 11:57
Los checkbox o casillas de verificación son unas cajas que permiten marcar o no un elemento. La forma de declararlas en HTML es la siguiente:
HTML:
-
<input type="checkbox" name="nombre" value="valor" CHECKED/>
El atributo name es el que usaremos para acceder al checkbox desde Javascript, value será el valor del checkbox y también puede ser accesible mediante Javascript y por último CHECKED deja marcado por defecto el checkbox al cargar la página. Si lo quitamos la casilla de verificación aparecerá por defecto desactivada. Veamos como podemos comprobar el estado de un checkbox con las diferentes propiedades Javascript:
checked
Informa sobre si determinada caja está marcada o no. Para ello podríamos utilizar un código como éste:
JavaScript:
-
if(document.nombre_formulario.nombre_checkbox.checked) {
-
//Aquí va el código en caso de que el checkbox
-
//esté activao. Ej: alert("Checkbox seleccionado");
-
}
-
else {
-
//Código en caso contrario
-
//Ej: alert("Checkbox no marcado");
-
}
defaultChecked
Comprueba si un checkbox está marcado por defecto(añadiendo CHECKED en el HTML como vimos más arriba).
value
Como en un campo de texto de un formulario, sirve para acceder al valor del checkbox.
JavaScript:
-
alert(document.nommbre_form.nombre_check.value);
Hacer click en un checkbox
Mediante éste método se puede simular el click sobre el checkbox. Pondré un ejemplo rápido y lo entenderás:
HTML:
-
-
-
-
-
function hacerClick() {
-
document.formulario.casilla.click();
-
}
-
</script>
-
-
</head>
-
-
-
-
<input type="checkbox" name="casilla">
-
-
-
<input type="button" value="Simular click sobre Checkbox" onclick="hacerClick();">
-
-
</form>
-
</body>
-
</html>
Situar/retirar el foco
Las funciones ya conocidas, focus() para situar el foco y blur() para retirarlo.
JavaScript:
-
document.formulario.casilla.focus();
-
document.formulario.casilla.blur();
Categoria: HTML, Javascript
Escrito por J.F. el Lunes, 27 de Agosto del 2007 a las 17:37
Un truquito muy sencillo con Javascript y que puede resultar muy útil consiste en cambiar la clase CSS de un elemento. Por ejemplo, podemos crear varias clases CSS distintas para un formulario, y al realizar las validaciones aplicar una clase u otra. Veamos un sencillo ejemplo que puede resultar útil. Vamos a realizar una validación en un campo de texto normal y corriente, y en caso de que ese campo de texto se deje vacío, vamos a cambiarle la clase por una que mostrará el fondo de la caja amarilla. De esa manera, si tuvieramos un formulario muy grande, sería muy fácil mostrarle al usuario los campos que debe corregir. Veamos en primer lugar las 2 clases CSS que vamos a usar, una por defecto(normal), y la otra(error) en caso de dejar vacío el campo:
CSS:
-
<head>
-
<style type="text/css">
-
.normal
-
{
-
font-size: 10pt;
-
color:#000000;
-
background-color:#FFFFFF;
-
}
-
.error
-
{
-
font-size: 10pt;
-
color:#000000;
-
background-color: #FFFF66;
-
}
-
</style>
Ahora veremos el código Javascript encargado de realizar el cambio de tipo de clase para el campo de texto. Ésta función será llamada en el evento onClick del botón del formulario, como podrás apreciar en el código HTML más abajo.
JavaScript:
-
<script>
-
function cambiaClase()
-
{
-
if(document.formulario.nombre.value=="")
-
{
-
document.formulario.nombre.className="error";
-
}
-
else
-
{
-
document.formulario.nombre.className="normal";
-
}
-
}
-
</script>
-
</head>
Para terminar, veamos el código HTML, que es muy corto y bastante simple de entender con lo ya explicado:
HTML:
-
-
-
<input type="text" class="normal" name="nombre"/>
-
<input type="button" value="Comprobar" onClick="cambiaClase()";/>
-
</form>
-
</body>
Categoria: HTML, CSS, Javascript
Escrito por J.F. el Jueves, 9 de Agosto del 2007 a las 22:04
Un completo sitio para poder ver el potencial y todo lo que puede llegar a hacerse mediante la combinación de listas HTML+CSS. Desde simples listas, hasta espectaculares menús de navegación. Contiene ejemplos muy interesantes.
Enlace: | Listamatic
Categoria: HTML, CSS
Escrito por J.F. el Miércoles, 1 de Agosto del 2007 a las 22:08
Leyendo el blog de RibosoMatic me encuentro con éste fabuloso sitio web, con librerías ejemplos, códigos fuentes hechos con AJAX, Javascript y DHTML. Muy recomendables para dar un toque de elegancia a nuestro sitio Web.
Enlace: | AjaxRain
Categoria: AJAX, Recursos, HTML, Javascript
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.
Si le resulta útil el pack de templates, puede considerar realizar una simbólica donación, más de 10.000 personas descargaron el pack:
Descarga: | 50 Plantillas HTML+CSS y Flash gratuitas | Mirror
También recomiendo: | Descargar pack de iconos variados
Categoria: Recursos, HTML, CSS
