• 0

Top enlaces de interés en diseño web

Category : Sin categoría

http://www.css3maker.com/

http://www.vecteezy.com/

https://thenounproject.com/

https://pixabay.com/

http://www.freepik.es/

http://tablestyler.com/#

http://imagen.online-convert.com/es/convertir-a-ico

 


  • 0

Página muy buena para empezar un HTML 5

Category : Sin categoría

A veces cuando empezamos un proyecto nuevo, es un poco “aburrido” meter todas las nuevas etiquetas.

En esta web puedes bajarte lo indispensable para empezar a crear código tanto en responsive mobile como Bootstrap

 

 

 

http://www.initializr.com/


  • 0

  • 0

Medidas estandard de los Media Queries – Media Queries for Standard Devices

Category : Sin categoría

Media Queries for Standard Devices

 

/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

 

 

Algo que podeís probar por ejemplo es la siguiente hoja de estilos para ver como se comporta:

 

@charset “utf-8”;
/* CSS Document */

@media (min-width: 768px) {
.container {
width: 750px;
background:#F00
}
}
@media (min-width: 992px) {
.container {
width: 970px;
background:#03F
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
background:#FF0
}
}

@media (min-width: 1400px) {
.container {
width: 100%;
background:#000
}
}


  • 0

8 plugins de WordPress que funcionan como se espera (o mejor)

Category : Sin categoría

8 plugins de WordPress que funcionan como se espera (o mejor)

A la hora de diseñar un blog con WordPress es inevitable perder horas mirando plantillas que se ajusten a nuestras necesidades (técnicas y de diseño), pero muchas veces dejamos para lo último la elección de los plugins, siendo estos los que realmente harán que nuestro blog nos facilite la vida y nos quite faena.

plugin-wordpress

A continuación comparto con vosotr@s una lista de los 8 plugins que mejor funcionan en mi web, y que incluso han llegado a superar mis expectativas.

1. Akismet

filtro-spam

Para much@s de vosotr@s esto no será ninguna novedad, pero para l@s que no lo conozcáis, decir que Akismet hará que os olvidéis por completo del Spam en vuestro blog, y cuando digo por completo es totalmente.

Este plugin funciona como deberían funcionar todas las cosas en esta vida, lo enchufas y listo, 0 comentarios de Spam en tus entradas.

Si aún así quieres estar segur@ de que no se publica nada que tu no desees, combina Akismet con la función de aprobar comentarios en Ajustes>Comentarios. De este modo filtrarás personalmente todo aquello que se comente en tu blog.

 

2. TinyMCE Advanced

Captura de pantalla 2013-05-23 a las 13.30.58

El editor de texto por defecto de WordPress es, bueno digamos que “limitado”, TinyMCE Advanced incluye todas las herramientas que un procesador de textos requiere, desde el formato de texto hasta la creación y formato de tablas (cosa bastante tediosa cuando picas HTML).

Tiene tantos botones que hasta puedes configurar cuales aparecen en la barra y cuales no. 

 

3. WordPress SEO Plugin

Sin duda alguna es el plugin de posicionamiento más completo que he probado, y además es bastante sencillo de utilizar.

Entre la gran cantidad de funcionalidades que ofrece, cabe destacar la edición de los títulos de los post y de las descripciones meta, que incluye una previsualización del “Snippet” (el texto que muestra Google sobre nuestra web). Además si has elegido posicionar ese post con una palabra clave concreta el plugin analiza toda la entrada para que puedas optimizarla.

wordpress-seo-plugin

Por otra parte, en su menú de la barra superior el plugin permite gestionar el sitemap.xml y establecer la prioridad de indexado de las páginas y entradas, decidir hasta dónde puede meterse el robot de Google (restringiendo categorías y etiquetas), o incluso editar el texto que aparecerá en Facebook o Google+ si decides automatizar la publicación de tus entradas.

Y esto es solo una pizca!

 

4. Google Analytics for WordPress

Aunque me domino bastante bien, no soy experto en HTML, por lo que evito siempre que puedo el meter líneas en el código fuente a mano, con el consiguiente riesgo de meter algo dónde no toca.

Este plugin añade un apartado en el menú Ajustes en el que únicamente tendremos que añadir el código UA de nuestro perfil de Analytics, y a contar visitas!

5. WP Robots.txt

Captura de pantalla 2013-05-23 a las 12.48.40

Sencillo y discreto, un plugin que añade una caja de texto en Ajustes>Lectura en la que puedes configurar tu fichero robots.txt a tu gusto

 

6. Google Plus Autorship

¿Te has fijado que muchos blogs aparecen con la foto del autor cuando buscas en Google? Esa foto pertenece a su perfil de Google+.

Captura de pantalla 2013-05-23 a las 12.53.24

Al instalar este plugin solo hace falta ir a Usuarios>Tu Perfil e indicar la URL de tu perfil de Google+. Luego hay que enlazar tu blog desde Google+, concretamente en Sobre mi>Enlaces>Contribuye en.

