website stats » 2007 » Septiembre | Solo Código |

80 templates de 2 columnas gratis para tu web

Escrito por J.F. el Sábado, 29 de Septiembre del 2007 a las 15:46

Cortesía de Mashable, nos encontramos con 80 plantillas gratuitas para tu página web, con gran diseño gráfico, de 2 columnas. Hay desde diseños serios hasta otros más divertidos y coloridos. Bastante recomendables:

80 templates de 2 columnas gratis para tu web

Enlace: | 80 plantillas para páginas web

Comentarios (2)

Categoria: Recursos, General

La biblia de Javascript en formato pdf

Escrito por J.F. el Viernes, 28 de Septiembre del 2007 a las 11:59

No necesita mucha presentación, más de 2000 páginas en formato pdf acerca de todo lo que puedas imaginar sobre Javascript. Imprescindible a la hora de desarrollar aplicaciones web con Javascript.

Descargar: | La biblia de Javascript en formato pdf(30mb).

Comentarios (1)

Categoria: Manuales, Javascript

Manejo de checkbox con Javascript

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:
  1. <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:
  1. if(document.nombre_formulario.nombre_checkbox.checked) {
  2.   //Aquí va el código en caso de que el checkbox
  3.   //esté activao. Ej: alert("Checkbox seleccionado");
  4.   }
  5. else {
  6.   //Código en caso contrario
  7.   //Ej: alert("Checkbox no marcado");
  8.   }

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:
  1. 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:
  1.  
  2. function hacerClick() {
  3.     document.formulario.casilla.click();
  4. }
  5. </script>
  6.  
  7. </head>
  8.  
  9. <form name="formulario">
  10. <input type="checkbox" name="casilla">
  11. <input type="button" value="Simular click sobre Checkbox" onclick="hacerClick();">
  12.  
  13. </form>
  14. </body>
  15. </html>

Situar/retirar el foco
Las funciones ya conocidas, focus() para situar el foco y blur() para retirarlo.

JavaScript:
  1. document.formulario.casilla.focus();
  2. document.formulario.casilla.blur();

Escribir comentario

Categoria: HTML, Javascript

La propiedad overflow dentro de CSS

Escrito por J.F. el Miércoles, 26 de Septiembre del 2007 a las 15:00

Enfocado a los novatos y para aquellos que no conocen demasiado CSS, voy a explicar en que consiste la interesante propiedad overflow que podremos aplicar a las capas. Yo generalmente la uso para crear diferentes secciones dentro de una página web en la que queremos meter mucho contenido, y que por falta de espacio o porque nos fastidia el diseño, necesitamos incluirlo en un sitio más pequeño del que ocupa. Para incluir un chat en un lado de tu sidebar, noticias, tablas, etc. Para todo ello uso la propiedad overflow con la opción scroll o auto. Para ver su uso vamos a poner un ejemplo, en el que vamos a definir una capa con un color de fondo(es mejor que sea distinto al del fondo de la página si queremos que se dierencie, aunque en determinadas ocasiones también puede quedar bien dejarlo igual), un ancho y un alto. Veamos el código CSSde nuestra capa de ejemplo:

CSS:
  1. #capa {
  2. background: black;
  3. width:250px;
  4. height:150px;
  5. overflow: auto
  6. }

Como ves hemos definido overflow auto, de tal manera que si escribimos mucho texto en la capa y sobre pasa las dimensiones aparecerán las barras de scroll facilitándonos el visionado del contenido de la capa. Podríamos haberle dado otros valores, que encuentras explicados en el siguiente recuadro:

overflow: visible Si el contenido de la capa excede sus dimensiones será mostrado igualmente. El comportamiento puede ser variable dependiendo del navegador, por ejemplo en IE6 el contenido entero se muestra con las propiedad que tenía la capa(color de fondo,borde,etc.) mientras que en Firefox el contenido que excede la capa no adquiere esas propiedades, y queda bastante mal.
overflow: hidden De ésta forma la capa se muestra correctamente, unicamente que el contenido que exceda de las dimensiones nunca podrá ser visualizado por el visitante.
overflow: auto Quizás la mejor y más usada, aunque siempre hay que ver las necesidades y requisitos de cada situación. De ésta manera solo aparecerán las barras de scroll en caso de que el contenido exceda las medidas de la capa, posibilitando su lectura.
overflow: scroll Siempre aparecerán las barras de scroll. Si el contenido no excede las dimensiones quedan deshabilitadas, en el momento que es mayor el contenido de habilitan.

Aquí tienes un código de ejemplo bastante simple, utilizando los distintos atributos explicados:

HTML:
  1.  
  2. <style type="text/css">
  3.  
  4. #capa1 {background: black; color:yellow; width:250px; height:150px; overflow: auto; border: red 3px dotted}
  5. #capa2 {background: black; color:yellow; width:250px; height:150px; overflow: scroll; border: red 3px dotted}
  6. #capa3 {background: black; color:yellow; width:250px; height:150px; overflow: hidden; border: red 3px dotted}
  7. #capa4 {background: black; color:yellow; width:250px; height:150px; overflow: visible; border: red 3px dotted}
  8.  
  9. </style>
  10. </head>
  11.  
  12. Auto
  13. <div id="capa1">
  14. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  15. </div> <br/>
  16. Scroll
  17. <div id="capa2">
  18. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  19. </div> <br/>
  20. Hidden
  21. <div id="capa3">
  22. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  23. </div> <br/>
  24. Visible
  25. <div id="capa4">
  26. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  27. </div> <br/>
  28.  
  29. </body>
  30.  
  31. </html>

Comentarios (4)

Categoria: CSS

Practical PHP Programing, aprende PHP

Escrito por J.F. el Martes, 25 de Septiembre del 2007 a las 15:29

Practical PHP Programing, aprende PHPPractical PHP Programing es un manual de PHP en forma de Wiki elaborado por diversa gente. Éste nuevo tipo de formatos se está convirtiendo en una fuente de conocimientos para compartir entre todos, ya que están elaborados por cientos de personas. Si quieres probar a aprender PHP o reforzar tus conocimientos no dudes en visitar éste wiki.

Enlace: | Wiki de PHP Vía: | 5 Líneas

Escribir comentario

Categoria: Manuales, PHP

Personalizando los botones para formularios

Escrito por J.F. el Lunes, 24 de Septiembre del 2007 a las 16:50

Cada vez más todo está diseñado mediante CSS, y poca gente utiliza ya el botón submit/reset que trae por defecto el html. Crear botones con gran diseño es cuestión de conocer algo de diseño gráfico y CSS. Si quieres tener una guía para crear botones elegantes con CSS no te pierdas éste tutorial que encontré por Internet. Te será de gran ayuda, y podrás crear botones como los de la imagen:

Personalizando los botones para nuestros formularios

Si quieres otro diseño también recomiendo éste otro tutorial:

Botones

Escribir comentario

Categoria: CSS, General

Solo Código

Solo Código es una colección de códigos de todo tipo que pueden resultar útiles para el diseño de páginas web. Está enfocado tanto para aquellos que son expertos, como para aquellos principiantes que quieren encontrar recursos útiles, o no saben implementar determinadas funciones en sus webs. No olvides que Solo Código es un blog de Informática Práctica, donde tenemos otras secciones interesantes como:
| Tutoriales | Trucos | Software | Links | Buscar |