Desenvolupament web estàtic amb HTML + CSS
Conceptes

Sessió 6: Maquetar una web

Objectiu Sessió 6

L'objectiu d'aquesta 6a sessió serà treballar tècniques de disseny de maquetació actuals al moment de desenvolupar una pàgina o lloc web.

Maquetar una interfície

Maquetar una interfície serà les accions que duem a terme per transformar un disseny gràfic a una interfície funcional que en termes de desenvolupament i programació sigui interpretat per un navegador web o dispositiu específic, per exemple un mòbil.

Seguirem unes pautes i els següents conceptes:

• Definir què volem: requisits i disseny interfície
• Com ho fem: Crear el format HTML i estils CSS, així com el disseny de logos, imatges i contingut.

Definir què volem

Requisits

Una vegada tenim una base de continguts sobre HTML + CSS ara toca encarar les tasques de creació de la pàgina o lloc web des d'un inici i de manera complerta. Per aquest fet, caldrà definir o obtenir en primer moment els requeriments del que s'ha de desenvolupar.

Com a requisit podem definir: Una característica, funció o descripció que el sistema ha de complir. Aquests requisits són essencials per assegurar que el projecte compleixi les necessitats dels usuaris, clients i altres parts interessades. Es poden classificar en dos tipus principals:

Requisits funcionals:

Aquests descriuen les accions que el sistema ha de ser capaç de realitzar. Es basen en la funcionalitat i interacció de l'usuari amb el sistema.

Exemples:

• L'usuari ha de poder iniciar sessió mitjançant un nom d'usuari i contrasenya.
• El sistema ha de permetre als usuaris cercar productes en una base de dades.
• Els administradors han de poder afegir, modificar i eliminar usuaris del sistema.

Requisits no funcionals:

Aquests descriuen com ha de ser el sistema, però no específicament què ha de fer. Són més orientats a aspectes tècnics i de rendiment.

Exemples:

• El sistema ha de ser capaç de manejar 1000 usuaris simultàniament.
• La web ha de ser compatible amb tots els navegadors moderns.
• Els temps de resposta han de ser inferiors a 2 segons per a qualsevol operació.

Aquests requisits poden venir i/o obtenir-se de diferents origen:

• Un enunciat d'una pràctica a l'aula
• Un enunciat d'un projecte complert a desenvolupar
• Una descripció simple del que s'ha de desenvolupar
• Un projecte d'un col·lectiu diferent a l'informàtic
• Una idea que s'ha originat en un debat
• …

Per tant tindrem una tasca important en la definició i concreció dels requisits com a base del que s'ha de desenvolupar.

També és important definir els requisits tècnics que usarem en l'arquitectura de desenvolupament. D'alguna manera com està organitzat aquest curs:

• Una arquitectura estàtica de continguts HTML + CSS permetrà obtenir un web amb contingut web estàtic i que sempre es veurà de la mateixa manera cada vegada que navegui per ell. Caldrà una modificació per part del desenvolupador per a modificar-lo.
• Una generació dinàmica de frontend. Això permet que usant lleguatges d'scripting es pugui dinamitzar el contingut del que mostra el navegador i que es pugui interactuar amb ell. Per exemple, generar i resoldre un sudoku.
• Una generació dinàmica des de backend. Això permet que usant lleguatges de servidor poder generar interfícies amb contingut dinàmic sobre una base de dades. Podrem generar el concepte d'intranet per a l'usuari intervingui en la generació del contingut del web. Per exemple, un fòrum, un xat, un diari, …

Info

Ara en aquest punt del curs, estem en la primera arquitectura, per tant, els requisits tant funcionals com no funcionals han d'estar orientats a assolir interfícies amb continguts estàtics.

Com ho farem?

En la següent sessió 7 definirem una mica més el concepte de projecte que establirà un marc de com treballar sobre el desenvolupament d'un lloc web complert.

Ara per ara, ens centrarem en aconseguir un llistat de requeriments funcionals i no funcionals a partir de la descripció que ens donin o observada.

Tot seguit definirem l'arquitectura. Bàsicament serà l'estructura de carpetes i arxius que tindrà la nostra web

Tot seguit definim el disseny de les interfícies, que serà la unió del format d'etiquetes HTML més l'aplicació d'estils CSS Incloent totes les imatges i logos específics. El que seria maquetació de continguts. Aquí la gent de màrqueting de l'empresa que pugui estar-hi relacionada hi tindrà molt a dir sobre el disseny corporatiu.

Finalment realitzarem la tasca de desenvolupament propi del contingut web, que serà usant el IDE, escriure, comprovar i publicar el web generat.

Disseny

Una vegada tenim definit els requisits del web a desenvolupar anem a descriure la interfície. La interfície serà la visualització en el navegador del codi HTML+ CSS que s'ha generat. Els enllaços ens proporcionaran la possibilitat de navegar per tot el contingut estructurat.

Descriure una interfície web implica detallar els elements visuals, la disposició, les funcionalitats i la interacció que l'usuari tindrà amb el sistema. Una bona descripció ha de ser clara, precisa i centrar-se en els aspectes que fan que l'experiència de l'usuari sigui eficient i agradable. Aquí tens un enfocament per descriure una interfície web:

1. Estructura general:

Comença descrivint l'estructura bàsica de la pàgina web.

