por Omar Benyakhlef | CSS, HTML, HTML5, Trucos CSS
GENERADOR DE CÓDIGO CSS
CSS 3.0 MAKER es una herramienta de diseño web que ya lleva un tiempo online, creada para generar CSS3, y con la cual podemos crear todo tipo de esquinas redondeadas, gradientes, animaciones, transiciones, sombras, rotar texto,…
La interfaz es muy intuitiva. Generamos gráficamente el efecto que deseamos, lo vemos en pantalla simultáneamente y cuando lo tenemos definido y terminado nos descargamos la CSS, así de fácil.
Cada una de las posibilidades de CSS 3.0 MAKER, nos muestra la compatibilidad con los distintos navegadores del mercado
por Omar Benyakhlef | Diseño de páginas web, SEO, Trucos CSS
Usar CSS para optimizar el SEO
A la hora de afrontar el «diseño de una página web«, un diseñador debe tener en cuenta muchos factores, se trata fundamentalmente de elaborar un proyecto que sea atractivo y útil para el cliente y sobre todo para sus usuarios, pero para llegar hasta «meta», tenemos que plantearnos muchas otras «etapas».
Mi experiencia me dice que un buen diseñador web, no puede quedarse sólo en el aspecto general y superficial de la web. Tenemos que conocer a la perfección cómo maquetar una web, si no expertos, saber bastante de SEO y tener alguna noción de al menos, cómo influye el código de programación en la estructura de la página.
Los conocimientos de maquetación son importantes a la hora de diseñar, ya que nos dirán si es más o menos conveniente hacer un diseño de una forma u otra. El SEO, nos dirá dónde es más conveniente colocar los títulos por ejemplo, y conocer algo de programación, nos ayudará a plantear por ejemplo colocar aquí o allá un menú css, o una galería ajax. Todo en su conjunto, contribuye a realizar un buen trabajo, una buena página web.
Desgraciadamente esta práctica no es muy habitual, y desgraciadamente en España, el trabajo del Director de ARte o diseñador, esta muy infravalorado, no hay más que ver los sueldos aquí y en el resto de los países y las «chapuzas» que invaden la red.
Hoy vamos a comentar la importancia que tiene el flujo del Html a la hora de posicionar bien una web e incluso de que cargue con mayor rapidez.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Rotar texto Html con CSS
Hoy vamos a ver otro «truco de diseño web con CSS«. Vamos a girar un texto, algo que hasta ahora no quedaba más remedio que hacerlo con una imagen. Además contamos con la ventaja de que se ve en Explorer !!, como veremos más adelante para Explorer hay que hacer algún «retoque», pero se consigue girar, que es lo importante.
Ese «truco», nos permite abrir aún más el diseño de nuestros sites, utilizando además texto en Html, lo cual significa menor peso y ayuda al posicionamiento SEO.
A continuación vamos a ver el código necesario y lo fácil que es usarlo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body { font-family: Arial, Helvetica, sans-serif; }
.fecha {
background-color:#c02f55;
position:absolute;
padding:45px 5px 0px;
margin:0px;
}
.fecha .mes {
text-transform: uppercase;
font-size:25px;
}
.fecha .dia {
font-size:45px;
line-height:45px;
position:absolute; left:5px; top:0px;
}
.fecha .year {
display:block;
position:absolute; right:-5px; top:15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
color: #fff;
}
</style>
</head>
<body>
<div class="fecha">
<span class="dia">31</span>
<span class="mes">July</span>
<span class="year">2009</span>
</div>
</body>
</html>
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
CSS3
En este blog de diseño web, hemos visto en numerosas ocasiones los problemas que origina la «batalla entre navegadores», la cantidad de puertas traseras que tenemos que buscar para que el resultado se visualice igual en uno que en otro.
Con la llegada del CSS3, tendremos muchas más posibilidades de controlar el diseño del blog o de la web que estemos construyendo. CSS3 tiene un mayor control sobre la maquetación, permitiéndonos diseñar sin pensar en las dificultades que nos van a originar los distintos navegadores.
Este es uno de los problemas de ser diseñador y además maquetador, ya que a menudo te condiciona el ser conocedor de los problemas que luego te vas a encontrar en la maquetación, aunque habrá quien lo vea como beneficioso…
CSS3 incorpora muchas novedades, vamos a destacar algunas de las que me parecen más impactantes, por su resultado visual y sobre todo por lo difícil que ha sido conseguir ese mismo resultado hasta la fecha.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
ancho de capas con CSS
Ya hace tiempo hablábamos de cómo en diseño web, las tablas habían dejado paso a las capas, pues bien, uno de los problemas más habituales a los que nos enfrentamos es el poder controlar el ancho justo de una capa, ya que son varias las etiquetas que hacen que este ancho se vea alterado.
Quizás sea un tema demasiado obvio para la mayoría, pero dado que he tenido varios mails preguntándome por este aspecto, he decidido hacer un post para aclarar ideas.
Es frecuente si no conocemos bien las CSS, ver cómo a pesar de marcar el ancho con un width de una etiqueta <div>, este se ve alterado al meter los padding, margin, …
Esta es la explicación, de lo que sucede en estos casos. El ancho total de una capa, es igual a la suma del padding-left + padding-right + border-left + border-right + width Quizás sobre la explicación, pero ahí va:
- margin – es el espacio que dejamos fuera de la capa, a partir del cual comenzamos a pintar nuestra capa.
- padding – es el espacio interno a la capa, el que hará que se definan los márgenes dentro de la capa.
Aunque por defecto se supone que los navegadores leen como valor cero, el no declarar las etiquetas padding, border o margin, (padding: 0px; margin: 0px; border; 0px). Yo, para no tener problemas con los navegadores, coloco los bloques «contenedores» con sus propiedades a cero y luego dentro de ellos coloco otro div que tenga los padding, margin,.. que necesite para la maquetación. Normalmente comienzo a maquetar con el photoshop abierto. Mido los contenedores en el psd y los voy formando en el Html. Al dejar los «contenedores» sin bordes ni espacios, consigo encuadrar toda la web, y que se vea exactamente igual tanto en Explorer como en Firefox o cualquier otro navegador. En todo caso es conveniente siempre que estamos montando un Html, ir probando los avances, al menos, en Explorer y Firefox. POST RELACIONADOS:
por Omar Benyakhlef | Ajax, Diseño de páginas web, Usabilidad
Menús gratis en JQuery, Ajax, CSS,...
Con el desarrollo de tecnologías como las CSS, JQuery, Ajax, Mootools,… el abanico de posibilidades para diseñar menús ha aumentado hasta llegar a conseguir verdaderas maravillas. Hoy en día podemos diseñar menús en los que habrá que hacer uso del botón derecho del ratón para comprobar si se trata de flash. Movimientos fluidos, cambios de opacidad, desplazamientos de textos,… mil opciones que hasta hace muy poco sólo nos lo podíamos permitir con tecnología flash.
Además de la indiscutible vistosidad que proporcionan, no nos penalizan en los resultados de búsqueda, ya que con muy poco código podemos hacer uso de menús con la misma apariencia para el navegador que si de un simple html se tratase.
Podemos hacer «trucos» con CSS realmente vistosos o llegar a verdaderas complejidades realizadas en Ajax, pero siempre consiguiendo un resultado vistoso, usable y sin perjuicios a la hora del posicionamiento.
En 1stwebdesigner.com, podéis encontrar una recopilación de más de 300 ejemplos de menús con Jquery, CSS,….
por Omar Benyakhlef | Diseño de páginas web, Google, SEO, Usabilidad
Viendo lo fácil que era maquetar con tablas, ¿por qué nos complicamos la vida con las CSS y las capas?. Estoy seguro que para muchos de vosotros es algo obvio, pero sigo escuchando comentarios que siguen pensando que se trata únicamente de un capricho o moda.
Las tablas, gracias a la etiqueta border=»0″, se convirtieron en una rejilla en la que era muy fácil maquetar una web. Además y gracias también a la imagen de un pixel transparente, conseguíamos posicionar todo en el lugar adecuado.
Existen varios motivos por los que es mejor usar capas en lugar de tablas, vamos a detallarlos:
(más…)
por Omar Benyakhlef | General
Html siempre ha estado en continuo desarrollo desde que se iniciase a principios de los 90. El gran problema ha sido siempre la interpretación que daban y siguen dando a este lenguage los distintos navegadores. ¡Cuántos quebraderos de cabeza para conseguir que una maquetación se viese igual en varios exploradores!.
Html 5 a día de hoy es todavía un proyecto, según dicen, será compatible con HTML 4 y XHTML 1, ya veremos hasta dónde llega este nivel de compatibilidad.
Se anuncian nuevas etiquetas, mientras que otras (aquellas que ya tienen su propia interpretación en las CSS) desaparecerán. Nuevas ayudas al diseño, audio o video, e incluso al «drag».
Bueno, la verdad es que ya estamos impacientes por ver si va a ser a mejor o no. Ver artículo en la W3C
