wordpress – Digital Learning Formación online en Nuevas Tecnologías Wed, 05 Jul 2017 08:39:28 +0000 es-ES hourly 1 https://wordpress.org/?v=4.7.5 Balance de últimas ediciones de Diseño Web, SEO y CM (y nuevo curso) /blog/balance-de-ultimas-ediciones-de-diseno-web-seo-y-cm-y-nuevo-curso/ /blog/balance-de-ultimas-ediciones-de-diseno-web-seo-y-cm-y-nuevo-curso/#respond Wed, 28 Jun 2017 11:02:21 +0000 /?p=14368 Este mes hemos finalizado de las ediciones de los cursos Diseño y Programación Web (17ª edición), SEO, Posicionamiento Web (5ª edición) y Community Manager, Gestión de Medios Sociales (8ª edición) que organizamos con el  Cevug y la Fundación UGR-Empresa.

Hacemos balance de los resultados, y adelantamos una novedad para la próxima edición de uno de estos cursos.

Resultados de encuestas de alumnos

Las valoraciones que han dado los alumnos en la encuestas han sido muy positivas. Los participantes califican de forma anónima hasta 23 apartados que abarcan todos los aspectos de esta formación online: metodología, contenidos, actividades, tutorización, plataforma…

Resumimos algunos datos:
(Nota: todos se puntúan sobre 5 y convertimos a escala de 10)

  • Valoración global: las tres ediciones se han calificado entre 8,5 y 9 puntos.
  • Valoración mínima: en todos los apartados, las tres ediciones han superado los 7,8 puntos de valoración (en CM y SEO, todos han sido superiores a 8).
  • Valoración más alta: corresponde a los apartados de tutorización. Las valoraciones dadas a los tutores Javier Navas (CM y Diseño Web) y Alfredo Hernández-Diaz (SEO) han sido superiores a 9 en todos ellos. ¡Enhorabuena a los dos!

Por supuesto hay áreas de mejora, que detectamos con estas puntuaciones y los comentarios de alumnos. Se tienen muy en cuenta, como en el replanteamiento que estamos haciendo al curso de Diseño y Programación Web y que comentamos al final de este post.

Comentarios en Redes Sociales

Los comentarios se producen en su mayoría en nuestras cuentas de Twitter (@CMFundacionUGR) y Facebook (Curso.Community.Manager) asociadas al curso de Community Manager. Es normal, ya que son canales complementarios al mismo y los alumnos, dada la temática del mismo, son más proclives al uso de las redes sociales.

Algunos alumnos utilizan en Twitter el hashtag #cmcevug para etiquetar esos comentarios o citan nuestros usuario. Aquí puedes ver algunos:

Nuevo curso de creación y diseño web

Aunque la valoración de este curso ha seguido siendo muy positiva tras 17 ediciones, un entorno tan dinámico como el de la tecnología web nos hacía ver, cada vez más, que las actualizaciones que se iban incorporando ya no eran suficientes y demandaba un planteamiento nuevo. Los comentarios de los alumnos nos han ayudado a perfilar ese cambio y decidir que temas integrarían el nuevo curso que va a sutituir al actual en la próxima edición:

  • El nuevo curso se basará en WordPress, el gestor de contenidos más utilizado en la creación de sitios web. El uso de un CMS como WP es ya una tendencia mayoritaria porque permite cubrir los requisitos de una web moderna, simplificando el proceso de creación para los no expertos en desarrollo web.
  • Aunque se utilice un CMS, sigue siendo muy importante conocer HTML y CSS. Habrá dos temas dedicados a estos lenguajes para que los alumnos entiendan mejor qué es una página web y tengan un mayor control y capacidad de personalización a la hora de crearla.
  • JavaScript ha adquirido un papel fundamental en el diseño y desarrollo web. Hacíamos una introducción a este lenguaje en el anterior curso, y aunque a las personas más técnicas les resultaba útil como primera toma de contacto, no es la formato adecuado para alumnos con perfiles muy variados. No se incluirá en el nuevo curso, y optamos por una formación dedicada donde se vean con suficiente amplitud sus características y las posibilidades que ofrece.

Solo queda agradecer a los alumnos sus comentarios y opiniones. Las positivas, porque son una gran motivación y nos hacen ver qué cosas debemos mantener o reforzar, y las críticas, porque nos ayudan a mejorar diversos aspectos de estos cursos que ofrecemos.


