La cau de l’èxit és una bona maquetació

Un disseny web ben estructurat és molt més que una qüestió estètica. La maquetació i l’estructura d’una pàgina condicionen com els usuaris perceben, entenen i utilitzen un lloc web. Una bona composició facilita la lectura, guia la mirada i concentra l’atenció de i l’experiència de l’usuari, afavoreix la navegació i, en última instància, incrementa la confiança en la marca o projecte. Per tant cal dissenyar amb consciència abans de posar-se a codificar. Un bon disseny és la garantia de l’èxit.

Elements i terminologia bàsica del disseny web

Per començar qualsevol projecte cal fer anàlisi saber quines parts integren la web i com s’organitzen entre elles.

Entre els components més importants hi ha:

• Header (capçalera), on normalment hi ha logotip, menú de navegació o botons principals.
• Navigation / Navbar: sistema de navegació que permet moure’s per les diferents seccions o pàgines.
• Hero Image / Hero Section: una imatge (o vídeo) destacada a la part alta, sovint la primera cosa que veu l’usuari.
• Body / Content Area (cos de la pàgina): on es col·loca el contingut principal: textos, imatges, vídeos, articles, etc.
• Sidebar (opcional): secció lateral per informació secundària, enllaços, anuncis, etc.
• Footer (peu de pàgina): conté informació recurrent, enllaços addicionals, contactes, xarxes socials, etc.
• Elements UI/UX com botons, enllaços, estat hover, micro-interaccions, slider/carousel, components reutilitzables, etc.

També és important dominar conceptes com responsive / adaptive design, breakpoints, style guide / pattern library, SEO, accessibilitat, etc.

El model Flexbox de CSS és una de les eines més potents per crear dissenys web adaptables i ordenats sense necessitat de calcular mides exactes o flotar elements. Amb la propietat display: flex podem controlar com es distribueixen els elements dins d’un contenidor.

Funcionament de flexbox

Quan apliquem display: flex a un element contenidor, tots els seus elements fills es converteixen automàticament en “flex items”. Això ens permet alinear-los i distribuir-los fàcilment a l’espai disponible.


.container {
display: flex;
}
.item {
background: lightblue;
padding: 10px;
margin: 5px;
}


En aquest exemple, els elements dins de la classe .container s’alinearan en una sola línia, un al costat de l’altre, de forma automàtica.

Direcció i alineació

La propietat flex-direction defineix si els elements s’organitzen en fila (row), columna (column) o altres variants.


.container {
display: flex;
flex-direction: column;
/* Col·loca els elements en columna */
}


A més, podem alinear els elements horitzontalment i verticalment amb justify-content i align-items:


.container {
display: flex;
justify-content: space-between; /* Espai entre els elements */
align-items: center; /* Centra verticalment */
}


Adaptabilitat i distribució

Els elements flexibles poden créixer o reduir-se segons l’espai disponible gràcies a la propietat flex. Aquesta combina tres valors: flex-grow, flex-shrink i flex-basis.


.item {
flex: 1; /* Cada element ocuparà el mateix espai */
}


Això fa que els elements s’ajustin automàticament dins del contenidor sense trencar el disseny, ideal per a estructures responsive.

Exemple complet


<div class="container">
<div class="item">Bloc 1</div>
<div class="item">Bloc 2</div>
<div class="item">Bloc 3</div>
</div>



.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 200px;
background-color: #f2f2f2;
}
.item {
background-color: #8ecae6;
padding: 20px;
border-radius: 8px;
}


En aquest cas, els tres blocs es distribuiran uniformement i es centraran verticalment dins del contenidor. Un exemple senzill però molt potent!

Conclusió

Flexbox simplifica molt la creació de dissenys web adaptables i nets. Amb només unes poques línies de codi, pots controlar fàcilment la distribució, alineació i mida dels teus elements. Si encara no l’has provat, és hora de fer-ho!

Els arxius DTD (DocumenType Definition) defineixen l’estructura i les regles que ha de seguir un document XML, com si fos un “manual d’instruccions” per validar-ne el contingut. S’utilitzen per garantir que el document XML segueixi una organització concreta, especificant quins elements i atributs pot contenir, en quin ordre, i quin tipus de dades s’hi poden introduir.

Exemple de document DTD inscripció.dtd

01. <!ELEMENT inscripcio (alumne+)>
02. <!ELEMENT alumne (dni, nom, curs, telefon, email)>
03. <!ELEMENT dni (#PCDATA)>
04. <!ELEMENT nom (#PCDATA)>
04. <!ELEMENT curs (#PCDATA)>
05. <!ATTLIST telefon tipus (mobil|fixe) #REQUIRED>
06. <!ELEMENT telefon (#PCDATA)>
07. <!ELEMENT email (#PCDATA)>



01. <!ELEMENT inscripcio (alumne+)> El document ha de tenir un element principal, anomenat inscripcio, que conté un o més elements alumne (el signe + indica que poden haver-hi un o més elements).

02.<!ELEMENT alumne (dni, nom, curs, telefon, email)> Cada alumne té cinc elements obligatoris: dni, nom, curs, telefon i email, i han d’estar en aquest ordre.

<!ELEMENT dni (#PCDATA)>, <!ELEMENT nom (#PCDATA)>, <!ELEMENT curs (#PCDATA)>, <!ELEMENT telefon (#PCDATA)>, <!ELEMENT email (#PCDATA)> Aquests elements contenen PCDATA (Parsed Character Data), és a dir, text. Cada un és un camp d’informació textual com ara el DNI, el nom, el curs, el telèfon i l’email de l’alumne.

05. <!ATTLIST telefon tipus (mobil|fixe) #REQUIRED> L’element telefon ha de tenir un atribut anomenat tipus que indica si el telèfon és mobil o fixe, i aquest atribut és obligatori (#REQUIRED).

Aquest DTD estableix que un document XML sobre inscripcions ha de tenir una estructura concreta: cada inscripció conté un o més alumnes, i cada alumne té un DNI, un nom, un curs, un telèfon (amb atribut de tipus), i un email. El DTD s’assegura que tots aquests elements existeixin i segueixin l’estructura definida.