Scribd Logo
Upload

Welcome to Scribd!

  • PAC02 Nbarbanoj

    Uploaded by

    neus
    12 views15 pages
    llenguatges i estandards web

    Original Title

    PAC02_nbarbanoj

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    llenguatges i estandards web

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views15 pages

    PAC02 Nbarbanoj

    Uploaded by

    neus
    llenguatges i estandards web

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 15

    Neus​ ​Barbanoj​ ​Fernández

    Estudiant​ ​de​ ​Multimèdia


    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1

    Primera​ ​part
    Pregunta​ ​1​.​ ​Donades​ ​dues​ ​imatges,​ ​una​ ​amb​ ​valor​ ​decoratiu​ ​i​ ​una​ ​altra​ ​amb​ ​contingut​ ​significatiu,
    com​ ​les​ ​aplicaries​ ​en​ ​una​ ​pàgina​ ​web?​ ​Escriu​ ​un​ ​exemple​ ​del​ ​codi​ ​que​ ​utilitzaries​ ​en​ ​cadascun​ ​dels
    dos​ ​casos.

    Quan​ ​diem​ ​que​ ​una​ ​imatge​ ​té​ ​un​ ​valor​ ​decoratiu,​ ​una​ ​finalitat​ ​estètica​ ​será​ ​una​ ​imatge​ ​de​ ​fons​ ​en
    CSS,​ ​aquestes​ ​imatges​ ​no​ ​tenen​ ​que​ ​tenir​ ​cap​ ​text​ ​alternatiu,​ ​i​ ​podrem​ ​treballar​ ​els​ ​estils​ ​de​ ​les
    imatges.​ ​Un​ ​exemple:

    <body>
    <a​ ​href="login.html"><div​ ​class="logo"></div></a>

    body​ ​{

    background-image:​ ​url("../img/Slpash2.jpg");
    background-repeat:​ ​no-repeat;
    background-size:100%;
    font-family:​ ​'Titillium​ ​Web',​ ​sans-serif;

    .logo​ ​{
    background-image:​ ​url("../img/logo.png");
    background-size:​ ​100%;
    background-repeat:​ ​no-repeat;
    width:​ ​80%;
    height:​ ​250px;
    margin:​ ​0​ ​auto;
    margin-top:​ ​70px;

    En​ ​aquest​ ​exemple,​ ​el​ ​body​ ​té​ ​una​ ​imatge​ ​de​ ​fons,​ ​i​ ​d’altre​ ​banda,​ ​el​ ​.logo,​ ​en​ ​té​ ​un​ ​altre,​ ​tractades
    de​ ​fons,​ ​per​ ​tal​ ​de​ ​que​ ​la​ ​imatge​ ​s’ajusti​ ​al​ ​màxim​ ​al​ ​div,​ ​i​ ​poder​ ​treballar​ ​millor​ ​els​ ​estils​ ​d’aquestes.
    El​ ​codi​ ​és​ ​d’una​ ​aplicació​ ​que​ ​estic​ ​treballant​ ​actualment.
    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1
    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1

    Quan​ ​diem​ ​que​ ​una​ ​imatge​ ​té​ ​contingut​ ​significatiu,​ ​com​ ​una​ ​fotografia​ ​d’autor​ ​o​ ​un​ ​gràfic​ ​que
    presenta​ ​dades,​ ​l’hauriem​ ​d’afegir​ ​com​ ​element​ ​img,​ ​amb​ ​el​ ​text​ ​alternatiu​ ​adequat.
    Un​ ​exemple​ ​de​ ​imatge​ ​en​ ​html​ ​:
    Aquest​ ​exemple​ ​amb​ ​text​ ​alternatiu​ ​és​ ​tret​ ​de​ ​internet,​ ​ja​ ​que​ ​mai​ ​he​ ​treballat​ ​imatges​ ​amb​ ​text
    alternatiu.​ ​Però​ ​no​ ​está​ ​malament​ ​saber​ ​com​ ​fer-ho.

    <​img​ ​src​="​images/dinosaur.jpg​"
    ​ ​ ​ ​ ​ ​alt​="​The​ ​head​ ​and​ ​torso​ ​of​ ​a​ ​dinosaur​ ​skeleton;
    ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​it​ ​has​ ​a​ ​large​ ​head​ ​with​ ​long​ ​sharp​ ​teeth​">
    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1
    Pregunta​ ​2​.​ ​Quina​ ​diferència​ ​hi​ ​ha​ ​entre​ ​les​ ​directrius​ ​d'accessibilitat​ ​de​ ​contingut​ ​web​ ​1.0​ ​i​ ​les
    directrius​ ​d'accessibilitat​ ​del​ ​contingut​ ​web​ ​2.0?

    Les​ ​directius​ ​d’accessibilitat​ ​del​ ​contingut​ ​web​ ​1.0,​ ​el​ ​W3C​ ​és​ ​un​ ​dels​ ​principals​ ​organismes
    d’estàndards​ ​d’internet​ ​per​ ​a​ ​uns​ ​llocs​ ​web​ ​accessibes​ ​el​ ​mes​ ​de​ ​maig​ ​del​ ​1999.​ ​Les​ ​WCAG​ ​1.0​ ​són
    un​ ​grup​ ​de​ ​14​ ​directrius​ ​que​ ​intenten​ ​resumir​ ​els​ ​objectius​ ​necessaris​ ​per​ ​fer​ ​que​ ​una​ ​pàgina​ ​sigui
    accesible.

    El​ ​WCAG​ ​2.0​ ​no​ ​es​ ​centra​ ​en​ ​una​ ​tecnologia​ ​concreta​ ​com​ ​el​ ​WCAG​ ​1.0,​ ​és​ ​pot​ ​aplicar​ ​en​ ​HTML,​ ​CSS,
    Flash…​ ​es​ ​basa​ ​en​ ​4​ ​principis:
    1. Perceptibilitat:​ ​és​ ​basa​ ​en​ ​la​ ​percepció​ ​del​ ​contingut,​ ​tenen​ ​que​ ​tenir​ ​un​ ​suport​ ​per​ ​exemple
    a​ ​persones​ ​que​ ​no​ ​poden​ ​veure​ ​la​ ​web​ ​tenen​ ​que​ ​tenir​ ​l’opció​ ​de​ ​sentir​ ​el​ ​contingut,​ ​un
    suport​ ​d’audio,​ ​però​ ​d’aquesta​ ​manera​ ​també​ ​tindrem​ ​les​ ​pàgines​ ​que​ ​s’escolten​ ​,​ ​i​ ​han​ ​de
    tenir​ ​un​ ​suport​ ​de​ ​text,​ ​per​ ​aquells​ ​que​ ​no​ ​ho​ ​poden​ ​escoltar.
    2. Operativitat:​ ​poder​ ​interactuar​ ​amb​ ​l’aplicació​ ​o​ ​el​ ​contingut​ ​web,​ ​ho​ ​entenc​ ​com​ ​les
    aplicacions​ ​de​ ​entrenament​ ​que​ ​hi​ ​ha​ ​un​ ​feedback​ ​entre​ ​l’aplicació​ ​i​ ​l’usuari​ ​a​ ​l’hora​ ​de
    donar​ ​les​ ​calories​ ​cremades,​ ​el​ ​temps​ ​d’entrenament...
    3. Comprensibilitat:​ ​entendre​ ​l’interficie​ ​i​ ​el​ ​contingut​ ​web.
    4. Robustesa:​ ​Tenen​ ​que​ ​tenir​ ​solució​ ​oferta​ ​en​ ​altres​ ​plataformes​ ​o​ ​sistemes,​ ​perque​ ​tothom
    ho​ ​pugui​ ​utilitzar.

    L’accesibilitat​ ​és​ ​una​ ​qüestió​ ​important​ ​per​ ​raons​ ​tant​ ​economiques​ ​com​ ​socials,​ ​em​ ​de​ ​tenir​ ​en​ ​conte
    els​ ​receptors​ ​que​ ​tenim​ ​del​ ​nostre​ ​web,per​ ​tal​ ​de​ ​anar​ ​creat​ ​accessibilitat​ ​segons​ ​els​ ​seus​ ​interessos,
    amb​ ​avantatges.
    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1

    Pregunta​ ​3​.​ ​Sobre​ ​el​ ​model​ ​de​ ​caixa​ ​(box-model):


    3.1​​ ​Enumera​ ​i​ ​defineix​ ​les​ ​propietats​ ​del​ ​model​ ​de​ ​caixa​ ​CSS​ ​i​ ​posa​ ​un​ ​exemple​ ​de​ ​cada​ ​una​ ​d'elles.
    Els​ ​components​ ​que​ ​inclou​ ​el​ ​model​ ​de​ ​caixa​ ​són:
    1. Llenç​ ​de​ ​document
    2. Marges
    3. Vores
    4. Farcit
    5. Amplades​ ​i​ ​alçades​ ​dels​ ​elements
    6. Propietats​ ​dels​ ​elements​ ​fill

    .logo​ ​{
    background-image:​ ​url("../img/logo.png");
    background-size:​ ​100%;​ ​=>​ ​això​ ​indica​ ​que​ ​la​ ​imatge​ ​de​ ​fons,​ ​ens​ ​ocupi​ ​el​ ​100%​ ​de​ ​la​ ​pàgina,
    o​ ​de​ ​la​ ​caixa​ ​que​ ​el​ ​conté.​ ​Que​ ​aquesta​ ​ja​ ​té​ ​les​ ​mides​ ​d’amplada​ ​i​ ​alçada.
    background-repeat:​ ​no-repeat;
    width:​ ​80%;​ ​ ​ ​=>​ ​la​ ​propietat​ ​del​ ​valor​ ​és​ ​un​ ​percentatge​ ​per​ ​tal​ ​que​ ​m’agafi​ ​tot​ ​l’ample​ ​de​ ​la
    pàgina.
    height:​ ​250px;​ ​=>​ ​en​ ​canvi​ ​la​ ​propietat​ ​de​ ​l’alçada​ ​m’interesa​ ​més​ ​limitar-ho​ ​per​ ​tal​ ​que​ ​no
    sobre​ ​passi​ ​aquesta​ ​alçada,​ ​per​ ​tant​ ​d’amplada​ ​tindrem​ ​el​ ​100%​ ​de​ ​la​ ​caixa​ ​que​ ​la​ ​inclou,​ ​però
    l’alçada​ ​posa​ ​límit.
    margin:​ ​0​ ​auto;​ ​=>​ ​aquest​ ​tipus​ ​de​ ​marge​ ​s’utilitza​ ​per​ ​centrar​ ​un​ ​element.
    margin-top:​ ​70px;​ ​=>​ ​diem​ ​que​ ​el​ ​marge​ ​amb​ ​el​ ​superior​ ​será​ ​de​ ​70​ ​pixels​ ​sempre,​ ​tot​ ​i​ ​que
    molts​ ​cops​ ​prefereixo​ ​usar​ ​els​ ​percentatges,​ ​ja​ ​que​ ​a​ ​l’hora​ ​de​ ​crear​ ​un​ ​lloc​ ​web​ ​per​ ​a​ ​diferents
    plataformes​ ​crec​ ​que​ ​és​ ​millor,​ ​per​ ​les​ ​diferents​ ​mides,

    3.2​​ ​Cerca​ ​informació​ ​sobre​ ​la​ ​propietat​ ​de​ ​CSS3​ ​"box-sizing"​ ​i​ ​explica​ ​com​ ​modifica​ ​les​ ​propietats​ ​per
    defecte​ ​del​ ​model​ ​de​ ​caixa​ ​CSS;​ ​aporta​ ​algun​ ​exemple​ ​per​ ​recolzar​ ​la​ ​teva​ ​explicació.

    Quan​ ​ajustes​ ​un​ ​element​ ​amb​ ​“box-sizing”​ ​,​ ​el​ ​padding​ ​i​ ​el​ ​border​ ​de​ ​l’element​ ​no​ ​incrementen​ ​la
    seva​ ​amplada,
    .simple​ ​{
    ​ ​ ​width:​ ​500px;
    ​ ​ ​margin:​ ​20px​ ​auto;
    ​ ​ ​-webkit-box-sizing:​ ​border-box;
    ​ ​ ​ ​ ​ ​-moz-box-sizing:​ ​border-box;
    ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​box-sizing:​ ​border-box;
    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1

    .fancy​ ​{
    ​ ​ ​width:​ ​500px;
    ​ ​ ​margin:​ ​20px​ ​auto;
    ​ ​ ​padding:​ ​50px;
    ​ ​ ​border:​ ​solid​ ​blue​ ​10px;
    ​ ​ ​-webkit-box-sizing:​ ​border-box;
    ​ ​ ​ ​ ​ ​-moz-box-sizing:​ ​border-box;
    ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​box-sizing:​ ​border-box;
    }

    Ara​ ​l’exemple​ ​de​ ​la​ ​meva​ ​web.

    #nens,​ ​#phones{
    margin:auto;
    border:solid​ ​#CCCCCC​ ​10px;
    webkit-box-sizing:​ ​border-box;
    ​ ​ ​ ​ ​moz-box-sizing:​ ​border-box;
    ​ ​ ​ ​ ​box-sizing:​ ​border-box;
    ​ ​ ​ ​ ​border-radius:​ ​5px;

    #nens​ ​img{
    background-repeat:​ ​no-repeat;

    width:​ ​100%;
    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1

    #phones​ ​img{
    background-repeat:​ ​no-repeat;

    width:​ ​100%;

    El​ ​meu​ ​apartat

    CSS:

    body​ ​{
    margin:​ ​0;
    padding:​ ​0;
    font-family:​ ​sans-serif;
    }

    La​ ​etiqueta​ ​“body”​ ​fa​ ​referencia​ ​a​ ​tot​ ​el​ ​cos​ ​de​ ​la​ ​pàgina​ ​web,​ ​el​ ​que​ ​faig​ ​és​ ​enganxar​ ​els
    marges​ ​a​ ​0,​ ​a​ ​la​ ​web,​ ​i​ ​definir​ ​el​ ​tipus​ ​de​ ​font​ ​genèric.​ ​Aquesta​ ​font​ ​sans-serif​ ​afectará​ ​als
    títols.

    #main-header​ ​{
    background:​ ​#000000;
    color:​ ​white;
    height:​ ​80px;
    width:​ ​100%;
    margin:0​ ​auto;
    }
    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1
    El​ ​main​ ​header,​ ​és​ ​la​ ​barra​ ​del​ ​menú​ ​de​ ​navegació​ ​que​ ​es​ ​repeteix​ ​en​ ​totes​ ​les​ ​pàgines,​ ​li
    hem​ ​aplicat​ ​un​ ​color​ ​de​ ​fons​ ​negre,​ ​la​ ​lletra​ ​blanca,​ ​l’alçada​ ​d’un​ ​80px,​ ​i​ ​l’amplada​ ​del​ ​total
    de​ ​pàgina,​ ​per​ ​tal​ ​que​ ​no​ ​tingui​ ​marges​ ​blancs​ ​als​ ​costats​ ​i​ ​també​ ​que​ ​la​ ​pàgina​ ​s’adapti
    quan​ ​fem​ ​zoom.​ ​He​ ​utilitzat​ ​la​ ​el​ ​margin,​ ​per​ ​especificar​ ​que​ ​vui​ ​que​ ​estigui​ ​a​ ​0​ ​per​ ​dalt,​ ​i
    auto​ ​centrat​ ​al​ ​mig.(tot​ ​i​ ​que​ ​no​ ​calia​ ​perque​ ​teniem​ ​la​ ​identificació​ ​dels​ ​100%​ ​amplada)

    #menu​ ​ul{
    list-style-type:​ ​none;
    margin:​ ​0​ ​auto;
    width:​ ​750px;
    }

    #menu​ ​li​ ​a:hover{


    color:#661106;
    background-color:​ ​#CCCCCC;
    }

    #menu​ ​a{

    float:left;
    font-size:​ ​0.1em;
    text-align:​ ​center;
    padding:10px;
    margin:15px;
    background-color:​ ​#FFFFFF;
    color:#000000;
    }
    <div​ ​id="menu">
    <ul>
    <li><a​ ​href="tecnologia-i-desigualtat.html">​ ​TECNOLOGIA​ ​I​ ​DESIGUALTAT
    </a></li>

    <li><a​ ​href="ecosistema-internet.html">ECOSISTEMA​ ​D'INTERNET​ ​</a></li>

    <li><a​ ​href="organitzacions.html">ORGANITZACIONS​ ​D'INTERNET


    </a></li>
    </ul>
    </div>

    Etiqueta​ ​menu,​ ​és​ ​per​ ​el​ ​menú​ ​de​ ​les​ ​pàgines​ ​que​ ​va​ ​dins​ ​el​ ​main-header,​ ​llavors​ ​tenim​ ​que
    hem​ ​fet​ ​el​ ​menú​ ​de​ ​tipus​ ​llista,​ ​per​ ​tant​ ​menu​ ​ul,​ ​ens​ ​indica​ ​que​ ​no​ ​volem​ ​que​ ​tingui​ ​estil​ ​de
    llista,​ ​i​ ​volem​ ​que​ ​tingui​ ​una​ ​amplada​ ​de​ ​750px,​ ​cada​ ​botó​ ​de​ ​la​ ​llista,​ ​o​ ​cada​ ​element.​ ​Menu
    li​ ​a:hover,​ ​és​ ​per​ ​quan​ ​pasem​ ​el​ ​ratolí​ ​per​ ​damunt,​ ​canvia​ ​de​ ​color​ ​el​ ​fons,​ ​i​ ​també​ ​el​ ​color
    de​ ​lletra.​ ​I​ ​per​ ​els​ ​enllaços​ ​menu​ ​a,​ ​hem​ ​decidit​ ​que​ ​s’alini​ ​tot​ ​a​ ​l’esquerra,​ ​mentre​ ​capiga,​ ​el
    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1
    fons​ ​que​ ​té​ ​de​ ​color​ ​el​ ​botó​ ​com​ ​a​ ​link,​ ​i​ ​el​ ​color​ ​de​ ​lletra,​ ​i​ ​per​ ​centrar​ ​el​ ​text​ ​dins​ ​la​ ​llista,
    hem​ ​escollit​ ​padding,​ ​i​ ​text​ ​align.

    #maig{
    color:#CCCCCC;
    font-family:​ ​georgia;
    padding-left:​ ​30px;

    He​ ​tingut​ ​que​ ​fer​ ​span,​ ​en​ ​l’element​ ​de​ ​maig,​ ​de​ ​la​ ​pàgina​ ​de​ ​les​ ​tecnologies​ ​perquè​ ​,​ ​dins
    del​ ​parragraf,​ ​era​ ​l’únic​ ​element​ ​que​ ​variava,​ ​he​ ​pensar​ ​que​ ​la​ ​millor​ ​opció​ ​era​ ​fer​ ​span,​ ​i
    identificar-ho​ ​com​ ​element​ ​per​ ​separat,​ ​per​ ​donar​ ​un​ ​altre​ ​tó​ ​de​ ​color​ ​de​ ​lletra,​ ​i​ ​una​ ​altre
    font​ ​tipografica.

    h4{
    text-align:center;
    color:​ ​white;
    font-size:​ ​1.4em;
    }

    h2{
    text-align:​ ​center;

    h3{
    text-align:​ ​left;
    font-size:​ ​1.6em;
    }

    H,​ ​són​ ​els​ ​títols​ ​que​ ​tenim​ ​dins​ ​les​ ​diferents​ ​pàgines,​ ​diferenciant-los​ ​per​ ​mides,​ ​del​ ​títol
    principal,​ ​als​ ​secundaris,​ ​i​ ​cadascú​ ​tenint​ ​una​ ​aliniació​ ​diferent.

    #content{
    width:​ ​80%;
    margin:20px​ ​auto;
    }
    És​ ​el​ ​contenedor​ ​de​ ​la​ ​pàgina,​ ​m’agrada​ ​utilitzarlo​ ​per​ ​definir​ ​quin​ ​espai​ ​ocupará​ ​de​ ​tota​ ​la
    pàgina​ ​els​ ​elements,​ ​he​ ​posat​ ​el​ ​80%​ ​d’amplada,​ ​i​ ​aixó​ ​em​ ​serveix​ ​per​ ​centrar​ ​el​ ​contingut
    al​ ​mig​ ​de​ ​la​ ​página,​ ​i​ ​deixar​ ​sempre​ ​el​ ​mateix​ ​marge​ ​als​ ​costats.​ ​I​ ​margin​ ​20px​ ​auto,​ ​vol​ ​dir
    20​ ​d’alçada,​ ​i​ ​automatic​ ​al​ ​centre,​ ​per​ ​centrar​ ​els​ ​80%​ ​que​ ​ocuparem.

    p{
    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1
    font-size:​ ​1em;
    font-family:​ ​georgia;
    }

    Atribut​ ​per​ ​el​ ​text,​ ​que​ ​només​ ​he​ ​definit​ ​la​ ​font​ ​tipografica,​ ​i​ ​la​ ​mida​ ​de​ ​la​ ​font.

    p​ ​a{
    text-align:​ ​center;
    color:red;
    text-decoration:​ ​underline;

    Tots​ ​els​ ​textos​ ​que​ ​tinguin​ ​un​ ​enllaç,​ ​han​ ​de​ ​tenir​ ​aquestes​ ​caracteristiques,​ ​han​ ​de​ ​ser​ ​de
    color​ ​vermell,​ ​i​ ​tenir​ ​un​ ​subrallat​ ​inferior,​ ​i​ ​l’aliniació​ ​central.

    img{
    width:60%;
    margin:auto;
    display:block;
    }

    Totes​ ​les​ ​imatges​ ​han​ ​d’ocupar​ ​un​ ​60%​ ​del​ ​espai​ ​en​ ​el​ ​que​ ​estiguin,​ ​i​ ​estar​ ​centrades.

    a{
    text-decoration:​ ​none;
    }

    Els​ ​enllaços​ ​no​ ​tenen​ ​que​ ​tenir​ ​decoració,​ ​a​ ​més​ ​que​ ​ho​ ​específiquem​ ​com​ ​hem​ ​fet​ ​abans.

    p​ ​.titulo​ ​a{
    text-decoration:​ ​none;
    }

    He​ ​volgut​ ​remarcar​ ​aquest​ ​títol​ ​en​ ​concret,​ ​que​ ​com​ ​enllaç​ ​no​ ​tenía​ ​que​ ​tenir​ ​subrallat.

    .llista​ ​li{

    ​ ​ ​list-style-image:​ ​url("img/right.png")​ ​0​ ​3px​ ​no-repeat;


    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1
    }
    Aquest​ ​atribut​ ​no​ ​ha​ ​sortit​ ​com​ ​jo​ ​volia,​ ​he​ ​revisat​ ​diferents​ ​codis​ ​en​ ​el​ ​web,​ ​i​ ​no​ ​he​ ​trobat
    cap​ ​que​ ​funcionés​ ​per​ ​tal​ ​de​ ​que​ ​la​ ​llista​ ​tingués​ ​la​ ​imatge​ ​com​ ​a​ ​vinyeta…​ ​m’agradaria​ ​que
    m’ajudesis​ ​a​ ​saber​ ​perque​ ​no​ ​ha​ ​funcionat.

    .llista​ ​a{
    text-decoration:​ ​underline;
    text-align:​ ​left;
    color:red;
    ​ ​ ​ ​padding:​ ​0​ ​0​ ​5px​ ​15px;
    }

    #destacado{
    background-color:​ ​#FF3B21;
    padding:5px;

    Quan​ ​m’he​ ​trobat​ ​amb​ ​un​ ​bloc​ ​diferent,​ ​que​ ​tenia​ ​un​ ​color​ ​de​ ​fons,​ ​he​ ​fet​ ​una​ ​etiqueta,​ ​<div
    id="destacado">
    <h4>"The​ ​future​ ​is​ ​already​ ​here​ ​—​ ​it’s​ ​just​ ​not​ ​very​ ​evenly​ ​distributed."</h4>

    <p​ ​id="william"><i><a​ ​href="https://en.wikipedia.org/wiki/FabFi">William


    Gibson</a></i></p>
    </div>
    I​ ​aquí​ ​dins​ ​he​ ​colocat​ ​tot​ ​el​ ​text,​ ​que​ ​anava​ ​dins​ ​un​ ​mateix​ ​bloc,​ ​amb​ ​un​ ​color​ ​específic,​ ​i
    amb​ ​el​ ​padding​ ​he​ ​marcat​ ​els​ ​marges​ ​del​ ​text​ ​amb​ ​la​ ​vora.

    ul.punto​ ​li{
    list-style-type:​ ​square;
    }
    <ul​ ​class="punto">
    <li>més​ ​accés​ ​(especialment​ ​en​ ​els​ ​països​ ​en​ ​desenvolupament),</li>
    <li>formació​ ​en​ ​habilitats​ ​i​ ​flexibilitat​ ​durant​ ​tota​ ​la​ ​vida​ ​i</li>
    <li>garantir​ ​la​ ​competència​ ​mitjançant​ ​regulació​ ​i​ ​institucions​ ​responsables.</li>
    </ul>

    Aquesta​ ​etiqueta,​ ​ha​ ​estat​ ​utilitzada​ ​per​ ​marcar​ ​una​ ​llista​ ​en​ ​concret,​ ​que​ ​tenia​ ​que​ ​tenir​ ​en
    comptes​ ​de​ ​punts,​ ​quadrats​ ​com​ ​a​ ​forma​ ​de​ ​llista,​ ​per​ ​tant,​ ​els​ ​he​ ​fet​ ​per​ ​separat,​ ​per​ ​tal​ ​que
    no​ ​afecti​ ​a​ ​les​ ​altres​ ​llistes.

    #bloc1{
    background-color:​ ​#CCCCCC;
    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1
    width:​ ​100%;
    margin:0​ ​auto;
    padding:1px;
    list-style-type:​ ​none;

    #bloc​ ​{
    background-color:​ ​#CCCCCC;
    width:​ ​100%;
    margin:0​ ​auto;
    padding:1px;
    }

    <div​ ​id="bloc1">
    <ol>
    <li>La​ ​persistència​ ​de​ ​la​ ​bretxa​ ​digital.​ ​Un​ ​60%​ ​de​ ​la​ ​població​ ​mundial​ ​continua
    sense​ ​connexió​ ​a​ ​Internet,​ ​i​ ​per​ ​tant,​ ​exclosa​ ​de​ ​l’economia​ ​digital.</li>
    <li>La​ ​concentració​ ​del​ ​mercat​ ​a​ ​les​ ​empreses​ ​ja​ ​establertes,​ ​creant​ ​monopolis​ ​que
    sovint​ ​es​ ​reforcen​ ​amb​ ​ajudes​ ​públiques.</li>
    </ol>
    </div>

    <p>Per​ ​corregir​ ​aquesta​ ​situació,​ ​l’informe​ ​del​ ​Banc​ ​Mundial​ ​proposa​ ​estratègies​ ​àmplies
    que​ ​no​ ​només​ ​afecten​ ​el​ ​sector​ ​tecnològic,​ ​i​ ​que​ ​es​ ​podrien​ ​resumir​ ​en:</p>

    <div​ ​id="bloc">
    <ul​ ​class="punto">
    <li>més​ ​accés​ ​(especialment​ ​en​ ​els​ ​països​ ​en​ ​desenvolupament),</li>
    <li>formació​ ​en​ ​habilitats​ ​i​ ​flexibilitat​ ​durant​ ​tota​ ​la​ ​vida​ ​i</li>
    <li>garantir​ ​la​ ​competència​ ​mitjançant​ ​regulació​ ​i​ ​institucions​ ​responsables.</li>
    </ul>
    </div>

    Els​ ​blocs​ ​els​ ​he​ ​utilitzat,​ ​quan​ ​la​ ​llista​ ​anava​ ​dins​ ​una​ ​caixa​ ​de​ ​color.

    #william{
    text-align:​ ​center;

    }
    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1
    #william​ ​a:link{
    text-decoration:​ ​none;
    color:#000000;
    }
    <p​ ​id="william"><i><a​ ​href="https://en.wikipedia.org/wiki/FabFi">William​ ​Gibson</a></i></p>
    Dins​ ​el​ ​bloc​ ​de​ ​color​ ​taronja​ ​de​ ​la​ ​página​ ​de​ ​tecnologies,​ ​hi​ ​ha​ ​un​ ​text​ ​diferenciat​ ​dels​ ​altres,
    que​ ​els​ ​he​ ​volgut​ ​resaltar,​ ​pero​ ​a​ ​la​ ​vegada​ ​són​ ​textos​ ​que​ ​tenen​ ​un​ ​enllaç,​ ​i​ ​en​ ​canvi​ ​han
    de​ ​ser​ ​de​ ​color​ ​negre,​ ​i​ ​no​ ​han​ ​de​ ​tenir​ ​cap​ ​resaltat.

    span{
    color:red;
    font-family:​ ​Helvetica;
    font-size:​ ​0.1em;
    }

    span​ ​a{
    text-decoration:​ ​none;
    color:red;

    span:link{
    text-decoration:​ ​none;
    }

    span:hover{
    text-decoration:​ ​none;

    Els​ ​span,​ ​ens​ ​indiquen​ ​aquells​ ​textos​ ​que​ ​es​ ​resalten​ ​perquè​ ​són​ ​links,​ ​per​ ​tant,​ ​he​ ​creat
    una​ ​serie​ ​de​ ​codis,​ ​per​ ​tractarlos​ ​quan​ ​pases​ ​el​ ​ratolí​ ​per​ ​sobre,​ ​quan​ ​estan​ ​marcats​ ​sense
    actuar...

    #nens,​ ​#phones{
    margin:auto;
    border:solid​ ​#CCCCCC​ ​10px;
    webkit-box-sizing:​ ​border-box;
    ​ ​ ​ ​ ​moz-box-sizing:​ ​border-box;
    ​ ​ ​ ​ ​box-sizing:​ ​border-box;
    ​ ​ ​ ​ ​border-radius:​ ​5px;

    }
    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1
    Aquestes​ ​caixes,​ ​contenen​ ​imatges​ ​dins,​ ​i​ ​per​ ​tant​ ​les​ ​he​ ​tractat​ ​per​ ​igual,​ ​ja​ ​que​ ​són​ ​iguals
    de​ ​mides,​ ​i​ ​he​ ​provat​ ​el​ ​box-sizing,​ ​per​ ​centrar​ ​la​ ​imatge​ ​dins,​ ​i​ ​donar​ ​un​ ​“border”​ ​,​ ​a​ ​la
    vegada​ ​he​ ​usat​ ​un​ ​border​ ​radius​ ​perqué​ ​les​ ​voreres​ ​no​ ​siguin​ ​quadrades.

    #nens​ ​img{
    background-repeat:​ ​no-repeat;

    width:​ ​100%;

    <div​ ​id="nens"><img​ ​src="img/onelaptop.jpg"​ ​alt="onelapton"></div>


    <p​ ​class="peu"><a​ ​href="https://www.flickr.com/photos/olpc/3079783249/">One​ ​Laptop​ ​per
    Child</a>,​ ​Nigèria.​ ​CC-BY</p>

    #phones​ ​img{
    background-repeat:​ ​no-repeat;

    width:​ ​100%;
    }

    <div​ ​id="phones"><img​ ​src="img/phones.jpg"​ ​alt="phones"></div>


    <p​ ​class="peu"><a​ ​href="https://www.flickr.com/photos/imtfi/5475526235/">Institute​ ​for
    Money,​ ​Technology​ ​and​ ​Financial​ ​Inclusion.</a>​ ​CC-BY-SA.</p>

    #buttons​ ​img{
    width:​ ​10%;
    margin-top:​ ​30px;
    }

    #ferran​ ​img{
    width:120px;
    border-radius:​ ​100px;
    float:left;
    padding:10px;
    margin-top:​ ​20px;

    #periodista{

    margin-top:​ ​-20px;
    font-size:​ ​0.1em;
    }
    Neus​ ​Barbanoj​ ​Fernández
    Estudiant​ ​de​ ​Multimèdia
    Llenguatges​ ​i​ ​estàndards​ ​web
    Aula​ ​1

    .peu{
    text-align:​ ​center;
    font-size:​ ​1px;
    }

    .peu​ ​a{
    color:red;
    text-decoration:​ ​underline;
    }

    El​ ​peu,​ ​és​ ​el​ ​peu​ ​del​ ​document,​ ​que​ ​era​ ​diferent,​ ​i​ ​per​ ​tant​ ​l’he​ ​tractat​ ​com​ ​a​ ​diferent.

    <p​ ​class="peu">Elaborat​ ​a​ ​partir​ ​d'<i><a​ ​href="https://www.internetsociety.org/">Internet


    Society</a>(febrer​ ​de​ ​2014).​ ​Internet​ ​Ecosystem.​ ​Consultat​ ​des​ ​de​ ​<a
    href="https://www.internetsociety.org/internet/who-makes-it-work">https://www.internetsociet
    y.org/internet/who-makes-it-work</i></a></p>

    You might also like