Imagen: © Can Stock Photo Inc. / cifotart

 

]]>
/blog/balance-de-ultimas-ediciones-de-diseno-web-seo-y-cm-y-nuevo-curso/feed/ 0
Páginas AMP: SEO para móviles /blog/paginas-amp-seo-para-moviles/ Thu, 09 Mar 2017 19:25:09 +0000 /?p=14095 Seguimos publicando novedades de la 5ª edición del curso SEO, Posicionamiento Web, que se inicia el 27 de marzo en el Campus Virtual de la Universidad de Granada.
Esta vez toca le turno a las páginas AMP (Accelerated Mobile Pages), un apartado que podemos relacionar con el SEO para móviles.

¿Qué son las páginas AMP?

Como indica la traducción literal (Páginas Móviles Aceleradas), se trata de páginas web que se muestran en dispositivos móviles más rápidamente, al estar diseñadas con unas especificaciones especiales y servirse desde una caché de Google.

La tecnología AMP se basa en el estándar abierto AMP HTML. Este formato es una variante del HTML y se visualiza en todos los navegadores modernos, tanto en Android como iOS. Daremos más detalles después.

Logo AMP

AMP HTML es un proyecto open source, donde han colaborado destacadas plataformas de Internet (Twitter, WordPress, Pinterest, Google ,…) y proveedores de contenidos online (The New York Times, Mashable, The Washington Post, El Pais…), y que ya están utilizando un número importante de Webs.

Dónde y cómo aparecen las páginas AMP

Te pueden aparecer en los resultados de Google si realizas una búsqueda con un smartphone o dispositivo móvil. En concreto, los lugares donde puede aparecer contenido AMP son:

  • Carrusel de noticias destacadas AMP
  • Otras Tarjetas o Fragmentos enriquecidos (ver recuadro abajo)
  • Lista de resultados estándar

Las Rich Cards y Rich Snippets permiten destacar una página en los SERP Google, mediante el uso de datos estructurados. como explicamos en el curso SEO. El tutor del mismo, Alfredo Hernández-Díaz, nos habla en este artículo de los Rich Snippets.

Vemos algunas capturas de pantalla para ilustrar la visualización de contenido AMP.

Presentamos primero un ejemplo de carrusel ‘top news’ AMP. Podemos ir deslizando el dedo lateralmente en la pantalla táctil para que nos muestre más resultados de ese carrusel.

SERP Google en dispositivo móvil

En la siguiente imagen vemos páginas AMP en los resultados estándar de búsqueda de Google desde un smartphone. Como en el caso anterior, se identifican por el logo:
Identificación página AMP en SERP Google

SERP con páginas AMP

En la siguiente imagen hemos accedido a una página AMP:

  • La URL en el navegador del móvil nos indica que está almacenada en la caché AMP de Google: 
    www.google.es/amp....
  • Debajo, vemos como se nos presenta la fuente de la que proviene
    amp.20minutos.es
  • Al pinchar en el icono ‘vínculo’ se despliega la URL de la página original
    www.20minutos.es/noticia....
     a la que podemos acceder desde este enlace.Página AMP

Para ver la diferencia entre una página web normal y la versión AMP, os mostramos una entrada de nuestro blog con las dos versiones respectivamente, donde puede verse que la AMP está simplificada respecto a la anterior:

Página web responsivePágina AMP

¿Cómo funcionan las páginas AMP?

Tienes una documentación muy detallada en la web del proyecto AMP, aunque de una forma básica podemos esquematizarlo de las siguiente forma:

  • Seguimos manteniendo la versión estándar HTML de nuestra Web
  • Debemos vincular las versiones HTML y AMP de cada página, incluyendo en cada una, en su sección
    <head>
     , una etiqueta
    <link>
      que apunte a la otra versión (o así mismas si solo existe la versión AMP).
    De esta forma Google sabe qué indexar, qué presentar en cada situación, y no considera contenido duplicado la página AMP.
  • Para dar una idea de este etiquetado, copiamos el ejemplo donde se apunta de la versión HTML a la AMP:
    <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

De todas maneras, se puede automatizar esta tarea en muchos CMS como Drupal o Joomla mediante módulos o extensiones. Si trabajamos por ejemplo con WordPress tenemos varios, como el plugin AMP o el AMP for WP

¿Por qué las especificaciones AMP mejoran el rendimiento?

