Post

Visualizzazione dei post con l'etichetta CSS 3

4E e 4I SIA: L'uso della libreria Leaflet e il plugin Leaflet Routing Machine

Immagine
Il "web mapping" In questa lezione affronteremo la differenza tra Leaflet (la libreria di base) e Leaflet Routing Machine (un plugin specializzato), seguita da un esempio pratico che le usa entrambe. 🌍 Lezione: Mappe Web con Leaflet Pensa a Leaflet come a una scatola di LEGO. Da sola, ti fornisce tutti i mattoncini base (la mappa, i segnaposto, le forme), ma non ti dà un "castello" o una "macchina" già pronti. 1. Cos'è Leaflet (Il Motore Principale) Leaflet è una libreria JavaScript leggera e open-source per creare mappe interattive. È il "motore" della mappa. Come funziona? Il suo funzionamento si basa sul concetto di Layers (Livelli). Immagina di lavorare su fogli di lucido trasparenti impilati: Il Contenitore (HTML): Per prima cosa, hai bisogno di un "telaio" nel tuo HTML in cui la mappa possa vivere. Questo è un semplice <div> con un ID, ad esempio <div id="map"></div>. L'Oggetto Mappa (L.map): Q...

3E e 3I SIA: spiegazione della pagina Index.html e del file style.css dell'esercizio Responsive assegnato alle classi

Immagine
Spiegazione della pagina index.html 1. <!doctype html>: Questo è l'inizio del documento HTML. Dice al browser che il documento è scritto in HTML5, la versione più recente di HTML. 2. <head>: Qui inseriamo le informazioni che non sono visibili direttamente nella pagina ma sono importanti per il funzionamento e l'ottimizzazione del sito. - <meta charset="UTF-8">: Questa riga imposta il set di caratteri del documento su UTF-8, un tipo comune che supporta la maggior parte dei caratteri delle lingue del mondo. - <meta http-equiv="Content-type"…>: Assicura che il contenuto del documento è di tipo HTML e specifica di nuovo l'uso del charset UTF-8, una forma ridondante ma può prevenire errori. - <title>Home - Sito responsive della 3E Sia </title>: Questo è il titolo della pagina. Appare nella scheda del browser. - <meta name="viewport"…>: Fondamentale per il design responsive. Fa sì che il sito si adatti bene ...

3E e 3I: Manuale Html5 e Css3 - Un connubio vincente per la programmazione web di domani

Immagine
Manuale Html5 e Css3 - Un connubio vincente per la programmazione web di domani Il principale obiettivo di questa tesi è di documentare le maggiori novità introdotte dai linguaggi HTML 5 e CSS 3. Per una giusta comprensione è necessaria una discreta conoscenza di HTML 4 e CSS 2 ed inoltre essere al corrente delle basilari potenzialità di JavaScript: nel prosieguo queste conoscenze si danno per assunte. Saranno analizzati nel dettaglio i nuovi elementi di HTML 5, le proprietà di CSS 3, saranno descritte alcune funzioni JavaScript di supporto a queste due nuove tecnologie, ci saranno alcuni esempi di codice con l’intenzione di valutare alcune delle nuove funzionalità, e infine le tabelle di compatibilità dei vari elementi relative ai browser più popolari. Per verificare se una data proprietà è supportata o no dai vari browser, si può utilizzare un servizio come When can I use fruibile dal sito http://caniuse.com/. Alternativamente le varie funzionalità sono consultabili in modo rapido...