CAJÓN DESASTREConocimiento útiles para mantener nuestra Web.

Iván Martínez Toro

ÍNDICE DE CONTENIDOS

� Nuestra web en los buscadores.� Arañas.� Sistema.� Trucos.

� Flash.� Introducción.� Aprendizaje.

En mi Web.� En mi Web.

� Google Analytics.� Implementación.

� Google AdSensde.� Cobros.� No hacer trampas.� Implementación.� Integración con Google Analytics.

� Usabilidad.

� Uso de Imágenes.

NUESTRA WEB EN LOS BUSCADORES

� Los buscadores o motores de búsqueda son sistemas

informáticos que indexan archivos almacenados en

servidores web.

Las búsquedas se realizan mediante palabras clave. � Las búsquedas se realizan mediante palabras clave.

� Los buscadores mantienen bases de datos actualizadas

diariamente mediante “robots” llamados “arañas” y

comparan las palabras clave con esas bases de datos.

NUESTRA WEB EN LOS BUSCADORES (II) - ARAÑAS

� Son programas autónomos propiedad de los buscadores.

� Diseñados para recorrer la web siguiendo los enlaces entre páginas.

� Recorren internet consultando las páginas y recopilando información sobre sus contenidos.

� Llevan la información recopilada a una central, donde un sistema la procesa y la almacena.

NUESTRA WEB EN LOS BUSCADORES (III) - SISTEMA

� Un programa diferente analiza las páginas almacenadas para extraer términos clave de búsqueda.

� Estas palabras se guardan en el archivo índice junto con los enlaces a las páginas correspondientes.

� Entonces, las preguntas nuevas que envían los usuarios se comparan con este archivo índice.

� Para deducir los registros más pertinentes se usan diferentes métodos.

� Un método habitual, conocido como “peso según frecuencia”, asigna un peso relativo a las palabras para indicar su importancia en cada documento.

NUESTRA WEB EN LOS BUSCADORES (IV) – TRUCOS

� Sugerencias de diseño y contenido:

� Crear un sitio útil con mucha información y redactar páginas que describan el contenido con claridad y exactitud.

� Utilizar texto. No meter el contenido en Flash ni en imágenes, no es legible para las arañas.legible para las arañas.

� Pensar en las palabras que podrían introducir los usuarios para localizar nuestras páginas y asegurarse de que esas palabras estén incluidas en el sitio.

� Asegurarse de que los elementos <title> y los atributos "alt" del sitio sean descriptivos y precisos:

<img title="Logo de la web" alt="Texto alternativo" src="http://www.programacionweb.net/imagen.gif">

NUESTRA WEB EN LOS BUSCADORES (V) – TRUCOS (II)

� Comprobar que no haya enlaces dañados ni código HTML incorrecto.

� No son recomendables sitios web con más de 100 páginas.

� En cuanto a las imágenes de nuestro sitio:

� No insertar texto en las imágenes.

� Utilizar nombres de archivo informativos:

� mi-nuevo-gatito-negro.jpg es más informativo que IMG00023.JPG.

� Utilizar la etiqueta “alt”.

� Google nos ofrece un documento PDF con toda esta información y alguna más detallada:

http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf

NUESTRA WEB EN LOS BUSCADORES (VI) – TRUCOS (III)

� Sugerencias técnicas:� Utilizar un navegador de solo texto como “Lynx”