Para mejorar la carga de las páginas AMP se siguen unas directrices de diseño que buscan presentar casi instantáneamente el contenido de texto. Para los que estáis más familiarizado con el desarrollo web os vamos a mencionar algunas:

  • Se minimizan las peticiones HTTP, con utilización por ejemplo solo de estilos internos CSS (en sección <head>), carga diferida de fuentes,…
  • Las imágenes y anuncios solo se descargan si es probable que el usuario las vea, dependiendo de la posición de esos recursos en la página y el desplazamiento que haga el usuario en su navegador.
  • Igualmente para las imágenes o recursos similares se calcula con antelación las dimensiones y el espacio que van a ocupar para poder maquetar la presentación de la página aunque aún no se hayan descargado.
  • Solo se permite JavaScript asíncrono, para que los scripts no bloqueen o retrasen la carga del resto de elementos de la página. De hecho no se permite JavaScript de autor, sino que se emplean elementos AMP personalizados.

¿Cómo es el AMP HTML?

Como hemos comentado antes es una variante de HTML. Puedes consultar en github la especificación de las etiquetas AMP HTML. De forma resumida podemos decir que:

  • Permite utilizar la mayoría de las etiquetas HTML5: <html> <body> <head> <p> <div>…
  • Prohíbe algunas, sobre todo relacionadas con recursos externos: <object> <embed> …
  • Tiene una versión equivalente para otras, principalmente asociadas a objetos multimedia: <amp-img> <amp-video> <amp-audio>…

Para los más curiosos, copiamos el ejemplo más simple (un ‘Hello World’) en formato HTML AMP de la web del proyecto:

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Además del AMP HTML debemos considerar la biblioteca AMP JS que implementa todas las prácticas recomendadas AMP para garantizar la velocidad de presentación de dichas páginas.

Como hemos indicado antes, una de las optimizaciones que realiza es convertir todo el JavaScript en asíncrono, para evitar que éste bloquee la carga de la página.

¿Qué es el Google AMP Cache?

Es un CDN que ha implementado Google para entregar todos los documentos AMP válidos. Captura las páginas AMP HTML almacenándolas en caché para luego poder entregarlas (el documento, los archivos de JS e imágenes) usando HTTP 2.0 , todo desde un mismo origen, logrando mayor eficiencia.

Validador de páginas AMP

Las páginas AMP han de estar validadas para ser servidas sin errores desde la caché de Google. Tienes varias opciones para comprobar esa validación, tecleando el código en un validador AMP interactivo o comprobándolo en un validador AMP online introduciendo la URL de la página

Estado de la implementación de páginas AMP

El proyecto AMP se anunció por Google en 2015, y se ha ido adoptado por un número significativo de Webs desde 2016 hasta ahora (la web del proyecto indica más de 1.500 millones de páginas AMP publicadas)

Ha habido algunas quejas de usuarios en foros de soporte Google. Quieren seguir accediendo directamente a las páginas originales, por tener más funcionalidades que las cacheadas y porque las velocidades instantáneas que se ‘prometían’ no parecen cumplirse siempre (piden una opción en el buscador que permita deshabilitar las AMP si el usuario lo desea). También es cierto que muchos errores o retrasos que se experimentan pueden deberse a implementaciones incorrectas de AMP HTML no bien validadas.

En cualquier caso, las webs que están utilizándolas, manifiestan por lo general una mejora considerable de velocidad (llegando hasta un 85% de mayor rapidez) con incremento significativo del tráfico que reciben desde Google.

Si como parece, Google sigue apostando por las páginas AMP, es algo muy a tener en cuenta en SEO si queremos que nuestra Web compita en los SERP que se muestran en smartphones, tablets y otros dispositivos móviles. Como ocurrió con la ‘exigencia’ de un diseño adaptado a esos dispositivos, Google lo plantea ahora para la velocidad de descarga.

]]>
Nuevo curso “Aprende a crear sitios webs con WordPress” /blog/nuevo-curso-aprender-a-crear-sitios-webs-con-wordpress/ Tue, 07 Jun 2016 10:12:15 +0000 /?p=13416 En el último post anunciamos una nueva línea de formación “Aprende a…” . Pues bien, ya está aquí el segundo curso de esta serie: “Aprende a crear sitios webs con WordPress“.

