abstract_01

Descarga estos wallpapers

travel_01
travel_02

Fuentes gratis

font_star_avenue
whiteboard_modern
kraboudja

dibujandowebs.com Blog

Dibujando webs ha sido realizado pensando en todos los que necesitamos enlaces útiles que nos ayuden a ahorrar tiempo al desarrollar un sitio web.
feb 08
2010

Traducción en tiempo real con Google

POSTED BY Katherine Carrillo in translate , traduccion , phone , lenguages , idiomas , google translate , google

Para facilitar la vida de la gente que llega a un pais sin conocer mucho del idioma Google ha pensado en una super herramienta, ya sabemos que hace un tiempo nos sirve de mucho su servicio Google Translate que hace traducciones de más de 50 idiomas, algo muy útil y facil de usar que es lo que más importa. Pero ahora Google está trabajando en algo muchísimo más interesante y también complicado, y es que Google Translation está trabajando en un software para un teléfono móvil que permitirá traducir lo que se está diciendo al otro lado de la linea, es decir si vas a Japón y hablas con alguien de allá el móvil de Google traducirá todo lo que esa persona te está diciendo, genial no?

La parte difícil de todo esto y en lo que Google seguramente invertirá mucho tiempo es que hay lenguajes que se diferencian por la fonética como el Mandarin por ejemplo, que una misma palabra dicha de formas distintas tiene significados abismalmente diferentes.

Franz Och, Director del Servicio de Traducción de Google ha dicho que este servicio podrá funcionar medianamente bien dentro de unos pocos años, así que esperaremos a ver qué resultados se obtienen después de todo este tiempo.

ene 30
2010

Libro de SEO libre para descarga

POSTED BY Katherine Carrillo in seo , posicionamiento web , marketing online , google , buscadores

Hay un Libro de SEO Posicionamiento en buscadores que se puede descargar gratuitamente desde la web, el autor es Miguel López un ingeniero informatico dedicado al posicionamiento web desde hace años, el libro está en formato .pdf y ha sido escrito para  personas que no conocen mucho del mundo SEO pero que están interesadas en aprender a posicionar su web en los buscadores, muy sencillo de entender y con los conceptos generales necesarios para comenzar a trabajar en su sitio web.

 

ene 29
2010

Diferencias entre internet explorer 6, 7 y 8

POSTED BY Katherine Carrillo in navegadores , internet explorer , ie8 , ie7 , ie6

Internet explorer abarca el 65% en cuanto a uso de navegadores se refiere, incluyendo sus versiones ie6, ie7 e ie8. Para los desarrolladores las versiones de internet explorer nos dan más trabajo porque debemos probar como se vé la web que estamos haciendo en todas ellas, eso además de probar el sitio en otros navegadores como firefox, etc. Gracias a algunas librerias hechas en javascript algunos desarrolladores han encontrado cómo minimizar el tiempo en la compatibilidad de su css para las diferentes versiones de este navegador. Este articulo pretende mostrar las diferencias en el css para ie6, ie7 e ie8.

Selectores y Herencia

Selectores de hijos

Ejemplo

body>p {
color: #fff;
}

Descripción:
Selecciona todos los elementos que son hijos de un determinado elemento padre, en este caso body es el padre, y b es el hijo.
Soporte

IE6: No IE7: Yes IE8: Yes


Bugs
En IE7, el selector de hijos no funcionará si hay un comentario HTML entre el padre y el hijo.

Clases agrupadas

Ejemplo

.class1.class2.class3 {
background: #fff;
}

Descripción
Este tipo de clases son usadas cuando el mismo código HTML es declarado en varias clases, como aquí:


Content here.


Soporte

IE6: No IE7: Yes IE8: Yes

 

Selectores de atributos

Ejemplo

a[href] {
color: #0f0;
}

Descripción
Permite seleccionar un elemento sólo si éste tiene un atributo específico. En el ejemplo, todos los tags que contengan el atributo href serán afectados, pero no los tags que no contengan el atributo href.

Soporte

IE6: No IE7: Yes IE8: Yes

 

Selectores de elementos adyacentes

Ejemplo

h1+p {
color: #f00;
}

Descripción
Este selector afecta al contenido adyacente a un determinado elemento, por ejemplo el primer párrafo que viene después del target "< h1 >" tendrá el color asignado, en cambio el segundo párrafo no porque no es adyacente.

heading


Content here.


Content here.


Soporte

IE6: No IE7: Yes IE8: Yes


Bugs
En IE7, el selector no funcionará si es que hay un comentario HTML entre los elementos adyacentes.

 

Selectores Generales de elementos

Ejemplo

h1~p {
color: #f00;
}

Descripción
Este selector afecta a todo el contenido que viene después de un determinado elemento, en nuestro ejemplo anterior afectaría a los dos párrafos después de la etiqueta "< h1 >". En cambio si un párrafo está antes de la etiqueta no será modificado.

