4 MAQUETACIÓ WEB.ssh.eupmt.tecnocampus.cat/~jou/SM/apunts/SMmTema4.pdf · 2017-07-25 · 4....

Joan Jou Majó ESUP Tecnocampus

4-1

4

4 MAQUETACIÓ WEB.

La maquetació consisteix en dissenyar l’estructura i forma de presentar la informació. En el cas de la publicació en la web és especialment important estudiar el disseny basat en patrons estàndards, dissenyar pensant amb l'usuari per augmentar l'usabilitat i l'accessibilitat de l'aplicació. Veurem en aquest capítol dos patrons de maquetació de les pàgines web: patró dels tres panells i patró de pàgina única, fent especial èmfasi en el disseny adaptatiu al dispòsitiu (responsive design).

4. Maquetació web.

5-2

4.1 Concepte d'Interfície Gràfica d'Usuari (GUI). Avui en dia, un lloc web no és només un simple aparador per presentar informació d'una forma més o menys atractiva sinó que, les webs serveixen per fer coses: buscar informació específica, comprar, fer transaccions bancàries, escoltar la radio, etc. Així doncs, una web s'assembla a un programa. Cal definir la manera com es presenta la informació a l'usuari i quines són les regles d'interacció de l'usuari amb el programa. Això és la Interfície Gràfica d'Usuari. Perquè un programa sigui útil ha de ser fàcil d'usar, és a dir, l'usuari ha de saber com interactuar amb el programa per donar-li ordres. Però, si els llocs webs són programes i hi ha milions de llocs web voldrà dir que cal saber utilitzar milions de programes. Això només és possible si les interfícies dels programes s'assemblen, és a dir, si s'ha utilitzat estàndards. Per exemple, la següent imatge és el portal GUI d'una determinada web, a la qual hem amagat la informació d'identitat,

