Phone Contact

Dat 504 Course Notes

Tools

tools

WordPress – Social Media

download

WordPress integrates Social Media easily – with Jetpack Jetpack download installed it’s easy to add ’Sharing Buttons’ to Posts, Pages, Media and more…

There are a range of plugins that enhance this functionality further:

You can post from WordPress to your social media accounts:

or embed or list social media in WordPress:

Another approach is to use the Web 3.0 technology IFTTT – “If This Then That” – https://ifttt.com – “Make your work flow. We connect your favourite apps together, so they work best for you.”

e.g. If I make a post to WordPress with the hashtag #tumblrme then post to my Tumblr blog

Group wanted to look at

  • implementing themes
  • export and import
  • SVG Line

16. WordPress – shortcodes

wordpress_shortcodes

You now each have your own site on the disndat.uk WordPress multisite network – or your own WordPress.org install (or are planning one).

You know what you’re expected to present by the end of the module – for Friday.

We’re actually going to make this a ‘Show ’n Tell’ session – you have to present the work you’re submitting for the module to the rest of the year.

There are also a couple of minor additions to this ‘Deliverables’ list…

  • a peer assessment – you have to choose (or be allocated) a partner from the year and will review their module submission as part of their assessment. I’ll provide the form.
  • a last 400 word article – a ‘critical review’ of how well you think you have managed to implement the ideas expressed in your previous 400 word article on what you think are the most important considerations in designing a portfolio Web site. Show examples of where you applied these principles, what worked and what didn’t…

We’re going to set a collective agenda for what you want to focus on for the coming week.. but I am going to introduce and provide links for some core WordPress functionality that you’ll find very useful:

  • shortcodes
  • social media
  • security

Shortcodes

“One of the primary reasons why WordPress is the most popular CMS platform available is the sheer level of customizability that it brings to the table. Today, we’ll review the process of integrating one of those popular features, shortcodes…”

15 – Taking Stock – Deliverables

deliverables

By now you should each have your own site on the disndat.uk WordPress multisite network.

This is to clarify what you need to present by the end of the module i.e. for Friday, 27th November.

  • a 400 word illustrated article on net.art as a basic HTML page;
  • a 4-6 six-page superbad.com or other net.art inspired mini site illustrating your experimentation with HTML, JavaScript and GIFs;
  • a 400 word article on what you consider to be 4-6 key events in the history of the development of the World Wide Web;
  • a 400 word article on what you think are the most important considerations in designing a portfolio Web site;
  • your outputs from following the PHP + MySQL tutorials in session 8 (optional);
  • an index page of your own design (no restriction on using contemporary Web technologies such as CSS3) at the root (or in a subfolder) of your personal domain that links to the above;
  • a WordPress.com  ‘prototype’ portfolio site that demonstrates an effort to explore WordPress functionality and aesthetics;
  • evidence of planning for your portfolio site – paper based site architectures and navigation maps; draft layouts for a specific project including titles and section headings, draft text, images, video, PDFs;
  • a WordPress.org multisite personal portfolio that best demonstrates your design response to the question ““How might I best show what I am capable of to potential employers?” You won’t be assessed on the quality of the projects (these may well be replaced as you progress through the course) – but you will be assessed on the site design – how well you integrate the aesthetics/style/feel, functionality and usability of your personal portfolio site – along with a suitable demonstration of getting to grips with WordPress and leveraging its capabilities;
  • a Tumblog (Tumblr blog) that documents your ongoing thinking, process, planning, reflection, inspiration, collated resources etc. throughout the course of the module.

14. Custom Content Types & Working with Themes

wordpress_themes

We actually covered a lot of ground yesterday… let’s review:

  • Installing WordPress on disndat.uk
  • Comparing changes in the WordPress CMS from WordPress.com
  • adding themes
  • adding plugins
  • WordPress file architecture
  • Pros and cons of WordPress multisite
  • Turning a standard WordPress site into a multisite
  • Changes to the WordPress CMS?
  • Setting up individual websites on the network
  • Editing theme CSS

Those of you who haven’t set up an individual site on the disndat.uk WordPress network see Lewis to:

  • create subdomains of disndat.uk via Hostmonster cPanel
  • add sites to WordPress

