Uawebtallerbuenositiosweb 1219425820800805 9

Elartedecrear(buenos)si2osweb:diseo,desarrolloyestndares
Taller
Elartedecrear(buenos)sitiosweb: diseo,desarrolloyestndares
MiriamAvila,IsabelVillarrealeIvanSan2esteban info@uaweb.org.mx Monterrey,NuevoLen,Mxico Agosto2008
Objetivos
Conocerelprocesoparacrearunbuensi2oweb Iden2carlasnecesidadesdetuorganizacin Conocerestrategiasyconceptosclavepara organizarypresentarsuinformacin,programar siguiendoestndaresydisearefec2vamente Conocerrecursosgratuitosparacrear,montary mantenerunsi2oweb Sabercmofacilitarquelosbuscadoresveana susi2oycmoatenderasusvisitantes
Parte1.
Ques
unbuensi2oweb?
Programa
PARTE1:QUESUNBUENSITIOWEB(1.5h) Unsi2oweb Partesdeunsi2oweb Unbuensi2oweb
Unsitioweb Esunafuentedeinformacin adaptadaparalaWorldWideWeb (WWW)yaccesiblemedianteun navegadordeInternet. Estainformacinsepresenta generalmenteenformatoHTMLy puedecontenerhiperenlacesaotras pginasweb...

FuenteWikipedia
Unsitioweb
Partesdeunsitioweb
Partesdeunsitioweb
Encabezado
Elencabezadoiden2caaun si2owebdemanerarpida.
Partesdeunsitioweb
Navegacin
Eselreaquecon2enelos hipervnculoshaciaelcontenido delapgina.
Partesdeunsitioweb
Contenidoocuerpo
Eslapartemedulardelsi2o web.
Partesdeunsitioweb
Piedepgina
Usualmentecon2enela informacinquerespaldael si2oweb:desdecondicionesde usohastaavisoslegales.
OK.Entonces
quesunbuensi2oweb?
Unbuensitioweb
representalaesenciadeuna organizacin eslaexpresindeunapersona llevalosproductosyserviciosdeuna organizacinalaInternet resuelvedudas minimizaproblemas ahorradinero generavalorysa2sfaccin
FUNCIONA
Taller
Elartedecrear(buenos)sitiosweb: diseo,desarrolloyestndares
MiriamAvila,IsabelVillarrealeIvanSan2esteban info@uaweb.org.mx Monterrey,NuevoLen,Mxico Agosto2008
Parte2.
Laplaneacin
Cmosecreauna experienciade usuarioenlaweb?
SegnJJGarreP
Estrategia
Alcance Estrategia
Estructura Alcance Estrategia
Esqueleto Estructura Alcance Estrategia
Supercie Esqueleto Estructura Alcance Estrategia
Inves@gar
Investigar
DeLouRosenfeld
Investigarelcontexto
Relacionespersonales Metas Tecnologa Recursoshumanos Recursos
Investigarelcontenido
Elsi2oactual Estructura Anlisisdelcontenido Flujo Benchmarking
Investigaralosusuarios
Estads2cas Entrevistascon dependientes Entrevistasconusuarios
Organizar
Organizar
Organizar
Organizar:clasi@icarynombrar
Considera:
Mutuamenteexcluyentes? Profundooancho
Recurrea:
Cardsor2ng Pruebasconusuarios Benchmarking
Organizar:clasi@icarynombrar
Navegacin
Navegacin
Navegacin
Navegacin
Navegacin
hPp://www.jjg.net/ia/visvocab/
Navegacin
Navegacin
Navegacin
Global
Contextual Local
Qusabemosahora?
Alpapel
Diseodeinformacin
Diseodeinformacin
Diseodeinformacin
Diseodeinformacin
Tiposdecontenido Patronesrepe2dos Importanciadecadaelemento Navegacin/interaccin
Diseodeinformacin
Diseodeinformacin:herramientas
Papelypluma
SoHware
Buenosejemplos
Smashingmagazine.com Konigi.com PaPerntap.com
Parte3.
Manosalaobra
Programa
PARTE3:MANOSALAOBRA(6.5h) Cmoelegirunadministradorde contenido(cms) Buenasprc2casdeHTMLyCSS Diseoweb Herramientasparadisearyprogramar Aprovechalosserviciosweb Escribiendoparalaweb
Administradoresdecontenido(CMS)
Cmoelegirunadministrador decontenido?
Administradoresdecontenido(CMS) So#wareparalapublicaciny organizacindelcontenidodeuna pginadeInternet. Son2lesparasi2osqueusan contenidovariado:

textosyimgenes, audioyvideo, seccionesdinmicasyest2cas.
HerramientasdeunCMS Administracinonlinedelcontenido Fcilimportacinyexportacin Opcionesdeprivacidad,indexacin, SPAM,etc. Editoresdecdigo Manejodeusuariosypermisos Retroalimentacin
Ventajas Puedesadministrartusi2oweba travsdeInternet. Unusuariosinconocimientode programacinpuedeeditar contenidofcilmente. Nonecesitastcnicoso programadoresparahacercambios entusi2oweb.
Comparacin
CMSde propietarios
Licencia Modicaciones Costo Segnlacompaa
CMSopen source
Gratuita Libres,hechaspor usuarios Documentacin Forosdediscusin Soporteexterno
Soportetcnico
Centrodeatencin Centrodeservicio Contratacinde soporte
Ejemplos
MicrosocSharepoint Wordpress
CMSdepropietarios Microsoc Sharepoint Documentum EM3 Ingeniux
CMSopensource Joomla! Drupal PHPNuke MovableType Wordpress Lyceum
MicrosoftSharepoint
Wordpress
CriteriosparaseleccionarCMS Qu2podesi2oplaneas construir? Qutangrandeplaneasqueser tusi2o? Tendrsinformacinest2ca, dinmica,unaovariassecciones?
CriteriosparaseleccionarCMS Tendrsoperacioneso transaccionesenlnea? Culessonlos2posdecontenido quepublicars?

Arkculos,fotogralas,pistasdesonido, videos,
Necesitashacermodicaciones par2cularesparatusi2o?
CriteriosparaseleccionarCMS Quherramientaspar2culares necesitarsentusi2o?

