HTML i programari

11 febr. HTML i programari

Posted at 11:54h in Web by Jaume Blanc

Índex de la segona sessió:

  • Introducció al software, Dreamweaver
  • Creació d’un site.
  • Rutes relatives i absolutes.
  • Etiquetes HTML.
  • Optimització de material per a web.
  • Presentació dels Wireframes del projecte final.
  • Pràctica: Inici del projecte web, dissenyar gràficament el site del projecte final
  • Recerca de grups d’etiquetes HTML

Introducció al software

Dreamweaver és un programa d’Adobe per crear i editar llocs web.

De la interfície del programa destacarem:

  1. Barra de menús
  2. Finestra del document
  3. Barra d’estat
  4. Inspector de Propietats
  5. Panell inserir
  6. Panell d’estils CSS
  7. Panell d’arxius

dreamweaver-area-treball

Barra de menús

Conté tots els menús, és una alternativa als panells.

dreamweaver-barra-menus

Sota de la barra de menús, a la dreta de barra de l’aplicació pots escollir diferentes personalitzacions de la interfície. D’entrada ens anirà bé l’opció “Diseñador”, però si personalitzes les vistes dels diferents panells pots guardar el teu espai de treball.

Finestra del document

És l’espai de treball propi de Dreamweaver i consta de:

  • Vista disseny: representació visual del document editable.
  • Vista codi: vista del document en llenguatge HTML
  • Dividir: alterna les vistes de disseny i la de codi en una sola finestra.
  • Vista en viu: mostra del document més propera al resultat que veurem en el navegador. No és editable.
  • Codi en viu: disponible quan actives la vista en viu. Ensenya com veu el codi el navegador. No és editable

dreamweaver-finestra-document

Barra d’estat

dreamweaver-barra-estat

Dóna informació addicional del document i té:

  • Selector d’etiquetes HTML, és molt útil quan tens documents molt llargs.
  • Eina mà
  • Eina zoom
  • Tamany de la finestra del document
  • Pes del document
  • Codificador de caràcters

Inspector de propietats

dreamweaver-propietats

Pots veure i editar les propietats més comunes de l’element que tens seleccionat.

Depen de què tens actiu, HTML o CSS, mostra les propietats dels elements HTML o de les regles CSS.

Panell Inserir

dreamweaver-insertar

Forma part dels panells situats a la dreta. Té botons per crear o inserir objectes com:

  • Vincles
  • Ancoratges
  • Taules
  • Etiquetes div
  • Imatges
  • etc…

Tingues en compte que també hi ha el menú “Insertar” que està a la barra de menús.

Panell d’estils CSS

dreamweaver-css

 

Té dues vistes:

  1. “Todo” pots veure totes les regles aplicades al document
  2. “Actual” veus les regles o propietats que afecten a l’element de la pàgina seleccionat.

Quan selecciones un element a la finestra del document pots modificar les seves propietats.

En la propera sessió explicarem els estils CSS i veurem com funciona aquest panell.

Panell d’arxius

dreamweaver-archivos

Permet administrar els arxius i les carpetes del nostre lloc web.

El primer pas que hem de fer quan treballem amb Dreamweaver és administrar el nostre lloc web, així establirem la carpeta arrel des de la que es troben tots els arxius. Perquè una web funcioni bé tots els seus arxius han des estar dins de la seva carpeta arrel.

 

Quan fem una web, primer treballem en un ordinador local, un cop enllestida posarem la carpeta arrel a un servidor, que és un ordinador connectat a la xarxa d’internet les vint i quatre hores. Per això és molt important posar les rutes de tots els arxius relatives a la carpeta arrel, així es veuran les imatges i els enllaços funcionaran.

Les carpetes arrels contenen:

  • Arxius HTML
  • Carpetes amb altres arxius.
  • Imatges (jpg, gif, png) ubicades dins de la seva carpeta
  • Scripts, arxius CSS…

 

Creació d’un site

  1. Des de el menú “Sitio” selecciona “Administrar sitios…“
  2. Clica “Nuevo” i s’obrirà “Configuración del sitio para…“
  3. A “Nombre del Sitio“, posa un nom curt, com ara: “el teu nom web“. El nom és d’us intern.
  4. A “Carpeta de sitio local“, clica la icona d’una carpeta,
  5. Navega pel teu ordinador per escollir un lloc on guardar la carpeta arrel del teu lloc web. S’obrirà la finestra “Elegir carpeta raíz“. Crea una nova carpeta i li poses el teu nom així: “nom-cognom-web“.
  6. Clica el botó “Seleccionar“
  7. A Configuración del sitio para… clica “Guardar“
  8. A Administrar sitios clica “Listo“

Ja tens llesta la Carpeta arrel !

Fixa’t en el panell “Archivos” on ara surt la carpeta que has fet i on apareixeran els altres arxius que aniràs creant.

Recorda que els noms de la carpeta i els noms dels arxius no poden tenir espais en blanc, ni accents, ni lletres llatines, ni caràcters especials.

 

Rutes relatives

Un cop hem administrat un lloc web les rutes que establim amb els seus arxius poden ser relatives a la carpeta arrel. Com vam veure en l’introducció a HTML, en el cas de les imatges:

ruta-img-1

Ruta d’una imatge dins d’una carpeta que es diu “imatges”, es posa el nom de la carpeta seguit d’una barra: “imatges/”

<img src=”imatges/logo.png”  />
ruta-img-2

