GWT vs CSS3

  • View
    393

  • Download
    1

Embed Size (px)

Transcript

GWT versus CSS3Luca Tozzil.tozzi@hr2o.itit.linkedin.com/in/ltozzi/

Tozzi Luca Software Engineer

Consulente/sviluppatore a livello Enterprise, fermo credente dellimportanza dinnovare i processi di sviluppo nelle aziende.

Amante delle tecnologie Google, con particolare attenzione a :

GWT

Android

AngularJS

(in ordine cronologico di innamoramento!!)

Da un anno alle prese di un'avventura imprenditoriale, alla ricerca di dimostrare il suddetto assunto.

Fermo partecipante a tutti gli eventi del GDG Firenze

Presentazionepersonale

Presentazioneaziendale una start-up nata dalla pluriennale esperienza nel settore HR (anche detto Risorse Umane)che si sposa con la continua ricerca delle migliori tecnologie disponibili nel settore informatico per semplificarne lutilizzo.

Esempio : gestione Ticketing (Timbrature) tramite SmartPhone/Tablet

Mai sazi di ricerca e sviluppo ..mescoliamo Cloud e Mobile ..HTML5 e nativo...alla ricerca di software equilibrato e SEMPLICE...... meglio se anche economico!!

Rimettiamo la nostra ricerca ai nostri clienti non solo in ambito sviluppo software, ma anche consulenziale.

GWT versus CSS3

La prima impressione che spesso si ha aprocciando al GWT base che i Widget abbiano bisogno di essere graficamente aggiornati.

Listinto di mettere mano ai fogli di stile forniti forte.

Questo spesso contrario allapproccio dello sviluppatore GWT che tipicamente ha scelto il compilatore GWT in quanto lo astrae da una serie di problematiche : esempio cross-browser.

Purtroppo per il successo di un buon applicativo passa anche attraverso alla sua semplicit di utilizzo e quindi attraverso la sua User Interface.

Possiamo e sino a che punto svecchiare i ns. widget grazie ai CSS?

Presentazionetalk

CSS (definizione da Wikipedia )

L'introduzione del CSS si resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione pi chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti, garantendo contemporaneamente anche il riuso di codice ed una sua pi facile manutenibilit.

CSS3Ossia la specifica 3 dello standard continua a perseguire gli scopi del css rendendolo ancora pi veloce e pi efficiente nel website designing.

Dando la possibilit di generare semplici UI con minor conoscenza ed allo stesso tempopossibilit di migliorare le interfaccie pi elaborate.CSS3

Novit principale la MODULARIZZAZIONE :

sia a livello di oggettisia a livello di standard

QUINDI NON ASPETTATEVI

un unica specifica W3C

PERCHE NON ESISTE

p.s. Css4 sar il passaggio al 4livello di ogni singolo modulo.

CSS3

ModuleSpecification titleStatus, datecss3-backgroundCSS Backgrounds and Borders Module Level 3 Candidate Recommendation, September 2014css3-boxCSS basic box modelWorking Draft, August 2007css-cascade-3CSS Cascading and Inheritance Level 3 Candidate Recommendation, October 2013css3-colorCSS Color Module Level 3Recommendation, June 2011css3-contentCSS3 Generated and Replaced Content Module Working Draft, May 2003css-fonts-3CSS Fonts Module Level 3Candidate Recommendation, October 2013css3-gcpmCSS Generated Content for Paged Media ModuleWorking Draft, May 2014css3-layoutCSS Template Layout ModuleWorking Draft, November 2011css3-marqueeCSS Marquee Module Level 3Candidate Recommendation, December 2008css3-mediaqueries Media QueriesRecommendation, June 2012css3-pageCSS Paged Media Module Level 3Working Draft, March 2013css3-selectorsSelectors Level 3Recommendation, September 2011css3-uiCSS Basic User Interface Module Level 3 (CSS3 UI) Working Draft, January 2012Novit CSS3

Colore (RGBa)da #ffffff a rgba(255,255,255,1);

@font-face la possibilit di usare caratteri tipografici non presenti sul computer dellutente@font-face { font-family: Roboto Bold Condensed; src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf); }font-family:Roboto Bold Condensed;

Ombreggiatura sul testotext-shadow: 2px 2px 2px #ddccb5;

Bordi e sfondi (Border-radius, Box-shadow)/* border-radius */ border-radius: 20px; /* box-shadow */ box-shadow: rgba(0,0,0,0.8) 0 0 10px;

CSS3

