TogetherJS collaborazione real time nel proprio sito web

TogetherJS

TogetherJS è una libreria javascript freeware sviluppata da Mozilla. Aggiunge feature di collaborazione allo sviluppo del proprio sito web. Aggiungendo TogetherJS al proprio sito, gli utenti possono aiutarsi effettuando modifiche in tempo reale. Tutte le modifiche sono chiaramente non permanenti, ma possono essere visualizzate da chiunque, fornendo loro un particolare link attraverso il quale si […]

Pagina web con video in background

javascript

Nel precedente articolo abbiamo mostrato come inserire un video in una pagina web, sfruttando HTML5. In questa “puntata”, vedremo invece come far diventare il nostro video, lo sfondo della pagina. Al posto di una qualsiasi immagine o colore, useremo quindi il nostro video. Faremo uso di jQuery, e degli eventi: loadedmetadata: una volta caricati tutti […]

Inserire un video in una pagina web

html5

Prima dell’avvento di HTML5, inserire video in una pagina web richiedeva l’utilizzo di tecnologie di supporto quali Flash e javascript. La nuova specifica HTML5 introduce il tag specifico <VIDEO>, abbandonando l’uso del famoso contenitore <object>. I formati supportati dal nuovo tag sono: MP4 video/mp4; WebM video/webm; Ogg video/ogg. Con il tag video sono introdotti: <source> […]

Introduzione alle HISTORY API di HTML5

Alla base della navigazione web all’interno di un sito, ci sono i collegamenti ipertestuali (link) che consentono di spostarci da una pagina all’altra. Ad ogni click il nostro browser ricarica l’intera pagina spostandosi alla nuova. Riflettiamo un attimo su questa azione: cliccando su un link, solo alcune informazioni cambiano tra una pagina di un sito […]

Un menu con effetto Carousel

carousel

In questo articolo, spiego come creare un semplice menu con effetto Carousel, da aggiungere al nostro sito web. Faremo uso del plugin jQuery consultabile a questo indirizzo: OWLCarousel. Il menu che andremo a creare dovrà essere visualizzato nella nostra home page, e visualizzaerà un immagine alla volta. Potremo scorrere le immagini mediante effetto drop, o […]

HTML5 Testo Canvas animato

In questo articolo viene creato un testo animato mediante canvas. Il tag <canvas> è un nuovo tag offerto dalla specifica HTML5 , e può essere impiegato per disegnare ed operare con elementi grafici. Necessita di un linguaggio di scripting di supporto come JavaScript, per funzionare correttamente e sfruttare a pieno le sue potenzialità. In supporto a canvas, sono nate […]

Definire i breakpoint con le css media queries

responsive

Durante la progettazione di un template Responsive, una delle prime fasi consta nella definizione dei breakpoint con le css media queries. Con un breakpoint definiamo un punto su una linea ideale che parte da 0, in cui deve avvenire una sorta di modifica (tramite CSS) al layout della pagina. Ogni breakpoint è identificato nei nostri […]

Cosa è Responsive Web Desgin

Responsive Web Design

Il Responsive Web Design, è una tecnica di design che prevede di costruire contenuti web che si adattano ad ogni dispositivo. Con l’aggettivo “responsive” si indica infatti tutto ciò che “reagisce o risponde in modo appropriato ad uno stimolo”. Se applichiamo questa idea ad un sito web rendendolo quindi un sistema  ‘adattivo’, possiamo facilmente ricavare una […]

Consigli e trucchi HTML5

html5

Con questo articolo continuiamo l’introduzione ad HTML5, trattando alcuni dei nuovi tag e gli attributi che ne scaturiscono. Come riportato in altri articoli, non tutti i browser ancora ad oggi supportano pienamente la specifica HTML5, in costante evoluzione. Per ogni passo, è possibile utilizzare questo tool: http://html5test.com/ 1. Dichiarazione DOCTYPE Con HTML4 dichiarare il doctype […]

Browser in modalità fullscreen con HTML5

Mediante l’API HTML5 chiamata Fullscreen, possiamo lanciare il browser in modalità fullscreen, previa approvazione dell’utente. Tutto ciò è possibile mediante il metodo fullscreen.requestFullScreen. Basta chiamare il metodo di richiesta sull’elemento che vuoi visualizzare a pieno schermo e la finestra si  regolerà di conseguenza, chiedendo che l’utente se consentire tale operazione. Ogni browser ha la sua […]