Sabríeu a què es dedica aquesta web, quin servei dóna? Molt probablement respondríeu que es tracta d'un cercador perquè segueix el patró de tots els cercadors: un control per editar un text que indica què és el que s'està cercant i un botó per ordenar la cerca. Concretament, es tracta del cercador Yahoo (https://es.search.yahoo.com/). Observeu la similitud amb un altre cercador, el de Google


4-3

4.2 El patró de 3 panells / 2 o 3 columnes. Per a una web genèrica, no especialitzada en donar un servei molt concret, com era el cas dels cercadors, la GUI patró recomanada pels experts en usabilitat és l'anomenat patró dels "3 panells" perquè satisfà les expectatives de l'usuari navegant. Un usuari quan va a parar a una web vol saber immediatament tres coses:

• On sóc? • Què hi ha aquí? • On puc anar ara?

Cada àrea de la GUI dóna resposta a una de les preguntes:

• l'àrea del logotip i tagline identifica el lloc web: de qui és i per a què serveix. • l'àrea de contingut, la més gran, ens mostra el que hi ha en aquest lloc web. • les àrees de navegació: horitzontal per a les seccions i vertical per a les diferents pàgines de cada secció

ens responen a la pregunta de a on puc anar o què puc trobar aqui. El panell 2 és el que té més variants en funció de l'amplada del dispositiu i de la quantitat d'informació a presentar. Si l'amplada del dispositiu que s'usuarà és gran (pantalla d'ordinador) se sol incloure una tercera columna, a la dreta, on es col.loquem informació secundària, com banner publicitaris, cercadors, enllaços d'interès, etc. L'objectiu és que la columna de continguts no sigui escesivament ampla. Si hi ha molta informació (seria el cas d'un diari digital), s'elimina la navegació vertical, de manera que les subseccions queden absorvides en la propia navegació horitzontal.

Analitzem, amb més detall, el cas de l'ajuntament d'Arenys de Munt,

http://www.arenysdemunt.cat/arbregernika

Navegació horitzontal / Seccions

Logotip Tagline

Navegació vertical

Subseccions (pàgines secció activa)

Peu de pàgina

Utilitats

Títol de la pàgina

Portada > Secció > Subsecció > Títol de la pàgina

Contingut

Panell 1

(capçalera)

Panell 2

(dues columnes)

Panell 3

(peu)

Panell 1

(capçalera)

Panell 2

(tres columnes)

publicitat

en la tercera columna

4. Maquetació web.

5-4


4-5

Vegem aquests elements amb més detall: Identitat En aquest model la identitat queda destacada a l'àrea superior esquerra amb un logotip que es va repetint a totes les pàgines. És una zona important de la pàgina, doncs, en tot moment volem saber on som. S'ha escollit com a logo una imatge parcial, monocromàtica i parcialment inclinada de l'escut del poble,

escut oficial Quan el logotip no és prou expressiu (s'ha eliminat el nom del poble), s'afegeix una etiqueta (tagline) o frase explicativa, que en aquest cas és, justament el nom del poble però amb lletres de mida més gran.

Navegació. És el mecanisme principal per trobar la informació de la web. La informació ha d'estart classificada en seccions i subseccions (arquitectura de la informació). La barra horitzontal conté vincles a cada una de les seccions de la web,

Quan es fa clic en una secció (en la imatge de la pàgina anterior hem fet clic a la secció "EL POBLE"), la columna de l'esquerra mostra els vincles a les diferents pàgines de la secció activa,

També, a la part superior, se sol posar una línia d'utilitats no relacionades directament amb els continguts: mapa del web, mail, suggeriments, enllaços, ... En el nostre exemple hi trobem informació del temps, xarxes socials (instagram, facebook i twiter) i els servei de traducció automàtica de la pàgina de Google, És habitual que la primera secció del menú horitzontal ens porti al portal de la web. Aqusta secció se sol anomenar portada (o home). Sovint aquesta funció també s'assigna al logotip, però molts usuaris no ho saben. En l'exemple està assignat al tagline. Una forma alternativa de trobar la informació és a través d'un cercador, tal com hem dit a la secció anterior. Per això, aquesta web destaca un cercador en la capçalera,

4. Maquetació web.

5-6

És important recordar on estem i quin ha estat el camí seguit per arribar a la informació actual. En l'exemple, es la línia de navegació, just sota la capçalera, anomenada “breadcrumb” (terme tret del conte "Patufet" de Charles Perrault),

Continguts. És la part més important de la pàgina, on trobem la informació que estabem cercant. Per reforçar quina és la secció activa, els continguts porten per títol el nom de la secció,

Peu de pàgina. És la part inferiro de la pàgina i és el lloc adequat per posar la informació de contacte, copyrights, credencials, un mapa del web que és un índex de la informació del web implementat amb hipertext (és una altre manera de trobar la informació),

Al peu de pàgina se sol reproduir la navegació per les seccions. En aquest exemple, hi trobem un índex de les seccions i subseccions implementat amb hipertext (és una altre manera de trobar la informació) Com a exercici, repeteix aquest anàlisi per a la següent web, https://netbeans.org/features/html5/index.html , identificant els 3 panells, número de columnes, identitat, navegació, utilitats, peu, etc.


4-7

4. Maquetació web.

5-8

4.3 Maquetació basada en HTML5 + CSS. Actualment, la tècnica que s’usa per crear la maquetació de la GUI és a través d'elements HTML de maquetació genèrics i semàntics, donant el format (mides i posició) a través del CSS aplicat a cada element. Els elements HTML de maquestació són:

� genèrics • div: divisió, element en àmbit de bloc que ens permetrà parcelar la pàgina creant els diferents

panells i columnes. Sempre caldrà identificar-la i parlarem de capa (layer) � semàntics (HTML5)

• header: capçalera, introducció d’un contingut • nav: bloc de navegació principal • main: per contenir tota la pàgina. Serveix per fixar l'amplada i el centrat de la pàgina. • aside: contingut secundari (lateral) • article: composició autocontinguda, reutilitzable independentment. • section: agrupació temàtica del contingut, típicament amb una capçalera (header) • footer: qui ha escrit la pàgina o article, normalment al final.

Les propietats CSS útils per establir la posició dels elements de maquetació són:

• position • float, clear • display • overflow

Amb aquesta tècnica podem mantenir els continguts (HTML) i canviar completament la maquetació (CSS). En teniu un bon exemple en la web www.csszengarden.com

4.3.1 Propietat CSS position. Suposem el següent codi HTML i CSS, <!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>position</title>

<style type="text/css">

#capa_1 {

position: absolute; /* respecte el primer element contenidor amb posicionament explícit: absolute o relative */

left: 130px; top: 80px; /* posició */

width: 240px; height: 120px; /* mides */

background-color: #99FFCC;

}

</style>

</head>

<body>

<div id="capa_1">Aquest és el contingut de la capa_1</div>

</body>

</html>

left: 130px;

top: 80px;

height: 120px;

width: 240px;


4-9

Les propietats top, bottom, left, i right es calculen a partir dels marges (margin) de la divisió posicionada (la de color verd) i es prenen respecta la capa que defineix els eixos coordenats x y (la de color taronja):

Prova-ho tu mateix: http://ssh.eupmt.tecnocampus.cat/~jou/LM/exercicis/exercici_1-0.html

Els valors posibles per a la propietat position són:

• static, és el valor per defecte i la posició la determina el flux normal del codi html de la pàgina. Amb aquest posicionament, les propietats: top, bottom, left, i right són ignorades.

• relative, els valors de top, bottom, left, i right modifiquen la posició respecta a la que li pertocaria com a static.

• absolute, els valors de top, bottom, left, i right fan referència a la posició respecta la primera capa pare que té posició determinada (fixed, relative o absolute).

• fixed, els valors de top, bottom, left, i right fan referència a la posició respecta el navegador, és a dir, la capa fixa no canvia de posició encara que fem scroll a la pàgina.

Els posicionaments absolute i fixed fan sortir la capa del flux normal static o relative. Els posicionaments relative, absolute i fixed poden produir solapament de capes. La propietat z-index defineix el solapament. Com més gran és aquest valor, més a prop de l’observador està la capa.

position segueix flux normal

aplica z-index

aplica top, bottom, left, right

static (per defecte) Si No No relative Si Si Si, respecta la seva posició static fixed No Si Si, respecta al navegador absolute No Si Si, respecta al primer pare amb posicionament

diferent de static

margin-top

top

margin-bottom

margin-right margin-left

bottom

right

left

(0,0)

capa que defineix els eixos coordenats X Y

capa que estem posicionant

4. Maquetació web.

5-10

Vegem alguns exemples:

HTML CSS resultat

<div id="A">

<div id="A1">A1</div>


</div>

<div id="B">

<div id="B1">B1</div>

</div>

div{margin: 10px;}

#A{background-color:#F00;}

#A1{background-color:#FF0;}

#A2{background-color:#0FF;}

#B{background-color:#0F0;}

#B1{background-color:#F0F;}

/* observeu el colapse dels marges */

#A{background-color:#F00;

border:solid;

}

/* si posem vora, es respecten els margin-top i

margin-bottom */

div{margin: 10px;}

#A{position:relative; width:200px;

background-color:#F00;}


#A2{position:relative; top: -20px;

left: 20px; background-color:#0FF;}

#B{position:relative; width:300px;

background-color:#0F0;}

#B1{position:relative; bottom: 15px;

background-color:#F0F;}

<div id="A">



</div>

<div id="B">



</div>

*{margin:0; padding:0;}

div{margin: 10px;}

#A{position:relative; width:200px;



