KUMBE · BLOG


Dietro le quinte del sito web 5 – Static web design



software web portal web service
24 apr 2017

Moreno Trainini
Posted by:
Moreno Trainini

Passiamo ora ad analizzare una delle fasi più importanti per quanto riguarda lo sviluppo di un sito web, e cioè la realizzazione della versione statica dello stesso, una sorta di template utile per avere una visione avanzata di layout e grafica di quella che sarà la versione finale del sito web.

Ma partiamo dal principio, quello che si è ottenuto con la tecnica del wireframing e con l’applicazione di tutte le logiche e gli standard discussi in precedenza è un rendering del sito web, cioè una visione d’insieme dettagliata solitamente rappresentata con un’immagine o con un modello. Ovviamente questa prima immagine viene revisionata più e più volte in accordo con il cliente fino a che non si ottiene un render che soddisfi entrambe le parti. Quando si riceve la conferma può iniziare il fondamentale processo di conversione da rendering a sito web statico, per dare un’idea al cliente di come sarà effettivamente strutturato e come funzionerà il sito web. Questa conversione viene solitamente effettata esportando le icone ed i contenuti attraverso dei software appositi (come Sketch, Figma ed Adobe Photoshop, delle suite preposte anche per questo utilizzo) e poi sarà compito del Web Designer/Developer progettare la pagina come da preview integrando gli elementi statici esportati dal rendering.

Solitamente la versione statica creata è composta da pagine HTML relative alle parti fondamentali del sito web (homepage, dettaglio, menù, carrello [se e-commerce], ecc.) visualizzabili e testabili. Solitamente queste pagine vengono rese disponibili attraverso l’utilizzo di un dominio apposito temporaneo al cliente richiedente e ad una possibile serie di tester per valutazioni e feedback.

Ma la parte HTML non è l’unica componente richiesta per la creazione del sito web in versione statica, altri due potenti linguaggi entrano in gioco, specificatamente CSS e Javascript, che si relazionano ed interconnettono in modo profondo e flessibile con l’HTML.

HTML (Hyper Text Markup Language)

E’ il linguaggio standard di marcatura per ipertesti utilizzato per creare pagine web. I browser web ricevono documenti HTML da un web server (o da locale) ed effettuano il rendering del documento in una pagina web multimediale. Il linguaggio HTML descrive la struttura semantica della pagina, esso è formato da elementi HTML (componenti individuali facenti parte della struttura DOM).

L’HTML è composto da un albero di nodi (rappresentati attraverso l’utilizzo di tag, es. <p>…</p>) che possono avere attributi specifici e contenuto (che può includere testo oppure altri nodi) e che formano la struttura semantica della pagina web.

Il codice HTML può contenere al proprio interno costrutti, immagini ed oggetti come form interattivi, inoltre è possibile includere degli script scritti in linguaggi specifici (come JavaScript) e collegamenti a fogli di stile esterni (CSS) che andranno a definire la rappresentazione dei contenuti.

CSS (Cascade Style Sheets)

E’ il linguaggio utilizzato per definire e descrivere la rappresentazione di un documento scritto in un linguaggio di marcatura (come l’HTML). E’ stato progettato specificatamente per definire lo stile visuale delle pagine web e delle interfacce utente scritte i HTML e XHTML ma può essere applicato anche a documenti scritti in XML o SVG. E’ stato concepito principalmente per consentire la separazione tra il contenuto del documento e la presentazione dello stesso, includendo aspetti come i layout, i colori ed i caratteri (font, vedi Dietro le quinte del sito web parte 4). Questa separazione migliora sensibilmente l’accessibilità dei contenuti e consente di avere flessibilità ed il totale controllo della rappresentazione dei contenuti stessi.

E’ definito utilizzando dei selettori (scritti utilizzando parole chiave della lingua inglese) che dichiarano a quale parte del markup lo stile viene applicato effettuando un matching tra i tag e gli attributi dello stesso. Questi selettori possono essere applicati a singoli o multipli elementi attraverso id, classi oppure pseudo-classi ed in cascata. E’ buona norma evitare di inserire direttamente nel codice HTML delle regole di stile lasciando queste incluse all’inizio della definizione del documento in un foglio di stile esterno. Questo consente di effettuare una formattazione dei contenuti in modo ordinato e modulare, rendendo di fatto il sito web revisionabile e gestibile in modo più semplice.

JavaScript

