Recursos

6 ejemplos de CSS3 puro sin JS

1 comentario

Los desarrolladores web siempre tenemos curiosidad por aprender nuevas técnicas para la construcción y mejora de sitios web. CSS3 ha sido un importantísimo punto de inflexión para los desarrolladores frontend, ofreciendo una colección de nuevas propiedades soportadas por los navegadores web modernos.
Estos ejemplos de fragmentos (snippets) de código CSS libre son perfectos para cualquiera que quiera avanzar en el mundo del CSS. Cada fragmento utiliza CSS puro para crear interacciones que hasta hace muy poco sólo eran posibles con programación JavaScript.

Menú acordeón

Normalmente un menú de acordeón estaría relacionado con una función de evento click JavaScript. Pero como CSS puede manejar efectos a través de la pseudo-clase :checked es más fácil que nunca.

CSS Slider

JavaScript siempre ha sido la solución para cualquier slider de imagen o galería de fotos. Normalmente sería difícil controlar los eventos de clic a través de CSS3, pero los botones de radio nos pueden ser útiles.

Parallax fondo de estrellas animado en CSS3

Si bien el movimiento continuo y el diseño parallax residen sobre todo en el ámbito de jQuery, ahora es posible crear movimiento con CSS3 puro. El fondo se ha creado usando algunos efectos de degradado junto con una función de animación CSS3.

Imagen de fondo estilo bloc de notas / postit en CSS puro

El fondo de block de notas / postit, puede ser elaborado con una serie de bordes, sombras y efectos de degradado combinados en un sola div. Otro trozo de papel se gira ligeramente para crear el efecto de profundidad.

NES en CSS3 puro e interactivo

Una creación bastante sorprendente. No sólo la NES es escalable a diferentes tamaños y construida exclusivamente en CSS, sino que también tiene características que son completamente interactivas, por ejemplo, al hacer clic en el botón de encendido el piloto se enciende.
Este fragmento requiere más de 600 líneas de código CSS. Pero teniendo en cuenta que esto es posible en el año 2016, va a ser interesante ver lo que se podrá lograr en 2 años.

Otro del mismo tipo pero sin interacción, Apple Watch en CSS puro:

Jesús Quintana6 ejemplos de CSS3 puro sin JS
leer más

D3 JS – Manipulación eficiente de documentos basados en datos sobre W3C

Sin comentarios

D3.js (Data-Driven Documents) es una biblioteca JS para visualizar datos en formas gráficas dinámicas. Se trata de una herramienta para la visualización de datos bajo estandards W3C haciendo uso de HTML5, SVG, JavaScript y CSS3. A diferencia de muchas otras bibliotecas, D3 permite un gran control sobre el resultado visual final.

D3 permite enlazar datos al DOM y aplicar transformaciones. Por ejemplo para generar una tabla HTML a partir de una serie de números. O bien utilizar los mismos datos para crear un gráfico interactivo SVG con transiciones e interacción.

Más info: http://d3js.org/

ej:

Jesús QuintanaD3 JS – Manipulación eficiente de documentos basados en datos sobre W3C
leer más

Google SERP Tool – Previsualización de resultados de búsqueda en Google

1 comentario

Resultados de búsqueda en Google

Un resultado típico

Título: la primera línea de cualquier resultado de búsqueda es el título de la página web. Haz clic en el título para acceder a esa página web.
URL: la dirección web de la página web del resultado aparece de color verde.
Fragmento (Descripción): se trata de una descripción de la página web que aparece debajo de la URL y que puede incluir un extracto real del texto de la página. Los términos de búsqueda aparecerán en negrita para que te sea más fácil decidir si la página contiene lo que buscas.

Vista previa

Título de la página
www.maismedia.com
Esto es un ejemplo de descripción en los resultados de Google. Este contenido tiene un máximo de 156 caracteres.
Jesús QuintanaGoogle SERP Tool – Previsualización de resultados de búsqueda en Google
leer más

Consejos prácticos para salir de la penalización Penguin

1 comentario

En MaisMedia hemos recibido a Penguin como una actualización más; y es que con el correr de los días, se le va perdiendo el miedo al nuevo monstruito de google, y es que si nos ponemos analizar las cosas ya con la cabeza fría, nos daremos cuenta que Google Penguin y Panda trabajan básicamente en el mismo concepto: “El contenido de calidad y la calidad web”. Pero no hablo del contenido de un post, sino de evitar que las búsquedas de un resultado arrojen algo distinto de lo que en verdad busca el usuario; es más, tal es su relación que podríamos a considerar a Penguin como la actualización de Panda.

Ahora bien, también debemos hablar de las “pequeñas – grandes” diferencias, y es que mientras Panda se centra en la originalidad de los contenidos y elimina o considera de baja calidad el contenido copiado, Penguin trabaja en la supresión de contenido spam, es decir, en aquellas webs que hacen mal uso del SEO: excesivas palabras clave, texto oculto, etc. y se encontraban gracias a esto gozando de las primeras posiciones.

