Perché odio i temi di WordPress

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

di MATTEO CAVUCCI

lunedì 11 febbraio 13

È bello lavorare con Wordpress

Perché è...

• Intuitivo

Perché è...

• Intuitivo

• Ben documentato

Perché è...

• Intuitivo

• Ben documentato

• Supportato dalla community

Drupal Joomla Wordpress Altri

fonte: w3tech.com

Altri27%

Wordpress57%

Joomla9%

Drupal7%

Drupal Joomla Wordpress Altri

fonte: w3tech.com

Anche i clienti amano WordPress

Perché è...

• Facile

Perché è...

• Facile

• Diffuso

Perché è...

• Facile

• Diffuso

• Conveniente

Strumenti specializzati utili agli obiettivi di comunicazione

del progetto

Prodotti che sono...

• Efficaci

• Flessibili

• Efficaci

• Flessibili

• Economici

Questo è il mioproblema.

Matteo Cavucci

• 30 anni

• Developer

• Front-end

• Studio di progettazione

• Roma

• Enti&aziende

mced.it

Nessuno è ancorato al proprio ruolo.lunedì 11 febbraio 13

Non reinventarela ruota.

• Cerca un theme(e cerca di capire se è buono...)

• Decodifica

• Customizza

Adattare il contenuto al thema

Framework themes

Gli svantaggi

• Costano

Pagelines Thesis Genesis Headway Catalyst

US$ 127,00

US$ 174,00

US$ 59,95

US$ 164,00

US$ 197,00

Gli svantaggi

• Costano

• Curva di apprendimento ripida

add_action( 'genesis_meta', 'load_fonts', 5);function load_fonts() { echo '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">';}

Genesis

add_action( 'genesis_meta', 'load_fonts', 5);function load_fonts() { echo '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">';}

Genesis

function load_fonts() { wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Lora|Oswald'); wp_enqueue_style( 'googleFonts'); } add_action('wp_print_styles', 'load_fonts');

WordPress

Gli svantaggi

• Costano

• Curva di apprendimento ripida

• Un sacco di roba inutile

Framework PageSizeiThemes (Builder) 299kb

Headway 1.1 mb

Genesis 1.1 mb

Catalyst (w/Dynamik) 1.6 mb

WooThemes (Canvas) 1.7 mb

Ultimatum 1.8 mb

Pagelines 5.2 mb

Framework LoadTimeHeadway 226 ms

Genesis964 ms

WooThemes (Canvas)992 ms

Catalyst (w/Dynamik)1.2 s

Ultimatum1.22 s

iThemes (Builder)1.26 s

Pagelines 5.18 s

Un altro livello di complessitàtra il progetto e WordPress

Ecco perchéio odio i themi di

WordPress

Ripartiamo!Mi serve uno strumento che sia...

• Efficace

• Flessibile

• Efficace

• Flessibile

• Economico

Separare

Funzioni(Plugin)

View(Themes)

FrameworkFront-End

Zurb Foundation

Foundation è un framework (con licenza MIT) che comprende

• Una griglia responsive nidificabile agnostic device

• Stili mobile, bottoni e tipografia

• Elementi di layout come tabs e pagination

• Forms

• Plugin Javascript

Da dove viene Foundation

• Zurb - product design in Campbell, California

• Nato per creare rapidamente prototipi html/css

• Progettato per diventare codice di produzione

Mi piace perché...

• Linguaggio semantico

Mi piace perché...

• Object oriented css

Separare struttura e skin

Ripetere caratteristiche visive (background e stili border) come skin separate che si possono aggiungere ed espandere tra loro per ottenere molta varietàcon poco codice.

Separare container e content

Usare poco stili dipendentidalla posizione.Un oggetto deve mantenerele proprie caratteristiche,non importa dove lo mettiamo.

Mi piace perché...

• Object oriented css

• Sass/Compass ready

SassSyntactically Awesome Stylesheets

• Nidificazione

Nidificazione

/* style.scss */

#navbar { width: 80%; height: 23px;

ul { list-style-type: none; } li { float: left; a { font-weight: bold; } }}

Nidificazione

/* style.scss */

#navbar { width: 80%; height: 23px;

ul { list-style-type: none; } li { float: left; a { font-weight: bold; } }}

/* style.css */

#navbar { width: 80%; height: 23px; } #navbar ul { list-style-type: none; } #navbar li { float: left; } #navbar li a { font-weight: bold; }

• Nidificazione

• Variabili

Variabili

Variabili/* style.scss */

$main-color: #ce4dd6;$style: solid;

#navbar { border-bottom: { color: $main-color; style: $style; }}

a { color: $main-color; &:hover { border-bottom: $style 1px; }}

Variabili/* style.scss */

$main-color: #ce4dd6;$style: solid;

#navbar { border-bottom: { color: $main-color; style: $style; }}

a { color: $main-color; &:hover { border-bottom: $style 1px; }}

