Infórmate sin compromiso, ¡Te llamamos gratis!

Webbing Barcelona catalán Webbing Barcelona castellano info@webbing.cat - Telf: +34 93 169 65 46
Preprocesadores CSS para diseño web

Preprocesadores de CSS: ¿Qué es Sass?

A la hora de programar toda ayuda es buena. Los profesionales de la rama cada vez nos vemos más colapsados pues, por suerte, el comercio digital es el presente y el futuro, de manera que todo el mundo quiere estar en Internet. Esto hace que, por supuesto, nosotros tengamos que utilizar recursos variados que se adapten a las peticiones de cada cliente. Y uno de ellos son los preprocesadores de CSS, de los que hablaremos a continuación.

¿Qué es un preprocesador CSS?

Volviendo con terminología de diseño como las diferencias entre UX y UI, vamos a ver qué es un preprocesador CSS:

Un preprocesador CSS es una herramienta de traducción de hojas de estilo que son comunes, todas ellas, a un código estándar que los navegadores pueden reconocer. Esto es, un útil para escribir en un código más básico, con bucles, condiciones, variables y funciones, que el CSS que después será convertido.

Cuentan con utilidades que no encontramos en el lenguaje CSS y que, por ende, los navegadores no pueden interpretar. Algunas son mixins, anidación de servidores, variables…

Preprocesadores CSS Mixin

Con este economizamos el tiempo gracias a que podemos, simplemente, escribimos menos código. También debemos destacar que tiene un mantenimiento sencillo y que es un recurso fácil de comprender, pues está muy bien organizado.

Como puntos negativos de esta herramienta encontramos el hecho de tener que aprender un nuevo lenguaje y que el código no sea tan común como se ve en otras circunstancias, pues requiere de compilación específica. Este, además, afecta directamente al flujo de desarrollo creado.

¿Qué Sass?

Sass es uno de estos preprocesadores mencionados. Hay otros que también tienen su sitio en el mercado, como es el caso de Stylus o de Less, si bien, queremos hablar en específico de Sass debido a que es el más utilizado de entre los preprocesadores actuales y tiene una demanda altísima.

Sass cuenta con una sintaxis de código que bien se puede dividir en dos grandes partes.

  • Sintaxis Sass. Difiere un poco de la sintaxis de CSS estándar, eliminando puntos y comas en algunos puntos, utilizando indentados…
  • Sintaxis SCSS. Se parece más a las de CSS, incluyendo algunos aspectos extra simplemente.

Código diseño CSS

A priori podría parecer que realizar estas modificaciones, alejándonos del CSS puro para aprender a usar código nuevo puede ser negativo, pues requiere de un mayor tiempo de aprendizaje, si bien, esta es la opción más acerada para el medio (y no tanto) plazo.

La solución pasa con centrarnos en esa parte de la sintaxis de Sass que se da en SCSS y que se acerca, por tanto, al estándar. De esta manera estamos utilizando código CSS validado y mantenemos nuestros conocimientos previos, que siguen siendo útiles en el caso que nos ocupa, así como la posibilidad de integrar códigos de estilo que ya pudiésemos tener.

La sintaxis SCSS nos permite trabajar diferentes aspectos de una variable que CSS no posibilita, pues, simplemente, se trata de declaraciones que aquí no existen. CSS tiene sus propias variables, pero trabajan con otra sintaxis.

Diseño web mobile

¿Cómo tener una página adaptada para móviles?

¿Te has dado cuenta de cómo la gente anda por la calle mirando su teléfono? En autobuses, bibliotecas, en el trabajo, en clase, en el baño… Grandes y pequeños, todos vivimos pendientes del nuestro y ello repercute, por supuesto, en el uso que hacemos de internet y, por ende, en las visitas que tengas en tu web. Ahora debes diseñar para quienes te visitan desde ese autobús y desde esa biblioteca y la manera de hacerlo es tener una página adaptada para móviles. ¡Descubre lo que se lleva para conseguirlo!

