Archivio per la Categoria ‘Xhtml & Css’ Category

Come realizzare uno sfondo animato originale e adatto al contesto

In passato, per rendere un sito dinamico e quindi pieno di animazioni, effetti e quant’altro, ricorrevamo quasi sempre all’aiuto di Flash e quindi dell’action script, che era forse l’unico linguaggio che ci permetteva di ottenere determinati effetti.

Fortunatamente, tutto questo è cambiato con l’ampliamento delle capacità del codice javascript (come jquery) grazie soprattutto ai nuovi framework. Ma per quelli che, come me, vanno avanti a pane, html e css, il jquery è stato sì una svolta, ma ancora un pelino macchinoso.

Il CSS3 ha messo finalmente fine a queste frustrazioni, con delle semplici proprietà che aprono infinite soluzioni.

Una tra tante, la possibilità di inserire uno sfondo animato in una pagina web.

In questo articolo vedremo proprio come rendere uno sfondo animato e adatto al contesto di lavoro in cui stiamo operando. || Leggi altro »

Guida HTML5: i form – parte 1

Nel corso di questo capitolo approfondiremo un aspetto fondamentale del web moderno: i form. L’HMTL5 non solo ha migliorato sensibilmente l’utilizzo degli elementi già presenti nei form, ma ne ha aggiunti numerosi altri. Ti sorprenderai di come adesso sia possibile...

9 commenti

Guida HTML5: nuovi elementi semantici

In questo articolo scopriremo alcuni elementi di markup che sono stati rivisitati con l’introduzione di HTML5. In particolare vedremo come dare una formattazione alle date con il tag <time>, come evidenziare del testo attraverso <mark> e com’è cambiato l’output dei...

11 commenti

Sfogliare le pagine di un sito: effetti di transizione AJAX e HTML5 history api

Quante volte ci sarà capitato di voler realizzare un sito web (o anche solo una parte di esso) che godesse di effetti visuali nel passaggio da una pagina all’altra piuttosto che del semplice caricamento della pagina da raggiungere? Sicuramente molto...

25 commenti

HTML Mobile App: 5 Consigli per aumentare le performance

Negli articoli precedenti (HTML5 Mobile App: transizioni ed animazioni CSS3 parte 1 e parte 2) abbiamo visto come poter realizzare applicazioni HTML5 e Javascript con interfacce che sfruttano animazioni CSS3, e come poter controllare quest’ultime grazie agli eventi che abbiamo...

10 commenti

CSS3: ATTIVARE LE TRANSIZIONI CON JQUERY

In questo articolo vi illustrerò in che modo attivare le transizioni CSS tramite un piccolissimo codice Jquery. Come tutti immagino sappiate, le “CSS Transitions” sono delle feature introdotte con il nuovo standard CSS3 che permettono di creare delle semplici animazioni...

7 commenti

Come utilizzare i filtri CSS3 per creare immagini accattivanti

I filtri css3 sono potenti strumenti che permettono di modificare le immagini direttamente sul browser, creando effetti di transizione e animazione al passaggio del mouse sull’immagine. Il sito web diventa più accattivante perché cambiamo il modo di visualizzare il contenuto...

6 commenti

4 jQuery tricks che non potete non conoscere

jQuery. Un framework javascript talmente potente e popolare che equivale praticamente a Zend per il PHP. Sempre più siti web lo utilizzano per la sua capacità di essere sintetico ma altamente funzionale, e non se ne può più fare a...

16 commenti

HTML5 Mobile App: come gestire la connessione di rete

Ultimamente ho ricevuto molte domande inerenti la creazione di applicazioni mobile in HTML5, CSS3 e Javascript. Gran parte sono incentrate su come gestire l’assenza di connessione e su come procedere per il salvataggio dati. Oggi voglio affrontare il primo di...

4 commenti

SASS: come potenziare lo sviluppo di CSS

Negli scorso articoli, abbiamo parlato di Angular e di uno stile di sviluppo più veloce e ordinato. Per continuare sulla scia della semplicità ed efficacia per lo sviluppo delle nostre applicazioni e progetti web, non posso non introdurre l’argomento SASS...

9 commenti

AngularJS – Creare applicazioni single page

Ritorniamo con la nostra guida su Angular. Come promesso nel precedente articolo, dopo aver visto come funziona e come si utilizza Angular, possiamo procedere con la creazione di un’applicazione single-page con il framework di Google. Nel corso di questo articolo...

3 commenti

Guida HTML5 – immagini & outlines

Nel corso di questo articolo dedicato all’HTML5 scopriremo come utilizzare tag fondamentali per la gestione delle immagini e la formattazione dei titoli. Inoltre, andremo ad analizzare approfonditamente uno degli aspetti più innovativi introdotti dall’HTML5 e, purtroppo, ancora poco diffuso tra...

16 commenti

HTML5 Mobile app: transizioni e animazioni CSS3 (parte 2)

Nella prima parte di questa mini guida abbiamo parlato dei concetti di animazioni imperative/animazioni dichiarative, di come avviare o mettere in pausa un effetto transition e di come queste tecniche possano essere impiegate per la realizzazione di interfacce web e HTML5...

6 commenti

AngularJS – MVC in azione

Nello scorso articolo abbiamo visto cos’è AngularJS, come funziona e quali sono le sue grandi potenzialità. Sicuramente ho usato termini non familiari a tutti, ma che spero siano entrati a far parte delle vostre basilari competenze in fatto di AngularJS....

4 commenti

Guida HTML5: la struttura

Indubbiamente, il maggior cambiamento introdotto dall’HTML5 rispetto alla precedente versione è il modo di strutturare la pagina. Molti elementi di markup sono stati aggiunti e altrettanti modificati: l’inflazionato <div> ha lasciato il posto a tag molto più specifici come <header>,...

17 commenti

HTML5 Mobile app: transizioni ed animazioni CSS3: parte1

Sicuramente avrai già sentito parlare di applicazioni mobile create completamente in HTML5, CSS3 e Javascript, o magari abbinando questi tipi di linguaggi con quelli nativi, come nelle applicazioni "ibride". Forse potrebbe interessarti l’ottimo post di Smashing Magazine sulle applicazioni ibride:...

14 commenti

Videotutorial: Come realizzare un menù responsive

Nella progettazione di un sito web responsive un ruolo molto importante è quello svolto dal menù di navigazione, di solito posizionato in modo orizzontale nella header del sito. In questo video tutorial vedremo come realizzare un menù di navigazione che...

12 commenti

Guida HTML5: la prima pagina

Nell’articolo precedente abbiamo appreso che l’HTML5 è un linguaggio in costante evoluzione, quindi… come possiamo essere sicuri che il nostro sito sia compatibile con tutti i browsers? Lo scopriremo in questa parte della guida e, per soddisfare i più impazienti,...

19 commenti

Guida HTML5: il Canvas – Parte 1

Come accennato nell’introduzione, uno degli obiettivi dell’HTML5, è facilitare l’implementazione di applicazioni interattive. Una delle più importanti tra queste è canvas: una tela virtuale attraverso la quale potrete liberare l’artista che è in voi! A differenza degli altri elementi introdotti...

19 commenti