Que es Popcoin: Descúbrelo hoy

Para ti que has estado pensando en invertir, Popcoin es la mejor opción para ti, tiene una comisión fija de 0,6% y para abrirla solo necesitas 100 euros, lo puedes confirmar por ti mismo, en cada sitio de críticas que visites corroborarás que Popcoin es la decisión acertada. Sigue leyendo para ver más información.

Popcoin es la plataforma de gestión de fondos de inversión que serán seleccionados según tu perfil de riesgo por nuestro equipo de expertos, lo que te da la maravillosa opción de invertir tu dinero en distintos activos de forma segura, cómoda y confiable, algo que no vas a encontrar con ninguna otra entidad en todo el mercado.

Popcoin siempre busca que sus clientes obtengan la mejor experiencia, por ello ha creado tres equipos en tres áreas diferentes, todos con un solo objetivo, que estés satisfecho. Estos equipos, como ya te mencioné se desarrollan en tres ramas distintas, éstas son:

  1. Equipo de Análisis de Mercado: Los profesionales que desempeñan su labor en esta área, están constantemente revisando y estudiando las estrategias de inversión de forma periódica, de esta forma se podrán realizar cambios en dichas estrategias oportunamente, además de seleccionar Fondos de Popcoin adecuados para que la rentabilidad del cliente esté siempre en aumento.
  2. Equipo de Gestión de carteras: En esta área, el equipo tiene la labor de ajustar las carteras, basados en las recomendaciones hechas por el equipo de Análisis de Mercado
  3. Equipo de Soporte: No por ser el último equipo es el menos importante, todo lo contrario, pues desde aquí los integrantes del mismo se encargan de prestar la ayuda necesaria durante la contratación de las carteras y el alta.

Es gracias a este equipo de profesionales y su dedicación que hoy en día son más las personas que confían en Popcoin para sus inversiones.

Las Ultimas Tendencias del Diseño Web

Este nuevo año, el 2018, viene muy cargado para todos los sectores. Esto incluye el diseño web; con diferentes tipos de diseños minimalistas, tipografías, etcétera ¡Un gran mundo por explorar! Hoy estoy aquí para traerte un listado de 7 tendencias en el diseño web que no deberás dejar pasar.

Cada año que culmina, más noticias te puedes encontrar respecto a las tendencias en el diseño web. Profesionales hacen uso de estas herramientas para lograr un posicionamiento ¿Cómo? Atrayendo a la gente con estilos completamente extraordinarios y originales.

¿Quieres comenzar con el listado? Si eres una persona involucrada en este mundo, lee con mucha atención ¡Te sorprenderás fácilmente! Comencemos de una vez:

  1. Tipografías handmade
    tendencias en el diseño web handmade

Este elemento ha formado parte de tendencias en diseño web de diferentes años y aún sigue durante todo este año.

El tipo de tipografía que estás presenciando le ofrece un carácter muy especial al diseño web, un toque extremadamente necesario al día de hoy. Generalmente, fuentes con un marcado personal tendrán mucha fuerza el año que se está por afrontar.

¿Quieres que te de una recomendación? Usa la tipografía en diseños de logotipos, cerca de zonas destacadas de la web; ya sea titulares, cabeceras, etcétera.

  1. Diseños limpios y minimalistas

Como debes saber, lo sencillo es hermoso en este mundo. Respecto a las nuevas tendencias en diseño web, es igual; menos es más. No obstante a que, posiblemente, la has visto por un periodo de tiempo largo, este 2018 pisa fuerte en el mundo y sigue en él.

Lo que destaca de los diseños estos, es el predominio por fondos blancos o en su defecto, claros. Sólo un color para la tipografía y pocos elementos dentro del excelente diseño.

Consiste en utilizar elementos del diseño muy necesarios para poder centrarse en la meta que la web persigue día tras día.

  1. Hero
    tendencias en diseño web corporativo hero image

Este tipo de tendencia implica, de cierta forma, una gran evolución en comparación a diseños habituales que yacían en los años anteriores.

