jueves, 16 de diciembre de 2010
Ver los archivos ocultos en Mac OS con Blind
19:27 | 
Publicado por
Rafael López
 |
| DESCARGAR |
Os dejo un programa para Mac con el que podéis activar y desactivar la vista de ficheros ocultos en Mac con sólo un click de ratón. El programa se llama Blind. Debéis llevar cuidado de no estar trabajando con el Finder (copiando archivos ni nada por el estilo) en el momento de ejecutar Blind porque este hace un killall Finder para reiniciarlo y os podría dar fallo lo que estéis haciendo.
El programa lo podéis poner en la barra de herramientas de Finder simplemente arrastrándolo a la misma como se ve en la imagen.
Descargar Blind
Etiquetas:
lunes, 8 de noviembre de 2010
Video Tutorial sobre Maquetación web con el Framework CSS 960 Grid System
Pues eso que os dejo unos vídeos sobre Maquetación Web con el framework CSS 960 Grid System. Estos vídeos están hechos por el equipo de desarrolloweb.com y son muy sencillitos de entender. Os los recomiendo...
martes, 2 de noviembre de 2010
Joomla Day 2010 en Valencia
Informaros que el próximo 26 y 27 de noviembre se celebrará en Valencia el "Joomla Day". Podéis encontrar toda la información pinchando aqui.
Maquetación web con el framework css 960 grid system
Hola a tod@s, hoy os quiero presentar un Framework muy interesante para la maquetación de páginas web. El Framework se llama 960 Grid System y nos permite dividir nuestro sitio web en las zonas que queramos de una forma muy sencilla.
El primer paso que tenemos que hacer es descargar el Framework de la página http://960.gs/ pinchando en el enlace “Download” que aparece en la parte superior de la página. Al pinchar en dicho enlace se nos descarga un fichero .zip que, al descomprimirlo, vemos que en su interior tiene varias carpetas. Lo que nos interesa a nosotros es la carpeta “css” que se encuentra dentro de la carpeta “code”. Dentro de esta carpeta se encuentra una colección de ficheros css. Esto es así ya que el Framework no es más que una declaración de estilos que dispone de las clases necesarias para implementar columnas de diversos tamaños en una página web.
El Framework nos crea un diseño de página de 960 píxeles de ancho el cuál lo podemos dividir en 12 columnas o en 16 columnas. Pinchando aquí se puede ver un ejemplo de esto.
Comencemos ya con el código:
Es importante que el Doctype de la página sea adecuado para que todos los navegadores lo entiendan, por ejemplo podría ser como este (si usamos XHTML transicional):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
o como este (si usamos XHTML estricto):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Lo siguiente es enlazar nuestra página con las hojas de estilos del Framework:
<link rel="STYLESHEET" type="text/css" href="code/css/960.css">
<link rel="STYLESHEET" type="text/css" href="code/css/reset.css">
<link rel="STYLESHEET" type="text/css" href="code/css/text.css">
Una vez enlazadas las hojas de estilo podemos empezar a maquetar la página escribiendo el código necesario en el cuerpo (body) de la misma.
El Framework se compone básicamente de las siguientes clases css:
- container_xx
- grid_xx
- prefix_xx
- suffix_xx
- clear
- alpha
- omega
Todo el contenido de la página tiene que estar en una capa cuyo atributo class sea igual a “container_12” si queremos un diseño de 12 columnas o igual a “container_16” si queremos un diseño de 16 columnas.
Por ejemplo para el diseño de 12 columnas sería de la siguiente manera:
<div class="container_12">
...
</div>
Bien, suponiendo que hemos elegido el diseño de 12 columnas, lo que tenemos que hacer ahora es ir definiendo por filas los distintos anchos que queremos que tengan las columnas. Por ejemplo, supongamos que tenemos una cabecera de la página con una imagen a la izquierda y un texto a la derecha y supongamos que la imagen ocupa 7 columnas y el texto 3 columnas. Además queremos que entre la imagen y el texto haya una columna de espacio y que después del texto haya otra columna de espacio hasta el borde derecho de la página. En total si contamos las columnas que ocupan la imagen, el texto y las dos columnas de espacios tenemos 12 columnas, ¡Perfecto!.
El modo de definir esta situación sería como sigue:
<div id="imagen" class="grid_7 suffix_1">
...
</div>
<div id="texto" class="grid_3 suffix_1">
...
</div>
Como se puede observar las columnas se definen mediante la clase “grid_X”
siendo X el número de columnas que queremos que ocupe cierto item. También se observa en la clase que aparece la palabra “suffix_1”. El sufijo se utiliza para definir columnas en blanco después de las columnas que estarán ocupadas y si cambiamos el número 1 por otro número podemos definir columnas en blanco de mayor tamaño, teniendo en cuenta que las columnas totales de una fila no puede ser mayor de 12. Del mismo modo si quisiéramos que hubiese alguna columna en blanco antes de la imagen podríamos haber usado el atributo de clase “prefix_X” donde X es el número de columnas de prefijo que queremos tener en blanco. Por ejemplo, si queremos dejar una columna en blanco delante de la imagen:
<div class="prefix_1 grid_7" id="imagen"
>...</div>
Después de cada fila es importante colocar una capa con la clase “clear”. Esto es debido a que la clase “grid_X” tiene un flota left y con esta clase se consigue romper el estilo y por tanto la siguiente fila comienza a la izquierda del todo.
<div class="clear"></div>
Aunque antes no se ha mencionado es posible anidar unos grid dentro de otros. Cada vez que se anida un grid dentro de otro se crea un espacio de 10 píxeles a la derecha y a la izquierda del grid interno. Es posible eliminar estos espacios si queremos mediante las clases “alpha” y “omega”. La clase alpha elimina el espacio de 10 píxeles de la izquierda y la clase omega elimina el espacio de 10 píxeles de la derecha. Por lo tanto si anidamos varios grids dentro de otro grid, el primer grid anidado debería contener la clase alpha y el último grid anidado debería contener la clase omega.
<div class="grid_12" id="cuerpo">
<div class="grid_3 alpha" id="cuerpoIzq">
...
</div>
<div class="grid_7" id="cuerpoCentro">
...
</div>
<div class="grid_2 omega" id="cuerpoDcha">
...</div>
<div class="clear"></div>
...
</div>
Bueno, y esto es todo por hoy, espero que haya quedado más o menos claro y que os sea útil. Para cualquier duda dejar comentarios. http://960.gs/
miércoles, 27 de octubre de 2010
Cómo crear tu propia plantilla para tu blogger
Buscando algún modo sencillo de personalizar mi blog sin tener que ceñirme a las plantillas que se ofrecen en la parte de diseño he encontrado un software llamado Artisteer que ofrece la posibilidad de crear plantillas de una manera muy sencilla y rápida. No es necesario saber nada de programación ni de diseño web ya que el programa lo hace todo por ti. Lo único que hay que hacer es colocar los elementos de la página como más nos guste a golpe de ratón. El programa se puede encontrar pinchando aqui. Además de crear plantillas para nuestro blog, también se pueden crear plantillas para joomla, wordpress o drupal entre otros.
El software se encuentra disponible tanto para windows como para mac. Lo único que hay que hacer es generar un diseño aleatorio y si te gusta ya está todo hecho, y si no te gusta sólo tienes que navegar por su menú superior para ir personalizando a tu gusto cada una de las partes de la web.
Una vez que hayas elegido el diseño para tu página o blog no tienes más que pinchar en "Exportar" y listo. Ya tienes tu plantilla. El diseño de este blog es un ejemplo sencillo de lo que se puede hacer con este programa pero se puede hacer más.
La página web desde la que podéis descargar el programa es http://www.artisteer.com/.
 |
