Slide 1

Slide 1 text

PRACTICES stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell Content SCS6079 Digital Practices MA Digital Media & Society DIGITAL eyelearn.org/workshops/digital-practices2019

Slide 2

Slide 2 text

DIGITAL PRACTICES INTRODUCTION 1 hr lecture 2½ workshop lecture & workshops weeks 1, 4-10: weeks 2 & 3: delivered by Prisca & Lulu delivered by Creative Media Team Digital Practices Sessions: Thursday & Friday RESOURCES check MOLE for all official info eyelearn.org/workshops/digital-practices2019 session material:

Slide 3

Slide 3 text

DIGITAL PRACTICES PROJECT BRIEFS 1. A site plan to outline the information architecture 
 (this can be in form of a tree chart diagram or a well structured written document) 2. A website with at least five pages presented online, containing: text, images/video as appropriate 3. A 500-word document describing considerations for each main part of the website, the content structure, tone of copy and why you chose to include certain elements. deliverables: to be delivered by deadline via TURNITIN Digital Practices Project: Select one of three briefs Get Active! BRIEF 1 Bringing up children in a digital age BRIEF 2 Being an international student BRIEF 3 Check Handbook on MOLE for official submission deadline. ! → eyelearn.org/workshops/digital-practices2018

Slide 4

Slide 4 text

DIGITAL PRACTICES INTRODUCTION who am I? — graphic designer since 1996
 ~ transition to digital ~ — web designer since 2000 — teaching web design since 2002 Additional resources a little bit about me: ̣ design for people ̣ love the sharing spirit of the web ̣ support web as free and open platform to empower people ̣ open source all the way ̣ Why WordPress? ~ all of the above :) — studio launched 2013 DESIGN LONDON WordPress STUDIO EYEDEA eyedeastudio.london design work

Slide 5

Slide 5 text

DIGITAL PRACTICES PRACTICES stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell Content eyelearn.org/workshops/digital-practices2019 DIGITAL

Slide 6

Slide 6 text

DIGITAL PRACTICES Websites… how do they work? national audience international audience many users many preferences many devices

Slide 7

Slide 7 text

DIGITAL PRACTICES Websites… how do they work? SERVER / SITE HOST DOMAIN NAME SERVER 128.168.68.192 https://website.com stairwell way finding content

Slide 8

Slide 8 text

DIGITAL PRACTICES Websites… how do they work? enter web address /or/ click on search result link 1 https://website.com

Slide 9

Slide 9 text

DIGITAL PRACTICES Websites… how do they work? https://website.com DOMAIN NAME SERVER browser looks up the IP address on the DNS (domain name server) 2 128.168.68.192 SERVER / SITE HOST content all files are located in dedicated folder/database on server stairwell way finding

Slide 10

Slide 10 text

DIGITAL PRACTICES Websites… how do they work? 128.168.68.192 SERVER / SITE HOST browser communicates with server 3 site displayed in browser 4 content all files are located in dedicated folder/database on server stairwell way finding

Slide 11

Slide 11 text

DIGITAL PRACTICES Websites… how do they work? ↓ website setup 1. domain name 2. server/host registration manage name server file hosting server functions view site →

Slide 12

Slide 12 text

DIGITAL PRACTICES Websites… how do they work? enter web address /or/ click on search result link 1 browser looks up the IP address on the DNS (domain name server) 2 browser communicates with server 3 site displayed in browser 4 content SERVER / SITE HOST DOMAIN NAME SERVER 128.168.68.192 all files are located in dedicated folder/database on server https://website.com stairwell way finding

Slide 13

Slide 13 text

DIGITAL PRACTICES Your website… how does it work? Your website Provided by the University, accessible on campus or via VPN from outside (see CiCS instructions for details).
 URL / website address
 ma-dms.sheffield.ac.uk/digp + your unique number
 admin / WordPress login
 ma-dms.sheffield.ac.uk/digp##/wp-admin eyelearn.org/workshops/digital-practices2019

Slide 14

Slide 14 text

DIGITAL PRACTICES PRACTICES stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell Content eyelearn.org/workshops/digital-practices2019 DIGITAL

Slide 15

Slide 15 text

DIGITAL PRACTICES What makes a good website?
 Which aspects do you consider important? ? What makes a good website?

Slide 16

Slide 16 text