Como lo puedes notar, años atrás era muy común hallar slides junto a varias imágenes incluidas dentro de las webs, pero lentamente se fue extinguiendo por todo el esfuerzo que se debía poner para visualizarlos. Por lo tanto, este nuevo año que ingresa lentamente a nuestras vidas, la tendencia son aquellas imágenes con un ancho completo así se capta la atención del potencial usuario sólo con un pequeño vistazo.

  1. Diseños modulares

Una de las ultimas tendencias en diseño web es el diseño por medio de módulos. Consiste en una forma de diseño donde diferentes elementos se reflejan como un solo módulo.  La característica principal que tiene el diseño, es que se muestra de forma cuadrada a partir de diferentes elementos.

Este forma de diseño es esencial para la adaptación de dispositivos: Móvil, Tablet y escritorio.

  1. Diseño exclusivo en móviles
    ultimas tendencias en diseño web movil

Una técnica poca vista, la cual se aplica en diseños personales. En las webs versión móvil, poco a poco, se encuentras diseños más y más exclusivos. En un parpadeo se pasará de un diseño responsive a propios.

Dicha técnica consiste en comenzar los diseños en la versión de escritorio, para luego, cuando todo esté a gusto del cliente, se fabrica el diseño para los móviles, utilizando de guía el mismo modelo.

Básicamente esto se aplica porque muchas personas están cansadas con las adaptaciones raras a un móvil, ya que los diseños son adaptados automáticamente.

  1. Degradado incluyendo varios colores

Otras de las tendencias en diseño web corporativo que se ha comenzado a ver, es el degradado aplicando diferentes colores en los fondos o elementos dentro de la web. Es recomendable no sobrecargar diseños haciendo uso del degradado. No obstante, si lo usas con una gran inteligencia y profesionalidad, puedes lograr un resultado creativo y vistoso.

¿Un consejo? Has degradados utilizando dos colores; principal y complementario ¡Nada más!

  1. Elementos con animaciones
    tendencias en diseño web animaciones

Como puedes saber, las animaciones están de moda dentro del rubro “diseño web” y este año entrante se podrán apreciar muchos diseños.

Es un efecto grandioso, el cual aporta dinamismo al diseño de la web, pero si se utiliza de mala forma, puedes recargar sitios webs y quedaría mal.

Al final, aplicar estas animaciones a los diseños, ofrece un estilo novedoso y muy moderno ¡Fíjate como lo utilizas!

Ya te he dado el listado de las tendencias que pisan fuerte en el diseño web este año, el 2018 ¿Qué opinas de ellas? Algunas son muy novedosas, otras vienen de años anteriores ¡Tienes mucho para elegir!

Mostrar sólo el título de cada página en wordpress con Yoast SEO

Si usas Wordpres de forma habitual y cuidas el SEO de tu blog seguramente ya tengas instalado Yoast Wordpres SEO, uno de los mejores plugin, si no el mejor para gestionar el SEO en WordPress. La cuestión es que este plugin, además de permitirnos modificar títulos y descripciones a nivel SEO, también nos va a permitir borrar el nombre general de la web que WordPress añade siempre por defecto a todas las páginas.

Como muchos ya sabrán en la configuración de Yoast Wordpres SEO, entrando en el menú “títulos y etiquetas”, se pueden cambiar de forma general todos los títulos y descripciones SEO de cada página de un blog. Por tanto, cualquier cambio que hagamos en el apartado correspondiente modificara todas las entradas, todas las páginas o todos los objetos (búsquedas, archivos, etc..)

Pero en este apartado no solo se cambian títulos y descripciones a nivel SEO como pasa en las entradas, sino que también permite modificar la configuración de los títulos en las pestañas del navegador: solo titulo, titulo de la web + titulo de la entrada, el numero de página, etc.

Esto se hace usando las variables:

 

%%title%% Muestra el titulo de la pagina individual que se esta visualizando.

%%page%% Muestra el numero de pagina en la entrada si es que estuviera paginada.

%%sitename%% Muestra el titulo general o nombre de la web.