En esta curso nos centramos en crear webs (y blogs) con este gestor de contenidos, el más utilizado en el mundo. Tiene un enfoque muy práctico y el objetivo es claro: que al terminar el curso tengas un sitio web hecho con WordPress, completamente operativo y configurado, publicado en Internet.

Esta formación también te puede ayudar si tienes una página web o blog en WordPress.com, Blogger o servicios similares  y quieren dar el paso a una instalación en tu propio hosting, o incluso para los que conozcáis algo este software, pero queráis resolver dudas y mejorar su configuración y la forma de trabajar  con él.

Todos los servicios y herramientas que vemos en el curso son gratuitos, desde WordPress, software libre sin coste de licencia, al alojamiento web, themes o plugins que elegimos: puedes tener tu web, con control total y sin publicidad de terceros, completamente gratis.

Promoción de lanzamiento

Para dar a conocer la línea “Aprende a…”, te ofrecemos con una sola suscripción (¡ya de por sí muy económica!) acceder a los dos cursos por el precio de uno.

Y si quieres probar antes, tienes acceso a parte de los contenidos: Aprende a Programar y Aprende WordPress, sin registrarte.

Ah! y ya estamos trabajando en un nuevo curso para esta serie: “Aprende a editar páginas web con HTML y CSS” que será un buen complemento para estos dos que ya hemos lanzado.

Características principales de los cursos “Aprende a…”:

  • Empieza cuando quieras (alta automática)
  • Tómate el tiempo que necesites (tú controlas el alta y baja en la suscripción)
  • Puedes elegir modalidad de Autoformación (super económica) o Premium (ayuda de tutores y diploma)
  • Contenidos (web, pdf y videos), tests y ejercicios completamente online.
]]>
Crear una web, ¿por dónde empiezo? (I) /blog/crear-una-web-por-donde-empiezo/ /blog/crear-una-web-por-donde-empiezo/#comments Sun, 21 Apr 2013 11:51:17 +0000 /?p=7137 Hay personas con poca experiencia en programación, que nos preguntan por dónde empezar, qué deben aprender para poder crear ellos mismos páginas web.

En nuestra respuesta tratamos de orientarles según sus conocimientos técnicos y objetivos. Algunos solo quieren crear un sitio web personal o para su negocio para presentar información con texto, imágenes, videos o presentaciones. Otros en cambio, desean desarrollar aplicaciones web interactivas de una cierta complejidad.

En este primer artículo nos centraremos en el objetivo más básico. Para ello,  existen muchas soluciones que permiten publicar ese tipo de información en formato web sin necesidad de instalar nada ni aprender ningún lenguaje informático específico. Vamos a ver algunas de las más utilizadas:

Página en Redes Sociales

La opción más básica de publicación en la Web pasa posiblemente por darte de alta un perfil en algunas de las redes sociales más populares e incorporar allí tu información personal. Además, te ofrecen la posibilidad de crear una página específica para tu empresa, cómo se explican por ejemplo en estos enlaces de Facebook o Linkedin.

Con esta opción no tenemos un dominio propio y según la red, pueden estar bastantes limitadas las posibilidades que tenemos, pero si somos una empresa y queremos iteractuar con los clientes y obtener nuevos contactos, debemos estar en aquellas que frecuentan nuestros usuarios. Hoy en día es un complemento necesario a nuestra propia web y debe plantearse con una estrategia integral tal como analizamos en nuestro curso de Community Manager

Servicios de alojamiento: Blogs y Webs

La siguiente posibilidad, muy utilizada, es dar de alta un blog en servicios como WordPress.com o Blogger y convertirlo en tu web, con la facilidad que te ofrecen sus gestores de contenidos para publicar información.

WordPress.com da muchas posibilidades de configuración, empezando por más de 200 themes (temas o plantillas de estilo) que te permiten tener un web con un diseño muy atractivo y funcional, pero en la opción gratuita no tienes dominio propio y pueden llegar a incluirte publicidad sin que tengas control sobre ella. No obstante ofrecen paquetes de pago que te permiten hacer un upgrade y obtener funcionalidades avanzadas y resolver esas cuestiones si te son importantes.

