Education, Web

Assignment 02.04.02: Digital Magazine and Java Script Integration

Jason W. Howell
August 3, 2018

Goal

The goal of this assign­ment is to inte­grate sup­ple­men­tal tech­nolo­gies into exist­ing lay­out skills to solve a com­mu­ni­ca­tion problem.

Objective

Cre­ate a mobile friendly dig­i­tal pub­li­ca­tion that uses a doc­u­mented frame­work, rich media and inter­ac­tive ele­ments to com­mu­ni­cate a coor­di­nated theme.

Background

Assignment

Cre­ate an eight (8) fea­ture tablet-ori­ented inter­ac­tive dig­i­tal pub­li­ca­tion whose con­tent is edu­ca­tional. The “mag­a­zine” or “brochure” series of HTML and CSS web pages should illus­trate an advanced knowl­edge of CSS and HTML. The site must uti­lize aes­thetic design prin­ci­ples to cre­ate an attrac­tive, yet func­tional solu­tion. The use of a frame­work is rec­om­mended, though the solu­tion should appear cus­tomized for the issue and sub­ject mat­ter. Addi­tional inter­ac­tive JS libraries should be inte­grated into your work-flow to pro­vide increased value, detail or expres­sion dif­fi­cult to com­pre­hend from text alone.

Choose a sam­ple sub­ject from the list below:

  • Trade or Fash­ion Show event program
  • Film or music fes­ti­val guide (SXSW)
  • Travel Guide
  • Sports Event News (Olympics, World Cup)
  • Bat­tles of WWII history
  • NASA Moon land­ing history
  • US Dust Bowl history
  • Sci­ence Dis­cov­er­ies or Concepts
  • Eth­nic or Clas­si­cal Music Development
  • Art or archi­tec­ture move­ments and history

Part One

The com­plex­ity of the plan­ning stage is con­sid­er­able more impor­tant for this project than for a basic web page. The orga­ni­za­tion and pre­sen­ta­tion the infor­ma­tion (con­tent) col­lected will make the entire project a suc­cess or fail­ure. If the over­all goal is edu­ca­tional, then always strive to col­lect and present your con­tent in a man­ner suit­able to your intended audi­ence. With proper cita­tion, col­lect con­tent for use that must include images, video/audio and text. Often com­plex con­tent is digested to visual mech­a­nisms, such as tables, charts, dia­grams and maps. Con­sider how using one of these visual tools can ben­e­fit the learn­ing process.

From a design per­spec­tive, con­sider how edi­to­r­ial design in the printed form tran­si­tions to the tablet form, which is a hybridized from of web design. The design solu­tion must incor­po­rate a bal­ance between con­sis­tency of form, yet diver­sity of each con­tent divi­sion. What new issues result, scrolling length vari­a­tion, pag­i­na­tion, etc, are a help and a hin­drance to learn­ing and communicating?

How can the cur­rent inter­con­nect­ed­ness of our dig­i­tal cul­ture con­tribute to the need for con­tent. Cer­tainly links afford a degree of tan­gen­tial con­tent, but the inte­gra­tion of social media and third party file/server inte­gra­tion (Vimeo, YouTube, Flickr, etc) can lever­age the exper­tise and resources of oth­ers in a more effi­cient or con­trol­lable manner.

Sketch a paper wire-frame lay­out of your pro­posed pages, not­ing basic con­tent, com­mon ele­ments, id’s and markup using one of the tem­plates pro­vided in class. Keep it sim­ple at first and mobile friendly, with 2–3 main columns, before you get com­plex. Cre­ate, acquire or mod­ify exist­ing con­tent to suit your needs, but beware of copy­right restrictions.

Part Two

Build a dig­i­tal wire-frame mock-up in HTML and CSS based on your sketches from part one, includ­ing a mobile friendly ver­sion. Use the style infor­ma­tion pro­vided via the frame­work to assist. Begin to place the appro­pri­ate con­tent in as needed, but the empha­sis is on func­tion not on aes­thet­ics. Save this wire-frame separately. 

If per­ti­nent, inte­grate mechan­i­cal aspects of JS libraries with test data. Trou­bleshoot any com­pli­ca­tions, espe­cially tech­ni­cal inte­gra­tion, and adjust design para­me­ters as necessary. 

Please note, wire­frames should be based on a raw frame­work, and should not entirely use fin­ished, free tem­plates found online.

Part Three

Cre­ate a “final” dig­i­tal aes­thetic mock-up using the Adobe XD, Pho­to­shop or Illus­tra­tor frame­work tem­plates and based on the paper and dig­i­tal wire-frames from Part One and Two. Make care­ful notes of dimen­sions, col­ors, images, file­names and style infor­ma­tion. Easy access of this infor­ma­tion reduces con­fu­sion and speeds production.

Part Four

Using frame­work based files pro­vided via pre­vi­ous lec­tures (or via dis­cus­sion sec­tion for this assign­ment), cre­ate a series of web pages using your con­tent and image(s) sim­u­lat­ing the func­tion of the site. Test in browser often. Once your design is com­pleted, post the files to the appro­pri­ate D2L dropbox.

Assessment

  • The fol­low­ing rubric posted on D2L will deter­mine assign­ment score: Assign­ment 02.04.02: Dig­i­tal Mag­a­zine and Java Script Integration

Techniques

CSS, HTML, plan­ning, con­vert­ing files, file hier­ar­chy, struc­ture, nam­ing con­ven­tions, Baker Frame­work, JavaScript libraries

Supplies

TextE­dit, Dreamweaver, image edi­tor, source files

Deadlines

As defined by cor­re­spond­ing cal­en­dar item, drop­box, dis­cus­sion or con­tent topic description.

Deadlines

Fri­day, June 4, 2021. Assign­ment Given.
Fri­day, June 11, 2021. Part One Due
Fri­day, June 18, 2021. Part Two Due.
Fri­day, June 25, 2021. Part Three Due.
Fri­day, July 11, 2021. Files uploaded to appro­pri­ate D2L Dropbox.