Bordes redondeados en imágenes con CSS 3 y jQuery




CSS 3 tiene la propiedad border-radius que permite crear bordes redondeados sin imágenes, sin embargo, esta propiedad tiene la limitante de que si se aplica a un elemento que contiene una imagen, no puede darle a esta, bordes redondeados.

Solución

En Web Designer Wall plantean una solución con jQuery y usando border-radius (ver demostración). La solución consiste en agregar el siguiente script al header de la página:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>
Y a cada imagen en la que se desea el efecto de esquinas redondeadas se le agrega la clase:rounded-img o rounded-img2. Ejemplo:
<img src="images/blogandweb.png" class="rounded-img" alt="Blog and Web" />
Y por último, se definen estas clases CSS en el header del documento o el archivo de estilos:
.rounded-img {
 display: inline-block;
 border: solid 1px #000;
 overflow: hidden;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
 box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
 display: inline-block;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
 -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
 box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}

Explicación

La propiedad border-radius no puede actuar cuando el elemento al que se aplica contiene una imagen, sin embargo, funciona correctamente cuando el elemento tiene a esa imagen como fondo.
El script oculta la imagen (con opacity:0) y la envuelve con un elemento <span> que tiene a la misma imagen como fondo.

Conclusión

Una solución bastante práctica y útil principalmente en cabeceras de sitios web, pero aplicable a cualquier imagen. Lo cierto es que esto es un bug, que los navegadores tendrán que arreglar en sus versiones siguientes.


Android 4.0: con Ice Cream Sandwich empezaremos a querer a nuestros teléfonos

[+/-]


Ice Cream Sandwich
Como estaba marcado en el calendario, Google nos ha presentado la versión 4.0 de Android acompañando al Galaxy Nexus. En este artículo vamos a informaros sobre las novedades de la esperada renovación del sistema operativo de Google, mejor conocida como Ice Cream Sandwich, que ha tenido a Matías Duarte como diseñador principal, y maestro de ceremonias.
Para los que no estuvieron al tanto, nuestros compañeros de Xataka Android han pasado la noche informando sobre las novedades del sistema en riguroso directo. Os adelantamos que son muchas, empezando por un rediseño bastante más importante de lo que habíamos experimentado en anteriores iteraciones.

¿Puede una máquina tener alma?

No es que me ponga transcendental, es un eslogan que aparecía en uno de los muros de la presentación. Android 4.0 está construido bajo tres principios en la mente de Matías: que nos encante, nos simplifique la vida y nos sorprenda.
Para el reconocido diseñador de la experiencia de usuario del sistema de Google, lo que ocurría hasta ahora es que necesitábamos Android y estábamos contentos con él, pero no habíamos llegado a responder emocionalmente, ahora empezaremos a quererlo.
matias duarte
Para Matías, Honeycomb supuso una pista de aterrizaje de emergencia, al llegar para tomar el mando de la experiencia de usuario de una plataforma en pleno éxito (aunque no le acompañen las ventas). Con Ice Cream Sandwich han diseñado algo más grande, algo más que llevar Honeycomb a teléfonos,o una moderada evolución de Gingerbread.
Ahora nos toca a nosotros evaluar en qué nivel está realmente Android 4.0. Parece que por lo que se puede comprobar en las primeras tomas de contacto, lo han conseguido, los que han estado jugando con él, aseguran que es la versión Android más trabajada y pulida, mejorando las características que hicieron triunfar al sistema (multitarea, notificaciones, personalización e interactividad)

Ice Cream Sandwich entra por los ojos

Siempre y cuando te guste el estilo que introdujo Honeycomb para las tablets (algo menos Tron), y con un pequeño impedimento hardware que creo es importante remarcar: desde mi punto de vista el sistema aprovecha demasiado bien la alta resolución del teléfono (muchos elementos en pantalla) con el que ha sido presentado (1280×720 píxeles), ya me gustará a mi ver qué tal se las ingenia con terminales actuales.
Antes de pasar a tocar punto por punto, vamos a ver material multimedia oficial de Ice Cream Sandwich, un vídeo en esta ocasión vale más que mil palabras:

Gestos por delante de botones

En realidad, el nuevo sistema toma lo mejor de Android 2.3 y Android 3.0, combinándolo con una nueva tipografía exclusiva denominada Roboto, diseñada para una cómoda lectura en pantallas de alta resolución.
Otro de los aspectos novedosos es la inclusión de botones virtuales en la barra del sistema, permitiendo realizar las típicas opciones de navegación Android (atrás, inicio, aplicaciones recientes). Tanto la barra de sistema como los botones virtuales están presentes a lo largo de las aplicaciones que usemos, pero podemos hacerla desaparecer en un modo a pantalla completa, y también giran dependiendo de la orientación del equipo. Tenemos una tercera barra de acciones contextual a la aplicación, que suele ir en la parte superior.
tactiles navegación
Matías ha considerado que los gestos son mucho más intuitivos y apropiados que los botones, y la verdad es que al final aparecen por todas partes. Os resumo algunos aspectos de la interfaz y funcionamiento de Ice Cream Sandwich:
  • La barra de notificaciones se sigue conservando en la parte superior en lo que hemos visto para teléfonos, con un diseño translucido que la hace más atractiva y muestra las caras de nuestros contactos. Las notificaciones también son accesibles desde la pantalla de bloqueo.