Otra posibilidad es crear tu sitio web con servicios gratuitos que ofrecen un sistema de plantillas predefinidas y un interfaz gráfico que permite configurarlas y personalizarlas según tus necesidades y publicarlas bajo un subdominio suyo, como son Webnode, Bligoo, Site123Google Sites. En este último servicio puedes tener además tu dominio propio de primer nivel y asignar esa URL a tu sitio Google, con lo que tendrías dirección propia con un hosting gratuito. Se puede montar una web ‘decente’ en poco tiempo, pero si tienes conocimientos, con un poco más de esfuerzo puedes crear sitios bastantes interesantes ya que puedes acceder al código fuente de las páginas. De hecho hay compañías de diseño web que se especializan en este entorno. No llega a las posibilidades que ofrece WordPress.com, con su enorme comunidad de desarrolladores y gran cantidad de themes o plugins pero es una solución gratuita sin publicidad.

 

Web en Google Sites

Web creada en Google Sites

 

También te proporcionan este tipo de herramienta muchos servicios de hosting (alojamiento web) que te incluyen además dominio propio de nivel superior (.es, .com…). Si no quieres invertir mucho al inicio, quizás puedas encontrar algunas ofertas gratuitas o a precios muy bajos (menos de 1 €/mes) con regalo de dominio, como en 1&1One.com, aunque las ofertas varían mucho y pueden haber cambiado y suelen estar limitadas al primer año solo.

Estos web ‘prefabricados’ pueden tener funcionalidades como un blog, formularios de contacto y otras varias que funcionan de manera integrada. No obstante, si necesitamos tener un sistema de blog avanzado como WordPress.org  o una Tienda Virtual para comercio electrónico como Prestashop o Zen Cart por citar algunas, es probable que nuestro servicio de hosting nos proporcione una herramienta para instalar este tipo de aplicaciones automáticamente como Simple Scripts, Fantástico o Softacolous.

De hecho, una opción muy usual es generar íntegramente nuestra Web con estos CMS (gestores de contenido), destacando especialmente WordPress, el más usado a nivel mundial. Este software libre y gratuito es fácil de operar y nos ayuda a crear webs con funcionalidades avanzadas y una presentación profesional. Si quieres animarte a probarlo, con nuestros contenidos y curso “Aprende a crear sitios web con WordPress” sabrás desarrollar y publicar tu propia web, personal o profesional (y si los costes son muy importantes para tí, te mostramos cómo hacerlo utilizando solo servicios y herramientas gratuitas). Eso sí, para sacar todo el partido a este CMS, es conveniente estar familiarizados con HTML y CSS para tener un mayor control en el diseño de las páginas. Y si además conocemos algo de JavaScript y PHP, ese control en el diseño y la gestión del sitio será aún mayor.

Para aquellos que todo este tipo de soluciones y conceptos les resultan nuevos y necesitan una introducción para entenderlos mejor, diseñamos nuestro curso de Alojamiento Web-Publicación en Internet . En él, los alumnos practican y aprenden a elegir la solución que más le puede interesar al mismo tiempo que descubren sus funcionalidades y comprenden los términos básicos (DNS, TLD, subdominio, CPanel, FTP, instalador aplicaciones…) que aún siendo sencillos, pueden hacer que una persona que no esté familiarizado con ellos se pierda antes de empezar.

Aprender HTML y CSS

Pero aún teniendo todas estas opciones, en muchos casos fáciles de poner en marcha y gratuitas, aconsejamos que aprendas al menos dos lenguajes básicos para la Web: HTML y CSS. ¿Por qué? Pues por varias razones que te exponemos a continuación:

  • Las posibilidades que te dan un interfaz gráfico y unas plantillas acaban teniendo limitaciones. Si conoces estos lenguajes y te permiten acceder al código, puedes ajustar y personalizar mucho mejor, según tu gusto y necesidades. (Ojo! los CMS que hemos citados generan la mayor parte del HTML con PHP, por lo que necesitarías saber de este último como veremos en artículos posteriores).
  • HTML es un lenguaje de marcado con etiquetas y CSS son reglas de estilos de presentación, es decir, no son lenguajes de programación. Nuestra experiencia después de enseñar HTML y CSS a numerosos alumnos con conocimientos a nivel de usuario informático es que los entienden con fácilidad y son capaces de utilizarlos enseguida. Si no sabes nada de ellos, aquí te ofrecemos una Guía de introducción a HTML y CSS para hacerte una idea.
  • El aprendizaje de estos lenguajes te amplia tu visión a la hora de crear contenidos y distribuirlos en diferentes formatos. Aprendes a tratar de forma diferenciada el contenido de su presentación, a estructurar semánticamente la información, y en definitiva a ver las diferencias entre el diseño y la publicación enfocada a medios impresos respecto a la Web, con diversidad de dispositivos, pantallas, navegadores o aplicaciones donde se puede llegar a visualizar el contenido que has creado.
  • El conocer estos lenguajes te abre la puerta para crear tus propias páginas web sin depender de ningún entorno o sistema. Puede que muchos no entiendan esa necesidad existiendo servicios cómo los que hemos presentado, pero puede haber varias razones para ello, cómo el querer tener el control total sobre lo que creas o realizarlo como ejercicio de aprendizaje para ir adquiriendo una base sólida de conocimientos en el campo del diseño y programación web.