%%sep%% Muestra el separador que separa el titulo de la página del nombre de la web.

Por ejemplo en la imagen de arriba estaríamos mostrando solo el titulo en cada entrada, el titulo, numero de pagina, separador y titulo general en el caso de las paginas y el solo titulo y  titulo general en el caso de los objetos.

En esta entrada solo he puesto las variables mas importantes, pero existen muchas otras que podemos usar para personalizar aun mas los títulos.

Efecto scroll deslizante a pantalla completa usando solo css

Cada vez esta mas de moda hacer paginas con efectos scroll extravagantes, con desplazamientos horizontales, en circulo, efecto parallax etc. También es tendencia usar estos scroll en sitios a pantalla completa, que se adapten a la resolución de los usuarios. Existen numerosos plugin Jquery para crear este tipo de efectos, pero en esta ocasión no voy a usar ninguno, de hecho no voy a usar ni Javascript, tan solo transiciones CSS y enlaces para deslizarme de una sección a otra de la pagina. Échale un vistazo al ejemplo para ver a que me refiero:

¿Que te parece? Un efecto interesante ¿No? Podría ser útil por ejemplo en una landing page para dar a conocer algún producto, o para crear una cronología en un portfolio.

 

Una vez mas, los controles para activar la transicion,  dependen del selector target de css3, el cual ya use con anterioridad para crear ventanas modales.

 

En cuanto a su implementación, no te llevara mas de 5 minutos tenerlo funcionando, sin necesidad de tener conocimientos de programación, puesto que es solo CSS. Sigue leyendo y te muestro como hacerlo.

 

En primer lugar situaremos los div, que contendran lo que sea que queramos mostrar en cada escena:

 

<div id=”inicio”>

<p>SCROLL DESLIZANTE CON CSS</p>

<p>(UNA FORMA SENCILLA Y ELEGANTE DE SCROLLEAR)</p>

<img src=”/batmanyrobinmeme3.jpg” alt=”meme de batman y robin 1″ />

<a class=”next” href=”#escena1″>COMENZAR…</a>

</div>

<div id=”escena1″ class=”panel”>

<p>CREA UN SIMPLE EFECTO SCROLL CON UNAS POCAS LINEAS DE CSS Y SIN USAR JAVASCRIPT</p>

<img src=”/batmanyrobinmeme.jpg” alt=”meme de batman y robin 2″ />

<a class=”next” href=”#escena2″>SIGUE LEYENDO…</a>

 

</div>

<div id=”escena2″ class=”panel”>

<p>LOS ENLACES ANIMAN EL CONTENIDO MEDIANTE TRANSICIONES CON AYUDA DEL SELECTOR TARGET</p>

<img src=”/batmanyrobinmeme4.jpg” alt=”meme de batman y robin 1″ />

<a class=”next” href=”#escena3″>CONTINUA…</a>

 

</div>

<div id=”escena3″ class=”panel”>

<p>PARA MAS INFORMACION VISITA LA ENTRADA EN <a href=”/www.nosolocss.com”>NOSOLOCSS.COM</a></p>

<a class=”next” href=”#escena1″>VOLVER A EMPEZAR</a>

<img src=”/batmanyrobinmeme2.jpg” alt=”meme de batman y robin 3″ />

</div>

Son 4 divs con sus respectivos contenidos, no parece que haya nada especial, salvo por los enlaces. Cada enlace apunta al div siguiente lo que nos va a permitir saltar de uno a otro.

 

Para que los cambios entre secciones se hagan con efecto deslizante tendremos que usar un poco de CSS:

 

html{

width:100%;

height:100%;

}

 

body{

margin:0;

width:100%;

height:100%;

background-color:#FA5858;

}

.panel{

position:relative;

width:100%;

height:0;

overflow:hidden;

-webkit-transition: all 700ms ease-out;

-moz-transition:all 700ms ease-out;

transition: all 700ms ease-out;

}

#inicio{

position:absolute;

width:100%;

height:100%;

font-size:70px;

overflow:hidden;

}

 