DIGITAL PRACTICES What makes a good website? provides sought-for information. is accessible. is easy to use. is clearly presented as secure. shows up-to-date content. loads fast. is professional. A good website presents a strong brand image. features images and videos. caters for its audience. is engaging & informative. looks attractive. presents legible text and clearly structured content. complies with applicable laws. keeps data confidential and secure. functions well and as expected. appeals to personal taste. ...

Slide 17

Slide 17 text

DIGITAL PRACTICES What makes a good website? TEXT stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell PHOTOS content technical aesthetic User perspective - where do the priorities lie?

Slide 18

Slide 18 text

DIGITAL PRACTICES What makes a good website? content ̣ provides sought-for information. ̣ shows up-to-date content. ̣ is professional. ̣ features images and videos. ̣ caters for its audience. ̣ is engaging & informative. ̣ presents legible text and clearly structured content. ̣ complies with applicable laws. technical ̣ is easy to use. ̣ is clearly presented as secure. ̣ loads fast. ̣ keeps data confidential and secure. ̣ functions well and as expected. aesthetics ̣ is engaging & informative. ̣ looks attractive. ̣ appeals to personal taste. User perspective - where do the priorities lie?

Slide 19

Slide 19 text

DIGITAL PRACTICES Browsing habits Which device do you use most often? ? — Are you mostly going online with your mobile or your PC? Would you say that you access the web mainly via mobile devices?
 Or are you happier browsing on a desktop computer / larger screen? Which browser or app do you use to access content? — Do you have any favourite apps to access the web with? Do you mainly use a web browser? Or do you rely on other sites, such as social media sites to access content and find links? ?

Slide 20

Slide 20 text

DIGITAL PRACTICES Browsers Firefox Waterfox Brave Vivaldi Edge Opera Maxthon Yandex TOR Safari Cliqz Chrome

Slide 21

Slide 21 text

DIGITAL PRACTICES Browsing habits How do you browse the internet? ? — Do you have a routine of sites to visit? for example: 
 Are there any websites you visit daily or very frequently?
 Or do you vary your browsing more often than not? for example: 
 Do you type or copy/paste links into the browser’s address bar? 
 Or do you primarily use a search engine? Or click on links in emails? — Are there any typical patterns in how you browse? ?

Slide 22

Slide 22 text

DIGITAL PRACTICES Search Engines How do you search? ? Which search engines do you use?

Slide 23

Slide 23 text

DIGITAL PRACTICES Search Engines

Slide 24

Slide 24 text

DIGITAL PRACTICES Search Engines TIP explore alternatives
 & find better sources creativecommons DuckDuckGo ECOSIA

Slide 25

Slide 25 text

DIGITAL PRACTICES What makes a good website? TEXT stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell PHOTOS content ̣ provides sought-for information. ̣ shows up-to-date content. ̣ is professional. ̣ features images and videos. ̣ caters for its audience. ̣ is engaging & informative. ̣ presents legible text and clearly structured content. ̣ complies with applicable laws.

Slide 26

Slide 26 text

DIGITAL PRACTICES Content precedes design. Design in the absence of content is not design, 
 it’s decoration.” “ Jeffrey Zeldman Content-out approach

Slide 27

Slide 27 text

DIGITAL PRACTICES stairwell stairwell TEXT stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell PHOTOS content creation editing for target group & context 1 ̣ all copy for the site:
 main content as well as micro copy ̣ all media files:
 collect / optimise for display on web ̣ all material for download
 edited for suitable file formats (PDF/ZIP) Content-out approach

Slide 28

Slide 28 text

DIGITAL PRACTICES stairwell stairwell TEXT stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell PHOTOS content creation editing for target group & context 1 ̣ all copy for the site:
 main content as well as micro copy ̣ all media files:
 collect / optimise for display on web ̣ all material for download
 edited for suitable file formats (PDF/ZIP) ongoing feedback & testing, iterations/edits of content Content-out approach

Slide 29

Slide 29 text

DIGITAL PRACTICES Content-out approach content creation editing for target group & context 1 content review / revision site planning for content structure 2 ongoing feedback & testing, iterations/edits of content SITE MAP WIREFRAME site map for content structure
 informs the wireframe for content layout & design stairwell stairwell TEXT stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell PHOTOS

Slide 30

Slide 30 text