#A2{position:absolute; top: 50px;



background-color:#0F0;}

#B1{position:absolute; top: 20px;



<div id="A">



</div>

<div id="B">


<div id="B2">B2 Lorem

ipsum dolor sit amet,

consectetuer adipiscing

elit, sed diam nonummy

nibh euismod tincidunt

ut laoreet dolore magna

aliquam erat volutpat.

Ut wisi enim ad minim

veniam, quis nostrud

exerci tation

ullamcorper suscipit

lobortis nisl ut aliquip

ex ea commodo consequat.

Duis autem vel eum

iriure dolor in

hendrerit.</div>

div{margin: 10px;}

#A{position:fixed; width:200px;



#A2{position:absolute; top: 30px;



left: 20px; background-color:#0F0;}


#B2{position:absolute; top: 20px;


Podeu provar aquests exemples i proposar canvis amb la web http://codepen.io/pen/


4-11

Vegeu i estudieu aquests altres exemples: http://ssh.eupmt.tecnocampus.cat/~jou/SM/ExemplesCSS/posicionament/boxmodel.html

La caixa 3 i 4 surten del flux normal. La posició de la caixa 4 és fixa independentment de la posició de la barra scroll del navegador.

4. Maquetació web.

5-12

4.3.2 Propietat CSS float. També es pot posicionar les capes a través de la propietat float (flotació) que pot prendre els valors left i right. La propietat float sempre ha d’anar acompanyada de width i converteix l’element HTML en un element d’àmbit block, automàticament. Els continguts de les capes següents a la capa amb propietat float activada no són tapats per aquesta però sí hi ha solapament de les capes. Per evitar el solapament cal activar la propietat float també en les següents capes. La propietat clear desactiva la flotació i pot prendre els valors: left, right i both

La caixa 2 està tapada per la 1 però, els continguts no.


4-13

4. Maquetació web.

5-14


4-15

4.3.3 Propietat CSS overflow. Si només fixem el valor de la propietat width, l’alçada de la capa s’adapta al contingut. Si fixem també la propietat height, cal dir com s’accedirà al contingut a través de la propietat overflow. Aquesta propietat pot prendre 3 valors diferents: hidden, scroll i auto amb els resultats que es pot veure en la imatge següent,

4. Maquetació web.

5-16

4.3.4 Propietat CSS display. Finalment, la propietat display ens permet canviar el mode per defecte de la caixa de l’element, passant-lo de block a inline i al inrevés. Quan aquesta propietat pren el valor none, l’element no es veu i no ocupa espai. També es pot donar el valor inline-block que actua com inline però permet fixar l'amplada i alçada de l'element. Si volem amagar l’element però que ocupi espai (per quan vulguem tornar-lo a veure) hem d’utilitzar la propietat visibility amb el valor hidden o visible (valor per defecte).


4-17

Veiem un exemple molt bàsic de maquetació amb el patró de 3 panells amb CSS, que utilitza aquests tipus de posicionament:

Article original: http://www.adobe.com/devnet/dreamweaver/articles/css_2c_tableless.html

El codi html, que conté la maquetació, és <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Exemple de GUI amb CSS, 2 columnes</title> <link href="demo.css" type="text/css" /> </head> <body> <main> <header> <p class="titol">Nom de la web </p> </header> <nav> <ul> <li><a href="#">Secció 1</a></li> <li><a href="#">Secció 2</a></li> <li><a href="#">Secció 3</a></li> <li><a href="#">Secció 4</a></li> </ul> </nav> <section id="contingut"> <p>Contingut</p> <p> </p> <p> </p> <p> </p> <p> </p> </section> <footer> <p>©2017 La meva web. All rights reserved.</p> </footer> </main> </body> </html>

i els estils són,

4. Maquetació web.

5-18

body { font: 100% Verdana, Arial, Helvetica, sans-serif; color: #000000; background: #ADA189; text-align: center; /* per centrar la capa pàgina en el cas IE */ margin: 0px; /* esborrem els marges i farciment per defecte */ padding: 0px; } p {font-size: 80%;} .titol { font: bold 130% Georgia, "Times New Roman", Times, serif; color: #333; margin: 0; padding: 20px 10px; } main { width: 960px; /* estàndard per una resolució 1024 */ background: #FFFFFF; text-align: left; /* Anul.lem el centrat pel text fet al body */ margin: 0 auto 0 auto; /* centrat */ } header {background: #DCCBAC;} nav { width: 140px; /* del contingut de la capa */ float: left; padding: 15px 10px; } section#contingut { margin: 0 0 0 165px; /* 140+10+10 */ padding: 15px; border-left: 1px solid #877D6C; } section#contingut p { line-height: 130%; } footer { clear: left; padding: 5px; border-top: 1px solid #877D6C; font-size: 80%; color: #736B5E; } /* estils per als vincles; ho explicarem en la següent secció */ nav li{list-style-type:none;} nav a:link { color: #736B5E; text-decoration: none; font-weight: bold; } nav a:visited { color: #666; } nav a:hover, nav a:active, nav a:focus { color: #333; }

Podeu provar l’exemple a http://ssh.eupmt.tecnocampus.cat/~jou/SM/ExemplesCSS/layouts/2col_fix_semantic.html


4-19

4.4 Menús de navegació.

4.4.1 Menús de navegació vertical. Normalment, en la zona de l'esquerra de la interfície gràfica d'usuari hi haurà el menú de navegació local, per a les diferents subseccions de la pàgina. Hi ha moltes formes de crear-lo. La primera serà a través de vincles hipertext. Si no corregim l'aparença dels vincles pot no agradar-nos l’aspecte que tenen atès que, per defecte, els vincles es mostren subratllats. Normalment, en el cas de la barra de navegació principal voldríem que l'aparença fos similar a uns botons. Això ho podem aconseguir si disposem de les imatges d'aquests botons o bé podem utilitzar estils (CCS) per modificar l'aparença dels vincles estàndards. Primer crearem el menú de navegació amb una llista no ordenada amb totes les subseccions:

<ul>

<li><a class="actiu" href="#">Quí som?</a></li>

<li><a href="#">Activitats</a></li>

<li><a href="#">Serveis</a></li>

<li><a href="#">Com es cullen?</a></li>

<li><a href="#">Plats amb bolets</a></li>

<li><a href="#">Tipus de bolets</a></li>

<li> </li>

<li><a href="#">Altres adreces</a></li>

</ul>

Ara canviarem l'aparença dels vincles usant estils. ul{

background-color:#F93;

width: 150px;

}

