Curso de SEO

De WikiEducator
Saltar a: navegación, buscar

Usuario:Juanda/seo/nav


¿Qué es SEO?

  • SEO las siglas de Search Engine Optimization (optimización para motores de búsqueda).
  • Normalmente nos referiremos a SEO como posicionamiento web.
  • Estrategia a seguir para obtener enlaces entrantes desde otras páginas.
  • Su objetivo es posicionar paginas en los primeros resultados de búsqueda para determinadas palabras clave.

¿Qué es SEM?

  • Search Engine Marketing o marketing en buscadores.
  • El SEM abarca todo lo que es publicidad PPC (Pago por click) pagada en los buscadores a través de herramientas como Google AdWords.
  • Su objetivo es conocer las estrategias y técnicas con las que gestionar estos anuncios para atraer el mayor número de clics, que supongan el menor coste y máxima calidad de visita.

¿Qué es SMM?

  • Social Media Marketing o Marketing en Medios Sociales.
  • Surge con el boom de los medios sociales en Internet.
  • El SMM implica la interacción entre la empresa/cliente con los usuarios finales con los que se quiere comunicar/hablar, utilizando plataformas en las que se encuentran los perfiles de cliente perfectos para debatir, opinar, sugerir, hablar….

¿Qué es SMO?

  • Social Media Optimization. Es el posicionamiento en Medios Sociales.
  • Su objetivo es conocer las distintas plataformas en las que se pueda realizar la promoción de unos contenidos (videos, blogs, perfiles) en la red de medios sociales.


Diseño responsable

  • Se utiliza el criterio "mobile first":
Diseños sencillos
Diseños más complejos mediante media queries y siempre con un min-width
Se evita llevar un diseño pesado y aligerarlo para conseguir un time load aceptable para la red 3G.
  • Imágenes específicas para el tamaño de pantalla de los móviles, tanto por ancho de banda como por tamaño de pantalla, ver ejemplo
  • Uso de versiones minified y gzip

Ejemplo CSS Mobile First

  • Las media queries en ems en vez de pixeles para asegurarnos que el layout se adaptará al cambio del tamaño de las fuentes, además de al ancho de pantalla.
  • Para calcular la anchura en ems, se divide en ancho de nuestro objetivo entre 16px (tamaño de letra por defecto)
  • Aplicaciones Web accesibles via navegador
/* Start with core styles outside of a media query that apply to mobile and up */
/* Global typography and design elements, stacked containers */
body { font-family: Helvetica, san-serif; }
H1 { color: green; }
a:link { color:purple; }
 
/* Stack the two content containers */
.main,
.sidebar { display:block; width:100%; }
 
/* First breakpoint at 576px */
/* Inherits mobile styles, but floats containers to make columns */
@media all and (min-width: 36em){
	.main { float: left; width:60%; }
	.sidebar { float: left; width:40%; }
}
 
/* Second breakpoint at 800px */
/* Adjusts column proportions, tweaks base H1 */
@media all and (min-width: 50em){
	.main { width:70%; }
	.sidebar { width:30%; }
 
	/* You can also tweak any other styles in a breakpoint */
	H1 { color: blue; font-size:1.2em }
}

Tipo de aplicaciones Web con PhoneGap

  • PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:
Camara, GPS, libreta de teléfonos....
  • La mayoría de las aplicaciones web basadas en PhoneGap consumirán mediante javascript servicios web
  • Ejemplos de aplicaciones de este tipo serían Google Maps, FourSquare...

Necesidades en desarrollos web para móviles

  • Desarrollo de la aplicación para varias plataformas
  • La experiencia de usuario en la aplicación debe ser consistente entre plataformas:
Un usuario puede migrar de SO incluso utilizar varios
La experiencia de usuario podría variar entre dispositivos en función de las características y capacidades de los dispositivos
  • Varios equipos de desarrollo no siempre es la mejor opción, por las necesidades de coordinación inherentes.
Requerimientos para desarrollo de programas para dispositivos móviles

PhoneGap

  • Se basa en la parte común de todos los dispositivos móviles: el navegador
  • Los nuevos navegadores se adhieren a estándares como HTML5/CSS3.
  • HTML5 nos da mucha funcionalidad: procesos en background mediante web workers, soporte offline, base de datos...
  • CSS3 permite que nos despidamos de flash para realizar gradientes, bordes redondeados, páginas responsivas, vistas de impresión, etc.
  • Todas las plataformas móviles excepto Windows 7 Phone utilizan un navegador basado en webkit
Navegador en dispositivos móviles

Webviews

  • Piensa en una aplicación PhoneGap como un navegador embebido dentro de la aplicación y que ejecuta HMTL5/CSS.
  • Estos navegadores embebidos es lo que se conoce como webview
  • Cada una de las pantallas de nuestra aplicación será un webview.
  • Desde el webview ejecutaremos código JavaScript que comunicará con código nativo del dispositivo.
  • Todos los dispositivos permiten al código en JavaScript hacer llamadas a código nativo en Java/C++/Objective C y al revés.