• Layout (disposició): Explica com es distribueixen les àrees principals de la pàgina (capçalera, cos, peu de pàgina, barra lateral, etc.).

  Exemple:

  "La pàgina compta amb una capçalera fixa a la part superior, una barra de navegació al costat esquerre i una secció de contingut central ampla. A la part inferior hi ha un peu de pàgina amb informació de contacte."

• Responsive design: Descriu si la interfície està dissenyada per adaptar-se a diferents dispositius (mòbils, tauletes, ordinadors).

  Exemple:

  "La interfície és totalment responsiva, adaptant-se a diferents pantalles, amb un menú desplegable en dispositius mòbils."

  Warning

  això no ho treballem molt aquest curs, més a 2n.

2. Elements visuals:

Descriu els components visuals que conformen la interfície.

• Capçalera (header): Inclou elements com el logotip, el menú de navegació, icones d'accés ràpid (inici de sessió, cistella de compra, etc.).

  Exemple:

  "La capçalera mostra el logotip a l'esquerra, un menú de navegació al centre amb pestanyes principals, i un botó d'inici de sessió a la dreta."

• Barra de navegació: Descriu com l'usuari es mou a través del lloc.

  Exemple:

  "El menú de navegació inclou enllaços a les seccions 'Inici', 'Serveis', 'Blog' i 'Contacte', amb un submenú desplegable per a 'Productes'."

• Botons i icones: Explica la funció i l'estètica dels botons, icones o altres elements d'interacció.

  Exemple:

  "Els botons són grans, amb un disseny arrodonit i un color blau clar. Quan es fa 'hover', el color es torna més fosc per indicar interactivitat."

• Formularis: Detalla com es presenten els camps d'entrada per recollir informació de l'usuari.

  Exemple:

  "El formulari de registre té camps de text per nom, correu electrònic i contrasenya, amb una validació instantània que indica errors en temps real."

3. Interacció i usabilitat:

Aporta informació sobre com interactua l'usuari amb la interfície i com es facilita aquesta experiència.

• Experiència d'usuari (UX): Descriu com de fàcil és per a l'usuari navegar i utilitzar la web.

  Exemple:

  "La interfície està dissenyada de manera intuïtiva, amb indicadors visuals que guien l'usuari a través del procés de registre i compra."

• Feedback de l'usuari: Explica com el sistema dona respostes visuals o auditives a les accions de l'usuari.

  Exemple:

  "Quan un usuari envia un formulari, apareix un missatge emergent de confirmació. Els errors es mostren amb missatges vermells a prop dels camps incorrectes."

4. Estil visual i temàtica:

Descriu l'estètica general del lloc web, com els colors, tipografies i altres elements d'identitat visual.

• Paleta de colors: Descriu els colors principals i secundaris utilitzats a la interfície.

  Exemple:

  "La interfície utilitza una paleta de colors minimalista amb tons blancs, blaus suaus i grisos per a una experiència neta i professional."

• Tipografia: Explica les fonts utilitzades i la seva llegibilitat.

  Exemple:

  La tipografia principal és 'Roboto', amb un estil modern i fàcil de llegir. Els títols són en negreta per destacar les seccions importants."

5. Accessibilitat:

Descriu si la interfície té en compte les necessitats d'usuaris amb discapacitats.

• Compatibilitat amb teclat: Explica si els usuaris poden navegar pel lloc sense un ratolí.

• Altres aspectes: Com la presència de text alternatiu per a imatges, contrast adequat per a persones amb dificultats visuals, etc.

  Exemple:

  "Totes les imatges tenen text alternatiu descrit, i el contrast de colors compleix amb les normes d'accessibilitat WCAG."

Exemple de descripció

• La interfície web de l'aplicació és minimalista i moderna.
• Té una capçalera fixa amb el logotip de l'empresa.
• Un menú de navegació senzill amb enllaços a 'Inici', 'Productes', 'Serveis' i 'Contacte'.
• Els botons són destacats en color blau i canvien a un to més fosc quan l'usuari hi passa el ratolí, oferint un feedback immediat.
• El cos principal està dividit en tres seccions: una secció de presentació amb imatges de gran qualitat, una llista de productes destacats amb filtres de cerca, i un formulari de contacte a la part inferior.
• La interfície és totalment responsiva, amb un menú d'hamburguesa en mòbils i tauletes.
• Els elements visuals són clars i la tipografia 'Roboto' assegura una llegibilitat excel·lent.
• El lloc està dissenyat tenint en compte l'accessibilitat, amb descripcions de text alternatiu per a totes les imatges i un bon contrast de colors

El següent pas és dissenyar-ho gràficament.

Aquí tenim diverses opcions:

I podem veure una evolució

un esboç inicial -> una maqueta de l'estructura -> una maqueta amb contingut -> un prototipus real

Enllaços

Algunes eines i recursos:

• Figma
• Canva
• Pixabay
• Namelix
• Webdesing
• SiteInspire
• Flamingtext

Respecte al dispositiu de visualització podem tenir diverses opcions que en poden variar la distribució, el que s'anomena disseny responsiu o adaptatiu. Tot i que és un objectiu per al proper curs, ara podem anomenar:

Interacció:

• Ordinadors: Interacció basada en el ratolí i el teclat, amb més espai per a elements interactius petits, com botons o menús.

• Mòbils i tauletes: Interacció tàctil, cosa que requereix botons més grans i més espai entre elements per evitar clics accidentals.

Navegació:

• Ordinadors: Menús horitzontals o desplegables amb espai per a moltes opcions.