#escena1{

background-color:#D7DF01;

}

 

#escena2{

background-color:#00BFFF;

}

 

#escena3{

background-color:#FF8000;

}

 

.panel:target{

height:100%;

}

La clave de la animación esta en ocultar todos los div con “height:0”, para posteriormente devolverlos a su tamaño original, mediante una transición CSS. Esta transición es disparada por el selector target, el cual cambiara el estilo correspondiente, en este caso la altura, al div que contenga el enlace pulsado.

 

Para poder iniciar el efecto es necesario tener un div fijo que no se anime, ya que de lo contrario estarían todos contraídos y no tendríamos que pulsar, en este caso el div inicio. Al ser todo posiciones absolutas, este div quedara abajo cuando se muestren los demás, por lo que no se verá una vez iniciado el efecto.

 

También es importante aplicar el “overflow:hidden” a cada sección, para evitar las barras de scroll, y que el usuario pueda scrollear sin usar los enlaces.

 

Y eso es todo, podría seguir dándole vueltas pero es que no hay mas, son 4 enlaces, una transición y el selector target de CSS3. Si necesitas mas información, descarga el código fuente desde estos enlaces, o pregunta lo que quieras.

Conclusión

 

Puede que este scroll deslizante no este a la altura de los plugin existentes pero, si no podemos o no queremos usar Javascript, ya sea por motivos de accesibilidad o de velocidad, siempre podremos simular el desplazamiento gracias a las transiciones y selectores CSS.

25 herramientas SEO para mejorar tu posicionamiento. Infografía

En esta ocasión voy  a compartir una infografía muy completa sobre posicionamiento web. Se trata de un recopilatorio con 25 herramientas SEO que nos van a permitir analizar a fondo nuestro sitio,  desde palabras clave hasta enlaces, pasando por nuestro impacto en redes sociales. En definitiva una chuleta que cualquier interesado en posicionar y obtener tráfico debería tener siempre a mano.

Crear ventanas modales usando solo css y su selector target

 

Hace algún tiempo escribí sobre como crear ventanas modales con la ayuda de Jquery UI, y como técnica para salir del paso rápidamente no esta mal, pero no es la mejor manera de hacerlo, mas que nada porque estamos cargando una librería entera en nuestro proyecto para hacer algo que podríamos hacer solo con CSS. Ahora podrás pensar que tal vez sea demasiado pesado hacer esto usando solo CSS, o que los resultados no van a estar a la altura, pero lo cierto es que con las nuevas características de CSS3, se pueden obtener efectos sorprendentes con muy pocas lineas de código, y escasos o nulos conocimientos de programación.

La parte HTML para crear esta demostración sera algo así:

 

<ul>

<li><a href=”#modal1″>DESLIZAR</a></li>

<li><a href=”#modal2″>ROTAR</a></li>

<li><a href=”#modal3″>REDIMENSIONAR</a></li>

</ul>

<div id=”modal1″ class=”modalmask”>

<div class=”modalbox movedown”>

<a href=”#close” title=”Close” class=”close”>X</a>

<h2>DESLIZAR</h2>

<p>La ventana modal aparece por arriba y se desliza hasta su posición. Un efecto simple pero elegante.</p>

<p>Aquí puedes incluir cualquier cosa como vídeos, mapas, formularios…</p>

</div>

</div>

<div id=”modal2″ class=”modalmask”>

<div class=”modalbox rotate”>

<a href=”#close” title=”Close” class=”close”>X</a>

<h2>ROTAR</h2>

<p>Usando la propiedad transform de CSS3, podemos hacer que las ventanas aparezcan rotando.</p>

<p>No hay nada de Javascript, solo unas pocas lineas de CSS.</p>

</div>

</div>

<div id=”modal3″ class=”modalmask”>

<div class=”modalbox resize”>

<a href=”#close” title=”Close” class=”close”>X</a>

<h2>REDIMENSIONAR</h2>

<p>También puedes redimensionar la ventana hasta hacerla desaparecer.</p>

