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

info@uaweb.org.mx

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

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

info@uaweb.org.mx

Monterrey,NuevoLeón,México

Agosto2008

Taller

Parte2.

Laplaneación

¿Cómosecreaunaexperienciadeusuarioenlaweb?

SegúnJJGarreP

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:clasi@icarynombrar

Considera:• ¿Mutuamenteexcluyentes?

• Profundooancho

Recurrea:• Cardsor2ng

• Pruebasconusuarios

• Benchmarking

Organizar:clasi@icarynombrar

Navegación

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

Navegación

Global

Contextual

¿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

Elktulodelapágina

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:

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

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

EtiquetasdeCSS• Selectorescontextuales(nombre)

SonelementosdeXHTML(<entrebrackets>)quepuedensermodificadasconCSS.

Ejemplo:

border:0px;

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

Mo>varaunaacción

Informaroportunamente

Informarsuficientemente

Adaptarsealcontexto

Seramables

Tambiénproducenexperienciasnega>vas

Cosasquenosuenannaturales

Onosonconsistentes

Quehacenperderel>empo

Sonimpersonales

Sonvagas

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

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

Technology

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

Curso de Wordpress Ing. Roger Gómez DISEÑO WEB …Curso de Wordpress Ing. Roger Gómez 3 1.4.2. CMS ... usuarios crear sitios web HTML5 y sitios móviles a través del uso de herramientas

Recursos actuales para crear simbolización cartográfica: SIG, estándares y cartografía geomorfológica

Cómo crear sitios web con la nueva versión de Google Siteslecturayescrituracreativascontic.weebly.com/... · Visita guiada de Google Sites •El menú INSERTAR permite añadir contenido

10 SITIOS ON-LINE PARA CREAR DIAGRAMAS UML

CONTENIDOS, CRITERIOS DE EVALUACIÓN, ESTÁNDARES DE ...ieslasamericas.es/sitios/infoPGA/files/ori2E.pdf · 3/57 contenidos, criterios de evaluaciÓn, estÁndares de aprendizaje,

docentesest121.wikispaces.comdocentesest121.wikispaces.com/.../Crear+un+wiki.docx · Web viewCrear un wiki. Existen numerosos sitios en Internet que ofrecen la posibilidad de crear

Parte 1: Abordar el diseño de sitios web...2 Domine los estándares de la creación de los sitios web HTML5 y CSS3 Parte 2 : HTML 5.2 Capítulo 2-1 Los elementos HTML 1. Utilizar

Sitios Donde Crear Un Cuenta de Correo Electrónico

Cómo ir más allá de los sitios web y crear Plataformas de … › presentaciones › plataformas... · 2020-03-30 · Cómo ir más allá de los sitios web y crear Plataformas

Crear sitios web con publisher 2010

Estándares de Medicion de Sitios Web en Mexico

Diseño e implementación de un generador de sitios web … · 2014. 11. 24. · Web Usage Mining para crear sitios web adaptativos. Sitios que adaptan automáticamente su estructura

Estándares educativos para Guatemala¡ndares_educativos_… · estándares educativos. 2. Proceso de construcción de estándares El Programa estándares e investigación educativa

Campus Guadalajaragda.itesm.mx/sitios/imagesCont/_45675036ed.pdf · Para llevar la efectividad del Modelos Educativo del Tec a lo más altos estándares, ... miespacio.itesm.mx (siguiendo

con el Creador de Sitios - HostGator · 2018. 12. 20. · 7 Guía completB: Cómo crear un sitio web con el creador de sitios En el blog de HostGator puedes encontrar contenido sobre

Generación de Energía Marina Proyecto BIMEP · WAVEPLAM (Programa Energía Inteligente Europa). Desarrollar herramientas, establecer métodos y estándares, y crear condiciones

GUATEMALA - eduteka.icesi.edu.coeduteka.icesi.edu.co/pdfdir/GUATEMALAEstandaresMatematicasPrim… · Ciudad de Guatemala, Guatemala Septiembre de 1999 ... • Crear estándares regionales

Crear sitios web con wix

Creación de sitios Web mediante estándares · Creación de sitios web mediante estándares 7 César F. Acebal. Gira 2004 del W3C (Oviedo) Presentación de los documentos {Pronto,

Ideas para crear sitios web