Media QueriesLa possibilit di servire fogli di stile ad hoc in base alle caratteristiche dei dispositivi RESPONSIVE!!!@media screen and (min-width: 600px) and (max-width: 900px) { background: #FFF;}

Transizioni, trasformazioni, animazioni div { -webkit-transition-property: width; /* Safari */ transition-property: width;}

Transform: (scale, rotate, skew)div { -ms-transform: rotate(7deg); /* IE 9 */ -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ transform: rotate(7deg);}

Funzioni che aumentano performance applicative e riescono spesso a sostituire alla grande jQuery per animazioni, rotazioni, ecc.

Preffissi Vendor CSS3

Prefissi Vendor-moz- : Firefox-webkit- : Webkit browsers such as Safari and Chrome-o- : Opera-ms- : Internet Explorer

CSS3

I Pre-processori, estendono il linguaggio CSS

aggiungono features che permettano di generare un CSS pulito..tramite un linguaggio di programmazione al posto di regole statiche.

I pre-processori pi famosi sono Less e Sass.

Less nasce ispirandosi a Sass.

Less fornisce i seguenti meccanismi : variabili,operatorifunzioniciclimixins

Twitter Bootstrap costruito in Less!!

Pre-Processori CSS3

Tra i pre-processori uno sviluppato da Google in linguaggio java.

Closure Stylesheet

E disponibile il jar closure-stylesheets.jar per utilizzare il compilatore a riga di comando :

legge GSS e compila CSSottima compatibilit con il CSS3aggiunge variabili.. funzioni... condizioni e mixing supporto anche la minification, il Linting, RTL flipping ed il renaming

Nato nel 2011 internamente a Google Closure Stylesheets sono normalmente chiamati "Google Stylesheets"da cui lacronimo "GSS,"

I seguenti esempi sono stati generati tramite lopzione --pretty-print

Closure Style Sheet

Le variabili possono essere definiti tramite listruzione @def seguito dal nome variabile e poi il valore.

Le variabili possono essere definite anche in termini di altre variabili.

@def BG_COLOR rgb(235, 239, 249);@def DIALOG_BORDER_COLOR rgb(107, 144, 218);@def DIALOG_BG_COLOR BG_COLOR;

body { background-color: BG_COLOR;}

.dialog { background-color: DIALOG_BG_COLOR; border: 1px solid DIALOG_BORDER_COLOR;}

Variabili

Una volta compilato in ---pretty-print mode diventa :

body { background-color: #ebeff9;}.dialog { background-color: #ebeff9; border: 1px solid #6b90da;}

Variabili

Closure Stylesheets fornisce le seguenti funzioni aritmetiche :

add()sub()mult()divide()min()max()

Attenzione :i parametri possono essere puri numerici o unit di dimensione in formato CSS (Es: 180px)solo moltiplicazione e divisione possono avere le unit CSS come primo parametroil numero dei parametri libero i parametri in forma di unit di misura Css devono essere tutti nella stessa forma(Esempio ok per add(3px, 5px) ma errore in caso di add(3px, 5ex)

Funzioni

SOURCE

@def LEFT_HAND_NAV_WIDTH 180px;@def LEFT_HAND_NAV_PADDING 3px;

.left_hand_nav { position: absolute; width: LEFT_HAND_NAV_WIDTH; padding: LEFT_HAND_NAV_PADDING;}

.content { position: absolute; margin-left: add(LEFT_HAND_NAV_PADDING, /* padding left */ LEFT_HAND_NAV_WIDTH, LEFT_HAND_NAV_PADDING); /* padding right */}

Funzioni

RISULTATO

.left_hand_nav { position: absolute; width: 180px; padding: 3px;}.content { position: absolute; margin-left: 186px;}

Funzioni

Inoltre vi sono una serie di funzioni fisse inerenti lelaborazione dei colori

blendColorsHsb(startColor, endColor)blendColorsRgb(startColor, endColor)makeMutedColor(backgroundColor, foregroundColor [, saturationLoss])addHsbToCssColor(baseColor, hueToAdd, saturationToAdd, brightnessToAdd)makeContrastingColor(color, similarityIndex)adjustBrightness(color, brightness)

Oltre alla funzione selectFrom() che funziona come una condizione/* Implies MYDEF = FOO ? BAR : BAZ; */@def MYDEF selectFrom(FOO, BAR, BAZ);

con risultato

@def FOO true; ha come effetto @def MYDEF = BAR

Funzioni Fisse

E possibile personalizzare delle funzioni GSS implementando linterfaccia GssFunctionMapProvider e passare la classe generata al compilatore tramite lopzione --gss-function-map-provider com.example.class

public interface GssFunctionMapProvider { /** * Gets the map of custom GSS functions for the given class. * * @param the interface implemented by the GSS functions * @param gssFunctionClass the class of {@code F} * @return a map from each custom function name to its implementation */ Map get(Class gssFunctionClass);}

Oppure utilizzare la classe DefaultGssFunctionMapProvider in modo di fornire le funzioni personalizzatein aggiunta a quelle standard.

Funzioni Personalizzate

Il compilatore permette di utilizzare delle condizioni tramite luso di @if, @else ed @elseif.

@if (BROWSER_IE) {@if (BROWSER_IE6) { @def GOOG_INLINE_BLOCK_DISPLAY inline;} @elseif (BROWSER_IE7) { @def GOOG_INLINE_BLOCK_DISPLAY inline; } @else { @def GOOG_INLINE_BLOCK_DISPLAY inline-block; }} @elseif (BROWSER_FF2) {@def GOOG_INLINE_BLOCK_DISPLAY-moz-inline-box;} @else {@def GOOG_INLINE_BLOCK_DISPLAY -inline-block;}

.goog-inline-block { position: relative; display: GOOG_INLINE_BLOCK_DISPLAY;}

I valori condizionali inerenti al browser dovranno essere passati tramite il flag --define