E’ un linguaggio di alto livello (solitamente abbreviato con l’acronimo JS), dinamico, non tipizzato ed interpretato. E’ stato standardizzato dalle specifiche ECMAScript ed è supportato dalla maggior parte dei moderni web browser senza la necessità di plug-in specifici.

E’ basato su prototipi e supporta programmazioni di tipo imperativo, funzionale ed orientata agli oggetti, possiede inoltre delle API interne per poter lavorare con testi, array, date ed espressioni regolari.

Nei siti web statici è solitamente utilizzato per includere elementi di fatto dinamici come gallerie fotografiche, video e per la gestione di tutti gli eventi presenti sulla pagina (click, scroll, swipe, ecc.).


Per concludere l’unione di HTML, CSS e JavaScript (che formano di fatto la triade del World Wide Web) consente di creare la versione statica del sito web, che può essere definita come un template (o rappresentazione) di quello che sarà il sito web finale.

Quando questo template sarà stato revisionato e accettato comincerà l’ultimo e fondamentale processo di conversione portando il sito web alla sua versione dinamica attraverso l’integrazione del CMS (Content Management System) e di possibili servizi di terze parti che vedremo nel prossimo articolo.





Precedente Prossimo articolo


Kumbe blog



web-developer-kumbe,2045.jpg?WebbinsCacheCounter=1
full-stack-senior-web-developer_kumbe,2043.jpg?WebbinsCacheCounter=1
newsletter-email-marketing-per-hotel,1912.jpg?WebbinsCacheCounter=1

Azienda per il Turismo Dolomiti Paganella
Prosecco Hills
Andalo Life, Family Activity Park
Pretzhof Selection
Courmayeur Mont-Blanc
Madonna di Campiglio Pinzolo-Val Rendena, Azienda per il Turismo

Madonna di Campiglio Pinzolo-Val Rendena, Azienda per il Turismo
Madonna di Campiglio, Pinzolo-Val Rendena (TN)


Dettagli   Visita il Sito
Terme di Comano Dolomiti di Brenta, Azienda per il Turismo
Skirama Dolomiti Adamello Brenta, official website


Kumbe Tribu


I guerriglieri del Web

Il nostro totem: la zwebra!

Tre capostipiti e tanti sciamani con un'unica battaglia da combattere: la qualità sul web!
Tutti battaglieri giovani e professionali pronti per affrontare qualsiasi sfida nella comunicazione sul web, la strategia digitale, il web marketing online, i social media e le applicazioni informatiche.
Ciascuno con mille passioni e dedito a numerose attività: chi fa pesca subacquea, chi canta e suona la chitarra, chi è sempre in sella alla propria mountain bike, chi scrive e chi legge, chi kazzeggia, chi ama il buon vino, chi la birra, chi camminare in montagna, chi crogiolarsi al sole, chi arrampicarsi sui pendii innevati, chi farsi del male, chi si sposa, si fidanza, chi si lascia e chi s'innamora. Chi ama il mare e chi la montagna, chi vive d'adrenalina e chi di tranquillità. Chi è nato sul lago, chi in Svizzera, in Spagna, in Germania, in Transilvania, in Brasile ... e tutti con un fattor comune: la passione per il web!



Nicola Mosca

Nicola Mosca
CEO | Web App Consultant | Senior Software Developer

Davide Aldrighetti

Davide Aldrighetti
WEB CONSULTANT

Marco Parolari

Marco Parolari
web designer | web consultant

Ernesto Baruzzi

Ernesto Baruzzi
IT CONSULTANT

Mirian Molina

Mirian Molina
Account manager | Seo & Advertising

Francesca Novali

Francesca Novali
DIGITAL MARKETING MANAGER

Niccolò Pennestre

Niccolò Pennestre
Sales & Administrative manager

Marta Sufaru

Marta Sufaru
Sales & Webmarketing Consultant

Philipp Matz

Philipp Matz
Art director | Web design & developer

Luciano Favilla

Luciano Favilla
Front end web developer

Massimo Malacarne

Massimo Malacarne
Senior Software Developer

Marco Aldegheri

Marco Aldegheri
Senior Software Developer

Fabrizio Leonardi

Fabrizio Leonardi
SENIOR SOFTWARE DEVELOPER

Moreno Trainini

Moreno Trainini
Junior Software developer

Daniele Salvini

Daniele Salvini
JUNIOR SOFTWARE DEVELOPER

Mattia Malfatti

Mattia Malfatti
PROGRAM & PROJECT MANAGER

«WE ARE HIRING»<br> Senior Software Development Manager

«WE ARE HIRING»
Senior Software Development Manager
Inviaci il tuo curriculum

