Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares

Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares

Elartedecrear(buenos)sitiosweb:diseño,desarrolloyestándares

MiriamAvila,IsabelVillarrealeIvanSan2esteban

[email protected]

Monterrey,NuevoLeón,México

Agosto2008

Taller


Objetivos• Conocerelprocesoparacrearunbuensi2oweb

• Iden2ficarlasnecesidadesdetuorganización

• Conocerestrategiasyconceptosclavepara

organizarypresentarsuinformación,programar

siguiendoestándaresydiseñarefec2vamente

• Conocerrecursosgratuitosparacrear,montarymantenerunsi2oweb

• Sabercómofacilitarquelosbuscadoresveana

susi2oycómoatenderasusvisitantes


Parte1.

¿Quées

unbuensi2oweb?


ProgramaPARTE1:QUÉESUNBUENSITIOWEB(1.5h)

• Unsi2oweb

• Partesdeunsi2oweb

• Unbuensi2oweb


Unsitioweb

EsunafuentedeinformaciónadaptadaparalaWorldWideWeb(WWW)yaccesiblemedianteunnavegadordeInternet.

EstainformaciónsepresentageneralmenteenformatoHTMLypuedecontenerhiperenlacesaotraspáginasweb...

FuenteWikipedia


Unsitioweb


Partesdeunsitioweb


Partesdeunsitioweb

Encabezado• Elencabezadoiden2ficaaunsi2owebdemanerarápida.


Partesdeunsitioweb

Navegación• Eseláreaquecon2eneloshipervínculoshaciaelcontenidodelapágina.


Partesdeunsitioweb

Contenidoocuerpo• Eslapartemedulardelsi2oweb.


Partesdeunsitioweb

Piedepágina• Usualmentecon2enelainformaciónquerespaldaelsi2oweb:desdecondicionesdeusohastaavisoslegales.


OK.Entonces…

¿quéesunbuensi2oweb?


Unbuensitioweb• representalaesenciadeuna

organización• eslaexpresióndeunapersona• llevalosproductosyserviciosdeuna

organizaciónalaInternet• resuelvedudas• minimiza problemas• ahorradinero• generavalorysa2sfacción

FUNCIONA


Elartedecrear(buenos)sitiosweb:diseño,desarrolloyestándares

MiriamAvila,IsabelVillarrealeIvanSan2esteban

[email protected]

Monterrey,NuevoLeón,México

Agosto2008

Taller


Parte2.

Laplaneación


??


¿Cómosecreaunaexperienciadeusuarioenlaweb?


SegúnJJGarreP


Estrategia


Estrategia

Alcance


Estrategia

Alcance

Estructura


Estrategia

Alcance

Estructura

Esqueleto


Estrategia

Alcance

Estructura

Esqueleto

Superficie


Inves@gar


Investigar

DeLouRosenfeld


Investigarelcontexto

• Relacionespersonales

•Metas

• Tecnología

• Recursoshumanos

• Recursos


Investigarelcontenido

• Elsi2oactual

• Estructura

• Análisisdelcontenido

• Flujo

• Benchmarking


Investigaralosusuarios

• Estadís2cas

• Entrevistascondependientes

• Entrevistasconusuarios


Organizar


Organizar


Organizar


Organizar:clasi@icarynombrar

Considera:• ¿Mutuamenteexcluyentes?

• Profundooancho

Recurrea:• Cardsor2ng

• Pruebasconusuarios

• Benchmarking


Organizar:clasi@icarynombrar


Navegación


Navegación


Navegación


Navegación


Navegación

hPp://www.jjg.net/ia/visvocab/


Navegación


Navegación


Navegación

Global

Contextual

Local


¿Quésabemosahora?


Alpapel


Diseñodeinformación






Diseñodeinformación• Tiposdecontenido

• Patronesrepe2dos

• Importanciadecadaelemento

• Navegación/interacción




Diseñodeinformación:herramientas

Papelypluma



SoHware



Buenosejemplos

• Smashingmagazine.com

• Konigi.com

• PaPerntap.com



Parte3.

Manosalaobra


ProgramaPARTE3:MANOSALAOBRA(6.5h)

• Cómoelegirunadministradordecontenido(cms)

• Buenasprác2casdeHTMLyCSS

• Diseñoweb

• Herramientasparadiseñaryprogramar

• Aprovechalosserviciosweb

• Escribiendoparalaweb


Administradoresdecontenido(CMS)

¿Cómoelegirunadministradordecontenido?


Administradoresdecontenido(CMS)• So#wareparalapublicaciónyorganizacióndelcontenidodeunapáginadeInternet.

• Sonú2lesparasi2osqueusancontenidovariado:– textosyimágenes,

– audioyvideo,

– seccionesdinámicasyestá2cas.


HerramientasdeunCMS• Administraciónonlinedelcontenido

• Fácilimportaciónyexportación

• Opcionesdeprivacidad,indexación,SPAM,etc.

• Editoresdecódigo

• Manejodeusuariosypermisos

• Retroalimentación


Ventajas• Puedesadministrartusi2owebatravésdeInternet.

• Unusuariosinconocimientodeprogramaciónpuedeeditarcontenidofácilmente.

• Nonecesitastécnicosoprogramadoresparahacercambiosentusi2oweb.


ComparaciónCMSdepropietarios

CMSopensource

Licencia Costo Gratuita

Modificaciones Segúnlacompañía Libres,hechasporusuarios

Soportetécnico CentrodeatenciónCentrodeservicioContratacióndesoporte

DocumentaciónForosdediscusiónSoporteexterno

Ejemplos MicrosocSharepoint Wordpress


CMSdepropietarios

• MicrosocSharepoint

• Documentum

• EM3