notificaciones
  • La forma de crear carpetas nos recordará a iOS, sólo tenemos que arrastrar el icono de una aplicación encima de otra.
  • en la parte inferior de la pantalla tenemos una barra con nuestras aplicaciones favoritas, y en el centro de la misma el acceso al launcher de aplicaciones.
  • La barra de búsquedas de Google siempre está presente en los escritorios, y se ha buscado un funcionamiento algo así como el “Just Type” de webOS.
widgetd
  • Los Widgets pueden moverse y cambiar de tamaño al más puro estilo Honeycomb.
  • Ya es posible tomar capturas de la pantalla, se consigue con la combinación del botón para bajar el volumen y el botón de encendido.
  • Tenemos un botón que nos abre el gestor de multitarea, con una representación similar a Honeycomb, pero ahora podemos eliminar una tarea con un gesto horizontal.
normal
  • Mejoras en el funcionamiento del teclado, con un nuevo sistema de diccionarios y recomendaciones. Se permite arrastrar el texto copiado de forma tácil.
  • Se introduce un nuevo sistema de reconocimiento de voz que nos corrige y subraya el texto dictado en tiempo real para evitar errores de escritura. Con un simple toque podremos ver las sugerencias de Android y corregirlo.
  • En los comentarios nos apuntan de que Ice Cream Sandwich hereda de Honeycomb laaceleración por hardware, lo que consideramos una mejora en potencia para mover la interfaz.

Un navegador web de primera clase

Ventana web
Parte vital en un sistema operativo móvil, y uno de los puntos en los que Google trabaja concienzudamente. Os enumero algunas de las novedades que nos llegan con Ice Cream Sandwich:
  • El navegador puede abrir ahora hasta 16 pestañas a la vez
  • Se puede cambiar con facilidad de la versión móvil a la web completa, cuestión que algunos agradecemos
  • Nueva gestión visual de las diferentes ventanas
  • Mejor sincronización con Chrome a través de nuestra cuenta de Google
  • Posibilidad de guardar para leer después una página, aunque no tengamos conexión
Las mejoras en el rendimiento del renderizado de páginas también ha sufrido mejoras destacables, con actualizaciones en WebKit y en el motor Javascript V8:
Ice Cream Sandwich

Subiendo de nivel las aplicaciones principales del sistema

  • Gmail: la interfaz ha sido renovada, ahora tenemos hasta un par de líneas en la preview que nos permite no tener que abrirlos en muchas ocasiones. También nos encontramos una más adecuada barra de acciones contextual, y la posibilidad de guardar hasta 30 días de mensajes para las búsquedas. Tenemos un nuevo widget para Gmail que puede cambiar de tamaño a nuestro antojo.
  • Calendario: también remozada para la ocasión y como Gmail también recibe un acercamiento a los gestos.
control datos
  • Monitorizar datos es algo que se plantea vital para muchos usuarios, por lo que Google ha incorporado un sistema que nos monitorizará todo el consumo de datos (3G y WiFi), tanto por aplicaciones, como en general. Nos indicará el consumo global en una fecha determinada, o bien podremos pedir que nos avise al superar una cantidad.
  • La cámara también ha tenido su correspondiente tratamiento, con acceso desde la pantalla de bloqueo, modo panorámico continuo, y una nueva galería. Quizás la novedad más destacable la encontramos en el sencillo pero eficaz editor de imágenes (filtros, recortes, quita ojos rojos).
edición Cámara
  • La nueva aplicación de contactos, presentada en inglés como “People”, nos muestra a nuestros contactos en cuadros táctiles de generoso tamaño, que nos dan acceso a la información personal de cada uno. Una de las novedades es la posibilidad de enviar mensajes rápidos como respuesta a una llamada que no podemos responder.
People

Android Beam, compartiendo vía NFC

Aprovechando la tecnología NFC presente en los teléfonos Nexus, y que poco a poco será más importante en el sistema Android, con Beam se pretende conseguir que compartir información con nuestros teléfonos sea tan fácil como acercarlos.
Podremos compartir desde enlaces a aplicaciones, contactos, vídeos o música, y sin menús en los que generar el hermanamiento entre dispositivos, sólo acercar ambos dispositivos con tecnologíaNFC.
Android Beam

