Introduzione alla tecnica dell'override in Joomla!, parlando di design Responsive vs Adaptive. Nell'esempio riportato (con tanto di codice), spiego come integrare il controllo del client, ed ottenere una lettura pulita degli articoli in Joomla!
Link al video https://youtu.be/ptHnYS_Sq40?t=58m33s
Accredia: proudly powered by co-design & WordPressnois3
Il progetto Accredia.it è stato rilasciato a novembre 2017 e ha una caratteristica fondamentale: è stato un progetto di co-design con tutto il team interno del committente assieme al nostro che è durato un anno, applicando tutti i passaggi fondamentali dello Human Centered Design in senso completo. Fino alla progettazione del software quindi, che ha visto WordPress (in salsa Bedrock e guarnito dal nostro tema Glitch) come ideale elemento per far diventare il Design System progettato, non solo reale, ma uno strumento completo a disposizione del committente.
"Alla ricerca della formula magica". Presentazione usata per il ciclo di webinar su traduzione e adattamento di siti web per AITI Emilia Romagna, novembre-dicembre 2016.
Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012Muse Comunicazione
Keynote dedicato al Responsive Web Design, questo sconosciuto. Lab WHR 2012 - 20 Novembre 2012.
"Webbing Planner: Un Matrimonio d’Interessi - Come Progettare un Successo… Reattivo"
Grazie a Brad Frost e Luca Salvini, per l'ispirazione costante.
Accredia: proudly powered by co-design & WordPressnois3
Il progetto Accredia.it è stato rilasciato a novembre 2017 e ha una caratteristica fondamentale: è stato un progetto di co-design con tutto il team interno del committente assieme al nostro che è durato un anno, applicando tutti i passaggi fondamentali dello Human Centered Design in senso completo. Fino alla progettazione del software quindi, che ha visto WordPress (in salsa Bedrock e guarnito dal nostro tema Glitch) come ideale elemento per far diventare il Design System progettato, non solo reale, ma uno strumento completo a disposizione del committente.
"Alla ricerca della formula magica". Presentazione usata per il ciclo di webinar su traduzione e adattamento di siti web per AITI Emilia Romagna, novembre-dicembre 2016.
Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012Muse Comunicazione
Keynote dedicato al Responsive Web Design, questo sconosciuto. Lab WHR 2012 - 20 Novembre 2012.
"Webbing Planner: Un Matrimonio d’Interessi - Come Progettare un Successo… Reattivo"
Grazie a Brad Frost e Luca Salvini, per l'ispirazione costante.
Perchè DNN Evoq può essere il CMS ideale per la tua Intranet, il tuo sito Corporate e la tua Community.Online.
Le caratteristiche, le funzionalità e i plus rispetto ai concorrenti.
Slide del corso di Inside dedicato allo sviluppo di applicazioni, lato "non sviluppatori". Conoscere la tecnologia è la base per potersi interfacciare al meglio con lo staff dello sviluppo e con i clienti.
Data Informed Design: perché Good Data è meglio di Big Data - KnowData2, Bolo...MOCA Interactive
Presentazione sul Data Driven Design e sull'importanza della Ricerca per costruire qualcosa che Funziona - di Dario Ferrari, Mentine - utilizzata durante l'evento sull'approccio data driven KnowData2, svoltosi a Bologna il 18/11/2016
Data Informed Design - KnowData16, Bologna, 18/11/2016Mentine
Data Informed Design: Perché Good Data è meglio di Big Data - di Dario Ferrari, Mentine - presentato durante l'evento sull'approccio data driven KnowData16, Bologna, 18/11/2016
Come cambia il web e il contesto. Nel 2015 gli utenti da mobile supereranno quelli da desktop. Le strutture dei siti devono essere sempre più liquide, e adattarsi al device dal quale vengono visualizzati.
La navigazione in internet ha subito negli ultimi anni un cambiamento radicale. Gli utenti da statici utilizzatori di computer desktop si sono trasformati in soggetti in movimento. Nelle comunità l’accesso a internet è diventato una consuetudine per accedere a contenuti e servizi, facilitato dalla massiccia presenza di smartphone carichi di applicazioni. Talvolta si tende però ad affidare all’applicazione un ruolo dominante, come se la creazione di un’app fosse di per sé una strategia. Viviamo in un mondo di iper-informazione e iper-connettività, ma lo sviluppo disorganizzato di contenuti e applicazioni ancora rende difficili azioni elementari, soprattutto se fatte da mobile, come la consultazione di un numero di telefono o la ricerca dell’orario di un autobus, azioni che possono sembrare facili ma che invece non lo sono.
In questo contesto HTML5, il nuovo linguaggio di scripting che prossimamente diventerà uno standard, permette di sviluppare applicazioni web e progetti di web design responsive che gli utenti possono usare senza dover scaricare un’applicazione, offrendo spesso gli stessi servizi. Quello che cambia non è soltanto l’uso della tecnologia, ma l’approccio alla creazione del contenuto, che diventa strategico.
Strategie per applicazioni web prima o meglio dell'app nativaDiego La Monica
Il principio di Archimede afferma che ogni corpo immerso [...] in un fluido riceve
una spinta verticale dal basso verso l'alto, uguale per intensità al peso del fluido
che occupa nel volume spostato.
Durante questo seminario sono stati analizzati i passaggi fondamentali per affiancare ad un comunissimo sito web, una Web App, evidenziando le criticità e coniugando le giuste regole di User Experience, Responsive Web Design e Mobile Centric Design.
Guida Questo doc è una versione compact di un’analisi di web marketing po’ strana.. effettuata con “prudenza”. Nuovi e vecchi strumenti di marketing e semiotica insieme applicati al web e al web 2.0
Ho pensato di sintetizzare i punti chiave e dare dei piccoli post di consiglio ai manager che devono presentare un progetto web
Wordpress, Google Analytics, MySQL e Php, con free hostingCity Planner
Conoscere il web senza comprare servizi.
- il web e i suoi contenuti
- un sistema di gestione dei contenuti - CMS
- il blog, è uno degli utilizzi di un CMS
- come funziona un CMS
- il linguaggio PHP
- MySQL, forse lo usi, ma non lo conosci
- free hosting per gestione completa di un CMS
- Con un account Google c’è compreso Analytics e WebMaster tool
- uno dei CMS più diffusi: Wordpress
- ottenere di più da Wordpress
- plugin Wordpress: Google Analytics e SEO by Yoast
- esempi pratici
Wordpress è il CMS più usato nel web e con esso è possibile creare qualsiasi tipologia di sito web.
Grazie a WP possiamo pubblicare e gestire tutte le pagine del nostro sito in modo semplice, intuitivo e senza programmare.
Workshop
realizzato da: Andrea Giavara http://www.wppratico.com/
organizzato da: Officine Comunicazione http://www.officinecomunicazione.net/
Perchè DNN Evoq può essere il CMS ideale per la tua Intranet, il tuo sito Corporate e la tua Community.Online.
Le caratteristiche, le funzionalità e i plus rispetto ai concorrenti.
Slide del corso di Inside dedicato allo sviluppo di applicazioni, lato "non sviluppatori". Conoscere la tecnologia è la base per potersi interfacciare al meglio con lo staff dello sviluppo e con i clienti.
Data Informed Design: perché Good Data è meglio di Big Data - KnowData2, Bolo...MOCA Interactive
Presentazione sul Data Driven Design e sull'importanza della Ricerca per costruire qualcosa che Funziona - di Dario Ferrari, Mentine - utilizzata durante l'evento sull'approccio data driven KnowData2, svoltosi a Bologna il 18/11/2016
Data Informed Design - KnowData16, Bologna, 18/11/2016Mentine
Data Informed Design: Perché Good Data è meglio di Big Data - di Dario Ferrari, Mentine - presentato durante l'evento sull'approccio data driven KnowData16, Bologna, 18/11/2016
Come cambia il web e il contesto. Nel 2015 gli utenti da mobile supereranno quelli da desktop. Le strutture dei siti devono essere sempre più liquide, e adattarsi al device dal quale vengono visualizzati.
La navigazione in internet ha subito negli ultimi anni un cambiamento radicale. Gli utenti da statici utilizzatori di computer desktop si sono trasformati in soggetti in movimento. Nelle comunità l’accesso a internet è diventato una consuetudine per accedere a contenuti e servizi, facilitato dalla massiccia presenza di smartphone carichi di applicazioni. Talvolta si tende però ad affidare all’applicazione un ruolo dominante, come se la creazione di un’app fosse di per sé una strategia. Viviamo in un mondo di iper-informazione e iper-connettività, ma lo sviluppo disorganizzato di contenuti e applicazioni ancora rende difficili azioni elementari, soprattutto se fatte da mobile, come la consultazione di un numero di telefono o la ricerca dell’orario di un autobus, azioni che possono sembrare facili ma che invece non lo sono.
In questo contesto HTML5, il nuovo linguaggio di scripting che prossimamente diventerà uno standard, permette di sviluppare applicazioni web e progetti di web design responsive che gli utenti possono usare senza dover scaricare un’applicazione, offrendo spesso gli stessi servizi. Quello che cambia non è soltanto l’uso della tecnologia, ma l’approccio alla creazione del contenuto, che diventa strategico.
Strategie per applicazioni web prima o meglio dell'app nativaDiego La Monica
Il principio di Archimede afferma che ogni corpo immerso [...] in un fluido riceve
una spinta verticale dal basso verso l'alto, uguale per intensità al peso del fluido
che occupa nel volume spostato.
Durante questo seminario sono stati analizzati i passaggi fondamentali per affiancare ad un comunissimo sito web, una Web App, evidenziando le criticità e coniugando le giuste regole di User Experience, Responsive Web Design e Mobile Centric Design.
Guida Questo doc è una versione compact di un’analisi di web marketing po’ strana.. effettuata con “prudenza”. Nuovi e vecchi strumenti di marketing e semiotica insieme applicati al web e al web 2.0
Ho pensato di sintetizzare i punti chiave e dare dei piccoli post di consiglio ai manager che devono presentare un progetto web
Wordpress, Google Analytics, MySQL e Php, con free hostingCity Planner
Conoscere il web senza comprare servizi.
- il web e i suoi contenuti
- un sistema di gestione dei contenuti - CMS
- il blog, è uno degli utilizzi di un CMS
- come funziona un CMS
- il linguaggio PHP
- MySQL, forse lo usi, ma non lo conosci
- free hosting per gestione completa di un CMS
- Con un account Google c’è compreso Analytics e WebMaster tool
- uno dei CMS più diffusi: Wordpress
- ottenere di più da Wordpress
- plugin Wordpress: Google Analytics e SEO by Yoast
- esempi pratici
Wordpress è il CMS più usato nel web e con esso è possibile creare qualsiasi tipologia di sito web.
Grazie a WP possiamo pubblicare e gestire tutte le pagine del nostro sito in modo semplice, intuitivo e senza programmare.
Workshop
realizzato da: Andrea Giavara http://www.wppratico.com/
organizzato da: Officine Comunicazione http://www.officinecomunicazione.net/
8. IL SITO WEB: L’EVOLUZIONE DAL 2009
REALIZZARE UN SITO WEB VUOL DIRE
9. ▸ Pensare ai contenuti
▸ Ideare l’aspetto grafico
IL SITO WEB: L’EVOLUZIONE DAL 2009
REALIZZARE UN SITO WEB VUOL DIRE
10. ▸ Pensare ai destinatari
▸ Ottimizzare l’esperienza utente
▸ Pensare ai contenuti
▸ Ideare l’aspetto grafico
IL SITO WEB: L’EVOLUZIONE DAL 2009
REALIZZARE UN SITO WEB VUOL DIRE
11. ▸ “Prevedere” dove verranno letti i contenuti
▸ Pensare al piano editoriale
▸ Pensare ai destinatari
▸ Ottimizzare l’esperienza utente
▸ Pensare ai contenuti
▸ Ideare l’aspetto grafico
IL SITO WEB: L’EVOLUZIONE DAL 2009
REALIZZARE UN SITO WEB VUOL DIRE
12. ▸ “Prevedere” dove verranno letti i contenuti
▸ Pensare al piano editoriale
▸ Pensare ai destinatari
▸ Ottimizzare l’esperienza utente
▸ Pensare ai contenuti
▸ Ideare l’aspetto grafico
▸ Analizzare i Feedback
IL SITO WEB: L’EVOLUZIONE DAL 2009
REALIZZARE UN SITO WEB VUOL DIRE
16. ISO 9241-210
USER EXPERIENCE
▸ Definizione
http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=52075
A person's perceptions and responses that result
from the use or anticipated use of a product,
system or service.
17. ISO 9241-210
USER EXPERIENCE
▸ Definizione
▸ Limiamola
http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=52075
A person's perceptions and responses that result
from the use or anticipated use of a product,
system or service.
L’utente giunto sul nostro sito, deve trovare
immediatamente la risposta, “intravista” nella SERP. Dopo,
vorrà continuarne la visita.
18. ISO 9241-210
USER EXPERIENCE
▸ Definizione
▸ Limiamola
▸ Nella realtà
http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=52075
A person's perceptions and responses that result
from the use or anticipated use of a product,
system or service.
L’utente giunto sul nostro sito, deve trovare
immediatamente la risposta, “intravista” nella SERP. Dopo,
vorrà continuarne la visita.
21. L’ORGANIZZAZIONE DELL’INFORMAZIONE, ALL’INTERNO DI UN CONTESTO WEB
INFORMATION ARCHITECTURE
‣ The structural design of shared information environments.
‣ The art and science of organizing and labeling web sites,
intranets, online communities, and software to support
findability and usability.
22. L’ORGANIZZAZIONE DELL’INFORMAZIONE, ALL’INTERNO DI UN CONTESTO WEB
INFORMATION ARCHITECTURE
‣ The structural design of shared information environments.
‣ The art and science of organizing and labeling web sites,
intranets, online communities, and software to support
findability and usability.
‣ Extracting required parameters/data of Engineering Designs in
the process of creating a knowledge-base linking different
systems and standards.
‣ A subset of Data Architecture where usable data (a.k.a
information) is constructed in and designed or arranged in a
fashion most useful or empirically holistic to the users of this
data.
23. L’ORGANIZZAZIONE DELL’INFORMAZIONE, ALL’INTERNO DI UN CONTESTO WEB
INFORMATION ARCHITECTURE
‣ The structural design of shared information environments.
‣ The art and science of organizing and labeling web sites,
intranets, online communities, and software to support
findability and usability.
‣ Extracting required parameters/data of Engineering Designs in
the process of creating a knowledge-base linking different
systems and standards.
‣ A subset of Data Architecture where usable data (a.k.a
information) is constructed in and designed or arranged in a
fashion most useful or empirically holistic to the users of this
data.
24. L’ORGANIZZAZIONE DELL’INFORMAZIONE, ALL’INTERNO DI UN CONTESTO WEB
INFORMATION ARCHITECTURE
‣ The structural design of shared information environments.
‣ The art and science of organizing and labeling web sites,
intranets, online communities, and software to support
findability and usability.
‣ Extracting required parameters/data of Engineering Designs in
the process of creating a knowledge-base linking different
systems and standards.
‣ A subset of Data Architecture where usable data (a.k.a
information) is constructed in and designed or arranged in a
fashion most useful or empirically holistic to the users of this
data.
26. PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
Responsive Adaptive
27. PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
Responsive
Adattare il contenuto alla
dimensione dello schermo:
Adaptive
Identificare il dispositivo, prima
di offrire le informazioni richieste:
28. PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
Responsive
Adattare il contenuto alla
dimensione dello schermo:
‣ Ordine contenuti
Adaptive
Identificare il dispositivo, prima
di offrire le informazioni richieste:
▸ Scelta dei contenuti
29. PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
Responsive
Adattare il contenuto alla
dimensione dello schermo:
‣ Ordine contenuti
‣ Dimensioni spazi
Adaptive
Identificare il dispositivo, prima
di offrire le informazioni richieste:
▸ Scelta dei contenuti
▸ Gestione spazi
30. PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
Responsive
Adattare il contenuto alla
dimensione dello schermo:
‣ Ordine contenuti
‣ Dimensioni spazi
‣ File multimediali ridotti
Adaptive
Identificare il dispositivo, prima
di offrire le informazioni richieste:
▸ Scelta dei contenuti
▸ Gestione spazi
▸ File multimediali scelti
31. PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
Responsive
Adattare il contenuto alla
dimensione dello schermo:
‣ Ordine contenuti
‣ Dimensioni spazi
‣ File multimediali ridotti
Adaptive
Identificare il dispositivo, prima
di offrire le informazioni richieste:
▸ Scelta dei contenuti
▸ Gestione spazi
▸ File multimediali scelti
54. IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
LETTURA DA SMARTPHONE: COME CAMBIA L’ARTICOLO?
55. IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
LETTURA DA SMARTPHONE: COME CAMBIA L’ARTICOLO?
▸ Titolo: l’importanza di rispondere a tutte le domande
56. IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
LETTURA DA SMARTPHONE: COME CAMBIA L’ARTICOLO?
▸ Titolo: l’importanza di rispondere a tutte le domande
▸ Testo introduttivo? Dipende!
57. IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
LETTURA DA SMARTPHONE: COME CAMBIA L’ARTICOLO?
▸ Titolo: l’importanza di rispondere a tutte le domande
▸ Testo introduttivo? Dipende!
▸ Carattere: definito, semplice e facile da leggere. Anche al sole.
58. IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
LETTURA DA SMARTPHONE: COME CAMBIA L’ARTICOLO?
▸ Titolo: l’importanza di rispondere a tutte le domande
▸ Testo introduttivo? Dipende!
▸ Carattere: definito, semplice e facile da leggere. Anche al sole.
▸ Immagine di copertina? Tablet sì, Smartphone no!
59. IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
LETTURA DA SMARTPHONE: COME CAMBIA L’ARTICOLO?
▸ Titolo: l’importanza di rispondere a tutte le domande
▸ Testo introduttivo? Dipende!
▸ Carattere: definito, semplice e facile da leggere. Anche al sole.
▸ Immagine di copertina? Tablet sì, Smartphone no!
▸ Le informazioni? In un punto ben preciso!
63. È IMPORTANTE TENERE A MENTE IL FOCUS
COSA VOGLIO MODIFICARE?
▸ Voglio modificare la visualizzazione dell’articolo
64. È IMPORTANTE TENERE A MENTE IL FOCUS
COSA VOGLIO MODIFICARE?
▸ Voglio modificare la visualizzazione dell’articolo
▸ Lo voglio fare in base allo schermo
65. È IMPORTANTE TENERE A MENTE IL FOCUS
COSA VOGLIO MODIFICARE?
▸ Voglio modificare la visualizzazione dell’articolo
▸ Lo voglio fare in base allo schermo
▸ Desidero ottimizzarne la lettura, a seconda del dispositivo utilizzato
81. TEXT
IN INDEX.PHP
▸ Aggiungiamo un semplice controllo
$client=new JApplicationWebClient();
if($client->mobile)
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/mobile.css');
82. TEXT
IN INDEX.PHP
▸ Aggiungiamo un semplice controllo
$client=new JApplicationWebClient();
if($client->mobile)
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/mobile.css');
else
83. TEXT
IN INDEX.PHP
▸ Aggiungiamo un semplice controllo
$client=new JApplicationWebClient();
if($client->mobile)
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/mobile.css');
else
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');
84. PASSO 1
FILE NECESSARI
▸ html/com_content/article/
default.php
default_links.php
▸ in css
template.css
mobile.css
▸ in index.php una lieve modifica
85. PASSO 1
FILE NECESSARI
▸ html/com_content/article/
default.php
default_links.php
▸ in css
template.css
mobile.css
▸ in index.php una lieve modifica
▸ html/com_content/article/
default.php
default_links.php
▸ in css
template.css
mobile.css
▸ in index.php una lieve modifica
86. PASSO 1
FILE NECESSARI
▸ html/com_content/article/
default.php
default_links.php
▸ in css
template.css
mobile.css
▸ in index.php una lieve modifica
▸ html/com_content/article/
default.php
default_links.php
▸ in css
template.css
mobile.css
▸ in index.php una lieve modifica
▸ html/com_content/article/
default.php
default_links.php
▸ in css
template.css
mobile.css
▸ in index.php una lieve modifica
97. ▸ Gestione Desktop
<main class="container item-page<?php echo $this->pageclass_sfx; ?>”>
</main>
SE L’ARTICOLO È VISTO DA UN PC, INTERPRETA IL CODICE CONTENUTO QUI DENTRO
COSA METTO NEL MAIN?
IL MAIN
98. ▸ Gestione Desktop
▸ Gestione mobile
<main class="container item-page<?php echo $this->pageclass_sfx; ?>”>
</main>
SE L’ARTICOLO È VISTO DA UN PC, INTERPRETA IL CODICE CONTENUTO QUI DENTRO
COSA METTO NEL MAIN?
IL MAIN
ALTRIMENTI, PER TUTTI GLI ALTRI, INTERPRETA IL CODICE QUI DENTRO
100. ▸ Gestione Desktop
▸ Gestione mobile
<main class="container item-page<?php echo $this->pageclass_sfx; ?>”>
</main>
COSA METTO NEL MAIN
IL MAIN
A SECONDA DI COSA DEVO MOSTRARE, NE FORNISCO UNA VERSIONE
DESKTOP O MOBILE