/* style.css */

#navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; }

a { color: #ce4dd6; } a:hover { border-bottom: solid 1px; }

• Nidificazione

• Variabili

• Mixin

Mixin/* style.scss */

@mixin rounded-top-left { $vert: top; $horz: left; $radius: 10px;

border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius;}

#navbar li { @include rounded-top-left; }#footer { @include rounded-top-left; }

Mixin/* style.scss */

@mixin rounded-top-left { $vert: top; $horz: left; $radius: 10px;

border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius;}

#navbar li { @include rounded-top-left; }#footer { @include rounded-top-left; }

/* style.css */

#navbar li { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }

#footer { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }

• Nidificazione

• Variabili

• Mixin

• Controll directive: @if, @for, @each, @while

Control Directives

$class-slug: for !default

@for $i from 1 through 4 .#{$class-slug}-#{$i} width: 60px + $i

Control Directives

$class-slug: for !default

@for $i from 1 through 4 .#{$class-slug}-#{$i} width: 60px + $i

.for-1 { width: 61px;}

Da dove si comicia?

Riga di comando!

Installo Foundation via Ruby gem

[sudo] gem install zurb-foundation

Creiamo il progetto!

compass create <nomeprogetto> -r zurb-foundation --using foundation

Struttura del folder

WordpCamp/

sass-cache/ config.rb humans.txt images/ index.html javascript/ MIT-LICENSE.txt robots.txt sass/ stylesheets/

WordpCamp/

sass-cache/ config.rb humans.txt images/ index.html javascript/ MIT-LICENSE.txt robots.txt sass/ stylesheets/

@import "foundation/components/modules/buttons";// @import "foundation/components/modules/tabs";// @import "foundation/components/modules/ui";@import "foundation/components/modules/topbar";// @import "foundation/components/modules/navbar";// @import "foundation/components/modules/orbit";@import "foundation/components/modules/reveal";// @import "foundation/components/modules/offcanvas";

Frameworkè metodo

Grazie al metodo ho

• Codice coerente

Grazie al metodo ho

• Codice coerente

• Codice scalabile e modulare

Grazie al metodo ho

• Codice coerente

• Consegne brevi

Grazie al metodo ho

• Codice coerente

• Consegne brevi

• Formazione extra WordPress

Grazie al metodo ho

• Codice coerente

• Consegne brevi

• Formazione extra WordPress

• Prodotti efficaci, flessibili ed economici

“Child themes anda framework arethe only way you should build your WordPress site.

Matt MullenwegFounder, WordPress

Grazie!

Io sono Matteo Cavucci e questo intervento si chiama

“Perché odio i temi di WordPress”mced.it - @MatteoMCED

Perché odio i temi di WordPress

Self Improvement

Transcript of Perché odio i temi di WordPress

Ajaxare WordPress

Linux Day2008 Wordpress

"Vendere" Wordpress

Wordpress: Guida all'uso

Programma analitico d’esame WEB · aggiornare Wordpress e i temi ed i plugin installati. TESTING Conoscenza teorica/Knowledge (K) Il Candidato conosce, è informato, ha familiarità

Gli adolescenti e il cibo, un rapporto di amore e odio

Marketing e WordPress

Bene, usiamo WordPress.

Corso base wordpress

BISOGNI, VALORI E AUTOEFFICACIA NELLA SCELTA DEL LAVORO - WordPress… · 2010-08-30 · Temi&Strumenti Studi e ricerche 41 BISOGNI, VALORI E AUTOEFFICACIA NELLA SCELTA DEL LAVORO

WordPress - corso base

Cromosoma odio

Approfondimenti tematici Wordpress · cdrom.ioprogrammo.it WORDPRESS 3.0 TUTTE LE NOVITÀ WORDPRESS SI AGGIORNA ALLA VERSIONE 3.0, PORTANDO MOLTE NOVITÀ. SCOPRIAMO PASSO PASSO COME

Ulises Odio Santos - Ética y Valores · Ulises Odio Santos Primer premio iberoamericano al mérito judicial 9 Presentación Resulta importante referirnos a algunos de los antecedentes

SEO On Site & WordPress - Errori da Evitare - #10 WordPress Meetup Romagna Cesena

Piano di Miglioramento 2017/18lnx.itisfondi.it/wordpress/wp-content/uploads/2018/... · INVALSI e referente PdM) Sì ... e su temi di carattere scientiﬁco; corsi e attività di

Odio Atroce Dal Più Remoto Esilio)

“Tu chiamale se vuoi…emozioni” Lucio Battististatic.scuolazoo.com/wp-content/uploads/2010/03/emozioni.pdf · 3 Odio-Storia “Odio le cattive massime più delle cattive azioni

WordPress facile · approfondimenti specifici e un'introduzione alla usability dei siti web, ... Lezione 8: Gestire i menù.....24 Lezione 9 - Come scegliere i migliori temi gratuiti,

WordPress Website