DIGITAL PRACTICES content creation editing for target group & context 1 content review / revision site planning for content structure 2 ongoing feedback & testing, iterations/edits of content SITE MAP WIREFRAME ongoing feedback & testing, iterations/edits of design + setup design for layout, type and presentation of all media 3 stairwell stairwell TEXT stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell PHOTOS Content-out approach

Slide 31

Slide 31 text

DIGITAL PRACTICES Upcoming sessions on content TEXT stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell PHOTOS content ̣ Digital Content Production weeks 2 & 3 delivered by Creative Media Team ̣ Writing web content week 5 delivered by Lulu Pinney

Slide 32

Slide 32 text

DIGITAL PRACTICES Options & considerations a) static, self-hosted website b) free-hosted website c) CMS [content management system] driven setup
 (can be free- or self-hosted) Putting a site online - which options are available? Why do you need to know? ✓ you are responsible for your own data. Knowing how to backup your site (content/setup/design) is vital. ✓ keep an eye on ownership. Knowing whether your uploaded content remains your own is important. content all files are located in dedicated folder/database on server stairwell way finding

Slide 33

Slide 33 text

DIGITAL PRACTICES Options & considerations Putting a site online - which options are available? a) static, self-hosted website
 — webpages created as standalone, containing all data and media
 — design and content interlinked
 — all files fully functioning independently and uploaded on server
 b) free-hosted website
 — website part of a bigger setup, shared server and settings
 — often no direct access to files
 — settings and data protection by third party
 c) CMS [content management system] driven setup
 (can be free- or self-hosted)
 — content and design kept separated: content in database, design as theme
 — more flexibility in updating content structure and design
 — backups involve database, design and settings content all files are located in dedicated folder/database on server stairwell way finding

Slide 34

Slide 34 text

DIGITAL PRACTICES CMS & template-driven design B ACKUP gif js php stairwell stairwell CONTENT DATABASE TEMPLATES / DESIGN jpg svg css website in browser https://website.com TEXT stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell PHOTOS

Slide 35

Slide 35 text

DIGITAL PRACTICES CMS & template-driven design: practically speaking content in hand edited for web 1 site admin log in to update 2 add/upload content + label by using admin options 3 all content uploaded database updated 4 TEXT stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell PHOTOS DATABASE

Slide 36

Slide 36 text

DIGITAL PRACTICES install & activate design via theme / template 5 ready to view browser will request content + design 6 gif js php DATABASE TEMPLATES / DESIGN jpg svg css website in browser https://website.com gif js php TEMPLATES / DESIGN jpg svg css CMS & template-driven design: practically speaking

Slide 37

Slide 37 text

DIGITAL PRACTICES CMS & template-driven design: practically speaking BACKUP !!! both content and design 7 DATABASE gif js php TEMPLATES / DESIGN jpg svg css EXPORT VIA ADMIN or server control panel DOWNLOAD THEME FOLDER TEXT stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell PHOTOS content

Slide 38

Slide 38 text

DIGITAL PRACTICES WordPress

Slide 39

Slide 39 text

DIGITAL PRACTICES ̣ home of the hosted version ̣ platform by Automattic ̣ offers free and priced options ̣ home of the software ̣ free to download for self-hosting ̣ developer documentation: CODEX Matt Mullenweg → ma.tt

Slide 40

Slide 40 text

DIGITAL PRACTICES WordPress free as in freedom 
 & free as in money ̣ open source | license: GPL ̣ reliable and technically stable ̣ flexible, adaptive and extendable ̣ large community contributing to core and plugins ̣ wide variety of plugins available ̣ easy update and content management ̣ easy change of design via theme

Slide 41

Slide 41 text

DIGITAL PRACTICES working with website in browser https://website.com

Slide 42

Slide 42 text

DIGITAL PRACTICES

Slide 43

Slide 43 text

DIGITAL PRACTICES

Slide 44

Slide 44 text

DIGITAL PRACTICES

Slide 45

Slide 45 text

DIGITAL PRACTICES

Slide 46

Slide 46 text

DIGITAL PRACTICES ๏ always keep up-to-date!
 update both core version of WordPress, plugins and themes ๏ keep your admin password safe!
 when using a shared computer, remember to log out. working with

Slide 47

Slide 47 text

DIGITAL PRACTICES working with

Slide 48

Slide 48 text

DIGITAL PRACTICES Prisca Schmarsow [email protected] eyedeastudio.london