• Ingeniux

CMSopensource

• Joomla!

• Drupal

• PHPNuke

• MovableType

• Wordpress

• Lyceum


MicrosoftSharepoint


Wordpress


CriteriosparaseleccionarCMS• ¿Qué2podesi2oplaneasconstruir?

• ¿Quétangrandeplaneasqueserátusi2o?

• ¿Tendrásinformaciónestá2ca,dinámica,unaovariassecciones?


CriteriosparaseleccionarCMS• ¿Tendrásoperacionesotransaccionesenlínea?

• ¿Cuálessonlos2posdecontenidoquepublicarás?– Arkculos,fotogralas,pistasdesonido,videos,…

• ¿Necesitashacermodificacionespar2cularesparatusi2o?


CriteriosparaseleccionarCMS• ¿Quéherramientaspar2cularesnecesitarásentusi2o?– RSS,forosdediscusión,blogs,calendarios,podcasts,…

• ¿Cuántoscolaboradoresdecontenidotendrátusi2o?¿Conquépresupuestocuentas?


Buenasprácticas

HTML,(X)HTML,CSS,etc.


¿QuéesXHTML?• Esellenguajebásicoparalaprogramaciónweb.

• Manejae2quetasencorchetesagudos(<y>),consusrespec2vosatributosentrecomillas(““).– Ejemplodeinsercióndeunaimagen:<imgsrc=“foto.jpg”width=“500px”/>


¿QuéesXHTML?• E2quetasdeunalínea

Ejemplo:<imgsrc=“foto.jpg”>

• E2quetasdeaperturaycierreEjemplo:<p>Estoesunpárrafo.</p>


DelHTMLalXHTML• ElXHTML2enecódigomásestrictoymejorasensusintaxis.– Minúsculas

– Cierredee2quetasconommitag(/>)obligatorio

– Correctajerarquíayanidación(nes1ng)delase2quetas

– YdejareldiseñoparaelCSS





EstructuraXHTML<html></html>

Todoelespaciodeldocumentodondehaycódigo

<head></head>Laseccióndedatosacercadeldocumento

<Itle></Itle>

Elktulodelapágina

<body></body>

Elcuerpo:estructura,texto,imágenes,videos,etc.


CómomejorartucódigoXHTML• ValidaconherramientasdelW3Cantesdepublicar.

Esmásfácilhacerlosiusaslasbarrasdeherramientasdedesarrollowebqueterecomendamos.

Herramienta:hwp://www.w3.org/QA/Tools/#validators


CómomejorartucódigoXHTML• Usalase2quetassegúnlaúl2marevisióndeXHTML

Ejemplo:Usare2quetasXHTMLcomostrong,em,header,p,br.

Incorrecto:Usare2quetasHTMLcaducascomofont,u,s,b,i,name,menu,center.

Herramienta:Catálogodee2quetasdelaW3Chwp://www.w3schools.com/tags/default.asp


CómomejorartucódigoXHTML• Instalavariosnavegadores,almenosInternetExploreryFirefox.

Revisatupáginaendiversosnavegadoresendis2ntasversiones.

Herramienta:UsaBrowsershots(hwp://browsershots.org)pararevisardis2ntosnavegadoresyversiones.


¿Quénavegadoresusan?


¿Quétamañosdepantallausan?


CómomejorartucódigoXHTML• Usalae2queta<div>paraestructurartupágina.Usalastablas(<table>)paraorganizarcuadrículasdedatos.

Curso:Cómohacerunapelículadesdetucelular

Dirigidoa: Jóvenesyadultos

Duración: Del9al20desep2embre

Horario: 19a21horas,exceptodomingos

Costo: $200pesosporsesión


¿Porquénodiseñarcontablas?• Lastablassonparapresentardatos

• Usarlasenestructuraimplicamenosaccesibilidad

• Hacenquelossi2osnoseanflexibles


CómomejorartucódigoXHTML• Incluyeunadescripciónenlae2quetaALTparalasimágenescuandoéstastenganinformaciónoilustrentexto.

Ejemplo:<imgsrc=”arbol.jpg”alt=”Fotograladeunárbol”/>Incorrecto:<imgsrc=”arbol.jpg”/>

Incorrecto:<imgsrc=”borde.jpg”alt=”Esteesunbordedecora2vo”/>Ejemplo:<imgsrc=”borde.jpg”alt=“”/>


CómomejorartucódigoXHTML• Usalase2quetas<p>y</p>paradividirpárrafosdetexto.

Ejemplo:<p>Estoesunpárrafo.</p>Incorrecto:Estoesunpárrafo.<br/><br/>

UsaelcódigodemanerasemánIca.

Cadae2quetadeXHTML2eneunaprioridadparalosservidoresdebúsqueda.


CómomejorartucódigoXHTML• Definetusktulosatravésdelase2quetas<h1>,<h2>,<h3>,<h4>,<h5>y<h6>segúnsuimportancia.

Ejemplo:<h2>Estoesunsubktulo</h2>Incorrecto:<strong><em>Estoesunsubktulo</em></strong>

Evitacrearktuloscon<strong>y2pogralamásgrande.


CómomejorartucódigoXHTML• AsegúratedeseñalarenelDocumentType(DTD)larevisióndeXHTMLquesigues.

• Escribelosatributosdeunae2quetasiempreenelmismoorden.


CómomejorartucódigoXHTML• Asegúratequelainformaciónesencialdetusi2owebestéenlosprimeros3KBs.

• Dividetucódigoenapartadosusandocomentarios(<!‐‐)

Ejemplo:Encabezado,cuerpo,menú.<!‐‐encabezado‐‐>


CómomejorartucódigoXHTML• Construyesi2osfluidosyflexibles,ytrabajaconunidadesdeproporción.

Herramienta:EmCalculator‐hwp://riddle.pl/emcalc/

Depuntosypicasa“ems”.Depixelesaporcentajes.


CómomejorartucódigoXHTML• Usaplan2llasdecódigo(comolasdeDreamweaver)parafacilitarrediseñosoactualizacionesmasivas.


¿QuéeselCSS?• EsellenguajeparadiseñowebquepermitemodificarloselementosXHTMLdefinidosenunapáginaelectrónica.

• Estáorganizadoendocumentosllamadoshojasdees2lo(“stylesheets”).


¿QuéeselCSS?• EselcomplementodellenguajeXHTML.

• Podemosllamarlocomorecursoexternoenelencabezadodeunapágina(enlasecciónhead)oencadae2quetaquenecesitemos(enlasecciónbody).


CSSyeldiseño• Unapáginapuedecambiarsuhojadees2loytenerundiseñocompletamentedis2ntoaunqueloselementosdeXHTMLnoseanalterados.

Ejemplo:ZenGarden–www.csszengarden.com

• Unahojadees2lopuedeserundiseñocompletamentedis2nto.


XHTMLeselqué,CSSeselcómo• ConCSSseparaseldiseñodelaestructuraparahacerloflexible.

Ejemplo:ZenGardenhwp://www.csszengarden.com/

• Beneficios:- Disminuireltamañodelapágina

- Diseñoflexible(mismocontenido,dis2ntosdiseños)

- Mejorindexación


VentajasdeusarCSS• XHTMLSeencargadelaestructuradeunapáginawebydefineloselementosquehabráenella:texto,tablas,imágenes,objetos.

• CSSModificaloselementosXHTML,ylesdacaracterís2cascomocolor,tamaño,2pograla,posición,alineación,eimágenesdefondo.


EstructuradelCSS<styletype="text/css">

.border{border:4pxsolid#CCCCCC;

}#encabezado{

color:#009966;background‐color:#FFFFFF;font‐size:2em;

}</style>