Ruta d’una imatge a una carpeta superior, s’indica amb dos punts i una barra: ” ../”:

<img src=”../logo.png”  />
ruta-img-3

Ruta d’una imatge a la mateixa carpeta: s’escriu directament el nom de l’arxiu:

<img src=”logo.png”  />

El mateix criteri es fa servir amb les rutes que es fan amb els enllaços.

 

Rutes absolutes

Quan col·loquem una web a Internet, els arxius de la web (pàgines HTML i imatges, entre d’altres) poden escriure’s si posem tota la ruta que portaria cap a aquest arxiu.

Aquesta ruta dependrà del nom del domini on haguem allotjat la nostra web.

Per exemple aquesta ruta:

http://laboratori-digital.elisava.net/wp-content/uploads/2013/02/barcelona-skyline.jpg

et durà a aquesta imatge:

 

barcelona-skyline

 

Pots posar aquesta ruta a qualsevol web i sempre carregaràs aquesta la imatge.

 

Creació d’una pàgina HTML

  1. Menú Archivos / Nuevo
  2. Tipo de página HTML
  3. Tipo de documento HMTL 5
  4. Clica Crear
  5. Guarda aquesta pàgina amb el nom “index.html“

I així has fet una pàgina html.

La primera pàgina que es carrega d’una web sempre es diu “index.html”. Així, si posem la nostra web a un servidor, aquest sempre cercarà la pàgina index.html.

 

Recorda que segons tinguem activa la vista de Código o Dividir / Diseño veurem (o no) el codi que escriu Dreamweaver.

Fixa’t que al crear una nova pàgina Dreamweaver ha creat les diferents etiquetes HTML que vam escriure en la primera sessió:

<!DOCTYPE...>, <html>, <head>, <title>, <body>

dreamweaver-document-html

És molt recomenable revisar amb la vista de Código el codi que escriu Dreamweaver ja que de vegades pot inserir etiquetes dintre d’altres etiquetes de manera que no ens vagi bé.

 

Edició d’una pàgina HTML

  • Posa títol a la pàgina: “La meva web” substituint el text “Documento sin título“. Aquest títol sortirà en la barra superior de la finestra del navegador i és el títol de les etiquetes <title> que s’escriuten dins del <head>.

dreamweaver-titol-head

  • Activa la vista Diseño i clica sobre la pàgina en blanc. Ara anem a veure com podem editar els textos amb l’inspector de Propietats.
  • Escriu el títol del document. Aquest serà el títol que es trobarà dins de les etiquetes <body>. Selecciona el text que farà de títol i a Propietats, del menú desplegable Formato, selecciona Encabezado 1.

dreamweaver-titol

  • Clica intro i escriu dos paràgrafs diferents. Per defecte Dreamweaver escriu els textos dins de les etiquetes <p> de paràgraf.
  • Selecciona algunes paràules i les poses en negreta.

dreamweaver-negreta

 

  • Fes una llista també.

dreamweaver-llista

 

  • Selecciona un text i fes un enllaç escrivint l’adreça de l’enllaç dins de la casella Vínculo del panell de Propietats.

dreamweaver-link

  • Activa ara la vista Código i comprova com Dremaweaver ha escrit etiquetes les etiquetes HTML mentre nosaltres hem treballat d’una manera més wysiwyg (What You See Is What You Get):

dreamweaver-codi

 

Wireframe

Quan planejem fer una web comencem per plantejar un esquema que representi una guia visual que de l’estructura de la web.

En el wireframe no es veuen ni tipografies, ni color ni els gràfics ja que posa l’accent en la funcionalitat, el comportament i la jerarquia dels continguts.

Són esborranys que poden fer-se a mà i la serva prioritat és:

  • El tipus d’informació que es mostra
  • Funcions disponibles,
  • La jerarquia de l’informació
  • Regles per a la visualització de certs tipus d’informació
  • L’efecte dels diferents escenaris a la pantalla

wireframe

 

Presentació dels Wireframes del projecte final

En el següent botó trobaràs el Wireframe que treballarem, primer prerpararem el Layout HTML, on estructurarem tots els continguts amb etiquetes HTML i després farem el Layout CSS, on donarem estil a les etiquetes HTML.

WIREFRAME DE LABORATORI DIGITAL - PDF

 

Pots trobar més informació sobre els Wireframes a:

 

Recerca i presentació dels següents grups d’etiquetes HTML

A classe assignarem a grups de 5 persones la recerca d’un dels següents grups d’etiquetes HTML:

  • <nav> <ol>, <ul>, <li>, <a>
  • <p> <span> <br> <strong>
  • <img> <figure> <audio> <video>
  • <header>, <footer> <div>, <article> <section>
  • <!DOCTYPE html><html><head><title><link>
  • <meta>, <script>, <style>

Heu de preparar una presentació que no superi els 30 minuts i que permeti exposar de manera clara i concisa el tema investigat, tot responent les següents preguntes:

  • Per què són necessaris aquests elements?
  • Quina és la seva funció en un document web?
  • Quina ha estat la seva evolució?
  • Exemples del seu us.

Entrega

  • Heu d’entregar un document PDF que inclogui el noms dels components del grup.
  • També s’han d’incloure un resum de les presentacions realitzades pels altres grups.
  • S’ha d’adjuntar bibliografia i referències de les fonts consultades.
RECERCA ETIQUETES HTML - PDF