Per chi volesse incominciare a destreggirsi con il nuovo linguaggio e non avesse a disposizione il nuovo Dreamweaver CS5 (che ha un’ottima estensione per HTML5 e CSS3) può far da sè includendo manualmente la nuova libreria di tag con questa semplice procedura.

• Avviate Dreamweaver
• Andate su Modifica > Librerie di TAG…
• Premete il “+” in alto a sinistra della finestra di dialogo e sceliete “nuova libreria di TAG” e chiamatela come meglio preferite (TAG HTML5 va benissimo…)
• con la nuova libreria selezionata andate nuovamente sull’icona “+” e questa volta selezionate “nuovi tag”
• copiate e incollate la lista che vi riporto qui sotto:

article, aside, audio, canvas,  command, datagrid, datalist, details, dialog, figure, footer,
header, hgroup, mark, meter, nav, output, progress, rp, rt, ruby, section, source, time, video

• Se volete abilitare i suggerimenti anche per gli attributi è necessario selezionare ogni nuovo tag inserito e, andando sul “+”, scegliere nuovo attributo:

class, id, style, contenteditable, irrelevant, tabindex, contextmenu, lang, template, dir, ref, title,
draggable, registrationmark

Qui di seguito vi riporto gli stamp screen di riferimento:

Qui trovate l’articolo originale con la procedura appena indicata.

Per chi volesse approfondire i dettagli del linguaggio, oltre a diveintohtml5 , già consigliato in un post precedente, vi segnalo il libro di Pilgrim - HTML5: Up and Running edito da o’reilly.

Post Correlati:

1. HTML5 guide ed articoli di approfondimento L’HTML5 rappresenterà quasi sicuramente una grossa fetta del futuro del...
2. Sviluppare un layout in HTML5 da zero Oggi segnaliamo un interessante articolo di Smashing Magazine, “Coding A...
3. Dreamweaver CS4 – le novità principali Dreamweaver CS4 ha fatto il lifting, presentando un interfaccia...

Related posts brought to you by Yet Another Related Posts Plugin.

Secondo le statistiche di w3schools a gennaio del 2010 il 76% dei suoi utenti naviga con risoluzioni superiori alla canonica 1024×768 (il 20% in più dell’anno precedente)

Queste statistiche sono piuttosto simili a quelle del mio blog mentre riscontro ancora un’elevata diffusione del 1024×760 quando consulto le statistiche di siti che parlano e pubblicizzano contenuti a minor impatto tecnologico.

Partendo da queste informazioni è possibile fare alcune semplici considerazioni:

• la risoluzione 800×600 è caduta definitivamente in disuso: non sono più in commercio schermi con questa risoluzione e anche la maggior parte dei netbook/tablet utilizzano risoluzioni vicine a 1024×768/1024×600).
• la risoluzione 1024×760 può considerarsi ormai il minimo comune denominatore: è la risoluzione più diffusa, in particolare fra i sistemi relativamente datati e sui dispositivi come netbook e tablet. In questi ultimi casi è da considerare la possibilità di avere 160px in meno in verticale.
• la risoluzione 1280×1024 è il minimo comun denominatore del segmento superiore: consultando le statistiche degli ultimi 6 mesi del mio blog, su un campione di 14.000 visite circa il 34% degli utenti usa una risoluzione di 1280×1024 (e 1280×800), il 12% 1440×900 e l’11% 1680×1050. L’8% usa 1920×1200 (anche 1920×1080) mentre il 1024×760 non raggiunge il 13% e sommandolo alle risoluzioni inferiori arriva al si e no al 15%. Da questi dati (che ovviamente non sono rappresentativi e non lo vogliono essere) è lecito pensare che siti web e blog di natura tecnica/tecnologica beneficiano di un utenza con schermi più grandi e sarebbe lecito offrire loro un esperienza migliore.

Detto questo personalmente progetto ancora tenendo come riferimento una risoluzione ottimale di 1024×760, il che principalmente è dovuto alla tipologia di clienti con cui lavoro. Sarebbe comunque interessante progettare layout che forniscano esperienze migliori su schermi più grandi (il ottica enanched css, a riguardo consiglio il sempre ottimo Oltre i CSS di Andy clark).

Quindi in che modo possiamo progettare tenendo a mente le risoluzioni elevate?