Soporte

IE6: No IE7: Yes IE8: Yes

 

Pseudo-Clases y Pseudo-Elementos

Selector descendiente después de la Pseudo-Clase ":hover"

Ejemplo

a:hover span {
color: #0f0;
}

Descripción
Un elemento puede ser etiquetado con un selector después de la pseudo-clase a :hover, de manera similar a cómo funciona cualquier selector descendiente. El ejemplo anterior cambiará el color de texto a todo el contenido que venga después de mientras el mouse esté posicionado sobre ese contenido.
Soporte

IE6: No IE7: Yes IE8: Yes

 

Pseudo-Clases agrupadas

Ejemplo

a:first-child:hover {
color: #0f0;
}

Descripción
Las Pseudo-clases pueden ser agrupadas para reducir el código css. En el ejemplo todos los anchor tag que sean los primeros hijos de sus padres cambiarán el color del texto al asignado cuando el mouse esté hover. Soporte

IE6: No IE7: Yes IE8: Yes

 

":hover" en Elementos sin Anchor

Ejemplo

div:hover {
color: #f00;
}

Descripción
La pseudo-clase :hover puede tener un estado a hover, o rollover, para cualquier elemento, no sólo para los anchor tags.

Soporte

IE6: No IE7: Yes IE8: Yes

 

Pseudo-Clase ":first-child"

Ejemplo

div li:first-child {
background: blue;
}

Descripción
Ésta pseudo-clase afecta a cada elemento que sea el primer hijo de su padre. Soporte

IE6: No IE7: Yes IE8: Yes


Bugs
En IE7 no funciona si hay un comentario HTML antes del primer hijo.

Pseudo-clase ":focus"

Ejemplo

a:focus {
border: solid 1px red;
}

Descripción
Afecta a cualquier elemento que tenga la propiedad focus.

Soporte

IE6: No IE7: No IE8: Yes

 

Pseudo-elementos ":before" and ":after"

Ejemplo

#area:before {
content: "Este texto está antes del area";
}

#area:after {
content: "Este texto viene después del area";
}

Descripción
Coloca contenido antes o después de un determinado elemento, es usado junto a la propiedad content.

Soporte

IE6: No IE7: No IE8: Yes

 

Soporte de propiedades

Dimensions virtuales determinadas por la posición

Ejemplo

#box {
position: absolute;
top: 0;
right: 100px;
left: 0;
bottom: 200px;
background: blue;
}

Descripción
Especificando los valores top, right, bottom, y left para un elemento que esté ubicado en una posición absoluta, dará al elemento dimensiones "virtuales" (width y height), aunque estos no hayan sido especificados.

Soporte

IE6: No IE7: Yes IE8: Yes

 

Min-Height y Min-Width

Ejemplo

#box {
min-height: 500px;
min-width: 300px;
}

Descripción
Estas propiedades le dan valores mínimos al ancho y alto de un div, permitiendo que sea mas amplio pero no mas pequeño que los valores mínimos especificados. Pueden ser usados juntos o por separado.

Soporte

IE6: No IE7: Yes IE8: Yes

 

Max-Height y Max-Width

Ejemplo

#box {
max-height: 500px;
max-width: 300px;
}

Descripción
Especifican valores máximos para el ancho y alto, permitiendo que un area sea mas pequeña pero no más amplia que los valores asignados. Pueden ser usados juntos o por separado.

Soporte

IE6: No IE7: Yes IE8: Yes

 

Color de borde transparente

Ejemplo

#box {
border: solid 1px transparent;
}

Descripción
El borde transparente permite que un borde ocupe el mismo espacio que si tuviese un color de borde visible.

Soporte

IE6: No IE7: Yes IE8: Yes

 

Elementos con Position: fixed

Ejemplo

#box {
position: fixed;
}

Descripción
Este valor para la propiedad position permite que un elemento esté posicionado de manera absoluta con respecto a su contenedor. Soporte

IE6: No IE7: Yes IE8: Yes

 

Fixed-Position Background

Ejemplo

#box {
background-image: url(images/bg.jpg);
background-position: 0 0;
background-attachment: fixed;
}

Descripción
El valor fixed para la propiedad background-attachment hace que un background image se posicione de forma absoluta respecto a su contenedor.

Soporte

IE6: No IE7: Yes IE8: Yes


Bugs
IE6 pone el background image de manera incorrecta en relación a su contenedor, pero este valor funciona en ie6 sólo si es usado en el contenedor principal.

 

Propiedad con valor “inherit”

Ejemplo

#box {
display: inherit;
}

Descripción
Aplicar el valor inherit a una propiedad hace que ese elemento herede el mismo valor de esa propiedad asignado a su elemento contenedor.

Soporte

IE6: No IE7: No IE8: Yes