Editando HTML

HTML: el lenguaje para crear páginas web

 

Si te convencen estos argumentos, puedes empezar con lo más sencillo, una simple página creada con un editor online como Thimble de Mozilla que permite publicación instantánea.

Si quieres avanzar e iniciar la creación de tu sitio, te aconsejamos que te instales en tu equipo un editor especializado para este tipo de tareas. Hay decenas de ellos, con un gran rango de funcionalidades. Opciones interesantes, de código abierto y gratuitas son Geany (Linux) y Notepad++  (Windows), si quieres editar el código directamente (muchísimo más potente que el simple Notepad, con el que no tiene nada que ver) o KompoZer si quieres tener también funcionalidades WYSIWYG (edición en modo gráfico), aunque sin versiones nuevas desde hace tiempo. En cualquier caso busca entre las numerosas alternativas, prueba y elige el que más te guste.

Aunque te hayas formado en los fundamentos y buenas prácticas del diseño web (estándares, accesibilidad,…)  crear una web desde cero es complicado si no se tiene experiencia. Una opción que te ahorraría tiempo y te ayudará a crear mejores sitios es basarte en diseños-plantillas con licencias abiertas, que puedes descargar gratuitamente de sitios como  Open Source Web Design o Open Designs . Por un lado aprenderás del trabajo de personas con más conocimiento en este campo, estudiando y personalizando su código HTML y CSS, y además, si no tienes experiencia en el diseño gráfico y de interfaces, conseguirás una presentación más accesible y profesional.

El diseño de una web, como concepto integral, es un aspecto que muchas veces descuidamos (la adecuada selección de colores, tipografías, división en secciones, navegación y distribución de la información…) y es fundamental para que nuestra web no solo sea atractiva, sino cómoda y fácil de visitar. Además, una buena accesibilidad y cumplir los estándares nos ayudará en lo que conocemos como SEO, es decir, la optimización en buscadores. Hay más aspectos implicados, y no vamos a hablar de ello ahora, pero sí que los factores on-page relativos al diseño de las páginas los debemos tener en cuenta desde el inicio de nuestro desarrollo.

Para más avanzados…

Si adquieres más experiencia en el diseño web puedes utilizar los tan de moda ‘front-end frameworks‘ , como Bootsptrap de Twitter o HTMLKick Start que facilitan un desarrollo rápido, utilizando las mejores prácticas, diseño adaptativo y otras características muy interesantes, aunque creemos que deberías estar familiarizado con el lenguaje de programación Javascript, que sería el siguiente paso a dar en tu aprendizaje.

Esta es una primera contestación, pero la iremos ampliando en nuevos artículos, donde hablaremos de las posibilidades del nuevo HTML5 con el citado Javascript (y librerias como jQuery), de lenguajes que se ejecutan en el servidor web y que permiten el desarrollo de sitios dinámicos y aplicaciones web como PHP o Pyhton utilizando bases de datos, y de otra serie de herramientas, entornos y conceptos que quizás hayas oído nombrar pero no tengas claro qué son o para qué se utilizan.

]]>
/blog/crear-una-web-por-donde-empiezo/feed/ 3
Comenzando a usar WordPress /blog/comenzando-a-usar-wordpress/ Tue, 15 Mar 2011 08:26:08 +0000 /?p=1108 Como prometimos en nuestra anterior entrada “¿Por qué usar WordPress?“, vamos a comentar un poco nuestra experiencia en el uso de WordPress para la creación de nuestro sitio web corporativo. En nuestro caso, el hosting de pago que tenemos contratado da la posibilidad de instalar WordPress mediante scripts automáticos, por lo que este proceso resultó sencillo.