Useful References

WordPress comes out of the box with a set of default post types:

Since you are all designing a portfolio site you will most likely require a custom post type – Portfolio Projects. Typically, there are several ways you can add this functionality to WordPress – all of which have their relative pros and cons:

DEMO:

  • BigBang theme
  • ESS Grid
  • Settings > Writing > Your Custom Content Types

TASK:

  1. using Jetpack switch on the Portfolio Projects custom content type on your site;
  2. create a portfolio page for one of your projects – settle on a set of images, video, text you want to use – work these elements up into a page layout;
  3. Send Lewis a link to this page once it’s done.

Customising themes

13. Self-hosted WordPress (II) + Multisite


wordpress_multisite

Hostmonster have not yet resolved the suspension of the datweb.space domain – so I’ve registered a new domain – disndat.uk – and assigned it as an ‘Addon’ domain to the Hostmonster hosting. Exactly the same process as for your domains. We’re now going to install WordPress under this domain.

Install WordPress on disndat.uk

  • create database + database user – DONE
  • download WordPress as ZIP and upload to datweb.space root directory  – DONE
  • unzip via Hostmonster cPanel ‘File Manager’ and move files out of ‘wordpress’ folder and back to root  – DONE
  • edit wp-config.php file  – DONE
  • move WordPress files into at the ‘disndat’ folder – DONE
  • run installation

DEMO:

  • WordPress CMS – what’s different compared to the WordPress.com CMS?
  • Settings
  • adding themes
  • adding plugins
  • WordPress file architecture

Turning a standard WordPress into a multisite

Before WordPress 3.0 (it’s now up to 4.3.1.) WordPress multisite was a separate install. It’s now embedded into the core but needs to be ‘switched on’. Multisite is considered by many to be the ‘dark arts’ of WordPress. It’s often misunderstood and used inappropriately. It creates distinct limitations for individual site administrators – they cannot add their own themes or plugins or embed JavaScript, exporting individual sites from a network can be ‘tricky’ – but it is extremely useful when it’s expedient to ‘share’ resources and also for streamlining administration (one update of core files, themes and plugins for all sites rather than multiple updates for each site).

We’re going to use multisite. If you want to install WordPress and run your own install with ‘all access’ privileges we can do that too.

DEMO:

  • How does the CMS change?
  • Setting up individual websites on the network
    • create subdomains of disndat.uk via Hostmonster cPanel
    • add sites to WordPress
  • Themes
    • jetpack plugin
    • Edit CSS

12. UX Design

ux_design

While I stand by the links I introduced to you yesterday on Web design principles – I didn’t appreciate that you hadn’t actually looked at UX Design yet. UX Design is a set of design principles, approaches and methodologies that focus on end user experience. You should at least try and get a flavour for what UX Design is – it’s a very contemporary approach and many of the opportunities available to you after you graduate will require experience of or be explicitly in UX Design.

My introductory links from yesterday’s session were meant to provide alternative perspectives and histories on UX Design – an approach that has become so fashionable and ubiquitous within the Web, mobile and app development creative industries – that people often forget there are other perspectives.

The issue of the datweb.space domain not resolving is still ongoing – despite three calls of 90 min+ to Hostmonster Technical Support. I’ve now issued a support ticket and am awaiting a response. The trouble is that we can’t proceed with setting up WordPress and a multi-site network without this being resolved.

I suggest you follow up more with yesterday’s tasks to browse and select suitable themes and functionality from the WordPress.org directories:

11. Web design principles & self-hosted WordPress

wordpress_selfhosted

I’m not really here to teach you the principles of Web design – but I don’t think you can build a portfolio Web site without researching and thinking about what good design means to you:

TASK:

  1. Read the links above and follow up with your own research on the essentials of contemporary Web design practice. Write 400 words on what you think are the most important considerations in designing a portfolio Web site.

HINT:

The key question might not be – “What theme and plugins should I use?” but “How might I best show what I am capable of to potential employers?”

WordPress

Install WordPress on datweb.space

  • download WordPress as ZIP and upload to datweb.space root directory
  • create database + database user
  • unzip via Hostmonster cPanel ‘File Manager’ and move files out of ‘wordpress’ folder and back to root
  • edit wp-config.php file
  • run installation