ul li{list-style-type:none;}

ul li a:link, ul li a:visited{

font: 100% bold Arial, Helvetica, sans-serif;

text-decoration: none;

line-height: 30px;

color: #ffffff;

}

ul li a:hover{color: #ffff00;}

ul li a:active{color: #009900;}

Amb els estils es poden dissenyar menú de navegació que semblin botons. Per exemple, ul{


width: 150px;

padding: 5px;

}

ul li{list-style-type:none;}

ul li a:link, ul li a:visited {

display:block; /* pas de inline a block */

width: 130px; /* per poder definir l'amplada*/

margin: 2px auto;

border: solid 2px #FFFFFF;

text-align: center;

font: 1em bold Arial, Helvetica, sans-serif;


line-height: 30px;

color: #FFFFFF;

}

ul li a:hover{

border: 2px solid #FF6600;

background-color: #FFFF00;

color: #000000;

}

ul li a:active { /* estem fent clic */

border: 2px solid #336633;

background-color: #CC9900;

color: #000000;

}

4. Maquetació web.

5-20

Un altre exemple seria, ul{

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: #f1f1f1;


}

li a{

display: block;

color: #000;

padding: 8px 16px;


}

li{

text-align: center;

border-bottom: 1px solid #555;

}

li:last-child{border-bottom: none;}

li a.actiu{

background-color: #4CAF50;

color: white;

}

li a:hover:not(.actiu){

background-color: #555;

color: white;

}


4-21

4.4.2 Menús de navegació horitzontal. També és possible fer la barra de navegació horitzontal usant llistes i CSS. Per exemple, <!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8" />

<title>navegació horitzontal</title>


body {

width: 960px; /* mida estàndard per a una resolució de 1024 */

margin-left: 30px;


}

ul#navegacio {

font-family: "Trebuchet MS", arial, helvetica, sans-serif;

font-size: 0.85em;

padding: 3px 0;

border-bottom: 1px solid #788; /* dibuixa la línia inferior de la barra */

}

ul#navegacio li {

list-style-type: none; /* treu el cercle de la llista */

display: inline; /* posa els ítems en la mateixa línia */

}

ul#navegacio li a {

text-decoration: none; /* es treu el sub-ratllat */

color: #3c3c3c;

background: #dedede;

padding: 3px 0.5em;

margin-left: 3px;


border-bottom: none;

}

ul#navegacio li a:hover {

color: #000;

background: #3fce9a;

border-color: #2334ed;

}

ul#navegacio li a#actiu {

background-color: #f8f8f8; /* dóna continuïtat amb el body */

border-bottom: 1px solid #f8f8f8; /* i pinta la línia de sota igual al body */

}

style>

</head>

<body>

<ul id="navegacio">

<li><a id="actiu" href="inici.html">Inici</a></li>

<li><a href="qui.html">Qui som?</a></li>

<li><a href="activitats.htm">Activitats</a></li>

<li><a href="serveis.htm">Serveis</a></li>

<li><a href="cullir.htm">Com es cullen?</a></li>

<li><a href="plats2.htm">Plats amb bolets</a></li>

<li><a href="tipus.htm">Tipus de bolets</a></li>

<li><a href="http://boletrovello.foro.st/">Fòrum</a></li>

</ul>

</body>

</html>

4. Maquetació web.

5-22

Un altre exemple, amb menu desplegable (dropdown menu) per a les subseccions,

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Barra de navegació horitzontal, amb "dropdown"</title>

<style>

ul{


margin: 0;

padding: 0;

overflow: hidden;


}

li{

float: left;

border-right:1px solid #bbb;

}

li:last-child{ border-right: none;}

li a{

display: block;

color: white;

text-align: center;

padding: 14px 16px;


}

li a:hover:not(.active .dropdown-content){


}

.active{ background-color: #4CAF50;}

li.dropdown {

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;


min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown-content a {

color: black;

padding: 12px 16px;


display: block;

text-align: left;

}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

display: block;

}

</style>

</head>

<body>

<ul>

<li><a class="active" href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li class="dropdown">

<a href="javascript:void(0)" class="dropbtn">Dropdown</a>

<div class="dropdown-content">

<a href="#">Link 1</a>



</div>

</li>

<li><a href="#contact">Contact</a></li>

<li style="float:right"><a href="#about">About</a></li>

</ul>

</body>

</html>


4-23

També podem realitzar disseny adaptatiu a la misa del dispositiu (responsive design) i amb la barra de navegació fixa a la part superior del navegador, <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {margin: 0;}

nav{

position: fixed; /* la barra de navegació romandrà fixa a la part superior del navegador */

top: 0;

width: 100%;

}

ul {


margin: 0;

padding: 0;

overflow: hidden;


}

ul li {float: left;}

ul li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;


}