EstructuradelCSS


EtiquetasdeCSS• Cuatro2posdee2quetas(selectores):

– ids(#nombre)

– clases(.nombre),

– selectorescontextuales(nombre)

– ounacombinacióndelosanteriores.


EtiquetasdeCSS• IDs(#nombre)

Paraseccionesúnicascomolasbarrasdenavegaciónyelencabezado.

Esusadoprincipalmentecon<div>,comoespaciosrectangulares.

Ejemplo:#encabezado{width:80%;

}

…ydespuésllamarloenelcódigoXHTML:<divid=“encabezado”>


EtiquetasdeCSS• Clases(.nombre)

Paraes2losqueserepitenmásdeunavezenunapágina,comoformatodektulos,ligas,botonesytablas.

Ejemplo:

.h2{

color:#5A5A5A;background‐color:#EEEEEE;padding:.8em;border:1pxsolid#CCCCCC;

}

…ydespuésllamarloenelcódigoXHTML:<spanclass=“h2”>


EtiquetasdeCSS• Selectorescontextuales(nombre)

SonelementosdeXHTML(<entrebrackets>)quepuedensermodificadasconCSS.

Ejemplo:

img{

border:0px;

}

ul{

list‐style‐type:square;

}


EtiquetasdeCSS• Combinaciones

Losdis2ntosselectorespuedencombinarseparahaceres2loslocalesenlaspáginas.

Ejemplo:

ul.bullet{list‐style‐posi2on:outside;

}

ul.nobullet{list‐style‐type:none;

}


AlgunosatributosdeCSSfont:(nombredela2pograla)

color:#FF0000;(colorhexadecimal)

background‐color:#FFFFFF;(colorhexadecimal)

text‐align:lec,right,center

text‐decoraIon:blink,line‐through,underline,none

border‐style:solid,double,dowed,dashed

padding:(número,enpx,em,etc.)

margin:(númeroenpx,em,etc.)

float:lec,right,none


Estiloslocalesyexternos• Comoelatributo“style”enlae2quetadeunelemento,demaneralocal.

Ejemplo:<divstyle=”background‐color:#000000;”>

• Comounahojadees2loexterna,importadacone2quetasen“camposextras”deWebability.Ejemplo:<linkrel="stylesheet“href=“es2lo.css"type="text/css"/>


Estiloslocalesyexternos• Comounahojadees2loembebida,contodoslosatributosusados.

Ejemplo:

<styletype="text/css">

.border{

border:4pxsolid#CCCCCC;

}

.2tlev202{

color:#FFFFFF;background‐color:#CC0000;

}

</style>

Luego,enXHTML:<divclass=“border”>


HerenciaenCSS• Laspropiedadesdeunae2quetaseheredanalase2quetasqueéstacon2ene.

Ejemplo:Siindicamoselcolornegroparala2pograladelmenú…#menu{color:#000000;}…todoloqueestéadentro(párrafos,ktulos,viñetas)tendráelcolornegro,amenosdequeseñalemosotracosa.

Algunase2quetas(comomargin,paddingyborder)noheredansuspropiedades.


HerenciaenCSS• Cuandotenemosvariasindicacionesparaunmismoelemento,laúl2maeslaquesetomaencuenta.

Ejemplo:

h1{border:0;}h1{border:1pxsolid#cccccc;}


Diseñoweb

Reglasbásicas:

¿Cómopiensanlosusuarios?


Diseñoweb:reglasbásicas

• LosusuarioswebnosonmuydiferentesdelosclientesdeunaIendaenlavidareal.



• Losclicsnacendelaatraccióny/olauIlidad.



• Losusuarioswebaprecianlacalidadylacredibilidad.



• Losusuariosnoleen.Escanean.



• Losusuarioswebsonimpacientesyesperangra2ficacionesinstantáneas.– unsi2odebesa2sfacerlasexpecta2vasdelosvisitantes



• Losusuarioswebnosiempretomanlasmejoresdecisiones.



• Losusuarioswebconfíanensuintuición.



• Losusuarioswebdeseantenerelcontrolsobresunavegador.


Diseñoweb

Poreso…

Lasreglasdeoro


Diseñoweb:lasreglasdeoro• Nohagaspensaralosusuarios

– Unapáginadebeserobviayexplicarseasímisma1.

– Lanavegacióndebeserclara,conpistasvisualesadecuadasyligasfácilmentereconocibles.

Del libro Don’t make me think de Steve Krug’s, primera ley de la usabilidad.


Diseñoweb:lasreglasdeoro• Nohagaspensaralosusuarios

– Losusuariosen2endenmejorlossi2oswebdiseñadosenpatronesenF2.

– Reduciendolaincer2dumbredeunusuarioanteelsi2o,ayudarásaquelosusuarioscumplansusobje2vos.Silosusuariosnoencuentransucamino,teabandonarán.

Del artículo F-Shaped Pattern For Reading Web Content de Jakob Nielsen's


Diseñoweb:lasreglasdeoro• Usuarioscuriososeimpacientes=cerocomplicaciones

– Ofreceserviciossencillos,prác2cosydirectos

– Lasa2sfaccióneselmejorgancho

– Aumentalaconfianzadelosusuarios,gra2ficandosusaccionescorrectasyayudandoaresolverlasincorrectas


Diseñoweb:lasreglasdeoro• Unsi2owebformapartedelaimagencorporaIvadeunaorganización

– Sudiseñodebeseratrac2voynoexagerado

– Debecontarconunapaletadecolorapropiada,tantoalobje2voquesedeseaperseguircomoaldelaimagendelaorganización


Diseñoweb:lasreglasdeoro• Creaundiscursovisualclaro

– OrganizaParaproveerunaestructuralimpia,consistente,yconnavegaciónclara

– EconomizaHazmásconmenosempleandolosprincipiosdesimplicidad,claridad,dis2nción,yénfasis

– ComunicaEmpataeldiseñoalaaudiencia,hazlolegible


Diseñoweb:lasreglasdeoro• Jerarquizaysacaelmejorprovechodelospuntosfocales

– Organizaapropiadamentelapáginaprincipaldelsi2o

– Ofrecepistasqueevitenincer2dumbre

– Nodistraigasalosusuariosconimágenes,efectosoaccionesinnecesarias

– Diseñapensandoenelusuario


Diseñoweb:lasreglasdeoroJerarquíaypuntosfocales

hwp://www.subtrac2on.com/


Diseñoweb:lasreglasdeoro• Escues2óndesimplicidad

– Lasimplicidadtraeelzenaunsi2o

– Unusuariosobretodobuscainformación– Ylosusuarios,prefierenversi2osbasadosentexto


Diseñoweb:lasreglasdeoro• Notemasalespacioenblanco

– Elespacioblancorefierealasporcionesdeespacioquesecreanentreloselementos

– Elbuenusodeesteespaciogeneraequilibrio,favorecelalecturaycreaunacomposiciónesté2ca

– Lasestructurascomplejassevuelvenordenadasconespacionega2vosuficiente

– Separaloselementosvisuales,ayudaagenerarjerarquía


Diseñoweb:lasreglasdeoroUnsi1osimpleybienequilibrado

hwp://www.subtrac2on.com/


Diseñoweb:lasreglasdeoro• Eligebienaloselementosestelares

– Ofrecealosusuariosunavisiónrápida,claraydirectadelasfuncionesdisponiblesentusi2o.Esunabuenaprác2cadediseñodeinterfacesyesunagarankadesa2sfaccióndetususuarios.


Diseñoweb:lasreglasdeoroUnestelarconénfasis

hwp://twiwer.com/


Diseñoweb:lasreglasdeoro• Evitaelexcesodeinformación

– Lagentelee25%máslentoenpantallaqueenpapel

– El79%prefierenescanearvisualmentelainformaciónenvezdeleerlaadetalle

– Losusuariosleeránsóloel20%deltextoenunapáginapromedio

Fuente !"#$%&'()*+),:

-./,0$&*)),&*$+&.+."1($+&),&(,0)1,)0 - http://www.useit.com/alertbox/9710a.html