DEMO:

  • WordPress CMS – what’s different compared to the WordPress.com CMS?
  • Creating a Network – http://codex.wordpress.org/Create_A_Network
  • creating subdomains for datweb.space
  • setting up individual sites on the datweb.space WordPress network.

One-to-one sessions

  • Lewis is available for one-to-one sessions out of the daily taught sessions and labs. If you’d like some additional advice or support arrange a session.

10. WordPress.com CMS

wordpress_cms

A thorough look through the WordPress.com CMS…

I’m not going to provide notes for this… WordPress already has a thorough guide ‘Learn WordPress.com’-https://learn.wordpress.com/get-comfy/. You may want to take key notes as we go.

The WordPress.com CMS – while similar to the WordPress.org CMS (and therefore worthwhile getting familiar with before we move to it’s more complex ‘self-hosted’ CMS sibling) has limitations when using a ‘Free’ account – that’s why it’s free. Don’t get frustrated with WordPress.com – it’s still a useful tool for many applications. Learn what it is capable of and what you can’t do with it. You’ll just appreciate the flexibility and control the ‘self-hosted’ version offers you all the more when we start working with it next week.

If you like we can also set up your personal email addresses on the datweb.space Hostmonster hosting…

Review the transition from Web 1.0 – Web 2.0…

ufotext

and the rise of the CMS…

and specifically WordPress…

TASK:

  1. Browse WordPress.com, familiarise yourself with what WordPress is and what it can do.;
  2. Set up a WordPress.com account.

DEMO:

  • Setting up a  WordPress.com website;
  • Navigating the WordPress CMS.

8. PHP & MySQL 101

php_mysql

If you haven’t already done so then complete the last Task from ‘’7. Web Master 101’:

  1. See Lewis and set up an FTP User on the DAT Hostmonster hosting. This will give you FTP access – the ability to transfer files between your computer and the folder associated with your domain on the hosting computer.
  2. Copy your HTML and HTML + JavaScript pages from last week’s exercises to your domain folder and check they’re accessible via a browser. Design a simple index page for these exercises (you can use CSS for this).

The primary domain on the course Web hosting is http://datweb.space – currently showing the default Hostmonster page within the ‘public_html’ folder of the Web server. Your personal domains, now associated with the hosting account as ’Addon’ domains have their root folders within this ‘public_html’ folder. What do you think an implication of this folder hierarchy might be? (think back to the relative paths of hyperlinks in your mini-superbad site) – hint http://datweb.space/digitalrosedesigns/

TASK:

  1. You need to design a simple web page for this DAT 504 ‘Advanced Web technologies’ module or the DAT course that lists and provides links to all your individual domains. Any takers?

So far we’ve been working with HTML, JavaScript and more recently CSS – now we turn to a brief overview and practical exercises using the server scripting language PHP along with SQL – a standard language for accessing databases such as MySQL.

It is possible to install Apache, PHP and MySQL on the Unix based OS X… there’s a step-by-step tutorial here (with links tooled articles for older versions of OS X):

Or a one-click installation solution for both Mac and Windows:

You might decide you’d like to have a working development Web sever on your personal machine… it can certainly be useful… but you also now have access – via your Hostmonster web space – to a fully configured Web server that is already running PHP and MySQL… (show the versions in cPanel)

DEMO:

PHP

There are lots of resources and tutorials for PHP online… w3schools.com is recommended.

I’ve found a relatively recent (Jan 2014) tutorial series – that while missing its illustrative images – seems to provide a useful step-by-step pathway to “learn about elementary PHP 4 or basic PHP 5”:

DEMO:

  • Work through some of these early exercises – copying and pasting code from the tutorials into a blank Textmate document then saving and uploading them to the dat web.space root folder and viewing them in a browser;
  • Switch to editing the remote file.

TASK:

  • Work through the PHP 101 tutorials… try this process for yourself… learn more bout PHP in the process – see how far you get in 30 mins.

SQL & MySQL

Databases are structured very much like a spreadsheet… a table with different values in the columns and different entries in the rows… e.g. the graphic illustration on http://www.phpsmartdb.com/examples/overview-and-basics