ul li a:hover:not(.active) {background-color: #111;}

ul li a.active {background-color: #4CAF50;}

ul li.right {float: right;}

section{

padding:20px;

margin-top:48px; /* perquè no quedi ocult darrera la barra de navegació */

}

@media screen and (max-width: 600px){

ul li.right,

ul li {float: none;}

section{margin-top: 192px;} /* 4*48 */

}

</style>

</head>

<body>

<nav>

<ul>

<li><a class="active" href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li class="right"><a href="#about">About</a></li>

</ul>

</nav>

<section style="padding:0 16px;">

<h2>Exemple de disseny adaptatiu</h2>

<p>Aquest exemple usa media queries per posar el menú en vertical quan la mida de la pantalla és 600px o

menys.</p>

</section>

</body>

</html>

4. Maquetació web.

5-24

4.5 Patró de pàgina única (llibreria Bootstrap). Actualment, hi ha una gran disparitat de dispositius per accedir a internet, tots de diferent mides de pantalla: ordinador, tablet, smartphone. Sabem que el disseny de la maquetació és molt sensible a l'amplada de la pàgina, per tant, si volem que es pugui consultar la informació des de qualsevol dispositiu cal fer un disseny adaptatiu al dispositiu (responsive design). Això vol dir que la nostra pàgina tindrà la capacitat de reorganitzar la maquetació dels continguts en funció de la mida del dispositiu. Veieu la segünt pàgina vista amb una pantalla d'ordinador i amb un smartphone:

4-25

Actualment existeixen diferents llibreries (frameworks) que permeten aplicar de forma fàcil aquest disseny adaptatiu. Potser la més utilitzada és la llibreria Bootstrap. Per utilitzar aquest allibreria podem fer dues coses, descarregar-la de http://getbootstrap.com/getting-started/ o bé utilitzar un CDN (Content Delivery Network) que consistirà en posar aquest codi a les nostres pàgines HTML: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Una primera pàgina, molt senzilla, podria ser, <!DOCTYPE html>

<html lang="cat">

<head>

<title>Bootstrap Example</title>


<meta name="viewport" content="width=device-width, initial-scale=1">




</head>

<body>

<div class="container-fluid">

<h1>Una primera pàgina Bootstrap</h1>

<p>Aquí aniria el text.</p>

</div>

</body>

</html>

Tota la informació de la pàgina s'ha de posar en un contenidor. N'hi ha de dues classes:

1. la classe container crea un contenidor d'amplada fixa 2. la classe container-fluid crea un contenidor que s'expandeix a tota l'amplada disponible

Els contenidors no es poden niuar (no es pot posar un contenidor dins un altre contenidor) Graella de 12 columnes. Bootstrap divideix la pàgina en una graella de fins a 12 columnes, totes de la mateixa amplada, però que es podran agrupar per tal de crear columnes de diferents mides. Aquesta graella és adaptativa,és a dir, es reorganitza les columnes en funció de l'amplada del dispositiu. Per exemple, volem dividir la pàgina en tres columnes iguals per a un dispositiu tablet o superior (ordinador). Si el dispositiu és més petit (phones) les columnes s'apilaran, és a dir, s'apreciarà una única columna. Vegeu aquest exemple, <div class="container-fluid">

<h2>Redimensiona la finestra del navegador per veure l'efecte.</h2>

<p>Fila de tres columnes, tablet</p>

<div class="row">

<div class="col-sm-4" style="background-color:#fbb;">.col-sm-4</div>

<div class="col-sm-4" style="background-color:#bfb;">.col-sm-4</div>

<div class="col-sm-4" style="background-color:#bbf;">.col-sm-4</div>

</div>

<p>Fila de dues columnes, ordinador</p>

<div class="row">

<div class="col-md-8" style="background-color:#fbb;">.col-md-8</div>

<div class="col-md-4" style="background-color:#bfb;">.col-md-4</div>

</div>

</div>

medium device, computer (≥ 992px) small device, tablet (≥ 768px) extra small device, phones (< 768px)

http://ssh.eupmt.tecnocampus.cat/~jou/SM/ExemplesCSS/layouts/bootstrap/graella.html

disseny adaptatiu

4. Maquetació web.

5-26

Com veiem, l'estructura bàsica és crear una fila amb diferent nombre de columnes (màxim 12) per a un dispositiu determinat, <div class="row">

<div class="col-sm-2">.col-sm-2</div>



</div>

els diferents dispositius són: xs, extra small, phones (<768px) sm, small, tablets (≥ 768px) md, medium , notebook (≥ 992px) lg, large, desktop (≥ 1200px) Els números de les agrupacions de columnes sempre han de sumar 12. Estils predefinits. Com hem vist, en la capçalera de la pàgina hi hem vinculat uns estils CSS predefinits per aquesta llibreria, <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Principalment és una col.lecció de classes personalitzables que permeten dissenyar els principals elements HTML. Vegeu aquesta guia ràpida, http://ssh.eupmt.tecnocampus.cat/~jou/SM/bootstrap/ . A tall d'exemple, veiem com crear una secció on mostrem les imatges de les ciutats que hem o volem visitar:

hem fet clic a les imatges <!DOCTYPE html>

<html lang="cat">

<head>

<title>imatges</title>


<meta name="viewport" content="width=device-width, initial-scale=1">




<style>

.container-fluid{padding: 60px 50px;} /* personalització de la classe Bootstrap */

img, button{

width: 100%; height: auto; /* imatges que s'adaptan a la mida disponible */

margin-bottom: 10px;

padding: 0;

}

</style>

</head>

<body>

<div class="container-fluid text-center">

<h2>Ciutats</h2><br>

<div class="row">

<div class="col-sm-4">

<div class="thumbnail">

<img src="img/paris.jpg" alt="Paris" width="400" height="300">

<p><strong>Paris</strong></p>

<p>Sí, he estat a Paris</p>

</div>

</div>


4-27


<a href="#ny" data-toggle="collapse">

<img src="img/newyork.jpg" class="img-circle" alt="New York" width="400" height="300">

</a>

<div id="ny" class="collapse">

<p><strong>New York</strong></p>

<p>M'agradaria coneixer New York</p>

</div>

</div>


<div class="thumbnail">

<button data-target="#sf" data-toggle="collapse">

<img src="img/sanfran.jpg" class="img-rounded" alt="San Francisco" width="400" height="300">

</button>

<div id="sf" class="collapse in">

<p><strong>San Francisco</strong></p>

<p>Tant de bo pogués visitar San Francisco</p>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

http://ssh.eupmt.tecnocampus.cat/~jou/SM/ExemplesCSS/layouts/bootstrap/imatges.html

La classe collapse indica que és un element col· lapsable (normalment una <div>), és a dir, l'element que es podra mostrar o amagar amb un clic en un element <a> o <button>. Per controlar (mostrar/amagar) el contingut col· lapsable, cal afegir els atributs data-toggle="collapse" i data-target="#valorId" a l'element <a> o <button> on valoId és el valor de l'atribut id de l'element col· lapsable. Per a element <a> es pot fer servir l'atribut href en el lloc de data-target. Per defecte, el contingut col· lapsable està magat. Si és vol que sigui visible inicialment, cal afegir la classe in al contingut col· lapsable.

4.5.1 Menu de navegació. Menú de navegació amb subseccions desplegables. Dissenyem un menú de navegació horitzontal amb tres seccions i la secció 1 té tres subseccions que es presenten amb un menú desplegable,

<nav class="navbar navbar-inverse container-fluid ">

<div class="navbar-header">

<a class="navbar-brand" href="#">Nom del lloc Web</a>

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">Portada</a></li>


<a class="dropdown-toggle" data-toggle="dropdown" href="#">Secció 1<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">Subsecció 1.1</a></li>



</ul>

</li>

<li><a href="#">Secció 2</a></li>


</ul>

<ul class="nav navbar-nav navbar-right">

<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>

<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

</ul>

</nav> http://ssh.eupmt.tecnocampus.cat/~jou/SM/ExemplesCSS/layouts/bootstrap/navHoritzontal-1.html

4. Maquetació web.

5-28

Menú de navegació col·lapsat. Quan l'amplada del dispositiu és insuficient, és millor tenir la barra de navegació col·lapsada en un botó, que quan l'usuari hi fa clic, desplega el menú corresponent,

<nav class="navbar navbar-inverse container-fluid ">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">

<span class="icon-bar"></span>



</button>

<a class="navbar-brand" href="#">Nom del lloc Web</a>

</div>

<div class="collapse navbar-collapse" id="menu">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Portada</a></li>


<a class="dropdown-toggle" data-toggle="dropdown" href="#">Secció 1<span class="caret"></span></a>

<ul class="dropdown-menu">




</ul>

</li>



</ul>

<ul class="nav navbar-nav navbar-right">

<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>

<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

</ul>

</div> </nav>

http://ssh.eupmt.tecnocampus.cat/~jou/SM/ExemplesCSS/layouts/bootstrap/navHoritzontal-2.html


4-29

4.6 Exercicis i qüestions. 1) Donat el següent codi html i css, dibuixeu en la quadrícula la representació que en fa el navegador de les capes que conté. Justifiqueu la resposta indicant les mides i colors de les capes que apareixen en el codi. Cada quadre és de 25 x 25 píxels. <!DOCTYPE html>

<html>

<head>


<title>Pregunta 5</title>


*{margin:0; padding:0; }

#capa1{

width:400px; height:200px;

background-color:#00F;

}