Elementos de mejora para tener una web adaptada para móviles

Como no podía ser de otra manera, Google lleva la voz cantante y, a día de hoy, lo que más puede necesitar tu sitio para ser compatible con dispositivos móviles tiene mucho que ver con esta empresa. Ahora descubrirás por qué.

Mobile-First

Se trata de un algoritmo creado por Google que prioriza, cuando se realice una búsqueda, la aparición de webs que dispongan de versión móvil. Esto significa que, por muy bien que te montes tu desktop, si es pobre en contenido mobile, no te servirá de (casi) nada.

Diseño mobile first

Características y consideraciones:

  • Prima la usabilidad, lo cual se calcula con tiempo de permanencia en el sitio y porcentajes de rebote.
  • Facilitar la interacción con las redes sociales, que tanto se utilizan desde los dispositivos móviles.
  • El tiempo de carga debe ser mínimo. Esto no significa sacrificar en calidad sino realizar un trabajo exquisito de optimización tanto de los elementos multimedia como del propio contenido del sitio, su disposición, etc.
  • Trabaja con los tamaños para que sean cómodos de ver y palpar en una pantalla de pequeñas dimensiones.
  • No a los complementos de falsa, deficiente o nula compatibilidad con dispositivos móviles, tipo Flash.
  • Contenido audiovisual sí, pesa, pero es muy demandado; optimizar, optimizar y optimizar; ¡ah, sí! Y escoger aquel que tenga verdadero valor.
  • Popups pequeños para no molestar a la hora de navegar.

Accelerated Mobile Pages

Es un formato de diseño web que busca satisfacer lo que el cambio en las tendencias de búsqueda nos muestra en la actualidad.

Los dispositivos móviles se utilizan ya tanto como los ordenadores para acceder a todo tipo de páginas web, con un incremento que, además, sigue dándose, por lo que las predicciones vaticinan que el acceso desde estos dispositivos sobrepase al que realizamos desde los más convencionales dentro de muy poco.

Por ello, se busca disponer de versiones de los sitios web que, como indican las siglas, sean aceleradas, de manera que ofrezcan el contenido de una manera rápida y con el menor consumo posible de datos, y esto es precisamente lo que defiende este nuevo concepto surgido de la mano de Google, las Accelerated Mobile Pages.

Accelerated Mobile Pages

Características y consideraciones:

  • Saber que se trata de una tecnología de código abierto que se puede mejorar diariamente por cada usuario por lo que resulta ser muy flexible dentro de lo que pide.
  • Requiere de una web nativa de escritorio desde la que se le hará referencia directa a la versión AMP.
  • Su objetivo principal es la optimización de los tiempos de carga, de manera que el usuario navegue rápidamente sin tener que esperar ni un instante.
  • Se elimina todo elemento innecesario, cualquier floritura no será bienvenida.
  • Aunque es agradable para Google, es incompatible con el contenido de ciertos sitios, de manera que no siempre resulta recomendable implementarla.

¡Hasta aquí este post! Esperamos que te haya gustado 🙂 Y recuerda contactar con nosotros para cualquier duda o comentario.

Diseño páginas web para startups

Diseño de páginas web para startups y emprendedores

Tener presencia en internet es algo indiscutible si cuentas con cualquier tipo de negocio, en serio, no importa cuál. No sabemos si tienes que convencerte de ello todavía o si ya lo has asumido y vienes a por todas. Sea como sea, nosotros vamos a hablarte sobre el diseño de páginas web para startups y emprendedores, de manera que comprendas un poquito más lo que se lleva, lo que se busca y lo que tendrás que implementar.

7 consejos para que el diseño web para startups sea todo un éxito

Vamos con 7 aspectos que te ayudarán a hacerte una idea de lo que necesitas y, por supuesto, a empezar con tu proyecto en la red.

