web2: CMS, frameworks & libraries

Exercise 4.3: feedback & debugging

Get some feedback from your group. Create a list of things to improve or debugged. Create a post in Slack or your website where you can check them off as fix them. Share the post with your group members and let them edit so everyone can add to it.

Be sure to add your project title and group members names to the post

Get feedback create a todo list (Post it today. Edit it as you go this week.)


Exercise 4.2: beta version

Publish a working version of your application to the web. This version should include basic functionality including some of the following:

  • user sign-in
  • uploading images
  • adding captions & titles
  • viewing galleries
  • viewing individual photos
  • allowing likes & comments

Link your application from your /web2/ site, clearly labelled ex 4.2 beta version DUE: Friday, May 4th

Link to it from your Slack feedback group.

Get feedback from your Slack feedback group (Monday May. 7 / Tuesday May 8)


some examples from last year

Note that the projects were not exactly the same, but thought it might be helpful for you guys to check them out anyway.


Exercise 4.1: Micromediagram Project Plan

Create a project plan with the following elements:

  • a general description
  • analysis of the project brief and similar applications
  • a creative concept
  • database documentation
  • wireframe, moodboard or design mockup
  • a timeline for production

Link your plan from your /web2/ site, clearly labelled ex 4.1 MicromediaGram Project Plan (or similar) DUE: Friday, April 20

Link to it from your Slack feedback group.

Get feedback from your Slack feedback group (Monday Apr. 30 / Tuesday May 1)


Resources, exercises & projects

Before doing anything more: join our Slack micromediaGram channel

And check out the project design

This is a joint project, integrating your work in Comm & Info Tech and Web 2.

It integrates the backend work you have been doing in SQL, mySQL & PHP with the frontend work you have been doing in html, css & js.

The objective is to build a photo-sharing application that allows users to upload photos, view galleries, star favourites and add comments.

Ideally the application will be mobile-first & responsive and work across a variety of devices.

resources

topics

demos

Feedback

  • vendor prefixes: shouldiprefix
  • .offset-md-??
  • add images to demos
  • image sizes (still!!)
  • tags: dl, dt & dd
  • transform is better than width / height
  • .img-fluid
  • check console / elements
  • link to project directly from homepage
  • organize your home pages!!

Resources, exercises & projects


Setup a page using Bootstrap in a new folder i.e. web2/bootstrap

Add content from your Wordpress site using some of the Bootstrap features

due: March 7 / 8


Create a "friends & family" site using Bootstrap

Add content and use some of the Bootstrap features

  • take portrait photos of at least 3 people, edit them in photoshop and publish them online
  • add a caption to each photo
  • feel free to use video too!!
  • write a brief bio or anecdote for each
  • add a list of at least 3 of their favourite things
  • add a banner image
  • create a mobile-first, responsive layout that uses Bootstrap's grid
  • include a nav bar with link to
  • check out and add 2 or 3 components of your own

See Jane's story (Sugru)

due: March 28th



Create a site using Wordpress. Your site can be either like a regular website or a blog or a combination of both, but be clear on the differnces.

Your site should include:

  • a minimum of 4 posts / pages (but can include as many as you like)
  • each post or page should have some well-developed content, ideally with an intro, some details and a conclusion
  • posts & pages should all include images, illustrations or videos
  • a gallery (of your own photos), edited in Photoshop
  • clear navigation (menu)
  • your name & link to your web2 page
  • a "homework" area with your original posts etc

evaluation:

You will be evaluated on the following:

  • written content (including 10% for spelling & grammar)
  • design & aesthetics including
    • colours
    • typography
    • layout
    • quality & editing of images
  • user exerprience and user interface
  • technical use of Wordpress tools
  • backup & restore

due: February 26th or 27th


To backup Wordpress we need to back up:

  • the files in the /wordpress/ folder
  • the database

backup files

# login to your webserver using ssh
ssh STUDENT#@micromediaweb.com
[your password]