(http://www.delorie.com/web/lynxview.html) para examinar tu sitio. Así es como las arañas ven tu web. Podrás comprobar si hay algún contenido importante invisible para ellas.

� Poner un fichero “robots.txt” en la carpeta raíz del servidor web � Poner un fichero “robots.txt” en la carpeta raíz del servidor web indicando a los rastreadores los directorios que se pueden rastrear y los que no.

� Realizar una prueba para asegurarse de que el sitio aparezca correctamente en distintos navegadores.

� IMPORTANTE: Avisar a Google de nuestro nuevo sitio:

http://www.google.es/addurl.html

� Directrices de calidad – según Google :http://www.google.com/support/webmasters/bin/answer.py?answer=35769#3

NUESTRA WEB EN LOS BUSCADORES (VII) – TRUCOS (IV)

� Trucos variopintos :

� Poner las palabras clave de nuestra web en negrita mediante html:

<strong>texto en negrita</strong>

� Comprobar qué palabras usa la gente para llegar a la web y posicionar esas palabras al principio de la misma.posicionar esas palabras al principio de la misma.

� Nombrar cada página del sitio de forma lógica y con mucha información.

� Conseguir que nos enlacen desde otras páginas.

� El uso de etiquetas “meta” ya no es crítico pero sí recomendable.

� No todo son visitas (efecto “teta”, etiquetas ocultas, etc.).

FLASH - INTRODUCCIÓN

� Adobe Flash es una aplicación de edición multimedia con varias finalidades:

� crear animaciones,

� contenido multimedia interactivo, contenido multimedia interactivo,

� juegos,etc..

� Flash es el entorno y Flash Player es el programa de máquina virtual utilizado para ejecutar los archivos generados con Flash (películas .swf).

FLASH – INTRODUCCIÓN (II)

� .fla

� Es la animación que creas con Flash.

� El fichero que editas con Flash.

� El fichero original que nunca debes eliminar.� El fichero original que nunca debes eliminar.

� .swf

� El fichero “shockwave” resultado de tu .fla.

� El archivo que se pone en las páginas web.

� Es un fichero comprimido que no puede ser editado (así que no conviene borrar el .fla original).

FLASH – INTRODUCCIÓN (III)

� Software de edición:

� Adobe Flash (CS4 es la última versión).

� Se puede descargar una versión de prueba:

http://www.adobe.com/es/products/flash/http://www.adobe.com/es/products/flash/

� Existen otras aplicaciones alternativas:

�Swishzone, herramienta simple para la creación de flash.

�También tiene una versión de prueba:

http://www.swishzone.com/index.php

FLASH – APRENDIZAJE

� Aprendizaje mediante turoriales o libros.

� Buscar “aprender flash” en Google:� http://www.webestilo.com/flash/ (algo anticuado)

� http://www.tutorial-enlace.net/listado-largo-de-tutoriales-Flash.html (muchos tutoriales)tutoriales-Flash.html (muchos tutoriales)

� http://www.aprenderflash.com/ (buena pinta)

� Libro “Macromedia Flash MX”:�Descarga directa:

http://www.mediafire.com/?jcjjj3zkssd

� Web muy completa:

http://www.flashvillage.com/

FLASH – EN MI WEB

� No es recomendable hacer toda la web en Flash:

� Flash es útil para hacer anuncios y reclamos; su objetivo es llamar la atención.

� Puede usarse para partes de la web como galerías � Puede usarse para partes de la web como galerías de fotos o menús.

� No se debe introducir el contenido de la web en flash:�Las arañas no lo leerán, no apareceremos en buscadores.

�Los dispositivos sin flash (iPhone) no podrán visualizarlo.

FLASH – EN MI WEB (II)

� Existen plantillas completas gratuitas de flash:http://www.flashvillage.com/index.php.

� Son descargables y editables en formato .fla para adaptarlas a nuestro sitio.

� Existen encontrar otros muchos repositorios.

� También existen componentes aislados gratuitos:� Menús flash: http://www.flashmenus.net/

� Genera código html a introducir en nuestra página.

� Galerías de fotos flash: http://myspace.wihe.net/galeria-de-fotos-en-flash/� Configurables con nuestras fotos.

� Y otros muchos componentes en flash:http://www.taringa.net/posts/downloads/1104370/Flash-modificables-

para-tu-sitio-Web.html

GOOGLE ANALYTICS

� Sistema de estadísticas de sitios web:� Gratuito. ☺

� De calidad. Sustituye a los sistemas de estadísticas ofrecidos o no por los diferentes servidores de hosting.

� Fácil y rápido de implementar.� Fácil y rápido de implementar.

� Informes personalizables.

� Muchas información de interés:

� Orientación geográfica.

� ¿Cómo llegan los usuarios al sitio?

� ¿Cómo navegan por el sitio?

� ¿Desde qué página suelen dejar el sitio?

� Etc., etc., etc.

GOOGLE ANALYTICS - IMPLEMENTACIÓN

� Para implementarlo hay que tener cuenta en Google.

� Una vez tengamos nuestra web en marcha:

� Entrar en Google Analytics: http://www.google.com/analytics/es-ES/

� Acceder con nuestro usuario de Gmail.� Acceder con nuestro usuario de Gmail.

� Pinchar en “+ Añadir una cuenta nueva”, luego en “Regístrese”.

� Rellenar los formularios siguientes.

� Añadir el código de seguimiento en el código html de todas las páginas de nuestro sitio justo antes de la etiqueta </body>.

GOOGLE ADSENSE

� Sistema de anuncios relevantes para ganar dinero:

� Google hace coincidir los anuncios con el contenido de nuestro sitio.

� Se obtienen beneficios cuando los usuarios hagan clic en los anuncios.anuncios.

GOOGLE ADSENSE (II)

� Los anuncios son personalizables:

� Diferentes colores y formatos.

https://www.google.com/adsense/static/es/AdFormats.html

� Existe filtro de competencia:� Existe filtro de competencia:

� Para no anunciar a nuestros competidores!

� Google realiza revisión editorial de cada anuncio.

� No deja pasar anuncios inapropiados.

� Puede darse el extraño caso de que no existan anuncios para nuestra categoría de página.

� Google nos permite elegir el anuncio adecuado.

GOOGLE ADSENSE - COBROS

� Se ganará dinero cada vez que un usuario de nuestra web haga click en un anuncio.

� Diferente ganancia en función del anunciante.

� Los anunciantes con mejor oferta por click aparecen más. Los anunciantes con mejor oferta por click aparecen más. (herramienta AdWords usada por las empresas).

� ¿Cuándo y cómo me pagan?

� Se paga cada mes siempre y cuando se hallan conseguido 100$ o más. En caso contrario se acumula hasta que se consiga esa cantidad.

� Se envía un cheque o se realiza transferencia bancaria.

GOOGLE ADSENSE – COBROS (II)

� ¿De verdad se gana dinero?.

� Para cobrar todos los meses tienes que tener una web (o varias) con una media de 100 a 200 visitas diarias.

� El porcentaje de clicks de los usuarios es muy bajo, cercano al 1%.cercano al 1%.

� Hay que tener suerte para que los anuncios de nuestra web paguen bien.

�Si te tocan anuncios baratos que pagan 0,01$ por click… necesitarás 10.000 clicks para llegar a tu primer cheque… con un 1% de clicks… necesitarás 1.000.000 de visitas!!!!

GOOGLE ADSENSE – NO VALE HACER TRAMPAS

� ¿Y si hago YO click todos los días?

� Te pillarán rápido y te cancelarán la cuenta.

� ¿Y si digo a todos mis amigos que hagan click?

� Irá perfecto para el primer click que hagan siempre que � Irá perfecto para el primer click que hagan siempre que no lo hagan a la vez.

� …pero te acabarán pillando si siguen haciéndolo.

� Buah, yo tengo IP dinámica, no pueden pillarme.

� Sí, si que pueden.

� Son Google!

GOOGLE ADSENSE - IMPLEMENTACIÓN

� Para implementarlo hay que tener cuenta en Google.

� Una vez tengamos nuestra web en marcha:

� Entrar en Google AdSense: https://www.google.com/adsense/login/es/?hl=es&sourceid=aso&subid=es-es-ha-bk&medium=ha&term=google%20adsenseha-bk&medium=ha&term=google%20adsense

� Acceder con nuestro usuario de Gmail.

� Pinchar en “Regístrese”.

� Rellenar correctamente los formularios siguientes.

� Esperar a que desde Google nos confirmen la apertura de la cuenta por mail.

GOOGLE ADSENSE – IMPLEMENTACIÓN (II)

� Una vez confirmada la cuenta…

� Entrar en nuestro administrador de AdSense.

� Hacer click en la pestaña de “Configuración” de AdSense.

� Elegir el tipo de anuncio a incluir en la página.� Elegir el tipo de anuncio a incluir en la página.

�Para obtener información de cada tipo pinchar sobre él.

�Se puede trabajar con más de un tipo a la vez.

� Elegir el formato y tamaño.

� Seguir las instrucciones para insertar los anuncios en la web.

GOOGLE ADSENSE – INTEGRACIÓN CON ANALYTICS

� Una vez activado Google AdSense, la integración es muy recomendable.� Para llevarla a cabo, desde el menú de AdSense de “Informes” pinchar en

“Integre su cuenta de AdSense con Google Analytics” y seguir los pasos.

� Dentro de Analytics, en la sección de Contenido aparece una nueva sección AdSense:

� Top AdSense Content Permite ver en detalle páginas específicas y permite analizar la performance de estas. Por ejemplo si una página Top AdSense Content Permite ver en detalle páginas específicas y permite analizar la performance de estas. Por ejemplo si una página tiene un alto número de pageviews, pero no está rindiendo monetariamente lo que otras con menos páginas vistas. Esto nos ayudará a enfocarnos más en la optimización de esa página que no está rindiendo.

� Top AdSense Referrers Este reporte nos ayuda a ver como las diferentes fuentes de tráfico están contribuyendo en nuestras ganancias.

� AdSense Trending Este reporte nos permite analizar como nuestro blog está generando ganancias durante diferentes horas del día y también en diferentes días de la semana.

USABILIDAD

USABILIDAD - ¿QUÉ ES?

� Conjunto de técnicas que ayudan a los seres humanos a realizar tareas en entornos gráficos de ordenador.� Técnicas:

� Analizar el comportamiento humano al realizar la tarea.

Adaptar el entorno para simplificar y optimizar.� Adaptar el entorno para simplificar y optimizar.

� Tareas:

� Ver la programación de la tele para esta noche.

� Aprender sobre diseño de páginas web.

� Comprar un libro de pegatinas de Hello Kitty.

� Entornos:

� En nuestro caso, la WEB.

USABILIDAD - ¿QUÉ ES?

� 8 reglas de oro: (http://www.desarrolloweb.com/articulos/221.php)

� En internet el usuario es el que manda.

� En internet la calidad se basa en la rapidez y la fiabilidad.

� Seguridad.

� La confianza es algo que cuesta mucho ganar y se pierde � La confianza es algo que cuesta mucho ganar y se pierde con un mal enlace.

� Si quieres hacer una pagina decente, simplifica, reduce, optimiza.

� Pon las conclusiones al principio.

� No hagas perder el tiempo a la gente con cosas que no necesitan.

� Buenos contenidos.

USAR IMÁGENES

EN MI WEB

USO DE IMÁGENES

� No podemos coger cualquier imagen de internet y colocarla en nuestra web.� En la mayoría de los casos tenemos que averiguar su autor y pedir permiso.

� Puede que venga especificada la licencia de la imagen, tendremos que respetarla.

� Existen bancos de imágenes gratuitas de libre uso:� Normalmente requieren registro.

� Podemos incluir las imágenes en nuestra web sin más o a veces nombrando al autor.

� 25 sitios donde conseguirlas: http://www.xeduced.com/2008/07/30/25-sitios-donde-conseguir-imagenes-gratis/

� Existen bancos de imágenes de calidad de pago:� Por ejemplo: http://www.bancoimagenes.com

USO DE IMÁGENES - FORMATOS

� Nos encontramos con diferentes formatos, cada uno con unas características.� .bmp -> pesado, con calidad y sin transparencia.

� .jpg/.jpeg -> ligero, menor calidad y sin transparencia.

� .gif -> con posibilidad de animación, ligero, calidad baja, con � .gif -> con posibilidad de animación, ligero, calidad baja, con transparencia. Máximo 256 colores.

� .png -> ocupación media, calidad media, con transparencia.

� etc.

� Las más habituales y recomendables para nuestra web son:

� .gif

� .jpg

� Para crearlas, editarlas y demás, nada mejor que PhotoShop.