Social Design

Las redes sociales son el producto rey de Internet. Por ello, hacer que tu sitio se parezca a ellas en la medida de lo posible te ayudará. Especialmente debes buscar la manera de que tu contenido se pueda compartir fácilmente, pues al usuario le encanta hacerlo y conseguirás atraer mucho más público objetivo de tu target.

Organización sí o sí

Tengas mucho o poco, todo debe estar bien organizado, de manera que sea accesible de manera intuitiva. No te olvides de nada, desde tu catálogo de productos hasta tu blog pasando por la información adicional (de envíos, de empresa e incluso la política de privacidad).

La navegación debe ser sencilla y rápida así que no olvides definir áreas, hacer una clasificación categorizada, asignar etiquetas… ¡Y no te olvides de un buscador! El resultado debe ser un sitio que muestre lo que hay y en un orden de importancia, sin que el usuario tenga duda de lo que va a encontrar y dónde puede estar lo que busca.

Creación páginas web emprendedores

Diseño responsive

Innegociable. El diseño para el usuario es lo que se impone y ello significa, indudablemente, facilitar el acceso a tu sitio desde todo tipo de dispositivos. El acceso a internet es más común hacerlo desde estos, con especial despunte en las compras online.

A favor del feedback

En un momento como el que vivimos, el usuario no sólo valora el poder comunicarse con cualquier marca sino que lo necesita. Ser inaccesible, huir de las opiniones negativas, evitar la atención al cliente… Todo eso ya es cosa del pasado; ahora tienes que estar en todas partes y dar todas las opciones para que este se sienta escuchado y valorado, incluyendo, por supuesto, respuestas; una verdadera comunicación en la que todo el mundo pueda opinar, cara a cara, sobre tu imagen, tus productos, tus servicios postventa y todo lo demás. Tranquilo porque esto tiene su lado positivo, aunque ahora mismo no lo acabes de visualizar.

Blog

Piensa desde ya que tendrás que desarrollar un blog. Hacerlo tiene incontables ventajas, desde aquellas que pasan por ayudar con el posicionamiento en buscadores hasta las que hacen que el usuario tenga una mejor imagen de nuestra marca y nuestro sitio gracias a lo completo que es, a las soluciones que le aportamos, etc. y pasando por muchas otras.

Desarrollo webs para startups

Seguridad para el usuario

El usuario ya no es inocente y, sabiendo cómo funciona Internet (y teniendo otras opciones disponibles), no va a acceder a un sitio con escasa seguridad.

Necesitarás hacerte con firmas digitales, usar el protocolo https, comprar certificados SSL, implementar opciones para no recordar contraseñas…

Uso de calls to action

Las llamadas a la acción son necesarias para aumentar las conversiones, acciones que el usuario realiza en el sitio.

Debemos contar con una por objetivo pero, a su vez, no deben ser demasiadas ni atrapar a quien las percibe; es necesario, por tanto, hacer un buen análisis previo de lo que deseamos y buscar la manera de conseguirlo.

Hasta aquí este post tan interesante, esperamos que os sirva de ayuda a la hora de diseñar vuestra primera página web. Si estáis interesados en más asesoramiento o necesitáis ayuda para realizarla, no dudéis en contactar con nosotros a través de la web 🙂

Nueva actualización WordPress 5

Gutenberg: Cambios en la nueva versión de WordPress 5

Sí, no has escuchado mal, el CMS por excelencia hace un importante update y tenemos que acostumbrarnos porque es, y será, muy diferente. Vamos a ver cuáles son los cambios en la nueva versión de WordPress 5, la llamada Gutenberg.

Nuestro consejo, antes de comenzar, es que no te emociones y desees hacer la instalación de las novedades porque la cosa tiene molla. Mucho se ha hablado y queda por hablar y, sabiendo que disponemos de 3 añitos para hacer el cambio definitivo, más nos valdría esperar un poco, probar la nueva versión en webs que no estén en funcionamiento (ni sean la base de nuestro sustento).