#capa2 {

position:absolute;

right:0px; top:50px;


background-color:#0F0;

}

#capa3 {

position:relative;

left:50px;



}

#capa4 {

position:absolute;

left:50px; top:50px;


background-color:#FF0;

}

</style>

</head>

<body>

<div id="capa1">

<div id="capa2">

<div id="capa3">Capa 3</div>

</div>

<div id="capa4">

Capa 4

</div>

</div></body>

</html>

El CSS *{margin:0;padding:0;} anul·la els marges i els farciments, per tant, la posició (0,0) del body és la cantonada esquerra superior del navegador. El body conté la capa 1de 400x200 de color blau. Està posicionada de forma static, per tant, a la posició (0,0) del body. La capa 2 de 200x100 i de color verd està posicionada de forma absoluta. Agafa com a referència del (0,0) la posició del body atès que la capa 1 és static, no posicionada. Es col·loca a 0px de la dreta i 50px de dalt del body. a Al ser posició absoluta, surt del flux normal deixant espai a la capa següent, la capa 4. La capa 3 de 300x300 i de color vermell es posiciona de forma relativa. Agafa la posició (0,0) de la posició de la capa 2 atès que aquesta esta posicionada de forma absoluta. Es col· locà a 50px del costat esquerra i 0px del costat superior de la capa 2. La capa 4 de 100x200 i de color groc està posicionada de forma absoluta. Agafa com a referència del (0,0) la posició del body, igual que la capa 2. Es col·loca a 50px a la dreta i 50px de dalt del body.

4. Maquetació web.

5-30

2) Donat el següent codi html i css, dibuixeu en la quadrícula la representació que en fa el navegador de les capes que conté. Justifiqueu la resposta indicant les mides i colors de les capes que apareixen en el codi. Cada quadre és de 25 x 25 píxels. <!DOCTYPE html>

<html>

<head>





#capa1{



}

#capa2 {

position:absolute;



background-color:#0F0;

}

#capa3 {

position:relative;

left:50px;



}

#capa4 {

position:absolute;




}

</style>

</head>

<body>

<div id="capa1">


<div id="capa3">


</div>

</div>

</body>

</html>

