Area sviluppo Tesene

Anche per questo post devo ringraziare il collega che mi ha posto il problema.

Il problema di fondo è che normalmente se si prova a fare un menu orizzontale con i dropdown in CSS, e sotto c'è un filmato flash, va a finire che il menu rimane non visibile sotto al filmato.

Per risolvere questo problema molto fastidioso, c'è un solo metodo: aggiungere il parametro wmode ed impostare il suo valore a transparent nel codice di inclusione del filmato Flash.

<param name="wmode" value="transparent" />

Quindi il flash va messo dentro un div in modo che si possa definirne la posizione, ma questo è abbastanza ovvio, ed assegnargli uno z-index pari a zero. Ad esempio:

<div id="header">
<div id="flash">il filmato flash va qui</div>
</div> 

#flash {
    width: 700px;
    height: 300px;
    position: absolute;
    z-index: 0;
}

#header {
    height: 300px;
    margin-bottom: 30px;
    text-align: left;
}

Quindi si definiscono gli elementi che vanno visualizzati sopra all'animazione Flash e gli si assegna z-index pari a 1.

Preferire <link> rispetto @import

E' meglio che i riferimenti ai fogli di stile CSS siano all'inizio della pagina, in modo da permettere un rendering progressivo.

In IE @import si comporta come se fosse un <link> alla fine della pagina, per cui è meglio non usare @import.

Così Google ha definito il suo ultimo servizio Google Doctype.

In particolare, con questo termine si riferisce agli standard aperti (open standards): HTML, Javascript, CSS e altri su cu il web si basa.

Il principio di base è che ci sono milioni di utenti che possono accedere al web con browsers sia open source che proprietari, spesso scarsamente compatibili tra loro.

Google ha basato il suo business su questo e vuole fornire il suo contributo perché altri sviluppatori possano costruire nuovi contenuti.

In particolare Google raccoglie delle mappe di compatibilità aggiornate dei vari browsers e anche vari suggerimenti riguardanti la sicurezza o l'uso di javascript per effettuare operazioni più o meno semplici. I browser supportati sono i principali: Internet Explorer (IE 6, IE 7, IE 8), Firefox (FF 2, FF 3), Safari.

Inoltre, in alcune sezioni, come ad esempio quella riguardante i CSS, ci sono i link alle pagine corrispondenti del w3c, Mozilla developer center, MSDN, blooberry.com, sitepoint.

L'indirizzo a cui si trova quest'enciclopedia rientra sotto Google Code ed è: 

http://code.google.com/p/doctype/

Questo post è stato suggerito da un collaboratore di Tesene.

In sostanza, il suggerimento del giorno riguarda come disattivare il completamento automatico quando si compilano i campi di un form.

Si può voler disattivare questo completamento per vari motivi, come ad esempio il fatto che si voglia collegare un completamento automatico intelligenta fatto in Ajax ad un form esistente, oppure perché i dati contenuti in quel campo possono essere riservati.

Il metodo non è al momento uno standard del w3c, però è contenuto nella bozza per l'HTML 5, in particolare per quanto riguarda i Web Forms 2.0.

Questo è l'uso dell'attributo autocomplete, che si può applicare agli elementi input di un form e di default è impostato su on.

Se si vuole eliminare l'autocompletamento, si può settare l'attributo autocomplete ad off.  Ad esempio:

<p>Account: <input type="text" name="ac" autocomplete="off" /></p>

Questo attributo, sebbene non ancora incluso negli standard W3C è stato richiesto da molte banche. Per questo motivo tutti i principali browsers già la supportano da svariati anni, per cui se si utilizza, si ha la ragionevole certezza che funzioni sia su Internet Explorer che su Firefox.

(more…)

Dirk Jesse ha fatto un nuovo strumento per fare layout flessibili con qualsiasi numero di colonne con i fogli di stile. 

Il layout builder si trova all'indirizzo: http://builder.yaml.de/ 

In pratica, si costruisce con un wizard fatto in javascript che sfrutta il Drag and Drop, il layout che si desidera ottenere, quindi una volta fatto si clicca su "Get the code" e si ottengono 

• il file HTML col DocType desiderato;
• il foglio di stile
• il foglio di stile con gli hacks per IE fino alla versione 5.5

Un elemento particolarmente carino di questo strumento è la possibilità di definire con precisione le dimensioni minime e massime del layout e come questo si deve comportare quando si ridimensiona la finestra del browser, oltre all'ordine con cui devono essere scritte le colonne per essere lette dai non vedenti con screen reader.

