Cell. +39 3479684755

Il Blog di Instant Websites

Tag: XHTML

CORSO BASE DI WEB DESIGN E ADOBE DREAMWEAVER

INSTANT WEBSITES è lieta di proporre il proprio corso di Web Design e Adobe Dreamweaver di livello base.

Il corso si prefigge di insegnare le tecniche di realizzazione di un sito web conforme alle raccomandazioni internazionali, partendo dallo scenario operativo, proseguendo con l’esame delle competenze ed affrontando gli elementi fondamentali dell’XHTML (HTML e CSS).

E’ un corso “base” nel senso che è rivolto a chi affronta l’argomento per la prima volta, quindi non sono richieste conoscenze già consolidate. Tuttavia, una volta terminato il corso stesso, l’iscritto disporrà delle cognizioni tecniche necessarie allo sviluppo completo di un sito, fermi restando naturalmente i necessari approfondimenti e la necessità di svolgere un’adeguata pratica.

Le aree fondamentali del programma sono le seguenti:

  • Introduzione al Web Design
  • La struttura di un sito web
  • XHTML e CSS: Uso di Adobe Dreamweaver
  • Promozione e manutenzione del sito

E’ possibile scaricare il programma del corso in formato pdf.

Il corso si articola su 6 incontri da 4 ore ciascuno, per un totale di 24 ore.

La sede del corso è Milano (zona Jenner/Nigra); la data di inizio è MARTEDI’ 2 MARZO 2010 e l’orario delle lezioni è dalle ore 18 alle ore 22. La collocazione delle lezioni in orario tardo pomeridiano/serale è stata decisa per accogliere le numerose richieste in tale senso, da parte di persone interessate a partecipare al corso ma impossibilitate a frequentare in orari di lavoro.

Rammentiamo che previ accordi, questo corso può essere tenuto anche presso la sede della persona o organizzazione interessata; il programma è personalizzabile a richiesta.

Il costo del corso di gruppo è di Euro 600,00 +4% rivalsa INPS, senza applicazione dell’IVA.
Sono previste condizioni particolari per l’iscrizione cumulativa di gruppi di 2 o più persone.

Per maggiori dettagli ed informazioni, vi invitiamo a visitare la pagina Corsi del sito ed a contattarci senza impegno ai numeri telefonici 0200618547 (tariffa urbana da tutta Italia) o 3479684755, oppure tramite il modulo presente nella pagina Contatti del sito.

Inserire un filmato Flash al 100% con margini nella pagina

Ci siamo già occupati in un precedente articolo di questo blog di come inserire un filmato Flash in una pagina XHTML senza usare il tag embed, che impedisce la validazione rispetto a XHTML 1.0 Transitional, adottando lo script SWFObject.

Il vantaggio aggiuntivo di questa soluzione, oltre alla convalida della pagina, è che è possibile inserire un testo alternativo al filmato stesso: se l’utente non dispone del plugin Flash Player e/o ha Javascript disattivato, verrà visualizzato appunto questo contenuto. In questo modo a) è possibile avvertirlo della necessità di installare il plugin, b) si può inserire un testo riepilogativo dei contenuti di pagina a beneficio dei motori di ricerca.

Riepiloghiamo sinteticamente come procedere tramite il metodo di pubblicazione dinamica di SWFObject:

a) scarichiamo lo script dalla pagina http://code.google.com/p/swfobject/ e lo copiamo in una cartella del nostro sito, ad esempio /js;
b) creiamo nel nostro foglio di stile un box destinato a contenere il filmato Flash;
c) inseriamo il seguente codice nella sezione head della pagina:

<script type=“text/javascript” src=“js/swfobject.js”></script>
<script type=“text/javascript”>
    swfobject.embedSWF(“swf/filmato.swf”, “box”, “400″, “300″, “9.0.0″);
 </script>

dove “box” è il nome del div contenitore, 400×300 sono le dimensioni del filmato e del div #box e 9.0.0 è la versione minima di Flash Player richiesta per eseguire correttamente il filmato.
d) nella sezione body della pagina inseriremo il contenuto alternativo:

<body>
<div id=”box”>
<!– Qui il contenuto alternativo –>
<p>Per visualizzare correttamente questa pagina, dovete avere il plugin Flash Player versione 9 o successiva installato nel vostro PC</p>
<p>…</p>
</div>

Per inserire un filmato a tutta pagina, è sufficiente indicare “100%””100%” nell dimensioni, sia nel sopra riportato codice di SWFObject sia nelle proprietà del box contenitore.

Talvolta però possiamo avere bisogno di inserire il filmato al 100%, ottenendone cioè un ridimensionamento in funzione della viewport dell’utente, lasciando un margine nella pagina (ad esempio quando il filmato ha un bordo colorato e non si vuole che aderisca al confine della pagina).
Come procedere? Non è ovviamente sufficiente impostare un padding al selettore <body> perché l’interpretazione del box model da parte di tutti i browser più recenti farebbe sì che tale padding fosse aggiunto al 100% di dimensione del contenitore, estendendolo oltre lo spazio disponibile della pagina e provocando la comparsa delle barre di scorrimento.
Ragionando sempre in termini percentuali, procederemo così nel foglio di stile:

#box{
/* Contenitore per il filmato Flash. La sua pubblicazione avviene tramite SWFObject; le dimensioni del filmato sono impostate a 98% in altezza per consentire di inserire un margine superiore e quindi inferiore. Per fare questo, si applica il posizionamento relativo con un offset superiore dell’1% che, di fatto, centra verticalmente il contenitore poiche’ per differenza anche il margine inferiore sara’ pari all’1%. */
 height: 98%;
 width: 100%;
 position: relative; /* Permette di impostare l’offset superiore */
 top: 1%; /* (100% – 98%)/2 */
 overflow: hidden;
}

ed il codice relativo a SWFObject nella pagina XHTML diventerà analogamente:

<script type=”text/javascript” src=”js/swfobject.js”></script>
<script type=”text/javascript”>   
 swfobject.embedSWF(“swf/filmato.swf”, “box”, “98%”, “98%”, “9.0.0”);   
</script>

In questo modo, a qualsiasi risoluzione video dell’utente il filmato verrà ridimensionato a tutta pagina lasciando però dei margini sul lato corto dello schermo, cioè quello verticale.

REALIZZARE UN VERO SITO CROSS-BROWSER

Uno dei principali problemi che lo sviluppatore web si trova ad affrontare nella fase di realizzazione di un sito è sicuramente costituito dalla diversità di browser (programmi di navigazione su Internet) diffusi ed utilizzati.

Attualmente i browser più impiegati sono Internet Explorer, Mozilla Firefox (che è stato ufficialmente nominato successore di Netscape Navigator, oramai abbandonato), Google Chrome, Safari ed Opera; la questione è resa ancora più complicata dalle differenti versioni di questi software nel senso che ad esempio Internet Explorer – tutt’ora il più diffuso – si trova alla versione 8 ma le statistiche dicono che esiste ancora un elevato numero di utenti che impiegano la 7, la 6 e persino a 5.5. Questo problema è meno sentito per gli altri browser giacché è lecito supporre che gli utenti dei programmi alternativi siano più sensibili alle esigenze di aggiornamento, inoltre è proprio per I.E. che si pone il grave problema dei bachi che hanno via via caratterizzato i rilasci.

Già perché le qualità di I.E. 8, tanto vantate da Microsoft, altro non sono se non le correzioni dei bug di cui sono state affette le versioni 5.x e 6 (in gran misura!) ed anche la 7, nonostante le ottimistiche dichiarazioni dei tecnici del colosso di Redmond a proposito della loro eliminazione: chi scrive ha ad esempio constatato il ricorrere del Peek-a-boo bug anche sotto I.E. 7!

Non da oggi, quindi, allo sviluppatore si pone il problema di decidere come affrontare la questione dei bachi. Se da un lato è oggettivamente corretto tralasciare le problematiche connesse alle versioni più datate di browser (sarebbe assurdo preoccuparsi oggi di Netscape 4 o di I.E. 4.01), nel caso di un sito generalista e quindi posto all’attenzione di una platea quanto più possibile ampia di fruitori occorre realizzare un risultato che sia realmente cross-browser, per assicurare una corretta fruizione del sito stesso e dei suoi contenuti.

Il CORSO BASE DI WEB DESIGN & ADOBE DREAMWEAVER® proposto da INSTANT WEBSITES si occupa nella sua parte iniziale proprio di queste tematiche, definendo in maniera dettagliata lo scenario operativo nel quale si muove il web designer relativamente appunto ai vari browser e alle altre tematiche tecniche similari (velocità di connessione degli utenti, disponibilità dei plugin, Javascript e framework ecc.).

Inoltre, nella fase di studio dell’XHTML, vengono presi in considerazioni i suddetti bachi e le relative soluzioni, per evitare quando possibile il ricorrere del problema o quantomeno per correggerlo. Un sito di qualità è un sito conforme alle raccomandazioni internazionali del W3C e fruibile correttamente in tutte le sue parti: la realizzazione di un sito avente queste caratteristiche è appunto l’obiettivo del nostro corso.

Il prossimo Corso Base è in calendario a partire dal 26 gennaio 2010, fermo restando che possono essere organizzati corsi individuali previo accordo.
Del Corso Base si è occupato un recente articolo in questo blog, che vi invitiamo a leggere.

Per maggiori dettagli ed informazioni, vi invitiamo a visitare la pagina Corsi del sito ed a contattarci senza impegno ai numeri telefonici 0200618547 (tariffa urbana da tutta Italia) o 3479684755, oppure tramite il modulo presente nella pagina Contatti del sito.

Categorie
Archivi