14 - Web designer vs Web developer ...

1. Università degli Studi di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
14 - Web designer vs Web
developer
Giuseppe Vizzari
Edizione 2019-20

2. Queste slides
Queste slides fanno parte del corso “Strumenti e applicazioni del Web”. Il sito del
corso, con il materiale completo, si trova in https://gvizzari.hopto.org/wp/. 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 shot, 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.

3. Job Titles in the Web Industry
(lista opinabile, probabilmente parziale e anche già vecchia)

4. Semplificando un po’… (1/2)
There are two primary jobs involved in creating a website:
• the web designer
• the web developer
The web designers are responsible for the visual aspect, which
includes the layout, coloring and typography of a web page.
Web designers will also have a working knowledge of markup
languages such as HTML and CSS, although the extent of
their knowledge will differ from one web designer to another
Particularly in smaller organizations one person will need the
necessary skills for designing and programming the full web
page, while larger organizations may have a web designer
responsible for the visual aspect alone

5. Complicando un po’… (2/2)
Further jobs which may become involved in the creation of a website
include:
• Graphic designers to create visuals for the site such as logos, layouts
and buttons
• Internet marketing specialists to help maintain web presence through
strategic solutions on targeting viewers to the site, by using marketing and
promotional techniques on the internet
• SEO writers to research and recommend the correct words to be
incorporated into a particular website and make the website more
accessible and found on numerous search engines
• Internet copywriter to create the written content of the page to appeal to
the targeted viewers of the site
• User experience (UX) designer incorporates aspects of user focused
design considerations which include information architecture, user
centered design, user testing, interaction design, and occasionally visual
design

6. But how things actually start, sometimes?
https://www.flickr.com/photos/24084766@N07/4595959073/

7. Wireframes or Mockups…
• A website wireframe is a visual guide that represents the
skeletal framework of a website
• It depicts the page layout or arrangement of the website’s
content, including interface elements and navigational systems,
and how they work together
• The wireframe usually lacks typographic style, color, or
graphics, since the main focus lies in functionality, behavior,
and priority of content…
• … although there can be high fidelity wireframes
• In other words, it focuses on what a system does, not what it
looks like
• … but it doesn’t necessarily mean that it must be ugly!

8. For those that aren’t good with a pencil…
https://en.wikipedia.org/wiki/Comparison_of_software_prototyping_tools#Wireframing

9. Molto lavoro nei prossimi semestri…
• Sul tema del design visuale, anche consapevole degli aspetti
cognitivi del visitatore di un sito / utente di un sistema web (o
informatico in generale) avrete diversi corsi
• Secondo semestre:
• Ergonomia cognitiva
• Laboratorio di comunicazione visiva
• Comunicazione digitale (non dedicato al tema, ma comunque rilevante)
• Secondo anno – primo semestre:
• Comunicazione visiva e design delle interfacce
• Lato marketing, avete un corso dedicato al secondo anno
(Digital Marketing)
• … inoltre avete altri corsi rilevanti

10. E il tema del web
development?
• Il corso di Elementi di Informatica, per chi lo
fa, ha una parte sulla programmazione di
base…
• … per gli altri è stato dichiarato che un minimo di
competenze di programmazioni sono già presenti
• Questo corso ha l’obiettivo di portarvi a
sviluppare un sito dinamico, in gruppo, con
una quantità e varietà di contenuti…
• … ma data l’eterogeneità della formazione
iniziale lo fa proponendo uno strumento pre-
esistente, senza necessità di programmare,
configurabile con plugin anche molto
sofisticati e potenzialmente anche molto
ricco… ma non si tratta certo dello sviluppo di
una nuova web application
• Se siete interessati ad approfondire il tema,
suggerisco il corso di Tecnologie e
applicazioni dei sistemi distribuiti (secondo
anno – primo semestre)
• … possiamo fare qualcosa di più ora?

