Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Digital Practices, introductions

Digital Practices, introductions

talk delivered for Digital Practices Module,
part of the MA Digital Media & Society,
The University of Sheffield

https://eyelearn.org/workshops/digital-practices2020

Prisca Schmarsow

February 14, 2020
Tweet

More Decks by Prisca Schmarsow

Other Decks in Education

Transcript

  1. PRACTICES stairwell stairwell castle towers stairwell castle towers stairwell stairwell

    stairwell stairwell Content SCS6079 Digital Practices MA Digital Media & Society DIGITAL eyelearn.org/workshops
  2. DIGITAL PRACTICES INTRODUCTION 1 hr lecture (all) 2½ workshop (2

    group split) workshops (3 group split) weeks 1-2, 6-11: weeks 3 & 5: delivered by Prisca with Claire delivered by Creative Media Team with Claire Digital Practices Sessions: Fridays RESOURCES check MOLE for all official info eyelearn.org/workshops/digital-practices2020 session material: 1 hr lecture (all) 2½ workshop (2 group split) weeks 4: delivered by Lulu with Claire
  3. 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 details & specifics. ! → eyelearn.org/workshops/digital-practices2020 option to write your own brief: subject to approval of written brief proposal ‣ brief has to meet the same criteria as given topics ‣ deadline for submission of proposal: 6/3/2020
  4. 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
  5. DIGITAL PRACTICES PRACTICES stairwell stairwell castle towers stairwell castle towers

    stairwell stairwell stairwell stairwell Content DIGITAL eyelearn.org/workshops
  6. DIGITAL PRACTICES Websites… how do they work? SERVER / SITE

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

    /or/ click on search result link 1 https://website.com
  8. 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
  9. 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 őȁȁ˛ȁƛɭőɝƛȁȩžőɻƛƈ ǟșƈƛƈǟžőɻƛƈ ǁȩȁƈƛɝࠗƈőɻőŵőɭƛȩșɭƛɝʯƛɝ stairwell way finding
  10. 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 őȁȁ˛ȁƛɭőɝƛȁȩžőɻƛƈ ǟșƈƛƈǟžőɻƛƈ ǁȩȁƈƛɝࠗƈőɻőŵőɭƛȩșɭƛɝʯƛɝ stairwell way finding
  11. 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 →
  12. 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 őȁȁ˛ȁƛɭőɝƛȁȩžőɻƛƈ in dedicated folder/database on server https://website.com stairwell way finding
  13. 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/digp2020 + your unique number admin / WordPress login ma-dms.sheffield.ac.uk/digp2020##/wp-admin eyelearn.org/workshops/digital-practices2020
  14. DIGITAL PRACTICES PRACTICES stairwell stairwell castle towers stairwell castle towers

    stairwell stairwell stairwell stairwell Content DIGITAL eyelearn.org/workshops
  15. DIGITAL PRACTICES What makes a good website? Which aspects do

    you consider important? ? What makes a good website?
  16. 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. ...
  17. 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?
  18. 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?
  19. 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.
  20. DIGITAL PRACTICES Content precedes design. Design in the absence of

    content is not design, it’s decoration.” “ Jeffrey Zeldman Content-out approach
  21. DIGITAL PRACTICES Browsing habits “If a site doesn’t load quickly,

    I move on.” “Google everything…” “I’m easy when browsing… anything might be worth the wait.” “Got to have a routine - same browser, same search - quick + easy.” “Loading speed matters more than anything else.” “Online privacy and tracking protection above all else.” “Block all ads.” “I don’t mind the ads.”
  22. DIGITAL PRACTICES Browsing habits www.menti.com/6bccq7zgya Let's talk about our internet

    routines, the browsers we prefer and search engines we use.
  23. 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
  24. 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
  25. 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
  26. 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
  27. DIGITAL PRACTICES Upcoming sessions on content TEXT stairwell stairwell castle

    towers stairwell castle towers stairwell stairwell stairwell stairwell PHOTOS content ★ Digital Content Production weeks 3 & 5 delivered by Creative Media Team ★ Writing web content week 4 delivered by Lulu Pinney
  28. 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 őȁȁ˛ȁƛɭőɝƛȁȩžőɻƛƈ ǟșƈƛƈǟžőɻƛƈ ǁȩȁƈƛɝࠗƈőɻőŵőɭƛȩșɭƛɝʯƛɝ stairwell way finding
  29. 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 őȁȁ˛ȁƛɭőɝƛȁȩžőɻƛƈ ǟșƈƛƈǟžőɻƛƈ ǁȩȁƈƛɝࠗƈőɻőŵőɭƛȩșɭƛɝʯƛɝ stairwell way finding
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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