Dreamweaver è un programma semplice ma potente: attraverso questo software, infatti, è possibile creare, in pochissimo tempo, un sito web gradevole e funzionale senza conoscere approfonditamente il codice HTML. Come tutti i prodotti Adobe, Dreamweaver è periodicamente aggiornato e sottoposto a nuove implementazioni: tramite questa sezione potrete tenervi aggiornati su tutte le novità e gli sviluppi del software oltre che conoscere i principali suggerimenti e consigli su come usarlo al meglio.

CSS3 Moving Menu: il nostro primo widget su Adobe Exchange!

E’ stato pubblicato su Adobe Exchange il nostro primo Widget per Adobe Widget Browser. Questo esempio (completamente gratuito) permette di inserire un menu con effetto di animazione in rollover senza uso di JavaScript, sfruttando esclusivamente le potenzialità dei CSS3.

Questo esempio è stato creato appositamente per l’eseminar online del prossimo 22 giugno dal titolo: “Creazione di contenuti web utilizzando Widget Browser” . Cogliamo l’occasione per ricordare di partecipare a questo evento, gratuito previa registrazione.

Quale browser? HTML5, Flash e i nuovi standard

Una delle domande che può nascere spontanea in questi tempi di così rapidi sviluppi può essere quella di scegliere quale browser utilizzare.
Quale quello  più professionale per lavorare, quello che rispetta di più gli standard W3C, ecc..
Andiamo ad analizzare alcuni aspetti importanti dei maggiori browser attuali: Firefox 4, Opera 11, Internet Explorer 9 e Safari 5, Chrome 5.

Continue reading “Quale browser? HTML5, Flash e i nuovi standard” »

HTML 5: l’importanza della semantica

Una delle grandi novità dell’HTML5 è la semantica.
Quanti di noi fanno un uso, talvolta spasmodico, del tag “div” pur di poter posizionare un elemento in un dato posto? Ora tutti questi “div” non permettono di poter individuare con esattezza l’importanza che acquistano i contenuti in esso inserito. L’attributo “id” poi può assumere i valori più disparati rendendo effettivamente difficile ai motori di ricerca la possibilità di individuare se un div è importante (perchè è il contenuto principale del sito) da un altro div che funge solo da footer.

Allora ecco almeno i principali segmenti vengono identificati dai relativi nuovi tag.
Nascono infatti in HTML5 i tag: header, footer, nav, aside, article, … .

Ognuno di loro infatti permetterà di far capire ai motori di ricerca (Google in testa) se un elemento è importante (perchè inserito all’interno del tag “article”) rispetto a un semplice footer.
Quindi una pagina che fino ad oggi scrivevamo così:

<div id=”wrapper”>
<div id=”nav”>
<ul>
<li>Home</li>
<li>Chi Siamo</li>
</ul>
</div>
<div id=”content”></div>
<div id=”footer”></div>
</div>

Diventa così:

<div id=”wrapper”>
<nav>
<ul>
<li>Home</li>
<li>Chi Siamo</li>
</ul>
</nav>
<article></article>
<footer></footer>
</div>

In questo modo sarà più facile per i motori di ricerca individuare se il contenuto ricercato da un utente è più o meno importante.

CSS: creare layout con altezza full page

In questo esempio vi mostrerò come creare una pagina HTML in cui l’altezza sia al 100% dello spazio disponibile nel browser.
Un footer posizionato a fondo pagina si adatterà conseguentemente.
Da qui potete scaricare l’esempio.

HTML 5: novità sulle form

>

Una delle novità di HTML 5 riguarda tutta una serie di possibilità che fino ad oggi vengono delegate a Javascript.
Pensiamo alla convalida del modulo (se i campi sono vuoti, l’utente non può proseguire), oppure inserire un placeholder nel campo (per indicare il valore da inserire) che scompaia appena l’utente ci clicca sopra.
Nell’esempio che andremo ora a scrivere vedremo come creare una form di soli 2 campi, obbligatori, con placeholder al suo interno:

<form action=”#” method=”get”>

<label for=”hobby”>Nome: </label>

<input type=”text” placeholder=”Qui il tuo nome” required >

<label for=”hobby”>Cognome: </label>

<input type=”text” placeholder=”Qui il tuo cognome” required >

<input type=”submit” value=”Invia”>

</form>

Se state visualizzando questa pagina con Google Chrome o Safari, potrete vedere l’effetto immediato qui di seguito:


  
    
  
    

Come noterete, se provate a cliccare sul pulsante “Invia”, verrete immediatamente rispediti sul box “Nome” (considerato come campo obbligatorio, cioè “required”).
NOTA: Essendo “required” un’attributo di tipo booleano (cioè che accetta solo valori “true” o “false”) non è necessario specificarlo e basta semplicemente aggiungerli tra gli attributi del tag “input”)

>HTML 5: gestire un file audio

>

Una delle novità di HTML 5 è la possibilità di gestire materiale audio e video senza l’ausilio di plugin di nessun genere. Ammesso sempre che il browser che visualizza tale pagina, supporti l’HTML 5.
In questo tutorial vedremo il nuovo tag “audio“.

Anzitutto cominciamo col dire che grosse differenze sintattiche macroscopiche non sono percepibili (ovviamente le differenze pratiche si sentono, .. eccome!) tra HTML 4.01 e HTML 5.