RSS,forosdediscusin,blogs, calendarios,podcasts,
Cuntoscolaboradoresde contenidotendrtusi2o?Conqu presupuestocuentas?
Buenasprcticas
HTML,(X)HTML,CSS,etc.
QuesXHTML? Esellenguajebsicoparala programacinweb. Manejae2quetasencorchetes agudos(<y>),consusrespec2vos atributosentrecomillas().

Ejemplodeinsercindeunaimagen: <imgsrc=foto.jpgwidth=500px/>
QuesXHTML? E2quetasdeunalnea
Ejemplo: <imgsrc=foto.jpg>
E2quetasdeaperturaycierre
Ejemplo: <p>Estoesunprrafo.</p>
DelHTMLalXHTML ElXHTML2enecdigomsestricto ymejorasensusintaxis.

Minsculas Cierredee2quetasconommitag(/>) obligatorio Correctajerarquayanidacin (nes1ng)delase2quetas YdejareldiseoparaelCSS
EstructuraXHTML
<html></html> Todoelespaciodeldocumento dondehaycdigo <head></head> Laseccindedatosacerca deldocumento <Itle></Itle> Elktulodelapgina <body></body> Elcuerpo:estructura,texto, imgenes,videos,etc.
CmomejorartucdigoXHTML
ValidaconherramientasdelW3Cantes depublicar. Esmsfcilhacerlosiusaslasbarrasde herramientasdedesarrollowebquete recomendamos.
Herramienta: hwp://www.w3.org/QA/Tools/#validators
Usalase2quetassegnlal2marevisin deXHTML
Ejemplo: Usare2quetasXHTMLcomostrong,em, header,p,br. Incorrecto: Usare2quetasHTMLcaducascomofont,u,s, b,i,name,menu,center. Herramienta:Catlogodee2quetasdelaW3C hwp://www.w3schools.com/tags/default.asp
Instalavariosnavegadores,almenos InternetExploreryFirefox. Revisatupginaendiversosnavegadores endis2ntasversiones.
Herramienta:UsaBrowsershots (hwp://browsershots.org)pararevisar dis2ntosnavegadoresyversiones.
Qunavegadoresusan?
Qutamaosdepantallausan?
CmomejorartucdigoXHTML Usalae2queta<div>para estructurartupgina.Usalastablas (<table>)paraorganizarcuadrculas dedatos.

Curso:Cmohacerunapelculadesdetucelular Dirigidoa: Duracin: Horario: Costo: Jvenesyadultos Del9al20desep2embre 19a21horas,exceptodomingos $200pesosporsesin
Porqunodisearcontablas? Lastablassonparapresentardatos Usarlasenestructuraimplicamenos accesibilidad Hacenquelossi2osnosean exibles
Incluyeunadescripcinenlae2queta ALTparalasimgenescuandostas tenganinformacinoilustrentexto.
Ejemplo: <imgsrc=arbol.jpgalt=Fotograladeun rbol/> Incorrecto:<imgsrc=arbol.jpg/> Incorrecto: <imgsrc=borde.jpgalt=Esteesunborde decora2vo/> Ejemplo:<imgsrc=borde.jpgalt=/>
Usalase2quetas<p>y</p>paradividir prrafosdetexto.
Ejemplo:<p>Estoesunprrafo.</p> Incorrecto:Estoesunprrafo.<br/><br/>
UsaelcdigodemanerasemnIca. Cadae2quetadeXHTML2eneuna prioridadparalosservidoresde bsqueda.
Denetusktulosatravsdelas e2quetas<h1>,<h2>,<h3>,<h4>, <h5>y<h6>segnsuimportancia.
Ejemplo:<h2>Estoesunsubktulo</h2> Incorrecto:<strong><em>Estoesun subktulo</em></strong>
Evitacrearktuloscon<strong>y 2pogralamsgrande.
CmomejorartucdigoXHTML Asegratedesealarenel DocumentType(DTD)larevisinde XHTMLquesigues. Escribelosatributosdeuna e2quetasiempreenelmismo orden.
CmomejorartucdigoXHTML Asegratequelainformacin esencialdetusi2owebestenlos primeros3KBs. Dividetucdigoenapartados usandocomentarios(<!)

Ejemplo:Encabezado,cuerpo,men. <!encabezado>
CmomejorartucdigoXHTML Construyesi2osuidosyexibles,y trabajaconunidadesdeproporcin.

Herramienta: EmCalculatorhwp://riddle.pl/emcalc/ Depuntosypicasaems. Depixelesaporcentajes.
CmomejorartucdigoXHTML Usaplan2llasdecdigo(comolas deDreamweaver)parafacilitar rediseosoactualizacionesmasivas.
QueselCSS? Esellenguajeparadiseowebque permitemodicarloselementos XHTMLdenidosenunapgina electrnica. Estorganizadoendocumentos llamadoshojasdees2lo (stylesheets).
QueselCSS? Eselcomplementodellenguaje XHTML. Podemosllamarlocomorecurso externoenelencabezadodeuna pgina(enlaseccinhead)oen cadae2quetaquenecesitemos(en laseccinbody).
CSSyeldiseo Unapginapuedecambiarsuhoja dees2loytenerundiseo completamentedis2ntoaunquelos elementosdeXHTMLnosean alterados.

Ejemplo: ZenGardenwww.csszengarden.com
Unahojadees2lopuedeserun diseocompletamentedis2nto.
XHTMLeselqu,CSSeselcmo
ConCSSseparaseldiseodelaestructura parahacerloexible.
Ejemplo: ZenGarden hwp://www.csszengarden.com/
Benecios: - Disminuireltamaodelapgina - Diseoexible(mismocontenido,dis2ntos diseos) - Mejorindexacin
VentajasdeusarCSS XHTML
Seencargadelaestructuradeuna pginawebydeneloselementosque habrenella:texto,tablas,imgenes, objetos.
CSS
ModicaloselementosXHTML,ylesda caracters2cascomocolor,tamao, 2pograla,posicin,alineacin,e imgenesdefondo.
EstructuradelCSS
<styletype="text/css"> .border{ border:4pxsolid#CCCCCC; } #encabezado{ color:#009966; backgroundcolor:#FFFFFF; fontsize:2em; } </style>
EstructuradelCSS
EtiquetasdeCSS
Cuatro2posdee2quetas(selectores):
ids(#nombre) clases(.nombre), selectorescontextuales(nombre) ounacombinacindelosanteriores.
EtiquetasdeCSS
IDs(#nombre) Paraseccionesnicascomolasbarrasde navegacinyelencabezado. Esusadoprincipalmentecon<div>,como espaciosrectangulares.
Ejemplo: #encabezado{ width:80%; } ydespusllamarloenelcdigoXHTML: <divid=encabezado>
EtiquetasdeCSS
Clases(.nombre) Paraes2losqueserepitenmsdeunavezen unapgina,comoformatodektulos,ligas, botonesytablas.
Ejemplo:
.h2{ color:#5A5A5A;backgroundcolor:#EEEEEE; padding:.8em;border:1pxsolid#CCCCCC; } ydespusllamarloenelcdigoXHTML: <spanclass=h2>
EtiquetasdeCSS
Selectorescontextuales(nombre) SonelementosdeXHTML(<entrebrackets>) quepuedensermodicadasconCSS.
Ejemplo:
img{ border:0px; } ul{ liststyletype:square; }
EtiquetasdeCSS
Combinaciones Losdis2ntosselectorespuedencombinarsepara haceres2loslocalesenlaspginas.
Ejemplo:
ul.bullet{ liststyleposi2on:outside; } ul.nobullet{ liststyletype:none; }
AlgunosatributosdeCSS
font:(nombredela2pograla) color:#FF0000;(colorhexadecimal) backgroundcolor:#FFFFFF;(colorhexadecimal) textalign:lec,right,center textdecoraIon:blink,linethrough,underline,none borderstyle:solid,double,dowed,dashed padding:(nmero,enpx,em,etc.) margin:(nmeroenpx,em,etc.) oat:lec,right,none
Estiloslocalesyexternos Comoelatributostyleenlae2quetade
unelemento,demaneralocal.
Ejemplo: <divstyle=backgroundcolor:#000000;>
Comounahojadees2loexterna, importadacone2quetasencampos extrasdeWebability.

Ejemplo: <linkrel="stylesheethref=es2lo.css"type="text/css" />
Estiloslocalesyexternos
Comounahojadees2loembebida,con todoslosatributosusados.
Ejemplo: <styletype="text/css"> .border{ border:4pxsolid#CCCCCC; } .2tlev202{ color:#FFFFFF;backgroundcolor:#CC0000; } </style> Luego,enXHTML:<divclass=border>
HerenciaenCSS
Laspropiedadesdeunae2quetase heredanalase2quetasquesta con2ene.
Ejemplo: Siindicamoselcolornegroparala2pograladel men #menu{color:#000000;} todoloqueestadentro(prrafos,ktulos, vietas)tendrelcolornegro,amenosdeque sealemosotracosa.
Algunase2quetas(comomargin,paddingy border)noheredansuspropiedades.
HerenciaenCSS
Cuandotenemosvariasindicacionespara unmismoelemento,lal2maeslaque setomaencuenta.
Ejemplo: h1{border:0;} h1{border:1pxsolid#cccccc;}
Diseoweb
Reglasbsicas: Cmopiensanlosusuarios?
Diseoweb:reglasbsicas
Losusuarioswebnosonmuy diferentesdelosclientesde unaIendaenlavidareal.
Losclicsnacendelaatraccin y/olauIlidad.
Losusuarioswebaprecianla calidadylacredibilidad.
Losusuariosnoleen.Escanean.
Losusuarioswebson impacientesyesperan gra2cacionesinstantneas.

unsi2odebesa2sfacerlas expecta2vasdelosvisitantes
Losusuarioswebnosiempre tomanlasmejoresdecisiones.
Losusuarioswebconfanensu intuicin.
Losusuarioswebdeseantener elcontrolsobresunavegador.
Diseoweb
Poreso
Lasreglasdeoro
Diseoweb:lasreglasdeoro
Nohagaspensaralosusuarios
Unapginadebeserobviayexplicarseas misma1. Lanavegacindebeserclara,conpistas visualesadecuadasyligasfcilmente reconocibles.
Del libro Dont make me think de Steve Krugs, primera ley de la usabilidad.
Nohagaspensaralosusuarios
Losusuariosen2endenmejorlossi2osweb diseadosenpatronesenF2. Reduciendolaincer2dumbredeunusuario anteelsi2o,ayudarsaquelosusuarios cumplansusobje2vos.Silosusuariosno encuentransucamino,teabandonarn.
Del artculo F-Shaped Pattern For Reading Web Content de Jakob Nielsen's
Usuarioscuriososeimpacientes =cerocomplicaciones
Ofreceserviciossencillos,prc2cosydirectos Lasa2sfaccineselmejorgancho Aumentalaconanzadelosusuarios, gra2candosusaccionescorrectasy ayudandoaresolverlasincorrectas
Unsi2owebformapartedela imagencorporaIvadeuna organizacin

Sudiseodebeseratrac2voynoexagerado Debecontarconunapaletadecolor apropiada,tantoalobje2voquesedesea perseguircomoaldelaimagendela organizacin
Creaundiscursovisualclaro
Organiza Paraproveerunaestructuralimpia, consistente,yconnavegacinclara Economiza Hazmsconmenosempleandolosprincipios desimplicidad,claridad,dis2ncin,ynfasis Comunica Empataeldiseoalaaudiencia,hazlolegible
Diseoweb:lasreglasdeoro Jerarquizaysacaelmejorprovecho delospuntosfocales

Organizaapropiadamentelapginaprincipal delsi2o Ofrecepistasqueevitenincer2dumbre Nodistraigasalosusuariosconimgenes, efectosoaccionesinnecesarias Diseapensandoenelusuario
Jerarquaypuntosfocales
hwp://www.subtrac2on.com/
Escues2ndesimplicidad
Lasimplicidadtraeelzenaunsi2o Unusuariosobretodobuscainformacin Ylosusuarios,preerenversi2osbasadosen texto
Notemasalespacioenblanco
Elespacioblancoreerealasporcionesdeespacio quesecreanentreloselementos Elbuenusodeesteespaciogeneraequilibrio, favorecelalecturaycreaunacomposicinest2ca Lasestructurascomplejassevuelvenordenadascon espacionega2vosuciente Separaloselementosvisuales,ayudaagenerar jerarqua
Unsi1osimpleybienequilibrado
hwp://www.subtrac2on.com/
Eligebienaloselementos estelares
Ofrecealosusuariosunavisinrpida,clara ydirectadelasfuncionesdisponiblesentu si2o.Esunabuenaprc2cadediseode interfacesyesunagarankadesa2sfaccin detususuarios.
Unestelarconnfasis
hwp://twiwer.com/
Evitaelexcesodeinformacin
Lagentelee25%mslentoenpantallaque enpapel El79%preerenescanearvisualmentela informacinenvezdeleerlaadetalle Losusuariosleernsloel20%deltextoen unapginapromedio
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
Escribeparaquetelean (yen2endan)
Elwebnoeslomismoquelaprensa Eles2lodelaredaccindebeserconcisoy preciso Vedirectoaloshechos Escribeprrafoscortos,conelementosen listasyktulosclaros
Unsi1opreciso
http://es.facebook.com/
Loselementosconvencionales sontusamigos
Usapatronesyelementosalosquelos usuariosyaestnacostumbrados Lospatronesdisminuyenlacurvade aprendizajeporquelagenteyasabeque hacer,cundoyquesperaracambio Lasconvencionesayudanagenerar conanzaycredibilidad Cumplelasexpecta2vasdelosusuarios
Usaelementosconvencionalesvscrea1vidad
http://www.usolab.com/wl/images/atm-eco-feedback.jpg
Prueba,pruebayvuelveaprobar
Todoproyectowebdebeprobarse,esuna leynaturaldelaspruebasdeusabilidad Hacerpruebasantes,durantey frecuentementeaunsi2osloayudarna mejorarcadaaspectodelsi2o Erraresmalo,peoresnosaberloodejarlo Probaresunprocesoitera2vo Eldiseador,desarrolladorocliente,noson elusuario.Pruebaconusuariosreales.
Diseoweb
Tendencias
Diseoweb:tendencias
Estructurassimples
Usaestructurassimplesde1a3columnas Losdiseadoresentendieronqueundiseo simplefuncionamejor(pocoselementos, bienorganizados) Losdiseosengeneralsepuedenentender alprimervistazo,sintenerqueestar vagandoparaentenderelconceptogeneral. Estoesmuchomstranquilizanteyefec2vo encues2ndenavegacinorientadaqueen aosanteriores.
Diseoweb:tendencias
Estructurassimples
Alistapart
8020Publishing
Diseoweb:tendencias
Diseocentrado
Eldiseocentradoofrece:conanza, balance,simpleza,zen. Lospatronesdediseoalineadoala izquierdacadavezsonmenoscomunes,lo mismoquelasestructuraslquidas.
Diseoweb:tendencias
Diseodelcontenido
Laarquitecturadeinformacintrajoala concienciapopularelsen2dodeuncontenido bienestructurado Actualmentehaymsatencinhaciacmolas cosassepresentanentrminosdecontenido, queenelmaquillaje(backgrounds,coloresy formas) Hayqueseguirelprincipioatraelavistadel usuarioalcontenido Losdiseosexitososdehoyendahacenverbien alcontenidonoaldiseador Losdiseadoressoncomunicadoresno decoradores
Diseoweb:tendencias Efectos3D,efectos3Dyms efectos3D

Eldiseodeestapocaest enmarcadoenefectos:degradados, sombras,esquinasredondas,iconos tridimensionales,etctera. Sinembargoesinteresanteverqueel resultadodeestatendenciasimplic eldiseoengeneralenvezde saturarlo,dandopasoaelementos destacadospuntuales
Diseoweb:tendencias
Reejosysombras
Anunciosdeestrella
Diseoweb:tendencias
Fondosclarosoneutros
Lamayoradelossi2os2enenfondosplanos, casisiempreblancosodegradadosengrises. Estagamaneutral,simple,yrelajadaesuna baseperfectaparacoloresvibrantes.
Diseoweb:tendencias
Fondosclarosoneutros
AbstractsManager
AnthonyPhillips
TDGIntegrated
Artypapers
Diseoweb:tendencias
Tintesdecolorbrillantesusados conprecisin
Eldiseodelosl2mosaossobresalepor loscoloresjuvenilesyvibrantes,noslopara losblogs,sinoparasi2oscomerciales importantes. LaWeb2.0trajoalastendenciaenmodalos verdes,anaranjados,azulesyvioletas aplicadosagrandesktulos,iconosenormesy destellosdecoloralolargodelossi2os.
Diseoweb:tendencias
Tintesbrillantes
Iconosllama1vos
Diseoweb:tendencias
Espacioblanco
Elespacioblancononecesariamentedebe serblanco,simplementedeserunespacio.
Diseoweb:tendencias
Textogrande
Lostextosmsimportantedelapginason msgrandesqueeltextoregular
Woothemes
JasonSantaMaria
Herramientas
Paradisearyprogramar
Herramientas:diseoweb
Editoreswebdeimgenes
Pixenate Editorgratuitodefotogralasenlnea. PicnikenFirefox,PicnikenFacebook Herramientagratuitaenlneadeedicinde imgenes,funcionacomoextensinde FirefoxoaplicacinenFacebook. Picasa Herramientagratuitaparaeditar fotogralas,yaseaenlneaoentu computadora.Permitecrearlbumesde distribucindeimgenes.
Paletasdecolor
ProcolorpalewesocwaredeColourLovers Herramientacompleksimaparaelegir coloresypaletas.Loscolorescasinuncason websafe. 4096Colorwheel Herramientadeseleccindecoloresconun compara2vodecoloreswebsafe,web smartyunsafe. ColorcubedemoreCrayons Herramientadeseleccindecoloresweb smartportonalidad.
Archivosdeimgenes
Gewyimages Elmsgrandeycompletoarchivofotogrcoy deilustracionesenlaweb.Concosto. Stock.xchng Amplioarchivogratuitodefotografasdeuso libre.Requiereregistro. Pixelperfectdigital Buenarchivodefotografasdigitalesgratuitas, tambin2enetexturasygrficos3D. Trulyfreestock Pequeoarchivofotogrcorealmentegratuito.
Archivosdeiconos
IconBuet Catlogodeiconosdeexcelentecalidad. Algunosgratuitos. FreewaredeIconFactory Catlogogratuitodeiconosdeunadelas mejorescompaasdediseodeiconos profesionales. famfamfamIcons Catlogogratuitodeiconos,muypopular.
Archivosdevector
VectorStock Catlogodeilustracionesvectoriales.Concosto. DevianArt Catlogodeimgenes,ilustraciones,fondosde pantalla,texturas,etc.Descargasporregistrode usuario.
Favicons
Favicongenerator1.0 Generadorenlneadefaviconsapar2rde imgenesregulares. Favicon.cc Herramientaparadisearfavicons,permite importarimgenesycorregirlas.
Inspiracin
AListApart:Webmagazineforpeoplewho makewebsites BoxesandArrows:Thedesignbehindthe design
Herramientas:programacin
EditoresdeHTMLy(X)HTML
NVU(newview) ConsoporteparaHTML,XHTML,CSSyJava. ConeditorWYSIWYG.Gratuito. Notepad++ Editordecdigo.ConsoporteparaHTML, XHTML,CSS,ascomoPHP,Pascal,Pearl,entre muchosotros.Gratuitoydecdigoabierto.Sin editorWYSIWYG. EvrsocFirstPage2006 Socwaregratuitoparadesarrolloweb comparableconDreamweaver.
Ayudaparacodicar
w3school TutorialesgratuitosdelaWorldWideWeb Consor2um(W3C) AcordendeHTML Hojasdereferenciaconlase2quetasdeuso mscomndelhtml. AcordendeCSS Hojadereferenciaconlase2quetasdeusoms comnparaprogramarhojasdees2lo.
Formularios
Wufoo EditorenlneadeformulariosbasadosenCSS, congurables. Icebrrg EditorenlneadeformulariosbasadosenCSS.
Herramientas:validadoresdeestndares Cdigo
Sintaxisdelcdigo:HTML,(X)HTML,etc.
W3CMarkupValida2onService
Hojasdees2lo
W3CCSSValida2onService [XHTMLCSSvalidaonlinealavezelcdigoyla CSS(eningls)]
Accesibilidad
Cynthia ValidaelestndarWAIparalaaccesibilidad.
Herramientas:validadoresdeestndares
Sindicacindecontenido(RSS)
W3CFeedValida2onService ValidalasintaxisdeAtomoRSSfeeds.Es unaherramientaonline,eningls,que permitevalidarmedianteURLo inclusindirectadecdigo. Feedburner Mantenimientoalosfeeds.Chicklets. Ordeneinformacin.Asociacincon otrosservicios.Newslewers. Feedmysearch Conver2rbsquedasdeGoogleaRSS.
Herramientas:validadoresdeestndares Disposi2vosmviles
TAWmobileOKBasic Esunanalizadordebuenasprc2casparaweb mvil,enconcretocompruebalaadecuacinde uncontenidomvilalnivelmobileOKBasic segnsedeneenW3CmobileOKBasicTests 1.0queestbasadoenW3CMobileWebBest Prac2ces1.0 Esunaherramientaonline,disponibleen espaol,quepermitevalidarmedianteURL. [Alterna2vaonlineeningls:W3CmobileOK Checker,permitevalidarmedianteURL]
Herramientas:validadoresdeestndares
Accesibilidad
TAW Validaautom2camentelaaccesibilidaddela pgina,sealandoqupuntosrevisarmanualmente. SepuedeseleccionarnivelA,AA,AAA. HERA Herramientaonline,disponibleenespaol,que validaautom2camentelaaccesibilidaddelapgina, sealandoqupuntosrevisarmanualmente. FirefoxAccessibilityExtensin ExtensindeFirefoxquepermiteverunlistadocon lasabreviacionesdelapgina,visualizarsin imgenes,sinimgenesdefondo,deshabilitar scripts,deshabilitareventosderatn,deventanao deformulario,deshabilitarnuevasventanaso deshabilitarCSS. ParaExploreryOperaexistecomoalterna2valaWeb AccessibilityToolbar
Herramientas:validadoresdeestndares Mul2navegador
Browsershots Muestrapantallazosdelaspginasenprc2camentetodas lasversionesdelosnavegadoresmscomunesenLinux, WindowsyMac.Estdisponibleeningls,enversin online. Totalvalidator(Advanced) Muestrapantallazosdelaspginasendis2ntos navegadores(Explorerde5a7,Firefoxde1.0a2.0,Opera de7a9,Mozilla,Netscape,Lynx,ect.),sistemasopera2vos (Linux,Mac,Windows)yresolucionesde640x480a 1280x1024. Revisalaortograla,losenlacesrotosyproblemasde accesibilidad. Esunaherramientaonline,eningls,aunquesepuede descargarunaversinlocal. Estdisponibleenespaol,enversinonline,localo extensinparaFirefox(queaadelaopcinde"Validar conTAW"almendeHerramientas).
Herramientas:validadoresdeestndares Mul2navegador
Browsrcamp Esunaherramientaonline,eningls,quemuestraun pantallazodelawebenSafariparaMAC. IPhoney AplicacinlocalslodisponibleparaMAC.Contrario aloquepuedaparecer,noesunemulador,sinoun entornodenavegacinwebquesimulalaejecucin orenderizacindeu2lidadesypginasde320por 480(o480por320)enuniPhone.
Herramientas:validadoresdeestndares Resoluciones
ScreenSizeTester Herramientaonlineeninglsquepermiterevisar unawebadis2ntasresoluciones. TienemsopcionesqueTotalValidator.Otra alterna2vaeslaextensinparaFirefoxBrowser WindowResizerolaWebAccessibilityToolbarpara InternetExploreryOpera.
Herramientas:validadoresdeestndares Contrastedecolor
ColourContrastAnalyser2.0 Herramientalocalqueevalasihaysuciente contrasteentreuncolordefondoyuncolorde primerplano.SebasaenelalgoritmoContrastRa2o propuestoporlaWorldWideWebConsor2um (W3C)
Herramientas:validadoresdeestndares Epilepsiaporparpadeoy fotosensi2vidad

TestdeWebaccesible Herramientaonline,quevalidaGIFanimados,bien indicandolaURLparaqueveriquetodossusGIFo bienindicandolaurldelGIF.
Herramientas:validadoresdeestndares Pesoyvelocidaddecarga
Pingdom Herramientaonline,disponibleeningls,que informadelnmerototaldeobjetosdeunapgina, supesoyvelocidaddecarga. Firebug(YSlow) ExtensinparaFirefoxqueinformadeltamaodela pginacacheadaysincachear. LoadTimeAnalyzer Temuestragrcamenteel2empodecargadecada elemento.
Herramientas:validadoresdeestndares Op2mizacinparabuscadores(SEO)
Raven Coleccindeherramientasenlnea,disponiblesen ingls,queayudanaposicionarefec2vamenteun si2oenbuscadoresyahacermejormercadotecnica enlnea. Websitegrader Herramientaonline,disponibleeningls,que informasobrelaefec2vidadmercadotcnicadel si2o. Alexa Herramientaenlnea,disponibleeningls,que proveeinformacinacercadelacan2daddevisitas querecibeunsi2owebdadoypermiteanalizarel trco. Googletrends Herramientaenlnea,paracompararlastendencias estads2casentresi2osybsquedasdesi2o.s
Nuestrasherramientasfavoritas Webdevelopertoolbar GoogleWebmasterTools

Msinformacin
Testeverything 100recursosesencialesparadesarrolladoresweb Webdeveloperhandbook
Manosalaobra
Escribirparala Web
Laspalabrasson interfaz
ErikaHall
Culessonsusfunciones?
Orientar Informar Produciracciones Entablarrelaciones
Laspalabrasdebenser:
Precisas Necesarias Consistentes Apropiadas
Laspalabras producen experiencias.
Tenerpersonalidad
Tenerpersonalidad
Mo>varaunaaccin
Informaroportunamente
Informarsucientemente
Adaptarsealcontexto
Seramables
Tambinproducen experiencias nega>vas
Cosasquenosuenannaturales
Onosonconsistentes
Quehacenperderel>empo
Sonimpersonales
Sonvagas
Inapropiadasenelcontexto
Inapropiadasenelcontexto
Ogroseras
Laspalabrasdebenser:
Precisas=directo,informa2vo Necesarias=breve,sinintroducciones innecesarias,apoyndoseenvietas, tablasencabezados Consistentes=unnombreparacada cosaytodasenunsistemaque concuerda Apropiadas=amigables,personales, ac2vas
Parte4.
Publicatusi#oweb
Programa
PARTE4:PUBLICATUSITIOWEB(1.5h) Cmoelegirundominioyelhospedaje adecuado Conclusiones Ejercicio
Escogiendodominio(domain) Eselnombredetusi2oenInternet.
www.madonna.com
Losvisitantesdebenrecordarel dominioparallegaratusi2o directamente. Undominioserenta,nosecompra.
Losbuenosdominios Seescogenantesdeempezarun si2oweb. Coincidenconelnombredelsi2o weboconlamarcaquehayque vender. Sonsencillosycortos. Incluyenpalabrascompletas.
Losbuenosdominios Sonpronunciablesynousan palabrasdi^cilesdeescribir. Usannousanousanpocosguiones, guionesbajosopuntos. Ayudaracomunicarelgirodetu compaa(.gob.mx,.com,.org,...).
Pormarca
www.apple.com
www.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
(bandaNia)
Alternos
deathbypatch.comy orthoevrakills.com
(JohnsonandJohnson,protegiendoal parcheOrthoEvra)
Alternos
www.pithemovie.com
(pelculaPi)
Recomendacionesparadominios Nocambiesconstantementede dominio. Usatudominioalmximo:crea directoriosysubdominios. Monitoreatudominioysufechade renovacin.
Recomendacionesparadominios Siesposible,compradominios alternosconnombressimilareso erroresdeescrituracomunes.

Ejemplo:www.madonna.comy www.madona.com
Amenosdequehayaunabuena razn,registratudominioconel dominiotoplevel.comy.organtes de.com.mx.
Recomendacionesparadominios Asegratequetudominiofuncione conwwwysinste.

Ejemplo:hdp://madonna.comy hdp://www.madonna.com
Usatudominiodesdeunprincipio: contenidodinmico. Vendetudominiocomotumarca: tarjetasdepresentacin,psters, rmasdecorreos,etc.
Escogiendohosting Eselservicioquetepermitealojar unsi2owebenunservidoryque estdisponibleenInternetlas24 horasdelda. Enespaol:hospedaje.
Escogiendohosting Serviciosrelacionados:
Manejarbasesdedatos Administrarcorreoselectrnicospara tudominio Darestads2casdeusodelsi2oweb Instalarso0ware Hacerrespaldosdearchivos
Ejemplos
EnMxico
www.sysop.com.mx www.hos2ngmx.com www.triara.com (prodigy) www.alojate.com www.xpress.com.mx
Enotrospases
hostmonster.com www.lunarpages.com webhos2ngpad.com www.dreamhost.com www.a2hos2ng.com
Quofrecen? Espacioendisco(enMbs,enGgs) Transferencia/bandwidth FTP(FileTransfer) Sistemaopera2vo Basesdedatos(MySQL)yPHP EmailconPOP3
Criteriosparaescogerhosting
Quserviciostendrenmisi2oweb? Qurequisitostcnicosnecesito? (Sistemaopera2vo,niveldeacceso) Manejarcontenidomul2mediacomo videos,mp3s,galerasdefotosdealta resolucin?
Criteriosparaescogerhosting
Tendrsi2oswebsecundarios?Tienda, blogs,foros? Usarsoowarelibreodepropietario? Necesitocuentasdecorreo,FTPparalos miembrosdemiorganizacin? Qu2podesoportetcniconecesito paramantenermisi2oweb?
Recomendacionesparaescogerhosting
Antesdecomprarunhos6ng,conocetus necesidades. Amenosdequetengasunabuenarazn, optaporloshos6ngsextranjeros. Mantntusi2owebytudominiocon unamismacompaasiesposible. Cuidalacuentamaestradetuhos6ng.
Recomendacionesparaescogerhosting
Situsi2owebusarsoowarelibre asegratedetenerunplandehos6ng amplioybuensoportetcnico. Conocelasrestriccionesdecontenidode tuhos6ng.Serndeacuerdoalasleyes delpasenelqueestnlosservidores. Aprovechatodotuespacio.Sihacessi2os pequeos,probablementepodrsalojar msdeunsi2oweb.
CONCLUSIONES
Unbuensitioweb
Esfcildeusar
Unbuensitioweb
Tieneinformacinprc#ca, simpleybienredactada
Unbuensitioweb
Requieredepocosclicspara navegarlo
Unbuensitioweb
No2ene
seccionesenconstruccin nicontenidoincompleto
Unbuensitioweb
Nousapopups
Unbuensitioweb
Nousa
ash,animaciones,frames (marcos)niimgenes innecesarias
Unbuensitioweb
Pesapoco
(menosde100150kbs)
Unbuensitioweb
Usa#pograIasgenricas
disponiblesparacualquierusuario
Unbuensitioweb
Eslegible
anycuandoeltextocambiedetamao
Unbuensitioweb
Incluyearchivosen formatoscomunes
DOC,RTF,PDF,JPG,MP3,etc.
Unbuensitioweb
Usaligascontextosdescrip#vos yevitaelusodeindicaciones comohazclicaqu
Unbuensitioweb
Usametadatosparacatalogary jerarquizarcorrectamentesu contenido
Unbuensitioweb Usa(X)htmlparasuestructura UsaCSSparasudiseo Suprogramacinesvlidaconel W3C
Unbuensitioweb Esaccesible:
usacolorescontrastantespara facilitarlalectura usae2quetasALTenlasimgenes 2enendicesdecontenido puedeserledo(uodo)ansinCCS niimgenes proveetodosufuncionamientosin necesidaddeJavascript incluyetextosalterna2vosparatodo elementosnotextual.
Unbuensitioweb
Permitelaretroalimentacino contacto,queadems,es accesibleymonitoreada constantemente.
Unbuensitioweb
Tieneunbuscadorqueproduce resultadosrelevantes, especialmenteparalaspginas msconsultadas
Ponteenprctica
Ejercicio
Ejercicio 1. Formengruposde5a6personas 2. Analicenelproyecto 3. Iden2quen:

Obje2vodelproyecto Seccionesprincipales Layoutdelapgina Erroresyaciertos
4. Diseensupropiapropuesta 5. Compartansusconclusiones
Imgenesutilizadas
hdp://www.codinghorror.com/blog/images/followinginstruc2onsfordummies.png hdp://uponthepath.les.wordpress.com/2008/03/0613lifeinstruc2ons.jpg hdp://www.1click.jp/ hdp://www.clioonms.org/images/sec2on_under_construc2on.jpg www.sysx.co.uk/StopPopupsSpywareAdware.html hdp://img.photobucket.com/albums/v442/el_amo_de_todo/ash.jpg hdp://bp3.blogger.com/_J0H3Fm0S3U/R0NI8FKCb1I/AAAAAAAAAgo/mABnsA3zsQM/s1600h/reir_bascula.jpg www.ascendercorp.com/porfolioart/verdana.gif hdp://www.ccs.uodawa.ca/webmaster/templates/assets/img/faq/fontresizetoolen.jpg hdp://bp0.blogger.com/_nS7jXbl_qjA/R72BbtwnqI/AAAAAAAAAEY/b4CY4VrMK8c/s400/heroe.jpg hdp://www.simpsonstrivia.com.ar/fotos/supermanlogo.jpg hdp://www.dotnetjunkies.com/WebLog/images/dotnetjunkies_com/metablog/2085/r_MetaTag%20link%20chart.jpg hdp://cscie12.dce.harvard.edu/lecture_notes/200708/20080130/handout.html hdp://blog.wynfor.com/wpcontent/uploads/email_icon.jpg

Uawebtallerbuenositiosweb 1219425820800805 9

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Uawebtallerbuenositiosweb 1219425820800805 9

Uploaded by

Copyright:

Available Formats

Elartedecrear(buenos)si2osweb:diseo,desarrolloyestndares

Unsitioweb Esunafuentedeinformacin adaptadaparalaWorldWideWeb (WWW)yaccesiblemedianteun navegadordeInternet. Estainformacinsepresenta generalmenteenformatoHTMLy puedecontenerhiperenlacesaotras pginasweb...

Cmosecreauna experienciade usuarioenlaweb?

Estructura Alcance Estrategia

Esqueleto Estructura Alcance Estrategia

Supercie Esqueleto Estructura Alcance Estrategia

Relacionespersonales Metas Tecnologa Recursoshumanos Recursos

Elsi2oactual Estructura Anlisisdelcontenido Flujo Benchmarking

Estads2cas Entrevistascon dependientes Entrevistasconusuarios

Administradoresdecontenido(CMS) So#wareparalapublicaciny organizacindelcontenidodeuna pginadeInternet. Son2lesparasi2osqueusan contenidovariado:

HerramientasdeunCMS Administracinonlinedelcontenido Fcilimportacinyexportacin Opcionesdeprivacidad,indexacin, SPAM,etc. Editoresdecdigo Manejodeusuariosypermisos Retroalimentacin

Ventajas Puedesadministrartusi2oweba travsdeInternet. Unusuariosinconocimientode programacinpuedeeditar contenidofcilmente. Nonecesitastcnicoso programadoresparahacercambios entusi2oweb.

Centrodeatencin Centrodeservicio Contratacinde soporte

CMSdepropietarios Microsoc Sharepoint Documentum EM3 Ingeniux

CMSopensource Joomla! Drupal PHPNuke MovableType Wordpress Lyceum

CriteriosparaseleccionarCMS Qu2podesi2oplaneas construir? Qutangrandeplaneasqueser tusi2o? Tendrsinformacinest2ca, dinmica,unaovariassecciones?

CriteriosparaseleccionarCMS Tendrsoperacioneso transaccionesenlnea? Culessonlos2posdecontenido quepublicars?

CriteriosparaseleccionarCMS Quherramientaspar2culares necesitarsentusi2o?

Cuntoscolaboradoresde contenidotendrtusi2o?Conqu presupuestocuentas?

QuesXHTML? Esellenguajebsicoparala programacinweb. Manejae2quetasencorchetes agudos(<y>),consusrespec2vos atributosentrecomillas().

DelHTMLalXHTML ElXHTML2enecdigomsestricto ymejorasensusintaxis.

CmomejorartucdigoXHTML Usalae2queta<div>para estructurartupgina.Usalastablas (<table>)paraorganizarcuadrculas dedatos.

Porqunodisearcontablas? Lastablassonparapresentardatos Usarlasenestructuraimplicamenos accesibilidad Hacenquelossi2osnosean exibles

UsaelcdigodemanerasemnIca. Cadae2quetadeXHTML2eneuna prioridadparalosservidoresde bsqueda.

CmomejorartucdigoXHTML Asegratedesealarenel DocumentType(DTD)larevisinde XHTMLquesigues. Escribelosatributosdeuna e2quetasiempreenelmismo orden.

CmomejorartucdigoXHTML Asegratequelainformacin esencialdetusi2owebestenlos primeros3KBs. Dividetucdigoenapartados usandocomentarios(<!)

CmomejorartucdigoXHTML Construyesi2osuidosyexibles,y trabajaconunidadesdeproporcin.

CmomejorartucdigoXHTML Usaplan2llasdecdigo(comolas deDreamweaver)parafacilitar rediseosoactualizacionesmasivas.

QueselCSS? Esellenguajeparadiseowebque permitemodicarloselementos XHTMLdenidosenunapgina electrnica. Estorganizadoendocumentos llamadoshojasdees2lo (stylesheets).

QueselCSS? Eselcomplementodellenguaje XHTML. Podemosllamarlocomorecurso externoenelencabezadodeuna pgina(enlaseccinhead)oen cadae2quetaquenecesitemos(en laseccinbody).

CSSyeldiseo Unapginapuedecambiarsuhoja dees2loytenerundiseo completamentedis2ntoaunquelos elementosdeXHTMLnosean alterados.

Benecios: - Disminuireltamaodelapgina - Diseoexible(mismocontenido,dis2ntos diseos) - Mejorindexacin

Seencargadelaestructuradeuna pginawebydeneloselementosque habrenella:texto,tablas,imgenes, objetos.

ModicaloselementosXHTML,ylesda caracters2cascomocolor,tamao, 2pograla,posicin,alineacin,e imgenesdefondo.

Comounahojadees2loexterna, importadacone2quetasencampos extrasdeWebability.

Losusuarioswebnosonmuy diferentesdelosclientesde unaIendaenlavidareal.

Losusuarioswebson impacientesyesperan gra2cacionesinstantneas.

Unsi2owebformapartedela imagencorporaIvadeuna organizacin

Diseoweb:lasreglasdeoro Jerarquizaysacaelmejorprovecho delospuntosfocales

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

Diseoweb:tendencias Efectos3D,efectos3Dyms efectos3D

Herramientas:validadoresdeestndares Epilepsiaporparpadeoy fotosensi2vidad

Nuestrasherramientasfavoritas Webdevelopertoolbar GoogleWebmasterTools

Orientar Informar Produciracciones Entablarrelaciones

Precisas Necesarias Consistentes Apropiadas

Laspalabras producen experiencias.

Tambinproducen experiencias nega>vas

Losvisitantesdebenrecordarel dominioparallegaratusi2o directamente. Undominioserenta,nosecompra.

Losbuenosdominios Seescogenantesdeempezarun si2oweb. Coincidenconelnombredelsi2o weboconlamarcaquehayque vender. Sonsencillosycortos. Incluyenpalabrascompletas.

Losbuenosdominios Sonpronunciablesynousan palabrasdi^cilesdeescribir. Usannousanousanpocosguiones, guionesbajosopuntos. Ayudaracomunicarelgirodetu compaa(.gob.mx,.com,.org,...).

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

Recomendacionesparadominios Nocambiesconstantementede dominio. Usatudominioalmximo:crea directoriosysubdominios. Monitoreatudominioysufechade renovacin.

Recomendacionesparadominios Siesposible,compradominios alternosconnombressimilareso erroresdeescrituracomunes.

Amenosdequehayaunabuena razn,registratudominioconel dominiotoplevel.comy.organtes de.com.mx.

Recomendacionesparadominios Asegratequetudominiofuncione conwwwysinste.

Usatudominiodesdeunprincipio: contenidodinmico. Vendetudominiocomotumarca: tarjetasdepresentacin,psters, rmasdecorreos,etc.

Escogiendohosting Eselservicioquetepermitealojar unsi2owebenunservidoryque estdisponibleenInternetlas24 horasdelda. Enespaol:hospedaje.

Quofrecen? Espacioendisco(enMbs,enGgs) Transferencia/bandwidth FTP(FileTransfer) Sistemaopera2vo Basesdedatos(MySQL)yPHP EmailconPOP3

Usaligascontextosdescrip#vos yevitaelusodeindicaciones comohazclicaqu

Usametadatosparacatalogary jerarquizarcorrectamentesu contenido

Unbuensitioweb Usa(X)htmlparasuestructura UsaCSSparasudiseo Suprogramacinesvlidaconel W3C

Permitelaretroalimentacino contacto,queadems,es accesibleymonitoreada constantemente.

Tieneunbuscadorqueproduce resultadosrelevantes, especialmenteparalaspginas msconsultadas

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