HTML Idocente: Gabriele Ruscelli

dispense: www:gabrieleruscelli.comemail: gabriele_ruscelli@docenti.naba.it

Queste slideQueste slides fanno parte del corso “Web Design & HTML”.Il sito del corso, con il materiale completo, si trova in http://www.gabrieleruscelli.com . Data la rapida evoluzione della rete, il corso viene aggiornato ogni anno.

Il presente materiale è pubblicato con licenza Creative Commons “Attribuzione - Non commerciale - Condividi allo stesso modo – 3.0” (http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it ):

La licenza non si estende alle immagini provenienti da altre fonti e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono stati indicati.L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.

ProgrammaIntroduzione al web e al design

digitale

Esercizio finale

Esercitazione

Esercizio finale

Basi del linguaggio HTML

Introduzione ai fogli stili (CSS)

Il box model

Impaginazione di elementi con float e posizionamenti

Il testo e le immagini

La navigazione

Form

Gestione CSS avanzati

1

2

3

4

5

7

6

8

9

10

11

12

sitografia e bibliografiaBibliografia specifica: 1. CSS Guida Completa di Gianluca Trojani - editore Feltrinelli, nuova edizione copertina Blu 2. HTML and CSS web standard solutions by Christopher Murphy, Nicklas Persson - Editore: Friends of (an Apress Company) 3. HTML and CSS: Design and Build Websites di jon Duckett 4. Neuro Web Design di Susan M. Weinschenk - Editore: Apogeo; 5. Eyetracking web Usability. Siti che catturano lo sguardo di Jakob Nielsen e Kara Pernice - Amazon.it 6. HTML5 - the missing manual - by Mattew MacDonald - 2013 - Editore: O’Reilly 7. CSS3 - the missing Manual by David Sawyer McFarland - 2013 - Editore: O’Reilly 8. HTML5 il murkup e le api. di Gabriele Gigliotti, Gianluca Troiani - Editore Gabriele Gigliotti, Gianluca Troiani 9. Build you own website the right way by Ian Lloyd - third edition - Editor: SitePoint

Sitografica specifica: 1. http://www.italianalistapart.com 2. http://learn.shayhowe.com/advanced-html-css/ 3. http://www.zeldman.com 4. http://www.cssbeauty.com/gallery/ 5. http://www.webcreme.com/ 6. http://www.sitepoint.com/ 7. http://www.thefwa.com/ 8. http://www.awwwards.com/ 9. http://www.iwebdesigner.it/ 10. http://www.html5today.it/ 11. http://www.yourinspirationweb.com/ 12. http://onepagelove.com/

Bibliografia e sitografia generale: 1. JeffryZeldmanProgettareSitiWebStandard–tecnicheperildesignconXHTMLeCSS,EditoreParsonEducationItalia– disponibile da HOEPLI Milano in italiano e in inglese. 2. Jackob Nielsen, Designing Web Usability, New Riders Publishing, USA, 3. http://www.w3.org/ 4. http://www.w3.org/html/ 5. http://www.w3.org/Style/CSS/

introduzione al web e al

design digitale

introduzione

Web Design è un espressione utilizzata per definire la progettazione tecnica, strutturale e grafica di un sito web.

Progettazione per il world wide web. wikipedia

Nel mondo del web design nasce una “nuova” figura professionale:

il WEBDESIGNER

introduzione

il web designercosa fa?

Progetta & Realizza

Cosa deve avere/sapere?-creatività-grafica-logica

-conoscenza del www-conoscenza di usabilità e navigabilità

-saper lavorare in team

il web designerCompetenze:

Creativa/Logicacreatività, gusto estetico, capacità di progettazione, sintesi

Software & linguaggiphotoshop, illustrator, fireworks, flash, dreamweaver

HTML, CSS, Javascript

Progetta disegna interfaccie coda

altre figureDigital Designer

Digital Art directorUI Designer

Interaction DesignerUX Designer

Front-end Designer

WebDesigner

tantaprogettazione

tantagrafica

tantocodice

{{{{

http://www.skillprofiles.eu/

il web designerdifferenze:

GraphicDesigner ͢ WebDesigner

WebDeveloper ͢ WebDesigner

design design e navigazione

HTML, CSS, FlashPHP, ASP, XML, Java, Javascript

http://sixrevisions.com/infographics/web-designers-vs-web-deve-lopers-infographic/

?il web designer

Web Master

internet funzionamento

L’utente naviga o usa internet

utenteinternet

internet funzionamento

L’utente chiede e internet risponde

utenteinternet

internet funzionamento

Il computer chiede e il server risponde

computerserver

internet funzionamento

server

richiesta

ricerca/esecuzionerisposta

rendering

LATO CLIENT

LATO SERVER

computer

browser

Richiesta e risposta di un file nel web

file

internet funzionamento

file

windows

apple OS

linux800x600

1024x768

+1024x768

Crossbrowser Crossdevice

differenze

Web Designer

Utente

Web DeveloperFunzionamento legato

al Back-EndFunzionamento legato

al Front-End

differenze

Web Designer Graphic Designer

CMYKcartapantoniingombri e crocini di tagliocromalinemisure in cmfile pesanti terabytequante pagine hai detto che erano?

RGBschermo

palette rgbdiversi output

renderingminure in px

immagini leggerissime ma di alta qualitànooo, non dirmi che non si vede su iPhone?

Dalla grafica cartacea alla grafica digitale

Print DigitalBiglietti da visita

Brochures

Libri

Riviste

ADV stampa

ADV affissioni

Packaging

Stickers

nascita: 1455 con Gutenberg nascita: 1993 con Tim Berners-Lee

Spot

Viral

Siti web

Applicazioni smartphone e tablet

Applicazioni web

Evoluzione del mondo digital

Nascitadel www

1991 1993 1994 1996 20072005

wwwpubblico

con HTMLbasico

introduzioneCSS

Nokiaprimo cellulare

con connesione internet

PrimoiPhone

Nascitadel

Web 2.0

evoluzione a livello tecnico

Evoluzione del mondo digital

evoluzione a livello grafico

http://moodmoods.wordpress.com/tag/website/http://www.awwwards.com/

http://www.sketchin.ch/en/http://contentsmagazine.com/

http://www.thesearethings.com/http://www.designweekportland.com/

http://rallyinteractive.com/

Conclusione

La nostra fortunaL’informazione e i suoi mezzi cambiano, con essi cambiano anche la grafica,

la tecnologia e quindi la mediazione comunicativa.

La stampa diminuisce ogni giorno e la via dell’ informazione ormai è digitale.

I creativi si dovranno adattare a tecniche diverse da quelle canoninche, tuttavia dovranno essere sempre fedeli alla metodologia progettuale per la

creazione di idee innovative e fantastiche.

impostare PhotoshopImpostare le misure in px e colori web safe.

impostare Photoshopsettarecolor mode:RGB

proof setup:Internet Standard RGB (sRGB)

Salvare il workspace

impostare PhotoshopRicordarsi che

cmd + 1è la visuale al 100% ovvero la pagina vista nei browser,lavorate sempre con questavisualizzazione.

Settare

cmd + hper nascondere extras

Ordine in Web DesignCreare sempre una cartellina dove metterete il vostro lavoro.

Salvate ogni file: immagini audio video html psd etc.. etc.. con nomi sensati senza spazi e caratteri speciali.

caratteri ammessi

trattino_bassotrattino-medio