Y ya está, tu foto aparecerá en los resultados de búsqueda de tu web.

 

7. Simple Social Icons

Los iconos de enlace a redes sociales que incluía el tema de mi blog no me convencían, es por ello que me puse a buscar plugins con diseños atractivos.

Captura de pantalla 2013-05-23 a las 13.01.26

Simple Social Icons permite insertar los enlaces mediante un widget, esto es muy cómodo, dado que no hay que andarse con HTML de por medio.

De todos modos la elección de los iconos es algo muy personal, hay quién le gusta que sean más llamativos para atraer a más gente, y otros pensamos que deben integrarse con armonía en el diseño de la web. La elección te corresponde a tí.

 

8. Slide Share

Creedme si os digo que el hecho de incluir mis presentaciones en la portada de mi web ha multiplicado de manera exponencial las visualizaciones.

slideshare-wordpress

Con este plugin se nos proporcionarán trozos de código HTML que deberemos incluir allá dónde los necesitemos (páginas, entradas, widgets).

 

Estos son 8 plugins que a mi me funcionan de maravilla, pero soy consciente que me quedan muchos por descubrir, entre mis asignaturas pendientes está el probar un plugin de caché que no me elimine el tema (me pasó al principio) y algún plugin que permita incluir enlaces a entradas relacionadas al final de un artículo.


  • 0

Actualizar WordPress por FTP en segundos

Category : Sin categoría

Actualizar WordPress por FTP en segundos

 

El mejor modo de actualizar WordPress es mediante el actualizador del escritorio. Esto es debido a que no hay dudas de que actualiza desde el repositorio oficial y además es el método más rápido. ¿Por qué?, pues sencillamente porque no actualiza todo sino solo aquellos ficheros que han cambiado sobre tu versión actual.

Ahora bien, hay ocasiones en que, o no tienes permisos suficientes de tu servidor para actualizar de este modo, o simplemente te sientes más seguro haciéndolo por FTP, a la antigua usanza. Este método, el tradicional, está especialmente recomendado cuando has realizado modificaciones a ficheros ‘core‘ (que ya sabes que no es buena costumbre) o, mucho más común, si has personalizado el tema por defecto (K2 o TwentyTen), ya que muchas actualizaciones realizan cambios en el tema por defecto y pueden sobreescribir tus maravillosas personalizaciones.

En estos casos, una de las cosas que personalmente me llevan los demonios es que la actualización tarda bastante de cara a tus lectores, y además no ven ningún aviso de que estás actualizando (salvo que lo prepares claro). Entre tanto actualizas suelen ver errores horribles en tu sitio ya que se están sobreescribiendo archivos de manera aleatoria.

Los culpables de esta tardanza son las carpetas de la instalación, las que más ficheros contienen y que ralentizan el proceso de carga por FTP. Y, bueno, yo tengo un truquito que igual os viene bien.

El proceso que yo hago en estos casos es el siguiente:

  1. Descargas este enlace http://wordpress.org/latest.zip
  2. Descomprimes el fichero en tu ordenador y verás que la instalación estandar de WordPress son varios archivos sueltos y 3 carpetas
  3. Las carpetas son: wp-content, wp-includes y wp-admin
  4. Borras la carpeta wp-content local recién descomprimida, esa no se sube nunca porque sino sobreescribes la carpeta de contenido de tu sitio, donde se guardan fotos, plugins, el tema, etc. Así no te equivocas, la borras tras descomprimir el zip y así no hay error posible.
  5. Ahora el truco para una actualización rápida: renombra las carpetas locales wp-admin y wp-includes a wp-admin_nueva y wp-includes_nueva o como quieras, antes de subirlas.
  6. Subes por ftp las carpetas wp-admin_nueva y wp-includes_nueva, de este modo tienes lo más pesado subido, ganas tiempo en que no está fuera de servicio tu sitio por la actualización.
  7. Cuando estén subidas las carpetas renombradas subes los ficheros sueltos por ftp, en este caso si te pedirá el cliente ftp sobreescribir los ficheros remotos, aceptas (esto es muy rápido). A partir de este momento tu sitio mostrará errores a los lectores así que desde aquí tienes que hacer rápido este punto y los dos siguientes (el último punto no afecta a la visualización de tu sitio).
  8. Renombras las carpetas remotas wp-admin y wp-includes a wp-admin_vieja y wp-includes_vieja.
  9. Renombras las carpetas remotas wp-admin_nueva y wp-includes_nueva a wp-admin y wp-includes.
  10. Accedes a http://tudominio.com/wp-admin/upgrade.php y en la siguiente pantalla te dirá si tienes que actualizar la base de datos, si es así, le das al botón y ya está hecho.
  11. Para dejar todo limpito borras las carpetas remotas wp-admin_vieja y wp-includes_vieja

