En colaboración con LCLIS.COM - SOLUCIONES WEB PROFESIONALES Y ECONÓMICAS

jueves, 5 de julio de 2012

CSS3

Curso impartido por pablomonteserin.com
CSS3 no es HTML5 pero se están desarrollando a la vez.

Para probar que soporta el navegador:  http://html5test.com/

Ejemplo 1 que pone un recuadro de color con sombra en DIV

Ejemplo 3 de textos
sombras: text-shadow: 20px 20px 5px blue;
fuentes: tomarla de dafont.com, y descargar el fichero ttf deseado

<style>
h1 {
    text-shadow: 10px 10px 5px blue;
    font-family:miFuente;
}
@font-face{
    font-family: miFuente;
    src:url(sign-handwriting_demo-version.ttf)
}
</style>

Ejemplo 4: rotar y escalar
<style>
div{ width: 300px; height:300px;  }
#rotacion{
    transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
    background:Red;
    }
   
#escala{
    transform:scale(4,1);
    -webkit-transform:scale(4,1);
    -moz-transform:scale(4,1);
    background:Blue;
    }
</style>
</head>

<body>
<div id="rotacion">
</div>

<div id="escala">
</div>

Ejemplo 5 : animaciones
no necesito flash

<style>
div{ width: 300px; height:300px; background:Red;

-webkit-transition:  ease-in 2s; }
#anima:hover{
    -webkit-transform: rotate(180deg);
    }
</style>
</head>

<body>
<div id="anima">
 <h1>hola</h1>
</div>


 Para terminar:
jQuery Transit es una librería jQuery que usa los esfectos de CSS3

miércoles, 4 de julio de 2012

Maquetación web

Para diseñar se puede usar
  • Dreamweaver (ya crea para moviles con jQuery Mobile)
  • Aptana Studio (gratuito)
Para verlas
  • Chrome y Safari se ven igual
  • Firefox
  • IE
(en Safari.. podemo ver como queda en una tablet o Iphone en 'mostrar desarrollo')

Pasos
- Cuestionario para el cliente (briefing)
- Hacer mockup (prototipo) con BALSAMIQ o Prototyper (este último es mas potente pero de pago) o Muse o FlashCatalist

Dos maneras de hacer el diseño
- responsive design
- una para cada tipo de dispositivo

Estructura de un DIV
- position: static (tal como aparecen los objetos, de izquierda a derecha), absolute (referencia al elemento anterior), fixed (en relación a la ventana del navegador), relative, inherit.
- float: como si se hicieran cajitas

Ver la potencia de los CSS en http://www.csszengarden.com/

Como optimizar una web: GOOGLE ANALYTICS CONTENT EXPERIMENT

Optimizar una web significa probar combinaciones para obtener un objetivo que se desee: que el cliente se quede por la web, que compre, etc.

Google tenía GOOGLE WEBSITE OPTIMIZER que comparaba dos páginas.
Se ha integrado con Analytics, y permite segmentar por frupos de usuarios.

La idea es ir probando variaciones y ver en que caso hay mas éxito. Importante ir probando con FOTOS DIFERENTES.

Ejemplos: AMAZON.COM, AIRBNB.COM, ATRAPALO.COM, MULTIPLICA.COM
Idea: que el usuario haga una acción... que compre, que recomiende en red social, que se registre, etc.
Una web funciona bien cuando por ejemplo un 3% sean compradores. La realidad la conversión es del 0.5 %.

Para mejorar una web.. HACER CAMBIOS
- un buscador (el usuario no consume contenido, no lee... se BUSCA)
- menos texto y mas fotos
- indicar un book de clientes
- que se registren

Los cambios los deben decidir las VISITAS. No nos vale nuestra intuición. Por ejemplo, para que rellenen un formulario.
- que sucede en tu web: A
- casos de exito: A
- texto introductorio: C (poner instrucciones)
- sin foto: B
- color de fondo: B
- explicar porque pedimos el mail: B
- llamadas a la acción: C (quiero sacar partido a mi web)

Google Optimizer
- VISITANTE UNICO: persona que visita la web, independientemente del número de dias y lo que haga (si se borra la cookie, se considera una nueva persona)
- VISITA:  desde el mismo browser hasta que se cierre el browser.
- PAGINAS VISTAS
- CONVERSION

Para hacer test con OPTIMIZER
- pagina de test > CONVERSION > pagina destino
- variables (lo que variar en la pagina test)
- variantes: alternativas de una variable
OPTIMIZER te hace las combinaciones

