Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e ComunicazioneCorso di Strumenti e applicazioni del Web

15 - Web designer vs Web developerGiuseppe Vizzari

Edizione 2016-17

Queste slideQueste slide fanno parte del corso “Strumenti e applicazioni del Web”. Il sito del corso, con il materiale completo, si trova in strumentiapplicazioniweb.wordpress.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 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.

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

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 anotherParticularly 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

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

But how things actually start, sometimes?

https://www.flickr.com/photos/24084766@N07/4595959073/

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!

For those that aren’t good with a pencil…

https://en.wikipedia.org/wiki/Comparison_of_software_prototyping_tools#Wireframing

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 certamente 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 (Web Marketing), che quest’anno vede la sua prima edizione (più avanti chiedete ai colleghi del secondo anno come sarà andato)• … inoltre avete altri corsi rilevanti, come Psicologia dei

Consumi, Strumenti di Indagini per le Organizzazioni

E il tema del web development?• Il corso di Elementi di Informatica, per

chi lo fa, ha una parte sulla programmazione di base in JavaScript…• … 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?

Intanto qualche chiarimento• Sviluppare oggi siti web è prevalentemente usare dei CMS:• Market share Nov. 2016

(Survey W3Techs - https://goo.gl/Cne9Qr)• Wordpress: 58,5%• Joomla: 7,1%• Drupal: 4,8%• …• Dreamweaver: 1,2%• …• 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

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

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

Ajax* di base – Google Maps (1)

*AJAX = Asychronous JavaScript and XML

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>

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>

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>

Fare una mappa con molti punti preimpostati è molto più complicato?

A mio parere no, ma me lo dite voi, dopo che guardiamo il codice

Perché suggerisci jQuery?

• In primis, nel 2016 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…