Layout centrato a larghezza fissa

Questo layout è forse il più diffuso. In questo caso il contenitore principale è centrato utilizzando in margini automatici ( #container {margin:0 auto;} ) la larghezza di #container non deve essere superiore a 960px in modo da essere visualizzata correttamente a 1024×768, oppure non superiore a 1200px se si intende ottimizzare per schermi a risoluzione di 1280×1024. Per rendere il layout interessante a risoluzioni superiori conviene utilizzare una texture che ci aiuti incorniciare efficacemente il nostro layout. A riguardo vi consiglio l’ottimo articolo di webdesigner wall (How to: CSS Large Background da cui riproponiamo l’immagine qui sotto)

Layout fluido con larghezza massima e minima impostati

Un secondo approccio consiste nel adottare un layout fluido con dimensione impostata in percentuale che abbia una dimensione minima di 960px (o inferiore) e massima di 1200px (o superiore).

Ad esempio scriveremo: #container {width:90%; min-width:960px; max-width:1200px;}

Questa scelta ha indubbiamente diversi ovvi vantaggi  in termini di flessibilità.

Tuttavia non tutti i layout si prestano ad essere gestiti con una larghezza variabile, soprattutto quando si ha l’esigenza di avere un controllo preciso sulla posizione degli elementi.

In questo caso ad esempio la colonna centrale della sezione superiore aumenterà di altezza sino a trasbordare al di sotto di 1024px mentre la posizione del logo in alto a sinistra andrà a posizionarsi attaccato al margine sinistro.

Layout allineato a sinistra con larghezza fluida (ma anche no…)

Una terza alternativa (perente stretta della precedente) consiste nell’adottare un impaginazione allineata a sinistra con il contenitore di dimensioni impostate in percentuale e una dimensione minima e massima impostate sulle risoluzioni precedentemente elencate.

Il background anche in questo caso ci aiuterà a creare un illusione di continuità che confeirà al layout maggior respiro all’aumentare dello spazio disponibile [vedi in questo articolo un esempio].

Oppure è possibile affidare totalmente alla texture di sfondo il compito di sfruttare lo spazio in eccesso, in alcuni casi [Zen City Morning - Pseudo Sahara - DECO] l’effetto ottenuto è di grande impatto!

Per chi volesse approfondire i risvolti pratici di progettare avendo in mente schermi di grandi dimensioni vi consiglio la lettura di questo articolo di M. Griffin che affronta il problema proponendo “3 layout che gestiscono la risoluzione dello schermo con dignità” .

Un breve ma interessante articolo: Web Design Trend Hunting – Fluid Grid Layout: 10+ Outstanding Examples & 1 Tutorial

Vi segnalo inoltre alcune risorse utili alla realizzazione di layout liquidi:

• Css Liquid – una piccola raccolta di layout liquidi
• CSS Drive [sezione layout liquidi] – idem come sopra
• Css layout-packs – una selezione di layout base già pronti
• Un framework CSS – per creare layout basati su griglie fluide
• Fluid960gs – una versione modificata di 960gs che permette la creazioen di layout fluidi grid based
• Fluid Grids – un ottimo articolo su A List Apart

Ovviamente in questo articolo non si è parlato dell’altra parte del cielo: MID, tablet e netbook… ne parleremo la prossima volta

Post Correlati:

1. Sviluppare un layout in HTML5 da zero Oggi segnaliamo un interessante articolo di Smashing Magazine, “Coding A...
2. 40 layout originali a cui ispirarsi Onestamente non mi capacito dove trovino il tempo per compilare...
3. Sizer – testa i layout su più risoluzioni Sizer è il un programmino freeware semplice ed utile...

Related posts brought to you by Yet Another Related Posts Plugin.

Logotipi

I criteri che caratterizzano un logotipo professionale sono:

1. il disegno deve riflettere la natura essenziale dell’organizzazione
2. il logo deve essere compatto e originale
3. deve poter funzionare sia con uno che con più colori e a differenti formati (dai cartelloni ai biglietti da visita)

Considerando la natura del logo è meglio inizare il progetto da un logo in bianco e nero; questo approccio vi obbligherà a badare all’essenziale. E’ possibile giocare con le tonalità di grigi per ottenere effetti interessanti. Una volta ottenuto un logo in B/N soddisfacente potete sempre passare alla creazione delle varianti a colori.

La scelta del font sarà determinata dall’impronta che si desidera conferire al progetto; una volta scelto dovete iniziare col considerare gli accostamenti fra le lettere. La tecnica migliore consiste nel comporre il logotipo nel carattere selezionato e successivamente intervenire sulla crenatura in modo da creare il giusto equilibrio fra le combinazioni di lettere. Spesso per ottenere risultati interessanti è necessario ritoccare alcune lettere: evitate però di eccedere altrimenti correte il rischio di rendere poco leggibile il logotipo o di alterarne l’equilibrio.

Collocate le lettere all’interno di forme semplici come un quadrato, un cerchio o un triangolo. Lavorate con lettere nere su fondo bianco. Provate ad invertire la composizione (o perte di essa) in negativo o cercate di eliminare parte di essa e valutate l’effetto ottenuto.

Immagine coordinata

Dopo aver progettato il logo dovete applicarlo all’immagine coordinata (carta intestata, biglietto di accompagnamento, biglietto da visita e web). Solitamente si comincia con la carta intestata e da quella si determina di conseguenza lo stile degli altri elementi.

La carta intestata utilizza formati standard (solitamente deve essere inserita in una busta, quindi è utile suddividerla in tre parti). La parte superiore dovrà contenere il logo, il nome, l’indirizzo dell’azienda e l’indirizzo del destinatario: questi elementi devono essere equilibrati fra loro. Una buona soluzione è che il destinatario rimanga sempre sulla sinistra o sulla destra (nei casi di buste con finestra). Il logo dovrebbe essere posizionato in modo che si armonizzi con l’area dell’indirizzo.

Se la carta intestata deve contenere informazioni aggiuntive di norma queste vanno nel piè di pagina o a un lato della lettera, inotre è bene ricordare di lasciare lo spazio per la bucatura della lettera ai fini dell’archiviazione.

Alcune considerazione per il logotipo sul web

• Il logo ottimizzato per il sito aziendale dovrebbe adattarsi ad essere impiegato come favicon, logo di testata e footer. Quindi è necessario poter ottenere versioni soddisfacenti del logo a dimensioni molto diverse.
• Se composto da più elementi si potrebbe valutarne una versione animata in flash (o una semi animazione in gif)
• I colori scelti per il logo condizioneranno per forza di cose anche i principali colori utilizzati nel sito. Se avete controlo su questo aspetto concordatelo con il cliente tenendo in mente il potenziale layout che adotterete per il sito web.
• Se di semplice fattura si potrebbe valutare l’opportunità di creare un pattern molto leggero da utilizzare come sfondo o parte di esso.

Approfondire l’argomento:

• Le 8 regole per disegnare un logo perfetto secondo Geekissimo [ITA]
• Design Logotipo: le 10 tendenze del 2008 [ENG]
• Anatomia di un logotipo [SPA]
• Tutorial: disegnare un logo Step by Step tutorial ricco di illustrazioni e completo [ENG]
• Designing The Qlicks Logo [ENG]
• logo design history
• il design di 20 loghi famosi [ENG]
• 45 regole per creare un grande logo [ENG]
• Realizzare il logo di wordpress [ENG]
• Il redesign di 10 loghi di successo [ENG]
• 50 loghi a cui ispirarsi [ENG]
• logo from dreams awards [ENG]
• L’analisi di 30 loghi vettoriali [ENG]
• Cosa rende grande un logo [ENG]
• Perchè il design di un logo non costa 5 dollari: veramente bello [ENG]

Post Correlati:

1. mappa immagine con i CSS Niente di sconvolgente ma comunque utile. Questo tutorial spiega come...
2. Progettazione web e fruibilità – prima parte Fruire i contenuti su più dispositivi Il concetto di fruibilità...
3. webdesign – 6 libri per la progettazione web Con il natale alle porte, ho rispolverato una vecchia lista...

Related posts brought to you by Yet Another Related Posts Plugin.

Chi di voi può realmente dire di avere sotto controllo tutti gli aspetti dei progetti su cui lavorate?

Personalmente non mi è mai capitato di partecipare alla realizzazione di un progetto dall’andamento “lineare” (neppure quando io sono l’unico a lavorarci ). Tornato fresco fresco dalle vacanze ho deciso di mettere in pratica alcuni piccoli accorgimenti che dovrebbero aiutarmi(ci) ad avere maggior controllo delle proprie ed altrui risorse, ridurre lo stress e aumentare il tempo libero!

1. Munitevi di un buon programma di time traking e abituatevi ad usarlo: lo sappiamo tutti, davanti al computer il tempo letteralmente vola e spesso capita di arrivare alla fine della giornata senza avere la percezione del tempo effettivamente speso su di un progetto ( o su di una particolare fase). Dopo averne provato un paio vi consiglio time traker v2 un tool online minimale che vi permetterà di tenere traccia del tempo impiegato in ogni singolo task.
   Personalmente vi consiglio di affiancare a questo tool un foglio di calcolo standardizzato (uguale per tutti i progetti) che riporti non solo i task ma anche una stima del tempo che pensate di impiegare.
2. Effettuate una pianificazione di progetto efficiente e operativa: create un report dettagliato delle fasi che contenga tutto quello che vi serve per procedere speditamente. Anche in questo caso avere un documento standardizzato vi aiuterà a procedere speditamente. Questo documento dovrebbe contenere materiale come l’alberatura, le specifiche e le note di implementazione, i punti critici e le possibili soluzioni da verificare ecc. Se il sito prevede forme di interazione particolari è utile includere nel progetto anche dei greybox con note sull’implementazione di queste ultime.
   La progettazione dovrebbe inoltre contenere una scaletta con delle stime sui tempi. Tali stime dovrebbero basarsi via via su uno storico sempre più accurato.
3. Standardizzate i vostri progetti: creare un modello di progetto il più possibile standard vi aiuta a procedere velocemente e senza intoppi. Personalmente ho sempre le medesime cartelle (doc, project, mat e work). Dentro alle cartelle conservate dei modelli pronti aiuta a seguire gli step in maniera più efficiente: ad esempio tenete un foglio ore dentro la cartella project, un documento preformattato per lo scheda di alberatura ecc.
4. Pianificate backup periodici: decidere una politica di razionale di backup che vi metta a riparo da perdite dati catastrofiche è sempre un ottima cosa. Personalmente utilizzo Synk Back che permette di pianificare backup periodici o sincronizzazioni di intere cartelle. Esiste anche la versione stand alone (molto utile nel caso decidiate di dedicare un HD rimovibile al backup del file (meglio se RAID… a tale proposito stavo valutando questo prodottino di lacie)

Post Correlati:

1. SynBack sincronizzazione e backup cartelle Di SyncBack ne avevamo già parlato ma in questi giorni...
2. CSS – 16 consigli da non dimenticare + tanti auguri ;) applica un id al body ridurrai il numero di...
3. Webdesign: 5 consigli per superare il foglio bianco Sviluppare un nuovo layout è sempre un attività impegantiva....

Related posts brought to you by Yet Another Related Posts Plugin.

• sono da preferire url descrittivi eben formattati rispetto a quelli con variabili dinamiche: perfettamente daccordo anche se mi riesce difficile pensare che l’utente medio si faccia un idea del contenuto della pagina guardando l’url…
• gli url dovrebbero contenere key significative: anche qui ci sarebbe da obiettare sull’effettiva utilita per l’utente finale. Non esistegià il title e la description (nel caso selle SERP) e l’anchor text nel caso si link diretti alla pagina? Se un utente si riduce a dedurre il contenuto di una pagina dal suo url secondo me siamo messi proprio male…
• evitare gli url duplicati, eventualmente filtrarli con il robot.txt: indubbiamente vero, anche se, dal punto di vista dell’utente il fatto di raggiungere l’informazione attraverso una Tag Cloud o un menu orizzontale non causerà sicuramente un disagio.
• nella formattazione degli url i trattini servono a separare le parole: su questo se ne sono sentite di cotte e di crude. Questa pratica a mio parere rientra in quelle che rasentano la superstizione…

Non vorrei essere frainteso: i contenuti dell’articolo sono sicuramente condivisibili ma per motivi diversi. Credo ci siano ben altre cose da fare per costruire un web che abbia al centro l’utente e le sue necessità…

Nessun post correlato.