| Hacer click en la imagen para ver más grande |
El software se encuentra disponible tanto para windows como para mac. Lo único que hay que hacer es generar un diseño aleatorio y si te gusta ya está todo hecho, y si no te gusta sólo tienes que navegar por su menú superior para ir personalizando a tu gusto cada una de las partes de la web.
 |
| Hacer click en la imagen para ver más grande |
Una vez que hayas elegido el diseño para tu página o blog no tienes más que pinchar en "Exportar" y listo. Ya tienes tu plantilla. El diseño de este blog es un ejemplo sencillo de lo que se puede hacer con este programa pero se puede hacer más.
La página web desde la que podéis descargar el programa es http://www.artisteer.com/.
martes, 26 de octubre de 2010
Mi primer aporte
Para comenzar con un primer aporte os propongo que visitéis el siguiente enlace en el que podréis encontrar algunos libros interesantes sobre distintas tecnologías. Los libros son totalmente gratuitos y los podéis descargar en formato pdf preparados para imprimir tanto a una cara como a dos. Espero que os resulte interesante. Ahí va el enlace: www.librosweb.es
De qué va esto...
En este blog pretendo ir contando mis experiencias con el mundo web. En estos momentos me encuentro adentrándome en este mundillo que siempre me ha llamado la atención pero que nunca he tenido la oportunidad de conocer profundamente. Espero que mis andanzas por la "triple W" os aporten, al igual que a mí, algo positivo. ¡¡Buen Viaje!!
Bienvenida!!!
Hola a tod@s, este es mi primer mensaje y como tal quiero daos la bienvenida, espero que os guste mi blog y que os sea útil...
Suscribirse a:
Entradas (Atom)