El CSS *{margin:0;padding:0;} anul·la els marges i els farciments, per tant, la posició (0,0) del body és la cantonada esquerra superior del navegador. El body conté la capa 1de 400x200 de color blau. Està posicionada de forma static, per tant, a la posició (0,0) del body. La capa 2 de 200x100 i de color verd està posicionada de forma absoluta. Agafa com a referència del (0,0) la posició del body atès que la capa 1 és static, no posicionada. Es col·loca a 0px de la dreta i 50px de dalt del body. a Al ser posició absoluta, surt del flux normal deixant espai a la capa següent, la capa 3. La capa 3 de 300x300 i de color vermell es posiciona de forma relativa col.locant-se a 50px a la dreta dins la capa 1. La capa 4 de 100x200 i de color groc està posicionada de forma absoluta. Agafa com a referència del (0,0) la posició de la capa 3 atès que està posicionada de forma relativa. Es col·loca a 50px a la dreta i 50px de dalt de la capa 3. a baix respecte la capa 1.


4-31

3) El següent document html es mostra en el navegador Firefox com mostra la figura A. Afegiu el codi CSS necessari perquè canviï la representació a la de la figura B, és a dir, centrar la pàgina amb una amplada de 760 píxels, que el menú de navegació es presenti a la dreta, que la llista no mostri els punts rodons i que els vincles no estiguin subratllats. Cal posar el codi necessari dins els rectangles dibuixats. <!DOCTYPE html>

<html>

<head>


<title>pregunta 6</title>



body {

font: 100% Verdana, Arial, Helvetica, sans-serif;

color: #000000; background: #AAA;

}

#pagina {

background: #FFFFFF;

width: 760px;

margin: 0 auto;

}

#capcalera {background: #DDD; padding: 10px;}

#navegacio {

width: 140px;

padding: 15px 20px;

background-color:#CCC;

float: right;

}

#contingut {

margin: 0px;

padding: 15px 180px 15px 0px;

background-color:#eee;

}

#peu {

padding: 5px;

background-color:#DDD;

clear: right;

}

#navegacio ul li{

list-style-type:none;

}

#navegacio ul a{

text-decoration:none;

}

</style>

</head>

<body>

<div id="pagina">

<div id="capcalera"><h1>Nom de la web</h1></div>

<div id="navegacio">

<ul>

<li><a href="#">Secció A</a></li><li><a href="#">Secció B</a></li><li><a href="#">Secció C</a></li>

</ul>

</div>

<div id="contingut"><p>Contingut </p></div>

<div id="peu"><p>La meva web. </p></div>

</div>

</body>

</html>

Figura A. Abans d’afegir el nou codi CSS

Figura B. Després d’afegir el nou codi CSS

4. Maquetació web.

5-32

4) Observeu el següent codi HTML i la representació que en fa el navegador Firefox. Contesteu a les preguntes que us fa el text del document html. <!DOCTYPE html>

<html>

<head>




#capa {

background-color: #00FFFF;

float: left;

width: 100px;

margin: 30px;

padding: 15px 20px 25px 30px;

border-width: 5px 10px;

border-style: solid;

}

</style>

</head>

<body>

<div id="capa">Contingut de la capa </div>

Informació de la pàgina. Com pots veure, el text es veu a la dreta, embolcallant a la capa. Per què?.

Indica, clarament, en el dibuix els gruixos dels marges, farciments i vores de la capa.

</body>

</html>

5) Expliqueu les diferències que hi ha en usar la propietat CSS visibility: hidden; o bé la propietat display:none; La propietat CSS visibility: hidden; fa que l’element en qüestió no es vegi, però, ocupa lloc dins la pàgina

La propietat CSS display:none; fa que l’element desaparegui, és a dir, no es veu perquè no hi és. El seu lloc dins la pàgina html és ocupat pel següent element.

El text embolcalla a la capa per la dreta degut a la propietat float: left; de la capa. Observem que el text va després de la capa en el codi HTML.

30

15

20 25

30

10

5 30

30

30


4-33

6) Volem construir un menú de navegació horitzontal per les diferents seccions del lloc web. Completeu el codi CSS que falta perquè el navegador faci la representació de la imatge. <!DOCTYPE html>

<html>

<head>




#menuSeccions{

width:800px;

height: 3em;

padding: 5px;


font-weight: bold;

}

#menuSeccions li {


display: inline;

}

#menuSeccions li a{


border-style: solid; border-width: 2px;

margin: 10px; padding:10px;

}</style>

</head>

<body>

<div id="menuSeccions">

<ul>

<li><a href="#">Inici</a></li> <li><a href="#">Secció A</a></li>

<li><a href="#">Secció B</a></li> <li><a href="#">Secció C</a></li>

</ul>

</div>

</body>

</html>

7) Completeu el codi CSS de la següent pàgina perquè tingui uns estils CSS que permeti alinear imatges a l’esquerra de la pàgina amb el text envolcallant la imatge, a la dreta amb el text envolcallant la imatge i centrat a la pàgina de manera que en aquest cas, no pugui haver altre contingut als costats de la imatge (ni text ni altres imatges). <!DOCTYPE html>

<html><head>




img.esquerra{

float: left;

margin: 0 10px 5px 0;

}

img.dreta{

float:right;

margin: 0 0 10px 5px;

}

img.centrada{

clear: both;

display: block;

margin: 0 auto;

}

</style></head>

<body>

<p><img class="esquerra" src="imatge.jpg" width="100" height="121" alt="imatge">Imatge alineada a

l'esquerra de la pàgina amb el text envolcallant la imatge.</p>

<p><img class="centrada" src="imatge.jpg" width="100" height="121" alt="imatge">Imatge centrada a la

pàgina.El text no es pot posar al costat de la imatge.</p>