Ya está. Con este método casero consigues reducir bastante el tiempo de actualización de WordPress por FTP. De hecho, la carga de los ficheros sueltos dura pocos segundos y es el único momento en que tus visitantes podrían notar algo.

Espero te haya servido.

 


  • 0

Las tendencias de diseño web que veremos en 2015

Category : Sin categoría

FUENTE: http://nosinmiscookies.com/las-tendencias-de-diseno-web-que-veremos-en-2015/

Ya estamos viendo en este 2014 como los usuarios están cambiando su forma de navegar. Si en 2013 era una tendencia y en 2014 está siendo un hecho, en 2015 no se entiende una web que no tenga un diseño adaptativo y que se vea bien en todas las pantallas (ordenador, tablet, móvil, tv, etc). Basándome en estas tendencias, la opinión de expertos y la humilde opinión de este que os escribe, os dejo con las tendencias que bajo mi opinión marcarán el diseño web en 2015.

1. Responsive

responsive

Como hemos comentado la web de 2015 deberá ser responsive. El número de usuarios que se conectan a la red desde el teléfono móvil sigue aumentando y además Google está dando mucha importancia a que una web tenga un diseño adaptativo para posicionarla mejor.

2.- Botones fantasma

ghost-button

En inglés se conocen como ghost buttons y más que una tendencia para 2015 son una realidad. Es raro irnos a una web renovada este año y no encontrarnos con estos botones. Al ser transparentes se adaptan a cualquier tipo de diseño y aunque pueden perder un poco de visibilidad al no resaltar por encima del resto de la web, se pueden hacer mucho más grandes sin perjudicar el diseño. Con un test A/B es la mejor forma de saber qué botón te interesa más para tu sitio, los tradicionales call to action en colores vivos o estos “ghost buttons”.

3.- Se impone el scroll

scroll

Relacionado con la idea de hacer webs responsive, es mejor que estas hagan scroll para desplazarse y no clic. Es más usable y más fácil para el usuario que puedas desplazarte con una web moviendo y desplazando el dedo por la pantalla, antes que pulsando y haciendo clic.

4.- Fondos basados en imágenes de alta resolución y vídeos

fondos

Los fondos con imágenes en alta resolución y vídeos se imponen. Ha sido una realidad este año y en 2015 seguirá siendo. Cuidado con subir las imágenes tal cual, hay varias opciones que nos permiten bajar de peso las imágenes sin que pierdan calidad.

5.- Navegación en cuadros

navegacion-cuadros

Puede que fuera Google + quien pusiera de moda este tipo de navegación pero lo cierto es que cada vez más webs lo utilizan. O cambian mucho las cosas o en 2015 veremos más webs de este estilo. Son perfectos para móviles pues los cuadros se apilan uno a uno hasta adaptarse a la pantalla de un teléfono móvil.

6.- Flat design (colores planos)

aula-cm

Una prueba de este estilo es nuestro blog o la web de Aula CM. Desde su inicio apostamos por el flat design o los colores planos y cada vez más webs se han unido a esta tendencia. No hemos sido nosotros los que hemos creado esta tendencia, ya estaba cuando empezamos, pero seguirá siendo la preferida por muchos diseñadores en 2015.

7.- Interacciones con el usuario

microsusc

Para muchos estas micro interacciones han supuesto la vuelta del pop up. Yo creo que no es tan intrusivo ni tan perjudicial para el usuario pues se supone que se le ofrece algo a cambio de esa interacción. Contenido exclusivo a cambio de registrarse, un ebook por suscribirse, etc. En la web de Vilma Nuñez nos podemos encontrar un ejemplo de esto.

8.- Lo simple, gana

web-apple

En 2015 lo simple ganará a lo cargado y lleno de colores. Esto es bueno para la velocidad de carga de una web, para la navegación en móviles y para cumplir con los estándares del diseño web que nos llevan a esta simplicidad en el diseño. Dos buenas fotos y unos colores planos pueden dejar una web mucho mejor estéticamente hablando que algo muy cargado.

9.- Story Telling

story-telling

Terminamos con una tendencia que está ganando adeptos y empresas como Google ya apuestan por esta forma de presentar sus productos o servicios. Los hay profundos o verticales, estos últimos son los más utilizados.

Y con esto terminaría las tendencias que para mi se impondrán en la web en 2015. Con los estándar html5 y css3 concluidos y listos para su uso, 2015 será el año de ponerse a crear cosas nuevas. ¡Esto no para!


  • 0

  • 0

savedeo, para bajar vídeo y audio de youtube, vimeo, instagram, facebook

Category : Sin categoría

savedeo, para bajar vídeo y audio de youtube, vimeo, instagram, facebook…


  • 0

Las 10 tendencias tecnológicas que marcarán el año 2015

Category : Sin categoría

Las 10 tendencias tecnológicas que marcarán el año 2015