html i - gabrieleruscelli.com · 7. css3 - the missing ... 8. html5 il murkup e le api. di gabriele...
Post on 15-Feb-2019
225 Views
Preview:
TRANSCRIPT
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
top related