Bugs
IE6 e IE7 no soportan el valor inherit excepto cuando es aplicado a las propiedades direction y visibility.

 

Espacio de bordes en celdas de tablas

Ejemplo

table td {
border-spacing: 3px;
}

Descripción
Esta propiedad asigna el espacio entre los bordes de celdas adyacentes de una tabla.

Soporte

IE6: No IE7: No IE8: Yes

 

Vista de celdas vacías en una tabla

Ejemplo

table {
empty-cells: show;
}

Descripción
Esta propiedad, sólo se aplica a elementos que tienen la propiedad display con el valor table-cell, permite mostrar las celdas vacías de una tabla con sus respectivos bordes y backgrounds.

Soporte

IE6: No IE7: No IE8: Yes

 

Posición Vertical de una tabla

Ejemplo

table {
caption-side: bottom;
}

Descripción
Permite que el contenido de una tabla se muestre en la posición bottom, en vez de la posición top, que es donde se muestra por defecto.

Soporte

IE6: No IE7: No IE8: Yes

 

Clipping

Ejemplo

#box {
clip: rect(20px, 300px, 200px, 100px)
}

Descripción
Esta propiedad hace visible sólo una parte de una determinada area, haciendo el resto “clipped”, o invisible.

Soporte

IE6: No IE7: No IE8: Yes



Texto sin contenedor en páginas impresas

Ejemplo

p {
orphans: 4;
}

p {
widows: 4;
}

Descripción
La propiedad orphans especifica el número mínimo de lineas ue se mostrarán en la parte inferior de una página impresa. La propiedad widows especifica el número minimo de lineas que se mostrarán en la parte superior de una página impresa. Soporte

IE6: No IE7: No IE8: Yes

 

Saltos de linea dentro de areas

Ejemplo

#box {
page-break-inside: avoid;
}

Descripción
Esta propiedad determina si existirá o no un salto de linea dentro de un determinado elemento. Soporte

IE6: No IE7: No IE8: Yes

 

Propiedades Outline

Ejemplo

#box {
outline: solid 1px red;
}

Descripción
outline contiene outline-style, outline-width, y outline-color. Es preferible usar esta propiedad en vez de la propiedad border ya que no afecta el flujo del documento, lo que ayuda a una mejor depuración de posibles errores en el diseño.

Soporte

IE6: No IE7: No IE8: Yes

 

Valores alternativos para la propiedad Display

Ejemplo

#box {
display: inline-block;
}

Descripción
La propiedad display generalmente tiene el valor block, inline, o none. Los valores alternativos son:

  • inline-block
  • inline-table
  • list-item
  • run-in
  • table
  • table-caption
  • table-cell
  • table-column
  • table-column-group
  • table-footer-group
  • table-header-group
  • table-row
  • table-row-group

Soporte

IE6: No IE7: No IE8: Yes

 

Handling of Collapsible Whitespace

Ejemplo

p {
white-space: pre-line;
}

div {
white-space: pre-wrap;
}

Descripción
El valor pre-line para la propiedad white-space hace que los espacios en blanco de varios elementos se ubiquen en un solo espacio, mientras que se establecen saltos de linea. El valor pre-wrap de la propiedad white-space hace que los espacios en blanco de varios elementos no se ubiquen dentro de un sólo espacio, mientras que se establecen saltos de linea.

Soporte

IE6: No IE7: No IE8: Yes



Como conclusión podemos decir que por ahora no hay css que funcione para las 3 versiones de internet explorer, o bien funciona en uno y no en los otros dos, o bien funciona en dos pero no uno.

ene 26
2010

Wallpapers gratis

POSTED BY Katherine Carrillo in wallpaper gratis , imagenes , fondos para escritorio , fondos de pantalla , download wallpaper

Hay muchas páginas donde se pueden encontrar los wallpapers que más te gustan, una de ellas es http://www.hdwallpapers.net, aquí hay variedad y buena resolución, todo lo que se necesita para disfrutar de un wallpaper agradable en tu pc.
 
dic 29
2009

Corta tus imagenes con una herramienta online

POSTED BY Katherine Carrillo in imagesnip , imagenes , herramienta online , editar imagenes

Instalar photoshop en algún ordenador que no usamos frecuentemente se puede convertir en un problema, sobre todo si el tiempo es corto y si sólo queremos cortar una parte de una imágen cualquiera, una tarea sencilla que nos debería tomar algunos minutos.

Ésta es una herramienta sencilla y gratuita, nos permite cortar un pedazo de alguna imágen ubicada en el ordenador que estamos usando o en cualquier sitio de internet, los pasos son sencillos y ademas podemos agregar una nota y tener almacenada la imágen por algun tiempo, al finalizar el proceso se ven dos enlaces, uno a la imagen dentro de la web  y otro a la imágen misma.

Diseñado por: Katherine Carrillo
Cel: 01992057204
Lima - Perú 2009