Os presento esta interesante herramienta que nos permite ver de una forma rápida como se verá nuestro proyecto responsive en diferentes resoluciones.
El manejo es muy simple, seleccionamos que resolución queremos que nos muestre y veremos una simulación de la misma.
Sígueme en Twitter
Seguir a @eriksanvi
En CSS3 tenemos una propiedad llamada text-shadow que nos da la posibilidad de crear una sombra sobre cualquier texto sin necesidad de utilizar imagen. Esto nos beneficia sobre todo por la versatilidad que nos da la utilización de CSS3 y para mejorar nuestro posicionamiento ya que los buscadores pueden indexar mejor nuestra información si está creada con texto.
La forma más simple de utilización de text-shadow es
h2 {text-shadow: 1px 1px #333}
Lo que nos dara una sombre de color gris ubicada 1pixel hacía la derecha y 1 pixel hacía abajo.
Podemos añadirle otro parámetro para determinar la difuminación que nos interesa.
h2 {text-shadow: 1px 1px 3px #333}
Este tercer parámetro nos dará presentará una sombra difuminada en 3 pixels que podemos hacer más nítida si bajamos la cantidad de pixels.
Otra ventaja que tenemos utilizando esta propiedad es que podemos crear varias sombras en un mismo texto.
h2 {text-shadow: 1px 1px 2px #600,
-2px 3px 2px #060,
4px -5px 2px #006}
Una herramienta muy interesante para crear textos son sombra online y que nos genera el código automaticamente es este generador text-shadow que con una interfaz gráfica nos permite crear una sombra a nuestro gusto y nos genera el código automaticamente para que lo podamos copiar en nuestra hoja de estilos.
Sígueme en Twitter
Seguir a @eriksanvi
Algunas veces utilizamos inline-block sustituyendo float ya que se puede obtener los mismo resultados con consequencias diferentes. Generalmente se visualiza correctamente en todos los navegadores menos en IE7 que vemos que nos aparecen los objetos verticalmente y no quedan alineados en la misma línea.
Pero podemos solucionarlo de una forma muy simple.
Ejemplo HTML usando display:inline-block:
<div style="width:200px;"> <p class="objeto">Menu 1</p> <p class="objeto">Menu 2</p> <p class="objeto">Menu 3</p> <p class="objeto">Menu 4</p> </div>
Y con estos estilos
.objeto {
width: 100px;
display: inline-block;
margin: 10px;
background-color: red;
}
Para arreglar esto sólo debemos crear una nueva condición específica para IE7. Para que quede de la forma siguiente.
.objeto {
width: 100px;
display: inline-block;
margin: 10px;
background-color: red;
}
<!--[if lte IE 7]> .objeto {
display: inline;
}
<![endif]-->
Veremos que el problema queda solucionado de una forma simple. Si tenéis cualquier problema no dudéis en comentar y os intentaré ayudar.
Sígueme en Twitter
Seguir a @eriksanvi
Gmail contiene un sistema de busqueda de correo muy útil en el que podemos filtrar los resultados según diferentes parámetros .Está compuesto pos símbolos y palabras que permiten encontrar lo que los usuarios buscan de una forma rápidoa e intuitiva.
Sígueme en Twitter
Seguir a @eriksanvi
Está es una web muy simple, simplemente debemos añadir las líneas de nuestro código CSS y nos hace una comprobación mostrando los errores o warnings que contiene nuestro código CSS.
Es una herramienta útil y rápida que nos sirve para limpiar nuestro código CSS automaticamente totalmente gratuita.
Sígueme en Twitter
Seguir a @eriksanviSeguro que alguna vez os a pasado que cuando escribes algún tipo de código en HTML que supuestamente está en codificación de carácteres UTF, no nos reconoce los acentos y nos muestra estos símbolos tan raros y molestos
Generalmente lo podemos solucionar cambiando nuestro sistema de codificación de nuestro editor.
El método es simple debemos introducir antes el simbolo & más la palabra acute terminando con ;
Para mostrar la á á
Para mostrar la é é
Para mostrar la í í
Para mostrar la ó ó
Para mostrar la ú ú
Para mostrar la ñ ñ
EJEMPLO:
Para poner la palabra “programación” lo pondríamos de la siguiente forma programación
Sígueme en Twitter
Seguir a @eriksanvi
Ya conocemos el famoso add-on para firefox Dummy Lipsum en el que nos genera un texto aleatoria basado en el libro en Latín ” Lorem ipsum” acorde al espacio que queremos rellenar con este texto predefinido.
Pues hoy explicamos este nuevo add-on que utiliza el mismo concepto pero rellena espacios con imágenes predefinidas. Elegimos el tamaño, color y temática de las imágenes y desde una base de datos de más de 11 millones de imágenes nos la incrusta a la espera de nuestra imagen definitiva.
Las imágenes están licenciadas mediante Creative Commons, lo cual es una ventaja añadida.
Enlace | Lorempixum
Sígueme en Twitter
Seguir a @eriksanvi
Para empezar una página web con un buen posicionamiento, lo primero que debemos hacer es configurar nuestras etiquetas meta de la mejor manera. De esta forma informamos a los buscadores que indexan nuestra página de todos los datos que nos interesa. En que país estamos, el idioma que utilizamos , la temática del website.
Las más importantes son:
Meta Keywords (palabras clave):
En esta etiqueta introduciremos las palabras por las cuales queremos que nos identifiquen los buscadores. No hace falta que sea una palabra pueden ser 2 o incluso 3 o más. Es importante buscar las palabras adecuadas y no repetir.
La sintaxis es la siguiente.
<meta name=”keywords” content=”palabra clave,palabra clave”>
Meta Description (descripción)
Esta se compone de una breve descripción de nuestro sitio web y suele ser la información que sale en los buscadores como descripción de la página. Generalmente se recomienda que no exceda de 150 carácteres y tenga relación con las palabras clave introducidas anteriormente.
<meta name=”description” content=”descripción de la página”>
Meta Language (idioma)
Esta etiqueta tiene un funcionamiento y objetivo simple , permite al buscador saber en que idioma esta escrito la web.
<meta name=”Language” content=”Spanish”>
Meta Author (autor)
Etiqueta que da información sobre el auto de la página.
<meta name=”Author” content=”Datos del autor”>
Meta Robots
Esta etiqueta es la que nos permite no indexar ciertas páginas de nuestro sitio web. Un ejemplo sería si no quisieramos que el buscador indexe nuestra página de contacto . La sintaxis sería la siguiente.
<meta name=”Robots” content=”All”>
Meta Revisit
Esta etiqueta da una pequeña recomendación al servidor, indicándole la frecuencia con la que actualiza la web. Por ejemplo un blog se actualizara diariamente y una web estática se actualizará menos a menudo.
<meta name=”Revisit” content=”1 day”>
Sígueme en Twitter
Seguir a @eriksanvi