Una vez instalado, el siguiente paso es la búsqueda de un tema (plantilla) que se ajuste a lo que buscamos. En este punto hemos de tener la suficiente paciencia, ya que no es buena idea estar cambiando cada mes el aspecto de nuestra web, por lo que nuestra elección deberá ser lo suficientemente satisfactoria como para mantenerla un mínimo de 6 meses (en el caso de empresas, la imagen corporativa y por supuesto el diseño del sitio web son aspectos muy importantes que no se deben cambiar tan a la ligera).

En internet existen miles de páginas con temas gratuitos para descargar y probar, así que una buena decisión antes de buscar algún tema de pago es revisar los gratuitos para ver si cumplen nuestros requisitos. Si a pesar de todo no hemos encontrado exactamente lo que buscamos, podemos plantearnos la posibilidad de comprarlo entre los miles que ofrecen diversas empresas y diseñadores, a precios que pueden rondar entre 30 y 100 euros aproximadamente. Nuestra recomendación es no pagar por lo que no vamos a necesitar, por lo que si sólo vamos buscando un tema y lo encontramos, no deberíamos pagar por paquetes que contengan varios y que nos encarecerán el precio. Un punto importante es que el soporte que dé la empresa creadora del tema sea bueno, porque una vez adquirido e instalado podemos necesitar ayuda para resolver cualquier problema que surja. Para saberlo, una buena idea es investigar un poco sobre la compañía en foros, en su propia página, en comentarios de facebook, etc., de forma que evitemos quebraderos de cabeza futuros. Uno de los problemas que puede darse es la desaparición repentina del soporte debido a “largas vacaciones” de los diseñadores, que a veces dejan a miles de usuarios literalmente colgados. En este sentido es conveniente analizar un poco la solidez de los que están detrás del producto que vamos a comprar.

Una vez realizada la instalación del tema, probablemente queramos cambiar tipos de letra, colores, botones, barras laterales, etc. Algunos temas llevan consigo un pequeño entorno de menús que se incorpora al panel de control de nuestro WordPress, y que da la posibilidad de hacer casi todas estas modificaciones sin tener que acceder al código, pero en muchos casos vamos a tener que cambiar parámetros en los ficheros css o php de nuestra instalación, por lo que nos vendría bien tener ciertos conocimientos mínimos en estas dos tecnologías (a los usuarios principiantes les puede resultar útil nuestro tutorial de Introducción a HTML y CSS). Herramientas como el plugin de Firefox Firebug nos pueden ayudar con la tarea de localizar exactamente la línea de código que buscamos, y en todo caso siempre podemos preguntar a los que nos dan soporte. Otra recomendación que queremos hacer es realizar siempre copia de seguridad de nuestra instalación y de cada fichero que vayamos a modificar; además recomendamos también realizar algún tipo de control de versiones, que podemos tener con herramientas como GIT o Dropbox, por ejemplo.

Página de Inicio de la web de Digital Learning

Cuando ya tengamos un diseño acorde a nuestra planificación, llegará el momento de extender un poco la funcionalidad de nuestro WordPress mediante la instalación de plugins (extensiones). Recomendamos buscar siempre en el directorio de plugins de WordPress, y fiarnos de las valoraciones dadas por los usuarios a cada plugin. Aquí dependerá de lo que necesitemos, pero las posibilidades son casi infinitas: añadir encuestas, test, formularios de contacto, mapas de google, vídeos, ayuda para redirecciones, mejora del posicionamiento web, integración con redes sociales, inserción de AdSense, etc. Será cuestión de ir probándolos hasta dar con los que se ajustan más a nuestras necesidades. Habitualmente basta con entrar en el apartado “Plugins” del panel de control de nuestro WordPress, buscar el que queremos y pinchar en “Instalar” para poder comenzar a usarlo. Como detalle a tener en cuenta hemos de decir que mientras más plugins tengamos instalados, más lenta irá nuestra página, por lo que sólo debemos tener instalados y activados los que realmente necesitemos.

Ahora nos queda la tarea más importante que es la de llenar de contenido nuestro sitio web, creando nuevas páginas y por supuesto entradas para el blog, siempre pensando en nuestros usuarios actuales y futuros, intentando aportar contenido atractivo, interesante, útil y a ser posible original (aunque esto sea cada vez más complicado). En nuestro caso ya teníamos una instalación previa de WordPress, por lo que tuvimos que realizar una migración de las páginas y entradas del blog a partir de una exportación de nuestra anterior instalación de WordPress (desde el panel de control se puede realizar la exportación de forma sencilla). La verdad es que no nos dio demasiados problemas salvo unos pequeños cambios en el formato de algún post que habían surgido. En todo caso, la exportación no es una tarea que deba llevar más de un día.