SQL is a standard language for accessing databases… SQL can be written via PHP…

DEMO:

Create the database:
Hostmonster cPanel > MySQL Databases… create a database, create a user, assign privileges.

Access the database via phpMyAdmin, use SQL to create table and insert values.

Create the table:

CREATE TABLE symbols (
id int(11) NOT NULL auto_increment,
country varchar(255) NOT NULL default “,
animal varchar(255) NOT NULL default ”,
PRIMARY KEY (id)
) ENGINE=MyISAM;

Insert the data into the table:

INSERT INTO `symbols`(`id`, `country`, `animal`) VALUES (1, ‘America’, ‘eagle’);
INSERT INTO `symbols`(`id`, `country`, `animal`) VALUES (2, ‘China’, ‘dragon’);
INSERT INTO `symbols`(`id`, `country`, `animal`) VALUES (3, ‘England’, ‘lion’);
INSERT INTO `symbols`(`id`, `country`, `animal`) VALUES (4, ‘India’, ‘tiger’);
INSERT INTO `symbols`(`id`, `country`, `animal`) VALUES (5, ‘Australia’, ‘kangaroo’);
INSERT INTO `symbols`(`id`, `country`, `animal`) VALUES (6, ‘Norway’, ‘elk’);

Access the data via PHP:

TASK:

  1. Try this for yourself.

Here are the details for the database:

Database: datwebsp_testdb
User: datwebsp_testu
Password: n!~U~?lGB.Jv

7. Web Master 101

webmaster

If you haven’t already done so then complete the last Task from ‘6. Web Master vs Web History’:

  1. ‘Sign Up’ for a 123-reg.co.uk account, search for a suitable personal domain and register it;
  2. ‘Manage’ your domain from the 123-reg.co.uk ’Control Panel’ then ’Change Nameservers (DNS)’ and set Nameserver 1 to ns1.hostmonster.com and Nameserver 2 to ns2.hostmonster.com and ‘Update’;
  3. See Lewis and get it added as an ‘Addon’ domain to the course Hostmonster Web hosting.

Review:
In order to serve HTML pages to the WWW we require two essential facilities – a domain (and it’s associated DNS) and a Web hosting provider (with it’s associated Web protocols and technologies).

TASK:

  1. See Lewis and set up an FTP User on the DAT Hostmonster hosting. This will give you FTP access to your Web space – the ability to transfer files between your computer and the folder associated with your domain on the hosting computer.
  2. Copy your HTML and HTML + JavaScript pages from last week’s exercises to your domain folder and check they’re accessible via a browser. Design a simple index page for these exercises (you can use CSS for this).

6. Web Master vs Web History

internet_history

Week 1 was about re-familiarising yourself with HTML and JavaScript… and appreciating these can be creative mediums. Yet HTML and JavaScript are older Web technologies – associated with Web 1.0. They’ve certainly evolved since the early days of the WWW (we’ve seen examples of HTML attributes and JavaScript methods that have since been deprecated)… and are still essential… but there are now additional technologies that drive the modern Web – associated with Web 2.0 and beyond – PHP, CSS, MYSQL. We’re now going to shift attention to these more contemporary Web technologies.

As the session title suggests there are two main strands to this session (and the rest of the week) – developing your practical Web Master knowledge + skills vs developing your historical and theoretical understanding of the evolution of the Web and how it works today. These are somewhat interwoven – you kinda can’t do one without the other…

Web History

TASK:

  1. Read/watch these online histories, timelines and descriptions of the evolution of the Web and note 4-6 events you consider particularly significant. Write a 400 word personal history of the World Wide Web.

Web Master

Web Master Tools

TASK:

  1. ‘Sign Up’ for a 123-reg.co.uk account, search for a suitable personal domain and register it;
  2. ‘Manage’ your domain then ’Change Nameservers (DNS)’ and set Nameserver 1 to ns1.hostmonster.com and Nameserver 2 to ns2.hostmonster.com and ‘Update’;
  3. See Lewis and get it added as an ‘Addon’ domain to the course Hostmonster Web hosting.

5. superbad.com – HTML + JavaScript

superbad_head_image

 

