14 - Web designer vs Web developer ...

14 - Web designer vs Web developer ...

• 1.
  Università degli Studidi 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 slidesfanno 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 inthe 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 thingsactually 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 thataren’t good with a pencil… https://en.wikipedia.org/wiki/Comparison_of_software_prototyping_tools#Wireframing
• 9.
  Molto lavoro neiprossimi 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 temadel 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, oalmeno 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 percapire 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 mappacon 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…