• Mòbils: Menús simplificats o convertits en icones (per exemple, un menú d'hamburguesa).

Contingut:

• Ordinadors: Permeten continguts més extensos a la pantalla amb informació visual com gràfics, taules, etc.

• Mòbils: Contingut simplificat, textos concisos i ús de formats apilats per facilitar la lectura i la interacció.

Velocitat de càrrega:

• Els dispositius mòbils poden tenir connexions més lentes, de manera que és important optimitzar les imatges, utilitzar menys scripts i reduir la càrrega d'elements pesats.

Exemple d'un lloc responsiu:

Imagina una botiga en línia que s'adapta segons el dispositiu:

• En un ordinador, el lloc mostra un catàleg de productes amb tres columnes, una barra lateral amb filtres, un menú de navegació complet i grans imatges de productes.
• En una tauleta, el lloc redueix les columnes a dues, el menú de navegació es simplifica, i els filtres es poden plegar en una secció desplegable.
• En un mòbil, només hi ha una columna, amb el menú convertit en un botó d'hamburguesa i imatges més petites. Els filtres apareixen a la part superior o com a botons a la part inferior.

L'objectiu principal és assegurar que la interfície web sigui funcional, visualment atractiva i fàcil d'utilitzar en una àmplia gamma de dispositius, com ara ordinadors d'escriptori, portàtils, tauletes i telèfons mòbils. Això es fa ajustant el layout, els elements visuals i la navegació en funció de la mida de la pantalla i altres característiques del dispositiu.

En resum, dissenyar una interfície segons el dispositiu implica adaptar el contingut, la navegació, i els elements visuals per assegurar una experiència òptima independentment de la pantalla utilitzada. El disseny responsiu és la tècnica més comuna perquè permet flexibilitat en qualsevol situació, mentre que el disseny adaptatiu es fa servir en casos on es requereix més control detallat per a dispositius específics.

Com ho fem?

Una vegada tenim l'esboç o la maqueta el que fem és generar l'HMTL + CSS que en donarà format. Ara ja treballarem amb els dos elements conjuntament.

Seguirem una mica aquests criteris:

1. Disseny responsiu (Responsive Design)

El disseny responsiu fa ús de media queries (consultes de mitjans), proporcions flexibles i grids fluïdes per ajustar dinàmicament el layout de la pàgina segons la mida de la pantalla.

Característiques del disseny responsiu:

• Media Queries: Són regles CSS que permeten aplicar estils diferents depenent de l'amplada de la pantalla.

  Exemple:

  Una pàgina pot tenir una disposició de tres columnes en un ordinador d'escriptori, però en pantalles més petites, com un mòbil, aquestes columnes poden reorganitzar-se en una sola columna per facilitar la lectura.

  @media (max-width: 768px) {
    .sidebar {
        display: none;
    }
    .main-content {
        width: 100%;
    }
  }
  

• Grids fluïdes: Els layouts es dissenyen utilitzant percentatges en lloc de píxels fixos, de manera que els elements poden canviar de mida proporcionalment segons la mida de la pantalla.

  Exemple:

  "El layout es basa en una graella flexible on les columnes s'amplien o es redueixen automàticament depenent de la mida de la finestra."

• Imatges responsives: Les imatges i els vídeos s'ajusten automàticament a la mida de la pantalla per no desbordar el contingut.

  Exemple:

  "Les imatges tenen una amplada màxima del 100%, de manera que no surten del contorn de la seva capsa contenedora."

  img {
    max-width: 100%;
    height: auto;
  }
  

• Tipografies escalables: Es fan servir unitats de mida relatives (com em o rem) per fer que la mida del text sigui escalable i llegible en totes les mides de pantalla.

Exemples d'ajustaments segons dispositiu:

• Ordinadors d'escriptori (pantalles grans):

  • S'utilitzen layouts amplis amb diverses columnes, més espai blanc i menús de navegació detallats.
  • S'inclouen elements visuals grans i espai per a publicitat, en cas necessari.

• Tauletes (pantalles mitjanes):

  • Les columnes poden reduir-se a dues o una sola.
  • Els menús es poden convertir en menús desplegables o botons d'hamburguesa per optimitzar l'espai.
  • Les imatges es redueixen de mida però es mantenen visibles sense deformacions.

• Telèfons mòbils (pantalles petites):

  • Els layouts es simplifiquen, sovint reduint-se a una sola columna, fent que el contingut sigui més fàcil de desplaçar verticalment.
  • Els menús sovint es transformen en menús d'hamburguesa (tres línies que despleguen el menú quan es fa clic).
  • Els textos, botons i altres elements d'interacció augmenten en mida per facilitar el clic i millorar l'usabilitat tàctil.

2. Disseny adaptatiu (Adaptive Design)

El disseny adaptatiu utilitza layouts fixes creats específicament per a mides de pantalla concretes. En lloc d'ajustar dinàmicament com en el disseny responsiu, es creen dissenys predefinits per a diverses mides de pantalla.

Caracteristiques del disseny adaptatiu:

• Layouts predefinits: Es desenvolupen diferents versions del mateix lloc web per a cada mida de pantalla comuna (per exemple, mòbil, tauleta, escriptori).
• Exemple: Pot haver-hi tres versions fixes d'un lloc: una per a telèfons mòbils (amplada inferior a 600px), una per a tauletes (entre 600px i 900px) i una per a escriptoris (més de 900px).
• Optimització específica per a dispositius: Cada disseny es crea tenint en compte les característiques específiques del dispositiu objectiu. Això pot permetre un control més precís sobre l'experiència d'usuari en diferents dispositius, però pot ser menys flexible que el disseny responsiu.
• Gestió de rendiment: En funció del dispositiu, es poden carregar versions més lleugeres d'elements com imatges o vídeos per millorar el temps de càrrega en mòbils, per exemple.

Generem estructura HTML

Aquí crearem els elements HTML amb etiquetes semàntiques per a cada secció dissenyada.

Recordem una mica les seccions de disseny que tenim:

• Encapçalament: Normalment, una gran franja a la part superior amb un encapçalament gran, un logotip i potser un lema. Això normalment es manté igual d'una pàgina web a una altra.
• Barra de navegació: Enllaços a les seccions principals del lloc; normalment representat per botons de menú, enllaços o pestanyes. Pot variar segons tamany interfície.
• Contingut principal: Una gran àrea al centre que conté la major part del contingut únic d'una pàgina web determinada, per exemple, el vídeo que voleu veure o la història principal que esteu llegint, o el mapa que voleu veure o els titulars de les notícies, etc. Aquesta és l'única part del lloc web que sens dubte variarà d'una pàgina a una altra!
• Barra lateral: Alguna informació perifèrica, enllaços, cites, anuncis, etc. Normalment, això és contextual al contingut principal (per exemple, a la pàgina d'un article de notícies, la barra lateral pot contenir la biografia de l'autor o enllaços a articles relacionats), però hi ha també casos en què trobareu alguns elements recurrents com un sistema de navegació secundari.
• Peu de pàgina: Una tira a la part inferior de la pàgina que generalment conté lletra petita, avisos de drets d'autor o informació de contacte. És un lloc per posar informació comuna (com la capçalera), però normalment, aquesta informació no és crítica ni secundària per al propi lloc web. El peu de pàgina també s'utilitza de vegades amb finalitats de SEO, proporcionant enllaços per accedir ràpidament al contingut popular.

Per implementar aquest marcatge semàntic, HTML proporciona etiquetes dedicades que podeu utilitzar per representar aquestes seccions, per exemple:

• capçalera: <header>.
• barra de navegació: <nav>.
• contingut principal: <main> , amb diverses subseccions de contingut representades per <article>, <section>, i <div> elements.
• barra lateral: <aside> ; sovint col·locat a l'interior <main>.
• peu de pàgina: <footer>.

A dins del la secció de contingut general podrem usar altres etiquetes per donar format al text:

• <div> és un element no semàntic a nivell de bloc, que només hauríeu d'utilitzar si no podeu pensar en un element de bloc semàntic millor per utilitzar, o no voleu afegir cap significat específic.
• <span> és un element no semàntic en línia, que només hauríeu d'utilitzar si no podeu pensar en un element de text semàntic millor per embolicar el vostre contingut o no voleu afegir cap significat específic.
• <br> crea un salt de línia en un paràgraf; és l'única manera de forçar una estructura rígida en una situació en què es vol una sèrie de línies breus fixes, com en una adreça postal o un poema.
• <hr> els elements creen una regla horitzontal al document que denota un canvi temàtic en el text (com ara un canvi de tema o escena). Visualment només sembla una línia horitzontal.

AVIS

Recordem l'exemple de la sessió anterior →

Generem paletes de colors

Un pas important en el disseny és definir la paleta de colors que usarem per pintar o colorejar els diferents elements de la interfície.

1. Estudia la identitat de la marca

Si la web està associada a una marca, producte o servei, és important tenir en compte els valors i la personalitat de la marca. Els colors haurien de reflectir aquestes qualitats.

Exemple:

Si la marca transmet confiança i professionalitat, podries optar per tons blaus o grisos. Si es tracta d'una marca jove i dinàmica, podries utilitzar colors vibrants com vermells o taronges.

• Pensa en les emocions que vols transmetre: el blau evoca calma i confiança, el vermell és passió i urgència, el verd és frescor i sostenibilitat, etc.

2. Escull un color primari (color base)

Aquest serà el color que definirà la major part de la web. És el color central que serà present en els elements visuals més prominents, com la capçalera, els botons o els enllaços.

Consell:

Selecciona un color que s'alineï amb la identitat de la marca i que pugui ser complementat fàcilment per altres colors.

Exemple:

Si treballes per una web d'un servei financer, el blau fosc o el verd poden ser una bona elecció perquè transmeten estabilitat i confiança.

3. Genera colors complementaris

A partir del color base, genera colors complementaris utilitzant teories d'harmonia de color com:

• Combinació complementària: Triar colors oposats al cercle cromàtic. Això crea contrast i energia.
• Combinació analògica: Seleccionar colors que estiguin un al costat de l'altre al cercle cromàtic. Això crea una sensació d'harmonia i cohesió.

• Combinació triàdica: Selecciona tres colors equidistants al cercle cromàtic, creant un equilibri visual entre contrast i harmonia.

  Eines útils:

  • Pots utilitzar eines en línia com Coolors, Adobe Color o Paletton per generar paletes de colors automàticament seguint aquestes harmonies.

4. Defineix colors secundaris

A més del color primari, hauràs de definir colors secundaris per a detalls i accents visuals. Aquests colors poden ser utilitzats en fons secundaris, botons d'acció secundària, o textos destacats.

Consell:

Mantén els colors secundaris en consonància amb el primari. Si el primari és intens, els secundaris poden ser més suaus per evitar la sobrecàrrega visual.

5. Tonalitats i variacions (shades i tints)

A partir dels colors primaris i secundaris, pots crear variacions més clares (tints) o més fosques (shades) per crear profunditat i jerarquia dins la pàgina.

Exemple:

Pots tenir diferents tons del color base per aplicar-los en diferents seccions. Un blau clar com a fons de secció, i un blau més fosc per als botons o textos.

6. Considera el contrast i l'accessibilitat

L'accessibilitat és clau, així que assegura't que hi ha prou contrast entre els colors del text i el fons. Utilitza eines com Contrast Checker o WebAIM per comprovar que el contrast sigui adequat, especialment per a persones amb dificultats visuals.

Exemple:

Un text en blanc sobre un fons groc clar pot ser difícil de llegir, mentre que el mateix text sobre un blau fosc serà molt més clar.

7. Utilitza colors neutres per a equilibrar

Els colors neutres (blancs, grisos i negres) són imprescindibles per equilibrar una paleta. Utilitza'ls en fons, seccions de text o per donar espai a altres colors més vius.

Exemple:

Un fons blanc o gris clar fa que el contingut es vegi més net i professional, i permet que els colors més vibrants dels botons i els elements visuals destacats tinguin més impacte.

8. Prova la paleta en context

Un cop hagis creat la paleta, és important veure com es veu a la web. A vegades, colors que semblen bé per separat poden no funcionar junts en un entorn real.

Consell:

Aplica la paleta a maquetes o prototips i assegura't que compleix amb els objectius de l'experiència d'usuari.

Exemples d'estratègies:

Estil minimalista: Utilitza un color base i variacions de gris per a donar més espai blanc. Aquesta és una tàctica utilitzada per webs de serveis o blogs.
Estil vibrant: Per webs de productes o de marques creatives, utilitza una paleta de colors vius i contrastats que cridin l'atenció.

Analitzem al pàgina de https://www.vueling.com/

La pàgina web de Vueling utilitza una paleta de colors clara i vibrant per reflectir la seva marca, amb el groc com a color primari destacat, que transmet dinamisme, joventut i accessibilitat.

Aquest color predomina en botons, icones, i elements visuals importants per cridar l'atenció.

Acompanyant el groc, utilitza el blanc com a color de fons per donar una sensació de claredat i simplicitat, mentre que el gris i el negre s'utilitzen per a textos i altres elements secundaris, afegint professionalitat i llegibilitat.

Analitzem un CSS d'un BUTTON

  btn--primary {
      background-color: #fff000;
      border-color: transparent;
      color: #000;
  }

Podem provar https://coolors.co/, una bona eina per a generar paletes de colors segons l'interès del dissenyador.

Paleta de colors

Podem provar https://coolors.co/, una bona eina per a generar paletes de colors segons l'interès del dissenyador.

Veiem-ne un exemple de diferents generacions cromàtiques segons el que volguem aconseguir.

La paleta que podem exportar de la última captura correspondria a:

/* CSS HEX */
--pakistan-green: #243010ff;
--apple-green: #87a330ff;
--yellow-green: #a1c349ff;
--sage: #cad593ff;
--cal-poly-green: #2a3c24ff;

/* CSS HSL */
--pakistan-green: hsla(83, 50%, 13%, 1);
--apple-green: hsla(75, 55%, 41%, 1);
--yellow-green: hsla(77, 50%, 53%, 1);
--sage: hsla(70, 44%, 71%, 1);
--cal-poly-green: hsla(105, 25%, 19%, 1);

/* SCSS HEX */
$pakistan-green: #243010ff;
$apple-green: #87a330ff;
$yellow-green: #a1c349ff;
$sage: #cad593ff;
$cal-poly-green: #2a3c24ff;

/* SCSS HSL */
$pakistan-green: hsla(83, 50%, 13%, 1);
$apple-green: hsla(75, 55%, 41%, 1);
$yellow-green: hsla(77, 50%, 53%, 1);
$sage: hsla(70, 44%, 71%, 1);
$cal-poly-green: hsla(105, 25%, 19%, 1);

/* SCSS RGB */
$pakistan-green: rgba(36, 48, 16, 1);
$apple-green: rgba(135, 163, 48, 1);
$yellow-green: rgba(161, 195, 73, 1);
$sage: rgba(202, 213, 147, 1);
$cal-poly-green: rgba(42, 60, 36, 1);

/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #243010ff, #87a330ff, #a1c349ff, #cad593ff, #2a3c24ff);
$gradient-right: linear-gradient(90deg, #243010ff, #87a330ff, #a1c349ff, #cad593ff, #2a3c24ff);
$gradient-bottom: linear-gradient(180deg, #243010ff, #87a330ff, #a1c349ff, #cad593ff, #2a3c24ff);
$gradient-left: linear-gradient(270deg, #243010ff, #87a330ff, #a1c349ff, #cad593ff, #2a3c24ff);
$gradient-top-right: linear-gradient(45deg, #243010ff, #87a330ff, #a1c349ff, #cad593ff, #2a3c24ff);
$gradient-bottom-right: linear-gradient(135deg, #243010ff, #87a330ff, #a1c349ff, #cad593ff, #2a3c24ff);
$gradient-top-left: linear-gradient(225deg, #243010ff, #87a330ff, #a1c349ff, #cad593ff, #2a3c24ff);
$gradient-bottom-left: linear-gradient(315deg, #243010ff, #87a330ff, #a1c349ff, #cad593ff, #2a3c24ff);
$gradient-radial: radial-gradient(#243010ff, #87a330ff, #a1c349ff, #cad593ff, #2a3c24ff);

Generar un logo

Un logo serà una imatge que identificarà la marca o concepte de la web i podria tenir de característiques:

• Simplicitat: Un disseny net i senzill és més fàcil de reconèixer i recordar.
• Memorabilitat: Ha de ser distintiu i destacar de la competència.
• Versatilitat: Funciona en diverses mides i formats (digitals i impresos).
• Pertinència: El disseny ha de reflectir els valors i la personalitat de la marca.
• Temporalitat: Tot i ser modern, hauria d'evitar seguir tendències passatgeres per mantenir-se rellevant a llarg termini.

Podem seguir alguns passos:

1. Identitat de marca
   Decideix quines qualitats vols reflectir amb el logo. Ha de ser simple, memorable, i reflectir els valors de la teva web, igual que la paleta de colors.

2. Elecció de colors
   Utilitza els colors principals de la paleta per crear consistència amb la interfície. Per exemple, pots utilitzar el color base com a protagonista i el color secundari per a detalls.

3. Formes simples i reconeixibles
   Els logos moderns sovint utilitzen formes geomètriques simples o tipografies clares. Combina formes que transmetin els valors de la marca, com ara estabilitat (formes quadrades) o dinamisme (formes circulars).

4. Tipografia adequada Selecciona una tipografia que complementi el disseny de la web i que sigui llegible en diverses mides. És important que el text del logo (si n'hi ha) tingui un estil que s'alineï amb l'aspecte general.

5. Proves de mida i aplicacions Assegura't que el logo funcioni bé en diferents mides (favicon, pantalles mòbils, i formats més grans). El disseny ha de ser reconeixible tant en gran com en petit format.

Podem generar logos amb els següents formats de imatges:

• SVG (Scalable Vector Graphics): Format vectorial ideal perquè el logo es pot escalar sense perdre qualitat. Perfecte per web i impressió.
• PNG: Suporta transparència i és útil per a la web, però és un format basat en píxels, per tant, no és escalable com SVG.
• JPEG: No és recomanable per a logos a causa de la compressió amb pèrdua que redueix la qualitat, especialment en dissenys amb detalls.

Normalment es prefereix SVG per la seva versatilitat.

Algunes eines:

• https://www.canva.com/es_es/crear/logos/
• https://www.squarespace.com/logo#
  
  

Uns logos d'exemple

Generem imatges

Normalment el web inclourà imatges. Depenent del tipus de web, les imatges seran d'una forma i tipologia diferent. Per exemple. La imatge de portada inicial reforçarà la marca comercial de manera impactant o bé mostrant diferents productes comercials

Ferrari

En aquest cas tenim una única imatge que ocupa casi el 100% de la interfície del navegador. Fins i tot pot ser un vídeo animat..

Bonpreu

En aquest cas, mostrem un banner que anirà canviant i una sèrie d'imatges amb productes amb indicació de compra. Correspondria directament a un requisit funcional del web.

CatSalut

En aquest cas, és una web de serveis. La imatge ens dona visibilitat i informació de la targeta sanitària.

Normalment ara les imatges seran capturades per càmares fotogràfiques i caldrà un retoc per ajustar-les.
Eines que podem usar per generar o retocar imatges:

• PixelR
• Gimp
• ImageResizer

Les imatges d'una web han de ser seleccionades amb cura, ja que influeixen directament en l'experiència d'usuari i la velocitat de càrrega. Algunes consideracions importants:

1. Qualitat: Les imatges han de tenir una resolució adequada, però sense ser massa pesades.
2. Rellevància: Han de complementar el contingut textual, reflectint el missatge de la pàgina.
3. Optimització: Comprimeix les imatges per millorar el rendiment.
4. Accessibilitat: Inclou textos alternatius (alt text) per a descripcions i millorar l'accessibilitat.
5. Format: Utilitza formats com JPEG per fotos, PNG per gràfics amb transparència i WebP per un millor equilibri qualitat/pes.

Els arxius d'imatges tenen diverses característiques que afecten la seva utilització en webs. Aquí tens un resum dels formats més comuns:

1. JPEG:

   • Compressió amb pèrdua, adequada per fotos.
   • Bona qualitat en mides petites, però perd detall amb compressió alta.

2. PNG:

   • Compressió sense pèrdua.
   • Suporta transparència.
   • Adequat per gràfics, icones, i logotips.

3. GIF:

   • Suporta animació, però amb un màxim de 256 colors.
   • Utilitzat per imatges petites o animades.

4. WebP:

   • Millor compressió que JPEG i PNG.
   • Suporta transparència i animació.

5. SVG:

   • Format vectorial escalable sense pèrdua de qualitat.
   • Ideal per a gràfics i logotips en web.

Podem trobar algunes imatges lliures

https://openclipart.org/
https://www.freeimages.com/

Generem i apliquem estils CSS

Una vegada tenim ja definit el nostre disseny de la interfície que donarà resposta als requisits, tant funcionals, com no funcionals, el que haurem de fer és escriure les etiquetes HTML i aplicar-hi estils CSS.

Ho farem aplicant un full d'estils extern .css

Per fer-ho usarem l'etiqueta <link> a dins del <head> seguint l'estructura de carpetes definida.

<link rel="stylesheet" href="estils/styles.css">

Normalment usarem els selectors de classe i d'etiqueta

Sintaxi:    etiqueta { atribut: valor }

Sintaxi:    .classe { atribut:valor }

FLEX

Actualment per generar la interfície de la millor manera flexible i adaptable a diferents tamanys i disposicions usarem el concepte Flex.

L'aplicarem usant el concepte de contenidor flexible. Que inclou a dins seu, els elements que volem mostrar a la interfície i alhora indiquem la seva distribució amb propietats d'estils CSS. És a dir que s'aplica el concepte de cascada als elements interns

Aquest element contenidor pot tenir etiqueta <div> o semàntica <main>, <footer>, … I a dins seu podem usar etiquetes <div> per exemple:

Per fer-ho, apliquem la propietat estil:

  display: flex

Ho farem al selector d'elements:

  footer {
    display: flex;
  }

A partir d'ara els elements <div> interns es tornen elements CSS flexibles.

Tenim les següents propietats d'estils al contenidor:

• flex-direction: defineix la direcció dels elements interns:

  • Valors de: row, row-reverse, column i column-reverse

    Exemple de column-reverse:

      div {
        display: flex;  
        flex-direction: column-reverse;
      }
    

    

• flex-wrap: Defineix si els elements es col·loquen en una sola línia o en diverses:

  • Valors: no-wrap, wrap, wrap-reverse

    Exemple CSS de wrap:

      div {
        display: flex;  
        flex-wrap:wrap;
      }
    

    

• flex-flow: Permet establir alhora les propietats flex-direction i flex-wrap:

  • Valors: combinacions de row, row-reverse, column, column-reverse, no-wrap, wrap i wrap-reverse

    Exemple CSS combinat:

      div {
        display: flex;  
        flex-flow: row-reverse wrap;
      }
    

    

• justify-content: Permet posicionar els elements horitzontalment:

  • Valors: center, flex-start, flex-end, space-around, space-between

    Exemple CSS space-around, que distribuirà uniformement a l'espai disponible.

      div {
        display: flex;  
        justify-content:space-around;
      }
    

    

• align-items: Permet alinear els elements verticalment

  • Valors: center, flex-start, flex-end, stretch, baseline

    Exemple CSS flex-end, ho alinearà a la part inferior del contenidor

      div {
        display: flex;  
        align-items: flex-end;
      }
    

    

• align-content: Permet alinear les línies flexibles dels elements

  • Valors: space-between, space-around, stretch, center, flex-star, flex-end

    Exemple CSS flex-end, ho alinearà a la part inferior del contenidor, ho combinem amb flex-wrap: wrap

      div {
        display: flex;  
        align-content: flex-end;
        flex-wrap: wrap;
      }
    

    

Com resolem el problema de centrar perfectament un element dins d'un contenidor?

    <!DOCTYPE html>
    <html>
      <head>
        <style>
        .flex-container {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: DodgerBlue;
        }

        .flex-container > div {
          background-color: #f1f1f1;
          color: white;
          width: 100px;
          height: 100px;
        }
        </style>
      </head>
      <body>

        <div class="flex-container">
          <div></div>
        </div>

      </body>
    </html>

Tenim un div contenidor que li apliquem la classe .flex-container

Definim l'estil per a la classe:

    .flex-container {
      display: flex; // apliquem flex
      justify-content: center; //el contingut centrat horitzontalment
      align-items: center; // alineem al centre verticalement
      background-color: DodgerBlue; // color blau
    }

I definim per al <div> requadre a dins del <div> contenidor

    .flex-container > div {
      background-color: #f1f1f1; // color de fons clar
      color: white; // color blanc
      width: 100px; //amplada 100 píxels
      height: 100px; //alçada 100 píxels
    }

Ara comentarem les propietats dels elements secundaris a dins del contenidor

• order: Específica l'ordre dels elements

  • Valors: número

    Exemple CSS order a un <div> que conté text 3, amb la classe .primer. Això farà que el posicioni en primer lloc i la resta a continuació.

        div.primer {
          order: -1;
        }
    

    

• flex-grow: Específica quant creixerà un element flexible respecte els altres

  • Valors: número

    Exemple CSS flex-grow un <div> que conté text 2, amb la classe .mesgran. Això farà que el tamany sigui 6 vegades més gran que la resta

        div.mesgran {
          flex-grow: 6;
        }
    

    

• flex-shrink: Específica quant es reduirà un element flexible respecte els altres

  • Valors: número. 0 (no redueix), 1 (per defecte) , 2, 3, 4… (proporció reducció)

    Exemple CSS flex-shrink un <div> que conté text 3, amb la classe .noreduir. I una reduirmitad al que té text 9 Això farà que el tamany no es redueixi tant com la resta d'elements i el 9 a la mitad

        div.noreduir {
          flex-shrink: 0;
        }
        div.reduirmitad{
          flex-srink: 2;
        }
    

    

• flex-basis: Específica la longitud inicial de l'element flexible

  • Valors: número px

    Exemple CSS flex-basis un <div> que conté text 2, amb mida 300px

        div.mida200 {
          flex-basis: 300px;
        }
    

    

• flex: És la propietat abreujada per a flex-grow, flex-shrink i flex-basis en una mateixa entrada.

  • Valors: número número número_px

    Exemple CSS flex un <div> que conté text 2, amb mida 250px

        div.mantenim250 {
          flex: 0 0 250px;
        }
    

    

• align-self: Especifica l'alineació vertical de l'element dins del contenidor flexible. Sobreesciu al alig-items del contenidor

  • Valors: center, flex.start, flex-end

    Exemple CSS flex un <div> que conté text 2, centrat en vertical respecte als altres elements.

        div.centrat {
          align-self:center;
        }
    

    

Idea

Ara ja és tasca d'aprenentatge de les habilitats de dissenyar interfícies que permetrà generar interficies ordenades i que sempre es visualitzin correctament.

D'alguna manera serà traslladar el que em marcat a l'esboç inicial al moment de maquetar.

Idea

Podem seguir diverses estratègies, sobre maquetar una web estil de l'exemple "Loren Ipsum" o Tintoreria:

• Només aplicar Flex box a dins de l'article main

• Aplicar i anidar Flexbox a totes les seccions. Aplicant flex-direction: column; al contenidor principal.

Exemple de Canvi responsiu i adaptatiu

codi CSScodi HTMLVisualitzacióExplicació

    @media (max-width: 800px) {
      .flex-container {
      flex-direction: column;
    }

    <!DOCTYPE html>
    <html lang="ca">
    <head>
      <meta charset="UTF-8">
    <style>
    * {
      box-sizing: border-box;
    }

    .flex-container {
      display: flex;
      flex-direction: row;
      font-size: 30px;
      text-align: center;
    }

    .flex-item-left {
      background-color: #f1f1f1;
      padding: 10px;
      flex: 50%;
      border: 2px;
      border-style: solid;
      border-color: black;
    }

    .flex-item-right {
      background-color: dodgerblue;
      padding: 10px;
      flex: 50%;
      border: 2px;
      border-style: solid;
      border-color: black;
    }

    /* Responsiu: canvia de fila a columna i es mostrarà un sota l'altre.  */
    @media (max-width: 800px) {
      .flex-container {
        flex-direction: column;
      }
    }
    </style>
    </head>
    <body>

    <h1>Responsive Flexbox - vertical (<800px)</h1>

    <a href="p1-s6-ex1.html"><- Tornar </a>

    <p>"flex-direction: row;" Posiciona els elements flexs horitzontalment (d'esquerra a dreta).</p>
    <p>"flex-direction: column;" Posiciona els elements flexs verticalment (de dalt a baix)</p>
    <p><b>Canvia el tamany de la finestra menor o major de 800 px i observa com canvia la disposició</b></p>

    <div class="flex-container">
      <div class="flex-item-left">1</div>
      <div class="flex-item-right">2</div>
    </div>

    </body>
    </html>

Tenim aquest resultat:

Tenim dos <divs> a dins d'un contenidor flex

  <div class="flex-container">
    <div class="flex-item-left">1</div>
    <div class="flex-item-right">2</div>
  </div>

Per defecte tenim la disposició

.flex-container {
  display: flex;
  flex-direction: row
}

Això disposa i adapta els elements de dins d'esquerra a dreta.

Si canviem el tamany menor de 800px, s'aplica el canvi per media a:

@media (max-width: 800px) {
  .flex-container {
  flex-direction: column;
}

I ara es mostren en una columna els dos <divs>

p1-s6-ex1.html p1-s6-ex1-ambmedia.html p1-s6-ex1-ambmedia.html :fontawesome-solid-download:

Vídeos explicatius sobre Flexbox

No confondre

No confondre amb la propietat column-count: valor

Això permetrà que un <div> <p> <span>... es separi el contingut automàticament amb columnes

MDN →

    <p style="column-count: 3">Aquest paràgraf que se li aplica l'atribut CSS `column-count: 3` es mostrarà en 3 columnes. El text estarà distribuit entre 3 columnes de text uniformement.</p>

Practiquem Flex

FlexBox Froggy

Ajuda a en Froggy i els seus amics escrivint codi CSS !

Omplim de contingut

Per últim ens resta omplir de contingut els diferents elements o contenidors del web.

Recordem les tres arquitectures:

• Estàtic HTML + CSS.
  Caldrà introduir manualment tot el contingut text i imatges

• Dinàmic frontend
  Podrem usar scripts de javascript o qualsevol altra framework vue, react, … per que el contingut es generi automàticament.

  Per exemple, un paginador de productes d'un catàleg

• Dinàmic backend
  Podrem usar scripts de php o qualsevol framework larevel, symfony, … per que el contingut es generi dinàmicament al servidor a partir de contingut d'una base de dades o del processament d'un formulari

  Per exemple: consulta de les dades d'un client d'una botiga online"

  Exemple

  Sigui quina sigui l'arquitectura emprada, tindrem la mateixa estructura de HTML + CSS com a base del contingut.

  És a dir el Javascript actuarà sobre el DOM de la pàgina web per dinamitzar el contingut i el PHP generarà contingut HTML a dins del els elements tal qual fariem nosaltres manualment amb una sentència echo

  Estàtic
  Usant el propi IDE amb escriptura manual

  Javascript

      <p id="Dades"></p>
      <script>
          document.getElementById("Dades").innerHTML = "El text així..";
      </script>
  

  PHP

      <p>
      <?php
        echo "El text així…";
      ?>