Il codice che si ottiene poi è estremamente pulito e facilmente comprensibile per chiunque, in particolare se si vogliono fare layout su due colonne o layout su tre colonne.

Da ora, chiunque potrà aggiungere le Google Maps ai propri siti o blog semplicemente copiando ed incollando un codice HTML messo a disposizione sulla pagina della Google Map, in modo analogo a quanto avviene per i video di YouTube.

In pratica non ci sarà più bisogno di registrarsi per ottenere la Google API key e neppure di conoscere Javascript.

Ora sarà sufficiente visualizzare la mappa che si vuole pubblicare, quindi cliccare su "Collegamento a questa pagina" e copiare e incollare l'HTML sul sito o blog su cui si vuole mettere.

Questa operazione si può fare per una mappa, la ricerca di un'attività commerciale o una indicazione stradale e la mappa risultante sarà completamente interattiva, come l'originale.

Alcuni possibili utilizzi sono i seguenti:

• i proprietari di attività commerciali potranno segnalare la propria attività semplicemente, con tanto di indicazioni per arrivarci
• i bloggers possono scrivere di posti in cui sono stati ed includere una mappa del posto descritto
• chiunque può aggiornare il proprio sito personale pubblicando mappe geotaggate di dove hanno fatto le foto o anche fare mashups utilizzando gli strumenti messi a disposizione da Google.

Contrariamente al solito, questa nuova funzionalità è a disposizione degli utenti di praticamente tutto il mondo e non solo quelli che si collegano dagli USA.

Grandi aziende come Google hanno migliaia di programmatori per poter curare nei minimi dettagli le interfacce delle loro applicazioni Web, anche sfruttando degli hacks degli standard e dei browser, per ottenere alla fine un risultato che massimizzi l'usabilità per l'utente.

Nel caso specifico, vediamo un layout a tabella, in cui il contenuto di una colonna vada in overflow in modo controllato senza incasinarsi quando si ridimensiona il browser.

Questo è quello che succede nelle colonne subject di GMail.

Il trucco sta tutto nell'usare un table-layout fixed nella definizione del CSS per la tabella nel suo insieme, quindi specificare solo la larghezza delle colonne che non devono avere l'overflow nascosto e mettere l'overflow: hidden nel css relativo alle celle.

.grid { table-layout: fixed;}

.grid * td {   empty-cells: show;   overflow: hidden;   width: 100%;}

Grazie a opencomponentry per la segnalazione

In questa ultima parte ci occuperemo della gestione dei moduli e dell'inserimento di script.

MODULI

FORM
            Modulo interattivo.

            Attributi:
action = uri. Questo attributo specifica un programma di elaborazione del modulo. Il comportamento dei programmi utente per un valore diverso da un URI HTTP è indefinito

method = get | post. Questo attributo specifica quale metodo HTTP sarà usato per inoltrare l'insieme dei dati del modulo. I valori ammessi (maiuscolo-indifferenti) sono "get" (il predefinito) e "post"

enctype = content-type. Questo attributo specifica il tipo di contenuto usato per inoltrare il modulo al server (quando il valore di method è "post"). Il valore predefinito per questo attributo è "application/x-www-form-urlencoded". Il valore "multipart/form-data" dovrebbe essere usato in combinazione con l'elemento INPUT, type="file"

(more…)

In questa parte vedremo quali sono i tag HTML per la gestione dei frame 

FRAMESET

            Suddivisione della finestra.

            Attributi:

rows = multi-length-list. Specifica l’organizzazione dei frame orizzontali. È un elenco separato da virgole di pixel, percentuali e lunghezze relative. Il valore predefinito è 100% e significa una riga

cols = multi-length-list. Specifica l’organizzazione dei frame verticali. È un elenco separato da virgole di pixel, percentuali e lunghezze relative. Il valore predefinito è 100% e significa una colonna.

(more…)

Jack Herrington ha scritto il suo secondo articolo nella sua serie su Gears.

L'articolo è interessante perché entra nel dettaglio di come creare un'applicazione con inserimento dei dati tramite form, che lavori anche off-line.

Questo significa che gli inserimenti vengono memorizzati, in modo che quando l'utente si riconnette, ci sia la sincronizzazione dei dati inseriti.

I dati vengono inviati usando Prototype e Ajax.Updater.