2.3&0",&4$5$&*)),&*$+&.+."1($+ - http://www.useit.com/alertbox/percent-text-read.htm l


Diseñoweb:lasreglasdeoro• Escribeparaquetelean(yen2endan)

– Elwebnoeslomismoquelaprensa

– Eles2lodelaredaccióndebeserconcisoypreciso

– Vedirectoaloshechos

– Escribepárrafoscortos,conelementosenlistasyktulosclaros


Diseñoweb:lasreglasdeoroUnsi1opreciso

http://es.facebook.com/


Diseñoweb:lasreglasdeoro• Loselementosconvencionalessontusamigos

– Usapatronesyelementosalosquelosusuariosyaestánacostumbrados

– Lospatronesdisminuyenlacurvadeaprendizajeporquelagenteyasabequehacer,cuándoyquéesperaracambio

– Lasconvencionesayudanagenerarconfianzaycredibilidad

– Cumplelasexpecta2vasdelosusuarios


Diseñoweb:lasreglasdeoroUsaelementosconvencionalesvscrea1vidad

http://www.usolab.com/wl/images/atm-eco-feedback.jpg


Diseñoweb:lasreglasdeoro• Prueba,pruebayvuelveaprobar

– Todoproyectowebdebeprobarse,esunaleynaturaldelaspruebasdeusabilidad

– Hacerpruebasantes,duranteyfrecuentementeaunsi2osóloayudaránamejorarcadaaspectodelsi2o

– Erraresmalo,peoresnosaberloodejarlo

– Probaresunprocesoitera2vo

– Eldiseñador,desarrolladorocliente,nosonelusuario.Pruebaconusuariosreales.


Diseñoweb

Tendencias


Diseñoweb:tendencias• Estructurassimples

– Usaestructurassimplesde1a3columnas– Losdiseñadoresentendieronqueundiseñosimplefuncionamejor(pocoselementos,bienorganizados)

– Losdiseñosengeneralsepuedenentenderalprimervistazo,sintenerqueestarvagandoparaentenderelconceptogeneral.Estoesmuchomástranquilizanteyefec2voencues2óndenavegaciónorientadaqueenañosanteriores.


Diseñoweb:tendencias

Alistapart 8020Publishing

Estructurassimples


Diseñoweb:tendencias• Diseñocentrado

– Eldiseñocentradoofrece:confianza,balance,simpleza,zen.

– Lospatronesdediseñoalineadoalaizquierdacadavezsonmenoscomunes,lomismoquelasestructuraslíquidas.


Diseñoweb:tendencias• Diseñodelcontenido

– Laarquitecturadeinformacióntrajoalaconcienciapopularelsen2dodeuncontenidobienestructurado

– Actualmentehaymásatenciónhaciacómolascosassepresentanentérminosdecontenido,queenelmaquillaje(backgrounds,coloresyformas)

– Hayqueseguirelprincipio“atraelavistadelusuarioalcontenido”

– Losdiseñosexitososdehoyendíahacenverbienalcontenidonoaldiseñador

– Losdiseñadoressoncomunicadoresnodecoradores


Diseñoweb:tendencias• Efectos3D,efectos3Dymásefectos3D– Eldiseñodeestaépocaestáenmarcadoenefectos:degradados,sombras,esquinasredondas,iconostridimensionales,etcétera.

– Sinembargoesinteresanteverqueelresultadodeestatendenciasimplificóeldiseñoengeneralenvezdesaturarlo,dandopasoaelementosdestacadospuntuales


Diseñoweb:tendencias

Reflejosysombras

Anunciosdeestrella


Diseñoweb:tendencias• Fondosclarosoneutros

– Lamayoríadelossi2os2enenfondosplanos,casisiempreblancosodegradadosengrises.Estagamaneutral,simple,yrelajadaesunabaseperfectaparacoloresvibrantes.


Diseñoweb:tendenciasFondosclarosoneutros

AbstractsManager AnthonyPhillips

TDGIntegratedArtypapers


Diseñoweb:tendencias• Tintesdecolorbrillantesusadosconprecisión– Eldiseñodelosúl2mosañossobresaleporloscoloresjuvenilesyvibrantes,nosóloparalosblogs,sinoparasi2oscomercialesimportantes.

– LaWeb2.0trajoalastendenciaenmodalosverdes,anaranjados,azulesyvioletasaplicadosagrandesktulos,iconosenormesydestellosdecoloralolargodelossi2os.


Diseñoweb:tendenciasTintesbrillantes

Iconosllama1vos


Diseñoweb:tendencias• Espacioblanco

– Elespacioblancononecesariamentedebeserblanco,simplementedeserunespacio.


Diseñoweb:tendencias• Textogrande

– Lostextosmásimportantedelapáginasonmásgrandesqueeltextoregular

Woothemes JasonSantaMaria


Herramientas

Paradiseñaryprogramar


Herramientas:diseñoweb• Editoreswebdeimágenes

– PixenateEditorgratuitodefotogralasenlínea.PicnikenFirefox,PicnikenFacebook

– Herramientagratuitaenlíneadeedicióndeimágenes,funcionacomoextensióndeFirefoxoaplicaciónenFacebook.

– PicasaHerramientagratuitaparaeditarfotogralas,yaseaenlíneaoentucomputadora.Permitecrearálbumesdedistribucióndeimágenes.


Herramientas:diseñoweb• Paletasdecolor

– ProcolorpalewesocwaredeColourLoversHerramientacompleksimaparaelegircoloresypaletas.Loscolorescasinuncasonweb‐safe.

– 4096ColorwheelHerramientadeseleccióndecoloresconuncompara2vodecoloresweb‐safe,web‐smartyun‐safe.

– ColorcubedemoreCrayonsHerramientadeseleccióndecoloresweb‐smartportonalidad.


Herramientas:diseñoweb• Archivosdeimágenes

– GewyimagesElmásgrandeycompletoarchivofotográficoydeilustracionesenlaweb.Concosto.

– Stock.xchngAmplioarchivogratuitodefotografíasdeusolibre.Requiereregistro.

– PixelperfectdigitalBuenarchivodefotografíasdigitalesgratuitas,también2enetexturasygráficos3D.

– TrulyfreestockPequeñoarchivofotográficorealmentegratuito.


Herramientas:diseñoweb• Archivosdeiconos

– IconBuffetCatálogodeiconosdeexcelentecalidad.Algunosgratuitos.

– FreewaredeIconFactoryCatálogogratuitodeiconosdeunadelasmejorescompañíasdediseñodeiconosprofesionales.

– famfamfamIconsCatálogogratuitodeiconos,muypopular.


Herramientas:diseñoweb• Archivosdevector

– VectorStockCatálogodeilustracionesvectoriales.Concosto.

– DevianArtCatálogodeimágenes,ilustraciones,fondosdepantalla,texturas,etc.Descargasporregistrodeusuario.


Herramientas:diseñoweb• Favicons

– Favicongenerator1.0Generadorenlíneadefaviconsapar2rdeimágenesregulares.

– Favicon.ccHerramientaparadiseñarfavicons,permiteimportarimágenesycorregirlas.


Herramientas:diseñoweb• Inspiración

– AListApart:Webmagazineforpeoplewhomakewebsites

– BoxesandArrows:Thedesignbehindthedesign


Herramientas:programación• EditoresdeHTMLy(X)HTML

– NVU(newview)ConsoporteparaHTML,XHTML,CSSyJava.ConeditorWYSIWYG.Gratuito.

– Notepad++Editordecódigo.ConsoporteparaHTML,XHTML,CSS,asícomoPHP,Pascal,Pearl,entremuchosotros.Gratuitoydecódigoabierto.SineditorWYSIWYG.

– EvrsocFirstPage2006SocwaregratuitoparadesarrollowebcomparableconDreamweaver.


Herramientas:programación• Ayudaparacodificar

– w3schoolTutorialesgratuitosdelaWorldWideWebConsor2um(W3C)

– AcordeóndeHTMLHojasdereferenciaconlase2quetasdeusomáscomúndelhtml.

– AcordeóndeCSSHojadereferenciaconlase2quetasdeusomáscomúnparaprogramarhojasdees2lo.


Herramientas:programación• Formularios

– WufooEditorenlíneadeformulariosbasadosenCSS,configurables.

– IcebrrgEditorenlíneadeformulariosbasadosenCSS.


Herramientas:validadoresdeestándares• Código

– Sintaxisdelcódigo:HTML,(X)HTML,etc.W3CMarkupValida2onService

• Hojasdees2lo– W3CCSSValida2onService

[XHTML‐CSSvalidaonlinealavezelcódigoylaCSS(eninglés)]

• Accesibilidad– Cynthia

ValidaelestándarWAIparalaaccesibilidad.


Herramientas:validadoresdeestándares• Sindicacióndecontenido(RSS)

– W3CFeedValida2onServiceValidalasintaxisdeAtomoRSSfeeds.Esunaherramientaonline,eninglés,quepermitevalidarmedianteURLoinclusióndirectadecódigo.

– FeedburnerMantenimientoalosfeeds.Chicklets.Ordeneinformación.Asociaciónconotrosservicios.Newslewers.

– FeedmysearchConver2rbúsquedasdeGoogleaRSS.


Herramientas:validadoresdeestándares• Disposi2vosmóviles

– TAWmobileOKBasicEsunanalizadordebuenasprác2casparawebmóvil,enconcretocompruebalaadecuacióndeuncontenidomóvilalnivelmobileOKBasicsegúnsedefineenW3CmobileOKBasicTests1.0queestábasadoenW3CMobileWebBestPrac2ces1.0

Esunaherramientaonline,disponibleenespañol,quepermitevalidarmedianteURL.

[Alterna2vaonlineeninglés:W3CmobileOKChecker,permitevalidarmedianteURL]


Herramientas:validadoresdeestándares• Accesibilidad

– TAWValidaautomá2camentelaaccesibilidaddelapágina,señalandoquépuntosrevisarmanualmente.SepuedeseleccionarnivelA,AA,AAA.

– HERAHerramientaonline,disponibleenespañol,quevalidaautomá2camentelaaccesibilidaddelapágina,señalandoquépuntosrevisarmanualmente.

– FirefoxAccessibilityExtensiónExtensióndeFirefoxquepermiteverunlistadoconlasabreviacionesdelapágina,visualizarsinimágenes,sinimágenesdefondo,deshabilitarscripts,deshabilitareventosderatón,deventanaodeformulario,deshabilitarnuevasventanasodeshabilitarCSS.ParaExploreryOperaexistecomoalterna2valaWebAccessibilityToolbar


Herramientas:validadoresdeestándares• Mul2navegador

– BrowsershotsMuestrapantallazosdelaspáginasenprác2camentetodaslasversionesdelosnavegadoresmáscomunesenLinux,WindowsyMac.Estádisponibleeninglés,enversiónonline.

– Totalvalidator(Advanced)Muestrapantallazosdelaspáginasendis2ntosnavegadores(Explorerde5a7,Firefoxde1.0a2.0,Operade7a9,Mozilla,Netscape,Lynx,ect.),sistemasopera2vos(Linux,Mac,Windows)yresolucionesde640x480a1280x1024.Revisalaortograla,losenlacesrotosyproblemasdeaccesibilidad.Esunaherramientaonline,eninglés,aunquesepuededescargarunaversiónlocal.Estádisponibleenespañol,enversiónonline,localoextensiónparaFirefox(queañadelaopciónde"ValidarconTAW"almenúdeHerramientas).


Herramientas:validadoresdeestándares• Mul2navegador

– BrowsrcampEsunaherramientaonline,eninglés,quemuestraunpantallazodelawebenSafariparaMAC.

– IPhoneyAplicaciónlocalsólodisponibleparaMAC.Contrarioaloquepuedaparecer,noesunemulador,sinounentornodenavegaciónwebquesimulalaejecuciónorenderizacióndeu2lidadesypáginasde320por480(o480por320)enuniPhone.


Herramientas:validadoresdeestándares• Resoluciones

– ScreenSizeTesterHerramientaonlineeninglésquepermiterevisarunawebadis2ntasresoluciones.

TienemásopcionesqueTotalValidator.Otraalterna2vaeslaextensiónparaFirefoxBrowserWindowResizerolaWebAccessibilityToolbarparaInternetExploreryOpera.


Herramientas:validadoresdeestándares• Contrastedecolor

– ColourContrastAnalyser2.0Herramientalocalqueevalúasihaysuficientecontrasteentreuncolordefondoyuncolordeprimerplano.SebasaenelalgoritmoContrastRa2opropuestoporlaWorldWideWebConsor2um(W3C)


Herramientas:validadoresdeestándares• Epilepsiaporparpadeoyfotosensi2vidad– TestdeWebaccesible

Herramientaonline,quevalidaGIFanimados,bienindicandolaURLparaqueverifiquetodossusGIFobienindicandolaurldelGIF.


Herramientas:validadoresdeestándares• Pesoyvelocidaddecarga

– PingdomHerramientaonline,disponibleeninglés,queinformadelnúmerototaldeobjetosdeunapágina,supesoyvelocidaddecarga.

– Firebug(YSlow)ExtensiónparaFirefoxqueinformadeltamañodelapáginacacheadaysincachear.

– LoadTimeAnalyzerTemuestragráficamenteel2empodecargadecadaelemento.


Herramientas:validadoresdeestándares• Op2mizaciónparabuscadores(SEO)

– RavenColeccióndeherramientasenlínea,disponibleseninglés,queayudanaposicionarefec2vamenteunsi2oenbuscadoresyahacermejormercadotecnicaenlínea.

– WebsitegraderHerramientaonline,disponibleeninglés,queinformasobrelaefec2vidadmercadotécnicadelsi2o.

– AlexaHerramientaenlínea,disponibleeninglés,queproveeinformaciónacercadelacan2daddevisitasquerecibeunsi2owebdadoypermiteanalizareltráfico.

– GoogletrendsHerramientaenlínea,paracompararlastendenciasestadís2casentresi2osybúsquedasdesi2o.s


Nuestrasherramientasfavoritas

• Webdevelopertoolbar

• GoogleWebmasterTools

• Másinformación– Testeverything

– 100recursosesencialesparadesarrolladoresweb

– Webdeveloperhandbook


Manosalaobra

EscribirparalaWeb







“Laspalabrassoninterfaz”‐ErikaHall


¿Cuálessonsusfunciones?

• Orientar

• Informar

• Produciracciones

• Entablarrelaciones


Laspalabrasdebenser:

• Precisas

• Necesarias

• Consistentes

• Apropiadas


Laspalabrasproducenexperiencias.


Tenerpersonalidad


Tenerpersonalidad


Mo>varaunaacción


Informaroportunamente


Informarsuficientemente


Adaptarsealcontexto


Seramables


Tambiénproducenexperienciasnega>vas


Cosasquenosuenannaturales


Onosonconsistentes


Quehacenperderel>empo


Sonimpersonales


Sonvagas


Inapropiadasenelcontexto


Inapropiadasenelcontexto


Ogroseras


Laspalabrasdebenser:

• Precisas=directo,informa2vo

• Necesarias=breve,sinintroduccionesinnecesarias,apoyándoseenviñetas,tablasencabezados

• Consistentes=unnombreparacadacosaytodasenunsistemaqueconcuerda

• Apropiadas=amigables,personales,ac2vas


Parte4.

Publicatusi#oweb


ProgramaPARTE4:PUBLICATUSITIOWEB(1.5h)• Cómoelegirundominioyelhospedajeadecuado

• Conclusiones

• Ejercicio


Escogiendodominio(domain)• Eselnombredetusi2oenInternet.

– www.madonna.com

• Losvisitantesdebenrecordareldominioparallegaratusi2odirectamente.

• Undominioserenta,nosecompra.


Losbuenosdominios…• Seescogenantesdeempezarunsi2oweb.

• Coincidenconelnombredelsi2oweboconlamarcaquehayquevender.

• Sonsencillosycortos.

• Incluyenpalabrascompletas.


Losbuenosdominios…• Sonpronunciablesynousanpalabrasdi^cilesdeescribir.

• Usannousanousanpocosguiones,guionesbajosopuntos.

• Ayudaracomunicarelgirodetucompañía(.gob.mx,.com,.org,...).


Pormarca

www.apple.comwww.televisa.comy

www.televisa.com.mx


Porpalabraclave

www.songmeanings.com

www.blog.com.mx


Juguetones

del.icio.us

www.elbo.ws


Alternos

www.google.com,www.gooogle.com,www.goooogle.com,...


Alternos

todomimundoacolor.com(bandaNiña)


Alternos

deathbypatch.comyorthoevrakills.com(JohnsonandJohnson,protegiendoalparcheOrthoEvra)


Alternos

www.pithemovie.com(películaPi)


Recomendacionesparadominios• Nocambiesconstantementededominio.

• Usatudominioalmáximo:creadirectoriosysubdominios.

• Monitoreatudominioysufechaderenovación.


Recomendacionesparadominios• Siesposible,compradominiosalternosconnombressimilaresoerroresdeescrituracomunes.

Ejemplo:www.madonna.comywww.madona.com

• Amenosdequehayaunabuenarazón,registratudominioconeldominiotop‐level.comy.organtesde.com.mx.


Recomendacionesparadominios• Asegúratequetudominiofuncioneconwwwysinéste.– Ejemplo:hdp://madonna.comyhdp://www.madonna.com

• Usatudominiodesdeunprincipio:contenidodinámico.

• Vendetudominiocomotumarca:tarjetasdepresentación,pósters,firmasdecorreos,etc.


Escogiendohosting• Eselservicioquetepermitealojarunsi2owebenunservidoryqueestédisponibleenInternetlas24horasdeldía.

• Enespañol:hospedaje.


Escogiendohosting• Serviciosrelacionados:

– Manejarbasesdedatos

– Administrarcorreoselectrónicosparatudominio

– Darestadís2casdeusodelsi2oweb

– Instalarso0ware

– Hacerrespaldosdearchivos


EjemplosEnMéxico• www.sysop.com.mx

• www.hos2ngmx.com

• www.triara.com(prodigy)

• www.alojate.com

• www.xpress.com.mx

Enotrospaíses•hostmonster.com

•www.lunarpages.com

•webhos2ngpad.com

•www.dreamhost.com•www.a2hos2ng.com


¿Quéofrecen?• Espacioendisco(enMbs,enGgs)

• Transferencia/bandwidth

• FTP(FileTransfer)

• Sistemaopera2vo

• Basesdedatos(MySQL)yPHP

• E‐mailconPOP3


Criteriosparaescogerhosting• ¿Quéserviciostendréenmisi2oweb?

• ¿Quérequisitostécnicosnecesito?(Sistemaopera2vo,niveldeacceso)

• ¿Manejarécontenidomul2mediacomovideos,mp3s,galeríasdefotosdealtaresolución?


Criteriosparaescogerhosting• ¿Tendrési2oswebsecundarios?¿Tienda,blogs,foros?

• ¿Usarésoowarelibreodepropietario?

• ¿Necesitocuentasdecorreo,FTPparalosmiembrosdemiorganización?

• ¿Qué2podesoportetécniconecesitoparamantenermisi2oweb?


Recomendacionesparaescogerhosting• Antesdecomprarunhos6ng,conocetusnecesidades.

• Amenosdequetengasunabuenarazón,optaporloshos6ngsextranjeros.

• Manténtusi2owebytudominioconunamismacompañíasiesposible.

• Cuidalacuentamaestradetuhos6ng.


Recomendacionesparaescogerhosting• Situsi2owebusarásoowarelibreasegúratedetenerunplandehos6ngamplioybuensoportetécnico.

• Conocelasrestriccionesdecontenidodetuhos6ng.Serándeacuerdoalasleyesdelpaísenelqueestánlosservidores.

• Aprovechatodotuespacio.Sihacessi2ospequeños,probablementepodrásalojarmásdeunsi2oweb.


CONCLUSIONES


Unbuensitioweb

Esfácildeusar


Unbuensitioweb

Tieneinformaciónprác#ca,simpleybienredactada


Unbuensitioweb

Requieredepocosclicsparanavegarlo


Unbuensitioweb

No2eneseccionesenconstrucciónnicontenidoincompleto


Unbuensitioweb

Nousapop‐ups


Unbuensitioweb

Nousaflash,animaciones,frames(marcos)niimágenesinnecesarias


Unbuensitioweb

Pesapoco(menosde100–150kbs)


Unbuensitioweb

Usa#pograIasgenéricasdisponiblesparacualquierusuario


Unbuensitioweb

Eslegibleaúnycuandoeltextocambiedetamaño


Unbuensitioweb

IncluyearchivosenformatoscomunesDOC,RTF,PDF,JPG,MP3,etc.


Unbuensitioweb

Usaligascontextosdescrip#vosyevitaelusodeindicacionescomo“hazclicaquí”


Unbuensitioweb

Usametadatosparacatalogaryjerarquizarcorrectamentesucontenido


Unbuensitioweb

• Usa(X)htmlparasuestructura

• UsaCSSparasudiseño

• SuprogramaciónesválidaconelW3C


UnbuensitiowebEsaccesible:

– usacolorescontrastantesparafacilitarlalectura

– usae2quetasALTenlasimágenes

– 2eneíndicesdecontenido

– puedeserleído(uoído)aúnsinCCSniimágenes

– proveetodosufuncionamientosinnecesidaddeJavascript

– incluyetextosalterna2vosparatodoelementosnotextual.


Unbuensitioweb

Permitelaretroalimentaciónocontacto,queademás,esaccesibleymonitoreadaconstantemente.


Unbuensitioweb

Tieneunbuscadorqueproduceresultadosrelevantes,especialmenteparalaspáginasmásconsultadas


Ponteenpráctica

Ejercicio


Ejercicio1. Formengruposde5a6personas

2. Analicenelproyecto

3. Iden2fiquen:– Obje2vodelproyecto

– Seccionesprincipales

– Layoutdelapágina

– Erroresyaciertos

4. Diseñensupropiapropuesta

5. Compartansusconclusiones


Imágenesutilizadas• hdp://www.codinghorror.com/blog/images/following‐instruc2ons‐for‐dummies.png• hdp://uponthepath.files.wordpress.com/2008/03/0613‐life‐instruc2ons.jpg• hdp://www.1‐click.jp/• hdp://www.clioonms.org/images/sec2on_under_construc2on.jpg• www.sysfix.co.uk/Stop‐Popups‐Spyware‐Adware.html• hdp://img.photobucket.com/albums/v442/el_amo_de_todo/flash.jpg• hdp://bp3.blogger.com/_J0H‐3Fm0S3U/R0NI8FKCb1I/AAAAAAAAAgo/mABnsA3zsQM/s1600‐h/reir_bascula.jpg• www.ascendercorp.com/porfolioart/verdana.gif• hdp://www.ccs.uodawa.ca/webmaster/templates/assets/img/faq/font‐resize‐tool‐en.jpg• hdp://bp0.blogger.com/_nS7jXbl_qjA/R72B‐btwnqI/AAAAAAAAAEY/b4CY4VrMK8c/s400/heroe.jpgç• hdp://www.simpsonstrivia.com.ar/fotos/superman‐logo.jpg• hdp://www.dotnetjunkies.com/WebLog/images/dotnetjunkies_com/metablog/2085/r_MetaTag%20link%20chart.jpg• hdp://cscie12.dce.harvard.edu/lecture_notes/2007‐08/20080130/handout.html• hdp://blog.wynfor.com/wp‐content/uploads/e‐mail_icon.jpg

Technology

Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares