{"id":2628,"date":"2024-06-03T12:04:19","date_gmt":"2024-06-03T10:04:19","guid":{"rendered":"https:\/\/www.robertomaiolino.it\/blografik\/?p=2628"},"modified":"2026-06-04T11:58:35","modified_gmt":"2026-06-04T09:58:35","slug":"web-design-nozioni-base-internet-vs-web","status":"publish","type":"post","link":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/","title":{"rendered":"Web design &#8211; Nozioni base: Internet vs Web"},"content":{"rendered":"\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b892d4b1&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b892d4b1\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"585\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web-1024x585.jpg\" alt=\"\" class=\"wp-image-2644\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web-1024x585.jpg 1024w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web-300x171.jpg 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web-768x439.jpg 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web-110x63.jpg 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web-420x240.jpg 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web-753x430.jpg 753w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web.jpg 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Benvenuti in questa nuova rubrica dedicata al Web Design.<br>Questa serie di articoli sar\u00e0 divisa in tre fasi: Nozioni base, Dentro il codice, Progettazione.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In questo articolo, cercheremo di capire cos&#8217;\u00e8 internet, cos&#8217;\u00e8 il web e come funzionano. Informazioni che, vi assicuro, faranno la differenza quando progetterete un sito.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><label class=\"ez-toc-title\" style=\"cursor:inherit\">In questo articolo<\/label>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#Limportanza_dellinformatica\" >L&#8217;importanza dell&#8217;informatica<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#Differenza_tra_Internet_e_Web\" >Differenza tra Internet e Web<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#Come_funziona_Internet\" >Come funziona Internet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#Come_funziona_il_Web\" >Come funziona il Web<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#Cosa_sapere_per_progettare_un_sito\" >Cosa sapere per progettare un sito<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#1_Un_Sito_non_e_un_programma\" >1. Un Sito non \u00e8 un programma<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#2_I_file_del_sito_sono_indipendenti\" >2. I file del sito sono indipendenti<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#3_Il_file_pesano\" >3. Il file pesano<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#4_Ogni_dispositivo_ha_le_sue_caratteristiche\" >4. Ogni dispositivo ha le sue caratteristiche<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#Conclusione\" >Conclusione<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Limportanza_dellinformatica\"><\/span>L&#8217;importanza dell&#8217;informatica<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vi starete chiedendo: <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><em>Perch\u00e9 un designer dovrebbe dovrebbe sapere come funziona un sito?<\/em><\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">La risposta \u00e8 semplice, ogni progettista deve conoscere il contesto, l&#8217;ambiente e la tecnologia con i quali si dovr\u00e0 confrontare. Per questo, un web designer deve conoscere l&#8217;ambiente in cui andr\u00e0 a operare: il web, gli strumenti utilizzati e soprattutto i limiti e le opportunit\u00e0 delle tecnologie con il quale ha a che fare.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b892df28&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b892df28\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"512\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2017\/11\/layout_scene-1024x512.jpg\" alt=\"\" class=\"wp-image-952\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2017\/11\/layout_scene-1024x512.jpg 1024w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2017\/11\/layout_scene-300x150.jpg 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2017\/11\/layout_scene-768x384.jpg 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2017\/11\/layout_scene-110x55.jpg 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2017\/11\/layout_scene-420x210.jpg 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2017\/11\/layout_scene-770x385.jpg 770w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2017\/11\/layout_scene.jpg 1500w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Oggi si vedono troppi creativi che fanno siti &#8220;<em>fighi<\/em>&#8221; che per\u00f2 una volta sviluppati creano pi\u00f9 problemi che soluzioni: Siti che non si adattano ai dispositivi, che funzionano su alcuni browser e non su altri, confusionari, pesanti o difficili da navigare. Questo accade quando chi li progetta non ha le opportune conoscenze tecnico-teoriche. Ecco perch\u00e9, per questa rubrica voglio partire proprio dalle <strong>nozioni tecniche di base<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Differenza_tra_Internet_e_Web\"><\/span>Differenza tra Internet e Web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La prima cosa da capire quando ci si approccia alla <strong>progettazione di siti<\/strong> \u00e8 l&#8217;enorme <strong>differenza tra Internet e Web<\/strong>. Nel linguaggio comune siamo abituati ad utilizzare i due temini come sinonimi ma in realt\u00e0 sono due cose ben diverse:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Internet <\/strong>\u00e8 <strong>un\u2019infrastruttura <\/strong>fisica e virtuale che collega diverse reti tra loro, che a loro volta collegano diversi dispositivi per trasferire informazioni.<\/li>\n\n\n\n<li>Il <strong>Web<\/strong>, invece, \u00e8 <strong>un servizio<\/strong> che sfrutta Internet per la condivisione di risorse mediante <strong>documenti ipertestuali<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Fatte queste premesse, approfondiamo meglio questa differenza \u00e8 cerchiamo di capire come funzionano internet e web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Come_funziona_Internet\"><\/span>Come funziona Internet<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cominciamo col dire che <strong>Internet <\/strong>\u00e8 prima di tutto <strong>una rete<\/strong>. Una rete genericamente \u00e8 la connessione di due o pi\u00f9 dispositivi. Ogni rete ha una specifica <strong>architettura<\/strong> che ne definisce il funzionamento. Nello specifico l&#8217;<strong>architettura di rete<\/strong> di <strong>internet <\/strong>\u00e8 di tipo <strong><em>client-server<\/em><\/strong>. Il suo funzionamento \u00e8 basato sul quello di <strong>ARPANET<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Facciamo un passo indietro. Nel 1969, la <strong>DARPA <\/strong>(<em>Defense Advanced Research Projects Agency<\/em>) del &#8220;<em>Dipartimento della Difesa degli Stati Uniti<\/em>&#8221; avvi\u00f2 un progetto rivoluzionario che avrebbe cambiato per sempre il mondo della comunicazione: <strong>ARPANET<\/strong>. Questa <strong>rete di computer<\/strong> \u00e8 stata progettata e realizzata con l&#8217;obiettivo di sviluppare nuove tecnologie a uso militare, ma la sua influenza si \u00e8 estesa ben oltre gli ambiti militari.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b892e501&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b892e501\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"645\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Arpanet_1974.svg-1024x645.png\" alt=\"\" class=\"wp-image-2647\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Arpanet_1974.svg-1024x645.png 1024w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Arpanet_1974.svg-300x189.png 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Arpanet_1974.svg-768x484.png 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Arpanet_1974.svg-110x69.png 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Arpanet_1974.svg-420x264.png 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Arpanet_1974.svg-683x430.png 683w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Arpanet_1974.svg.png 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Schema delle rete ARPANET tra il 1974 e il 1974.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ARPANET<\/strong> rappresentava, infatti, anche un ponte tra il mondo accademico e quello militare. Gli universitari potevano accedere e utilizzare questa rete, promuovendo cos\u00ec un ambiente di collaborazione e scambio di conoscenze senza precedenti.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tuttavia, per espandere ulteriormente la rete anche ad altri soggetti, serviva un protocollo di trasmissione dati sicuro ed efficiente. La svolta avvenne quando nel 1970 <em>l&#8217;universit\u00e0 di Stanford<\/em> mise a punto il modello <strong>TCP\/IP<\/strong>, ovvero dei protocolli che si occupano del trasferimento e indirizzamento delle informazioni in una rete con architettura <em><strong>client-server<\/strong><\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sull&#8217;esempio di ARPANET, nei due decenni successivi vennero create altre reti, accademiche, amatoriali e nazionali, soprattutto in Europa. Come ad esempio le Reti Accademiche e di Ricerca (<strong>EARN, EUNet, RARE<\/strong>): Istituita nel 1984, la rete <strong>EARN <\/strong>(European Academic and Research Network) che collegava i mainframe IBM delle universit\u00e0 europee. Contestualmente l&#8217;Europa partecip\u00f2 allo sviluppo di nodi sperimentali connessi ad ARPANET e successivamente si un\u00ec al progetto per lo sviluppo del protocollo TCP\/IP. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Infine, il <strong>30 Aprile 1986<\/strong> la rete americana ARPANET fu collegata quelle italiana, Inglese e Norvegese. La connessione di tutte queste reti tra di loro diede vita alla prima <strong>rete globale<\/strong>, nasce ufficialmente <strong>Internet<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">L&#8217;architettura Client-server<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Nelle reti a condivisione diretta tutti i dispositivi sono connessi e condividono risorse e documenti, un esempio sono le reti <em><strong>peer-to-peer<\/strong><\/em> <em>(P2P)<\/em>. In queste reti tutti i dispositivi possono richiedere o inviare dati allo stesso modo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In un architettura <strong><em>client-server<\/em><\/strong>, invece, i dispositivi connessi, chiamati <em>host<\/em>, possono assumere 2 ruoli diversi all&#8217;interno della rete:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Il <em><strong>client <\/strong><\/em>\u00e8 il dispositivo che effettua una richiesta. <\/li>\n\n\n\n<li>il <strong><em>server <\/em><\/strong>\u00e8 il dispositivo che risponde al <em>client<\/em> e fornisce servizi, inviando le informazioni richieste.<\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b892eab8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b892eab8\" class=\"wp-block-image aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"813\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-1024x813.png\" alt=\"\" class=\"wp-image-2646\" style=\"width:511px;height:auto\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-1024x813.png 1024w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-300x238.png 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-768x609.png 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-110x87.png 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-420x333.png 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-542x430.png 542w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM.png 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">La differenza rispetto alle reti dirette \u00e8 la presenza di un <strong><em>server <\/em><\/strong>che gestisce gli accessi alle risorse ad un certo numero di &#8220;<em>Terminali<\/em>&#8221; o <em><strong>client<\/strong><\/em>, cos\u00ec da evitare conflitti di utilizzazione e migliorare la sicurezza.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Il protocollo TCP\/IP<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Il sistema TCP\/IP \u00e8 composto da due protocolli  che servono a migliorare la sicurezza, l&#8217;affidabilit\u00e0 e l&#8217;efficienza del trasferimento di dati all&#8217;interno di una rete <strong><em>client-server<\/em><\/strong>. Questi due protocolli sono:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>TCP <\/strong>(<em>Transmission Control Protocol<\/em>) &#8211; Un protocollo di trasmissione che serve a rendere affidabile la comunicazione tra il <em><strong>client<\/strong> <\/em>e il <strong>s<em>erver<\/em><\/strong>, grazie ad una tecnica di trasferimento che suddivide i dati in piccoli pacchetti, indipendenti l&#8217;uno dall&#8217;altro.<\/li>\n\n\n\n<li><strong>IP <\/strong>(<em>Internet Protocol<\/em>) &#8211; Il protocollo che si occupa dell&#8217;indirizzamento dei pacchetti di dati all&#8217;indirizzo di consegna corretto.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Un <strong>indirizzo IP<\/strong> \u00e8 quindi un codice numerico che individua in maniera univoca la posizione fisica di un dispositivo nel mondo. Possiamo paragonarlo all&#8217;indirizzo di casa nostra (Via + numero civico + comune + provincia + Paese).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Come_funziona_il_Web\"><\/span>Come funziona il Web<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Il <strong>World Wild Web<\/strong>, \u00e8 un servizio che sfrutta la rete internet per condividere informazioni attraverso l&#8217;utilizzo di <strong>documenti ipertestuali<\/strong>. Ideato al CERN di Ginevra nel 1989, viene ufficializzato il <strong>6 agosto 1991<\/strong>, quando un informatico inglese,<em> Tim Berners-Lee<\/em>, pubblic\u00f2 il <strong>primo sito web<\/strong> che sfruttava il protocollo <strong>HTTP<\/strong>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b892f01e&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b892f01e\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"585\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-Finestra-di-un-browser-nella-URL-ce-scritto-http-www-in-nero-background-bianco.-Puntat-1-1024x585.jpg\" alt=\"\" class=\"wp-image-2645\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-Finestra-di-un-browser-nella-URL-ce-scritto-http-www-in-nero-background-bianco.-Puntat-1-1024x585.jpg 1024w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-Finestra-di-un-browser-nella-URL-ce-scritto-http-www-in-nero-background-bianco.-Puntat-1-300x171.jpg 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-Finestra-di-un-browser-nella-URL-ce-scritto-http-www-in-nero-background-bianco.-Puntat-1-768x439.jpg 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-Finestra-di-un-browser-nella-URL-ce-scritto-http-www-in-nero-background-bianco.-Puntat-1-110x63.jpg 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-Finestra-di-un-browser-nella-URL-ce-scritto-http-www-in-nero-background-bianco.-Puntat-1-420x240.jpg 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-Finestra-di-un-browser-nella-URL-ce-scritto-http-www-in-nero-background-bianco.-Puntat-1-753x430.jpg 753w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-Finestra-di-un-browser-nella-URL-ce-scritto-http-www-in-nero-background-bianco.-Puntat-1.jpg 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Prima del servizio web, infatti, si sfruttava la connessione alla rete utilizzando altri protocolli come l&#8217;<strong>FTP<\/strong>, che viene utilizzato ancora oggi per scambiare file con un server. L&#8217;FTP, ad esempio, viene utilizzato per salvare o copiare file all&#8217;interno di un <strong><em>server <\/em><\/strong>utilizzandolo come un <strong><em>hard disk<\/em> remoto<\/strong> oppure per caricare sul <strong><em>server <\/em><\/strong>i documenti di un <strong>sito web<\/strong>. Con l<strong>&#8216;HTTP<\/strong>, invece,<strong> <\/strong>si ha la possibilit\u00e0 di sfruttare <strong>documenti ad ipertesto<\/strong>, visualizzarne il contenuto e &#8220;navigare&#8221; tra un documento e l&#8217;altro grazie ai collegamenti ipertestuali al loro interno.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Il protocollo HTTP<\/h4>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b892f404&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b892f404\" class=\"wp-block-image aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"548\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/HTTP_logo.svg-1024x548.png\" alt=\"\" class=\"wp-image-2649\" style=\"width:340px;height:auto\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/HTTP_logo.svg-1024x548.png 1024w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/HTTP_logo.svg-300x161.png 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/HTTP_logo.svg-768x411.png 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/HTTP_logo.svg-110x59.png 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/HTTP_logo.svg-420x225.png 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/HTTP_logo.svg-770x412.png 770w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/HTTP_logo.svg.png 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">L&#8217;<strong>HTTP <\/strong><em>(HyperTex transfer protocol<\/em>)<strong>, <\/strong>\u00e8 il protocollo che regola il trasferimento di documenti ad ipertesto tra il <strong><em>server <\/em><\/strong>e il <strong><em>client<\/em><\/strong>. Differisce da altri protocolli (come <strong>FTP<\/strong>) per il fatto che le connessioni vengono generalmente chiuse una volta che una determinata richiesta \u00e8 stata soddisfatta, con un conseguente minor carico sia per il <strong>client<\/strong> che per il <strong>server<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Questo protocollo permette di visualizzare istantaneamente i documenti come pagine, grazie all&#8217;utilizzo di uno specifico software chiamato <em>browser<\/em>. I <strong>documenti ad ipertesto<\/strong>, come esempio i documenti<strong> HTML<\/strong>, contengono <strong>collegamenti ipertestuali<\/strong> ad altre pagine, creando una consultazione dei dati fluida come se ci si trovasse all&#8217;interno di un enorme enciclopedia sfogliabile. L&#8217;insieme dei documenti ipertestuali collegati tra di loro e salvati in uno stesso server costituiscono un <strong>sito web<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Il browser <\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Come detto, quindi, per poter leggere un documento ipertestuale, visualizzarlo come una pagina web e interpretando il\u00a0<strong>linguaggio HTML<\/strong>, \u00e8 necessario un particolare software chiamato\u00a0<strong>browser<\/strong>. Fu lo stesso team di\u00a0<em>Berners-Lee<\/em><strong>\u00a0<\/strong>ha sviluppare, nel 1990, il primo\u00a0<strong>browser\u00a0<\/strong>proprio per consentire una corretta navigazione all&#8217;interno di <strong>un sito web<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Abbiamo visto e approfondito il funzionamento di <strong>internet <\/strong>e del <strong>web ,<\/strong> questo \u00e8 sufficiente per fare le prime considerazione sulla <strong>progettazione <\/strong>di un <strong>sito web<\/strong>. Approfondiremo il funzionamento dei documenti <strong>HTML<\/strong> e del <strong>Browser<\/strong> nel <a href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/\" type=\"post\" id=\"3137\">prossimo articolo<\/a> di questa rubrica.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cosa_sapere_per_progettare_un_sito\"><\/span>Cosa sapere per progettare un sito<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Questa analisi sul funzionamento di <strong>internet <\/strong>e del <strong>web<\/strong> ci porta a delle importanti conclusioni che influiscono sul modo in cui dobbiamo progettare un sito.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Un_Sito_non_e_un_programma\"><\/span>1. Un Sito non \u00e8 un programma<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Un <strong>sito web<\/strong> non \u00e8 un applicazione che viene avviata dal computer ma \u00e8 un insieme di documenti e file multimediali collegati tra loro. Ogni pagina del sito \u00e8 un file che &#8220;richiama&#8221; o si collega ad altri file. In parole povere, il sito non esiste finche non lo vediamo, i documenti sono conservati sul <em>server <\/em>ma il sito viene &#8220;assemblato&#8221; dal <strong>browser<\/strong> nel momento in cui noi lo visualizziamo.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b892fa7a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b892fa7a\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"426\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-2-1024x426.png\" alt=\"\" class=\"wp-image-2652\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-2-1024x426.png 1024w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-2-300x125.png 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-2-768x319.png 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-2-110x46.png 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-2-420x175.png 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-2-770x320.png 770w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-2.png 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Questo ci dice che:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">il modo in cui la pagina viene visualizzata dipende dal <strong>browser<\/strong> utilizzato dall&#8217;utente. <\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Quindi, quando progettiamo un sito dobbiamo prevedere come esso sar\u00e0 visto nei vari browser disponibili e assicurarci che quello che progettiamo sar\u00e0 <strong>universalmente compatibile<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_I_file_del_sito_sono_indipendenti\"><\/span>2. I file del sito sono indipendenti<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La prima cosa che abbiamo capito, dunque, \u00e8 che un sito web non \u00e8 un applicazione ma un insieme di file collegati tra loro. Tuttavia, anche se collegati i vari file rimangono indipendenti. Le stesse pagine HTML di un sito sono autonome e potrebbero, quindi, essere completamente diverse le une dalle altre, sia nella forma che nel contenuto. \u00c8 il <strong>design grafico<\/strong> delle pagine del sito a dare l&#8217;impressione all&#8217;utente che si tratti di un unica entit\u00e0, per questo \u00e8 importante progettare siti che garantiscano uniformit\u00e0 visiva tra le varie pagine. <\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b892ffbf&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b892ffbf\" class=\"wp-block-image aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"797\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-1024x797.png\" alt=\"\" class=\"wp-image-2656\" style=\"width:460px;height:auto\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-1024x797.png 1024w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-300x233.png 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-768x598.png 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-1536x1195.png 1536w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-110x86.png 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-420x327.png 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3-553x430.png 553w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Archimede-CRM-3.png 1664w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Per rendere questa operazione pi\u00f9 agevole e migliorare la gestione degli stili di un sito, \u00e8 stato introdotto un nuovo tipo di file detto <strong><a href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/23\/web-design-nozioni-base-css\/\" type=\"post\" id=\"3194\">CSS<\/a><\/strong>, acronimo di <strong><em>cascading style sheets<\/em><\/strong>. In questo modo tutti gli elementi delle pagine HTML che sono collegate al medesimo CSS potranno apparire con lo stesso stile.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Affinch\u00e9 il CSS sia ben strutturato, per\u00f2, il designer deve progettare in maniera coerente e fornire allo sviluppatore delle opportune tavole di stile e <strong>design<\/strong> <strong>kit<\/strong> dal quale ricavare gli stili di tutti gli elementi grafici del sito. Su questo argomento <a href=\"https:\/\/www.robertomaiolino.it\/blografik\/2025\/11\/05\/design-atomico-una-approccio-modulare-per-la-progettazione-delle-interfacce\/\" type=\"post\" id=\"3832\">ho scritto un articolo<\/a> che spiega l&#8217;approccio progettuale utilizzato oggi nei <strong>siti web<\/strong>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b8930380&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b8930380\" class=\"wp-block-image aligncenter size-full is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"864\" height=\"717\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/esempio-designkit.png\" alt=\"\" class=\"wp-image-2658\" style=\"width:675px;height:auto\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/esempio-designkit.png 864w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/esempio-designkit-300x250.png 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/esempio-designkit-768x637.png 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/esempio-designkit-110x91.png 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/esempio-designkit-420x349.png 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/esempio-designkit-518x430.png 518w\" sizes=\"(max-width: 864px) 100vw, 864px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Estratto di un design kit<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Il_file_pesano\"><\/span>3. Il file pesano<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Abbiamo detto anche che il protocollo <strong>TCP<\/strong> prevede che le informazioni siano: <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Richieste dal <em>client<\/em>;<\/li>\n\n\n\n<li>divise in pacchetti dati; <\/li>\n\n\n\n<li>inviate dal <em>server<\/em>;<\/li>\n\n\n\n<li>trasmesse attraverso la rete;<\/li>\n\n\n\n<li>Elaborate del <em>browser<\/em> che poi le mostra sul terminale dell&#8217;utente<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Questo vuol dire che la <strong>velocit\u00e0 di connessione<\/strong> dell&#8217;utente e la velocit\u00e0 del <em>server <\/em>sono due variabili fondamentali da tenere in considerazione. Se il <em>server <\/em>possiamo gestirlo perch\u00e9 scegliamo noi <em><strong>l&#8217;hosting <\/strong><\/em>che ospiter\u00e0 il nostro sito (per questo \u00e8 importante scegliere con accuratezza l&#8217;hosting), la connessione dell&#8217;utente \u00e8, invece, una variabile fuori dal nostro controllo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Per questo motivo, \u00e8 importante progettare siti che oltre ad essere accattivanti e <em>user friendly<\/em> siano anche sufficientemente leggeri in modo da essere visti da utenti che si appoggiano a connessioni meno veloci. Questo risultato si ottiene nei seguenti modi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Scrivendo o generando un <strong>codice &#8220;pulito&#8221;<\/strong>. Perch\u00e9 ogni stringa di codice aumenta il peso della pagina;<\/li>\n\n\n\n<li>Utilizzando <strong>immagini <\/strong>non troppo pesanti e <strong>ottimizzate per il web<\/strong>;<\/li>\n\n\n\n<li>Ottimizzando l&#8217;utilizzo di <strong>web font<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Quando questo non avviene, vediamo il tipico caricamento della pagina con gli elementi che si materializzano sotto i nostri occhi&#8230;non \u00e8 bello!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Ogni_dispositivo_ha_le_sue_caratteristiche\"><\/span>4. Ogni dispositivo ha le sue caratteristiche<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b89309fa&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b89309fa\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"585\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-PC-notebook-tablet-smartphone-36769-1024x585.jpg\" alt=\"\" class=\"wp-image-2659\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-PC-notebook-tablet-smartphone-36769-1024x585.jpg 1024w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-PC-notebook-tablet-smartphone-36769-300x171.jpg 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-PC-notebook-tablet-smartphone-36769-768x439.jpg 768w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-PC-notebook-tablet-smartphone-36769-110x63.jpg 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-PC-notebook-tablet-smartphone-36769-420x240.jpg 420w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-PC-notebook-tablet-smartphone-36769-753x430.jpg 753w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Firefly-PC-notebook-tablet-smartphone-36769.jpg 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ogni utente oggi pu\u00f2 utilizzare, non solo browser ma anche dispositivi differenti per visitare il nostro sito.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ogni computer \u00e8 diverso dall&#8217;altro ed \u00e8 collegato a display pi\u00f9 o meno grandi. Inoltre, al giorno d&#8217;oggi, esistono tanti tipi di dispositivi: computer desktop, notebook, smartphone, televisori smart e addirittura assistenti vocali con display. Appare quindi evidente un <strong>problema di accessibilit\u00e0.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Anche in questo caso non abbiamo il controllo di questa variabile, l&#8217;unica cosa che possiamo fare \u00e8 adottare un <strong>design flessibile e\/o adattabile<\/strong> prevedendo tutte le eventualit\u00e0 possibili.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il <strong>responsive<\/strong> \u00e8 <strong>l&#8217;adaptive<\/strong> web design sono oggi due tecniche di progettazione e di sviluppo di siti indispensabili. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>L&#8217;<strong>approccio adaptive<\/strong> prevede un sito con diversi <strong>layout fissi<\/strong> ma predeterminati per ogni dispositivo. <\/li>\n\n\n\n<li>L&#8217;<strong>approccio responsive<\/strong> prevede un singolo <strong>layout fluido<\/strong> che, grazie ad una serie di regole da noi progettate, risponde alle dimensioni dello schermo adattandosi continuamente in maniera fluida.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Con l&#8217;adaptive abbiamo il controllo del risultato finale ma non del comportamento della pagina. Con il responsive, invece, abbiamo il controllo del comportamento ma non del risultato.<\/p>\n<\/blockquote>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6adb7b8930f67&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6adb7b8930f67\" class=\"wp-block-image size-full is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"710\" height=\"267\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/progettazione-reattiva-vs-adattiva.jpg\" alt=\"\" class=\"wp-image-2660\" style=\"width:980px;height:auto\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/progettazione-reattiva-vs-adattiva.jpg 710w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/progettazione-reattiva-vs-adattiva-300x113.jpg 300w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/progettazione-reattiva-vs-adattiva-110x41.jpg 110w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/progettazione-reattiva-vs-adattiva-420x158.jpg 420w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Le due tecniche possono essere anche utilizzate insieme per garantire un design fluido e perfettamente adattabile ad ogni dispositivo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusione\"><\/span>Conclusione<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In questo articolo abbiamo cominciato ad esplorare l&#8217;ambiente in cui un progettista web deve lavorare. Abbiamo visto l&#8217;architettura che rende possibile internet e la tecnologia che rende possibile trasformare gruppi di file in un sito web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nel <a href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/09\/21\/web-design-nozioni-base-html\/\">prossimo articolo<\/a> approfondiremo l&#8217;HTML, il linguaggio utilizzato per costruire le pagine web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Benvenuti in questa nuova rubrica dedicata al Web Design.Questa serie di articoli sar\u00e0 divisa in tre fasi: Nozioni base, Dentro il codice, Progettazione. In questo articolo, cercheremo di capire cos&#8217;\u00e8 internet, cos&#8217;\u00e8 il web e come funzionano. Informazioni che, vi assicuro, faranno la differenza quando progetterete un sito. L&#8217;importanza dell&#8217;informatica Vi starete chiedendo: Perch\u00e9 un [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2644,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,226,12,2],"tags":[538,193,536,157,156,232,540,537,535,534,539,164],"class_list":["post-2628","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html_css","category-tecnologia","category-user_experience","category-webdesign","tag-arpanet","tag-client","tag-client-server","tag-css","tag-html","tag-internet","tag-ip","tag-server","tag-siti-internet","tag-siti-web","tag-tcp-ip","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Web design - Nozioni base: Internet vs Web - BloGrafik<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web design - Nozioni base: Internet vs Web - BloGrafik\" \/>\n<meta property=\"og:description\" content=\"Benvenuti in questa nuova rubrica dedicata al Web Design.Questa serie di articoli sar\u00e0 divisa in tre fasi: Nozioni base, Dentro il codice, Progettazione. In questo articolo, cercheremo di capire cos&#8217;\u00e8 internet, cos&#8217;\u00e8 il web e come funzionano. Informazioni che, vi assicuro, faranno la differenza quando progetterete un sito. L&#8217;importanza dell&#8217;informatica Vi starete chiedendo: Perch\u00e9 un [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/\" \/>\n<meta property=\"og:site_name\" content=\"BloGrafik\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/robertomaiolinodesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-03T10:04:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-04T09:58:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"617\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Roberto Maiolino\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Roberto_RMD\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roberto Maiolino\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/06\\\/03\\\/web-design-nozioni-base-internet-vs-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/06\\\/03\\\/web-design-nozioni-base-internet-vs-web\\\/\"},\"author\":{\"name\":\"Roberto Maiolino\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#\\\/schema\\\/person\\\/c71e1a677856d2fe685162286d1d3719\"},\"headline\":\"Web design &#8211; Nozioni base: Internet vs Web\",\"datePublished\":\"2024-06-03T10:04:19+00:00\",\"dateModified\":\"2026-06-04T09:58:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/06\\\/03\\\/web-design-nozioni-base-internet-vs-web\\\/\"},\"wordCount\":2012,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/06\\\/03\\\/web-design-nozioni-base-internet-vs-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/Internet-e-web.jpg\",\"keywords\":[\"arpanet\",\"client\",\"client-server\",\"css\",\"html\",\"internet\",\"IP\",\"server\",\"siti internet\",\"siti web\",\"tcp\\\/ip\",\"web\"],\"articleSection\":[\"HTML &amp; CSS\",\"Tecnologia e strumenti\",\"User Experience\",\"Web Design\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/06\\\/03\\\/web-design-nozioni-base-internet-vs-web\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/06\\\/03\\\/web-design-nozioni-base-internet-vs-web\\\/\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/06\\\/03\\\/web-design-nozioni-base-internet-vs-web\\\/\",\"name\":\"Web design - Nozioni base: Internet vs Web - BloGrafik\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/06\\\/03\\\/web-design-nozioni-base-internet-vs-web\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/06\\\/03\\\/web-design-nozioni-base-internet-vs-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/Internet-e-web.jpg\",\"datePublished\":\"2024-06-03T10:04:19+00:00\",\"dateModified\":\"2026-06-04T09:58:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/06\\\/03\\\/web-design-nozioni-base-internet-vs-web\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/06\\\/03\\\/web-design-nozioni-base-internet-vs-web\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/06\\\/03\\\/web-design-nozioni-base-internet-vs-web\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/Internet-e-web.jpg\",\"contentUrl\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/Internet-e-web.jpg\",\"width\":1080,\"height\":617},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2024\\\/06\\\/03\\\/web-design-nozioni-base-internet-vs-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web design &#8211; Nozioni base: Internet vs Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#website\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/\",\"name\":\"BloGrafik\",\"description\":\"Il blog di Roberto Maiolino\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#organization\",\"name\":\"BloGrafik\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Testata_blografik@2x.png\",\"contentUrl\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Testata_blografik@2x.png\",\"width\":1265,\"height\":196,\"caption\":\"BloGrafik\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#\\\/schema\\\/person\\\/c71e1a677856d2fe685162286d1d3719\",\"name\":\"Roberto Maiolino\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro\",\"caption\":\"Roberto Maiolino\"},\"description\":\"Formazione professionale da graphic designer, lavoro nel settore nel marketing tradizionale e digitale. Una figura unica per la grafica, la comunicazione e l\u2019advertising. Da anni lavoro per le aziende sul territorio nazionale e per le agenzie di comunicazione del Trentino-Alto Adige. www.robertomaiolino.it\",\"sameAs\":[\"https:\\\/\\\/www.robertomaiolino.it\",\"https:\\\/\\\/www.facebook.com\\\/robertomaiolinodesign\\\/\",\"www.linkedin.com\\\/in\\\/roberto-maiolino-81a209a5\",\"https:\\\/\\\/x.com\\\/Roberto_RMD\"],\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/author\\\/roberto-maiolino\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web design - Nozioni base: Internet vs Web - BloGrafik","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/","og_locale":"it_IT","og_type":"article","og_title":"Web design - Nozioni base: Internet vs Web - BloGrafik","og_description":"Benvenuti in questa nuova rubrica dedicata al Web Design.Questa serie di articoli sar\u00e0 divisa in tre fasi: Nozioni base, Dentro il codice, Progettazione. In questo articolo, cercheremo di capire cos&#8217;\u00e8 internet, cos&#8217;\u00e8 il web e come funzionano. Informazioni che, vi assicuro, faranno la differenza quando progetterete un sito. L&#8217;importanza dell&#8217;informatica Vi starete chiedendo: Perch\u00e9 un [&hellip;]","og_url":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/","og_site_name":"BloGrafik","article_author":"https:\/\/www.facebook.com\/robertomaiolinodesign\/","article_published_time":"2024-06-03T10:04:19+00:00","article_modified_time":"2026-06-04T09:58:35+00:00","og_image":[{"width":1080,"height":617,"url":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web.jpg","type":"image\/jpeg"}],"author":"Roberto Maiolino","twitter_card":"summary_large_image","twitter_creator":"@Roberto_RMD","twitter_misc":{"Scritto da":"Roberto Maiolino","Tempo di lettura stimato":"13 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#article","isPartOf":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/"},"author":{"name":"Roberto Maiolino","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#\/schema\/person\/c71e1a677856d2fe685162286d1d3719"},"headline":"Web design &#8211; Nozioni base: Internet vs Web","datePublished":"2024-06-03T10:04:19+00:00","dateModified":"2026-06-04T09:58:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/"},"wordCount":2012,"commentCount":1,"publisher":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/#organization"},"image":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web.jpg","keywords":["arpanet","client","client-server","css","html","internet","IP","server","siti internet","siti web","tcp\/ip","web"],"articleSection":["HTML &amp; CSS","Tecnologia e strumenti","User Experience","Web Design"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/","url":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/","name":"Web design - Nozioni base: Internet vs Web - BloGrafik","isPartOf":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#primaryimage"},"image":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web.jpg","datePublished":"2024-06-03T10:04:19+00:00","dateModified":"2026-06-04T09:58:35+00:00","breadcrumb":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#primaryimage","url":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web.jpg","contentUrl":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2024\/05\/Internet-e-web.jpg","width":1080,"height":617},{"@type":"BreadcrumbList","@id":"https:\/\/www.robertomaiolino.it\/blografik\/2024\/06\/03\/web-design-nozioni-base-internet-vs-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.robertomaiolino.it\/blografik\/"},{"@type":"ListItem","position":2,"name":"Web design &#8211; Nozioni base: Internet vs Web"}]},{"@type":"WebSite","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#website","url":"https:\/\/www.robertomaiolino.it\/blografik\/","name":"BloGrafik","description":"Il blog di Roberto Maiolino","publisher":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.robertomaiolino.it\/blografik\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#organization","name":"BloGrafik","url":"https:\/\/www.robertomaiolino.it\/blografik\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#\/schema\/logo\/image\/","url":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2026\/05\/Testata_blografik@2x.png","contentUrl":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2026\/05\/Testata_blografik@2x.png","width":1265,"height":196,"caption":"BloGrafik"},"image":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#\/schema\/person\/c71e1a677856d2fe685162286d1d3719","name":"Roberto Maiolino","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro","url":"https:\/\/secure.gravatar.com\/avatar\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro","caption":"Roberto Maiolino"},"description":"Formazione professionale da graphic designer, lavoro nel settore nel marketing tradizionale e digitale. Una figura unica per la grafica, la comunicazione e l\u2019advertising. Da anni lavoro per le aziende sul territorio nazionale e per le agenzie di comunicazione del Trentino-Alto Adige. www.robertomaiolino.it","sameAs":["https:\/\/www.robertomaiolino.it","https:\/\/www.facebook.com\/robertomaiolinodesign\/","www.linkedin.com\/in\/roberto-maiolino-81a209a5","https:\/\/x.com\/Roberto_RMD"],"url":"https:\/\/www.robertomaiolino.it\/blografik\/author\/roberto-maiolino\/"}]}},"_links":{"self":[{"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/posts\/2628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/comments?post=2628"}],"version-history":[{"count":46,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/posts\/2628\/revisions"}],"predecessor-version":[{"id":4791,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/posts\/2628\/revisions\/4791"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/media\/2644"}],"wp:attachment":[{"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/media?parent=2628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/categories?post=2628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/tags?post=2628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}