# navigate to your web2 folder
cd web2/
# create a tarball g-zipped file of your entire wordpress folder
tar -zcvf wordpress_backup.tar.gz wordpress
      

restore files

# login to your webserver using ssh
ssh STUDENT#@micromediaweb.com
[your password]

# navigate to where you have your backup tar.gz file (web2/ ?)
cd web2/
# unzip your tarball file
tar xfz wordpress_backup.tar.gz
      

backup database

login to adminer (mySQL) with your user name & password. HINT: you can find them in your wp-config.php file if you have forgotten.

dump or export your db
  • select your WP_web2_####### database
  • click "dump"
  • choose "save" and click export

restore database

login to adminer, as above and do the following:

  • click on SQL command
  • either paste the raw SQL, or choose a file
  • click on execute

If it works, you should see your tables being recreated. Don't worry if there are errors saying the db or tables were not created because they already exist.


Write a blog entry on an article you have read. It can be this one: "Which is Better?" , something from my Twitter feed, or an article you find related to Wordpress or web design.

Your entry should include:

  • link to the article
  • an image
  • a brief summary of the article
  • your thoughts on the article
  • some other related thought or not

due: February 12th


Wordpress dashboard

Add content to your Wordpress site including:

  • a post with a response to the article
  • a page
  • images in both the post & the page
  • a gallery of at least 6-9 photos
  • create a menu (appearance > menus)
  • bonus: do some more configuration

due: February 12th


Create a home page in a subfolder named web2/ to link all your assigments.

Please include:

  • your name
  • a link to your web1/ homepage
  • a clearly labeled section for all your exercises and projects
  • plus the following elements:
    • title
    • header & footer
    • nav
    • an image
    • a quote on design or web development
  • bonus: a link to something you did over break, a tutorial, a drawing, some freelance work etc.

And what's the difference between wordpress.com and wordpress.org

Read this article: "Which is Better?" to find out

Once you have installed Wordpress, please respond to this article with:

  • a brief summary
  • your takeaway
  • some other thought, idea or epiphany

But perhaps the best resource for learning how to manage a Wordpress site is the Codex



//login to server
ssh STUDENT#@micromediaweb.com
[enter password]

//navigate to the proper folder i.e. /web2/ using
ls // list directory or folder
ls -l //list -long to see directory with info
cd directory_name // change directory
cd .. // go up a directory

// download, unzip and move wordpress directory
wget http://wordpress.org/latest.tar.gz
tar xfz latest.tar.gz

//remove the g-zipped file
rm -f latest.tar.gz

//you can do this in Sublime Text > sftp or using SSH & linux
//navigate to your wordpress folder then
//change permissions on wp-content directory
chmod -R 777 wp-content

// having problems updating?
// login to your web server using ssh commands above
// navigate to your wordpress folder 
cd web2/wordpress
// change file permissions
chmod -R 777 wp-admin;
chmod -R 777 wp-includes;

  • edit the wp-config.php file add db info WP_web2_##student## for both database and username.
  • add the following near line 82:
    /*allow updating directly, without sftp*/
    define('FS_METHOD', 'direct');
  • go to the directory with the wordpress site
  • create username and password
  • set permissions on /wp-content folder to 777

Your Wordpress database is: WP_web2_##student## . Obviously replace **student** with your stuent number: i.e.
WP_web2_1819999

Once you have uploaded wp-config.php with the changes, go to your wordpress folder i.e.
wordpress folder

Wordpress will ask you to create a user, give your blog a title then ask you to login.

If it all works you should see your Wordpress Dashboard!!

Try to login using Adminer.

adding new themes?
host: localhost
user: STUDENT NUMBER
pass: same as for Sublime


412-200-VA

This course is a follow-up to web1: html, css & js.

We will learn how to install and manage a Content Management System, like Wordpress & Bolt CMS.

We will work with various frameworks and libraries like jQuery and Bootstrap to speed up web page development.

We will also complete a joint project together with your Comm & InfoTech class & Hugo, creating a dynamic website using a database.