Bordes Redondeados en todos los exploradores con CSS3

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Bordes Redondeados en todos los exploradores con CSS3

Una de las cosas que frenan un poco la evolución de web es el tiempo que tardan algunos exploradores adoptar las innovaciones de los códigos más usados como HTML y CSS. En el caso que tratamos me refiero a CSS3, que incluyen una gran cantidad cosas nuevas que nos facilitan la vida a la hora crear nuestros sitios y a su vez le ofrecen una mejor experiencia al visitante. Pero la realidad es que algunas cosas como los bordes redondeados con CSS3 solo es visible en los exploradores más modernos, por esa razón debemos aplicar algunas líneas de código adicional para que sea visible en la mayoría de ellos.

Como usar Lightbox de Widgetkit Yootheme

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Como usar Lightbox de Widgetkit Yootheme

Hace poco estuve hablando del maravilloso plugin de muchas funciones de Yootheme Widgetkit para WordPress, la vez pasada desglose un poco todas sus características, sin embargo algunos de sus complementos requieren algo más que activar el plugin para usarlo y la documentación oficial del mismo, además de estar en inglés, fue hecha para desarrolladores acostumbrados al código, por ende tratando de echar una mano a los webmaster no tan expertos voy mostrar cómo usar la función de Lightbox para objetos que es una por las que más me preguntan y sin duda una de las más complicadas. Además no cae nada mal leer una guía sobre el plugin en español.

Botones sociales de forma horizontal

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Botones sociales de forma horizontal

Partiendo de la petición de Miguel en su comentario en tuto del Botón deTwitter y para todos aquellos que sea necesario va dirigido esta guía para colocar los botones sociales de nuestro sitio de forma horizontal, abarcando desde la más práctica y sencilla usando solo HTML con unos simples atributos de CSS, hasta una un poco más compleja y sofisticada, para quienes desean aplicar un poco más de código y quieran jugar más con los maravillosos poderes de CSS. Las siguientes técnicas son aplicables a cualquier sitio sean manejados por WordPress, Joomla o cualquier otro CMS, ¡hasta para foros!, el único requisito es que el sitio soporte HTML y creo que incluye a todos.

Botón de Twitter efecto Rollover con CSS

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Botón de Twitter efecto Rollover con CSS

El efecto rollover consiste en hacer cambiar un objeto al pasar el mouse sobre él, esto resulta muy atractivo y sofisticado si se aplica bien, aunque existen varias formas de hacerlo la más fácil y efectiva es mediante unas pocas líneas de código CSS. Este efecto es muy usado en los botones de redes sociales de muchas páginas, por ende; no es una novedad aquí, pero la intención es mostrar cómo se hace y que todos puedan aplicar su propio estilo. Esta vez lo haremos creando un atractivo botón de twitter pero básicamente el fundamento es el mismo para cualquier objeto que queramos aplicarlo.

Menú Simple con etiqueta menú en HTML5 y CSS3

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Menú Simple con etiqueta menú en HTML5 y CSS3

La promesa de HTML5 se basa en la semántica, que no es más que llamar las cosas por su nombre. Esto hace el código más simple para el maquetador, quien edite a futuro y los crawler de buscadores. Sin embargo a pesar del esfuerzo de los exploradores más modernos en integrar todas las características de HTML5 y CSS3, aun no todo soportan los atributos de la etiqueta ‘menu’. Aunque si soportan la etiqueta como tal y podemos empezar a usarla para empezar a poner el código de nuestros sitios al día recordando que para garantizar que se visualice perfectamente debemos usar algunos trucos.

Círculos con CSS3 y efecto hover

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Círculos con CSS3 y efecto hover

Siguiendo con los tutoriales sencillos pero divertidos de CSS3 para animar aquellos que temen un poco al código, continuamos con los círculos y los efectos que podemos agregar para hacerlos más atractivos. Basado en el mismo principio de nuestro tutorial circulo con CSS3, agregaremos algún condigo adicional y crearemos el efecto hover que se trata de hacer cambiar de color el objeto cuando se coloque el mouse sobre él. Es el mismo efecto que tienen en muchos sitios cuando colocamos el mouse sobre los enlaces y vemos que este cambia, sin embargo el método será diferente y mucho más fácil. Tendremos nuestro mismo círculo color verde y cuando coloquemos el cursor sobre él este cambiara a color verde claro. Veamos cómo.

Como hacer círculos con CSS3

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Como hacer círculos con CSS3

CSS3 es todo un mundo nuevo a descubrir a la hora escribir nuestros estilo, una de las que más divertida puede parecer es la capacidad que tiene de crear formas y figuras solo limitado por tu imaginación. En el pasado a la hora de incluir bordes redondeados en nuestros sitios debíamos recurrir a imágenes, esta; si bien era una solución efectiva, agregaba peso a la carga de la página web. Ahora es tan simple de hacer con pocas líneas de código usando las técnicas de CCS3 y todo será interpretado por el explorador, lo mejor es que es aún mucho más fácil que hacerlo con imágenes.

Crear Texto Editable con HTML5

Escrito por Jose M Ramirez en . Publicado en Tutoríal


Unas de las mejoras que trajo HTML5 fue la modificación del atributo ‘contenteditable’ haciendo más fácil integrarlo a cualquier parte de nuestro código en algunas etiquetas. Aunque realmente esta función ya existe en muchos sitios web con plugins y editores de texto externos tipo WYSING, la siempre es tener todo de forma nativa, tomando en cuenta que esto no supera la manejabilidad del que ya es el más usado, se puede considerar el atributo como un inicio de los editores texto en HTML5.

La aplicación es increíblemente sencilla si estas familiarizado con HTML, simplemente se agrega luego de la etiqueta como cualquier atributo seguido de ‘true/false’ para activar o desactivar.

Como Eliminar Blog de Blogger.com

Escrito por Jose M Ramirez en . Publicado en Tutoríal


Hace poco me preguntaron cómo eliminar un blog de blogger.com, aunque me parece que es muy fácil; cuatro días después otra persona me hizo la misma pregunta. Rápidamente note que la confusión existente es gracias a la nueva interfaz de blogger donde algunos puedan ver movidas ciertas funciones que no desaparecieron, solo cambiaron de lugar. En vista de lo comentado me pareció oportuno mostrar de manera gráfica como se hace y cualquiera que tenga la duda pueda hacerlo fácilmente.

Las razones para que eliminar un blog pueden ser varias, tanto como no querer continuar un proyecto o bien mudarlo a otra plataforma más flexible como wordpress en hosting propio.

Enlaces NoFollow con HTML

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Enlaces NoFollow con HTMLLos enlaces con la relación ‘NoFollow’ son importantes para el SEO, es la forma que le decimos a los buscadores que no recomendamos ese enlace, que es una referencia útil para el contenido pero no debe seguir ese enlace. Tomando en cuenta que los buscadores cuentan la cantidad de enlaces ‘DoFollow’ (enlaces que si se debe seguir) que tienes en tu sitio y mientras mayor sea el numero peor será para ti, lo mejor es colocar los enlaces con la relación ‘NoFollow’ y curarse en salud.

Para hacerlo existen muchas formas dependiendo de que si tu sitio está en CMS o bien hecha a mano a puro código personalizado, sin embargo la cual sea el caso, el método que no fallara para ninguno de los casos, es hacerlo usando HTML.

Sígueme en twitter

Twitter

Suscríbete al Feed

RSS-Feed

Red de Blogs

Red de Blogs iBlogLabs