MI CANDIDO!
«WE ARE HIRING»<br> Full Stack Senior WEB Developer

«WE ARE HIRING»
Full Stack Senior WEB Developer
Inviaci il tuo curriculum

MI CANDIDO!
Vuoi far parte della tribù?

Vuoi far parte della tribù?
Inviaci il tuo curriculum


Ecco chi ha dato fiducia alla tribù...

In groppa alla zebra! Loro galoppano, combattono e vivono il web al nostro fianco.

Skirama Dolomiti Adamello-Brenta
Courmayeur Mont Blanc CSC
Azienda per il Turismo S.p.A. Madonna di Campiglio Pinzolo Val Rendena
Carioca
Unox
Adler
Trentino Charme
3tre Campiglio
Trentino Fishing
Diatec Group
Castelli
Sportsul
Trentino
Trentino Volley
Cantine Lunelli
Comano Valle Salus

KUMBE Web e Nuove Tecnologie
Via Fabbrica 52/B, 38079 Tione di Trento TN
38079 Tione di Trento (Trento) IT
tel +39 0465 322204
info@kumbe.it

Contattaci:

Hai raggiunto il limite

Dichiarazione in merito al GDPR (Regolamento Generale Protezione dei Dati)

Il titolare del trattamento dati è KUMBE SRL e dichiara che il dato acquisito tramite il presente form verrà trattato nel seguente modo:

  • Sarà utilizzato per l’evasione dell’attuale richiesta di informazioni/acquisto/iscrizione fino al suo espletamento e per nessuna ulteriore attività.
  • Viene conservato presso gli archivi aziendali senza data limite, fino a cancellazione autonomamente da parte dell’utente, volontaria da parte del Titolare o su esplicita richiesta di cancellazione da parte dell’utente.
  • Viene conservato per conto del Titolare da KUMBE, mantainer del Titolare per i servizi digitali, negli archivi cloud e relativi backup a loro volta gestiti in ottemperanza al GDPR per tutta la durata contrattuale con il Titolare -che ne può disporre in ogni momento- e fino a successiva cancellazione.
  • Non verrà venduto ad altri terzi, non verrà utilizzato per campagne di marketing salvo non sia contestualmente autorizzata tale opportunità.
  • L’utente verrà profilato in base alle informazioni contenute e il dato potrà essere utilizzato per elaborazione statistica.
  • la policy privacy completa puoi trovarla al link www.kumbe.it/privacy. Per ogni informazione o richiesta puoi scriverci all'indirizzo privacy@kumbe.it.

Dichiarazione in merito al GDPR (Regolamento Generale Protezione dei Dati)

In caso di sottoscrizione Newsletter l’utente dovrà confermare l’iscrizione per mezzo di mail di conferma inviata all’indirizzo inserito. In tal caso il trattamento prevede:

  • la profilazione dell’utente in gruppi, status, preferenze secondo quanto indicato e dedotto dalle informazioni inviate tramite il form o successiva autonoma profilazione.
  • l’utilizzo del dato per l’invio di comunicazione a mezzo digitale (email, whatsapp) e non (cartaceo) avente scopo informativo/commerciale.
  • l'utilizzo della mail per la generazione di campagne marketing e informative personalizzate, digitali e non.
  • la policy privacy completa puoi trovarla al link www.kumbe.it/privacy. Per ogni informazione o richiesta puoi scriverci all'indirizzo privacy@kumbe.it.
Invia richiesta

Grazie

Ti abbiamo inviato una email. Per attivare la newsletter clicca sul link che troverai nel messaggio, grazie!

Iscriviti alla newsletter


Dichiarazione in merito al GDPR (Regolamento Generale Protezione dei Dati)

In caso di sottoscrizione Newsletter l’utente dovrà confermare l’iscrizione per mezzo di mail di conferma inviata all’indirizzo inserito. In tal caso il trattamento prevede:

  • la profilazione dell’utente in gruppi, status, preferenze secondo quanto indicato e dedotto dalle informazioni inviate tramite il form o successiva autonoma profilazione.
  • l’utilizzo del dato per l’invio di comunicazione a mezzo digitale (email, whatsapp) e non (cartaceo) avente scopo informativo/commerciale.
  • l'utilizzo della mail per la generazione di campagne marketing e informative personalizzate, digitali e non.
  • la policy privacy completa puoi trovarla al link www.kumbe.it/privacy. Per ogni informazione o richiesta puoi scriverci all'indirizzo privacy@kumbe.it.
Annulla