Está en la página 1de 13

DiseoWEB

Nivel:5semestre Horassemanales:3horas Cdigo:130082 Crditos:2crditos

DiseoWEB

HerramientasdeDISEO: RecursosGrficos SoftwaredeDiseo LenguajedeProgramacin

DiseoWEB

Contenidocursopractico;
LENGUAJEPROGRAMACION ProgramaWYSIWYG
(whatyouseeiswhatyouget)

HTML CSS
JAVASCRIPT PHP

AdobeDreamweaver
AdobeFireworks AdobeFlash

DiseoWEB

HTML>
Hyper Text Markup Languaje

Lenguajequepermiteestructurarlainformacindeundocumentocon ayudadeetiquetas.Parasimplificarlascosaspermitedecir:aqumuestro unprrafodetexto,aquunaimagen,aquunapalabraennegrita DominarellenguajeHTMLesdominarelncleodelprocesodecreacin deunsite ositioweb.

<etiqueta>contenido</etiqueta>

DiseoWEB

CSS>
Cascading StyleSheets

Etiquetasqueseencargandedarformatooestiloalcontenidodeuna paginaWEB. Prrafo { Color:negro; Tamao:grande; Efecto:subrayado; }

DiseoWEB

Loscontenidosdelaspginaswebse encuentranorganizadosenbloques.El bloqueprincipal(bloquepadre)esel BODY,queasuvezcontienealosdems bloques;elencabezado,botonera, prrafos,imgenes,tablasetc.

Siseaplicaunestiloalbloquerojo,por ejemplo,seaplicaranestilosatodoslos demsbloquesqueestecontiene.Estose conocecomoprincipiodeherencia.Los estilossiempreseaplicarandepadresa hijosperonoalrevs.

DiseoWEB

3 manerasdeaplicarCSS
CSSproporcionatrescaminosdiferentesparaaplicarlasreglasdeestiloaunapginaWeb. Unahojadeestiloexterna,queesunahojadeestiloqueestalmacenadaenunarchivodiferenteal archivodondesealmacenaelcdigoHTMLdelapginaWeb.Estaeslamaneradeprogramarms potente,porqueseparacompletamentelasreglasdeformateoparalapginaHTMLdelaestructura bsicadelapgina. Unahojadeestilointerna,queesunahojadeestiloqueestincrustadadentrodeundocumento HTML.(Vaaladerechadentrodelelemento<head>).Deestamaneraseobtieneelbeneficiode separarlainformacindelestilo,delcdigoHTMLpropiamentedicho.Sepuedeoptarporcopiarla hojadeestiloincrustadadeunapginaaotra,(estaposibilidadesdifcildeejecutarsisedeseapara guardarlascopiassincronizadas).Engeneral,lanicavezqueseusaunahojadeestilointerna,es cuandosequiereproporcionaralgunacaractersticaaunapginaWebenunsimplefichero,por ejemplo,siseestenviandoalgoalapginaweb. Unestiloenlnea,queesunmtodoparainsertarellenguajedeestilodepgina,directamente,dentro deunaetiquetaHTML.Estamaneradeprocedernoesexcesivamenteadecuada.Alincrustarel formateodentrodeldocumentodelapginaWebladescripcindelapgina,aniveldecdigose convierteenunatarealarga,tediosaypocoelegantederesolverelproblemadelaprogramacinde lapgina.Estemododetrabajosepodrausardemaneraocasionalsisepretendeaplicarun formateoconprisa,alvuelo.Noestodoloclaro,oestructurado,quedeberaser,perofunciona.

DiseoWEB

CSSdaformatoaloscuadrosrectangularesquesecreanconHTML.Las posibilidadesdeformatodeCSSsepuedendividirentresreas:

Fuenteycolores: Formatodelcontenidodeloscuadros Distanciasybordes: formatodelospropioscuadros(modelode cajas) Layout: modificalaposicindeloscuadrosenlapginaweb

DiseoWEB
HojasdeEstiloenCascada(css)
Las hojas de estilo en cascada (Cascading Stylesheets) ofrecen propiedades para ampliar el lenguaje HTML en la representacin visual de las pginas web. El lenguaje CSS, definido por primera vez el ao 1996, es el ms conocido y utilizado para definir las propiedades de formato de los diferentes elementos HTML. Este lenguaje permite vincular hojas de estilo a las paginas HTML, aportando la informacin sobre el aspecto visual de ellas, pudiendo separar completamente la estructura de contenidos de su representacin.

Quaportasepararlaestructuradeldiseo? MenoscdigoMaslegibilidad Facilitalasactualizaciones Accesibilidad Usabilidad Buscadores Costoseconmicos

DiseoWEB
RepresentacingraficadeestructuradecajasutilizandolaetiquetaDIV

DiseoWEB
EjemplodeestructuradecajasenunalistaHTML

DiseoWEB <!DOCTYPEhtmlPUBLIC>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Definecomosellamaelelementorazdeldocumento(html) QueversindeHTMLseutiliza(XHTMLV1.0Transitional) Dondesepuedeencontrarellibrogramaticalcorrespondiente(URL) <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> Sumisinesgarantizarlaunicidaddelosnombresdeatributosyelementos Elatributolang indicaelidiomaenqueestescritolapagina(es=espaol) <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-9959-1"/> <title> Nombre de la pagina </title> </head> Enelhead delapginaencontramosinformacinqueanalizaranlosnavegadoresomotoresdebsqueda. Laetiqueta<meta> muestrametadatostilesparaservidoresweb,navegadoreswebyrobotsdemotores debsqueda Laetiqueta<title> nombraalapagina,apareciendoestaenlabarradetitulodelnavegador

DiseoWEB <!DOCTYPEhtmlPUBLIC>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Definecomosellamaelelementorazdeldocumento(html) QueversindeHTMLseutiliza(XHTMLV1.0Transitional) Dondesepuedeencontrarellibrogramaticalcorrespondiente(URL) <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> Sumisinesgarantizarlaunicidaddelosnombresdeatributosyelementos Elatributolang indicaelidiomaenqueestescritolapagina(es=espaol) <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-9959-1"/> <title> Nombre de la pagina </title> </head> Enelhead delapginaencontramosinformacinqueanalizaranlosnavegadoresomotoresdebsqueda. Laetiqueta<meta> muestrametadatostilesparaservidoresweb,navegadoreswebyrobotsdemotores debsqueda Laetiqueta<title> nombraalapagina,apareciendoestaenlabarradetitulodelnavegador