Face Unlock, un desbloqueo muy singular

Face Unlock se trata de una las funcionalidades más innovadoras de Ice Cream Sandwich, que también ha mirado por mejorar aspectos de seguridad en el sistema.
Tal y como podéis intuir, o traducir, consiste en que nuestra pantalla de bloqueo se desactive con el reconocimiento de nuestro rostro, dejando a un lado los antiguos patrones o PINs. Veremos cómo funciona esto en la práctica.
Face unlock

Wi-Fi Direct y Bluetooth HDP

Estamos encontrándonos cada vez más terminales que cuentan con la especificación WiFi Direct, que permite conectar a equipos a través de la red WiFi, sin que Internet tenga nada que ver en el asunto.
Google abre la puerta a los desarrolladores para que usen esta nueva posibilidad con Ice Cream Sandwich. Se podrá utilizar para compartir datos, realizar streaming de vídeo, o conectar nuestros teléfonos con impresoras sin necesidad de cables.
Android 4.0 también da soporte a dispositivos Bluetooth Health Device Profile (HDP), dando acceso a los desarrolladores para trabajar inalámbricamente con sensores y equipos que encontramos en hospitales, centros deportivos, etc.
Samsung Galaxy Nexus, presentado oficialmente
Una vez descritas todas las novedades, y con la esperanza de poder probarlo pronto para poder tener una opinión real del sistema, nos quedamos con un excelente sabor de boca con esta actualización, especialmente por el aspecto visual conseguido, las innovadoras funcionalidades estrenadas, y la buena sintonía que tiene con el hardware del Samsung Galaxy Nexus, habrá que ver qué tal aparenta en un Nexus S.
Más información | Android Developers
Imagen | This is My Next

Como solicitar tu dominio.es de forma segura.

[+/-]


Para solicitar tu dominio.es de una forma segura,la mejor opción es hacerlo desde red.es que es la encargada en España de gestionar el registro de los dominios “.es” y pertenece y esta regulado por el Ministerio de Industria,Turismo y Comercio del Gobierno de España  además si lo que quieres es vender dominios.es,desde esta web te puedes hacer agente registrador.
crear_tu_dominio.es 
Si lo que no quieres es complicarte la vida y además buscas un asesoramiento para crear tu dominio.es,yo te aconsejaría que utilizaras el servicio de los agentes registradores acreditados y siempre con la garantía de red.es
crear_tu_domino.es_1
Esta pagina también incluye un buscador de dominios,para saber si el domino que quieres esta disponible y así poder registrarlo.
crear_tu_dominio.es_2 
Un consejo: la mejor gestión y la mas barata la conseguirás a través de los agentes registradores que además te ofrecerán otros servicios que te pueden interesar.

Programa para crear tu web.

[+/-]



crea_tu_web
El programa Dreamweaver CS5 trae algunos detalles nuevos que lo distingue de los demás programas de este tipo,lo mejor es que el usuario no tendrá que usar varios programas adicionales para crear su Web.

Adobe Dreamweaver es uno de los mejores  editores de HTML visual, diseñado para desarrolladores profesionales. Dreamweaver hace muy fácil el crear complejas páginas Webdinámicas, con la conocida técnica de "arrastrar y soltar", permitiendo que los diseñadores puedan crear entornos Web sin tener que escribir una sóla línea de código.

Adobe Dreamweaver es compatible con las últimas tecnologías y tendencias en el desarrollo web, incluyendo Javascript, CSS, AJAX, XHTM, Adobe AIR, Smart Objects de Photoshop, subversiones (SVN), frameworks Javascript y un largo etcétera.

La compatibilidad con los diversos navegadores no será un problema con Adobe Dreamweaver gracias a la tecnología Live View (una especie de vista previa) y con la ayuda de Adobe BrowserLab, un servicio online con el que comparar cómo se ve tu página en distintos navegadores.

Adobe Dreamweaver está mejor preparado que nunca las últimas tendencias, y tiene un excelente soporte para CMS como Wordpress, Joomla! y Drupal.
Cambios recientes en Adobe Dreamweaver:
  • Integración con CMS como Wordpress, Jomla! y Drupal.
  • Inspección de CSS.
  • Integración con Adobe BrowserLab.
  • Ayuda en la sintáxis con código propio.
  • Integración con Business Catalyst.
  • Mejor soporte para Subversión. 
Para utilizar Adobe Dreamweaver necesitas: Sistema operativo: WinXP/Vista/7.

Mejor contador de visitas para el blog.

[+/-]


