examen de titulo
DESCRIPTION
tesis diseño grafico multimedia año 2012TRANSCRIPT
Por: María Soledad Troncoso Aravena
Tutor: Jorge Cantú
2012
Proyecto para optar al Título Profesional de
Diseño Gráfico Multimedia
5
Instituto Profesional de Arte y Comunicación ARCOS
Proyecto para optar al Título Profesional de
Diseño Gráfico Multimedia
“Guía de diseño para el Community Manager”
María Soledad Troncoso Aravena
Tutor: Jorge Cantú
2012
7
Índice
ÍNDICE
Introducción...............................................................................................................................Descripción.................................................................................................................................Objetivos....................................................................................................................................Marco teórico: 1 ¿Qué es la web?...................................................................................................... 1.1 Web 2.0...................................................................................................... 2 ¿Qué son las redes sociales?................................................................................... 2.1 ¿Youtube es una red social?....................................................................... 2.2 Chiletercerpaísquemástiempopasaenredessociales.......................... 3Las3redessocialesmásutilizadasenchileyelmundo......................................... 4Perfilpsicológicodeusuariosderedessociales...................................................... 5¿QuéesunComunnitymanager?........................................................................... 5.1 PreguntasentrevistasaCommunityManager............................................ 5.2 RespuestasentrevistasaCommunityManager.......................................... 5.3 ResultadosentrevistasaCommunityManager.......................................... 5.2 Lasempresasylaweb................................................................................
Conclusióndelainvestigación..................................................................................................
Proyecto.
Propuesta: .................................................................................................................................-Manualdenormasbásicasdelamarcagráfica.......................................................................-CommunityGraphic,guíadediseñoparaelcommunitymanager...........................................-Introducción - 1 Uso de color en la web............................................................................................- 2Aspectospersonalizables:....................................................................................... 2.1 Twitter......................................................................................................... 2.2 Facebook :.................................................................................................. HtmlyCss................................................................................................... Paso a paso................................................................................................. 2.3 You tube..................................................................................................... 2.4 Tablacomparativa......................................................................................- 3CoherenciaGráfica:................................................................................................. 3.1 Canal 13...................................................................................................... 3.2 CommunityGraphic...................................................................................- 4LinkplataformaswebdeCommunityGraphic ....................................................
-Conclusión................................................................................................................................-Bibliografía................................................................................................................................
91113
191920202225262828293032
35
414349
515353555663646566676871
7375
9
Introducción
INTRODUCCIÓN
Internet partió como una red de comunicación militar, al pasar los años, evolucionó comoherramienta comunicativa entre universidades. Pero hoy en día es, básicamente, un lugar deencuentro para diferentes personas.
Chile es el tercer país delmundo quemás horas dedica a las redes sociales. Según la últimamedicióndecomScore(CompañíadeinvestigacióndemarketingenInternet).LoschilenosusanunterciodesutiempoeninternetensitioscomoFacebookoTwitter,informóeldiarioLATERCERAelviernes22juliodel2011.
Los motivos para entender la utilización de las redes sociales son variados y tienen que verprincipalmente con la cultura propia de la zona, pues los latinos tienden a sermás sociablesquelosestadounidensesoeuropeos.Tambiénpuededebersealageografíapropiadelpaísylanecesidaddecontactarseconlosseresqueridosqueseencuentranenotroslugaresdelmundo.Estopermitelamasificacióndelasherramientaswebyredessociales,puesentreganlaposibilidaddeinteractuarconotraspersonasmásamenudoeintercambiarinformaciónenmenortiempo.
Desdehaceunosañoslasempresasestánocupandolasredessocialescomoformadecomunicaciónpublicitaria, debidoa lagranaceptaciónqueéstashantenidoen laspersonasquea lapostresonsusconsumidores.Contodosestosfenómenossocialesytecnológicosdegrancrecimiento,comenzóaaparecerlafiguradelCOMMUNITYMANAGER,personasencargadasdeadministrarlasredessociales,quienesdeapocofueroncomprendiendolorápidoquecrecíaestaáreayformadetrabajoenChile. Mientrasenotrospaíseshaceañosexistenuniversidadesqueofrecenunmagísterenelcargo,enChilereciéncomienzaaserconocido,lafiguracreceylasofertaslaboralesse incrementan para esta función.
Elmarketingdigital crece con gran fuerzaennuestropaís y debido a estanecesidad se creandiplomadosdeCOMMUNITYMANAGER(enadelanteCM),paragenerarpersonalcapacitadoparaqueadministrenredessociales,deformaactualycompletadentrodeunaempresa,cumpliendounrolimportanteenelmarketingenchile.
EnlaactualidadmuchasempresasbuscanunCMconundeterminadoperfil,algunashancometidoerroresensubúsqueda,quizásporfaltadeconocimientodelmismomedio.
Losencargadosdeadministrarredessocialesdebensergrandescomunicadoresyporlomismosetiendeapensarque carreras comopublicistaoperiodismo son lasque calzan conel perfilparaestafunción,reflexiónquesibiennoestadeltodoerradaexistenhabilidadesquenosonenseñadasenestasáreas.Paralograrunnivelóptimoyllegaraseruncomunicadorcompleto,esnecesariomezclarvariadasdisciplinasquepermitanlograrunmensajeclaroparalosfuturosclientes.Amedidaquepasan losaños,sehanotadounacarenciaeneláreadeldiseñoen losCommunitymanager,heahíelpuntoatratar.
11
DESCRIPCIÓN DEL PROYECTO
EsteproyectotienecomoobjetivodefinirparámetrosdediseñoaplicadasaredessocialesqueayudealCMaatraerusuarios.NosplanteamoselactualescenariodelosCM,dondeexistenpe-riodistasacargodeestafunciónpero¿Cuántosperiodistasmanejaneláreadeldiseño?Hayher-ramientasbásicasquealgunosCMactualmentenomanejanyquedebieranhacerlo.Elproyectoestá dirigido especialmente a profesionales vinculados al área delmarketing, publicidad, rela-cionespúblicas,comunicacionesyquetodasaquellaspersonasquetienencomofunciónadmin-istraraungrupodeterminadodeconsumidoresenInternet,elaborandounplanestratégicoparaconseguir losobjetivos corporativosque sebusca cumplir a travésde lasdiversasplataformasDigitales,dandoespecialénfasisenlaimportanciadeldiseñoensustrabajos.
AdemásdedefinirelperfildelCMeidentificarelmercadonacional,específicamentesedefiniráeidentificarálasredessocialesmásutilizadas,contrastandoestasredeseidentificandoparámetrosdediseñocomocriteriosgráficosdecolores,fondos,tipografíasytamaños,entreotras,segúnelperfildelaempresa.Seestableceráqueáreadeestasredessocialessonpersonalizablesycualeselfuncionamientodeestasenchile.Realizandounanálisisenlainterfaz,visualygráficodeFace-book,twitteryyoutubecomoplataformasclaves.
Seutilizaranestasmismasplataformas(Facebook,youtubeytwiter)comosoportedelproyecto,yasíejemplificardelamejorformalosaspectosatratar.
Descripción del proyecto
13
OBJETIVOS
General
- CrearunaplataformawebcomoguíadediseñoalComunitymanageraplicadasaredes sociales .
Específicos
- IdentificarelperfildeunCommunityManager.- Identificarredesmasutilizadasenchile.- Definirparámetrosdediseñoquesepuedeintervenirdentrodeestasredes sociales.- Establecercriteriosvisualessegúnelperfildelaempresa.- Conocerlostiposdesoportesdelasredesociales.
Objetivos
MARCO TEÓRICO
19
Webesunvocablo inglésque significa“red”, “telaraña”o “malla”.El concepto seutilizaenelámbitotecnológicoparanombrarainternet.Tambiénpuedeservirhacermenciónaunapáginawebounsitiowebquenosonlomismo.
Avecesseutilizaerróneamenteeltérminopáginawebparareferirseasitioweb.Unapáginawebespartedeunsitiowebyesunúnicoarchivoconunnombredearchivoasignado,mientrasqueunsitiowebesunconjuntodearchivosllamadospáginasweb.
LaWeb1.0sesituóenlosaños1991al2003yeslaformamásbásicaqueexiste,connavegadoresdesólotexto,bastanterápidos.LuegosurgióelHTMLquehizolaspáginaswebmásagradablesa lavista,así como losprimerosnavegadoresvisuales talescomoMosaic(1), Netscape(2)e IE(internetexplorer)(3)
LaWeb1.0esdesólolectura.Elusuarionopuedeinteractuarconelcontenidodelapágina(nadadecomentarios,respuestas,citas,etc.),estandototalmentelimitadoaloqueelWebmastersubea ésta.
Características de la web 1.0:
Páginasestáticasenvezdedinámicasporelusuarioquelavisita.
ElusodeframesoMarcos.(4)
BotonesGIF,casisiempreaunaresolucióntípicade88x31pxentamaño, promocionandonavegadoreswebuotrosproductos.
FormulariosHTMLenviadosvíaemail.Unusuariollenabaunformularioydespuésde hacerclicseenviabaatravésdeunclientedecorreoelectrónico,conelproblemaque enelcódigo,sepodíaobservarlosdetallesdelenvíodelcorreoelectrónico.
Nosepodíanadherircomentariosninadaparecido.
EnconclusiónlaWeb1.0eselestadodelaweb,antesqueestadieraungirotecnológicoysocial.
¿QUÉ ES LA WEB?
Eltermino2.0 lodioaconocerDaleDoughertydeO’Reilly,enelaño2004dondeserealizó laprimer Conferencia sobre la Web 2.0 .
LaWeb2.0eslaevolucióndelaweb1.0.Peronotansoloeseso,sinoque,también,esuncambioenlamentalidaddelosusuariosdelawebyaqueconestanuevatecnologíasepuedesociabilizarcon personas de diferentes partes del mundo.
Estaversiónllegoacambiarelesquemadeinternet,yeselresultadodelaevoluciónquehatenidolasredessociales,utilizandosoftwaresgratuitosydisponiblesparatodoelmundoconelfindecomunicarsecondiversaspersonas,elcontenidodelawebdejodeserindividualyconcontenidofijo,ahorasepuedepublicarinformaciónenconjunto,intercambiandoarchivosdirectamenteconotrousuarioycomercializandoproductos,entreotros.
Setratadeuncambiodeactitudyunareconfiguraciónideológicadelaorganizaciónyusodelaweb.CuandonavegasenlaWebencuentraspáginasendondepuedesaccederaunprocesadordetextos,hojasdecálculo,asistentesparapresentaciones,asícomoprogramasdediseñoytodoloquetepuedesimaginar.
Características:
- Softwaresinnecesidaddeinstalarloenlacomputadora
- Colaboraciónenlíneasegúnlosdistintossitiosweb
- Creacióndenuevasredesdecolaboración
- Aplicación al desarrollo empresarial.
WEB 2.0
¿Qué es la web?
1- Mosaic primer navegador gráfico para Microsoft Windows. Fue creado en el NCSA en enero de 1993 por Marc Andreessen
2- Netscape Navigator fue un navegador web y el primer producto comercial de la compañía Netscape Communications, creada por Marc Andreessen desde 1994
3- IE es un navegador web desarrollado por Microsoft para el sistema operativo Microsoft Windows desde 1995.
4- Divisiones que se le pueden dar a una página Web. En cada uno de los frames se pueden cargar una página diferente que actúan independientemente una de otra
20
¿QUÉSONLASREDES
SOCIALES?
Las redes sociales son el resultado de la web 2.0 donde el cambio en la mentalidad del usuariofuedrástico.
Estos son sitios web que ofrecen servicios yfuncionalidades de comunicación diversospara mantener en contacto a los usuarios de la red. Las relaciones pueden ser de distintotipo, como intercambios financieros, amistad,relacionessexuales,entreotros.Se basanenun software especial que integra numerosasfuncionesindividuales:blogs,wikis,foros,chat,mensajería, etc. enunamisma interfaz yqueproporcionalaconectividadentrelosdiversosusuarios de la red.
Las 15 redes sociales mas populares del mundo segúnelestudiodel famosorankingeBizMBA(La base de conocimientos de comercio electrónico) , actualizado el 20 demarzo del2012.
1. FACEBOOK: Sitio donde puedes contactaramistades y compartir con las personas queformanpartede tuvida.Secomparten fotos,comentarios,videos,etc.con750.000.000visi-tasúnicasmensuales
2- TWITTER: Microblog donde los usuariospueden contactarse mandando mensajes en tiempo real. con 250.000.000 visitas únicasmensuales.
3-LINKEDIN:OrientadoaNegociosesunsitioen el que se ingresa un tipo de Usuario elcual contiene informaciónnuestra el quenospuedesermuyútilalahoradeoportunidadeslaborales. con 250.000.000 de visitas únicasmensuales
4-MYSPACE:Ofreceserviciosdeblog,perfilespersonales, búsqueda de amigos, grupos,fotos,músicayvideos.Con70.500.000visitasúnicasmensuales.
5-GOOGLE PLUS: Red social de google conservicios de video conferencias, chat, subirfotosyvideosparacompartirconamigos.con65.000.000visitasúnicasmensuales.
6-DEVIANTART:Espaciovirtualenelquecadausuario puede mostrar su arte y aprovecharlas posibilidades de la red para someterlo a los comentarios y críticas de cualquiera y enparticular de otros artistas. Con 25.500.00visitasúnicasmensuales.
7- LIVERJOURNAL: Permite a los internautasmantener un periódico o diario en línea. Con 20.500.000visitasúnicasmensuales.
8- TAGGED: Es un sitio web que permiteconectarse, generar relaciones, compartirmensajes, fotos y videos además de otrasaplicaciones que permiten interactuar con otros usuarios. Con 19.500.000 visitas únicasmensuales
9- ORKUT: Red social promovida por Google,diseñada para permitir a sus integrantesmantener sus relaciones existentes y hacernuevos amigos, contactos comerciales orelacionesmásíntimas.Con17.500.000visitasúnicasmensuales.
¿Qué son las redes sociales?
21
10-CAFEMOM:Sitioqueestáespecíficamentedirigidoalasmadresylasfuturasmadres.Con12.500.000visitasúnicasmensuales.
11- NING: Plataforma online para crear sitiosweb y redes sociales, orientado a quienesquieransociabilizarvíaonline.Con12.000.000visitasúnicasmensuales.
12-MEETUP:Permitealosusuariosencontrarsey unirse con grupos de interés común, comola política, libros, juegos, etc. Con 7.500.000visitasúnicasmensuales.
13- MY LIFE: Programa online que se utilizapara buscar personas. Con 5.400.000 visitasúnicasmensuales.
14-MYYEARBOOKDedicadaexclusivamentealosmás fanáticos de los juegos sociales. Con3.000.000visitasúnicasmensuales
15-BADOO:Redsocialparaconocergentedetodo elmundo. Con 2.500.000 visitas únicasmensuales.
¿YOU TUBE ES UNA RED
SOCIAL?
Youtube no esta clasificada como red socialpero debido a que es el portal de alojamiento devídeosmáspopulardelplanetaysuperalos100 millones de usuarios, lo consideraremoscomo la red social conalojamientode videosmasutilizadadelplaneta.
Sus usuarios pueden subir, visualizar ycompartir videos con todo elmundo, y estospueden ser comentados y calificados (masadelantesemencionaráconmásdetalle).
¿Qué son las redes sociales?
22
CHILE ES EL TERCER PAÍS
QUE MÁS TIEMPO PASA EN
LAS REDES SOCIALES EN EL
AÑO 2011
“LoschilenosusanunterciodesutiempoeninternetensitioscomoFacebookoTwitter”,deacuerdoalosdatosentregadosporComScore,Conesto,nuestropaísseconvierteenunodeloslugaresquemejorsehaadaptadoasuuso,demanerarápidaymasiva.
El estudio que se titula “Estado de interneten Chile 2011″ revela que “Facebook se estáconvirtiendoen lanuevaplazapública”,en lacualsereúnelacomunicad.
Datos y estadísticas:
El uso de internet en Chile alcanza los 7,3millones de usuarios.Enotraspalabrasmasdelatercerapartedelos
habitantesdechileutilizainternet.
Los internautas más jóvenes, entre 15 y 24años,pasan32horasalmesen la red,7másqueelpromedionacionalycasi10másqueelpromedio mundial. Esto se explica porque elusuarionacionaltieneunamarcadapreferenciapor las redes sociales.
El alcance de las redes sociales en el país esde un 93%, cuando el promedio mundial enesacategoríaesde76%.(DeacuerdoadatosentregadoporFacebookenFebrerode2012,lapenetración de Facebook en Chile supera sólo el80%).9decada10chilenosqueusainternetsonusuariosdealgunaredsocial.
De las 25,3 horas mensuales que un usuariopromedio pasa en internet en nuestro país,casiuntercio,unas8,2horasdeesetiempo,lodedica al uso de las redes sociales.
EstocolocaaChilecomoeltercerpaís,dentrode los 170 en los cuales comScore obtienedatos,conmayorusodeestetipodepáginas,superadosóloporFilipinasyMalasia.
Facebook, en Chile, tiene una penetracióndel90,3%,esdecir,casi todos losusuariosdeinternettienenunacuenta. Un8,7%delosusuariosdeinternetnotienenuna cuenta Facebook.8
Twitter,porsuparte,sóloobtieneun13,8%dealcance,dejandoanuestropaísenellugar16del mundo.
Los perjudicados:
DeacuerdoaLaTercera,losmásperjudicadosconestascifrasserían“elcorreoelectrónicoylamensajeríainstantánea,lasquenosólohantenidocaídasensualcance,sinotambiéneneltiempoenqueseutilizan”.
Elalcancedelcorreoelectrónicobajóun7,4%con respecto al año anterior, y un 11% si seconsideransólolossitiosdewebmail,esdecir,nocorporativos.
Elusode serviciosdemensajería instantáneatambién cayó en un 4% de uso, pero lomásimportante es queel tiempodedicado a estaactividad también disminuyó: de 8,2 horas al
mesen2010,ahorasonsólo6,4.
Líderes, pero falta:
Si bien Chile muestra altas cifras respecto al uso de redes sociales, hay otro tipo de sitiosquenomuestranelmismoavancerespectoaotrospaísesdelmundo,comoeselcasodelascompras por internet.
El59%deloschilenoshaceusodelaredpararealizar alguna compra. Esto equivale a 25minutos al mes.
Anivelmundial,elpromedioesde56minutos.Además está el tema de la confianza, ya quesóloel29%calificapositivamentelacalidadyelservicioofrecidoporelretaildigital.
¿Y los videos online?
Aquí tampoco hubo muchas sorpresas.En Chile se ven 7,6 horas de videos al mes,similaralaregión.
EnEE.UU., el consumode videos llegaa15,7horas.
Chile es el tercer país que más tiempo pasa en las redes sociales en el año 2011
25
LAS 3 REDES SOCIALES MÁS UTILIZADAS EN CHILE Y EL
MUNDO
Facebook:CreadaporMarkZuckerberg,FaceBook,elaño2004yfueoriginalmenteunsitioparaestudiantesdelaUniversidaddeHarvard.Supopularidadsedebeaqueelencuentrofísicosehacecadadíamáscomplicadoysentimos,comoindividuos,laexigenciadeabarcarelmundodelaglobalización.Facebooktedalaoportunidaddebuscaramigosdelpasado,presenteydeconocerfuturasamistades.Esta redsocialesconsideradaen losmedioscomounaevoluciónsocial, yaquees una innovadora formade comunicarse a travésde laweb, ayudando a los usuarios acontactarseycompartirconlaspersonasqueformaspartedesusvidas.
Laredbasagranpartedesuatractivoencompartirfotosyvideos.Elquerercapturarelmomento,loslugaresylaspersonasconunsoloclickdelacámaradigitalodesdeuncelularseaconvertidoenunaaficiónencomún.Todosquierencompartir,veryservistosenFacebook.Estesitiotiene5milmillonesdefotosymásde83millonessonsubidosdiariamente.
Conmásde750millonesdeusuariosFacebookocupael segundo lugarentre laspáginasmásvisitadas.EnLatinoaméricasehaconvertidoenlaredsocialmásconcurridayelaño2007lanzósusversionesenfrancés,alemányespañol.
El registro es gratis, cualquiera puede tener acceso a Facebook y el nuevo usuario puededesenvolversemuyprontocontodafacilidad,solobastacontenercorreoelectrónico.Elusuarionuevose llevaunagrata sorpresaal tenerunaexcelentebienvenidaydando laposibilidaddeencontrargentedetodalavida,inclusolasquenosehanvistoenaños.
Tambiénsepuedecrearunapáginapararepresentaraungrupodemúsica,unaempresaounproducto.Losserviciosqueofreceson:
• Lista de Amigos: poder agregar a cualquier persona conocida y que esté registrada,siemprequeaceptelainvitación.EnFacebooksepuedenlocalizaramigosconquienesseperdióel contactoo agregarotrosnuevos. Paraello, el servidorde Facebookposeeherramientasdebúsquedaydesugerenciadeamistad.
• GruposyPáginas:Setratadereunirpersonasconinteresescomunes.Enlosgrupossepuedenañadirfotos,vídeos,mensajes,etc.Laspáginassecreanconfinesespecíficosynoofreceforosdediscusión,yaquenoestánencaminadashacianingúntipodeconvocatoria.
Twitter: Twitter,traducidodelinglés:gorjeodepájaros,yporextensión,parloteo.TwitterfuelanzadoenJuliodel2006.Esunaderedsocialyunprogramademicroblogenlaquelosusuariospuedenenviarmensajesdenomásde140caracteres,tweets,dondeserespondealapreguntade
¿Quéestáshaciendo?Sontambiénenviadasaotrosusuariosquetienenlaopciónderecibirlas,delcírculodeamigosdelqueoriginaelmensaje;aellosselesdenomina“seguidores”,ofollowers.LanovedaddeTwitteresquetepermiteconectartealaredentiemporeal.Así,pues,funcionacomoredsocial,porqueeslamaneracomolossuscriptoressecomunicanentreellos.
Elenvíode losmensajes sepuede realizar tantopor lapáginawebdeTwitter, comovíaSMSa través de un teléfonomóvil, desde programas demensajería instantánea, o incluso desdecualquieraplicacióndeterceros,comoFacebook,uotro.
Youtube: Sefundoelaño2005,esunaaplicacióndegoogleyeslapáginamásconocidayconmayorcapacidadparadisfrutarvideosdetodotipo.Hoyendíalosusuariossuperanlas100milpersonas.Estainnovaciónenlaredestáabiertaalpúblicoenformagratuita.Cualquierpersonapuedeaccederaella,perosisequierecolgarunvideoocolocaruncomentario,simplementesepuedeingresardigitandoelnombredeusuariodelcorreodegmail.PorserunaaplicacióndeGoogle,sepuede ingresarconestaopciónqueescompatibleparatodos losserviciosdeestegrupo.Sepuede:buscarvideosdetemasdeinterés,subirvideos,compartirconamigos,hacerpartedelosGrupos(loscualesseformanporinteresescomunes).Tambiénpodemosencontrarnoticias,música,cine,automóviles,gente,juegos,mascotas,yunsinfíndemotivos.DebidoaquelatecnologíaavanzacadavezmásrápidoYoutube,tieneunaseriedecolaboradorespropios,desarrollandocanalesynuevosmétodosdehacermásfácilydinámicalaaplicación.
Con estas 3 redes sociales nos manejaremos desde ahora en adelante.
Las 3 redes sociales más utilizadas en chile y el mundo
26
PERFIL PSICOLÓGICO
DE USUARIOS DE REDES
SOCIALES
¿Que es lo que gatilla, psicológicamentehablando, a utilizar de manera frecuente lasredes sociales,? ¿ que clases de personasutilizanlasredessociales,porqué?¿Satisfaceráalgunanecesidadutilizarredessociales?
Según una Encuesta de Caracterización deUsuarios de Twitter en Chile realizado por launiversidad diego portales y publicado en eldiarioLATERCERAeldía3deenerodel2011,Twitter en Chile es utilizado principalmentepara mantenerse informado, y la segundamotivaciónparausarestaredsocialeselpoderdebatiryexpresaropinión.
Debidoaestoseestimadecirquelamayoríadelosusuariossongenteasalariada,contrabajoestableoestudiantes.Elestudiorevelatambiénquelamayorpartedelosusuariosdetwitterlohacendesdeunordenador(opcdeescritorio)yno desde sus celulares. Los horarios preferidos sonlosdeoficinaodeestudio.
Se puede decir entonces que el perfilpsicológicode losusuariosdeesta redsocial,esdegente interesadaen laactualidadycongrancapacidaddeopiniónpropia.
Ver papa interactivo: http://www.latercera.com/multimedia/interactivo/2011/01/687-34663-4-encuesta-de-caracterizacion-de-usuarios-de-twitter-en-chile.shtml
Perfil psicológico de usuarios de redes sociales
27
Un estudio realizado por la Universidadde Western Illinois encontró una relación proporcionalentre lacantidaddeamigosqueunapersonaposeeenFacebookysutendenciaalnarcisismo.Deacuerdoconlainvestigación,amayornúmerodeamigosenestaredsocial,mayoressuprobabilidaddeincurrirenalgunade las manifestaciones propias de este perfilpsicológico.
El narcisismo es un fenómeno asociado aconductas como la arrogancia, la envidia yla manipulación, características que en elcasodelosusuariosquesonmáspopularesyactivosenFacebooksecomplementaconunaobsesión por la imagen personal y una faltade empatía que se transmite en relacionesvacías.EltérminoprovienedelmitodeNarciso,quien tras rechazar el amor de la ninfa Ecofue condenado a enamorarse de si mismo y observar, perpetuamente, su rostro en lasuperficiedeunlagohastaquesetransformóenunaflor.
El estudio analizó en forma cruzada el perfilpsicológico de 294 usuarios de entre 18 y 65años, así como sus hábitos dentro de la redsocial. Además de la cantidad de amigos,otras variables que influían en la propensiónal narcisismo son la frecuencia con la que cambiansusfotosdeperfil,laagresividadconla que responden a comentarios que no son de suagradoylafrecuenciaconlaqueactualizansus novedades, de hecho somos muchoslos que nos preguntamos por qué ciertaspersonas creen que le interesa saber al resto delacomunidadenquéfiestaseencuentran,a qué concierto asistierono qué cereal estándegustandoenesemomento.
Véase el estudio en: http://www.sciencedirect.com/science/article/
pii/S0191886911005332
Youtube
Youtube dio a conocer en diciembre del 2009 quienes son los “youtubers” , rebelo que el59%delosusuariossonhombresentre25y49años,declasemediamásconectadoconlaRedqueelrestodeusuariosymásactivofueradeinternet.Vamásalcine,compramásysalemásdevacaciones.
Esunusuarioavanzado,queconsultaamenudoblogs y redes sociales. Generalmente hacecomprasonlineynolemolestaverpublicidadenestaplataformaparacompartirvídeo.
También se ha comprobado que YouTube llega a perfiles de usuario muy diferentes,por ejemplo: el 51% de las madres; el 78%cuando se trata de líderes de opinión o de amantesdelamúsicayun80%cuandosetratade «early adopters» (aquellas personas queson los primeros en adoptar la tecnología eincorporarlaensuprimerafasedelanzamiento)encuantoanuevastecnologíasserefiere.
Véaseelvideodelaconferencia¿Quiénessonlos youtubers?: http://www.youtube.com/watch?v=3r5oIP_2Wsw
Perfil psicológico de usuarios de redes sociales
28
¿QUÉ ES UN COMMUNITY
MANAGER?
Un Community Manager o Social MediaManagereslapersonaencargadadegestionar,construir ymoderar comunidades en torno auna marca en Internet.
Según la AERCO (Asociación española deresponsables de comunidad y profesionalessocialmedia)Esaquellapersonaencargadaoresponsabledesostener,acrecentary,enciertaforma, defender las relaciones de la empresacon sus clientes en el ámbito digital, graciasal conocimiento de las necesidades y losplanteamientosestratégicosdelaorganizaciónylosinteresesdelosclientes.Unapersonaqueconocelosobjetivosyactuarenconsecuenciaparaconseguirlos.
¿Cómo lo hace? Lo hace, utilizando nuevoscanales de comunicación a través deherramientas sociales, creando Marketingonline, Estrategias de difusión y visibilidadde la marca de construcción, Relacionespúblicas, Soporte técnico, Desarrollo deproducto y aseguramiento de la calidad,Ventas y asociaciones de negocios, Web 2.0,Presentacióndeinformes,Fijacióndemetasydesarrollo profesional.
¿Queredessocialesutiliza?Facebook,Twitter,LinkedIn, SlideShare, Xing, Flickr, youtube,etc…, por supuesto saber poner enmarcha ymantenerunBlogysabermanejarconsolturatodas las interconexiones que se puedenrealizarentreellos.
¿Qué debiera saber? Saber crear perfilesbásicosenlasprincipalesredessociales,tenerHabilidades de Comunicación y Redacción decontenidos,debesercapazdepromocionarla
marca,Saberrecogeropiniones,yaque,poréldeberánllegarloscambiosoideasparasentarlas bases de futuros productos y servicios,poniendofocoenlainvestigaciónpormediodeencuestasagruposdeinterésdedeterminadosconsumidores sobre los requisitos de los productos.
Cuando se necesita un CM? Cuando una empresa apuesta por internet como ventanay canal de expansión de sus estrategias demarketing.
PREGUNTAS ENTREVISTA A
COMMUNITY MANAGER
Nombre:
Profesión:
1.-¿EnquéconsisteeltrabajodeCM?
2.- ¿Hace cuanto que trabajas como CM?
3.-¿Cómo llegasa serCMyquéexperienciasprevias, laborales, estudiantiles u otroconforman tu perfil profesional? (SI recibiócapacitación) ¿Dónde y en qué consistió tucapacitación?
4.- ¿Para qué empresas has trabajado como CM?
5.- ¿Cuales son las redes sociales que administras?
6.-¿Ocupasunprogramadeanalíticawebenespecial? (ejemplo: Google analytics, UrchinSoftware,etc.)¿porqué?
7.-¿PorquécreesqueelCMesnecesariohoyen día en las empresas?
8.- ¿Crees que es necesario tener conocimientos de herramientas gráficas pararealizartutrabajoyporqué?(Siturespuestaes afirmativa) ¿Consideras que es posible yapropiadoun trabajoenconjuntoconDiseñoGráficoparatuprofesión?
9.-¿QuénocionesdeDGconsiderasrelevantesparaejecutaróptimamentetutrabajo?10.-Tomando en cuenta que internet evolucionarápidamente,¿cómoevoluciona lalabor del CM?
11.- ¿Qué habilidades blandas debe tener un buen CM?
12.- ¿Y cuales son las Habilidades duras?
¿Qué es un Community Manager?
29
¿Qué es un Community Manager?
ENTREVISTA A COMMUNITY MANAGER 1
Nombre:AlexisZamorano
Profesión: Periodista
1.-¿EnquéconsisteeltrabajodeCM?Principalmenteenelmanejodecomunidadesvirtuales.Estoincluye,lageneraciónydivulgacióndecontenidosvinculadosalamarca;difusióndepromociones,informaciónacercadelproductoy/omarca,moderaciónygeneracióndeconversacionesen tornoaésta;así como tambiéndegenerarestrategiasalineadas con losobjetivosde lamarcayquepermitanalcanzar lasmetaspropuestas en el ámbito de las redes sociales.
2.- ¿Hace cuanto que trabajas como CM?Hace2años.
3.-¿CómollegasaserCMyquéexperienciasprevias,laborales,estudiantilesuotroconformantuperfilprofesional?(SIrecibiócapacitación)¿Dóndeyenquéconsistiótucapacitación?LlegoaserCMenmitrabajoenlaCorporacióndeDeportesdePeñalolén,endondelasredessocialessetransformaronenunelementovitalparaentregarinformaciónalacomunidad,asícomoparaestablecerunnuevocanaldecomunicaciónentrelosvecinosyelmunicipio.Académicamente,hiceunMagísterdePeriodismoComunicaciónDigitalyPeriodismoenlaUniversidadMayor.Allísenosentregaronconocimientostantotécnicoscomoteóricossobreelusodelasredessocialesylasherramientasparasacarlesmayorprovecho.
4.- ¿Para qué empresas has trabajado como CM?MunicipalidaddePeñalolényMRCComunicaciónyDiseñoLtda.
5.- ¿Cuales son las redes sociales que administras?• CorporaciónMunicipaldeDeportesdePeñalolén• CorporaciónCulturaldePeñalolén• CentrodeEventosChimkowedePeñalolén• CaféLucca• CervezaBrewDogChile• EscueladelosSentidos
6.- ¿Ocupas un programa de analítica web en especial? (ejemplo: Google analytics, UrchinSoftware,etc.)¿porqué?GoogleAnalytics,principalmenteporlacantidaddedatosqueentregayporsugratuidad.
7.-¿PorquécreesqueelCMesnecesariohoyendíaenlasempresas?Porqueerróneamentesecreequeentrarenredessocialessóloconsisteencrearunacuentaylisto.Detrásdeestaaccióndebeexistirunaestrategiayobjetivosclarosdepartedelamarcaparasabercómoenfocaryperfilarsudesarrolloenellas.
Porotraparte,esunalaborquerequierededicaciónexclusiva,puesesuncanaldeinformaciónquefluyeconstantemente,yquedebesermonitoreadosiempre.Nopuedeserunalabor“ocasional”deunempleadoquele“pega”alacomputación.
8.-¿Creesqueesnecesariotenerconocimientosdeherramientasgráficaspararealizartutrabajoyporqué?(Siturespuestaesafirmativa)¿ConsiderasqueesposibleyapropiadountrabajoenconjuntoconDiseñoGráficoparatuprofesión?Nonecesariamente. Si trabajas en conjunto con un equipo en donde se integran diseñadoresgráficos,nodeberíaserunrequisitoparaunCM.Delocontrario,sitrabajassolo,creoqueesunrequisito necesario.LaintegracióndeundiseñadorgráficosiempreseráunaportealalabordelCM,puesinterneteseminentementevisualyelenganchequepuedeproducirunbuendiseño,escaparámuchasveces,aloquehagaunbuentexto.
9.-¿QuénocionesdeDGconsiderasrelevantesparaejecutaróptimamentetutrabajo?Manejo de Photoshop e Illustrator. Distinguir entre los distintos formatos de imágenes y suscaracterísticas(PNG,JPG,GIF,etc)
10.-Tomandoencuentaqueinternetevolucionarápidamente,¿cómoevolucionalalabordelCM?Personalmente,creoquelacapacidaddelCMestáenlocercanoquepuedaresultarlealusuariode internet. LafiguradelCMestáprecisamentepara“humanizar”marcasqueaparentementeresultanfríasapriori.Probablemente,laevolucióndelCMestaráligadaalastendenciasquesevayandandoyenloactualizadoqueéstepuedaestarenestasmaterias,sinperderelnortedecuálessurazóndeser.
11.- ¿Qué habilidades blandas debe tener un buen CM?• Resolucióndeconflicto• Manejodecrisis• Empatía• Resolucióndeproblemas• Inteligenciaemocional• Visióndeposiblesescenarios• Carisma• Capacidadytoleranciaalcambio
12.- ¿Y cuales son las Habilidades duras?• ConocimientodelfuncionamientoorgánicodelasRR.SS• Conocerasusclientesyasucomunidad• Manejodeherramientasparamanejodemétricas• Elaboracióndeestadísticas• Buenmanejodelaortografíayredacción• Conocimientosbásicosenmanejodeprogramasdediseñográfico
30
¿Qué es un Community Manager?
ENTREVISTA A COMMUNITY MANAGER 2
Nombre:JaimeGuajardoConcha.Profesión:PeriodistayCommunityManager.
1.-¿EnquéconsisteeltrabajodeCM?ElCMeselprofesionalencargadodegestionar las redessocialesdeunamarcaoempresa.SetratadeconvertirseenlavozdelafirmaenplataformascomoFacebookyTwitter,entreotros.Elprincipalobjetivoesmarcarpresenciaenlasredes,adquieriendolamayorcantidaddeseguidoresposiblesyviralizarelcontenidoquealamarcaleinteresa,comoproductososervicios.Tambiénesunamaneradellegardemásdirectamentealosconsumidoresousuarios,analizandosusgustos,interesesypreocupacionesconrespectoalaempresaqueserepresenta.Ademásdepublicarelcontenido,sedebenresponderpreguntaseinclusoreclamosquepuedensurgir.
2.- ¿Hace cuanto que trabajas como CM?MedesempeñocomoCMdesdeel2010.
3.-¿CómollegasaserCMyquéexperienciasprevias,laborales,estudiantilesuotroconformantuperfilprofesional?(SIrecibiócapacitación)¿Dóndeyenquéconsistiótucapacitación?
Enel2012trabajéenelSIFUP,SindicatodeFutbolistasProfesionalesdeChile.Allí,entreotrasfunciones,medediquéamanejarlasredessocialesdelainstitución,adquiriendounpocomásdeexperiencia,másalládeunusuariocomún.Estomepermitiópresentarmeenfuturasagenciasquerequeríandeprofesionalesconalgúnpasoporlasredes.EstudiéenlaPUCV,yparaeseentoncesnoexisitíanposgradosrelacionadosconeltrabajodeCommunityManager,aunqueactualmente,muchasuniversidadeshansacadodiplomadosdebidoalaugedeestaprofesión.
4.- ¿Para qué empresas has trabajado como CM?LuegodetrabajarenelSIFUPmeintegréalaagenciaDigitalMarketing,ydesdemayode2012soypartedeCardumen.Enambasagenciasseadministranvariasmarcasyempresasconredessociales.
5.- ¿Cuáles son las redes sociales que administras?ActualmentemanejoFacebookyTwitterdeEuroAmericayClínicaSantaMaría(tambiéncanaldeYoutube).Laprimerasecentramayormenteenelámbitofinanciero,elcomportamientodelosmercadosenChileyelmundo,ylasprincipalesnoticiaseconómicas.Lasegundaesunacuentaenfocadaenlasalud,enlacualsepublicannotassobreenfermedades,tratamientosyserviciosdelaclínica.EnDigitalMarketingadministréManjarNestlé,Chiquitín,Coopeuch,PinturasCeresita,entre otras.
6.- ¿Ocupas un programa de analítica web en especial? (ejemplo: Google analytics, UrchinSoftware,etc.)¿porqué?Eltemaestadísticoesimportante,nosóloporelnúmerodeseguidoresquepuedesobtener,sinoquetambiénporlascaracterísticasdelosmismos.Siempresebuscaunperfildepersonasquepuedanestar interesadosenelcontenidoqueseofrece,por locualesnecesario identificarel
nichoalcualsequierellegar.EnCardumenexisteundepartamentodemétricaqueseencargademedir,enFacebookyTwitter,diversosfactorescomo:seguidores,seguidos,retweets,menciones,contenidosmásvirtalizados,etc.Dichosprofesionalessededicanaentregarinformesdetalladossobreelmovimientodeestasplataformas.Sinembargo,parallevarlasestadísticasdíaadíaenTwitter,utilizoSocialBro,unaherramientaquetepermitevisualizarungráficoconelaumentoodescensode los seguidores, así como también arroja unperfil dequienes siguen la cuenta.Asimismo,esposibleanalizaralacompetencia,revisarelmovimientodesusredesycomprarelcomportamiento de ambas.
7.-¿PorquécreesqueelCMesnecesariohoyendíaenlasempresas?Cada día las redes sociales son más utilizadas por la gente, no importa si son ciudadanoscomunes,autoridades,artistas,etc.Lainformacióninmediataydirectaseencuentraenlasredes,convirtiéndolas en herramientas sumamente poderosas para cautivar la atención del público.Todaempresaquequieradirigirsedemaneracercana,rápidayeficienteasusconsumidoresdebetenerpresenciaenredessociales.Sibiencasitodoelmundosabeutilizarestasplataformas,elCMesquienpuededirigirestrategias,sentirelpulsodeunared(siserecibenbuenosomaloscomentarios)ycanalizarelpotencialdeunamarcaenuncanalatractivoque,evidentemente,setraduzcaenmantenerygenerarseguidoresdealtafidelidad.
8.-¿Creesqueesnecesariotenerconocimientosdeherramientasgráficaspararealizartutrabajoyporqué?(Siturespuestaesafirmativa)¿ConsiderasqueesposibleyapropiadountrabajoenconjuntoconDiseñoGráficoparatuprofesión?EnCardumen,porejemplo,existeunequipocompletodediseñadoresquetrabajanenconjuntoconprogramadores,communities,directores,etc.EstofacilitamuchoeltrabajodeCM,yaquedeestamaneraesposibleenfocarsenetamenteenlasredes.Sinembargo,siempreesimportantetenerciertosconocimientosparaaportaralahoradeplanificarcampañasoestrategias.
9.-¿QuénocionesdeDGconsiderasrelevantesparaejecutaróptimamentetutrabajo?Para realizarun trabajo realmenteprofesional creoqueesnecesario trabajar condiseñadoresgráficosquepuedancumplirconlasexpectativasdelosclientes.Perotalcomomencionabaantes,tenernocionesbásicasdePhotoshopuotrosprogramasdediseñopuedensalvaralgunasituacióndeemergenciaoalgúnrequerimientoespecial.
10.-Tomandoencuentaqueinternetevolucionarápidamente,¿cómoevolucionalalabordelCM?Creoquevandelamano.TodoslosdíasaparecennuevasaplicacionesyestrategiasquehacenmáscomplejaslasdinámicasqueseestablecenenInternet.Porlomismo,elCMtienequeestaral tantode todas lasalternativasquepueden servirparapotenciara lamarcaoempresaquerepresentaenlaweb.Actualmente,nosóloimportaquealguienllene140caracteresenTwitteroquesubafotosaFacebook;esnecesariotenerplenoconocimientode la informaciónqueseutiliza,lacalidaddelcontenidoylamejormaneradecautivaralpúblico.Estaexperienciaesvitala la hora de conseguir los diversos objetivos que se trazan semana a semana, desplegando yaprovechandotodoelpotencialdeInternet.
11.- ¿Qué habilidades blandas debe tener un buen CM?Trabajar con público siempre es complejo. Muchas veces se reciben reclamos, insultos, o
31
¿Qué es un Community Manager?
RESULTADOS DE ENTREVISTA A COMMUNITY MANAGER
PararecopilarinformacióndirectadequeesunCM,comosedesempeñayquelaborescumple;seentrevistaronadosCM,AlexisZamoranoyJaimeGuajardo,ambossonperiodistasytrabajanenunaagencia.Selesrealizó12preguntasylosresultarosfueronlossiguientes:
Conclución N° 1 :AlexisZamorano
¿Cómoesquelasredessocialeslogranllegaranosotros?,puesbien,lasociedadnecesitadeuncomunicadorquepuedaconseguirlo,paraellolosCMotambiénllamadosSocialMediaManagertrabajanarduamente.Suocupaciónconsisteenformarenlacendirectosentrelasredesvirtualesylaspersonas,estaprofesiónseconcretaporlarelevanciadelasconversacionessocialesenlíneaentrelagenteeinclusoempresas,sonlosencargadosdemanteneractivosyvigentesestossitioswebconelfindefacilitarestenexoconloscanalesdecomunicación.
AlexisZamorano,periodistacondosañosdetrayectoriacomoCM,comentaquesuprofesiónseencargadela“difusióndepromociones;informaciónacercadelproductoy/omarca;moderacióny generación de conversaciones en torno a ésta; así como también de generar estrategiasalineadas con los objetivos de la marca y que permitan alcanzar las metas propuestas en elámbitodelasredessociales”(AlexisZamorano,2012),haefectuadosutrabajoenlugarescomolaMunicipalidad de Peñalolén yMRCComunicación yDiseño Ltda. Bajo lo que semuestra alpúblico, la formade trabajode losCMconsiste enprogramas computacionales como ‘GoogleAnalytics’-principalmenteporlacantidaddedatosqueentregayporsugratuidad-nosindica.¿Porquéestaprofesióntanvanguardistaresultanecesariahoyenlasempresas?,nosquedaenclaroqueexisteunalatentenecesidaddeexpansióndelainformaciónatravésdelasempresas,cuyosreceptoressevensujetosalasrápidasexigenciasdeunsistemaglobalizadocomoel internetycanalesvirtuales.Erróneamentesecreequelagestiónyconstrucciónderedessocialesfuncionademanerasimpleyrápida,sintenerencuenta,quesesostienedeunseguimientoexhaustivodelmonitoreoyregistrode la información,detrásdeestetrabajodebeexistirunaestrategiayclarosobjetivosde loque laempresay/omarcarequieren; trasesto lafiguradelCMfomentala ‘humanización’*de lasmarcasenpromoción,estoayudaaque laspropagandastomenmáscalidezyseanmáscercanasalpúblico,denotandoempatíaporpartedequienlasrecibe.
Conclusión N° 2 : JaimeGuajardo
SegúnJaimeGuajardoConcha,periodistayCMdesdeel2010,nosmanifiestaquelalaborprincipaldeunCMesgestionar lasredessocialesdeempresasy/omarcas,seconviertenenelsoporteprincipalderedesconocidascomoFacebookyTwitter.“Elprincipalobjetivoesmarcarpresenciaenlasredes,adquiriendolamayorcantidaddeseguidoresposiblesy‘viralizar’*elcontenidoquealamarcaleinteresa,comoproductososervicios”(JaimeGuajardoC.,2012),otrodelosgrandesbeneficiosdeestaprofesiónes llegardeunaformamáscercanaa losusuarios,ademásson lacaravisiblealmomentoderesponderdudasdeinteresesacercadelapropagandaquemuestralaempresa.Losusuariosoconsumidoressonelenfoquealmomentodelacreacióndepropagandas,segúnlasnecesidades, intereses,gustos,rangodeedades,clasessociales,entreotras,elfinesidentificarconlamayorexactitudposibleaquetipodepoblaciónsequierellegar.Loquerefiereaestadísticanoquedadelado,esimportantenosóloporelnúmerodeseguidoresquesepuedanobtener,sinoqueademás,porlascaracterísticasdeaquellos.
LaintegracióndeCMenempresasesnecesarioactualmente,díaadíalasredessocialessonmásutilizadasporlapoblaciónengeneral,estasseconvierteneninstrumentosesencialesparallamarlaatencióndelagente,lasempresaspretendenllegardeunamaneracercanaaquienseconvierteenreceptor,rápida,fiableyeficientepormediodecanalessociales,paraelloelsustentodeunCMesvital.Elinternet-herramientaprincipal-progresadeunamaneradinámica,todoslosdíassurgennuevasaplicacionesyestrategiasqueconviertenmáscomplejoaestesistemaderedes,porello,esqueJaimeytodoquiendesempeñeeltrabajodeCMdebenestarvigentesalanuevainformación,esnecesariotenernuevosconocimientosdelacalidaddelcontenidoyelmejorestilodeatraeralpúblico.
LosDiseñadoresGráficos(DG)debentrabajaralaparconlosCM,específicamenteeneláreadelapublicidadenredessocialesqueseentreganalpúblico.Elapoyodequienpracticalaprofesiónde diseñador gráfico, es importante, puesto que facilita el proceso de creación delmaterial aconcretar,elesqueletodelapublicidadlocreaelCM,teniendoconocimientocomputacionalesytécnicosdeunbuentrabajo,peroelequipolocompletaelDGdandocalidez,luz,cuerpoyformaaloqueseráexpuestoalaspersonas,elmaterialvisualeselcautivadorparaquienlorecibe.Eltrabajoenconjunto,aportaunmejormaterialalahoradeplanificarcampañasoestrategias.
*Humanización, 1. Adquisición de características más humanas y más amables. (http://www.wordreference.com, Extraído 16,08,2012)
requerimientos difíciles de cumplir. Las exigencias de la gente pueden llegar a ser agobiantesenalgunascuentasgrandesqueostentanmilesdefollowers.Porestarazónhayquedesarrollarpaciencia, empatía y una gran capacidad de conectarse con las personas. Si un usuario sesienteescuchadooatendido,valorarálamarcademejormanera,creandounaimagenpositivade la misma. También es necesario saber trabajar con todo el equipo que hace posible que el communitylogreviralizarproductos,imágenes,campañas,etc.Lasestrategiassiempresefijanenconjuntoconvariosprofesionales.Otropuntoimportanteessaberestablecerunabuenarelaciónconlosclientes,quienesexigiránlamáximacalidadyrendimientodelequipo.
12.- ¿Y cuales son las Habilidades duras?Tenerunabuenaredacciónesunacaracterísticaqueconsideroimportante.Lamaneraenqueseescribeosehablaenlasredesdejabastantequedesear,yaunqueelCMadministreunacuentaentretenidayrelajada,lacalidaddelcontenidosiempredebeserlamejor.Tambiénesrelevantesaber trabajar bajo presión, desarrollar capacidades de planificación y rigurosidad a la horatransmitirloquelamarcadesea.
32
LAS EMPRESAS Y LA WEB
El86porcientodelasempresaschilenastieneunsitioweb,elporcentajemáselevadodelospaíses latinoamericanos, según los resultadosde un estudio.
Lainvestigación,titulada“internetylasnuevastecnologíascomoherramientasparalaspymesexportadoras”, señala,noobstante,queel70porcientode lossitioswebde lascompañíaschilenas no permite recibir pedidos en línea.
El informe de la consultora red global deexportación agregó además que el 46 porciento de las empresas chilenas que se dedican a laexportaciónpromocionasunegocioenelmediovirtual,porcentajeque,anivelregional,sesitúaencasiel40porcientodelasfirmas.
Porotrolado,el61porcientodelascompañíaslatinoamericanas entrevistadas indicó queinternetha remplazado totalmenteoengranmedida a otros medios de comunicación.
Si bien el correo electrónico sigue siendola herramienta más utilizada por las pymespara comunicarse con sus clientes externos,se aprecia el uso de otras herramientas,como los servicios de chat, los programas decomunicación por voz y los teléfonos, quereúnenlatransmisióndevozydedatos.
En esta línea, el estudio concluye quelas pequeñas y medianas empresaslatinoamericanas, especialmente en Chile,Colombia y Ecuador, se han mostrado muyávidas en la búsqueda de información denegociosinternacionalesenlared.
PUBLICACIÓN “LOS 3
PERFILES DEL COMMUNITY
MANAGER”, creadaporSergiodelPradoel30-06-2011
“Podemosestablecer3grandesperfilesdeCMenfuncióndeltipodeempresaysectorenelqueopera.”
1. Community Manager Operativo
• Tipo de Empresa: con fuertepresencia on-line, por ejemplo empresas dee-commerce o medios de comunicación.
• TrabajodelCM:eltrabajoestratégicode Community Management está integradodentro de las responsabilidades del equipo de marketing (fijar estrategia, acciones ydesarrollar contenido de valor), por lo quela labor del CM es puramente operativa, deimplementación.
• Perfil del CM: assistant, perfil bajo/medio.
2. Community Manager Estratégico
• Tipo de empresa: negocios off perosin grandes presupuestos de comunicación,donde el core business no es elmarketing, oquenosedirigenaconsumidorfinal.Ejemplos:empresas de distribución, empresas detecnologíaonegociosB2B.
• Trabajo del CM: definición eimplementación de la estrategia en redessociales, incidencia en líderes de opinión y,en algunos casos, también responsable de laoptimizaciónSEOycampañasSEM.
• Perfil del CM: especialista digital deperfil alto, habitualmente free-lance o partedelequipodeagenciadeRRPP.
3. Community Manager Activador
(o de Activación)
• Tipo de Empresa: Principalmenteempresas de gran consumo. Son empresas‘off’(porahora)encuantomodelodenegocioperoquecadavezel‘On’esmásimportante(ytodavíaloserámás)parallegaralconsumidor.
• Trabajo del CM: trabajo deimplementacióndelascampañasdeactivacióndemarca,peroconespacioyflexibilidadparaadaptarlaestrategiaycontenidosparasermáseficaces.Noesuntrabajodeestrategia,yaqueésta viene integrada dentro del plan digitaldesarrolladoporagenciaycliente.
• Perfil del CM: perfil medio, puntointermedio entre los otros dos modelos. No es estratega pero tampoco puramenteimplementador,porloquerequieredeciertashabilidades y experiencia. Habitualmenteintegrado dentro del equipo de la agenciadigital.
Las empresas y la web
http://www.puromarketing.e/42/10353/perfiles-community-manager.html”
35
CONCLUSIÓN DE INVESTIGACIÓN
Conesta investigación, llevadaduranteel año2012, nospodemosdar cuentaque lasnuevastecnologíashanabiertoun importantecampolaboral,dandopieanuevasprofesiones,nuevostrabajosynuevasoportunidadesparalaspersonas.ElCMnacióhacemenosdeunadécada,esunaofertalaboraltotalmentenuevayconmuchavisiónafuturo,acompañadadelgrandesarrollotecnológicoynuevosmercadosesta“carrera”sevemuyprometedora.
“TodoslosdíasaparecennuevasaplicacionesyestrategiasquehacenmáscomplejaslasdinámicasqueseestablecenenInternet.Porlomismo,elCMtienequeestaraltantodetodaslasalternativasquepuedenservirparapotenciaralamarcaoempresaquerepresentaenlaweb.Actualmente,no sólo importa que alguien llene 140 caracteres en Twitter o que suba fotos a Facebook; esnecesariotenerplenoconocimientodelainformaciónqueseutiliza,lacalidaddelcontenidoylamejormaneradecautivaralpúblico.Estaexperienciaesvitalalahoradeconseguirlosdiversosobjetivos que se trazan semana a semana, desplegando y aprovechando todo el potencial deInternet.”(JaimeGuajardoConcha;PeriodistayCommunityManager).
LuegodeestainvestigaciónytomandoencuentalasencuestasquesehicieronalosCM,sepuededetectarelproblema:faltadeincorporacióndediseñoeneltrabajorealizadoporunCM.Biensabemosquemuchosdeellostrabajanenconjuntocondiseñadores,pero¿quesucedeconlosCMquetrabajandeformaindependienteynotienenayudadeundiseñador?¿Soncapacesdedesarrollarunapiezagráficaconconocimientosbásicosdeldiseñoe incorporarlosenlasredessocialesdetalformaquesuproductosevendasatisfactoriamenteatravésdelosmedios?
Laproblemáticaestaplanteadayeshoradedarlesolución.
Conclusíon de investigacíon
PROPUESTA
41
PROYECTO
EsteproyectollamadoCOMMUNITYGRAPHIC,Guía de diseño para el CommunityManager,como su nombre lo indica, es una guía dediseñoonlineparaayudaralCM,que trabajade forma independiente, con la intenciónde orientarlos en la incorporar diseño en sutrabajo y así, no depender de un equipo dediseñadores que trabajen a la par con él. Laspersonas interesadas en el tema (seguidoreso fan) podrán, además de aprender sobrecomo utilizar gráfica en diferentes redessociales, intercambiar información entre ellosy comunicarseconpersonas ligadasalmismoámbito laboral.
Seutilizarán4plataformasparaestaguía;sitioweb, Facebook, Twitter y You tube. De estaformasepodráejemplificardemejormaneralos pasos a seguir para incorporar diseño alas redes sociales administradas por los CM independientes.
Los diferentes sitios web tendrán diferentesfunciones:
-Sitio web: este será el soporte clave, dondese incorporaran, enlazarán y conectaran losdemássitios
-Facebook:lalabordeestesitioserácomunicary transmitir el contenido de la guía, comodatos,consejosypublicarlosvideossubidosaYou tube.
-Youtube:seutilizaráestecanalparaincorporarvideosquesirvandetutorialesyconsejosparalos CM.
-Twitter: la cuenta twitter será utilizada parainformaralosseguidoresdenuevoscontenidossubidosenlasotrasplataformas,serácomoundiarioinformativo.
Sibienescierto,cadaunadeestas4plataformastiene diferentes funciones, y formaran partede un todo, complementándose unas a otrasyformandopartedelaguíadediseñoparaelCM,víaonline.
Nopodemospartirsinantesdaraconocer lamarcaparaestaguía.Lamarcadeestaguíaserá:
Para crear estamarca seutilizo conceptosdecomunidad, rapidezy fácil lectura.Queriendoexpresardefinicionescomovinculo,velocidady digitalización. Para ello elegimos coloressencillos tales como el color azul, color querepresentaestabilidad;y rojocoloraltamentevisible y que es utilizado generalmente paradecisiones rápidas; he ahí el icono del botónrojo, que da a entender que solo con unclick podemos llegar rápidamente a nuestropropósito
El nombre de esta guía nace de un juegode palabras: community manager y graphic(gráfica en ingles), mezclando así, la palabracommunityconlapalabragraphic.
Su significado en castellano es comunidadgráficayhacealusióndirectaalsignificadodeestaguía.
Proyecto
43
MANUAL DE NORMAS
BÁSICAS DE LA MARCA
GRÁFICA.
Ellogotipopuedeserocupadoconosinbajada.Esto dependerá de los requerimientos dondeseutilizará.
Para evitar que cualquier otra imagen gráficapueda invadir o colisionar visualmente connuestro logotipo, se dispondrá un espacioenvolventeenelquenopodráningresartextos,dibujos u otros logotipos. Siguiendo estapauta,setrazaráunrectánguloimaginarioquecontenga el logotipo. La proporción de dichocuadradoesde“1C”,tomandocomobase“C”dellogotipo.
Colores
Pantón
Los colores determinados para pantalla están dirigidos para la representación del logotipoy los colores corporativos, en todo tipoproyecciónyretroproyección.Sucorrectousopermitirátenerunaltocontrasteyfácillectura.
Usos prohibidos del logotipo
Estosusosprohibidospermitenmantenerunaimagencoherenteeintachablefrenteanuestraidentidad.
Isotipo
ParalosavataresdeFacebook,youtubeytwitternecesitamosunisotipodecaráctercuadrado,para así hacer legible la marca, nuevamentehaciendoalusiónaunbotónrojoquesignificarapidez.Tambiénestapiezagráficaserviráparausarladefaviconenlapáginaweb.
Tipografía logotipo:
Scala sans LF BoltABCDEFGHYJKLMNÑOPQRSTUVWXYZAbcdefghijklmnñopqrstuvwxyz
Tipografía complementaria
Scala sans Cond Bolt ABCDEFGHYJKLMNÑOPQRSTUVWXYZAbcdefghijklmnñopqrstuvwxyz
Eltipodefuentedel logotipoybajada,estánrelacionados con la imagen institucional.Busca conferir unidad y armonía en todas laspresentaciones.
Manual de normas básicas de la marca gráfica
Community Graphic
49
Unavezplanteadalaproblemática“faltadeconocimientosdediseño,quetienenlosCMensustrabajos”,daremossolución aésta.Noscentraremossoloen lasredessocialesmásutilizadas:FACEBOOK,TWITTERYYOUTUBE.SieresunCMyteinteresatrabajardeformaindependienteynotienesgrandesconocimientosgráficosestaguíadediseñotepodrásermuyútil.
AnalizaremosloselementosmodificablesdentrodeestasredessocialesycomollevaracabounacoherenciagráficaadecuadadelamarcaoproductoconlaquetrabajaunCM.Tambiéncomoseutilizaelcolorenlaweb,yunseguimientopasoapasodetipsqueharántutrabajocomoCMmásfácildellevarysintenerlalimitacióndeldiseño.
Estaáreadedesarrollosebasaraen3etapas:
- Uso del color en la web- Aspectospersonalizables- Coherenciagráfica
Al final de esto se generará 4 plataformasweb: sitioweb, como base y unión de la guía dediseño,unapaginadeFacebook,TwitteryuncanaldeYoutube, deestaformageneraremosycomplementaremos,laguíadediseñoparaCommunityManager,quealavezservirádeejemplovisual,víaonline.
Community Graphic, Guía de diseño para el Community Manager
51
USO DEL COLOR EN LA WEB
Lacombinacióndecoloresesfundamentalalmomentodeldiseñoweb,yaquevaatenerunainfluencia realmente grande en cómo los usuarios perciban elmensaje y la sensación que lesquededespuésdeverlo.
Unadelasprimerascosasatenerencuentaeselnúmeroocantidaddecolores.Esarriesgadoestablecerunanormaestricta,perosesabequemásde6coloressimultáneosenunacomposiciónpuedenserdemasiados,ymásaun,siexisteungrancontrasteentreellos,peropuedenformarunacombinaciónagradablesilarelaciónentreellosesadecuada.Siempresedebetenerencuentaque“menosesmás”,porlomismoresultamásasertivoutilizarpocoscolores,yasílaprobabilidaddediscordanciaesmenor.Afirmoque3coloreseslacomposiciónadecuadaparautilizarenlamayoríadeloscasos.Conmenoscoloreslaposibilidaddequeeldiseñosevuelvaaburridoymonótonoalojohumano,esmayor.
Pero, ¿qué colores elegir? Loscoloresqueelijamosestarán100%ligadosaloscolorescorporativosdelaempresaconlaquetrabajaremos,paraellodebemostenerclaroquecoloresutilizar.Quecoloresusaryporque:significadodeloscolores
Azul:Esuncolorasociadoalaestabilidad,alasobriedadyalaseguridad;esporelloqueseusafrecuentementecomocolorprincipalensitiosdecorporacionestradicionales,grandesempresasconsolidadasenelmercadoysitiosgubernamentales.Rojo:Esuncoloraltamentevisibleyconsideradoemocionalmenteintensoporloqueesutilizadopara estimular a las personas a tomar decisiones rápidas. Se recomienda usarlo en pequeñasproporciones, para no generar estridencias. Es muy común verlo en textos e imágenes quefuncionan como vínculos o botones de “ComprarAhora” y “Adicionar al Carrito de Compras”.Generalmenteseusaenlossitioswebcomocolor“destacado”,esaconsejablenoseleccionarlocomo color principal.Naranja:Estecolorsueleutilizarseparacaptarlaatenciónsobrealgúnelementoparticularmenteimportantedeldiseño;sibienesuncolorcercanoalrojo,noestanagresivocomoéste.Sueleutilizarsecomocolorpredominanteensitiosrelacionadosalturismooempresasjóvenesconunavisióndenegociomásdesestructurada.Amarillo:Estimulalaactividadmentalygeneraenergía;esuncolorasociadoalavitalidad.Estecoloresmuyusadocomocolorsecundarioodestacadoporsuestridencianatural,sinembargo,actualmenteescomúnverlocomocolorprincipalensitiosrelacionadosalcomerciooenpáginasde comunidades.Verde:Eselcolordelanaturaleza.Simbolizaprosperidad,armoníayfertilidad,sugiereestabilidad.Seusaensitiosrelacionadosaecología,finanzasymedicina.Negro:estáasociadoalpoder,alestatusyallujo.Seutilizaprincipalmenteensitiosrelacionadosaobjetosdelujo,orientadosauntargetdealtopoderadquisitivo.Puedeversefrecuentementeensitiosdeartículoselectrónicosdealtagama,bodegasyjoyerías
Uso del color en la web
53
ASPECTOS
PERSONALIZABLES
TWITTERTwitter es el servicio de microbloggin másutilizado del mundo, pero muchas vecesdescuidamos el aspecto del diseño osimplementeelegimosunoyapredefinido.
Recomiendo al CM que el diseño seapersonalizado,yaquecadaempresa,productooserviciotieneunamarcagráficadeterminadaydebemospotenciarlaatravésdeldiseño.
Losaspectospersonalizablesdetwiterson:- Fotodeperfil.- ImagendeFondo- Colordetipografía- Color enlace
FOTODEPERFIL:
En twitter, la foto de perfil, mejor conocidacomo“avatar”manejaunformatocuadradoelcualdebeteneruntamañomáximode700kb,siendo250x250pxlacalidadmásoptima.
Sinembargotwitteradaptaesaimagenatresvistasdiferentes.• 48×48pxLa versión más pequeña,elquevesnormalmenteentuTimeLine,yporende la más importante.• 73×73px Semuestraensupáginadeperfil, cuando es vista por alguien que no hainiciado sesión en su cuenta.• 128×128px Semuestraentupágina de perfil, cuando es vista por alguienqueyahainiciadosesión.• El tamaño original. Esta versiónse muestra al hacer clic en tu cuenta,específicamentesobrelaimagen.
Cada vez que publiques un tweet, apareceráen los timelines de tus seguidores junto atu imagen. La imagen escogida debe serrepresentativa de la empresa con la que setrabaja (un logo suele ser una buena opción)yloidealesquedestaqueensujustamedidaentre otras imágenes. Aquí conviene noexagerar, no es necesario adornar el avatarconlucesdeneónycoloresfosforescentesquedejenciegosatusseguidores.Afindecuentas,quieresqueseaunaimagenamableyfácildecontemplar.
Otro aspecto que no se debe descuidar es cómoseve la imagenen tamañospequeños.Si el logo tiene texto, esmuy posible que enlostimelinesdetusseguidoresaparezcaenuntamañominúsculoeilegible.Además,hayquetenerencuentaquemuchosusuariosutilizanclientesdesdeelmóvil,porloqueseverámás
pequeño aún. La imagen escogida de avatardebe ser, entonces, representativa, llamativaen su justa medida y además perfectamenteescalable y fácil de identificar en tamañospequeños.
IMAGENDEFONDO
Necesitas un programa de diseño, como porejemplo,Photoshop.
Ponemos nombre a nuestra área de trabajo
Tamaño1366×670píxeles,con72DPI(pixeles/pulgadas resolución correcta para trabajar enweb)
Sinolvidarqueel Tamañomáximode800KyconformatoGIF,JPGoPNG.
Lasdimensionesson1633x670pxparautilizarelfondocompletoodeotraformautilizarsololosbordes con250 x 670px, así quedaran lostwitts legibles en el centro y los bordes conimagen.
Evidentemente las plataformas donde sedivisalaredsocialsonvariablesenpixeles,estetamañonodebieratenerproblemasparaotrotipodedimensiones.
Laimagendefondoesalgoquepuedellamarmucholaatenciónalagentequevisitanuestrosperfiles por primera vez, y no hay nada queparezca menos profesional que un fondopredeterminado de Twitter o uno de algunapágina que proporciona fondos gratuitos quecontengasupropiaURL.Sihablamosdecuentasde empresa es importante y recomendabledarleciertaseriedadalperfil.Alfinyalcabo,sicuidamosaldetalleeldiseñodenuestraweb
Aspectos personalizables
54
corporativa,deberíamoshacerloenlosperfilesen las redes sociales.
Existenmultituddediseñosposibles,desdeelclásicoconellogodelaempresayloscolorescorporativos, hasta algunos más avanzadosqueincluyenenlaparteizquierdamásdetallesde contacto, como la dirección del sitio weby referencias a otros perfiles en otras redessociales. Incluso hay algunas compañías queaprovechan ese espacio para anunciar suúltimoproducto.
Teniendoencuentaqueentwitter,paradejarun comentario, no es necesario ingresardirectamente al twitter de la empresa, si noque se puede hacer mediante enlaces con @ y luego el nombre del receptor delmensaje;podemos decir que el fondo de twitter nodebe llevar mayor contenido ni información,asíqueserecomiendaqueseaunaimagencontextura,undiseñosutil.
COLORDETIPOGRAFIAYENLASE
Aunque realmente el diseño de un perfilconcreto es algo que probablemente se veaunaveznadamás(antesdedarlealbotónde“seguir”),nopuededescuidarse,nosóloporlaimagendefondoydeperfil,sinoqueTwitter,también, permite personalizar varios colores,comoel color de fondo, el color del texto, elcolor de la sidebar o el color de los enlaces.
No es la primera vez, ni será la última,que al entrar en un perfil de un usuario, elcolor de fondo y el color del texto chocanexageradamente, complicando la apreciación
de la composición. En ocasiones, ocurre algopeoraúnyesquehaydiseñosdondeseutilizaelmismo color para el texto y para el fondo,loquehace imposible leerelcontenidoyportanto,enlugardepresionarelbotón“Seguir”las personas optan por cerrar la pestaña delnavegador.
Es recomendable que el color tanto de latipografía como del enlaces sean coloressobrios y corporativos a la empresa, para asíllegaralosseguidoresdemejorforma.
Aspectos personalizables
250 px 250 px
1366 px
670 px
55
Facebook resulta un sitio web muy didácticopara los usuarios lo que contrasta con lo poco poco personalizable de la plataforma dondesólo la imagen de biografía y la imagen deperfiloavatarpuedensermanipuladas.
Para la imagen de perfil semaneja un avatarcuadrado, siendo 180px el tamaño mínimopermitido.
El formato de la imagen de biografía deFacebook es de 936 x 345 pixeles para quecalceexactouotroformatoaescala.Aunquetepermitecolocarcualquierimagenyarrastrarlaparaubicarlaeneláreadeseada.Elproblemacon arrastrar, es que puede que se borrenpartes importantes de la imagen, por eso esmejorutilizarelformatoadecuado.
Existeunabuenaopciónparasacarprovechoa la biografía de Facebook, que resultamuyinteresanterescatar,paraconocerlasdiversasformasqueexistenparacrearunperfilcreativoy así sorprender a los usuarios. Esta maneraimplica utilizar las imágenes de biografía yde perfil, como un todo y no como partesseparadas, sacando el máximo provecho aestos elementos, situación que requiere debastanteingenio.
Sin embargo, hay algunas formas depersonalizar lo que los usuarios veráncuando ingresen a tu página. Existen algunasaplicacionespersonalizablesmuy interesantesenestesentido,hablamosdeverdaderosminisitioswebdentrodetupáginadeFacebook.Estasseusanamenudoparapromoverofertas,llamar la atención sobre nuevos productos osimplementedaralosvisitantesunapáginadebienvenidaatractivadetuempresa,tumarcaysusservicios.Cualquierpáginapuedehacerlo,perosenecesitaunpocodeesfuerzo.
11 Aplicaciones de Facebook
Big contacto: esta aplicación permite configurar en una pestaña un formulario decontactopersonalizadoparatupáginadefansempresarial.
Big youtube: permite añadir un canal deyoutubedeformasencillaatupáginadefans.Pensando en que el video marketing hoy endía es unos de los grandes canales de tráficohacialaspaginasdefansywebsitesporsugranpoderviral.
Big twitter: esta aplicación permite mostrar losúltimostweetsdetwitterenlacuentadelaempresacomounapestañadefacebook,dela
mismamaneraquebigyoutube.
Bigenlace:estaaplicaciónsirvedeenlacealapáginawebdelaempresaoasitiosdeinterésencomún.
Venuewidget: esta aplicación integra la redsocial de geo localización foursquare en tupáginadefans.
Shop tab: aplicación que permite instalar tu propiatiendavirtualparalosclientes.
Networked blogs: si tu empresa consta de un blog, esta aplicación muestra las últimasentradasdelblogentupáginadefans.
Opinions polls: esta es una aplicación que permite realizar encuestas en tu páginade forma sencilla y le puedes sacar muchoprovechopara saberquees loqueelclientedesea.
Flickr: sidisponesdeuncanalenflickr ,estaaplicación te permitirá añadir fotografías enunapestañaenlapaginadefans.
Big mapa: esta aplicación incluye la geolocalizacióndelaempresaodeuneventoylomuestraenlafanspages.
Big tienda: aplicación se utiliza comotiendavirtualentufanspagesdeFacebook.
Aspectos personalizables
180x180 px
936 px
345 px
56
StaticFBML
LaspestañasenlapartesuperiordelapáginadefansenFacebooksonaplicaciones.Algunas,como elMuro y las fotos han sido diseñadaspor Facebook, como las mencionadasanteriormente.Otrassonesencialmenteplug-insdondelosusuariospuedenverelcontenidoexterno,comoYouTube,Flickr,etc.La aplicación que necesitas para tu páginapersonalizadasellama“StaticFBML”.FBMLesel idiomadeFacebook.Si yahascreadouna
páginade fansoempresayestás registradoen Facebook, puedes añadirla a la páginaaquí. Se trata esencialmente de un lienzoen blanco donde se puede añadir cualquiercontenido que desees, incluyendo gráficospersonalizados y enlaces a través de HTMLestándar.
Ahoraanalizaremosde formabreveHTMLyCSSparaquepuedashacertustaticFBMLdemejor forma.
HtmlyCSS
QueesHTML?HyperTextMarkupLanguage.Esunlenguajesemántico,loquequieredecirquenodefinimoselaspectodelascosas,sinoloquesignifican.Porejemplo,sitenemoseltítulodenuestrapágina,enlugardedecir“Loquierograndeenletrasrojas”,leindicamosalnavegadorque“Esteeseltítuloprincipaldelapágina.Hazalgoparaquedestaque”.Yese“algo”lodejamosadecisióndelnavegador.Obviamente,podemoscontrolarelaspectoquetienennuestraspáginas,peroesoestareadelashojasdeestiloCSS.
QueesCSS?sonlassiglasdeCascadingStyleSheets.SieldocumentoHTMLestábienestructurado,podemoscambiartotalmentesuaparienciasintocarunasolalíneadecódigoenelarchivo.html.Estonospermitesepararelcontenidodelaspecto,yesdegranimportancia.
HTML
ComofuncionaHTML?esunlenguajebasadoen etiquetas (tags). Una etiqueta tiene lasiguienteforma:
<etiqueta>Algoaquídentro</etiqueta>
Volviendo al ejemplo anterior de nuestrotítulo:laetiquetaparaponereltítuloprincipalenlapáginaes<h1>.Entoncesnosquedaría:
<h1>Tituloprincipal</h1>
Comoves,<h1>marcaeliniciodelaetiqueta,mientras que </h1> se encarga de cerrarla.Hay etiquetas que funcionan con una solaparte,ysonasí:
<etiqueta/>
Observa el espacio en blanco que hay entreelnombredelaetiquetaylabarra/.Esmuyimportanteparaquelosnavegadoresantiguosnosevuelvanlocos.
Hay etiquetas que pueden modificarse conatributos. Ahora mismo no hace falta entender quéhacen,yalosveremosmásadelante.Sóloquédateconcómovanescrito:
<etiquetaatributo=”valor“>
Porúltimo, queda comentar unpar de reglasquesiguenlasetiquetassiempreenminúsculasylosatributosentrecomillas.
Ahora aprenderemos a formar el esqueleto de nuestros archivos para poder usarlo másadelanteamododeplantilla.
Nuestrodocumentotieneque ir dentrode laetiqueta<html>.Peroenesaetiquetadebemosindicar una serie de cosas, como qué lenguaestamos usando. Si escribimos en castellano,
nosquedaríaasí:<htmlxmlns=”http://www.w3.org /1999/ xhtml \”xml: lang =”es” lang=”es”>
Las letras es son el código de la lenguacastellana.PuedesveralgunosotroscódigosLenguaCódigo:
Castellano: es Catalán: caGallego:gl Euskera:euInglés:en Francés:frAlemán:de Japonés:ja
Aspectos personalizables
57
Lacabecera(HEAD)
Lacabeceracontieneinformaciónquenoformapartedelcontenidodelapáginaensí,comoeltítulo,vínculosahojasdeestilosCSS,informaciónpararobotsdebúsqueda,scripts,etc.Porahoranosquedaremossóloconeltítulodelapágina.Lacabeceravaencerradaentre<head>y</head>,mientrasqueparaeltítulousamoslaetiqueta<title>.Eltítulodelawebapareceenlabarradetítulodelaventanadelnavegador,eselnombrepordefectoqueaparecesiañadimosafavoritoslapágina,etc.
Quedaría así:<head><title>Títulodelaweb</title></head>
Elsangradonoesobligatorio,perosíquevienemuybienparaaclararnosconelcódigo.Elcuerpo(BODY)
Porúltimo,nosencontramosconelcuerpo,encerradoentre<body>y</body>,yquecontienetodala“chicha”.Quedaríatalqueasí:
<body>Aquívaelcuerpodelaweb</body>
Laplantilla
Recopilandotodo,nosquedaríaalgocomoesto:<htmlxmlns=”http://www.w3.org/1999/xhtml“xml:lang=”es”lang=”es”><head><title>Títulodelaweb</title></head><body>Aquívaelcontenido</body></html>
Yestápidiendoagritosqueguardesunacopiaenunarchivitollamadoplantilla.htmlparausosposteriores.
Etiquetasbásicas
AhoraqueconocemoslaestructuradeundocumentoHTML,aprenderemoslasetiquetasbásicasquenospermitanempezaracrearelcontenidodenuestrapáginaweb:párrafos,saltosdelínea,títulos,etc.
Párrafos:<p></p>Saltosdelínea:<br/>Títulos: <h1></h1>titulomasimportante <h2></h2>subtitulo Etc.
Citas: Existen tres etiquetas para poder escribir citas: <blockquote>, <q> y <cite>. Mientras que<blockquote>y<q>seusanparaescribirlacitaensí(lasfrases),<cite>seempleaparamarcarelorigen(persona,libro,canciónoloquesea). <p>Aquíosdejounfragmentodelacanción<cite>DieforRock’n’Roll</cite>,deDover:</p>
Separadoreshorizontales:<hr/>Comentarios:<!--Estoesuncomentario-->
Enlaces
EnlaceaunapáginaexternaSiqueremosenlazaraunapáginaoarchivoqueestáenotroservidor(normalmentewebsquenosonnuestras),usamos<a>deestaforma:
<ahref=”http://www.algo.com”title=”Descripción“>Textodelenlace</a>
Enlaceaunapáginalocal:
Paraenlazaraunapáginaqueestéennuestroservidor,necesitamossaberlaruta(path)desdedondeestemoshastalaubicacióndelarchivo.
Sielorigen(páginadondeestáellink)estáenelmismodirectorioqueeldestino(páginaalaqueapuntaellink),entoncessólotenemosqueescribirsunombre:<ahref=”profile.html“title=”Informaciónsobremí”>Fichapersonal</a>
Sieldestinoestuvieraenunsubdirectorio,utilizaríamosunabarra/paraindicarelcamino3:<ahref=”galeria/color.html“title=”Galeríacolor“>Verdibujosacolor</a>
Sieldestinoestuvieraundirectorioporencima,pondríamosdospuntitosyunabarra../deestamanera:
Aspectos personalizables
58
<ahref=”../index.html“title=”Páginaprincipal“>Volveralinicio</a>
Enlaceaunadireccióndee-mail
Podemoscrearunenlaceque,alpulsarsobreél,seabraautomáticamenteunaventanadelclientedecorreoquetengaelusuarioparaqueescribaunmensajeaesadirección.
Paraello,sólotenemosqueusarmailto:enelatributohref,seguidodeunadireccióndecorreoelectrónico:
<ahref=”mailto:[email protected]”title=”E-mailSoledadTroncoso“>Sol</a>
Anclas
Las anclas nospermitenenlazar a unaposición concretade la página, enplan teletransporte.Funcionan así:
Primero creamos el ancla en el sitio al que queremos enlazar después. Para esto, usamos elatributoid(podemosponerloprácticamenteencualquieretiqueta).Porejemplo,así:<h3id=”comentarios“>Listadecomentarios</h3>
Ahora creamos un link que nos transporte a ese ancla. Ponemos en href la ID de antes precedida de una almohadilla #:<ahref=”#comentarios“title=”Listadecomentarios“>Leercomentarios</a>
Tambiénpodemosenlazaraunanclaqueestéenotrapágina:<ahref=”post005.html#comentarios“title=”Listadecomentarios“>Comentariosdelpostno5</a>Listas
Listas ordenadasLaslistasordenadasmuestransuselementosnumerados.Secreanconlaetiqueta<ol>:
<p>Misescritoresfavoritos(enordendepreferencia):</p> <ol> <li>R.A.Salvatore</li> <li>GeorgeR.R.Martin</li> <li>IsabelAllende</li> </ol>
HayquetenerencuentaqueconCSSpodemoscambiarelnúmeroporelquequeremosempezara contar, así como el tipo de numeración (números arábigos, romanos, letras del abecedario,mayúsculas...).
Listas sin ordenarLas listas sin ordenar marcan cada elemento con una viñeta, de modo que no se sigue unanumeración.Secreanconlaetiqueta<ul>.
<p>Elheladoperfecto(¡ñam!):</p> <ul> <li>1boladeheladodechocolate</li> <li>1boladeheladodelimón</li> <li>Trocitosdepiñaymelocotónenalmíbar</li> <li>Siropedechocolate</li> </ul>
Aligualqueconlaslistasordenadas,podemosmodificarsuaparienciaconCSSyelegireltipodeviñetasquequeremos.
ListasdedefiniciónLaslistasdedefiniciónsediferenciandelasanterioresenquecadaítemestácompuestoporunpardeelementos:untérminoysudefinición.Seusanestasetiquetas:<dl>paracrearlalista,<dt>paracádatérminoy<dd>paralasdefiniciones.
<p>Significadodealgunossmileys:</p> <dl> <dt>:)</dt> <dd>Sonrisa</dd>
<dt>xD</dt> <dd>Carcajada</dd>
< dt>:P</dt> <dd>Sacarlalengua</dd> </dl>
Ysí,tambiénsepuedecambiarelaspectoconCSS.
Listas anidadasNo, las listas anidadas no sonunnuevotipode lista, sólo una combinaciónde las anteriores.Anidarsignificameterunalistadentrodeotra.Porejemplo:
<p>AlgunoslibrosdeSalvatore:</p> <ul> <li>ITrilogíadeElElfoOscuro <ol> <li>LaMorada</li> <li>ElExilio</li> <li>ElRefugio</li>
Aspectos personalizables
59
</ol> </li> <li>TrilogíadeElValledelVientoHelado <ol> <li>LaPiedradeCristal</li> <li>RíosdePlata</li> <li>LaGemadelHalfling</li> </ol> </li> </ul>
Noesdifícil,sólodebemostenercuidadocerrandolaetiquetaquetoque.¿Cómolosabemos?Fácil:primerosecierranlasinteriores,ydespuéslasdefuera.Esporesto,quecuandoinsertamosunalistadentrodeunítemdeotralista(estoes,primero<li>ydespués<ol>,despuésdebemoscerrarprimerolalista,yluegoelítemdelalista“exterior”.Unbuensangradocomoeldelejemploayudamucho.
IMÁGENES
Lasimágenessonunelementoimportantealahoradehacermásatractivaunaweb,odeaportarmásinformación.Noobstante,hayquesabercuándoutilizarlasynoabusardeellas.Podemosusartresformatosdeimagen:GIF,JPEGyPNG.
Insertarunaimagen
Paraponerunaimagen,hacemosusodelaetiqueta<img>conunoscuantosatributos:<imgsrc=”image.gif”width=”ancho“height=”alto“alt=”descripción“/>
Consrcestablecemosquéimagenqueremosmostrar.Aligualqueconloslinks,hayquetenerencuentalarutahacialaimagen.Pormotivosdeorganización,normalmentetendremoslasimágenesenunsubdirectorio(ovarios)llamadoimages,asíqueescribiríamossrc=”images/algo.gif”.
Losatributoswidthyheightnospermitenestablecerelanchoyelaltodelaimagen.Podemosindicarunvalorabsolutoenpíxelesounorelativoentantoporciento.Porejemplo,width=”200”mostraríalaimagencon200píxelesdeancho,mientrasquewidth=”100%”hacequelaimagenocupetodalapantalladeancho.Estosdosatributosnosonobligatorios,perosíesconvenientequeindiquemoslasdimensionesenpíxelesreales,yaqueahorramostiempoalnavegadora lahorademaquetarlapágina.Elatributoaltcontieneunadescripcióndelaimagen,queharemoscuandonosehayapodidocargarporcualquiermotivo.Esteatributoesobligatorio,porcuestionesdeaccesibilidad,aunqueconlosnavegadoresdehoyendíanodebiéramostenerproblemas.
Comoejemplo,asípodríamosinsertarlaimagendeunbanner:
<imgsrc=”images/banner.gif”width=”200”height=”40”alt=”BenKo’sArt”/>TABLAS
Las tablas sonelmecanismoquenosproporcionaHTMLparapresentar información tabulada,comohorariosolosresultadosdeunaoperaciónmatemática.Sonunpocoengorrosasdeutilizar,peroavecessonnecesarias.
Tabla básicaLasprincipalesetiquetasquedisponemosparacrearunatablasonestas:
<table>:crealatabla<caption>:ponetítuloalatabla<tr>:creaunafila<td>:creaunacelda<th>:creaunaceldadeencabezamiento
Seentiendemejorconunejemplo.Esmuyconvenienteutilizarbien lossangrados,yaquehayquetenermuchocuidadoalcerrarlasetiquetas<tr>,<td>y<th>.Aquítenemosunatablade2x2:
<table> <caption>Videojuegos</caption> <tr> <th>Título</th> <th>Género</th> </tr> <tr> <td>Sonic</td> <td>Plataformas</td> </tr></table>
Daríacomoresultadoalgoparecidoaesto:
El método es siempre el mismo. Por cada fila que queramos, abrimos una etiqueta <tr> einsertamosallílasceldasquecorrespondan.Dentrodecadaceldapodemosmeterprácticamentecualquiercosa,perodebemostenersiempreenmentequeelobjetivode lastablasestabularinformación.
Aspectos personalizables
60
FORMULARIOS
Losformulariosnospermitenrecoger información introducidaporelvisitantedenuestraweb.Estainformaciónpodemosenviarlaporcorreoelectrónico,esmuyimportantetenerencuentadequesetratadeinformaciónnocifradayquepodríaserinterceptada,asíquenodebecontenerdatos importantes.
LaetiquetaFORMTodoslosformulariosestánencerradospor<form>y</form>.Dentrodeestaetiqueta,vanloscamposdelformulario,ypodemosusarpárrafosysaltosdelíneaparaorganizarlos.Vamosaverunejemplodeetiqueta<form>,suponiendoquevaaserunformularioqueseenviaráporcorreoelectrónico:
<formaction=”mailto:[email protected]”method=”post“enctype=”text/plain“>
Elatributoactionrecogequésevaahacerunavezquesepulseelbotóndeenviar(Submit).Eneseejemplo,elformularioseenví[email protected].
CamposdetextoLamayoríadeloscamposdeunformulariosecreaconunasolaetiqueta,<input>,ymediantesu parámetro type especificamos el tipode campoquequeremos.Un campode texto básicoquedaría así:
<inputtype=”text“id=”nombre“name=”nombre“size=”20”/>
Vamosapegarleunvistazoalosatributos.Contype=”text”indicamosquesetratadeuncampode texto. El atributo size recogeel anchodel campo,medidoen caracteres.Ahorabien, ¿quéhacenidyname?Puesidesunidentificador.Estoimplicaquenadaentodoeldocumentopuedellamarseigualqueesteelemento.
Connamedamosnombrealavariabledeesecampo.Porejemplo,sielvisitanteescribe“Soledad”enelformularioquehemospuestodeejemplo,recibiríamosune-mailquecontendríaalgoasí:
nombre=Soledad
Detodosmodos,paraahorrarnosproblemas,siemprequepodamosesmejorescribirelmismovalorparaidyname.Hayquecomplicarselomenosposible.Hayotrosatributosadicionalesparanuestroscamposdetexto.PodemosindicarelnúmeromáximodecaracteresquepuedeintroducirelusuarioconmaxsizeYsiqueremosqueaparezcaunvalorpordefecto,podemosusarvalue=.algo”.Porejemplo,parapedirladireccióndelapáginawebdelvisitante:
<inputtype=”text“name=”url”id=”url”size=”30”maxsize=”255”value=”http://”/>
Y,porsupuesto,nodebemosolvidarnosdenuestrosocorridotitle,quefuncionaigualqueconlaetiqueta<a>.
CamposdecontraseñaLoscamposdecontraseñasonexactamenteigualesquelosdetexto,sóloqueelvisitanteenlugardeverloscaracteresquehaintroducido,veasteriscos.Lode“exactamenteiguales”quieredecireso:esuncampodetexto,lainformaciónnovacifradadeningunamanera.Ladiferenciaentreuncampodetextoyunodecontraseñaesmeramenteestética.Losatributossonlosmismosquelosdeloscamposdetexto,loúnicoquecambiaesquedebemosintroducirtype=”password”.
Ejemplo:<inputtype=”password“name=”pass“id=”pass“/>
EtiquetarcamposYahemosaprendidoacrearcamposdetextoparanuestroformulario,¿perocómoledecimosalvisitantequéesloquetienequeintroducirencadacampo?Podríamoshaceralgoasí:
<p>Nombre:<br/><inputtype=”text“name=”nombre“id=”nombre“/></p>
Podemostenerproblemasconnavegadoresnovisuales.Entonces,¿cómosabemosquelapalabra“Nombre”hacereferenciaalcampoconelatributoid=”nombre”?Paraesodisponemosdeunaetiquetanueva:<label>.
Estaetiquetaseencargadeasociartextoconsucampocorrespondiente.Sólotieneunatributo,for,yenél tenemosque indicar la iddelcampoalquequeremoshacerreferencia.Elejemploanterior sería correcto de esta manera:
<p><labelfor=”nombre“>Nombre:</label><br/><inputtype=”text“name=”nombre“id=”nombre“/></p>
CASILLADEVERIFICACIÓN
Unacasilladeverificación(másconocidacomocheckboxesuncuadraditoqueelusuariopuedeactivarydesactivarpulsandoenél.Secreanconlaetiqueta<input>ytype=çheckbox”.
<p>Hasjugadoa...<br/><inputtype=”checkbox“name=”monkey1“id=”monkey1“value=”si”/><labelfor=”monkey1“>MonkeyIslandI</label></p>yelusuarioactivalacasilla,recibiremosunmailcomoeste:monkey1=si.
Aspectos personalizables
61
BotonesdeenviaryrestablecerElbotóndeenviarseencargademandar la informacióndelformulario,segúnloquehayamosespecificadoen<form>.Paracrearelbotón,simplementeindicamostype=”submit”:
<inputtype=”submit“value=”Enviar“/>
Elbotónde restablecerborrael formularioyvuelveaponer losvalorespordefecto.Útilparaformularioslargos.Loconseguimoscontype=”reset”:
<inputtype=”reset“value=”Borrar“/>
CSS
EnlapartedeHTMLhemoscomentadomuchasvecesquepodemoscambiarelaspectodeunapágina web mediante CSS (Cascading StyleSheets). Ahora es el momento de aprendercómo hacerlo.
¿Dónde escribo el código CSS? Hay dosopciones para insertar CSS en un documento HTML.Lomásnormaleshacerloenunarchivoexterno (que se llama “hoja de estilos”) yenlazarlodesdenuestrodocumentoHTML.
<link rel=” hoja_estilos .css” rel=” stylesheet“type=”text/css”/>La otra opción es escribir la información referentea losestilos incrustadaenelmismoarchivoHTML.Lopodemoshacerescribiendoentre las etiquetas <style> y </style>, quetambién deben ir en la cabecera.
En una hoja de estilos utilizamos reglasque consisten en elegir selectores a los queasignamos una serie de propiedades. Porejemplo, si queremos que nuestra páginaweb tenga el fondo blanco, las letras grises,y una fuente Arial de 10 puntos de tamaño,escribimosestaregla:
body{background-color:#fff;
color:#666;font-family:Arial,sans-serif;font-size:10pt;}
Como ves, las líneas terminan en un punto ycoma.Esmuyimportantequenosenosolvide.#fffrepresentaalcolorblanco,y#666aungrisoscuro.Selectores
Losselectores losutilizamosparaelegiraquéelementos se aplican las propiedades que escribimos.Haydiferentestiposdeselectores,losmásimportantessonlosqueveremosahora.Siqueremoselegirunaetiqueta,simplementeescribimos su nombre. Por ejemplo, siqueremos establecer las propiedades para los enlaces:a{...}
También podemos elegir un elemento únicoutilizandosuatributoid.Paraello,empleamosla almohadilla:#menu{...}
Otra cosa que podemos hacer es definir unaclaseyhacerquemuchoselementoslautilicen,
escribiendo un punto antes del nombre. Por ejemplo,siqueremosdestacaralgo:.importante{...}
Luego podríamos emplear esa clase en lospárrafos que queramos (o cualquier otro elemento), usando el atributo class de estemodo:<pclass=”importante“>Blablabla</p>También podemos seleccionar ciertos elementos,perosólocuandoesténcontenidosdentro de otros. Por ejemplo, si queremosseleccionar los<li>,pero sólode las listas sinordenar:ulli{...}
Elfondo
Podemos moificar el fondo de un elementocon la propiedad background, que tiene lasiguientesintaxis:
background : color | image | repeat |attachment|positionEl primer parámetro corresponde al color defondo,lossiguientessonrelativosalaimagende fondo:image:aquíindicamoslarutaalaimagenquepondremos.Porejemplo,url(fondo.gif).
repeat: con esto establecemos si queremos quelaimagenserepitaono,tantohorizontalcomo verticalmente. Con repeat se repitesiempreenambossentidos(valorpordefecto),mientras que con no-repeat no se repite nunca. Conrepeat-xserepitesóloenhorizontal,yconrepeat-ysóloenvertical.
attachment: sirve para indicar si el fondo sequedafijoenelsitioosedesplazaconscroll.
Esunpocodifícildeexplicar,asíquelomejoresqueprueben:conscroll(valorpordefecto)el fondo se desplaza, y con fixed se quedasiempreenelmismositio.position:indicalaposicióndelfondo.Indicamostantolaposicióndesdelaizquierdacomodesdearriba(yaseaenpíxeles,porcentajes,oinclusopalabras. Los valores por defecto son 0 % 0%,quesitúanal fondoen laesquinasuperiorizquierda.Siloquisiéramosenlascoordenadas20,30 (tomando como el origen a la esquinasuperiorizquierda),escribiríamos20px30px.Siqueremoselfondocentrado,pues50%50%.Podemosomitiralgunapropiedadsiqueremos.Además, podemos establecer los valores deforma individual, usando las propiedadesbackground-color,background-repeat,etc.Veamosalgunosejemplosparaponerfondoanuestrapágina: sólo color de fondo:body{background:#fff;}
colordefondoeimagenenmosaico:body{background:#fffurl(fondo.gif);}
imagenfija,centradaysinrepetiramododemarcadeagua:body{background-color:#fff;background-image:url(fondo.gif);background-attachment:fixed;background-repeat:no-repeat;background-position:50%50%;}Fuente
Hay varias propiedades que nos permitenjugar con el aspecto del texto. La propiedadquesirveparacambiarlafuenteesfont-family.Comoacabamosdever,podemosindicarvariasfuentes,porordendepreferencia.Sielnombrede una fuente tiene espacios en blanco, hayque ponerla entre comillas. Por ejemplo:font-family:“ComicSansMS”,Arial ,sans-serif;
Aspectos personalizables
62
EL tamaño de la fuente lo controlamos confont-size.Podemosindicarmedidasenpíxeles(px)oenpuntos(pt).Para alinear el texto tenemos a text-align,que puede tomar los valores right (derehca),left (izquierda), center (centrado) o justify(justificado).Esmuynormaltenerunaclaseasí:{text-align:center;}Si queremos indentar los párrafos, puesusamostext-indent:p{text-indent:2em;}
Podemos transformar las mayúsculas yminúsculas con la propiedad text-transform.Si ponemos lowercase, todo se mostrará enminúsculas; con uppercase, enmayúsculas; ycon capitalize pondremos una letra capital alprincipio de cada palabra.
Encuantoalespaciado,paraladistanciaentrepalabrasusamosword-spacing;parael de lasletras, letter-spacing; y para el interlineado,line-height.Unejemplocontodoesto,paralaetiqueta<strong>:strong{color:#000;letter-spacing:0.25em;text-trasform:uppercase;}
Elmodelodecaja
ElmodelodecajaenCSSdescribelascajasquese generan a partir de los elementos HTML.Elmodelodecaja tambiéncontieneopcionesdetalladasenloreferentealajustedemárgenes,bordes,relleno(padding)ycontenidodecadaelemento. La siguiente imagenmuestracómoseconstruyeelmodelodecaja:
Anchoyaltowidth representa el ancho de la caja. Pero es el anchointerior,esdecir,sinbordes,márgenes,ni padding. Podemos indicar este ancho enmedidas absolutas (normalmente píxeles) orelativas(normalmente%).
Sobre el alto de la caja, se controla con lapropiedadheight, y todo loquehemosdichoantessobreelancho,tambiénseaplicaaquí.Padding
Con padding establecemos la distancia de“relleno”entreellímiteinteriordelacajayelexterior(borde).Podemosabreviarloanterioren una sola línea:
padding:10px20px5px30px;
BordesSiqueremosquenuestracajatengabordes,loconseguimosconlapropiedadborder.Tienelasiguientesintaxis:
border:width|style|color
Width especifica el grosor del borde.Normalmenteesunamedidaenpíxeles,perotambién podemos utilizar las palabras thin(fino),medium (normal) y thick (grueso). Porsupuesto, cómo de gordo es thick queda ainterpretacióndelnavegador.
En cuanto a style, es el tipo de borde. Haybastantes, pero los más comunes son: solid(línea continua), dashed (línea discontinua),dotted (línea de puntos) y double (líneacontinuadoble).
Por último, color indica el color del borde.Podemos escoger un tipo de borde diferentepara cada lado con los sufijos -top, -bottom,-lefty-right.Porejemplo,paraponerquealgotenga el borde inferior de 1 píxel a puntitosrojos:
border-bottom:1pxdotted#f00;
Paraeliminarelborde,simplementeponemosquetienedegrosor0píxelesimg{border:none;}
MárgenesLos márgenes se controlan con la propiedadmargin, y es la distancia entre el bordede lacajayloselementosquelarodean.Encuantoalaformadeusarla,esigualqueconlapropiedadpadding, así que la forma de escribir y losatajosesexactamentelamisma.Porejemplo,siqueremosmárgenessuperioreinferiorde20píxeles,ylateralesde5píxeles:margin:20px5px;
Anchoyaltowidth representa el ancho de la caja. Pero es el anchointerior,esdecir,sinbordes,márgenes,ni padding. Podemos indicar este ancho enmedidas absolutas (normalmente píxeles) orelativas(normalmente%).
Sobre el alto de la caja, se controla con lapropiedadheight, y todo loquehemosdichoantessobreelancho,tambiénseaplicaaquí.PaddingCon padding establecemos la distancia de“relleno”entreellímiteinteriordelacajayelexterior(borde).Podemosabreviarloanterioren una sola línea:padding:10px20px5px30px;
BordesSiqueremosquenuestracajatengabordes,loconseguimosconlapropiedadborder.Tienelasiguientesintaxis:border:width|style|colorWidth especifica el grosor del borde.Normalmenteesunamedidaenpíxeles,perotambién podemos utilizar las palabras thin(fino),medium (normal) y thick (grueso). Porsupuesto, cómo de gordo es thick queda ainterpretacióndelnavegador.
En cuanto a style, es el tipo de borde. Haybastantes, pero los más comunes son: solid(línea continua), dashed (línea discontinua),dotted (línea de puntos) y double (líneacontinuadoble).
Por último, color indica el color del borde.Podemos escoger un tipo de borde diferentepara cada lado con los sufijos -top, -bottom,-lefty-right.Porejemplo,paraponerquealgotenga el borde inferior de 1 píxel a puntitosrojos:
border-bottom:1pxdotted#f00;Paraeliminarelborde,simplementeponemosquetienedegrosor0píxelesimg{border:none;}
MárgenesLos márgenes se controlan con la propiedadmargin, y es la distancia entre el bordede lacajayloselementosquelarodean.Encuantoalaformadeusarla,esigualqueconlapropiedad
Aspectos personalizables
top
marginborderpadding
contenidoleft right
bottom
limite del margen
limite del bordelimite del relleno (padding)limite del contenido
63
padding, así que la forma de escribir y losatajosesexactamentelamisma.Porejemplo,siqueremosmárgenessuperioreinferiorde20píxeles,ylateralesde5píxeles:margin:20px5px;
LINKSQUECAMBIAN
Los enlaces tienen tres estados: sin visitar(“normales”), hover (cuando pasamosel cursor del ratón por encima), activos
(cuando hacemos clic) y visitados (cuando yahemos ido a esa dirección). Estos estados secorrespondenapseudoelementos,ypodemoscambiar la apariencia de los enlaces con CSS. Sin embargo, algunos navegadores tienen unbug que, dependiendo del orden en el queescribamoslasreglas,semostraráelresultadocorrectamente o no. ¿Cómo lo solucionamos? PuesLoVe/HAte.Esunmnemotécnicoquenosayudará a recordar el orden en el que estasreglasfuncionanbienencualquiernavegador.
Quedaría así:
links normales:a:link{text-decoration:none;color:#00a;}visitadosa:visited{color:#a00;}hover
a:hover{text-decoration:underline;}activosa:active{font-weight:bold;}Te he dado una pincelada de conceptos básicos parapoderusarelcódigoHTMLyCSSahoraesturnodequelopongasenprácticagenerandounstaticFBML.
PasoapasoparagenerarunstaticFBML Existeunaaplicaciónparapersonalizartupáginadefacebookdeunaempresa,yquelosusuariosveanunapresentacióndelamismacomosisetratasedeunawebSiyahascreadounapáginadefansoempresayestásregistradoenFacebook,puedesañadirlaalapáginaaquí.SetratadecreartupropiodiseñopartiendodeceroUnavezquehaañadidoquelaaplicaciónFBMLestática,hazclicen“Modificarpágina”debajodellogodelperfildetuempresa.Estomostrarátusdatosyaplicaciones.BuscalaaplicaciónFBMLyhazclicenelenlace“Configuracióndelaaplicación”.
Laaplicaciónpuedefuncionardedosmaneras:comounconjuntodecajas,obiencomounaetiqueta(Tab)específica.Siestásconstruyendounapáginadeinicio,probablemente
querrás usarla como una etiqueta, así que adelante,asegúratequeelajuste“Caja”eseliminado,ylaopción“Tab”agregada. Siempre se puedeexperimentarconlascajasmásadelante si los encuentras más útiles.
Agregacontenido
Unavezqueestésenelmododeetiqueta(Tab),vuelvealaconfiguraciónyhazclicenelenlace“Editar”delaaplicaciónestáticaFBML.Estoabreuncampodetextoestándarenelquepuedesagregarcontenido.Lacasilla“Título”seráelnombrede lapestaña, puedescambiarloaalgoapropiado,como “Ofertas de la Semana”, “Ofertas Especiales”, o simplemente “Bienvenidos”,dependiendodecómosevayaausarlapágina.Elcampodetextoprincipalesdondevatucontenido,yahípuedesañadircódigoHTMLestándaralapáginacomoloharíaconcualquiersitioweb,incluyendoimágenes,textos,enlaces,yotrosformatos.NohaynecesidaddeetiquetasHTML,BODYoHEAD.
Ten en cuenta que las imágenesdebenseralo-jadosenotrolugar(enlapáginawebdesuempre-sa,porejemplo)ysólosehace referencia a ellas en el códigoHTMLcomo lovimosanteriormente Página de destinopredeterminada
Si deseas que esta fichasea el “rostro” de tu
Aspectos personalizables
64
negocio, ve a configuración de lapágina y edita “Configuración delMuro.”En“Pestañapredeterminadapara losusuariosquenoson fans”seleccionalapestañaquevaaserlaprimera,enestecasolaquehemoscreadonueva.
A partir de ahora, será lo primeroque los visitantes vean cuandollegan. FBMLestáenFacebookMarkupLanguage,eselcódigousadoporlasaplicacionesdeFacebookyotroselementosdereferenciadelaredsocial,comoperfilesdeusuarios,grupos y otros datos. Si estás realmente buscando la integración de la página dedestinoyobtenerunarelacióninteractivaconlosvisitantesvalelapenaaprenderestelenguaje.
Youtube
Las áreas personalizables del canal deyoutube son menos variables que lasanteriores, pero no por eso menosimportante. Al igual que en las otrasredes sociales, podemos sacar bastanteprovecho a este canal, incluyendo, enél, diferentes accesorios. Los aspectospersonalizablesson:
Avatar:eltamañomáximoparaelavatardeyoutubeesde800x800pxy1mb.Aquí,aligualqueentwitterconvienenoexagerar,noesnecesarioadornarelavatarmuchaparafernalia y colores fosforescentesque dejen ciegos a tus seguidores. A finde cuentas, quieres que sea una imagenamableygratoalreceptor.
Elfondodeyoutubeesmuypersonalizable,
ya que puedes poner una imagen o uncolor plano.
La imagen de fondo es algo que puedellamarmucho la atención a la gentequevisitaelperfilynohaynadaqueparezcamenos profesional que un fondo sin contenido gráfico, a este se le puedesacar mucho provecho y potenciar lamarca grafica con cierta coherencia a lasdemás redes sociales que se administran. Si hablamos de cuentas de empresas, esimportante y recomendable darle ciertaseriedad.Alfinyalcabo,comoyaantessemenciono,sicuidamosaldetalleeldiseñode nuestra web corporativa, deberíamoshacerloenlosperfilesenlasredessocialesoenestecasoenelcanaldeyoutube.Existen multitud de diseños posibles,
desdeelclásicoconellogodelaempresay los colores corporativos, hasta algunosmás avanzados, como los que siguen,detalladamente,losbordesdelapantalladeyoutubeyjueganconélcomosifueraunmarco.También,seutilizaenelfondoel contacto, la dirección del sitio web oreferenciasaotrosperfilesdeotrasredessociales. Incluso hay algunas compañíasqueaprovechaneseespacioparaanunciarsuúltimoproductooservicio.También podemos incluir en esta los enlacesdirectosalapaginadeFacebookfans,lacuentadetwitteroalapaginaweb.
Aspectos personalizables
670 px
1633 px
65
Aspectos personalizables
TABLA COMPARATIVA
66
COHERENCIA GRÁFICA
Enelmercadonosencontramosconproductososerviciosdefuncionalidadypreciosmuysimilares.¿Quélosdistingue?Simplementesumarca,queotorgaacadaunodeellosunapersonalidaddiferente.Elclientecompraunaimagenconlaqueseidentifica.Parte de la labor de un CMes que, pormedio de internet lamarca sea igualmentepercibidaporelconsumidor.Laideaesquelacoherenciaypersonalidaddelamarcao
productosefortalezcavisualmenteatravésdelasredessociales,deestaformallegueapropiadamente al consumidor, transmitiendo una comunicación clara, positiva ydiferenciadora.Pero¿dequeformahacerlosinoseencuentraunacoherenciagráficadentro de las redes sociales administradas?, analizaremos algunos ejemplos decoherenciagráfica.
Coherencia gráfica
67
Los Elementos de composición que sirven para generar coherencia gráfica entre lasdistintasplataformaswebenlasqueelcanaltienepresencia:
- Logotipo:utilizadoentodaslasplataformaswebyredessocialesdecanal13
- Color: gris de fondo,Naranjoen la totalidaddel logo y enlacestipográficos.Panton#ec6923RGB
- Planos de transparencias
Sianalizamosbien,podemosrescataraspectospositivosynegativosdeestapropuestagráfica.
Losaspectospositivosquecontribuyenaqueestaspiezasseveancomopartesdeuntodo, es la elección de transparencia por planos, ya que la superposición de planostransparentescontonogrissobrelaimagen,hacequeéstasigalalíneagráficadelrestodelaspaginas.TomandoencuentaqueFacebooknopermitecambiarelfondoni loscolores,pudiendosolamentejugarvisualmenteconlasimágenesdebiografíayperfil,lasuperposicióndeestosplanossobrelasimágenesdaunidadalasdiferentesplataformasutilizadasporCanal13.
Laincorporacióndecolorenlatipografíadelosenlacesdetwitteryelcolorgrisutilizadoenlosfondos,esmuyasertivoypotencia,aunmás,laimagencorporativadelcanal.Sinembargonotodoestanperfecto,tambiénsepuedenencontrarfaltadeconexiónenestosintentosdecoherencias,queresultaríamuyapropiadocambiar,paragenerardemejorformaunalíneagráficapotente,comoporejemplo:
El logotipo de canal 13 aparece en las distintas plataformas con 2 tonos naranjosdistintos,unoenformatoRGByelotroenCMYK,seriamejorqueseencontrarantodosloscoloresenunmismoformato,asínoexistiríadiscordancia.ElformatoRGBseríalaformacorrectaparaweb,ysisedeseaimprimir,deberíautilizarseCMYK.
OtroaspectoquenoayudaalacoherenciagráficaeselDifuminadoaplicadoenlaimagendefondodeyoutube,yaqueenningunaotraplataformasedesarrollaestemétodo,sinoqueseocupauncortesecoounalíneade2o3pixelesparasepararunplanodeotro.
Existe otra incoherencia gráfica en el Fondo de twitter, ya que si bien se nota unesfuerzopor lograrunaunióngráficamediante loscolores,elobjetivonosecumple,dadoquequedaenevidenciaquesetratadeimitarlasuperposicióndeplanosgrisestransparentes,utilizadosenlasotrasplataformas,peroelresultadoesunjuegodelucesqueescapandelalíneagráfica.
Coherencia gráfica
68
COHERENCIA GRÁFICA
COMMUNITY GRAPHIC
LosElementosdecomposiciónquesirvenparagenerar coherenciagráficaentre lasdistintas plataformas web en las que elcommunitygraphictienepresenciason:
-Logotipo: utilizado en todas lasplataformas web y redes sociales decommunitygraphic
-Tramado o malla con transparencia azulada, sobre fondoblanco,utilizadaenlos fondos
-isotipo
Coherencia gráfica
69
Analicemosbienestapropuestagráfica.
Losaspectospositivosquecontribuyenaqueestaspiezasseveancomopartesdeuntodo,eslaeleccióndetramadoomallaazuladacontransparencia,sobrefondoblanco,yaquelaeleccióndeésa,ylarepeticiónenlosdiversosfondosdelasredessociales,hacequesigalalíneagráficadelrestodelossitiosdeCommunityGraphic.
La incorporación de color azul en la tipografía de los enlaces de twitter resulta unadecisiónacertadaypotencia,aunmáslamarcaylalíneagráfica.
A diferencia del ejemplo de canal 13, los sitios web de commutity graphic solocompartenpantonesenformatoRGB,porende,nohaydiscordanciadetonos,enloscoloresutilizadosenlogosoisotiposyenlasdiversasplataformas.
Elisotipoesmuyacertadoalahoradeserocupadodeimagendeperfiloavatar,yaquelamarcanopierdelegibilidadenlosdiferentestamañosenlaqueseutiliza.
Ellogotipoesutilizadoentodaslasplataformaswebdecommunitygrafic.
Podemosdarcuentaquelacoherenciaolíneagraficabienutilizadaatravésdelossitiosweb,fortalecelamarcayconectadeformaeficazconelclienteousuario.Recordemosquesicuidamosnuestraimagenempresarialnodebemosdescuidarnosdelaimagenatravésdeinternet,yaquegranpartedeloqueproyectamosesaceptadaorechazadaporlosseguidores,compradores,usuariosoclientesdenuestramarca,productooservicio.
Coherencia gráfica
71
LINK ACCESO SITIOS WEB COMMUNITY GRAPHIC
https://www.facebook.com/GuiaDeDisenoCM?ref=hl
twitter: @Com_graphic
http://www.youtube.com/user/guiadisenocm?feature=mhee
Link acceso sitios web Community Graphic
73
Conclusión final
CONCLUSIÓN
Concluyendo esta Tesis podemos declarar con propiedad que el diseño, en lo que respecta altrabajode losCommunityManageresmuy importante,yaque,comosesueleexpresar“todoentraporlavista”.Graciasalaweb2.0acambiadolamaneraenqueelusuarioentendíayhaciausodel internet,pasandodecontemplarpaginasestáticaaunadinámicadeinteracciónconelmedio,loquesuponeinevitablementeuncambiopsicosocialenlaspersonas.Comoyasabemos,cadapersonatieneunestilodiferente.Lomismoocurreconlasempresas,cadaunadeellastieneunpropósito,estiloynichodiferentequepodemospotenciargraciasaldiseñoenlawebyalacoherenciagráficaqueexistaentrelosdiversossitiosqueutilicelaempresaeninternet.Deestaformapodemosllegarycaptardemaneramáseficazalosclientesdenuestramarca,productooservicio,eincluso,podemosdecirquesetratadeunaestrategiademarketingpoderosayaestasalturasdelpartidocasiimprescindible.
Si reflexionamos sobre las grandes empresas y sus actuales estrategias comunicacionales, nosdamoscuentaquelawebcumpleunrolsignificativoyprotagónico,principalmenteporlaevoluciónexplosivadeusoquehatenidoestemedioentrelosusuariosquealavezsonlosconsumidoresdesusproductosymarcas,esahí la importanciadelCommunityManagerdehoyendía.Unacarreraqueemergiógraciasalaweb2.0yalanecesidaddequeunprofesionalsehicieracargode laadministraciónde las redessocialesotorgándoleunenfoquecompletamentepublicitarioy comercial. Esta actividad fue ganando espacio demanera fugaz en elmundo laboral y hoyformapartevitalenelmarketingdeunaempresa.PeroparaqueelCommunityManagerlleguea cumplir bien su trabajo,tieneque serunprofesional y comunicador completo, combinandovariashabilidades, tantoduras, comoblandas, colocándoseenel lugarde la empresa y sobretododelcliente,pensandoestratégicamentecómo,cuandoydondellegaralusuario, ynotansólo,porejemplo,serunpublicistaoperiodista,sinoquecomplementarestasdosáreasconunatercera,eldiseño, transformándoseenuncomunicadorcapaz, completo, integroyprofesionalensutrabajo.EsporelloqueesteproyectodetesisanalizayenseñaunaspectoenquelagranmayoríadelosCommunityManagersondeficientes,eláreadeldiseño.
Si bien es cierto que dentro de los departamentos demarketing o publicidad un Community
Managertrabajaenequipo,quemuchasvecesincluyendiseñadores,tambiénexistenpersonasrealizandoestaactividaddeformaindependiente,porlomismonosplanteamoslainquietudde¿Qué pasa con ellos? Y nos encontramos con que muchos de estos profesionales no manejan conceptosbásicosdediseño,loqueclaramentemermasulaborcomoadministradoresdemarca,porlomismoyluegodeesteanálisisentendemoslonecesarioqueresultaqueelCMsepaymanejeconceptosdeláreadediseño,decomollegaralclientedeformavisualycomohacerquecadasitiodelaempresa,establecidomedianteredessocialessecomplementenyformeuntodo.PararealizarestatesissepensóprincipalmenteenlosCommunityManagerindependientes,conlaideadeentregarunaguíaquesirvacomocomplementoyapoyoenlaslaboresdelaadministracióndelasredessociales,entregandodatosquepermitansuperarlasfalenciasdediseñoqueseobservaenellos.ParasuplirestadeficienciasecreoestaguíadediseñoparaelCM,llamada“CommunityGraphic”,queserádesarrolladaatravésdeInternet,parapoderaportaraqueloscomunicadoresinteresadoslogrensermáscompletos,conelfindequesutrabajoserealicedelamejormaneraposibleyelusuariosesientasatisfechoalahoradevisitarunsitioounaredsocialrelacionadaconunaempresaespecifica.
En esta guía podemos encontrar consejos de color, para que funcione como un aporte a lapropuesta,buscandoprincipalmenteseragradablealojohumanoycoherenteconlaempresaatratar.Tambiénencontramosatajosalahoradeadministrarunaredsocial,destacamoslaspartespersonalizablesdelasmismasycomohacerquecadaunadeellasseveancomountodo,lograndocoherenciagráficaentreellas.
AfirmoquelaimportanciadeldiseñoalahoradeadministrarunaredsocialesmuygrandeyqueunCommunityManager,tienequeseruncomunicadorcompletoynodespreocupareláreadeldiseñoenlaweb,yalavezirsiempreaumentandosusconocimientosalritmodelaconstanteevolucióndelainternet.
Seencontróunaproblemáticaeneltrabajodeestoscomunicadoresytambiénseencontróunasolución,ylasoluciónes“COMMUNITYGRAPHIC,GuíadeDiseñoparaelCommunityManager”.
75
BIBLIOGRAFÍA
http://www.masadelante.com/faqs/sitio-webvistoel26/6/2012
http://www.maestrosdelweb.com/editorial/web-20-%C2%BFreconfiguracion-social-o-tecnologica/vistoel12/6/2012
http://www.redessociales.es/que-son-las-redes-sociales/vistoel12/6/12
http://es.shvoong.com/internet-and-technologies/websites/2196706-facebook-la-red-social-m%C3%A1s/#ixzz1wPhWM8Eivisto12/6/12
http://es.shvoong.com/internet-and-technologies/websites/2004857-youtube/#ixzz1wPi2PMndvistoel12/6/12
LANACION.CLhttp://www.lanacion.cl/lanzan-en-chile-diplomado-para-ser-community-manager/noticias/2011-01-04/142913.htmlvistoel29/5/12
http://www.sciencedirect.com/science/article/pii/S0191886911005332vistoel17/7/12
LATERCERA.COMhttp://www.latercera.com/multimedia/interactivo/2011/01/687-34663-4-encuesta-de-caracterizacion-de-usuarios-de-twitter-en-chile.shtmlvistoel17/7/12
http://www.youtube.com/watch?v=3r5oIP_2Wswvistoel17/7/12
http://www.puromarketing.com/42/10353/perfiles-community-manager.htmlvistoel17/7/12
http://www.chilexportaservicios.cl/CES/Portals/18/RGX.pdfvistoel17/7/12
http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ vistoel22/06/12
http://seoplicio.blogspot.com/2010/04/como-personalizar-una-pagina-de-empresa.html visto el13/8/12
http://cursocommunitymanager.com/2011/15-aplicaciones-de-facebook-para-personalizar-tu-pagina-de-fans/vistoel13/8/12
http://aext.net/2010/10/20-amazing-fbml-tutorials/vistoel15/8/12
Bibliografía