CSS
publicado el 24 de June del 2009 bajo Api, App, Ask, código, CSS, HTML, img, Plugin, Prueba, Snipplr, Template, Test.
En Snipplr podemos ver los fragmentos de código que usan otros diseñadores. Algunos de ellos son realmente buenos como este que he encontrado hoy.
Es sencillo. Simplemente es una página HTML en la que encontraremos aquellos elementos más comunes y asi podremos probar nuestra hoja de estilo CSS y comprobar que elementos hemos definido, cuales no y cuales están bien y cuales no. Todo ello desde una solo página de un solo viztazo.
A continuación os dejo el código aunque también podeís verlo en snipplr. Continuar »
CSS Diseño Recursos
publicado el 3 de October del 2008 bajo 960 Grid System, código, CSS, Frameworks, Guiabreve, HTML.
Normalmente no suelo usar frameworks para desarrollar sitios, pero para evitar complicaciones y problemas de compatibilidad esta vez decidí usar el “960 Grid System“.
Para empezar, antes que nada un framework es una estructura de soporte definida en la cual otro proyecto de software puede ser organizado y desarrollado (Wikipedia ™).
Este sistema se basa en un ancho de página de 960 px, el ancho ideal según muchos diseñadores. Lo bueno es que este ancho es perfectamente divisible entre 12 o 16 columnas con lo que podremos ir combinando diferentes anchos y estructuras a lo largo de la página sin problemas.
El framework nos facilita la taréa de crear la página dandonos todo el código CSS necesario para que vallamos creando las distintas columnas en nuestra web de forma que todas queden perfectamente ordenadas en su lugar y con un margen de 10 px por los lados. Lo que hace que cada columna tenga una separación de 20 px. Continuar »
CSS Wordpress
publicado el 28 de August del 2008 bajo Actualización, CMS, Novedades, Wordpress, Wordpress 2.7.
Wordpress 2.7 está a la vuelta de la esquina. Su lanzamiento está previsto para finales de Octubre, primero de Noviembre.
En este sitio podemos registrarnos y probar desde el panel de administración como será la nueva versión y ver/probar las novedades más profundamente.
Algunas novedades:
- Nueva interfaz: se trata de un pequeño cambio, ahora se ha colocado el menu en la parte lateral izquierda y además es desplegable con lo que nos ahorraremos unos cuantos clics.
- Cambio de orden de los widgets del editor, y además, podremos elegir que widgets queremos que aparezcan y cuales no.
- Nuevo Widget en el Dashboard: Quickpress nos permitirá publicar de forma más rápida.
- Unificación de los botones para insertar elementos multimedia.
- Nuevas configuraciones para inserción de imágenes por defecto (tamaño, alineación)
- Autoinstalación y actualización de plugins.
- Cita a comentarios sin salir del panel de administración.
- Más cambios…
Aún quedan más cambios por llevarse acabo, esto no es todo.
CSS Wordpress
publicado el 25 de August del 2008 bajo código, CSS, Problemas, Theme, Wordpress.
Wordpress desde la versión 2.5 permite seleccionar la alineación de una imagen desde el cargador de imágenes. El problema es que en vez de utilizar la propiedad align lo han hecho por medio de una clase de css. Por ello la solución es introducir el siguiente código en la hoja de estilo de nuestro theme:
Código CSS (Copiar):
-
img.alignleft, div.alignleft {
-
float:left;
-
margin:0 0.5em 0.5em 0;
-
}
-
img.alignright, div.alignright {
-
float:right;
-
margin:0 0 0.5em 0.5em;
-
}
-
img.aligncenter, div.aligncenter {
-
text-align:center;
-
margin:0 auto;
-
}
Otra posibilidad que da Wordpress 2.6 es la de añadir Captions, si queremos que estas se vean correctamente alineadas debajo de la imagen tenemos que añadir además:
Código CSS (Copiar):
-
.wp-caption {
-
border: 1px solid #ddd;
-
text-align: center;
-
background-color: #f3f3f3;
-
padding-top: 4px;
-
margin: 10px;
-
}
-
.wp-caption img {
-
margin: 0;
-
padding: 0;
-
border: 0 none;
-
}
-
.wp-caption p.wp-caption-text {
-
font-size: 11px;
-
line-height: 17px;
-
padding: 0 4px 5px;
-
margin: 0;
-
}
No hace falta decir que el código es personalizable y lo podemos editar para que encaje a la perfección con el diseño de nuestra web.
CSS Diseño
publicado el 25 de June del 2008 bajo CSS, Diseño, iPhone, Layouts.
Las ventajas de un diseño elástico son muchas una de ellas, la más importante, es que gracias a este tipo de diseños se consigue aprovechar en mayor medida el espacio disponible en pantalla independientemente de la resolución que tenga el usuario.
El mayor problema es que muchas veces no sabemos como hacerlo, o mejor, no sabemos como hacerlo de manera correcta. Por esto Matthew James Taylor a desarrollado varios layouts (esquemas) totalmente líquidos. Estos no usan ni JavaScript ni Hacks CSS y son compatibles con la mayoría de los navegadores además de con los iPhones/iPod Touch.
En la página que ha preparado Matthew para mostrar sus diseños podemos ver en acción hasta 7 esquemas distintos con sus correspondientes explicaciones para que podamos aplicarla a nuestros sitios.
CSS Tutoriales
publicado el 16 de May del 2008 bajo CSS, Imagen de Carga, Tutorial, Vídeo.
El titulo no se si es lo suficientemente descriptivo como para entender el contenido de esta entrada, pero, básicamente, lo que vamos a hacer es que mientras que los vídeos de nuestra web cargan se muestre una imagen indicando que el vídeo esta cargando.
Todo ello usando solamente CSS. La técnica es sencilla, consiste en darle estilo al div del vídeo para que muestre una imagen de fondo, una vez que el vídeo cargue, la imagen quedará en el fondo y conseguiremos ese efecto de imagen de carga que buscamos. El código CSS quedaría de la siguiente forma:
Código CSS (Copiar):
-
.video {
-
border: 20px solid #825948;
-
background: url(video-bg.gif) center no-repeat;
-
margin: auto;
-
background-color: #825948;
-
height: 355px;
-
width: 425px;
-
}
Por supuesto el código anterior es personalizable, yo además a añadido un borde y lo he alineado al centro, pero cada uno lo puede personalizar a su gusto.
El código Html sería algo así:
Código CODE (Copiar):
-
<div class=
"video"><object classid=
"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width=
"425" height=
"355" codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name=
"wmode" value=
"transparent" /><param name=
"src" value=
"http://www.youtube.com/v/KA2B5X0LhMY&hl=en" /><embed type=
"application/x-shockwave-flash" width=
"425" height=
"355" src=
"http://www.youtube.com/v/KA2B5X0LhMY&hl=en" wmode=
"transparent"></embed></object></div>
Podeís ver un ejemplo de como queda el código o descargar la imagen que he usado en el ejemplo.
CSS Navegadores Web
publicado el 4 de May del 2008 bajo CSS, Navegadores, Reiniciar estilo de navegadores.
Lo ideal sería que todos los navegadores tengan los mismos estilos por defecto para que no halla diferencia entre ellos a la hora de mostrar las páginas, pero, por desgracia, esto no es así, pero, gracias al CSS podemos minimizar estas diferencias entre los navegadores para que nuestra página se vea correctamente en todos los navegadores.
Este artículo en ingles nos ofrece una larga lista de hojas de estilo que nos permitirán hacer esto que decimos. Todas ellas se encuentran descritas y cada cual debe de elegir aquella que más le guste. A continuación os dejo una de ellas de las que más me han gustado:
Código CSS (Copiar):
-
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
-
fieldset, input, textarea, p, blockquote, th, td {
-
padding: 0;
-
margin: 0;
-
}
-
table {
-
border-collapse: collapse;
-
border-spacing: 0;
-
}
-
fieldset,img {
-
border: 0;
-
}
-
address,caption,cite,code,dfn,em,strong,th,var {
-
font-weight: normal;
-
font-style: normal;
-
}
-
ol,ul {
-
list-style: none;
-
}
-
caption,th {
-
text-align: left;
-
}
-
h1,h2,h3,h4,h5,h6 {
-
font-weight: normal;
-
font-size: 100%;
-
}
-
q:before,q:after {
-
content:'';
-
}
-
abbr,acronym { border: 0;
-
}
CSS Diseño Recursos
publicado el 30 de April del 2008 bajo CSS, Diseño, HTML, Online, Photoshop, PSD2CSS Online, Web.
PSD2CSS Online es un web que nos permite pasar nuestros diseños hechos en Photoshop a CSS y Html de forma automática y Online. Simplemente tendremos que subir nuestro archivo en formato PSD y automáticamente nos mostrará el resultado, un archivo Html con el CSS incrustado en él.
Además nos permite indicar varios tipos de capas en Photoshop incluyendo un guión y una pequeña palabra al final de su nombre para que la web las trate de una forma o de otra:
- Con
_text podremos definir aquellas capas que son tipo texto.
_form, _inputtext, y _submit nos permitirán autogenerar formularios._jpg conseguiremos que esa capa se guarde como una imagen en formato jpg.- Con
_link indicaremos que se trata de un enlace. Y con _linkover conseguiremos hacer enlaces con Roll Overs. (Enlaces que cambian al situarnos encima)
- Con
_center centraremos la capa marcada.
_bkgnd nos permite que la capa sea un fondo de un div.
Yo lo he probado con un diseño que tenía guardado desde hace algún tiempo y el resultado no ha sido perfecto, he de admitir que el PSD probablemente no estaba bien construido, ni si quiera use ninguna de las propiedades que se indican arriba, fue solo una prueba rápida, pero aún así repito que aunque no fue perfecto el resultado fue bastante bueno y con solo unos retoques podría dejarlo tal y como quiero.
¡Bienvenido!, este es mi blog personal en el que escribo con cierta frecuencia. 