TEMA 20

Técnico de Soporte
Informático
TEMA 20
DISEÑO WEB
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
TEMA20.DISEÑOWEB
CONTENIDO
1. DISEÑODEPÁGINASWEBEINTERFACESWEBDEUSUARIO ...............................................................2 1.1INTRODUCCIÓNALDISEÑODEPÁGINASWEB...................................................................................2 1.2CONCEPTODEINTERFAZWEBDEUSUARIO ......................................................................................4 2. HTML,LENGUAGEDESCRIPT,PROGRAMACIÓNWEB. ........................................................................5 2.1HTML ..................................................................................................................................................5
PrimerospasosconHTML ....................................................................................................................6 EtiquetasHTML ....................................................................................................................................9
2.2LENGUAJEDESCRIPT........................................................................................................................14 Incrustarelscript................................................................................................................................15
Partesdelscript ..................................................................................................................................16
2.3INTRODUCCIÓNPROGRAMACIÓNWEB ...........................................................................................16 3. PRINCIPIOSDELDISEÑODEINTERFACES. ..........................................................................................21 Elementosdelainterfaz.....................................................................................................................22 4. FORMULARIOSELECTRÓNICOS ..........................................................................................................25 FormulariosconHTML .......................................................................................................................25 5. ACCESIBILIDAD,DISEÑOUNIVERSALYUSABILIDAD...........................................................................32 5.1ACCESIBILIDAD..................................................................................................................................32
5.2.DISEÑOUNIVERSAL .........................................................................................................................33 5.3.USABILIDAD .....................................................................................................................................35
2
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
1. DISEÑODEPÁGINASWEBEINTERFACESWEBDEUSUARIO
1.1INTRODUCCIÓNALDISEÑODEPÁGINASWEB
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
El diseño web es una actividad multidisciplinar y tan reciente como Internet. Se alimenta de
fuentes como el diseño gráfico y las artes visuales, la programación de aplicaciones
informáticas,eldiseñodeinterfaces,laredaccióndecontenidos,laanimación,lapublicidad,el
márketingyunsinfíndecosas.
Diseñar es un proceso creativo que combina arte y tecnología para comunicar ideas. El
diseñadorutilizaunaseriedeherramientasquecombinaparahacerqueelmensajequequiere
transmitirllegueaunaaudienciadeterminada.
El diseñador es la persona que se encarga de comunicar el mensaje al público, creando,
eligiendo, organizando y disponiendo toda la información para la visualizar textos, gráficos,
sonido,yporquéno,elespacioenblanco.
Técnicamente,unapáginawebesundocumentoHTML.
HTML es un lenguaje llamado “de marcado”. Consiste en la inserción de etiquetas entre los
contenidos. Estas etiquetas no se muestran al usuario, lo que hacen es dar indicaciones al
navegadorweb(InternetExplorer,Mozilla,Chrome…)sobrelosdiferenteselementosysobre
cómodebemostrarlos.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Unapáginawebsecomponedeunoovariosdocumentoshtmlqueserelacionanentre sía
travésdehipervínculos(enlaces,links).
Se exponen a continuación una serie de conceptos básicos que se deben aprender para
comenzarenelmundodeldiseñoweb:
SITIO WEB: Página principal y sus otras páginas, gráficos, documentos, multimedia y otros
archivosasociadosquesealmacenanenunservidorWeboeneldiscodurodeunequipo.
PÁGINA WEB:Documento elaboradoenHTMLqueformaparte deunsitioWeb.Además del
HTMLsepuedenutilizarotroslenguajescomplementarioscomoPHP,ASP,Javascript...
HIPERVÍNCULO: (Enlace, Link) Un hipervínculo es la conexión de una página a otro destino
como puede ser otra página o una ubicación diferente en la propia página. El destino es
normalmente otra página Web, pero también puede ser otro tipo de documento como una
imagen, una dirección de correo electrónico, un archivo, o un programa. Un hipervínculo
puedesertextoounaimagen.
SERVIDOR WEB: Máquina conectada a Internet que alberga páginas web haciendo que estén
accesiblesdesdecualquierpuntodeInternet.
CLIENTEFTP:Aplicaciónquepermiteconectarsealservidorparapublicarpáginasweb.
3
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
HOSTING: Hospedaje web. Espacio de disco donde se almacenan las páginas webs para que
seanaccesiblesatravésdeInternet.
HOUSING:Esunamodalidaddehostingquevadirigidoagrandesempresasyaempresasdeservicio
Web.Loqueconsisteestetipodealojamientoesenvenderoalquilarunespaciodeuncentrodedatos,
paraqueelclientecoloquesupropioordenador.LaempresaledacorrienteyconexiónaInternet,yel
servidor lo elige el cliente, incluso el hardware. También la empresa suele ofrecer servicios de
mantenimiento de instalación, también administración pero el servidor lo construye y es dueño el
cliente.
DOMINIO:Direcciónwebasociadaaunapáginaweb.
URL:(UniversalResourceLocation/Localizadorderecursosuniversal)Cadenaqueproporciona
la dirección de Internet de un sitio Web o un recurso del World Wide Web, junto con el
protocolomedianteelcualsetieneaccesoalsitiooalrecurso.Eltipomáscomúndedirección
URL es http://, que proporciona la dirección de Internet de una página Web. Otros tipos de
direcciónURLsongopher://,queproporcionaladireccióndeInternetdeundirectorioGopher,
yftp://,queproporcionalaubicacióndereddeunrecursoFTP.
APPLETS:ProgramasdesarrolladosconprogramaciónJavaparamejorarlapresentacióndelas
páginasWebquerealizananimaciones,juegoseinteracciónconelusuario.
FRAMES(MARCOS):ÁreasrectangularesquesubdividenlasventanasdealgunaspáginasWeb,
cadaunadelascualescontieneundocumentohtmlindependientedelosdemás.
WEBMASTER:Unwebmastereslapersonaencargadadecrear,diseñar,estructurar,maquetar,
publicar,promocionarymantenerunsitioweb.
BANNER:Elementográfico,normalmenteanimado,cuyocontenidoespublicidad.
EDITOR: Programas que se utilizan para crear páginas web sin la necesidad de tener que
aprenderellenguaje.Ejemplos:M.FrontPage2000yMacromediaDreamweaver.
4
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
Unainterfazeslaconexiónfísicayfuncionalentredosaparatososistemas
independientes(RAE).Lainterfazdeusuarioeslaformaenquelosusuariosse
puedencomunicarconunordenador.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
1.2CONCEPTODEINTERFAZWEBDEUSUARIO
Hay dos tipos de interfaces de usuario según su manera de interactuar: Alfanuméricas –
intérpretesdepedidos–ygráficasdeusuarios–GUI,GraphicUserInterface–.Estasúltimas
permiten comunicarse con el ordenador de una forma rápida, intuitiva y gráfica (ventanas,
botones,etc.).
Segúnsuconstrucción,puedenserdehardwareodesoftware:
Enelprimercasosetratadeunconjuntodedispositivosquepermitenlainteracción
hombreͲmáquina,deformaquepermitenaccederycogerdatosdelordenador.
LasInterfacesdesoftwaresonprogramasopartedeellosquepermitencomunicarse
conelordenador.
LallavedeléxitodeunSitioWebvienedadaporlamaneraenquesepresentalainformación
alosvisitantes.Esmuyimportantequelainformaciónofrecidacumplaconciertasreglasy/o
estándares,paraquesususuariospuedansacarletodoelprovechoposible.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Se debe crear un entorno en donde los usuarios puedan explorar fácilmente y a la vez
conseguirtransmitirleselmensajequenuestraspáginasofrecen.
Estas interfaces deben servir de intermediarias entre unos usuarios genéricos, no
acostumbrados generalmente al uso de aplicaciones informáticas, y unos sistemas de
información y procesos transaccionales que corren por debajo, debiendo posibilitar la
localización de la información deseada, el entendimiento claro de las funcionalidades
ofrecidas,larealizaciónprácticadetareasespecíficasporpartedelosusuariosylanavegación
intuitivaporlasdiferentespáginasqueformanelsitioweb.
Buscandounahomogeneidadentrelosmillonesdepáginaswebqueexistenenlaactualidad
enInternet,eldiseñodelasmismashaevolucionadoconeltiempohaciaunesquemageneral
perfectamente definido, ofreciendo unas interfaces bien definidas, con un conjunto de
componentes gráficos y funcionales similares que hacen posible que sea cual sea el usuario
queaccedeaunsitiowebcualquieralacomunicaciónentreellosseaposibleyefectiva.
De esta forma se han definido elementos y agrupaciones de estos que han demostrado su
utilidad y su comprensión por los usuarios, entre los que podemos destacar los sistemas de
navegación, los dinteles, los pies de página, los formularios de entrada de datos, etc., que
normalmente encontraremos en todas las páginas web y cuyo diseño y funcionalidad son
similaresentodasellas.
5
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
Másadelanteenestemismocapítulo,ampliaremoslainformaciónsobrelasinterfaceswebde
usuario.
2. HTML,LENGUAGEDESCRIPT,PROGRAMACIÓNWEB.
2.1HTML
Como ya hemos visto, HTML es el lenguaje con el que se "escriben" la mayoría de páginas
web.
Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que
utilizanlosdiseñadoresgeneranpáginasescritasenHTMLylosnavegadoresqueutilizamoslos
usuariosmuestranlaspáginaswebdespuésdeleersucontenidoHTML.
El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un
organismo sin ánimo de lucro llamado World Wide Web Consortium (http://www.w3.org/),
más conocido como W3C. Como se trata de un estándar reconocido por todas las empresas
relacionadas con el mundo de Internet, una misma página HTML se visualiza de forma muy
similarencualquiernavegadordecualquiersistemaoperativo.
La última versión oficial de HTML es la 5, muy recientemente estrenada y de momento muy
pocoextendida.
De forma paralela a su actividad con HTML, W3C ha continuado con la estandarización de
XHTML, una versión avanzada de HTML y basada en XML. La primera versión de XHTML se
denominaXHTML1.0ysepublicóel26deEnerode2000.
XHTML1.0esunaadaptacióndeHTML4.01allenguajeXML,porloquemantienecasitodas
susetiquetasycaracterísticas,peroañadealgunasrestriccionesyelementospropiosdeXML.
LaspáginasydocumentoscreadosconXHTMLsonmuysimilaresalaspáginasydocumentos
HTML.LasdiscusionessobresiHTMLesmejorqueXHTMLoviceversasonrecurrentesenel
ámbito de la creación de contenidos web, aunque no existe una conclusión ampliamente
aceptada.
Actualmente,entreHTML4.01yXHTML1.0,lamayoríadediseñadoresescogenXHTML.Enun
futurocercano,silosdiseñadoresdebenelegirentreHTML5yXHTML1.1oXHTML2.0,quizás
laelecciónseadiferente.
HTMLYCSS
Originalmente, las páginas HTML sólo incluían información sobre sus contenidos de texto e
imagenes. Con el desarrollo del estándar HTML, las páginas empezaron a incluir también
informaciónsobreelaspectodesuscontenidos:tiposdeletra,coloresymárgenes.
6
Promoción Interna de
Técnico de Soporte Informático
Técnico de Soporte informático
TEMA 20
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
La posterior aparición de tecnologías como JavaScript, provocaron que las páginas HTML
también incluyeran el código de las aplicaciones (llamadas scripts) que se utilizan para crear
páginaswebdinámicas.
Incluir en una misma página HTML los contenidos, el diseño y la programación complica en
exceso su mantenimiento. Normalmente, los contenidos y el diseño de la página web son
responsabilidaddediferentespersonas,porloqueesconvenientesepararlos.
CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el
aspectoquedebenpresentaresoscontenidos.
XHTML
(Contenidos)
+
Página
Web
CSS
(Presentación)
YahemosvistoqueHTMLesunlenguajede“etiquetas”o“marcado”.Laspáginaswebestán
formadaspormilesdeestasetiquetas.(OtroslenguajesdeetiquetassonXML,SGML…).
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
PRIMEROSPASOSCONHTML
La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir
porpartedelaspersonasydelossistemaselectrónicos.Laprincipaldesventajaesquepueden
aumentar mucho el tamaño del documento, por lo que en general se utilizan etiquetas con
nombresmuycortos.
UnaetiquetaHTMLdelimitacadaunodeloselementosquecomponenundocumentoypuede
serdecomienzoodecierre.
La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el
identificadoronombredelaetiqueta,ypuedecontenerunaseriedeatributosopcionalesque
permitenañadirciertaspropiedades.Susintaxises:<identificadoratributo1atributo2...>
Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar
cualquiervalorpropiodelusuario,ovaloresHTMLpredefinidos.
La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el
identificadoronombredelaetiqueta,ynocontieneatributos.Susintaxises:</identificador>
7
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su
correspondiente etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar
etiquetasentreotrasetiquetasdecomienzoydecierre.
Existe un tipo especial de etiqueta que contiene la apertura y el cierre dentro de la misma
etiqueta.Porejemplo,<br/>eslaetiquetaquemarcaunsaltodelínea.Estaseabreysecierra
alavez,añadiendo/antesdelsímbolo>.
Antesnoeranecesariocerrarestasetiquetas,perodesdequeaparecieronlasespecificaciones
w3c es obligatorio cerrar todas las etiquetas, y esta es una manera rápida de cerrar las
etiquetasquesoloconstandeapertura.Enrealidad,cualquiernavegadorleerácorrectamente
una etiqueta aunque no esté cerrada pero es muy recomendable acostumbrarse desde el
principioacerrarlastodas.
Unejemplo:
<p><ahref=”www.google.es”>EnlaceaGoogle</a></p><br/>
VemosunenlacealapáginawebdeGoogledentrodeunpárrafoyconunsaltodelíneajusto
después.
La etiqueta “a” corresponde a un enlace, “a” es el identificador, “href” es el atributo, y
“www.google.es” es el valor del atributo. Las especificaciones w3c marcan que el valor del
atributodebeirsiempreentrecomillas.
ELDOCUMENTOHTML
Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye
información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la
páginaincluyetodossuscontenidos,comopárrafosdetextoeimágenes.
Lacabecerayelcuerpotienensuspropiasetiquetasquesonbásicasenundocumentohtml
completo. Estas etiquetas son <head></head> y <body></body> respectivamente. Además,
estas etiquetas vienen encerradas por otra etiqueta general, que también es básica, es la
etiqueta<html></html>.
Poreso,unapáginawebtienelasiguienteestructurabásica:
<html>
<head></head>
<body>
</body>
</html>
8
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
Unejemplosencillísimodeunapáginawebseríaelsiguiente:
<html>
<head>
<title>Mi primera web</title>
</head>
<body>
<p>
HOLA MUNDO!!<br />
Esta es <strong>mi primera</strong> web completa.
</p>
</body>
</html>
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la
cabecera(llamadaheadeninglés)contienetodoloquenoseve(conlaúnicaexcepcióndel
títulodelapágina,quelosnavegadoresmuestrancomotítulodesusventanas).
1) Abriruneditordetextoplano,elblocdenotasessuficiente.
2) Escribirelcódigotalycomoestáescrito.
3) Guardarelarchivoconlaextensiónhtml.Porejemploholamundo.html
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Parahacerqueestecódigosemuestreenpantalladebemosseguirestospasos:
4) Abrir un explorador y escribir la ruta donde está guardado el documento que
acabamosdecrear,conelnombredelarchivoincluido,obienabrirelarchivoconun
explorador,atravésdelbotónderechodelratón.
Asíescomosemuestraelcódigoanteriorenunexplorador:
9
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
SiyaestásviendotuprimerapáginaHTMLenelnavegador,pruebaapulsarsobreelmenúVer
>CódigofuenteypodrásverelcódigoHTMLdelapáginaqueestácargadaenelnavegador.
Dehecho,puedesverelcódigoHTMLdecualquierpáginadeInternetmediantelaopciónVer
>Códigofuente.
ETIQUETASHTML
HTML define 91 etiquetas que los diseñadores pueden utilizar para marcar los diferentes
elementosquecomponenunapágina:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br,
button,caption,center,cite,code,col,colgroup,dd,del,dfn,dir,div,dl,dt,em,fieldset,font,
form,frame,frameset,h1,h2,h3,h4,h5,h6,head,hr,html,i,iframe,img,input,ins,isindex,
kbd,label,legend,li,link,map,menu,meta,noframes,noscript,object,ol,optgroup,option,
p,param,pre,q,s,samp,script,select,small,span,strike,strong,style,sub,sup,table,tbody,
td,textarea,tfoot,th,thead,title,tr,tt,u,ul,var.
De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se pueden
utilizar:applet,basefont,center,dir,font,isindex,menu,s,strike,u.
Describimosbrevementeacontinuaciónlasmásutilizadasysusatributosbásicos:
<a>:enlace.
Ͳ
Name=“texto”.Permitenombraralenlace.
Ͳ
Href=“url”.Urldelrecursoquesequiereenlazar.
Ͳ
Target=“valor”.Lugardondeseabrirálanuevapágina.Enlamismaventana,en
otra…
<div>:divisiones.DefinezonasdentrodeunapáginaHtml.
10
TEMA 20
Técnico de Soporte informático
Ͳ
Id.Identificador
Ͳ
Style=”propiedad:valor”.Leaplicaunestilodeterminado.
Ͳ
Class=”nombredelaclase”.LeaplicaunaclaseCSSdeterminada.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Promoción Interna de
Técnico de Soporte Informático
<h1><h2><h3><h4><h5><h6>.Cabeceras.Sontítulosdenivel1a6.H1eselmásgrandeh6el
máspequeño.
<p>:párrafo.Esunadelasetiquetasmásutilizadas.Permitedefinirlospárrafosqueforman
eltextodeunapágina.
<br/>Saltodelínea.
<ul>Listanoordenada
<ol>Listaordenada
<li>Elementodelista
<dl>Listadedefinición
<dt>Términodeunadefinición
<dd>descripcióndeunadefinición.
Ͳ
Src=“url”.IndicalaURLdelaimagenquesemuestra
Ͳ
Alt=“texto”.Descripcióncortadelaimagen.
Ͳ
Longdesc=”url”.IndicaunaURLenlaquepuedeencontrarseunadescripciónmás
detalladadelaimagen.
Ͳ
Name=“texto”.Nombredelelemento.
Ͳ
Height=“unidaddemedida”.Indicalaalturaconlaquesedebamostrarla
imagen.
Ͳ
Width=“unidaddemedida”.Indicalaanchuraconlaquesedebemostrarla
imagen.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
<img>Imagen.
<table>.Tabla.LastablasHTMLutilizanlosmismosconceptosdefilas,columnas,cabecerasy
títulosquelosqueseutilizanencualquierotroentorno.Hastahaceañoslastablasse
utilizaban,apartedeparamostrarinformacióntabular,paradefinirlaestructuradelaspáginas
web.Esatécnicaesyaobsoletaexistiendolaetiquetasdiv,ynodebeusarselaetiquetatable
paraestefin,sinoparaellógico,queesmostrarinformaciónenformadetabla.
Ͳ
Summary=“texto”.Permitedescribirelcontenidodelatabla(loutilizanlos
buscadoresylaspersonasdiscapacitadasvisualmente)
11
Promoción Interna de
Técnico de Soporte Informático
Ͳ
TEMA 20
Técnico de Soporte informático
Border=“numero”.Grosordelbordedelatabla.
<tr>Filadetabla.
<td>Celdadetabla.
Ͳ
Colspan=“numero”.Númerodecolumnasqueocupaestacelda
Ͳ
Rowspan=“numero”.Númerodefilasqueocupaesacelda.
<th>Celdacabeceradetabla.(Mismosatributosquetd)
Unejemplodelcódigodeunatablasencillaseríaelsiguiente:
<html>
<head>
<title>Tabla en HTML</title>
</head>
<body>
<table border=”1”>
<tr>
<th>Cabecera 1</th><th>Cabecera 2</th><th>Cabecera 3</th>
</tr>
<tr>
<td>A1</td><td>A2</td><td>A3</td>
</tr>
<tr>
<td>B1</td><td>B2</td><td>B3</td>
</tr>
</table>
</body>
</html>
Semostraríadelasiguientemaneraenelnavegador:
12
TEMA 20
Técnico de Soporte informático
<frameset>Especificaelnúmerodeframes
Ͳ
Cols=”numero”.Númerodecolumnas.
Ͳ
Rows=”numero”.Númerodefilas.
Ͳ
Src=“archivo”.Documentohtmlquesemuestraeneseframe.
Ͳ
Name=”nombre”.Nombredelframe.
Ͳ
Frameborder=“numero”.Bordedelframe.
Ͳ
NoresizeͲ>esteatributoindicaquenosepuedecambiareltamañodelframe.
Ͳ
Scroll=“auto/yes/no”.Indicasielframetendráscrollsiemrpe,nuncaodepende
deltamaño.
<noframes>Contenidoalternativoparalosnavegadoresquenoadmitenframes.
CabedestacarquelosFramesoMarcosestánquedandoobsoletos.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
<frame>Definecadaframe
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Promoción Interna de
Técnico de Soporte Informático
<span>Seutilizaparadiferenciartrozosdecontenidoespeciales,alosquehabráquedarun
estilodiferente.
<form>Formulario.Encierratodosloscontenidosdeunformulario.
Ͳ
action="url"ͲIndicalaURLqueseencargadeprocesarlosdatosdelformulario
Ͳ
method="POSToGET"ͲMétodoHTTPempleadoalenviarelformulario
13
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
Ͳ
enctype="application/xͲwwwͲformͲurlencodedomultipart/
Ͳ
formͲdata"ͲTipodecodificaciónempleadaalenviarelformularioalservidor(sólo
seindicadeformaexplícitaenlosformulariosquepermitenadjuntararchivos)
Ͳ
accept="tipo_de_contenido"ͲListaseparadaporcomasdetodoslostiposde
archivosaceptadosporelservidor(sóloparalosformulariosquepermiten
adjuntararchivos)
Ͳ
ƒOtros:acceptͲcharset,onsubmit,onreset
<input/>Controldeunformulario.
Ͳ
type="text|password|checkbox|radio|submit|reset|file|hidden|image
|button"ͲIndicaeltipodecontrolqueseincluyeenelformulario
Ͳ
name="texto"ͲAsignaunnombrealcontrol(esimprescindibleparaqueel
servidorpuedaprocesarelformulario)
Ͳ
value="texto"ͲValorinicialdelcontrol
Ͳ
size="unidad_de_medida"ͲTamañoinicialdelcontrol(paraloscamposdetextoy
depasswordserefierealnúmerodecaracteres,enelrestodecontrolesserefiere
asutamañoenpíxel)
Ͳ
maxlength="numero"ͲMáximonúmerodecaracteresparaloscontrolesdetexto
ydepassword
Ͳ
checked="checked"ͲParaloscontrolescheckboxyradiobuttonpermiteindicar
quéopciónaparecepreseleccionada
Ͳ
disabled="disabled"ͲElcontrolaparecedeshabilitadoysuvalornoseenvíaal
servidorjuntoconelrestodedatos
Ͳ
readonly="readonly"ͲElcontenidodelcontrolnosepuedemodificar
Ͳ
src="url"ͲParaelcontrolquepermitecrearbotonesconimágenes,indicalaURL
delaimagenqueseempleacomobotóndeformulario
Ͳ
alt="texto"ͲDescripcióndelcontrol
<select>.Listadesplegable.
Ͳ
size="numero"ͲNúmerodefilasquesemuestrandelalista(pordefectosólose
muestrauna)
Ͳ
multiple="multiple"ͲSiseincluye,sepermiteseleccionarmásdeunelemento
Ͳ
Otros:name,disabled,onchange,onfocus,onblur
14
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
Ͳ
selected="selected"ͲIndicasielelementoapareceseleccionadopordefectoal
cargarselapágina
Ͳ
value="texto"ͲElvalorqueseenvíaalservidorcuandoelusuarioeligeesaopción
Ͳ
Otros:label,disabled
<textarea>Áreadetexto
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
<option>Elementodeunalistadesplegable.
Ͳ
rows="numero"ͲNúmerodefilasdetextoquemostraráeltextarea
Ͳ
cols="numero"ͲNúmerodecaracteresquesemuestranencadafiladeltextarea
Ͳ
Otros:name,disabled,readonly,onselect,onchange,onfocus,onblur
<!Ͳ….ͲͲ>.Comentarios.
Todosestoselementosdeformularioysusfuncionesymanejoseránestudiadosmásadelante
enestetema.
EstassonsolamenteunasnocionesmuybásicasdecómocrearunapáginawebconHTML.Encasode
quesedeseeprofundizareneltemaserecomiendapracticarmuchoconlasetiquetas.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
2.2LENGUAJEDESCRIPT
Loslenguajesdescriptpermitenincluir“programación”enunapáginaweb.Enrealidadesuna
listadecomandoquesepuedenejecutarconlaparticipacióndelusuarioosinella.En
definitivaestamoshablandodeunlenguajedeprogramación,quesueleemplearsedentrode
uncontexto(otraaplicación)yquenopermiteprogramaraplicacionesindependientes,sino
quenecesitandeunintérprete.
Existenmúltipleslenguajesdescript:JavaScript,VBScript,Perletc…Sinembargo,por
compatibilidad,losmásempleadossonVBScriptyconmuchadiferenciaJavaScript.
Ladiferenciaentreellosseencuentrabásicamenteensusintaxis,aunquelosdosnacieroncon
elmismofinqueesdotardeunlenguajedescriptrápidoysencilloalaspáginasweb.
HabitualmenteloslenguajesscriptenpáginasHTMLseutilizanparacuatrofinesquesonlos
siguientes:
1) Validacióndedatos.Sehaceenelequipoclienteyconsisteenverificarquelosdatos
quesevanaenviarenunformulariosonadecuadosdependiendodeunasreglas
15
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
marcadas.Porejemplo,queenuncamponúmerodeteléfononoaparezcaunaletra,
queuncampoobligatorionoestévacío,queuncampoemailesrealmenteunemail,e
infinidaddevalidacionesmás.
2) Actualizarcamposenunformulario.Comoporejemplocuandoseactualizaunalista
desplegabledependiendodelbotónderadioquesehayaseleccionado.
3) Procesarinformaciónquenorequierebasededatos.Porejemplosumardosnúmero
dedoscamposdeformulario,convertireurosapesetas,etc.
4) Servirdebaseparalautilizacióndeotrastecnologías.DHTM,ActiveX.
Los lenguajes de script además pueden actuar sobre lo que está mostrando el navegador, a
travésdelosobjetosintegradosqueserepresentaneneldocumento,laventanaactiva,cada
unodeloscontrolesdelformulario,etc.Paraconseguirestoseempleaunmodelodeobjetos
denominadoDocumentObjectModel(DOM).GraciasaDOM,porejemplo,podemoscambiar,
porejemplo,elcolordeunpárrafodependiendodeunbotónderadioquesehayapulsado.
INCRUSTARELSCRIPT
HaytresmanerasdellamaraunscriptdentrodeunapáginaHTML:
1) Usando una etiqueta <script></script>. Esta etiqueta permite incluir el código
directamenteenlapáginaoqueapunteaunficheroexternousandoelatributosrc.
2) Usando los atributos de etiquetas HTML que soportan scripts. Por ejemplo con el
atributo“onclick”deunbotóndeformulario,sellamaríaaunafunciónJavaScript.
<inputtype=”button”onclick=”pulsar()”/>
Alpulsarelbotónseejecutalafunción“pulsar()”queseráuntrozodecódigoquese
encuentreobienenelmismodocumentoobienenotro.
3) Incluyendoenelatributohrefdeunelementoa.Porejemplo:
<ahref=”javascript:pulsar()”>FunciónPulsar</a>
Alpincharenelenlacedefinidoporestaetiqueta<a>seejecutarálafunciónjavascript
“pulsar()”.
Elcódigodelscriptpuedeescribirseenunficheroapartequedespuésseguardaráconla
extensión.js(enelcasodeJavaScript).Esteficheroserá“llamado”poreldocumentohtml
dentrodelaetiqueta<head><head>.Porejemplo:
<scripttype="text/javascript"src="scripts/script.js">
16
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
Otramaneradeescribirelcódigoesdentrodelasetiquetas<head></head>delmismo
documentohtml.Delasiguientemanera:
Código
</script>
PARTESDELSCRIPT
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
<script language=”JavaScript”>
El código de un script o programa JavaScript consta de los elementos que se dan a
continuación,loscualessediscutiránendetalleenlossiguientestemas:
Cuerpoprincipal.Cualquiercódigosituadoentrelasetiquetas<script></script>yque
noseaunadefinicióndeunafunción.
Manipuladoresdeeventos.Loseventossonaccionesqueocurrenenrespuestaaalgo
queelusuariorealiza.Cuandounusuariohaceclickconelratónesunevento(onclick)
cuandopulsaunateclatambiénesunevento…etc.Losmanipuladoresdeeventosson
scripts que se definen para enlazar la aparición de un evento con la llamada a
funcionesJavaScript.
Funciones.LasfuncionessonrozosdecódigoJavaScriptquepermanecenalaespera
de ser ejecutados por otras secciones de código. Es un concepto muy utilizado en
cualquierlenguajedeprogramación.
WWW.ECLAP.JCYL.ES
AligualqueconHTMLparaprofundizarenestetemaserequiereunestudiocentradoenel
tema,ademásdeunosmínimosconocimientosdeprogramación.
2.3INTRODUCCIÓNPROGRAMACIÓNWEB
WWW.ECLAP.JCYL.ES
Daremosunavisiónmuygenéricasobreesteconcepto,yaqueesfundamentaltenerunabase
sólidadeprogramaciónparapoderllevarloalapráctica.
Ya hemos visto que el “lenguaje” utilizado para montar la estructura de una página web es
HTML o bien XHTML, pero estas etiquetas solamente permiten mostrar información en la
pantalla,novamásallá.
Las aplicaciones web son una combinación de diferentes lenguajes de programación y
llamadasabasesdedatosqueconsiguenqueunawebmuestreinformaciónenfuncióndelo
queelcódigodelaprogramaciónestipuleademásdesercapazdeleeryalmacenarcontenido
enunabasededatos.
17
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
Contodoestoseconsigueelconceptode“webdinámica”dondeloscontenidossemuestrany
cambianenfuncióndeestasllamadasabasesdedatosyenfuncióndeestaprogramación.
Es importante saber diferenciar entre dos conceptos: los lenguajes del lado cliente y los
lenguajesdelladoservidor.
Ͳ
Lenguajesdelladocliente.Sonlosquepuedeejecutardirectamenteelnavegador
del equipo donde se está visualizando la página web. Un ejemplo es JavaScript.
Cuando un usuario se conecta a una página que tenga un código JavaScript, su
propio navegador es el encargado de “compilar” y ejecutar este código sin
necesidaddeunservidor.
Ͳ
Lenguajesdelladoservidor:sonloslenguajesqueseejecutanenelservidordonde
está alojada la página. Estos lenguajes son por ejemplo PHP, ASP… El propio
navegadornoescapazdeinterpretarciertoscódigos,poreso,alconectarseauna
páginaconestetipodecódigo,elpropioservidorqueloalojaestápreparadopara
ejecutarlassentenciasdeestoslenguajes.
Varios lenguajes de programación sirven para este cometido, los más usados son los
siguientes:
LENGUAJEPHP
Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo
recursivoquesignifica“PHPHypertextPreͲprocessor”,(inicialmentesellamóPersonalHome
Page).Surgióen1995,desarrolladoporPHPGroup.
PHPesunlenguajedescriptinterpretadoenelladodelservidorutilizadoparalageneración
de páginas web dinámicas, embebidas en páginas HTML y ejecutadas en el servidor. PHP no
necesita ser compilado para ejecutarse. Para su funcionamiento necesita tener instalado
ApacheoIISconlaslibreríasdePHP.LamayorpartedesusintaxishasidotomadadeC,Javay
Perlconalgunascaracterísticasespecíficas.Losarchivoscuentanconlaextensión(php).
VENTAJAS:
Muyfácildeaprender.
Secaracterizaporserunlenguajemuyrápido.
Soportaenciertamedidalaorientaciónaobjeto.Clasesyherencia.
Esunlenguajemultiplataforma:Linux,Windows,entreotros.
Capacidaddeconexiónconlamayoríadelosmanejadoresdebasededatos:MysSQL,
PostgreSQL,Oracle,MSSQLServer,entreotras.
Capacidaddeexpandirsupotencialutilizandomódulos.
18
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
Eslibre,porloquesepresentacomounaalternativadefácilaccesoparatodos.
Incluyegrancantidaddefunciones.
Norequieredefinicióndetiposdevariablesnimanejodetalladodelbajonivel.
DESVENTAJAS:
Senecesitainstalarunservidorweb.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Posee documentación en su página oficial la cual incluye descripción y ejemplos de
cadaunadesusfunciones.
Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser más
ineficienteamedidaquelassolicitudesaumentendenúmero.
LalegibilidaddelcódigopuedeverseafectadaalmezclarsentenciasHTMLyPHP.
Laprogramaciónorientadaaobjetosesaúnmuydeficienteparaaplicacionesgrandes.
Dificultalamodularización.
Dificultalaorganizaciónporcapasdelaaplicación.
SEGURIDAD:
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
PHPesunpoderosolenguajeeintérprete,yaseaincluidocomopartedeunservidorweben
formademódulooejecutadocomounbinarioCGIseparado,escapazdeaccederaarchivos,
ejecutar comandos y abrir conexiones de red en el servidor. Estas propiedades hacen que
cualquiercosaqueseaejecutadaenunservidorwebseainsegurapornaturaleza.
PHPestádiseñadoespecíficamenteparaserunlenguajemásseguroparaescribirprogramas
CGI que Perl o C, y con la selección correcta de opciones de configuración en tiempos de
compilaciónyejecución,ysiguiendoalgunasprácticascorrectasdeprogramación.
LENGUAJEASP
Es una tecnología del lado de servidor desarrollada por Microsoft para el desarrollo de sitio
web dinámicos. ASP significa en inglés (Active Server Pages), fue liberado por Microsoft en
1996.LaspáginaswebdesarrolladasbajoestelenguajeesnecesariotenerinstaladoInternet
InformationServer(IIS).
ASPnonecesitasercompiladoparaejecutarse.Existenvarioslenguajesquesepuedenutilizar
paracrearpáginasASP.ElmásutilizadoesVBScript,nativodeMicrosoft.ASPsepuedehacer
también en Perl and Jscript (no JavaScript). El código ASP puede ser insertado junto con el
códigoHTML.Losarchivoscuentanconlaextensión(asp).
VENTAJAS:
19
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
UsaVisualBasicScript,siendofácilparalosusuarios.
ComunicaciónóptimaconSQLServer.
SoportaellenguajeJScript(JavascriptdeMicrosoft).
DESVENTAJAS:
Códigodesorganizado.
Senecesitaescribirmuchocódigopararealizarfuncionessencillas.
Tecnologíapropietaria.
Hospedajedesitioswebcostosos.
ASP.NET
EsteesunlenguajecomercializadoporMicrosoft,yusadoporprogramadoresparadesarrollar
entre otras funciones, sitios web. ASP.NET es el sucesor de la tecnología ASP, fue lanzada al
mercadomedianteunaestrategiademercadodenominada.NET.
ElASP.NETfuedesarrolladopararesolverlaslimitantesquebrindabatuantecesorASP.Creado
paradesarrollarwebsencillasograndesaplicaciones.ParaeldesarrollodeASP.NETsepuede
utilizarC#,VB.NEToJ#.Losarchivoscuentanconlaextensión(aspx).Parasufuncionamiento
delaspáginassenecesitatenerinstaladoIISconelFramework.Net.MicrosftWindows2003
incluyeesteframework,solosenecesitaráinstalarloenversionesanteriores.
VENTAJAS:
Completamenteorientadoaobjetos.
Controlesdeusuarioypersonalizados.
Divisiónentrelacapadeaplicaciónodiseñoyelcódigo.
Facilitaelmantenimientodegrandesaplicaciones.
Incrementodevelocidadderespuestadelservidor.
Mayorvelocidad.
Mayorseguridad.
DESVENTAJAS:
Mayorconsumoderecursos.
20
Técnico de Soporte informático
WWW.ECLAP.JCYL.ES
TEMA 20
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Promoción Interna de
Técnico de Soporte Informático
21
WWW.ECLAP.JCYL.ES
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
3. PRINCIPIOSDELDISEÑODEINTERFACES.
Yavimosenelprimerpuntodeestetemaunaintroducciónaldiseñodeinterfaces.
Ampliaremoslainformaciónenesteapartado.
CuandosehabladeSitiosWeb,sellamainterfazalconjuntodeelementosdelapantallaque
permiten al usuario realizar acciones sobre el Sitio Web por el que está navegando. Por la
misma razón, se considera parte de la interfaz a sus elementos de identificación, de
navegación,decontenidosydeacción.
Todosestoselementosdeben estar preparados para ofrecer unos servicios determinados al
usuario, para que éste pueda obtener lo que entró a buscar cuando visitó el Sitio Web. Por
todoesto,cadaunodeloselementosqueseintegrendentrodelainterfazdebeestarpensado
paracausarunefectosobreelusuarioydebenserutilizadosconunfin.
En este sentido, es esencial considerar que uno de los autores más citados en cuanto a la
usabilidad de los Sitios Web, destaca que los elementos más importantes de la portada de
cualquierSitioWebsepuedenresumirencuatropremisasgenerales:
Dejar claro el propósito del sitio: se refiere a que el sitio debe explicar a quién
perteneceyquépermitehaceraquieneslovisitan;seentiendequedebehacerlode
manera simple y rápida. Por ejemplo, ayuda en este sentido el cumplimiento de las
normasreferidasausodeURLsylogotiposoficiales.
Ayudaralosusuariosaencontrarloquenecesitan:implicaquedebecontarconun
sistema de navegación visible y completo, pero que además deberá estar
complementado por algún sistema de búsqueda que sea efectivo para acceder al
contenidoalquenoselograaccederoquenoseencuentraasimplevista.
Demostrar el contenido del sitio: significa que el contenido se debe mostrar de
maneraclara,contítuloscomprensiblesporpartedelusuarioyconenlaceshacialas
seccionesmásusadasqueesténdisponiblesdondeelusuariolosbusque.Ayudaráen
estesentidotenerunseguimientodelasvisitasparacomprenderquéeslomásvistoy
lomásbuscadodelSitioWeb.
Usar diseño visual para mejorar y no para definir la interacción del Sitio Web: se
refiereaqueloselementosgráficosdelSitioWebdebenestarpreparadosparaayudar
en los objetivos del sitio y no sólo como adornos utilizados para rellenar espacio.
Aunquesetratadeunodelostemasmásdebatibles,sualcancenoeselderestringir
el uso de imágenes y elementos gráficos, sino a que su uso sea adecuado para la
experienciadeusoquesedeseaofrecer.
22
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Como se puede apreciar, el foco central de una interfaz es permitir que el usuario que llega
como visitante consiga los objetivos que lo trajeron al Sitio Web y que éste le ponga fácil el
accesoaloscontenidosatravésdesuspantallas.
Para conseguir este objetivo, es necesario que la interfaz adopte los elementos, que
detallamosenestecapítulo,atravésdeloscualesseráposibleconseguirelcumplimientode
lospostuladosantesseñalados.
ELEMENTOSDELAINTERFAZ
La interfaz del Sitio Web, cualquiera sea el objetivo que persiga, debe tener una serie de
normas de carácter general, referidas a sus características como sistema de información y
comunicación. Gracias al cumplimiento de esas normas, el usuario conseguirá acceder a las
informaciones que se le ofrecen y, además, podrá realizar las acciones que el organismo
propietariodelespaciodigitalleentregaatravésdeestesistema.
Dichas características tienen que ver con los elementos de identificación, de navegación, de
contenidos y de acción que el Sitio Web debe contener, todos los cuales se analizan en las
siguientespáginas.
Laexistenciaeimportanciadedichoselementos,comoasimismolaubicaciónquedebentener
en la interface, se ha visto comprobada a través de las investigaciones que se han hecho en
tornoalosSitiosWeb.
WWW.ECLAP.JCYL.ES
Usodelogotipos
Sistemadenavegación
Áreasdecontenidos
Áreasdeinteracción
Experienciadeusuario
WWW.ECLAP.JCYL.ES
Respecto de los elementos de la interface, los aspectos más relevantes a tener en
consideraciónsonlossiguientes:
23
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
Laubicaciónrelativadeestoselementospodríaser,porejemplo,lasiguiente.
SISTEMADENAVEGACIÓN
Eselconjuntodeelementospresenteencadaunadelaspantallas,quepermiteaunusuario
moverseporlasdiferentesseccionesdeunSitioWebyretornarhastalaportada,sinsentirla
sensacióndehaberseperdidoenesecamino.
Paraconseguirestoseincluyenelementoscomo:
Menúdesecciones:esunazonadelainterfazenlaquesedetallanlasseccionesocategorías
enlasqueestádivididalainformacióncontenidaenelSitioWeb.
Menúderastros(migasdepanobreadcrumb):eselmenúqueindicamediantelosnombres
decadasecciónocategoríadelmenúladistanciaqueseparaalapáginaactualdelaportada.
Eseltípicomenúquesueleaparecerjustodebajodelacabeceradelaspáginas,indicando,o
bienlaspáginasporlasquehemosnavegadohastallegardondenosencontramos,obienla
estructura de páginas del sitio con respecto al documento donde estamos. Normalmente se
sueleutilizarlasegunda.Sueletenerelsiguientesencilloformato:(Ejemplo)
Inicio>Menúdelibros>Novelas
Identificación de secciones: debe estar en la zona superior de la página, cerca de la zona
donde se encuentra el logotipo que se haya elegido para identificar al Sitio Web. Es una
manera de identificar, a través de colores, o imágenes la sección de la página donde nos
encontramos.
24
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Botonesdeacción:sonaquelloselementosquepermitenrealizaraccionesdirectasrelativasa
la navegación y que se muestran como parte de ésta (Volver al inicio, Contacto, Mapa del
sitio).
WWW.ECLAP.JCYL.ES
Piedepágina:eslazonainferiordecadapantallacumpleelrelevantepapeldecompletarsula
información que se ofrece en las zonas superiores de navegación. (Nombres, direcciones,
teléfonos,emails…)
ÁREADECONTENIDOS
Sonlaszonasenlaqueseexponelainformaciónencadapáginaweb,sinimportarelformato
olosmediosqueéstautilice.
Loidealesquesedividaentreszonas.Título,resumenycontenido.
ÁREADEINTERACCIÓN
Seentiendepor"áreasdeinteracción"alaszonasenlaqueseofrecerealizacióndeacciones
porpartedelosusuariosdelSitioWeb,atravésdelascualespuedenutilizarlosserviciosdela
institución que pone en marcha el espacio digital. La interacción, en este sentido, va desde
acciones menores que pueden ser enlaces para mayor información o suscripción a servicios
informativos periódicos, hasta la realización de trámites complejos como la obtención de
certificadosoelpagodeobligaciones.
25
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
4. FORMULARIOSELECTRÓNICOS
Todoshemosrellenadoalgunavezunformularioenpapel.
Losformulariosenpapelsonfamososhabitualmenteporsudificultadpararellenarlos,yenel
casodeformulariosrellenosamano,sudificultadparadescifrarlosposteriormente.
Los formularios electrónicos vienen a minimizar muchas de las desventajas de los que se
presentan en papel. Es posible diseñar un formulario electrónico de forma que contenga
información de ayuda para la persona que va a rellenarlo. Estos formularios electrónicos
pueden contener campos de texto, listas desplegables, casillas para seleccionar entre varias
opciones(unadeellasovarias),camposdetextolargodondeescribirobservaciones…
Puesto que el formulario se rellena desde el propio ordenador, se evitan todos los posibles
problemas de interpretación de los datos introducidos, como sucede con los formularios en
papelrellenosamano.Además,silacomputadoraestáconectadaaunared,losformularios
electrónicospuedensercumplimentadosycompartidosdelamismaformaquesecomparte
cualquierotrotipodedocumento,eliminandoasíporcompletolanecesidaddelosformularios
enpapel.
Actualmente existen muchas maneras de crear formularios electrónicos, por ejemplo, los
propiosprogramasofimáticostipoOfficepermitenlacreacióndeestaherramienta.Sonmuy
utilizados también los formularios en pdf, configurados a través de la aplicación Adobe
Acrobat, pero es necesaria la versión Proffesional para poder editarlos, aunque no para
rellenarlos.
Los que nos interesan en este caso son los formularios creados con html, a través de las
etiquetasqueyavimosensucorrespondienteapartado.Vamosaprofundizarunpocomásen
lautilidadyusodecadaunadeellas.
FORMULARIOSCONHTML
Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas: <form> y
<input>.
La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros de texto,
listasdesplegables)ylaetiqueta<input>permitedefinirvariostiposdiferentesdeelementos
(botonesycuadrosdetexto).
Ya vimos en el apartado 2 de este tema las etiquetas correspondientes a formularios, y sus
atributos.
26
Promoción Interna de
Técnico de Soporte Informático
Técnico de Soporte informático
TEMA 20
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Lamayoríadeformulariosutilizansólolosatributosactionymethod.Elatributoactionindica
laURLdelaaplicacióndelservidorqueseencargadeprocesarlosdatosintroducidosporlos
usuarios. Esta aplicación también se encarga de generar la respuesta que muestra el
navegador.
Elatributomethodestablecelaformaenlaqueseenvianlosdatosdelformularioalservidor.
EsteatributohacereferenciaalmétodoHTTP,porloquenoesalgopropiodeHTML.Losdos
valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los
formulariosincluyenelatributomethod="get"oelatributomethod="post".
Al margen de otras diferencias técnicas, el método POST permite el envío de mucha más
informaciónqueelmétodoGET.Engeneral,elmétodoGETadmitecomomáximoelenvíode
unos500bytesdeinformación.LaotragranlimitacióndelmétodoGETesquenopermiteel
envíodearchivosadjuntosconelformulario.Además,losdatosenviadosmedianteGETseven
enlabarradedireccionesdelnavegador(seañadenalfinaldelaURLdelapágina),mientras
quelosdatosenviadosmediantePOSTnosepuedenvertanfácilmente.
ELEMENTOSDEFORMULARIO
Lamayoríadeloselementosseformanconlaetiqueta<input>.Elatributotypediferenciaa
cadaunodelosdiezcontrolesquesepuedencrearconlaetiqueta<input>.
WWW.ECLAP.JCYL.ES
CUADRODETEXTO
Elvalordelatributotypees“text”.
Nombre:
<input type="text" name="nombre" value="" />
Setratadelelementomásutilizadoenlosformularios. WWW.ECLAP.JCYL.ES
Elatributonameeselmásimportanteenloscamposdelformulario.Dehecho,siuncampono
incluye el atributo name, sus datos no se envían al servidor. El valor que se indica en el
atributonameeselnombrequeutilizalaaplicacióndelservidorparaobtenerelvalordeeste
campodeformulario.Cuandoelusuariopulsaelbotóndeenvíodelformulario,elnavegador
envía los datos a una aplicación del servidor para que procese la información y genere una
respuestaadecuada.Enelservidor,laaplicaciónqueprocesalosdatosdebeobtenerenprimer
lugartodalainformaciónintroducidaporelusuario.Paraello,utilizaelvalordelatributoname
paraobtenerlosdatosdecadacontroldelformulario.
Se puede controlar el tamaño con el atributo “size”, el número máximo de caracteres a
introducirconelatributo“maxlength”,elvalorpordefectocon“value”ysieseditableono
con“readonly”.
27
Promoción Interna de
Técnico de Soporte Informático
Técnico de Soporte informático
TEMA 20
CUADRODECONTRASEÑA
Elvalordetypees“password”.
Password:
<input type="password" name="pass" value="" />
La única diferencia entre este control y el cuadro de texto normal es que el texto que el
usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los
navegadoresocultaneltextoutilizandoasteriscosocírculos,porloqueesidealparaescribir
contraseñasyotrosdatossensibles.
CHECKBOX
Elvalordetypees“checkbox”.
Elige opciones
<input type="checkbox" value=”1”/> Opcion 1
<input type="checkbox" value=”2”/> Opcion 2
<input type="checkbox" value=”3”/> Opcion 3
Loscheckboxo"casillasdeverificación"soncontrolesdeformularioquepermitenalusuario
seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se muestran
varioscheckboxjuntos,cadaunodeellosescompletamenteindependientedelresto.Poreste
motivo,seutilizancuandoelusuariopuedeactivarydesactivarvariasopcionesrelacionadas
peronoexcluyentes.
Sisequieremostraruncheckboxseleccionadopordefecto,seutilizaelatributo“checked”.
RADIOBUTTON
Elatributotypees“radio”.
28
TEMA 20
Técnico de Soporte informático
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Promoción Interna de
Técnico de Soporte Informático
Elige una opción:
<input type="radio" value=”op”/> Opcion 1
<input type="radio" value=”op”/> Opcion 2
<input type="radio" value=”op”/> Opcion 3
Los controles de tipo radiobutton son similares a los controles de tipo checkbox, pero
presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton se
utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones
relacionadasqueselepresentan.Cadavezqueseseleccionaunaopción,automáticamentese
deseleccionalaotraopciónqueestabaseleccionaba.
El atributo “name” se emplea para indicar los radiobutton que están relacionados. Por lo
tanto, cuando varios radiobutton tienen el mismo valor en su atributo name, el navegador
sabe que están relacionados y puede deseleccionar una opción del grupo de radiobutton
cuandoseseleccioneotraopción.
BOTÓNDEENVÍODEFORMULARIO
<input type="submit" value=”Enviar”/>
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Elvalordetypees“submit”.
Elnavegadorseencargadeenviarautomáticamentelosdatoscuandoelusuariopinchasobre
este tipo de botón. El valor del atributo value es el texto que muestra el botón. Si no se
estableceelatributovalue,elnavegadormuestraeltextopredefinidoEnviarconsulta.
BOTÓNDERESETEO
Elvalordetypees“reset”.
<input type="reset" value=”Borrar campos”/>
Aunque su uso era muy popular hace unos años, la mayoría de formulariosmodernos ya no
utilizan este tipo de botón. Se trata de un botón especial que borra todos los datos
introducidosporelusuarioydevuelveelformularioasuestadooriginal.
29
Promoción Interna de
Técnico de Soporte Informático
Técnico de Soporte informático
TEMA 20
FICHEROSADJUNTOS
Elvalordetypees“file”.
<input type="file" />
Losformulariostambiénpermitenadjuntararchivosparasubirlosalservidor.
Elnavegadorseencargademostraruncuadrodetextodondeapareceelnombredelarchivo
seleccionadoyunbotónquepermitenavegarporlosdirectoriosyarchivosdelordenadordel
usuario.
CAMPOSOCULTOS
Elvalordetypeeshidden.
<input type="hidden" />
Loscamposocultosseempleanparaañadirinformaciónocultaenelformulario.
Los campos ocultos no se muestran por pantalla, de forma que el usuario desconoce que el
formulariolosincluye.
Normalmenteloscamposocultosseutilizanparaincluirinformaciónquenecesitaelservidor
peroquenoesnecesarioonoesposiblequelaestablezcaelusuario.
BOTÓNDEIMAGEN
Elvalordetypees“image”.
<input type="image" src=”acepta.png” />
Elaspectodelosbotonesdeformulariosepuedepersonalizarporcompleto,yaqueinclusoes
posibleutilizarunaimagencomobotón.
ElatributosrcindicalaURLdelaimagenquedebemostrarelnavegadorenlugardelbotón
normal.
Su principal ventaja es que permite personalizar por completo la estética de los botones y
mostrarlosconunaspectohomogéneoentodoslosnavegadores.Elprincipalinconvenientees
queralentizalacargadelformularioyquesisequieremodificarsuaspecto,esnecesariocrear
unanuevaimagen.
BOTÓN
Elvalordetypees“button”.
30
Promoción Interna de
Técnico de Soporte Informático
Técnico de Soporte informático
TEMA 20
<input type="button" value=”Guardar cambios” />
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Algunos formularios complejos necesitan botones más avanzados que los de enviar datos
(type="submit") y resetear el formulario (type="reset"). Por ese motivo, el estándar
HTML/XHTMLdefineunbotóndetipogenérico.
Este tipo de botones sólo son útiles si se utilizan junto con el lenguaje de programación
JavaScript.SilapáginaincluyecódigoJavaScript,losbotonesdeestetiposepuedenprogramar
paraquerealicencualquiertareacomplejacuandosepulsasobreellos.
ÁREADETEXTO
Esteeselprimerelementoquevemosquenoutilizaetiqueta<input>
Eláreadetextoutilizalaetiqueta<textarea>
Observaciones: <br />
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
<textarea rows="8" cols="40"></textarea>
Lasáreasdetextosonútilescuandosedebeintroducirunagrancantidaddetexto,yaquees
muchomáscómododeintroducirqueenuncampodetextonormal.
Los atributos más utilizados en las etiquetas <textarea> son los que controlan su anchura y
altura. La anchura del área de texto se controla mediante el atributo cols, que indica las
columnasonúmerodecaracteresquesepodránescribircomomáximoencadafila.Laaltura
del área de texto se controla mediante rows, que indica directamente las filas de texto que
seránvisibles.
LISTADESPLEGABLE
Utiliza la etiqueta <select> para definir la lista y <option> para definir cada uno de los
elementos.Haydiferentestiposdelistasdesplegables:listasquesolomuestranunvalorala
vez y solo permiten seleccionar un valor, listas que muestra varios pero solo permite
seleccionarunoyporúltimolistasquemuestranypermitenseleccionarvarioselementos.
Laetiqueta<select>definelalistayencierratodaslasopcionesquemuestralalista.Cadauna
delasopcionesdelalistasedefinemedianteunaetiqueta<option>.Elatributovaluedecada
opción es obligatorio, ya que es el dato que se envía al servidor cuando el usuario envía el
31
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
formulario. Para seleccionar por defecto una opción al mostrar la lista, se añade el atributo
selectedalaopcióndeseada.
32
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
5.1ACCESIBILIDAD
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
5. ACCESIBILIDAD,DISEÑOUNIVERSALYUSABILIDAD
El principal objetivo de la accesibilidad web es el de permitir a cualquier usuario,
independientementedeltipodediscapacidadquesufra,elaccesoaloscontenidosdelsitioy
permitirlelanavegaciónnecesariapararealizarlasaccionesdeseadas.
Los sitios web accesibles no solamente facilitan el acceso de sus contenidos a los usuarios
discapacitados, sino que también permiten ofrecer la misma funcionalidad con dispositivos
muylimitados(dispositivossinpantallaoconpantallasminúsculas,dispositivossintecladoni
ratón,etc.).
Las cuatro principales ventajas de diseñar un sitio web completamente accesible son las
siguientes:
Lossitiosaccesiblesseparancompletamentediseñoycontenido.
Un sitio accesible puede ser accedido por multitud de dispositivos diferentes sin
necesidaddereescribirelcódigoHTML.
Lossitiosaccesiblessonlosúnicosconunaaudienciapotencialglobal,yaquepermiten
elaccesoatodoslosusuariosyatodoslosdispositivos.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Generalmente,lossitiosaccesiblessonmásfácilesdeutilizartambiénparalosusuarios
sindiscapacidades.
La creación de sitios accesibles puede realizarse siguiendo las recomendaciones establecidas
por el W3C y que se recogen en el documento Web Content Accessibility Guidelines
(http://www.w3.org/WAI/intro/wcag.php)(WCAG).
LasrecomendacionesdelWCAG1.0estánformadaspor65requisitosqueunsitiowebdebe
cumplirparaconsiderarseaccesible.Losrequerimientosseagrupanenprioridades.
Los requisitos de prioridad 1 son de obligado cumplimiento, los de prioridad 2 son
recomendablesylosdeprioridad3sondeseables.
Si un sitio web cumple con todos los requisitos de prioridad 1, se considera que el sitio es
conformealnivelAdeaccesibilidad.ElnivelAAdeaccesibilidadestáreservadoparalossitios
que cumplan todos los requisitos de prioridad 1 y prioridad 2. Finalmente, los sitios que
cumplenlos65requisitos,sonconformesalnivelAAAdeaccesibilidad.
33
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
5.2.DISEÑOUNIVERSAL
Elobjetivodeldiseñouniversales“simplificarlarealizacióndelastareascotidianasmediante
laconstruccióndeproductos,serviciosyentornosmássencillosdeusarportodaslaspersonas
ysinesfuerzoalguno.Eldiseñouniversal,asípues,beneficiaatodaslaspersonasdetodaslas
edadesyhabilidades.”
Consta de siete principios básicos que deben cumplir estos servicios y productos, entre ellos
laspáginasyaplicacionesweb.Lossieteprincipiosysuspautasparaquesecumplanson:
1)Principio:Usoequiparable
Eldiseñoesútilyvendibleapersonascondiversascapacidades.
PautasparaelPrincipio1:
9 Queproporcionelasmismasmanerasdeusoparatodoslosusuarios:idénticascuando
esposible,equivalentescuandonoloes.
9 Queevitesegregaroestigmatizaracualquierusuario.
9 Las características de privacidad, garantía y seguridad deben estar igualmente
disponiblesparatodoslosusuarios.
9 Queeldiseñoseaatractivoparatodoslosusuarios.
2)Principio:Usoflexible
Eldiseñoseacomodaaunampliorangodepreferenciasyhabilidadesindividuales.
PautasparaelPrincipio2
9 Queofrezcaposibilidadesdeelecciónenlosmétodosdeuso.
9 Quepuedaaccederseyusarsetantoconlamanoderechacomoconlaizquierda.
9 Quefacilitealusuariolaexactitudyprecisión.
9 Queseadaptealpasooritmodelusuario.
3)Principio:Simpleeintuitivo
El uso del diseño es fácil de entender, atendiendo a la experiencia, conocimientos,
habilidadeslingüísticasogradodeconcentraciónactualdelusuario.
PautasparaelPrincipio3
9 Queeliminelacomplejidadinnecesaria.
34
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
9 Queseaconsistenteconlasexpectativaseintuicióndelusuario.
9 Quedispenselainformacióndemaneraconsistenteconsuimportancia.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
9 Queseacomodeaunampliorangodealfabetizaciónyhabilidadeslingüísticas.
9 Queproporcioneavisoseficacesymétodosderespuestaduranteytraslafinalización
delatarea.
4)Principio:Informaciónperceptible
Eldiseñocomunicademaneraeficazlainformaciónnecesariaparaelusuario,atendiendoa
lascondicionesambientalesoalascapacidadessensorialesdelusuario.
PautasparaelPrincipio4
9 Que use diferentes modos para presentar de manera redundante la información
esencial(gráfica,verbalotáctilmente)
9 Queproporcionecontrastesuficienteentrelainformaciónesencialysusalrededores.
9 Queamplíelalegibilidaddelainformaciónesencial.
9 Que diferencie los elementos en formas que puedan ser descritas (por ejemplo, que
hagafácildarinstruccionesodirecciones).
9 Queproporcionecompatibilidadconvariastécnicasodispositivosusadosporpersonas
conlimitacionessensoriales.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
5)Principio:Contoleranciaalerror
El diseño minimiza los riesgos y las consecuencias adversas de acciones involuntarias o
accidentales.
PautasparaelPrincipio5
9 Que disponga los elementos para minimizar los riesgos y errores: elementos más
usados,másaccesibles;yloselementospeligrososeliminados,aisladosotapados.
9 Queproporcioneadvertenciassobrepeligrosyerrores.
9 Queproporcionecaracterísticassegurasdeinterrupción.
9 Quedesalienteaccionesinconscientesentareasquerequierenvigilancia.
6)Principio:Queexijapocoesfuerzofísico
Eldiseñopuedeserusadoeficazyconfortablementeyconunmínimodefatiga.
PautasparaelPrincipio6
9 Quepermitaqueelusuariomantengaunaposicióncorporalneutra.
35
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
9 Queutilicedemanerarazonablelasfuerzasnecesariasparaoperar.
9 Queminimicelasaccionesrepetitivas.
9 Queminimiceelesfuerzofísicocontinuado.
7)Principio:Tamañoyespacioparaelaccesoyuso
Que proporcione un tamaño y espacio apropiados para el acceso, alcance, manipulación y
uso,atendiendoaltamañodelcuerpo,laposturaolamovilidaddelusuario.
PautasparaelPrincipio7
9 Queproporcioneunalíneadevisiónclarahacialoselementosimportantestantopara
unusuariosentadocomodepie.
9 Que el alcance de cualquier componente sea confortable para cualquier usuario
sentadoodepie.
9 Queseacomodeavariacionesdetamañodelamanoodelagarre.
9 Que proporcione el espacio necesario para el uso de ayudas técnicas o de asistencia
personal.
Fuente: Centro para el Diseño Universal (NC State University, The Center for Universal Design, an initiative of the
CollegeofDesign)
Traducciónyadaptación:FundaciónSidar
5.3.USABILIDAD
SegúnlaOrganizaciónInternacionalparalaEstandarización(ISO)lausabilidadpuededefinirse
dedosmaneras:
ISO/IEC9126:
“Lausabilidadserefierealacapacidaddeunsoftwaredesercomprendido,aprendido,usado
yseratractivoparaelusuario,encondicionesespecíficasdeuso”
ISO/IEC9241:
“Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar objetivos
específicosausuariosespecíficosenuncontextodeusoespecífico”
La usabilidad implica preguntarse cosas como las siguientes, que pueden responderse
realizandoanálisisdeusuarios/visitantesytareasalplanificarunproyectoweb:
36
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
Técnico de Soporte informático
¿Quiénessonlosusuarios,cuálessusconocimientos,yquépuedenaprender?
¿Cuáleslaformacióngeneraldelosusuarios?
¿Cuáleselcontextoenelqueelvisitanteestátrabajando?
¿Quédebedejarsealamáquina?¿Quéalusuario?
Otrasconsideracionesincluyen:
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
¿Quéquierenonecesitanhacerlosvisitantes?
¿Pueden realizar fácilmente sus tareas previstas? Por ejemplo, ¿pueden realizar las
tareasprevistasalavelocidadesperada?
¿Cuántapreparaciónnecesitanlosvisitantes?
¿Qué documentación u otro material de apoyo están disponible para ayudar al
usuario?¿Puedeéstehallarlasrespuestasquebuscanenestosmedios?
¿Cuálesycuántoserrorescometenlosusuarioscuandointeractúanconelproducto?
¿Puedeelvisitanterecuperarsedeloserrores?¿Quéhadehacerparaello?¿Ayudael
productoarecuperarsedeloserrores?Porejemplo,¿muestraelsoftwaremensajesde
erroresinformativosynoamenazantes?
¿Se han tomado medidas para cubrir las necesidades especiales de los usuarios con
discapacidades?(Esdecir,¿sehatenidoencuentalaaccesibilidad?)
WWW.ECLAP.JCYL.ES
Losprincipiosbásicosenlosquesebasalausabilidadson:
WWW.ECLAP.JCYL.ES
Todos estos temas te permitirán, además, fidelizar visitas, es decir, hacer que tus visitantes
vuelvanunayotravez,puestoquealponerlesfácillanavegaciónportusitiomejorarásmucho
laimagendetuweb.
Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una
interacción efectiva con el sistema o producto. Está relacionada con la sintetización,
familiaridad,lageneralizacióndelosconocimientospreviosylaconsistencia.
Flexibilidad:relativaalavariedaddeposibilidadesconlasqueelusuarioyelsistema
pueden intercambiar información. También abarca la posibilidad de diálogo, la
multiplicidad de vías para realizar la tarea, similitud con tareas anteriores y la
optimizaciónentreelusuarioyelsistema.
Robustez:eselniveldeapoyoalusuarioquefacilitaelcumplimientodesusobjetivos.
Está relacionada con la capacidad de observación del usuario, de recuperación de
informaciónydeajustedelatareaalusuario.
37
Promoción Interna de
Técnico de Soporte Informático
TEMA 20
BIBLIOGRAFÍA
Ͳ
JenniferNiederstRobbins.DiseñoWeb,guíadereferencia.
Ͳ
DesarrollodeAplicacionesWebDinámicasͲUNED
PÁGINASWEBCONSULTADAS
Ͳ
http://www.sidar.org/(FundaciónSidar)
Ͳ
www.w3c.es
Ͳ
www.accesible.es
Técnico de Soporte informático
38