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



che-cose-il-seo-sito-web-e-seo-kumbe,2302.jpg?WebbinsCacheCounter=1
smartworking-kumbe,2253.jpg?WebbinsCacheCounter=1
tentativo-di-phishing-evitare-truffe-online-kumbe-agenzia-web-trentino,2252.jpg?WebbinsCacheCounter=1

Web marketing, siti web & nuove tecnologie...
La tribù Kumbe è a tua disposizione.


PER IL TURISMO

PER IL TURISMO
Web marketing per l'ospitalità, i servizi e le destinazioni



PICCOLE E MEDIE IMPRESE

PICCOLE E MEDIE IMPRESE
Software e applicativi web-based per l'impresa



ECOMMERCE

ECOMMERCE
Soluzioni per il il commercio elettronico



PUBBLICA AMMINISTRAZIONE

PUBBLICA AMMINISTRAZIONE
Strumenti siti e portali per la PA



CONSULENZA E STRATEGIA

CONSULENZA E STRATEGIA
Consulenza professionale e supporto alle imprese



NUOVE TECNOLOGIE e RICERCA

NUOVE TECNOLOGIE e RICERCA
Servizi avanzati ed integrati per imprese high-tech



logo quik kumbe

Quik, un nuovo prodotto made in Kumbe

QUIK è un software gestionale, un sistema operativo automatizzato che organizza i tuoi dipendenti, le loro attività lavorative, logistica, fatturazioni e anagrafiche. Business Intelligence, reportistica e controllo economico dei progetti ne fanno una completa soluzione manageriale.

Scopri di più di Quik

Azienda per il Turismo Dolomiti Paganella
Azienda per il Turismo Val di Non
Terme di Rabbi
Prosecco Hills
Andalo Life, Family Activity Park
Ski Area Campiglio Dolomiti
Pretzhof Selection
Dolomiti Paganella Bike


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 | Software Consultant

Davide Aldrighetti

Davide Aldrighetti
DIGITAL STRATEGIST

Marco Parolari

Marco Parolari
PM | web consultant

Ernesto Baruzzi

Ernesto Baruzzi
IT consultant

Mirian Molina

Mirian Molina
Digital account

Francesca Novali

Francesca Novali
Digital Media - Content Curator

Niccolò Pennestre

Niccolò Pennestre
Sales account

Marta Sufaru

Marta Sufaru
Sales Account

Philipp Matz

Philipp Matz
Art director - UX/UI designer

Valentina Giovanelli

Valentina Giovanelli
UX Designer

Laura Palluello

Laura Palluello
SEO SPECIALIST & ADS

Massimo Malacarne

Massimo Malacarne
Senior Software Developer

Giorgio Ennas

Giorgio Ennas
Software Development Team Manager

Marco Aldegheri

Marco Aldegheri
Senior Software Developer

Fabrizio Leonardi

Fabrizio Leonardi
SENIOR SOFTWARE DEVELOPER

Moreno Trainini

Moreno Trainini
Junior Software developer

Mattia Malfatti

Mattia Malfatti
PROJECT MANAGER

Ion Turcan

Ion Turcan
JUNIOR WEB DEVELOPER

Daniele Salvini

Daniele Salvini
JUNIOR SOFTWARE DEVELOPER

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.

Courmayeur Mont Blanc CSC
Azienda per il Turismo S.p.A. Madonna di Campiglio Pinzolo Val Rendena
Dolomiti Paganella Bike
logo-ski
Andalo Life
Val di Non
Prosecco Hills
Skirama Dolomiti Adamello-Brenta
3tre Campiglio
Trentino
Mieli thun
Unox
Adler
Trentino Fishing
Diatec Group
Castelli
Sportsul
Apt dolomiti paganella
Cantine Lunelli
Comano Valle Salus

KUMBE DIGITAL TRIBU
Via Fabbrica 52/B, 38079 Tione di Trento TN
tel +39 0465 322204
info@kumbe.it

Contattaci:

Hai raggiunto il limite

Invia richiesta

Grazie

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

Iscriviti alla newsletter