<p>Las posibilidades que ofrece CSS3 son múltiples, tan solo hace falta un poco de imaginación para crear efectos realmente llamativos.</p>

</div>

</div>

La clase modalmask sera la encargada de aplicar el fondo oscuro, característico de las ventanas modales, mediante la superposición de un div que se extienda sobre el contenido. En el interior de este div incluiremos la ventana, a la que se le aplican otras 2 clases, una para darle estilo y otra para animarla. Dentro incluiremos otro enlace para crear el botón de cerrar y el contenido que mostrara la ventana.

 

Lo realmente importante aquí es el CSS. Lo muestro por partes:

 

.modalmask {

position: fixed;

font-family: Arial, sans-serif;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: rgba(0,0,0,0.8);

z-index: 99999;

opacity:0;

-webkit-transition: opacity 400ms ease-in;

-moz-transition: opacity 400ms ease-in;

transition: opacity 400ms ease-in;

pointer-events: none;

}

.modalmask:target {

opacity:1;

pointer-events: auto;

}

En primer lugar el efecto modal, creado mediante  la superposición de un div semitransparente sobre todo el contenido, usando para ello  la propiedad z-index. Para ocultarlo establezco la opacidad a 0 y desactivo los eventos del puntero (pointer-events: none) para evitar que interfiera con la pagina estando oculto.

 

Para iniciar la animación y mostrar las diferentes ventanas modales hago uso del selector target de CSS3. Lo que hace este selector es modificar los estilos del div al que hace referencia un enlace. En este caso restablece la opacidad y reactiva los eventos del puntero para activar el efecto.

 

Una vez que tenemos la capa modal hay que dar forma a la ventana:

 

.modalbox{

width: 400px;

position: relative;

padding: 5px 20px 13px 20px;

background: #fff;

border-radius:3px;

-webkit-transition: all 500ms ease-in;

-moz-transition: all 500ms ease-in;

transition: all 500ms ease-in;

 

}

Y animar su aparición, aprovechando que el selector target también se puede usar con los elementos hijos:

 

.movedown {

margin: 0 auto;

}

.rotate {

margin: 10% auto;

-webkit-transform: scale(-5,-5);

transform: scale(-5,-5);

}

.resize {

margin: 10% auto;

width:0;

height:0;

 

}

.modalmask:target .movedown{

margin:10% auto;

}

.modalmask:target .rotate{

transform: rotate(360deg) scale(1,1);

-webkit-transform: rotate(360deg) scale(1,1);

}

 

.modalmask:target .resize{

width:400px;

height:200px;

}

Como se puede ver sobre estas lineas, establezco en cada animación el estado inicial en la clase correspondiente, y el estado final al hacer target, es decir, los estilos que se aplicaran al pulsar el enlace de cada ventana modal.

 

Ya solo quedaría el CSS correspondiente al botón o enlace encargado de cerrar las ventanas:

 

.close {

background: #606061;

color: #FFFFFF;

line-height: 25px;

position: absolute;

right: 1px;

text-align: center;

top: 1px;

width: 24px;

text-decoration: none;

font-weight: bold;

border-radius:3px;

 

}

 

.close:hover {

background: #FAAC58;

color:#222;

}

No tiene nada especial porque para hacer desaparecer las ventanas modales y sus estilos, bastara con cambiar el target a otro enlace, en este caso #close, que no aporta ningun CSS.

Conclusión

Como se puede ver, las nuevas características CSS cada vez están mas avanzadas y, combinadas con HTML5, nos permiten hacer cosas que antes solo podíamos implementar con Javascript y sus librerías, lo cual es una buena noticia para los desarrolladores, ya que nos va a suponer una reducción considerable en el tamaño de las web y una mejora en la accesibilidad de las mismas.

Por otro lado, ahora que lo pienso, con el selector target tenemos otra forma de simular un evento onclick, mejor incluso que aquella que compartí hace algún tiempo, basada en el uso de inputs tipo radio. Sin duda con este selector vamos a poder crear efectos asombrosos, yo ya tengo algunos en mente. ¿Y tu?