1. test A/B: dos opciones. El trafico lo manda a dos alternativas :lo divide). Util para páginas con pocas conversiones, cuando queremos cambiar el CONTENIDO o el DISEÑO, o el MENSAJE. Desventaja: porque?
2. Optimizer te mezcla las combinaciones de variables y variantes. Pero necesita mucho trafico.

Test A/B
Como usar ANALYTICS hacer el test
- necesitas acceso al codigo fuente
- ir a CONTENIDO > EXPERIMENTOS

1. indicar las dos paginas
2. indicar el objetivo (por ejemplo, duración de estancia, dar una acción, etc)

test Multiple
estará a partir de 1 de Agosto

Las paginas ideales para testear son
- landing page
- pagina home
- inicio de un proceso de compra

Elementos a mejorar
- titulo: QUE INDIQUE LOS BENEFICIOS (que vaya a las emociones). Ejemplo: Te gusta conducir?
que sea creible, poner un número (9 de cada 10 destistas recomiendan...), hacer preguntas (para captar atención: quieres ser feliz, quieres ganar dinero?)
- con imágenes:  añadir texto debajo de la foto, ojo con las caras de personas... pues mirar a los ojos...que no se muestren porque sino focaliza en la cara y pierdes la atención... hacer que miren a  la llamada de acción.. el botón...
- con textos: destacar los beneficios y ventajas en la descripción del producto, reducir la cantidad de texto... lo breve y bueno dos veces bueno, que el lenguaje sea claro, destacar las 4 ideas principales...
- llamadas a la acción: poner beneficios y testimoniales (me fio mas de lo que dicen los demas). ojo con los testimoniales..que suene real... ofertas y descuentos que generen ANSIEDAD.. poniendo cuantas plazas quedan... poner GRATIS...
- poner 'sellos'

Un TEST os dará conocimiento... no importa si el test da un mal resultado.. pues asi sabras que es lo que no te funciona.




Notas del curso http://w144.bcn.cat/cibernarium/cat/activitats/editActivitat/millora-l-eficacia-de-la-teva-web-amb-tecniques-d-optimitzacio.do?codiIdioma=1&id=550124&id_activitat_mestre=550124&dia=4&mes=7&any=2012

viernes, 8 de octubre de 2010

Siglas de marketing de Internet

  • SEO: Search Engine Optimization. para que aparezca de las primeras en Google (posicionamiento)
  • SMO: Social Media Optimization. Facebook: promedio 1 hora por dia. Poner contenido y esperar que las demas personas la miren. Tweeter: solo deja poner 140 caracteres.
  • SMM: Social Media Marketing.
  • SEM: Search Engine Marketing (adwords: destacados en busquedas, y publicidad en páginas asociadas)
  • ROI: Return of Investment

jueves, 9 de septiembre de 2010

Aplicar el marketing viral para promocionar un sitio web

Que es el Marketing Viral

Hoy en día que hay millones de canales publicitarios (se ha calculado que al día se reciben unos 2500 impactos publicitarios), es dificil conseguir la atención del usuario. Además un 75% de las personas no se cree lo que dicen los anuncios publicitarios.

Lo que realmente funciona es la recomendación (el boca-oreja). En el mundo real, esta recomendación no llega mas allá de 4 o 5 contactos, pero en Internet las Redes Sociales ejercen un efecto multiplicador.

Para que un mensaje sea contagioso es necesario que haga reir o conmueva a la persona, en ese caso ejercerá un efecto estornudador. Además debe ser creible y facil de entender y reenviar. También funcionan bien los juegos que hacer participar al usuario.

Soportes mas utilizados y efectivos
  • videos en YouTube
  • aplicaciones en Facebook

Uso del marketing viral en un web site

El marketing viral se suele usar para mejorar el SEO (conseguir que aumenten los enlaces externos hacia nuestra web, con el fín de que mejore el posicionamiento en los buscadores). Ello se denomina Linkbaiting.

Para conseguirlo basta con poner en nuestra web elementos de interés que otras webs puedan enlazar hacia nuestra web:
  • encuestas
  • entrevistas
  • guias
  • herramientas
  • comparativas
  • estudios
  • concursos
  • juegos
  • eBooks
También es util enlazar un Blog con Twitter y Facebook, de manera que cuando se publique un nuevo artículo éste se trasnmita directamente a las redes sociales.