11. Intanto qualche chiarimento
• Sviluppare oggi siti web è
prevalentemente usare
dei CMS:
• Market share Dec. 2017
(Survey W3Techs -
https://goo.gl/Cne9Qr)
• Wordpress: 58,5%
• Joomla: 6,6%
• Drupal: 4,7%
• …
• Dreamweaver: 1%
• …
• Moodle: 0,1%
• Imparare Wordpress ha
ancora senso, anzi…
• Nuovi CMS continuano a
essere prodotti, per venire
incontro a nuove esigenze
• Detto questo può capitare che certe
funzionalità base o plugin non siano
sufficienti o soddisfacenti, o che
certe operazioni vadano
automatizzate
• Qui serve uno sviluppatore web

12. Che sviluppatore, o almeno in quale
linguaggio?
• Di massima vedo tre motivi di
sviluppare qualcosa oggi
• In primis, quello che avete in testa
non esiste del tutto…
• … pensate a Zuckerberg, e tanti auguri!
• In seconda battuta, avete quasi tutto
quello che serve in un CMS
esistente…
• … studiatene bene l’architettura e
costruite uno/dei nuovi plugin
• … imparate un po’ di PHP
• Esistono dei servizi esterni che volete
combinare ai vostri dati e nel vostro
sito in modo innovativo, visivamente
piacevole, utile
• … imparate meglio Javascript e studiate
un framework, per esempio jQuery

13. Qualche esempio per capire di cosa
stiamo parlando…
• Attenzione, stiamo per vedere del codice JavaScript…
• … non è dannoso per la salute, nonostante il tipico aspetto
dell’informatico medio
• È consentito non trovarsi a proprio agio, non è consentito non
capire a meno di non dirlo subito: l’obiettivo non è insegnarvi a
programmare applicazioni web in pochi minuti (improbabile),
ma farvi capire a cosa potrebbe servirvi e cosa comporta
questo genere di tecnica

14. Ajax* di base – Google Maps (1)
*AJAX = Asychronous JavaScript and XML

15. Ajax di base – Google Maps (2)
<body onload="initialize()">
<div class="wrapper">
<div class="header”> [...] </div>
<div class="content">
<div class="main">
<h1>Google Maps</h1>
<div id="map"></div>
<div>
<p>Address:<br>
<input id="address" type="textbox" style="width: 755px;" value="Piazza della Scienza, 20126 Milano,
Italy"></p>
<p>Notes:<br>
<input id="note" type="textbox" style="width: 755px;" value="Piazza della Scienza, Università degli
Studi di Milano-Bicocca."></p>
<input type="button" value="Cerca" onclick="codeAddress()">
<br><br><br>
</div>
</div>
</div>
<div class="footer”> [... ] </div>
</div>
</body>

16. Ajax di base – Google Maps (3)
<script
src="https://maps.googleapis.com/maps/api/js?key=MYGOOGLEMAPSKEY&sensor=false"></script>
<script>
var map;
var geocoder;
var marker = null;
var infowindow = new google.maps.InfoWindow();
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: new google.maps.LatLng(45.4640, 9.1916),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
</script>

17. Ajax di base – Google Maps (4)
<script>
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(15);
if(marker === null){
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
marker.setPosition(results[0].geometry.location);
if((infowindow.getMap()!==null) &&
(typeof(infowindow.getMap())!== undefined))
infowindow.close();
}
marker.setTitle(document.getElementById("note").value);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(document.getElementById("note").value);
infowindow.open(map, marker);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>

18. Fare una mappa con molti punti
preimpostati è molto più complicato?
A mio parere no, ma me lo dite voi, dopo che guardiamo il codice

19. Perché suggerisci jQuery?
• In primis, nel 2018 si usano librerie o framework, non si scrive codice “da
zero”; l’unica domanda è quale…
• jQuery è un framework JavaScript che rende molto semplice la scrittura di
applicazioni web offrendo funzionalità quali
• manipolazione di HTML/DOM e CSS
• metodi per eventi HTML
• effetti e animazioni
• supporto a programmazione AJAX
• varie altre utilità (anche tramite plugin)
• Uso jQuery per un corso al secondo anno della triennale in informatica
perché è
• diffuso, testato e manutenuto (utilizzato in siti come Dell, Digg, NBC e da Google
in alcuni progetti; è incluso in WordPress; ...)
• open source
• compatto (meno di 100kb, se compresso)
• può essere esteso con una serie di plugin di vario genere
Segue carrellata di esempi…