«Cada maestrillo tiene su librillo». Aquest és el meu «librillo»
Quan desenvolupo una pàgina web, el que faig és passar un disseny a HTML , estilar-lo amb CSS i, si cal, afegir-hi comportaments amb programació (javascript o php).
Un cop revisat el disseny i aclarits els dubtes amb la dissenyadora, inicio el pas a HTML.
Pas 1 – Etiquetar
El primer pas és convertir el disseny en un text i etiquetar-lo de forma semàntica.
- Afegeixo etiquetes al text per indicar-ne el significat
- Englobo els elements en capçalera (header), contingut principal (main), articles (article), seccions (section), contingut secundari (aside) o peu (footer)
El resultat és un arxiu HTML que quan el miro en el navegador sembla més un Word que una web.
Recorda que és important etiquetar el text de manera semàntica. A vegades, el que veig visualment m’enganya. Per exemple, en el disseny veig aquests títols:
Podria pensar que «Sell your products» és el títol. Aleshores què és «Start your Business»? JPenso que el títol és, en realitat: «Start your Business: Sell your produts». Això significa que l’h2 engloba les dues frases i que entre les dues ha d’haver-hi dos punts que hauré d’afegir a l’HTML. Serà feina del CSS amagar-los.
També pot passar que consideri que l’h1 és el títol més gran, però tractant-se d’una pàgina única sobre l’aplicació «m-app», tinc clar que l’h1 és en realitat el logo de la capçalera i que la primera secció és igual d’important que la resta. Per això he etiquetat el logo com un «h1» i el títol de la primera secció com un «h2».
Pas 2 – Maquetació
El següent pas és mirar el disseny i veure quines agrupacions hi ha. Hi ha contingut agrupat en columnes? Aquestes columnes formen files? Hi ha conjunts de títols i text que formen entradetes?
En aquest punt, afegeixo etiquetes d’html per crear aquestes divisions. Són divisions no semàntiques i, per tant, puc fer servir etiquetes sense contingut semàntic com «div», «span», «b» o «i».
Un cop aplicades les etiquetes, afegeixo classes als elements, pensant ja en el servei que faran aquestes classes a l’hora d’aplicar CSS.
Exercici
Afegeix a l’HTML les etiquetes que et permetran agrupar continguts fent servir div i span. Opcionalment pots fer servir altres etiquetes no semàntiques com b o i o semàntiques com strong i em.
Afegeix les següents classes
- Classe «hero» a la primera secció
- Classe «cta» a la última secció
- Classe «botonet» als enllaços que han de semblar botons
- Classe amagat a els «:» que hi ha als h2 però no estan al disseny
Mirant el disseny veig que el contingut no ocupa el 100% de l’amplada. Sense parlar amb qui ha fet el disseny puc deduïr que el contingut sí va de banda a banda però que té un padding als laterals força gran (uns 60px); o puc deduïr que el contingut té una amplada màxima que no creixerà a pantalles grans. He obtat per aplicar la segona opció.
Mirant el disseny també veig que algunes franges (hero, cta, footer) tenen un color de fons que sí va de banda a banda. Per tant, dedueixo que les seccions ocupen el 100%, però que cal agrupar tot el seu contingut en un element que els faci de contenidor, un div. Per això afegeixo divisions («div») amb la classe «contingut».
Com pots veure a la imatge, també he agrupat el conjunt de icona, text i descripció de les propietats del producte en uns divs. A cadascun d’aquests divs els he donat dues classes
- Una classe, «caracteristica», em permetrà estilar allò que tenen en comú
- Una altra classe (per exemple «subscripcions») em permetrà afegir la icona que correspon a cada característica mitjançant CSS
Caixa del contingut
Mirant el disseny veig que el contingut no ocupa el 100% de l’amplada. Sense parlar amb qui ha fet el disseny puc deduïr que el contingut sí va de banda a banda però que té un padding als laterals força gran (uns 60px); o puc deduïr que el contingut té una amplada màxima que no creixerà a pantalles grans. Jo he obtat per la segona opció.
Mirant el disseny també veig que algunes franges (hero, cta, footer) tenen un color de fons que sí va de banda a banda. Per tant, dedueixo que les seccions ocupen el 100%, però que cal agrupar tot el seu contingut en un element que els faci de contenidor, un div. Per això afegeixo divisions («div») amb la classe «contenidor».
.contenidor{
width:100%;
max-width: 1140px;
padding:10px 20px;
margin: 0 auto;
}Pas 3 – Estilar amb CSS mobile first
A l’hora d’aplicar estils, m’agrada:
- Aplicar primer tot allò que serveix per a qualsevol dispositiu (mobile first)
- Començar per allò més genèric i anar estilant coses cada vegada més concretes.
Tipografies
El més genèric és tot allò referent a tipografies. En aquest punt afegeixo les regles per estilar de manera genèrica les principals etiquetes: h1, h2, h3, p,..
h1, /* Aquesta pàgina no el fa servir */
.hero h2{
font-weight: 600;
font-size: 2.5rem;
line-height: 1.125; /* 72px */
}
h2{
font-weight: 500;
font-size: 1rem;
line-height: 1.375;
color:#202249;
}
h2 strong{
font-weight: 600;
font-size: 3rem;
line-height: 1.125;
display: block;
color:black;
}
h3{
font-weight: 700;
font-size: 1.375rem; /* 22px */
line-height: 1.455; /* 32px */
}
p{
font-weight: 400;
font-size: 1rem;
line-height: 1.78;
}IMPORTANT: El disseny està presentat per a pantalles grans. Potser aquestes mides les haurem de definir més petites i posar les mides del disseny a media queries per a que només s’apliquin a pantalles grans.
He estilat els textos amb l’etiqueta h1, tot i que a aquesta pàgina no tenim cap text amb aquesta etiqueta. Ho he fet perquè és provable que fem una una segona pàgina (per exemple l’avís legal o una pàgina de contacte) i aquesta sí que tindria el títol amb l’etiqueta h1, que seria com l’h2 del hero d’aquesta pàgina
Seguidament estilo enllaços i botons. En el disseny no hi ha cap enllaç en el text. Si no tinc la possibilitat de parlar amb qui ho ha dissenyat, els hauré de fer com jo consideri. Sí que hi ha uns botons de color taronja amb forma de pildora, als que ja he posat la classe «botonet».
a{
text-decoration:underline;
}
a:hover{
text-decoration:none;
}
a.botonet{
text-decoration: none;
color:white;
background-color: #FF6701;
font-size: 1rem;
line-height: 1.01;
padding: 1em 2em;
border-radius: 3.125em;
font-weight: 700;
display:inline-block;
}Pictogrames
A continuació segueixo amb elements que seran iguals quan es vegin en una pantalla petita o una pantalla gran, com les icones de les característiques (divs amb la classe «caracteristica»). Què tenen en comú totes les característiques?
- Tenen una icona posicionada a dalt a l’esquerra
- Tenen una icona que no es repeteix (només una)
- La icona està com a imatge de fons i, per tant, hauré de deixar-li un espai suficient per a que es vegi i per a que hi hagi un espai entre la icona i el text.
.caracteristica{
padding-top:50px;
background-position: top left;
background-size:40px;
background-repeat:no-repeat;
}
.emails{
background-image: url(imatges/icos/email.png);
}
.descarregues{
background-image: url(imatges/icos/downloads.png);
}
.formularis{
background-image: url(imatges/icos/forms.png);
}
.ofertes{
background-image: url(imatges/icos/coupons.png);
}
.descompte{
background-image: url(imatges/icos/packs.png);
}
.eina{
background-image: url(imatges/icos/all-in-one.png);
}
.factures{
background-image: url(imatges/icos/factura.png);
}
.estadistiques{
background-image: url(imatges/icos/estadistiques.png);
}
.impostos{
background-image: url(imatges/icos/impostos.png);
}
.software{
background-image: url(imatges/icos/software.png);
}
.subscripcions{
background-image: url(imatges/icos/subscription.png);
}Pts veure aquí com poso les imatges de fons d’aquestes seccions amb més detall
Caixa del contingut
Els continguts, com ja he comentat, estan encaixats en un contenidor que evita que vagin de banda a banda.
.contenidor{
width:100%;
max-width: 1140px;
padding:10px 20px;
margin: 0 auto;
}He afegit padding al contenidor per garantir que quan ocupi el 100% de l’amplada deixi un petit espai al voltant del contingut. En realitat, el contingut del contenidor mai ocuparà els 1140px, perquè hi ha un padding de 20px a cada costat (és a dir: el contingut ocuparà 1100px com a molt)
Capçalera
A la capçalera tenim el logo a l’esquerra i un botó a la dreta. Caldrà posar cada cosa en una mateixa línia i cada element a una punta.
- Per poder mostrar els dos elements a una mateixa línia els canviaré el display (que per defecte és «block») a display-inline;
- Per poder moure el botó a la dreta li posaré la propietat «float» amb el valor «right»
- Treuré els marges a tots els elements per a que no ocupin més espai del mínim necessari
header h1,
header p,
header a.botonet{
display:inline-block;
margin:0;
}
header p{
float:right;
}Entradetes
Un dels elements que és repeteix al llarg del disseny és el conjunt de títols de secció (h2) i un paràgraf amb el text lleugerament més gran que altres paràgrafs. Aquests conjunts els he fet fent servir l’etiqueta div, sense valor semàntic, tot i que no seria incorrecte fer servir l’etiqueta «header», per indicar que és la capçalera de la secció.
Com que totes aquestes entradetes tenen la mateixa aparença, he afegit la classe «entradeta»
Què tenen en comú totes les entradetes? Són totes iguals?
- Hi ha una entradeta alineada a l’esquerra i una entradeta alineada al centre (la majoria).
- Le entradetes alineades al centre tenen una amplada limitada i estan centrades
- Les entradetes aliniades al centre tenen també el text aliniat al centre.
- Els paràgrafs tenen una mida lleugerament superior a altres pàragrafs (a tots dos tipus). En realitat, si hi hagués un segon paràgraf no hauria de ser tan gran. Per tant, podem dir que, a les entradetes, el paràgraf que segueix a l’h2 té la mida més gran.
Per tant, podem aplicar a totes una mateixa classe («entradeta») i afegeixo una segona classe («esquerra») a les entradetes aliniades a l’esquerra. També ho podria fer al revés (posar una segona classe a les entradetes aliniades al centre i no a l’entradeta aliniada a l’esquerra).
En realitat, la classe «esquerra» em servirà per a qualsevol element on vulgui forçar el text alineat a l’esquerra. Recorda que és important crear classes que no siguin molt específiciques, per a que siguin reutilitzables.
Mirant, però, el disseny i pensant com ho voldria veure a un mòbil, penso que les entradetes esquerra s’haurien de veure als mòbils també alineades al centre. Per tant, l’alineació a l’esquerra només s’haurà de produïr a pantalles grans.
.esquerra{
text-align:left;
}
.entradeta,
.entradeta.esquerra{
text-align: center;
}
@media all and (min-width:1024px){
.entradeta:not(.esquerra){
width:50%;
margin-left: auto;
margin-right: auto;
}
.entradeta.esquerra{
text-align:left;
}
}Testimonis
A la secció dels testimonis hi ha una franja, després de la entradeta, amb 3 columnes. Aquestes 3 columnes només es veuran a pantalles grans, a les pantalles petites es veuran una sota de l’altra.
Cadascun dels testimonis es visualitza com una targeta, amb un fil al voltant i cantos arrodonits. Dins de cada targeta, alguns elements tenen estils molt específics, que no trobem enlloc més a la pàgina.
Començaré per estilar les targetes. Els estils em serviran tant per pantalles petites com per a pantalles grans.
.testimoni{
padding: 1.25rem;
border: 1px solid rgba(32, 32, 71, 0.37);
border-radius: 0.5rem;
}El text de la cita està etiquetat com a «blockquote»
A continuació estilo aquest text
article.testimoni blockquote {
font-weight: 400;
font-size: 1rem;
line-height: 1.75;
}També podria haver fet servir com a selector només la paraula «blockquote» o «.testimoni blockquote». Posant «article.testimoni blockquote» concreto més que aquests estils només s’aplicaran en unes circunstàncies molt concretes.
Després del blockquote hi ha una altra divisió que, al seu torn, està dividida en dues parts: una imatge i una altra divisió que agrupa el nom i la web del testimoni
A continuació segueixo estilant els elements textuals
article.testimoni p {
font-weight: 700;
font-size: 0.9375rem;
}
article.testimoni p a {
color: #A8A8A8;
text-decoration: none;
}Colors i imatges de fons
Ara començaré a aplicar colors de fons a aquelles seccions que no són blanques: el header, el hero, el cta i el footer.
header,
.hero,
.cta,
footer{
background-color:#202249;
color:white;
}
Ara aplicaré les imatges de fons. Començaré pel cta. El cta té una imatge a la part inferior que fa de separació entre el cta i la següent secció. Podria posar la imatge alineada a la part inferior, però el que faré és crear un pseudoelement sense contingut que faci de separador, que tingui les proporcions exactes de la imatge que fa de separador i que tingui la imatge de fons ocupant tota la seva àrea.
.hero::after {
content: "";
display: block;
width: 100%;
height: 10vw;
background-image: url(imatges/fons-1.png);
background-size: 100%;
background-position: left bottom;
background-repeat: no-repeat;
}He fet servir la unitat vw (view width) per a calcular l’alçada de la franja. Mirant el disseny veig que la franja té una alçada que representa el 10% de l’amplada. Com que l’amplada coincideix amb l’amplada del dispositiu (view width), puc dir que l’alçada és de 10vw (una 10a part de l’amplada).
He posat l’amplada de la imatge al 100%, per cobrir tot l’espai. El navegador l’escala proporcionalment.
El cta d’abans del footer també té una divisió, aquesta vegada a la part superior. Puc fer servir la mateixa tècnica fent servir el pseudoelement «before», aquesta vegada. Però faig servir una altra tècnica.
El que faig és posar la imatge de fons i deixar un espai a la part superior (mitjançant padding-top) per a que es vegi la corva sense trepitjar el text.
.cta{
background-image: url(imatges/fons-2.png);
background-color:transparent;
background-position: center top;
padding-top: 10vw;
background-repeat: no-repeat;
position: relative;
}
@media all and (min-width:768px){
.cta{
background-size: 101%;
}
}En aquest cas, he posat un color de fons transparent per negar el color blau de fons que li havia donat anteriorment al cta. Ho he hagut de fer perquè la imatge té una part transparent i si el fons fos blau es veuria aquest blau sota la image i no veuríem la corva.
El padding és de 10vw perquè l’espai que hem de deixar té aquestes proporcions (100 / 10).
Al mirar la pàgina en una pantalla petita, he vist que a pantalles petites no he d’escalar la imatge de fons, perquè si ho faig no cobreixt tot l’espai. Per això he canviat la mida de la imatge només a pantalles grans.
He fet l’amplada de la imatge de 101% perquè la imatge està mal feta i té un espai en blanc a la dreta. Si la faig més gran, surt de la pantalla aquest troç de la imatge.
També faré servir imatges de fons a la llista de botigues del cta, com que les imatges no estan al HTML, les hauré de posar per CSS:
Aquí necessito amagar el text de l’enllaç i canviar-lo per una imatge. Hi ha diferents maneres de fer-ho. Podria tocar l’html per posar el text dins d’un span i amagar-lo amb CSS, per exemple. El que faré serà limitar la mida dels enllaços (width, height), moure el text ben lluny, amagar tot allò que surt de les dimensions que he donat als enllaços (overflow: hidden) i posar les imatges de fons.
/* treiem al ul del cta l'estil de llista*/
.cta ul{
list-style-type: none;
padding: 0;
}
/* posem al li display inline-block
per a que es vegin un al costat de l'altre*/
.cta ul li{
display: inline-block;
}
/* Donem display block a l'enllaç per a poder
ccanviar-li les dimensions. Movem el text
aamb text-indent i amaguem tot allò que surt
dde la caixa (això farà que no es vegi el text)*/
.cta ul li a{
display: block;
width:150px;
height:46px;
overflow: hidden;
background-size: contain;
background-repeat: no-repeat;
background-position: left top;
text-indent:-1000px;
overflow: hidden;
margin: 2px;
}
/* cada li té una imatge diferent a l'enllaç*/
.cta ul li.app-store a{
background-image:url(imatges/app-store.png);
}
.cta ul li.google-play a{
background-image:url(imatges/google-play.png);
}He posat les indicacions del que he fet com a comentari del CSS
Modificar l’espai entre seccions
Si miro el disseny, veig que hi ha espais entre seccions que hauré d’afegir per CSS
- El hero ha de tenir una mica de padding per dalt
- Ha d’haver-hi espai sota les seccions (excepte la última)
- Ha d’haver-hi espai sota les entradetes
.hero{
padding-top:60px;
}
section:not(:last-child){
margin-bottom:90px;
}
.entradeta{
margin-bottom: 60px;
}He estat maquetant amb la filosofia mobile first. Tot allò aplicat fa que la pàgina es vegi correctament a dispositius petits.
Ara afegiré tot allò que només s’ha de produïr a pantalles grans
Flex