Quindi per inserire un file audio basterà semplicemente aggiungere (nel punto esatto della pagina) il seguente tag <audio>
Gli attributi necessari o utili da usarsi sono:
loop” se vogliamo far cominciare nuovamente il brano una volta terminato
src” per la sorgente del file audio (in formato mp3 preferibilmente)
controls” per permettere agli utenti di controllare il file (play, stop, pause)

Quindi se volessimo mettere un brano audio nel nostro sito potremmo scrivere:

<audio id=”myAudio” autoplay loop src=”Sampler.mp3″ controls=”controls”/>


Come noterete i valori booleani “autoplay” e “loop” vengono semplicemente inseriti, senza alcuna specifica del valore.

Da qui potete scaricare questo semplice esempio.

>HTML 5 con Dreamweaver CS5

>

Già da maggio scorso è disponibile l’estensione (gratuita) per Dreamweaver CS5 per poter creare pagine in HTML 5 e CSS3.
L’estensione prevede anche l’installazione del pannello “Multiscreen preview” in modo da poter visualizzare il documento che state creando per più tipi di supporti (mobile, desktop, ..) Per maggiori info: http://labs.adobe.com/technologies/html5pack/

Aggiornare le immagini con gli Smart Object di Dreamweaver CS4

Dreamweaver CS4 ha introdotto un nuovo strumento molto interessante: gli SmartObject.

Questo strumento permette di inserire direttamente nella pagina HTML un file PSD (file progetto di Photoshop di qualunque versione) e generare la relativa JPG (o PNG o GIF) che dovrà essere inserita effettivamente nella pagina.
Non solo. Qualora dovessimo effettuare delle modifche lo SmartObject presente nella pagina HTML notificherà il cambiamento dandoci la possibilità di aggiornare il file.

Creaiamo una nuova pagina HTML con Dreamweaver CS4.
Quindi dal menu “Inserisci”–>”Immagini”, scegliamo un PSD.

Il pannello successivo mi permetterà di decidere il formato e la qualità dell’immagine che andrò ad inserire all’interno del documento HTML.

Una volta impostate le caratteristiche e cliccato su OK per conferma, un’immagine del formato richiesto verrà posizionato all’interno della pagina HTML.

Provate ora modificare, da Photoshop, il PSD originale; anche con pochissimi cambiamenti.
Salvate il file PSD e tornate su Dreamweaver. Noterete che lo SmartObject presente nella pagina vi avviserà della necessità di aggiornare l’immagine.

Come noterete infatti una delle due freccie è diventata rossa.
Nel pannello proprietà cliccate ora su “Update From Original” (foto successiva) e la vostra immagine sarà automaticamente aggiornata.

Non dovremo quindi più perdere ulteriore tempo nell’esportazione di immagini ogni volta che dobbiamo aggiornare qualcosa…

Inserire l’icona nella barra degli indirizzi per il vostro sito

Si chiama “favicon” e serve ad inserire l’icona nella barra degli indirizzi del browser. Come quella mostrata in questo blog (la B arancione).

L’inserimento è semplice. La cosa da considerare con un pò più di attenzione è la caratteristica di questo file che deve essere così creata:
dimensioni: 16×16 pixel
nome: favicon.ico
profondità colore: 16 bit

Riguardo all’estensione non vi preoccupate. Potete tranquillamente creare una GIF con le caratteristiche precedenti quindi rinominarla con “favicon.ico”.

All’itnerno della pagina HTML invece inserite il seguente tag tra “<header>” e “</header>”

<link rel="shortcut icon"href="http://www.miosito.it/favicon.ico"/>

Creare pannelli a soffietto in Javascript con Dreamweaver CS3

Con l’ultima versione di Dreamweaver CS3, è possibile aggiungere simpatiche animazioni. Soprattutto queste animazioni permettono di creare siti in vero stile Web 2.0 senza l’ausilio diretto dei Widget Spry (molto utili in verità!)
Vediamo come fare, quindi!
Creiamo una nuova pagina HTML in Dremweaver CS3.
Tra il tag <body> e </body> aggiungiamo il seguente codice:

<div id=”animato”> Questo è un livello semplice!! testo_txt.text=”Lorem ipsum dolor Morbi nunc gravidcursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor amet, consectetuer adipiscing elit Lorem ipsum dolor Morbi nunc gravidcursus nec, luctus a, lorem. </div>

Ora, giusto un secondo livello, di seguito al codice precedente:

<div id=”secondLevel”>Apri/Chiudi</div>

Ora non resta che creare l’animazione! Assicuratevi di trovarvi sul cursore all’interno del codice dell’ultimo livello denominato “secondLevel“.

Dal menu “Finestra” clicchiamo su “Comportamenti“.
Dal pannello a destra che si aprirà clicchiamo sul simoblo “+” e scegliamo dal menu conseguente la voce “Effetti“.
Dal successivo menu scegliamo “Veneziane“.
Quindi popoliamo l’ultimo pannello che verrà visualizzato, impostando i valori come da immagine seguente.

Confermate con “OK“.

Vi verrà richiesto di salvare un file Javascript. Confermate con “OK”.

Prima di provare la pagina, assicuratevi che il tag del livello “secondLevel” sia stato modificato nella seguente maniera:

<div id=”secondLevel” onclick=”MM_effectBlind(‘animato’, 1000, ’100%’, ’0%’, true)”>Questo è altro livello</div>

Ora potete provare la pagina! Come vedrete la sezione verrà aperta o chiusa ogni volta che clicco sul menu “secondLevel”.
Come i pannelli a soffietto degli Spry Widget!