Si tu web fue golpeada por la actualización entonces lo más probable es que estos pequeños pero muy útiles consejos puedan ayudarte, si no a recuperar tus otrora excelentes posiciones de la noche a la mañana, sí a comenzar con el trabajo que, realizándolo de forma sostenida, dará frutos que no se verán desplomados por una actualización futura.

  • Lo primero que debes hacer es comprobar que las visitas han bajado desde la fecha de lanzamiento del pingüino, 24 de abril, si no es a partir de esta fecha la bajada es debida a otras causas.
  • Comienza o mejora el uso de Google Webmaster Tools; esta herramienta es muy útil ya que no solo te da todo tipo de orientación relacionada con el sitio web sino que cuenta con herramientas que te ayudan a hacer buen SEO; detectando así errores de mapa del sitio, o la opción de recibir mensajes de Google que informan acerca de cualquier error que se ha cometido.
  • La navegabilidad es un factor muy importante si hablamos de calidad, por eso preocúpate de los “pequeños grandes detalles”, los ítems deben estar claramente visibles, nada de diseños inusuales u otros errores que hacen que los usuarios se vayan rápidamente de tu página.
  • Demasiados anuncios solo te perjudicarán, es de entender buscar rentabilidad, pero eso no significa que los usuarios deban perderse entre el contenido y los anuncios.
  • Ponte en el lugar de un usuario de lo más crítico, de esa forma se podrá observar cuales son las posibles causas de abandono, ya que un alto porcentaje de abandonos o rebote es perjudicial, también de cara a Google.
  • El abuso de palabras clave. Esto ya está más que dicho, y aún hay muchos que caen en el mal SEO. Revisar el contenido y constatar que no es está incurriendo en esto ya sea de forma consciente o inconsciente es una buena medida. Si es necesario cambiar contenido es hora de ponerse manos a la obra.
  • Deshacerse de spam back links; olvídate de esos “programas de 5.000 links por 5 dólares”, ya que no le agradan a google.
  • Si vas a conseguir enlaces, que sean buenos, temáticos, de páginas con autoridad y con contenido relevante.
  • Variación de los anchor y urls de la página. No se pueden conseguir links solo a la home y solo con una keywords específica.
  • No hagas links o post invitados a páginas que se alejan del tema de tu web.
  • Nada de comentarios Spam.
  • Uso de los medios sociales, léase USO, mas no abuso.
  • Agrega botones para compartir en google Plus, Facebook, Twitter, etc.

Estos son algunas recomendaciones que podrían ayudarte a salir del objetivo pingüino o a no caer en él, si aun permaneces sin ser golpeado no cantes victoria, el algoritmo continúa rastreando.

Si tienes dudas, o comentarios, no dudes en dejarlos.

ElizabethConsejos prácticos para salir de la penalización Penguin
leer más

¿Cómo puede influir la AI en sus usuarios / clientes? II

Sin comentarios

La arquitectura de la información nace para los usuarios, y el motivo principal por el que estos acuden o usan una interfaz es porque tienen necesidad de  información.

Ahora bien, las necesidades de información pueden variar ampliamente y cada tipo de necesidad de información provoca que los usuarios muestren comportamientos diferentes, así, estos tipos de necesidad de información pueden ser: conocida (búsqueda de elemento conocido), o no conocida (búsqueda exploratoria). Por ejemplo, es distinto buscar el número de teléfono de una persona conocida en el sitio web de una organización, que hacer una búsqueda exploratoria sobre un tema desconocido en Wikipedia.

La búsqueda exploratoria,  suele ser abierta, ya que no hay expectativas claras de obtener una respuesta correcta (al contrario que la búsqueda de elemento conocido). En esta búsqueda nos conformamos con algún resultado válido, para usarlo en la siguiente iteración de búsqueda.

Pero, ¿cómo pueden conocerse estas necesidades y comportamientos de los usuarios? Existen varios métodos, pero destacan dos: Analítica de búsqueda e investigación contextual. La analítica de búsqueda implica revisar las consultas de búsqueda habituales de los usuarios de un sitio web, lo que nos hará entender mejor las necesidades de información.

La investigación contextual, por el contrario, es un trabajo de campo que se basa en la observación de los usuarios mientras interactúan en su entorno, y en este contexto, averiguar el porqué de sus acciones.

De esta manera, el objetivo de la arquitectura de la información es satisfacer la experiencia de los usuarios, tratando de obtener las respuestas correctas a las preguntas adecuadas en el momento preciso, contribuyendo, así, a una experiencia satisfactoria y positiva.

Jesús Quintana¿Cómo puede influir la AI en sus usuarios / clientes? II
leer más