Classe 3 E SIA: Creazione del sito Web
- Una pagina che salverete con il nome "modello" che dovrà contenere il logo, l'intestazione e il link per le cinque pagine.
- Cinque pagine html.
- la prima pagina deve chiamarsi index oppure home.
- ogni pagina deve contenere una zona con tutti i link delle altre pagine (menu orizzontale o verticale)
- il sito deve contenere immagini, link relativi e assoluti, testo, titoli
- punti elenco
- script di Google Map
- email (inventata)
- il logo
Dopo aver creato la pagina "modello" con il logo, l'intestazione e i link alle cinque pagine, salvare con i nomi: home, pagina2.html, pagina3.html, pagina4.html, pagina5.html
Avvertenze: i nomi delle pagine e le foto non devono avere spazi e devono essere scritti in minuscolo.
Programmi da utilizzare:
- Microsoft Expression Web per la realizzazione delle pagine Web
- Pixlr.com/x (creazione loghi testuali in formato png)
- https://logomaster.ai/it/ (loghi professionali)
- Pixlr.com/editor (fotoritocco)
- Pixabay.com (librerie immagini free)
(Lezione venerdì 27 sett 2019)
- Pixlr.com/x (creazione loghi testuali in formato png)
- https://logomaster.ai/it/ (loghi professionali)
- Pixlr.com/editor (fotoritocco)
- Pixabay.com (librerie immagini free)
(Lezione venerdì 27 sett 2019)
Per adattare i contenuti per il mobile con il meta-tag ViewPort e HTML5 ecco lo script:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Viewport</title>
</head>
<body>
<h1>Article</h1>
<h2>Subtitle</h2>
<p> In informatica l'HyperText Markup Language (HTML; traduzione letterale: linguaggio a marcatori per ipertesti) è un linguaggio di markup. Nato per la formattazione e impaginazione di documenti ipertestuali disponibili nel web 1.0, oggi è utilizzato principalmente per il disaccoppiamento della struttura logica di una pagina web (definita appunto dal markup) e la sua rappresentazione, gestita tramite gli stili CSS per adattarsi alle nuove esigenze di comunicazione e pubblicazione all'interno di Internet. <br><br>
</p>
<h3>Comments</h3>
<div>
---
</div>
</body>
</html>
I parametri utilizzabili con il tag viewport sono:
width: imposta la larghezza di riferimento del display (width=device-width, width=320)
height: imposta l'altezza del display (height=device-height or height=640)
initial-scale: imposta il livello di zoom iniziale (impostare 1.0 per la proporzione 100%)
user-scalable: indica se l'utente può effettuare lo zoom (user-scalable=yes|no)
minimum-scale: indica la soglia minima di zoom, quando si effettua zoom-out per rimpicciolire i contenuti (minimum-scale=0.5)
maximum-scale: indica la soglia massima di zoom, quando si effettua zoom-in per ingrandire i contenuti (maximum-scale=2.0)
target-densityDpi: imposta la densità dello schermo in punti per pollice, utilizzato per i display ad alta risoluzione, per ingrandire/ridurre i contenuti (target-densityDpi=device-dpi|high-dpi|low-dpi)
Tecniche avanzate Responsive Web Design
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Viewport</title>
</head>
<body>
<h1>Article</h1>
<h2>Subtitle</h2>
<p> In informatica l'HyperText Markup Language (HTML; traduzione letterale: linguaggio a marcatori per ipertesti) è un linguaggio di markup. Nato per la formattazione e impaginazione di documenti ipertestuali disponibili nel web 1.0, oggi è utilizzato principalmente per il disaccoppiamento della struttura logica di una pagina web (definita appunto dal markup) e la sua rappresentazione, gestita tramite gli stili CSS per adattarsi alle nuove esigenze di comunicazione e pubblicazione all'interno di Internet. <br><br>
L'HTML è un linguaggio di pubblico dominio, la cui sintassi è stabilita dal World Wide Web Consortium (W3C). È derivato dall'SGML, un metalinguaggio finalizzato alla definizione di linguaggi utilizzabili per la stesura di documenti destinati alla trasmissione in formato elettronico. La versione attuale, la quinta, è stata rilasciata dal W3C nell'ottobre 2014. <br><br>
Il motivo principale che ha spinto il W3C e i suoi membri a sviluppare HTML5 è stata la necessità di fornire direttamente le funzionalità che in precedenza erano fruibili tramite estensioni proprietarie all'esterno dei browser, come Adobe Flash e simili. Un secondo obiettivo che gli sviluppatori si erano prefissati era quello di garantire una maggiore compatibilità tra i diversi browser, indipendentemente dalla piattaforma software utilizzata, e principalmente mirata all'espansione dei dispositivi mobili.
</p>
<h3>Comments</h3>
<div>
---
</div>
</body>
</html>
I parametri utilizzabili con il tag viewport sono:
width: imposta la larghezza di riferimento del display (width=device-width, width=320)
height: imposta l'altezza del display (height=device-height or height=640)
initial-scale: imposta il livello di zoom iniziale (impostare 1.0 per la proporzione 100%)
user-scalable: indica se l'utente può effettuare lo zoom (user-scalable=yes|no)
minimum-scale: indica la soglia minima di zoom, quando si effettua zoom-out per rimpicciolire i contenuti (minimum-scale=0.5)
maximum-scale: indica la soglia massima di zoom, quando si effettua zoom-in per ingrandire i contenuti (maximum-scale=2.0)
target-densityDpi: imposta la densità dello schermo in punti per pollice, utilizzato per i display ad alta risoluzione, per ingrandire/ridurre i contenuti (target-densityDpi=device-dpi|high-dpi|low-dpi)
Tecniche avanzate Responsive Web Design
Buon lavoro
prof. Paolo Latella
Commenti
Posta un commento