Sea como sea, vamos a contarte de qué va Gutenberg! 🙂

Principales cambios en la nueva versión de WordPress 5

Principalmente se han realizado dos cambios considerables y que son los que van a caracterizar la versión: el editor en bloque y el tema para comprobar cómo es la nueva versión.

Editor de bloques Gutenberg

Este sustituye al editor clásico TinyMCE, con el consecuente y lógico cambio en el modo de trabajo en la plataforma.

De momento, el cambio más evidente se da en el propio espacio para el texto, el cual, desde ya, ahora se divide en bloques que vas creando con cada “Intro”. De este modo, cada párrafo se corresponde con un bloque diferente, como también quedan diferenciados todos los Hs o encabezados. Cada bloque cuanta con sus propias características para dar formato al texto.

Además, paulatinamente irán cambiando el resto de aspectos como son los widgets, los menús o la portada; todo pasará a funcionar mediante bloques.

Editor bloques Gutenberg

De momento, ello implica que:

  • Se tenga que aprender sobre React, la biblioteca de JavaScript.
  • El flujo de trabajo varíe considerablemente, incluyendo nuevas combinaciones de teclado, siendo la curva de aprendizaje algo acusada.
  • Existan muchos plugins, de momento, incompatibles.
  • Se den problemas de accesibilidad que dificulten las actualizaciones.

Tema Twenty Nineteen por defecto

Para acompañar este gran cambio en el mundo del diseño web se ha incorporado un tema completamente compatible con Gutenberg en todos los aspectos, de manera que el usuario ya pueda tener una idea final sobre cómo es la nueva versión y ofreciendo, por supuesto, la posibilidad de contar ya con un tema adaptado.

Tiene un diseño minimalista, un ancho completo en su estructura y una gran cabecera así como una considerable área para los widgets al final de página.

Nuevo tema wordpress gutenberg

Otros cambios en Gutenberg de WordPress

Aunque esto es lo más significativo, hay también alguna otra cosilla que no podemos dejar sin comentar.

  • El resto de temas también se han actualizado en diferente medida para que sean acordes a los estilos de los bloques.
  • Se han incorporado mejoras en la REST API.
  • Ahora hay nuevas APIs de bloques y de avisos, de manera que se pueden incluir mensajes emergentes en los bloques.
  • Se incluyen mejoras a nivel de seguridad, adaptabilidad y en el recorte de imágenes para utilizar en fondos.
  • Estos cambios en la nueva versión de WordPress 5: Gutenberg son compatibles con PHP 7.3.

Estos son algunos de los cambios que incorpora WordPress en su última versión, que no es poco. ¿Tienes alguna duda? ¡Contacta con nosotros para que la solventemos!

Mejores plugins para Wordpress en 2019

Los 5 mejores plugins para wordpress en 2019

Mentiríamos si dijéramos que no existen una multitud de plugins para WordPress, por lo que decir cuáles son los mejores es una tarea súper complicada.

Pero, ¿adivina qué? Como nosotros nos preocupamos por ofrecerte contenido inédito y de calidad, nos hemos tomado un tiempo para reunir los 5 mejores plugins para wordpress.

Eso sí, esta selección responde a ciertos criterios que, según nuestro punto de vista, tienen una gran importancia. Por lo que es posible que algunos de estos plugins no sean de tu interés.

Plugins que no pueden faltar en tu página web

Yoast SEO

Quizás te suene algo exagerado, pero este plugin es uno de lo más grandes tesoros dentro del mundo SEO para la optimización On Page. ¿Te preguntas por qué? Ya lo descubrirás.

En primer lugar, es bastante completo y te ayuda a posicionar casi todo tipo de contenido de manera rápida. Esto se debe a que su función principal es monitorear “On Page” de las variables del SEO mientras te encuentras redactando tu post.