En un futuro post hablaremos sobre algunos detalles más a tener en cuenta para evitar problemas como los enlaces rotos, mejorar el posicionamiento web, la visibilidad de nuestras páginas, la accesibilidad; y daremos algunos consejos y recomendaciones que hemos obtenido de nuestra propia experiencia en la instalación y uso de WordPress.

Credits: http://www.sxc.hu/photo/427448 (Image)

]]>
¿Por qué usar WordPress? /blog/por-que-usar-wordpress/ Wed, 09 Mar 2011 10:24:14 +0000 /?p=1093 Cuando nos planteamos la creación de un blog como sitio web personal, uno de los primeros pasos es la elección del sistema de creación y del alojamiento. Si no somos usuarios expertos informáticos o no deseamos perder demasiado tiempo resolviendo problemas de programación, alojamiento o diseño, lo habitual será usar alguna de las herramientas más populares: WordPress o Blogger.

La filosofía de ambas es parecida: editores de nuevas entradas tipo WYSIWYG (‘lo ves es lo que obtienes’), menús muy simples, publicación en un par de clicks, plantillas para el diseño, posibilidad de personalizar widgets, integración fácil de RSS, etc; aunque desde el principio podemos decir que WordPress fue más allá, con la posibilidad de crear páginas, extensión de las funcionalidades a través de plugins y las ventajas de tener una gran comunidad trabajando en él. Mientras, Blogger fue creciendo enormemente debido a su sencillez, con el lema “Crea tu blog en 3 pasos”, permitiendo a los usuarios crear y publicar una bitácora casi en segundos; esto hizo que Google lanzara sus redes en 2003 sobre Pyra Labs, la empresa que creó Blogger, relanzando definitivamente el “boom” de los blogs.

Con el paso de los años Blogger ha intentado acercarse a las funciones de WordPress, de modo que por ejemplo ya permite la creación de páginas aparte de los posts,  y existen cada vez más widgets para personalizar las barras laterales; pero si buscamos un aspecto más profesional, una más fácil integración con otras herramientas web, las grandes posibilidades que dan los nuevos plugins,  el soporte de toda la comunidad del software libre o incluso si queremos tener nuestro propio hosting, definitivamente usaremos WordPress.

Y no hablamos sólo de una web personal, sino que también una pequeña empresa podría plantearse el uso de WordPress, ya que le permitiría crear una web corporativa de forma sencilla y económica, con las típicas secciones (productos, contacto, quiénes somos, ofertas, etc.). Simplemente tendría que buscar un diseño a su gusto entre los miles (y quizá pronto, millones) de temas gratuitos que están en la red.

Logo de wordpress

Si apostamos por WordPress, el primer paso sería decidir si vamos a alojar nuestro sitio web en sus propios servidores (la URL por tanto acabará en “wordpress.com”, y no podremos usar nuevos plugins) o vamos a contratar un alojamiento y un dominio propio (ver nuestro Curso de Alojamiento Web). Si elegimos la primera opción, nos bastará con entrar en la página de WordPress en español y seguir sencillos pasos. Si por el contrario elegimos la opción del alojamiento, una vez lo tengamos contratado hemos de realizar una instalación del sistema WordPress. Lo ideal sería que el hosting nos la hiciera automáticamente (la mayoría de los de pago tienen scripts que instalan WordPress), pero si lo queremos hacer a mano, aquí podemos descargar la última versión. En cualquier caso, tanto en esta última web como buceando por internet encontraremos cantidad de tutoriales y foros donde nos pueden resolver cualquier duda o problema que nos surja durante la instalación.

Una vez tengamos WordPress instalado llegará el momento de personalizar nuestra página, para adaptarla ya sea a nuestra propia forma de ser, a la imagen corporativa de nuestra empresa o simplemente a lo que queramos transmitir. Para ello existe una infinidad de temas, plantillas, plugins o widgets que darán un nuevo y mejor aspecto a nuestra web. De todo ello hablaremos en un próximo post, donde contaremos nuestra experiencia a la hora de crear la actual página web de Digital Learning.

]]>