AJRA

Cine + series + actualidad tecnologica = #CulturaFreak

Etiqueta: Desarrollo Web

Sublime-Text

Sublime Text

En este artículo quería hablaros de una de las herramientas que más uso en mi dia a dia.

Se trata de Sublime Text.

Sublime-Text

Sublime Text es posiblemente uno de los mejores y más flexibles editores de código que puedes encontrar a día de hoy y además se trata de una aplicación multiplataforma, por lo que no tienes excusa para utilizarlo desde Windows, GNU/Linux o macOS.

 

Puedes descargar su última versión desde aquí – Sublime Text 3.

 


 

En este primer artículo vamos  hacer un breve repaso a las características básicas que trae Sublime Text y en próximos artículos ya os contaremos más trucos, plugins o modificaciones que hacer para adaptar el editor a nuestro gusto.

 

PESTAÑAS.

Ahora ya estamos acostumbrado a que los navegadores funcionen con pestañas en lugar de con ventanas, pues este editor también permite trabajar con diferentes archivos abiertos en pestañas, lo cual es más comodo y ágil.

Sublime Text

 

RESALTADO DE SINTAXIS.

Sublime Text incorpora resaltado a color de sintaxis, lo que facilita la lectura del código, además de enumerar cada una de las líneas.

 

AUTOCOMPLETADO.

Esta es quizás una de las mejores cosas que tiene Sublime Text, el autocompletado.

Esta característica nos ayudará a recordar cómo se escriben ciertos comandos o funciones.

Sublime Text

 

SELECCIONES Y EDICIONES MÚLTIPLES.

Otra de las características que hacen grande a Sublime Text y que ahorran mucho tiempo, si seleccionamos una palabra, comando, código, color o lo que sea y apretamos CRTL+D se seleccionará la siguiente coincidencia pudiendo así modificarlas todas al mismo tiempo.

Sublime Text

 

AUTOCERRADO DE ETIQUETAS.

Con la simple combinación de teclas “ALT + .” nos podremos olvidar de cerrar etiquetas en HTML a qué Sublime Text se ocupará el solo de hacerlo.

 

SALTAR A UNA LÍNEA.

En ocasiones los programadores tenemos que trabajar en archivos con miles de líneas, y por más que nos digan que el error está en la línea X es lento llegar a dar con ella.

Pero con Sublime Text se acabó ese problema ya que con la combinación “CTRL+G” podremos introducir la línea en la que queremos situarnos.

 

CODE-FOLDING.

Más características interesantes, en este caso es la posibilidad de plegar o desplegar bloques de código, para así centrarnos solo en la parte que nos interesa en ese momento.

 

BÚSQUEDAS.

Esta es una de las características más básicas de cualquier editor de código, pero no esta de mas recordarla.

Al igual que en la mayoría de los programas con un simple “CTRL+F” podremos buscar cualquier coincidencia durante todo el archivo.

 

PLUGINS.

Y por si todas estas características no bastasen para decir que Sublime Text es uno de los mejores editores de código que podemos encontrar, tambien tenemos el “Package Control”.

El Package Control viene a ser un repositorio de plugins, como una App Store en la que podremos encontrar cientos de plugins que aportaran diferentes funcionalidades a nuestro ya de por sí genial editor.

 

ESQUEMA DE COLORES.

Y por ultimo (para no hacer mas largo este articulo) hay que destacar que el programa incorpora un gestor de temas, que nos permite personalizar la apariencia y colores de Sublime Text.

 