¿Cómo? Simple, mientras vayas escribiendo, Yoast SEO te va mostrando indicadores en rojo, verde y ámbar, la calidad del contenido.

Y en segundo lugar, cuenta con un montón de herramientas: elección de palabras clave, información acerca de la cantidad de texto, la posición de las palabras clave dentro del contenido, el orden de los subtítulos, descripción y pre-visualización del snippet, etc.

Plugins para WordPress

Slider Revolution

Lo primero que debemos sobre Slider Revolution es que se trata de un plugin de pago con el que podrás marcar la diferencia en cuanto a efectos gráficos y animaciones en tus slides.

¿Te decimos la verdad? Con esta herramienta podrás realizar auténticas obras maestras en forma de slider. Y es que para sacarle provecho a este plugin prácticamente no hay límites, ya que puedes elaborar desde páginas completas hasta elementos más sencillos.

De hecho permite insertar cualquier tipo de contenido y es responsive, así que no tendrás problemas para que tu website se visualice perfectamente en cualquier dispositivo móvil.

W3 Total Caché

Esta es una maravilla de plugin que merece la pena tener porque sí. Ahora si nos preguntas las razones, para comenzar debemos decirte que con esta herramienta podrás elaborar un caché de los archivos y del contenido de tu sitio web para mejorar su velocidad de carga.

En resumidas palabras, te permitirá posicionarte mejor en los motores de búsqueda como Google, ya que puede conseguir que tu página web cargue en menos de tres segundos. ¿No es genial?

Otro punto fuerte de W3 Total Caché es que es muy pero muy fácil de usar.

Visual Composer

Visual Composer es como el santo grial, pero en el mundo de la composición y la maquetación web. ¿Sabes por qué? Por tres motivos principales.

Primero; no necesitarás usar códigos para maquetar tu web, segundo; podrás completar muchas expansiones disponibles y, tercero; te permite crear un sitio web o una entrada para tu blog personalizada añadiendo una infinidad de “shortcodes” programados.

En relación a esto último, tenemos que resaltar que estos “shortcodes” harán posible que ubiques imágenes, botones, tablas, desplegables, galerías, espacios, cajas de texto, etc., todo con solo hacer un clic. Y ni hablar de que te permite ordenar y estructurar estos elementos como lo desees.

Google Analytics para WordPress

Google Analytics

No exageramos cuando decimos que este plugin es un sueño hecho realidad para muchos. Porque sí, tener las mejores funcionalidades de Google Analytics en tu WordPress con solo introducir tu ID de Analytics resulta algo difícil de creer.

Aunque, lo mejor de todo es que no tendrás que programar absolutamente nada. ¿Qué te parece?, ¿ves por qué no decíamos que no exagerábamos?

Esperamos que te haya gustado este post que elaboramos con mucho entusiasmo. Si realmente te gustó, te invitamos a compartirlo con tus amigos para que mejoren el rendimiento de sus páginas webs. ¿Tienes alguna duda? ¡Recuerda que puedes ponerte en contacto con nosotros para que te ayudemos!

0
Connecting
Please wait...
Enviar un mensaje

Lo sentimos, ahora mismo no estamos online. Déjanos un mensaje y te contestaremos lo antes posible.

Nombre
* Correo electrónico
* Mensaje
Teléfono
    Entra en el Chat

    ¿Necesitas ayuda o deseas un presupuesto? Háblanos por el Chat online y te contestaremos al momento.

    Nombre
    * Correo electrónico
    * ¿Qué pregunta tienes?
    * Teléfono
    ¡Estamos Online!
    ¿Qué te ha parecido nuestra atención?

    ¡Ayúdanos a mejorar! ¿Te ha resultado efectivo nuestro chat?

    ¿Cómo nos puntuarías?
      Uso de cookies

      Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra Política de cookies, pinche el enlace para mayor información.

      ACEPTAR
      Aviso de cookies