<p><img class="dreta" src="imatge.jpg" width="100" height="121" alt="imatge">Imatge alineada a la dreta de

la pàgina amb el text envolcallant la imatge.</p>

</body></html>

4. Maquetació web.

5-34


<html>

<head>





#capa1{



}

#capa2 {

position:relative;

left:25px;



}

#capa3 {

position:absolute;




}

#capa4 {

float:left;


margin-left:10px;

background-color:#F0F;

}

#capa5 {

background-color:#0FF;

}

</style>

</head>

<body>

<div id="capa1">


</div>

<div id="capa3">



</div>

</body>

</html>

El CSS *{margin:0;padding:0;} anul·la els marges i els farciments, per tant, la posició (0,0) del body és la cantonada esquerra superior del navegador. La capa1de 300x350 i de color blau, està posicionada de forma estàtica, per tant, segueix el flux normal i al ser la primera del body, es posa a la posició (0,0) del body. La capa 2 de 100x300 i de color vermell està posicionada de forma relativa. Agafa com a referència del (0,0) la posició del body atès que la capa1 està posicionada de forma estàtica i, per tant, no pot donar la posició de la seva capa filla. Es col· loca a 25px de l’esquerra del body. La capa 3 de 50x50 i de color groc es posiciona de forma absoluta, per tant, també agafa com a referencia del (0,0) la posició del body i es col· loca a 50px a la dreta i 50px cap avall del body. La capa 4 de 100x100 i de color magenta està dins la capa3 i està “flotant” a la seva esquerra. Es marge de l’esquerra és de 10px; Finalment, la capa5 que està dins la capa 3 segueix el flux normal ocupant tota l’amplada disponible de la capa3 però sense que la capa 4 tapi el contingut de la capa 5. A través del marge esquerra de la capa 4 es pot veure part de la capa 5.


4-35


<html>

<head>





#capa1{

position:absolute;




}

#capa2 {

position:relative;

left:50px;



}

#capa3 {

position:absolute;




}

#capa4 {

float:right;


background-color:#F0F;

}

#capa5 {

background-color:#0FF;

}

</style>

</head>

<body>

<div id="capa1">

<div id="capa2"></div>

<div id="capa3">



</div>

</div>

</body>

</html>

El CSS *{margin:0;padding:0;} anul·la els marges i els farciments, per tant, la posició (0,0) del body és la cantonada esquerra superior del navegador. La capa1de 400x350 i de color blau, està posicionada de forma absoluta, per tant, surt del flux normal i la posició (0,0) la dóna el body perquè la capa1 no té cap altre antecessor posicionat de forma no estàtica. La capa 2 de 300x300 i de color vermell està posicionada de forma relativa. Agafa com a referència del (0,0) la posició de la capa1 atès que la capa1 està posicionada de forma no estàtica (absoluta). Es col· loca a 50px de la dreta de la capa1. La capa 3 de 200x200 i de color groc es posiciona de forma absoluta, per tant, també agafa com a referencia del (0,0) la posició de la capa1 i es col· loca a 50px a la dreta i 50px cap avall de la capa1. La capa 4 de 100x100 i de color magenta està dins la capa3 i està “flotant” a la seva dreta. Finalment, la capa5 que està dins la capa3 segueix el flux normal i al trobar la seva germana (capa4) flotant, es posa al darrera sense tapar els continguts. la capa 1.

4. Maquetació web.

5-36

10) El següent document html es mostra en el navegador Firefox com mostra la figura A. Afegiu el codi CSS necessari perquè canviï la representació a la de la figura B, és a dir, centrar la pàgina amb una amplada de 760 píxels, que el logo tingui una amplada de 300 píxels i una alçada de 150 píxels i es decanti 10 píxels de les vores de la capçalera, que el cercador tingui una amplada de 200 píxels i una alçada de 50 píxels i es decanti 10 píxels de les vores de la capçalera , que el menú de navegació es presenti a la dreta, que la llista no mostri els punts rodons i que els vincles no estiguin subratllats. Cal posar el codi necessari dins els rectangles dibuixats.

<!doctype html>

<html>

<head>





body {background: #AAA;}

#pagina {

background: #FFF;

width: 760px;

margin: 0 auto;

}

#capcalera {

position:relative; height:180px;

background: #DDD;

}

#logo{

position:absolute; top:10px; left:10px;

/* també float:left; margin:10px 0 0 10px; */


background: #999;

}

#cercador{

position:absolute; top:10px; right:10px;

/* també float: right; margin:10px 10px 0 0; */


background: #666;

}

#lateral {

width: 140px; padding: 15px 20px;

background-color:#CCC;

float: right;

}

#contingut {

margin: 0 170px 15px 0px;

padding: 5px; background-color:#EEE;

}

#peu {

clear: right;

padding: 5px; background-color:#DDD;

}

div#lateral ul li{


}

div#lateral ul a{


}

</style>

</head>

Figura A. Abans d’afegir el nou codi CSS

Figura B. Després d’afegir el nou codi CSS


4-37

<body>

<div id="pagina">

<div id="capcalera">

<div id="logo">Logo</div>

<div id="cercador">Cercador</div>

</div>

<div id="lateral">

<ul><li><a href="#">Secció A</a></li><li><a href="#">Secció B</a></li><li><a href="#">Secció

C</a></li></ul>

</div>

<div id="contingut">Contingut</div>

<div id="peu">Peu</div>

</div>

</body>

</html>

4 MAQUETACIÓ WEB.ssh.eupmt.tecnocampus.cat/~jou/SM/apunts/SMmTema4.pdf · 2017-07-25 · 4....

Documents

Transcript of 4 MAQUETACIÓ WEB.ssh.eupmt.tecnocampus.cat/~jou/SM/apunts/SMmTema4.pdf · 2017-07-25 · 4....