El mejor sistema para contar, controlar y analizar las visitas de tu blog y además de forma privada es Google Analytics,no perdáis el tiempo en colocar contadores de visitas inútiles.
Antes de empezar te preguntaras:
¿Que es Google Analytics? Es un sistema de estadísticas web que ofrece Google,y con el que podrás obtener detallados informes sobre el numero de visitas que han tenido tu pagina web,y podrás analizar desde que país o ciudad te visitaron,que palabras claves utilizaron,cual es la ruta que siguieron por tus paginas…..y mucho mas.
¿Cuanto nos costara utilizar Google Analytics? Nada,cero patatero es GRATIS.
¿Como nos damos de alta en Google Analytics? Puedes hacerlo desde esta pagina web  te registras y crea tu cuenta.Si ya tienes tu cuenta de Blogger cuando estés en tu escritorio arriba a la derecha veras que hay un enlace que pone Mi cuenta,pulsamos y entraremos en el menú deGoogle cuentas dentro veras la opción Analytics.
¿Tenemos que instalar algo para utilizar Google Analytics? Solamente tendremos que poner los datos que nos pidan y seguir los pasos y al final nos darán un código que insertaremos en la plantilla de nuestro blog.
Una vez creada la cuenta y hechos todos los pasos ¿donde puedo encontrar el código de seguimiento? ¿como lo añadimos al blog para que nos haga el seguimiento?.
  • Accede a tu cuenta desde aquí:http://www.google.com/analytics/.
  • En la página Visión general, seleccione la cuenta que incluya el perfil y el código de seguimiento en cuestión. Recuerde que cada perfil contiene un código específico.
  • Seleccione el perfil en las cuentas de la página Visión general.
  • Haga clic en Editar en la columna Acciones del perfil.
  • Haga clic en Comprobar estado en la parte superior derecha del cuadro "Información del perfil del sitio web principal".
  • Copiar el código de seguimiento del cuadro de texto que aparece en la secciónInstrucciones para añadir código de seguimiento.
Una vez tenemos copiado el código no vamos a nuestra plantilla y entramos en Diseño – Edición de HTML – pulsamos en – Expandir plantillas de artilugios y buscamos la etiqueta  </body> y justo antes de esa etiqueta pegamos el código de seguimiento,cuando terminemos no olvidarse de pulsar GUARDAR PLANTILLA.
NOTA IMPORTANTE:Antes de tocar la plantilla de artilugios conviene hacer una copia de seguridad por si falla algo. 

Titulo del blog en movimiento.

[+/-]


Puedes ver como funciona justamente arriba en la barra de titulo y veras como aparece el titulo de mi blog en movimiento.
Para implementarlo en tu blog, simplemente tienes que ir a Diseño> Edición de HTML y sin expandir plantillas de artilugios buscamos pulsando conjuntamente las teclas: (Ctrl+F) y localizamos: </body> y justo encima pegas el siguiente código: 
<SCRIPT LANGUAGE='JavaScript'>
var txt=" SuperBlogger, bla, bla, bla, bla... ";
var espera=100;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</SCRIPT>
Tan solo debes poner en donde esta rojo el titulo de tu blog y también puedes modificar la velocidad en el numero 100 a mayor numero,el titulo de tu blog ira mas despacio.

Trucos,tutoriales y herramientas para mejorar tu blog.


Mejora la legibilidad del texto con CSS

[+/-]




La legibilidad, un conjunto de características que hace a un texto o tipografía más fácil de leer, puede mejorarse de varias formas. Una de ellas la introdujo Firefox 3.0 y que ahora adoptan Safari 5, Chrome y la beta de webkit (del que derivan otros navegadores) y se trata de un propiedad CSS que controla el renderizado de un texto: text-rendering.

¿Cómo funciona?

Funciona y se aplica como cualquier otra propiedad de CSS, text-rendering puede tomar los siguientes valores:
  • optimizeLegibility – Que da prioridad a la legibilidad del texto. Habilita el kerning y laligadura de la tipografía.
  • auto – por defecto usa optimizeLegibility para texto de menor tamaño que 20px yoptimizeSpeed para los de mayor tamaño.
  • optimizeSpeed – Que da prioridad a la velocidad con que se muestra un texto.
  • geometricPrecision – Da prioridad a la geometría del texto.
Ejemplos:
body  { text-rendering: optimizeLegibility; }
.post  { text-rendering: optimizeSpeed; }

Comentario

Una propiedad CSS que otorga al diseñador una herramienta de control más sobre el texto, por ahora el soporte es limitado, pero que seguramente irá aumentando con el transcurrir de las versiones de los navegadores.




Antes de realizar ningún cambio, te recomendamos que "respaldes" la plantilla, para evitar, así, futuros problemas. Quizá, en algún momento te sirva de ayuda en algún... apreto


Ir al centro | Ir arriba | Ir abajo



































Logo de Android Honeycomb creado con propiedades de CSS3 por Manz (Emezeta blog), y después modificado por Juan