Por defecto el programa viene con unos 10 temas preinstalados, pero existe la posibilidad de descargar e instalar mas temas de paginas como ColorSublime (http://colorsublime.com), donde podremos navegar entre miles de temas y escoger el que mejor se adapte a nuestras necesidades.

 

Personalmente yo uso el tema “Monokai Contrast

 


 

Esto es todo por hoy, y creo que es más que suficiente para darle una oportunidad al que posiblemente sea el mejor editor de código que puedes encontrar en la actualidad.

 

Durante los proximos dias escribire una pequeña guia sobre la configuracion basica de Sublime Text, una serie de breves tips que harán que este editor se adapte aún más a vuestra dia a dia.

Estructura Web - Contenido

Estructura Web #3: Contenido

Aquí os dejo la tercera recopilación de consejos y recomendaciones sobre Estructura Web, en este caso os hablare del contenido de una web.

Estructura Web - Contenido

¿Qué es el contenido principal?

En Inbound Marketing siempre se ha dicho que el contenido es el pilar fundamental de nuestra web.
Si no tenemos un contenido interesante, original y que se actualice con cierta periodicidad a la gente no le interesa visitar nuestra web.

Así que en este capítulo vamos a ver una serie de consejos de cómo debería estar estructurado el contenido de nuestra página web.

 

¿Cuánto debe medir el espacio del contenido principal?

El espacio que debe ocupar el contenido principal puede variar dependiendo de si nuestra estructura Web incorpora o no una sidebar.
Si por el motivo que fuese no tenemos una sidebar nuestro contenido deberá ocupar un 100% del ancho de nuestra web (¿si tenemos todo ese espacio disponible porque no lo vamos a utilizar?)

Y en el caso de tener una sidebar lo recomendable es que el contenido ocupe entre el 75% o 80% del ancho de la web.

 


 

 

Tipografía y tamaño de fuente.

Hay mucha gente que me pregunta ¿pero el usar una u otra tipografía va a afectar a mi pagina web?
Pues sí queridos amigos, el uso de una tipografía incorrecta puede afectar al número de visitas de nuestra pagina web.

Si nuestros artículos están escritos con una tipografía que este muy recargada y que sea difícil de leer la gente se cansara y acabará yéndose de nuestra web.

Hay que tener en cuenta que la gente no lee, es una lastima pero es así, hay que ponérselo lo más fácil posible a nuestros visitantes, así que deja de lado las fuentes experimentales, eso les irá muy bien a los diseñadores de flyers y logotipos, pero para el contenido de tu web debes decantarte por las fuentes más clásicas y fáciles de leer.

Ahora que tenemos la tipografía de nuestra web hay que decidir el tamaño al que la vamos a mostrar, debemos encontrar un tamaño fuente equilibrado, lo suficientemente grande para que sea cómodo de leer, pero sin llegar al límite de que el texto nos destroce el diseño y la estructura de nuestra web.

Perfecto, ya tenemos la tipografía y el tamaño que vamos a usar en nuestra pagina, ahora solo nos falta crear contenido y usarla, (lo digo porque aun veo blogs en los que cada articulo esta escrito con una tipografía, tamaño e incluso colores diferentes) hay que ser constante.

Nota: Si lo deseas puedes usar dos fuentes, una para los títulos y otra para el contenidos, pero no más.

 


 

 

Optimización del contenido.

Uno de los puntos importantes y que ya mayoría de la gente parece olvidar es la optimización del contenido de nuestra web.

Hay que tener un control sobre las imágenes que subimos a nuestra web, debemos revisar siempre su peso, tamaño y decidir qué formato es el más óptimo para esa imagen y en consecuencia transformar el archivo en un JPEG, PNG o GIF dependiendo de las necesidades.

También es imprescindible el uso del atributo title y el alt de cada imagen, para que los buscadores (Google) encuentre nuestras imágenes y las posicione correctamente.

 


 

 

SEO

Bien, ya sabemos dónde irá nuestro contenido, con qué tipografía y tamaño lo vamos a escribir y tenemos las imágenes optimizadas para nuestros artículos, ahora solo nos queda escribir el contenidos y al hacerlos es muy importante tener en mente el SEO.

¿Qué es el SEO?
Si no sabéis lo que es el SEO os dejo aquí un enlace a un articulo en el que lo explico.

Aquí nos os voy a contar todos y cada uno de los secretos del SEO, solo os daré un par de consejos básicos que hay que tener en mente a la hora de escribir nuestros artículos.

Como he dicho, cuando escribamos nuestro contenido hay que tener en mente el SEO, pero hay que hacerlo de una forma natural, no debemos condicionar el contenido de nuestros artículos por culpa del SEO, primero porque nuestra audiencia se va a dar cuenta y segundo porque Google no es tonto y si ve que estamos haciendo un mal uso del SEO (Black SEO) también se dará cuenta y nos penalizará.

Lo principal es decidir cuál va a ser la keyword, la palabra clave, con la que queremos que se posicione nuestro articulo.
Y para ello tenemos herramientas muy interesantes como Google Trends y sus Trending Search, con lo que podremos ver las tendencias de búsquedas relacionadas con cada palabra que introducimos.

De este modo, por ejemplo, podremos saber si la keyword de nuestro articulo debería ser Marketing Digital o Marketing Online.

Como ves en este caso no cambiamos el concepto de nuestro articulo, solo la palabra clave en relación del número de búsquedas que Google recibe dependiendo del término utilizado.

 

A Google también le gusta que la Keyword aparezca en el Título del post y en la URL de la página, en el ALT de las imágenes y si en el contenido del articulo aparece como h2 y en negrita Google se convertirá en nuestro amante secreto y tendremos muchas más posibilidades de aparecer en los ansiados primeros resultados de Google.


 

Y hasta aquí la recopilación de consejos y recomendaciones relacionadas con el contenido de una web, en la siguiente lección hablaremos de la Sidebar.

Espero que te haya servido de algo y te recuerdo que si necesitas realizar una página web o tienes cualquier duda, puedes ponerte en contacto conmigo.

Menu de navegacion

Estructura Web #2: Menú de navegación

Seguimos con la segunda parte de este mini-Curso de Estructura Web, la lección de hoy trata sobre el menú de navegación.

Lección #2: El Menú de Navegación.

Menu de navegacion

¿Que es el menú de navegación?

El menú de navegación es un elemento esencial dentro de nuestra página web por varios motivos, el primero es que este menú permanece fijo y se muestra en todas las páginas de nuestra web (al igual que el header) y el segundo es que gracias a él conseguiremos que nuestros visitantes encuentren la información que buscan dentro de nuestro sitio web.

Así que deberemos prestarle la atención que se merece, dotarlo de un diseño y apariencia sencillo y una buena organización.


 

¿Donde coloco el menú de navegación?

Lo primero que tenemos que tener claro es donde vamos a situar el menú de navegación.

Durante los años son muchos los sitios donde he probado a colocar el menú de navegación de diferentes webs y blogs, propios y de clientes, y estudiando los resultados queda claro que lo mejor y más efectivo es colocarlo arriba a la derecha.

Nada de colocar el menú en la sidebar, ni en el footer… la mejor opción es colocarlo dentro del Header. Además esta opción esta ya tan implementada en el subconsciente de los usuarios que es donde vas a buscar el menú de forma inconsciente (Neuromarketing).

Recordad que Google otorga mayor importancia a los enlaces cuanto más arriba están situados, así que ese es otro de los beneficios de colocar el menú dentro del Header.


 

¿Cuantos elementos debería tener mi menú de navegación?

En el menú de navegación no tenemos porqué poner todas las secciones de nuestra web, solo las más importantes.

Mi consejo es que el menú de navegación debería tener 4 y 6 elementos >=< (Menos es Más). Cuantas menos opciones les demos al usuario mas rápido asume las que tiene y obtenemos un mayor índice de conversión.

Si os fijáis en mi página web veréis que yo solo tengo 4 elementos, pero dependiendo de las necesidades yo optaría por los siguientes:

  • Inicio
  • Quien Soy
  • Servicios
  • Blog
  • Contactar

Eso no quiere decir que no puedas tener más páginas o secciones, pero en el menú debes poner las mínimas necesarias.

Y otro consejo es que el primer ítem del menú debería ser la página de Inicio. Al usuario hay que ponérselo fácil a la hora de volver a la home, y no todos los usuarios saben que haciendo clic en el logotipo de la web se vuelve al inicio (siempre que la web esté correctamente programada).

Y si el primer ítem del menú es “Inicio” el último debería ser “Contactar”.


 

 

Otra recomendación es que evites en todo lo posible añadir subniveles y desplegables en tu menú, esto suele funcionar con comando rollout y lo más normal es que den problemas con los smartphones y tablets, y ya sabemos que ha día de hoy el 50% de las visitas a webs proceden de terminales moviles.

Si en vuestra web tenéis un menú con subniveles haced la prueba, entrad en Google Analytics y podréis comprobar como todas las páginas que estén dentro de un subnivel tendrán muchísimas menos visitas que el resto.

 

Y por último, pero no por ello menos importante, no pongas los iconos de redes sociales en el menú de navegación.

Esto es una práctica que he visto en muchas páginas webs, pero es un error, nuestras redes sociales deberían servir para atraer público a nuestra web. Si colocamos nuestras redes sociales en el menú solo conseguiremos que el público de nuestra web se vaya a las redes sociales y eso no nos interesa.

Claro que debemos poner nuestras redes sociales en la web, pero yo aconsejo ponerlas en el footer, de forma que si alguien las busca las encontrara rápido, pero no será lo primero que vean nada más entrar en la web.


 

Y hasta aquí los tips o consejos de hoy sobre el menú de navegación de tu página web, en el siguiente articulo hablaremos del Contenido.

Recuerda que si tienes alguna duda, pregunta o sugerencia puedes ponerte en contacto conmigo desde aquí.

Estructura Web #1: Header

Comenzamos el minicurso de Estructura Web con la primera lección (aunque mas que lecciones es una recopilación de pequeños tips y consejos que os ayudarán con el diseño y la usabilidad de vuestras webs).

Lección #1: El Header.

El Header (cabecera o encabezado) es la parte superior de la página web. Y salvo pequeñas variaciones debería cargarse y aparecer igual en todas y cada una de las páginas de nuestra web.

HeaderEl primer consejo que os voy a dar es que el Header debe ser lo más pequeño posible (siempre teniendo en cuenta el contenido que debe ir dentro de él).

Debemos tener siempre presente el término “Above the Fold“, o lo que es lo mismo evitar que el usuario tenga que hacer demasiado scroll para llegar al contenido relevante.

Por eso, cuanto menor sea el tamaño del header mas espacio quedará libre para el contenido importante de la web.

Así que resumimos que el Header debería tener un máximo aproximado de 150 px, todo lo que sea mayor será contraproducente para el contenido de nuestra web.


Ahora que tenemos claro el tamaño del Header vamos a ver qué elementos debemos colocar dentro de él y donde los situaremos, y eso es muy fácil;

El logo a la izquierda y el menú a la derecha.

Es tan sencillo como eso.

No pongas el logo en el centro y el menú abajo (que es una práctica muy de moda últimamente), porque de esa forma estarás haciendo que la cabecera tenga un nivel más de lo necesario y de nuevo estarás quitando espacio al contenido, y como todos sabemos “el contenido es el rey”.

¿Y porqué no el menú a la izquierda y el logo a la derecha?

Bien pues ese es un tema de neuromarketing, el usuario está inconscientemente acostumbrado a esa distribución. Es como cuando preguntas en un bar donde está el baño… “al fondo a la derecha”.

No le compliques las cosas al usuario.


Continuemos, ahora vamos con el Título, Logo o Eslogan de nuestra web.

Ya tenemos claro donde vamos a situarlo (a la izquierda del header), pero ¿Que formato deberia tener?

Mi recomendación es que siempre que podamos sea texto, se que muchas veces queda mas bonito el uso de una imagen, incluso en ocasiones será imprescindible usar una, pero si usamos texto siempre sera mejor, ya que Google lo reconoce y lo indexa mejor y si además usamos correctamente las etiquetas Title y H1 conseguiremos un mejor resultado que con un logotipo en imagen.

En el caso de vernos obligados a usar una imagen, deberemos prestar mucha atención a sus atributos, que el tamaño no sea demasiado grande, que no pese demasiado y ralentice la carga de la web (recordad que el header se carga en todas y cada una de nuestras páginas) y revisar siempre que tenga el formato correcto (png, gif, jpeg…)


También existe la posibilidad de hacer que el header sea fijo.

Esta es una opción interesante ya que conseguiremos que la cabecera esté siempre visible y nos acompañe aun cuando hagamos scroll, dejando así siempre en pantalla nuestro logotipo y el menú de navegación.

Pero hay que tener en cuenta que para plantearnos usar esta opción debemos tener un Header muy pequeño, ya que al ser fijo nos está quitando espacio del contenido en todo momento.


 

Y hasta aquí los tips o consejos de hoy sobre el Header de tu página web.

En la siguiente ocasión hablaremos del Menú de Navegación.

Recuerda que si tienes alguna duda, pregunta o sugerencia puedes ponerte en contacto conmigo desde aquí.

Como cambiar el Favicon de tu pagina de WordPress Genesis.

¿No sabes como cambiar el favicon en tu pagina de WordPress con Genesis?

El framework Genesis para WordPress es algo increíblemente útil y es sin duda la mejor manera de ampliar las características y funcionalidades que WordPress trae de base.

Este framework se instala fácilmente, como si fuese un theme y nos ofrece muchas opciones nuevas que WordPress no tiene.
Si estáis interesados en que os explique mas sobre Genesis podéis decírmelo y escribire algún tutorial al respecto.

Hoy vamos a aprender a cambiar el favicon en WordPress.

Genesis por defecto viene con un Favicon predeterminado y ninguna opción para modificarlo.
Pero no os preocupéis porque hay varias formas de cambiarlo y poner nuestro Favicon personalizado.

En este articulo os explico dos formas de hacerlo, y luego os comentare los beneficios de una y otra forma.

FORMA 1 – ALL IN ONE FAVICON.

Esta primera forma es quizás la mas sencilla, se trata de instalar un plugin que nos permitirá gestionar el Favicon que queremos que aparezca en nuestra web.
Es muy sencillo vamos al Panel de Control de WordPress, abrimos el menú Plugins y seleccionamos Añadir nuevo.
Ahora solo hay que buscar el plugin All In One Favicon, lo instalamos y lo activamos.

Ahora tendremos un nuevo menú en el que podemos elegir que Favicon queremos.

FORMA 2 – VIA FTP.

La otra forma es subir el Favicon vía FTP a nuestro servidor.
Aqui necesitaremos un cliente FTP (yo uso y recomiendo Filezilla) o también podemos usar el administrador de archivos de nuestro CPANEL.

Una vez conectados a nuestro servidor debemos ir a la siguiente ruta:
midominio.com/wp-content/themes/genesis/images

en el caso en que esteis trabajando con un child theme de Genesis (lo cual es lo mas recomendable), deberéis subir el favicon a esta otra ruta:
midominio.com/wp-content/themes/child_theme_name/images

(Donde child_theme_name es el nombre del tema que esteis utilizando en vuestro caso).

CONCLUSIONES.

Estas son dos de las formas de añadir tu favicon a una web de WordPress con Genesis.
Quizas la forma 1 (Plugin) sea la mas sencilla, pero yo recomiendo el uso de la forma 2 (FTP) ya que os ahorrais el cargar un plugin mas en vuestro WordPress.
Ya sabemos que cuantos mas plugins carguemos mas lenta ira nuestra pagina.

Esto es todo por hoy, espero que lo probeis y recordad que ante cualquier duda o pregunta podéis contactar conmigo.

¿Necesita mi empresa una pagina web?

Puede que parezca increíble, pero todavía hay empresas y clientes que a dia de hoy me hacen esta preguntapregunta.

 

¿Necesita mi empresa una pagina web?

La respuesta a esta pregunta es SI.

 

¿Necesita mi empresa una pagina web?

Primero fueron los medios impresos, luego la radio, después la Television y ahora Internet. La Web se ha convertido en el medio de comunicación más utilizado, ya sea desde el ordenador o desde dispositivos móviles la gente está conectada permanentemente a Internet.

Por ese motivo, que nuestra empresa tenga presencia en Internet se ha vuelto algo casi imprescindible.

 
Existen varias razones por las cuales una página web es muy importante y necesaria para tu negocio:

  1. Valor percibido: Una empresa, marca o producto que tiene una pagina Web es percibida por el cliente con un valor  añadido.
  2. Un 75% de los consumidores investigan la empresa, marca o producto por Internet antes de acercarse a la tienda.
  3. Fuente de posibles clientes: Una Web bien optimizada puede generar un mayor número de clientes potenciales que los creados por un equipo de ventas.
  4. Informa a los clientes de donde te pueden encontrar. Seguro que tu empresa tiene tarjetas de visita, esa misma función la cubre una página web.
  5. Establecer una identidad: Tienes la posibilidad de establecer una identidad especifica para tu negocio.
  6. Mediante un formulario de contacto en nuestra pagina web estamos creando un método de comunicación rápido, fácil y gratuito para todos nuestro clientes.
  7. Con una página web tus clientes pueden ver tus productos e incluso comprarlos los 365 días del año y a cualquier hora.

Estos son solo algunos de los motivos por los cuales tu empresa debería contar con una página web.

 
Si estas interesado en crear una página web y no sabes por donde comenzar o como hacerlo puedes ponerte en contacto conmigo y veremos como puedo ayudarte.

CUBODEKUBRICK

Hoy he aprovechado para darle un repaso a la pagina web de CubodeKubrick.

Aun le queda mucho para estar acabada, pero la estructura ya esta lista y funciona (que es lo importante), falta crear la sección de portfolio y otra para el equipo, pero poco a poco va cogiendo forma.

Recordad que os podeis suscribir al newsletter de @CubodeKubrick desde aqui.

CubodeKubrick

Todavia esta en fase beta, pero se aceptan sugerencias, opiniones y criticas.

Creado con WordPress & Tema de Anders Norén