superbad.com also contains more complex pages that include JavaScript – a relatively simple example being the link from the ‘f.html’ page above (http://www.superbad.com/1/f/f.html) specificallyhttp://www.superbad.com/1/rungirl/index.html

I’m not intending to teach you JavaScript – but again there are useful online guides and references:

What I encourage you to do is to get a feel for JavaScript through playing and experimenting with and adapting the existing code within superbad.com – using the references and guides above when you need a bit of extra info or help

So following the techniques above we can create a local version of the ‘rungirl.’ page – although a specific issue here is that it’s just not possible to see and so click and drag on the blank.gif file to download it.

However, examining the code shows that the blank.gif – though pre-loaded and sized via the lines:

blancmange = new Image(1,1);
blancmange.src = “blank.gif”;

is never called elsewhere in the code (this may well be a regular issue with superbad.com – it’s an experimental site and so the coding can be a bit ‘rough and ready’)

Since a blank GIF is required we can search Google for blank.gif and find a replacement e.g.http://www.apache.org/icons/ – though I’m going to introduce a better technique for downloading the actual file…

SiteSucker – http://ricks-apps.com/osx/sitesucker/index.html
SiteSucker Manual – http://ricks-apps.com/osx/sitesucker/archive/2.x/2.7.x/2.7/manuals/en/pgs/Overview.html

DEMO: SiteSucker downloading superbad.com – using essentially the default settings.

JavaScript

Let’s take a look at the JavaScript code on this page…

scripts are generally located within the <HEAD> section – i.e. after the <HEAD> but before the </HEAD> tags

<script language=“JavaScript”>

declares a script and it’s type

</script>

and closes the script

var j=0

declares a variable – this variable ‘j’ is used twice further down the code

  • within the function GIRLrun(jj){

j++}

What might it do here?

  • and within the <A> tag as a mouse click event

<A HREF=“#1” onclick=“GIRLrun(j);return false”>

What might it do here?

What’s going on in function GIRLrun(jj){…} ?

if (jj==0 || jj==2){…}

a conditional – if the value of variable ‘jj’ is equal to 0 or 2 then do this…

if (document.images){…}

document.images returns a collection of all <img> elements in the document – referencehttp://www.w3schools.com/jsref/dom_obj_document.asp

so another conditional – if this is an HTML element of type <img> within the HTML DOM (Document Object Model) then do this…

for (x=1; x<=900; x=x+20){
window.scroll(0,x)
}

a for(){…} loop… while these conditions apply do this…

so starting from variable ‘x’ equals 1 add x+20 -> x = 21… and keep doing this for as long as x is less than or equal to 900 e.g. 1, 21, 41, 61, 81….

and the do this bit…

window.scroll(0,x)

scroll the page vertically by the value of x

According to the reference reference http://www.w3schools.com/jsref/obj_window.asp, window.scroll() is DEPRECATED and has since been replaced by window.scrollTo()

So… if we click on the top ‘rungirl’ image we call the function GIRLrun(jj){…} which checks for the value of j, scrolls the page to a set position based on what value j is, and then increases j by 1.

There’s a couple of more lines of code to unpick… within if (jj>=4){…}

document.images[‘rungirl2’].src=“blank.gif”

This swaps the image source if j is greater than or equal to four i.e. if you’ve clicked more than five times then swap the source file for the image with name ‘rungirl2’ from “runninggirl1.gif” to “blank.gif”

top.location.href=’../green/index.html’

top.location returns the topmost browser window of the current window – referencehttp://www.w3schools.com/jsref/obj_window.asp

and the .href= sets the entire URL of the current page – referencehttp://www.w3schools.com/jsref/prop_loc_href.asp

On the 5th click the page loads another HTML file in a different folder…

So how might we ‘tweak” this JavaScript?

TASK:

  1. Try changing the position the window scrolls to by adjusting the values of x within the for(){…} loops
  2. Try loading an alternative image to “blank.gif”
  3. Load an alternative HTML file in a different folder

These principles can be applied to adapting other superbad.com HTML + JavaScript pages…

TASK:

  1. Analyse your “favourite” superbad.com pages noted from a previous exercise and see if you can work out what’s going on.
  2. Create your own ‘mini-superbad’ site of 4-6 interconnected pages by tweaking, adapting and hacking the HTML and JavaScript (and CSS) of your “favourite” superbad.com pages as swell as modifying and replacing their graphics and animated GIFs.

4. superbad.com – HTML only

superbad_head_image

http://www.superbad.com/1/mao/maomao2.html – this is a fairly simple example that only uses HTML.

In Safari 9.0.1 to enable ‘Develop’ menu – Preferences > Advanced > ‘Show Develop menu in menu bar’

  • View > Show Status Bar – shows rollover links at the bottom left of the browser window
  • Develop > Show Page Source > Resources – shows the HTML and embedded images

Using these ‘Developer’ tools allows us to copy the HTML and select and download individual embedded images… which we can then recombine ‘locally’ using Komodo Edit

DEMO: this process

This recreates a local version of this web page, though obviously non of the links will work – unless we repeat the process for each associated link…

DEMO: this for the first circle

  • requires a new folder ‘f’ with the associated HTML page and GIF inside
  • or adjust the HREF attribute in the <a> tag to simplify the file architecture

We can then start to play with this code and the images – for example:

  • changing the size of some or all the GIFs
  • editing the existing GIFs (Photoshop CC 2015 -> Window > Timeline, invert (for example), Export > Save for Web (Legacy) – or follow the ‘Photoshop Tutorial – How To Create an Animated GIF’ on YouTube –https://www.youtube.com/watch?v=T9TN5tPcfIs
  • swapping them for other ‘found’ GIFs (search for ‘GIFs” on Google > Images or look for examples of people making GIFs e.g. Dave Whyte’s Tumblog ‘Bees and Bombs’ http://beesandbombs.tumblr.com)
  • creating our own and swapping these with existing GIFs
  • and finally creating new links between pages

TASK:

  1. Using this page from superbad.com, or another HTML only page you found in your search above, play with the HTML and replace GIFs to create your own ‘local’ HTML only superbad.com style page/(s).

3. Deconstructing & Emulating Ben Benjamin’s 1997 net.art website – superbad.com

ben_benjamin

superbad.com uses only HTML and JavaScript (and a little bit of CSS) – yet it illustrates a more playful, artistic use of the (historic) Web and it’s associated technologies. Despite being close to 20 years old, it’s still relatively robust (it ‘mostly’ works though some HTML attributes and JavaScript methods have since been deprecated) but perhaps more importantly, also feels fresh and original.

Wikipedia – https://en.wikipedia.org/wiki/Superbad_(website)

TASK:

  • spend 20 minutes exploring superbad.com
  • note the URLs of 4-6 pages that particularly appeal to you (you’re unlikely to find them again otherwise)

We’re going to emulate pages from superbad.com (and possibly other net.art examples). The aim of this exercise is to try and shift your perspective so that you begin to appreciate the Web as a ‘canvas’ and HTML and JavaScript as ‘materials’ you can use to make creative work. If you play and experiment with HTML and JavaScript in this way your skills will develop and you’ll become more adept at working with these de rigueur Web technologies. These sessions will introduce you to the tools and techniques that can help you do this.

2. net.art Tools

net_art

We need to collate some new tools – to add to our digital arts and technologies toolbox – and to find some reliable and useful online reference and guides

General

A great place to look for free, cheap, demo software is

Code Editors

and also find some reliable and useful online reference and guides:

DEMO: Komodo Edit

  • folder architecture
  • paragraphing text
  • formatting text – bold, italic
  • styling text – colour, background colour, fonts, size, alignment
  • headings
  • quotations & citations
  • hyperlinks

Image Editors / Screen Capture

The HTML elements and their attributes above allow us to format and style text. While the ‘Images’ element allows us to embed and add functionality for images it’s actually best practice to prepare these first.

DEMO: Easy Crop

  • load image, crop. rotation, constraint
  • resize, name, file format, quality (for JPEG only)
  • capture window, selection

And then embed them in HTML.

  • using the <img> tag and its attributes
  • image as background – select from Google > Images ‘seamless pattern’ -> <body> tag ‘background’ attribute (note not supported in HTML 5)

TASK:

  1. Hand code a single web page for your 400 words on net.art – include example photographs/graphics/images

To access this software on Lab computers:

In Terminal:

mkdir /Volumes/IDAT-APPS
mount -t smbfs //guest@141.163.170.201/IDAT%20APPS /Volumes/IDAT-APPS/
open /Volumes/IDAT-APPS/Lewis/

Example HTML from session:

<!doctype html>

<html lang=“en”>
<head>
<title>My Test Page</title>
</head>
<body style=“background-color:lightgrey”>
<h1 style=“color:blue; font-family:verdana”>This is a Heading</h1>
<p><b>Here’s is some test text that</b> I’m just going to type into the HTML..</p>
<p style=“font-size:160%; text-align:center”><strong>document</strong> to show how to <i>format</i> it later on…</p>
<blockquote>This is an example of a quote…</blockquote>
<a href=“http://www.w3schools.com/html/”>Visit our HTML tutorial</a>

<img src=“images/sunflowers_600px.jpg” alt=“Sunflowers”>
</body>
</html>

1. The Internet as a medium for Art

zebra_net_art

Examples

Wikipedia Definitions

Histories & Manifestos

TASK:

  1. Follow up on some the examples of net.art listed in the articles above or use Google to search for works by highlighted artists.
  2. Collate 3 examples of net.art you particularly like.
  3. Write 400 words on what appeals to you about these works and what, in your opinion, makes them art works that are specific to the Internet.

Introduction

What do you already know?

  • HTML, CSS, JavaScript, PHP, MYSQL
  • How many of you could hand-code a simple webpage with some formatted text and images?
  • How many of you could add additional functionality to that web page using JavaScript?
  • How many of you could create an animated GIF in Photoshop?
  • What Social Networks do you use?
  • Facebook, Twitter, Instagram, Pinterest – others?
  • Do you store media – video, photographs, audio etc. – online? If so what services do you use?
  • Who keeps a blog? What platform do you use?
  • Have many of you used WordPress?

Expectations

  • What do you hope to get out of this module?
  • Imagine this is the last day of the module – not the first. What would you have produced over the previous 4 weeks that made you feel you now have a better understanding of Web Technologies and have learnt new skills?

Module Overview

A mix of historical, theoretical, methodological and practical perspectives…

Week 1

  • The Internet as a medium for Art
  • basic net.art Tools
  • Deconstructing & Emulating Ben Benjamin’s 1997 net.art website – superbad.com
  • superbad.com – HTML only
  • superbad.com – HTML + JavaScript
  • advanced net.art Tools

Week 2

  • 23 years of the World Wide Web – 1992-2015
  • Major trends over this period – Web 1.0 – Web 3.0
  • PHP & MYSQL
  • Content Management Systems (CMS)
  • Introduction to WordPress
  • Introduction to being a Web Master

Week 3

  • Registering and mapping domains
  • Setting up a self-hosted, multi-site WordPress network from scratch
  • Basic WordPress functionality
  • Styling – themes + CSS
  • Advanced functionality – plugins
  • Embedding media + Social Networks
  • WordPress security

Week 4

  • Building you own WordPress portfolio site.

A Typical Session…

  • Show n’ Tell of the previous day’s lab
  • A brief review of the previous session
  • Taught input (no more than 90 mins)
  • Lab sessions – work on tasks
  • Tutorials

Assessment

Most sessions include a TASK. You are expected to complete these. These contribute towards your total mark for the module overall.

So as an example, by the end of Week 1 you should have produced:

  1. A single hand-coded webpage including formatted and styled text and images of your 400 word article on net.art
  2. A mini-site (min of 6 pages) that demonstrates your customisation of ‘favourite’ HTML & JavaScript pages from superbad.com
  3. A Tumblr blog that documents interesting things you’ve come across, inspiration, your developing ideas, critical reflection, planning, useful tools and online references etc.

Week 1 contributes 20% to the overall module assessment – of this 80% will be based on your practical work and 20% on the quality of your accompanying blog.

Tasks in Week 2-4 will also contribute towards the total mark for the module overall – but they will all be working towards you each creating your own WordPress portfolio website – and this will be the major assessable element of the module contributing 80% to the overall module assessment. Again, of this 80% will be based on your practical work and 20% on the quality of your accompanying blog.

<h2>Additional tools</h2>

unsplash.com free photos

Leave a Reply