Elon University Home

Interactive Writing & Design

jQuery is your Friend

Some of teh cool jQuery-based plugins I showed y’all in class Monday:

Book-like page turning:

http://www.turnjs.com/

Social media icons that animate:

http://www.class.pm/projects/jquery/classysocial/

Make a path to control the scrolling of your site:

http://joelb.me/scrollpath/

Lettering.js: great in combination with fitText.js – break all of your text lines (h1 tags, h2 tags, etc.) into <span>s that can be animated individually. Also works really well with Scrollorama.

Or Super Scrollorama. Or Scroll Magic. Please note that those last three jQuery plugins are written by the same guy, who is typically terrible at explaining how to use them.

Tilt Shift: Nick pointed out that this should only work with pictures that are taken with a tilt-shifting lens, but if you really want to get this effect to work, you can simulate tilt-shifted pictures via Photoshop.

Tubular: Put any YouTube video into the background of your page.

 

Additionally, here’s the mobile re-direct script I recommend using to send people to the mobile version of your website:

https://github.com/sebarmeli/JS-Redirection-Mobile-Site

And here’s the parallax framework we’ll be using in class today:

http://markdalgleish.com/projects/stellar.js/

Posted in Uncategorized | Leave a comment

Forget about add2home.js

Class,

It turns out that the JS plugin I asked everyone to use on their jQuery Mobile website has been changed substantially and is still in Beta since the release of iOS 8. So I will no longer require that you use it on your project. I couldn’t get the beta version to work.

That said, I would still like you to make your JQM site web-app-capable. Use the <meta> tags from the WebAppTemplate.html file on the server, and add your own apple-touch-icon and startup.png files.

 

Posted in Uncategorized | Leave a comment

Getting started with Foundation

The first step in completing the Foundation portion of your frameworks assignment is to do the mockups. Remember, Foundation works on three assumed screen sizes: small, medium, and large – and your assignment is to come up with a layout strategy that adjusts content to fit each size screen perfectly. Be sure to create layouts that require layout changes for each resolution. You are encouraged to make the ‘large’ version somewhat complicated, from a layout standpoint, and allow it to simplify as your browser gets to the smaller sizes.  Remember, you have to hand in your mockups, too, so try to make the code do what your mockups due. If you can’t get it to work, I’d prefer you hand in something that doesn’t exactly do what you intended, rather than going back and simplifying your mockups.

  • Firstly, download the Foundation framework from foundation.zurb.com – click the big ‘download’ button, then on the following page, choose the ‘download everything’ button.
  • Relocate the downloaded folder to your preferred workspace (desktop, external HD), and rename it simply ‘foundation’
  • Drag the ‘foundation’ folder into Brackets. Open the index.html file and delete everything from the opening <body> tag to the scripts at the very bottom of the page (line 12 to line 158), and save your file.
  • Foundation is based on a row system – every bit of content you add to your page has to be inside a <div class=”row”>. You’ll have a lot of these rows. As a way of keeping things organized, I recommend two things: 1) use <div> tags for the rows, and other invisible element tags (header, article, section, etc.) for the interior sections, whenever possible, and 2) indent your code, so your ‘rows’ are all left-justified, and your interior content is indented.
  • Create a ‘row’ div, and break up the content inside using a base-12 grid system. Remember, you need to declare the number of columns each element will occupy at each of the three resolutions.

Here’s an example:

<div class=”row”>

<article class=”large-3 medium-6 small-12 columns”></article>
<article class=”large-3 medium-6 small-12 columns”></article>
<article class=”large-3 medium-6 small-12 columns”></article>
<article class=”large-3 medium-6 small-12 columns”></article>

</div>

The above code would create a row of content that would display as four articles across on a large screen. On a medium-sized screen, it’d show two articles side-by-side, and then stack another two articles side-by-side underneath it. On a small screen, each article would occupy the full width of the screen (12 columns).

  • The Foundation website’s ‘kitchen sink’ page has great examples of all of the cool things you can do.
  • It is possible to create more complex layouts using nested rows – see the ‘kitchen sink’ for an explanation of how.
  • Be sure to test your layouts and see that they work.
Posted in Uncategorized | Leave a comment

How to get started with jQuery Mobile

First of all, you’ll be making this website for the same restaurant as the one you did with skeleton, so you should re-use all of the elements (pictures, menu items,  etc.). You can also use the same color scheme and fonts, if you wish.

To get started, look through the available display options for content on the jquery mobile website. Listviews, for example, are practically custom-made for making a restaurant menu.

Once you have an idea of what you want to make, download the complete jQuery Mobile framework (“latest stable,” they call it on the website).

This framework comes with a LOT of files, only a few of which you need. Download our boilerplate from the IM server – already linked to jQuery, which you need – and rename the folder. You need to copy over and link to multiple files from the jQuery mobile download:

  • jquery.mobile-1.4.4.min.css
  • jquery.mobile-1.4.4.min.js
  • The ‘images’  folder from the download

There are other files that you may want to link to, such as jQuery mobile theme files, but the above files are required to get the framework to function. In addition to copying the files into your working folder, you need to link to each one in your index.html file. Be sure to link to the jQuery mobile JS file after your link to jQuery. Also, link to the JQM stylesheet before the link to your own stylesheet.

JQM works in a strange way – you put all of your content in one big index.html file, designating ‘pages’ in your code. When loaded in a browser, the first ‘page’ shows up, and the others only show when you link to them (by replacing the start page). So, you’ll need a nav to be able to move between them.

Once you’ve thought out the page structure of your website, code unique pages like so:

<div data-role=”page”>

<div data-role=”header”>header content </div>

<div data-role=”content”>main content here </div>

<div data-role=”footer”>footer content </div>

</div> <!— close page –>

Refer to this page to learn how to add particular forms of content. For instance, to add a nav bar, follow these instructions:

http://demos.jquerymobile.com/1.4.4/navbar/

Once you’ve finished creating the layout and adding content, add three more things:

-A color scheme, via the ‘theme roller’ – I’ll show you how to do this in class on Wednesday.

-the ‘web app’ <meta> tags that make your page web-app capable – there is a file called ‘WebAppTemplate.html’ on the server that you can copy and paste from

-the ‘Add2Home.js’ script, which creates a pop-up telling iOS users to save the website to their homescreen. Fine it here: http://cubiq.org/add-to-home-screen

Upload the project to a server, test it (on a phone, that’s how I’ll grade it), and send me a link.

 

 

 

 

Posted in Uncategorized | Leave a comment

How to get started with Skeleton

Let’s review how to use each of these frameworks so you can make what you want with them.

1. Skeleton

  • The aim of this project is to make a website for a restaurant. I encourage you to select an existing restaurant that already has a website, as you’ll be able to ‘steal’ all of their content (images, menu, etc.). Although the primary aim of the assignment is to test your skills with frameworks, you still need to build a complete site for the restaurant – don’t expect to get away with only making a home page. You’ll need a menu page or pages as well, at a minimum. There is no set number of pages for the assignment, just a requirement that you cover all the required content for a restaurant site. Restaurant sites also need to indicate the location, open hours, ways to contact it (phone number, social media), and some images of the place and food. Think it out ahead of time. Then grab all the existing content you can from their existing online site.
  • Download the framework from getskeleton.com, move the downloaded folder to where you’d like to work (external drive, desktop, whatever), and rename the folder. Then drag the folder into Brackets.
  • Skeleton’s download comes with content already in the HTML. In Brackets, open up the index.html file, and delete everything between the opening and closing <body> tags.
  • Skeleton uses a base-16 grid. In other words, you need to break your website concept into horizontal rows, and then determine  how many elements will be in each row, and how much relative horizontal space each will occupy. So, to create a header that spans the width of the browser on all screen sizes,  say:

<div class=”sixteen columns”>Content goes here </div>

To declare two elements that share the horizontal row’s space evenly, split the sixteen columns into a pair of eight:

<div class=”eight columns”>Left-side content goes here</div>

<div class=”eight columns”>Right-side content goes here.</div>

  • You can nest rows within rows – it’s explained on the getskeleton home page – to  make a more complicated layout. I also encourage you to use the built-in styles of the framework, such as how it styles buttons and text.
  • While skeleton does a decent job of downsizing your content for mobile, you’ll almost certainly need to write a few media queries to get all the parts to do exactly what you want.
  • Remember that skeleton does not include the CSS to make images automatically downsize in accordance with their containers. Add this to your custom CSS file: img {max-width: 100%;)
  • Be sure to test your site in multiple browsers at multiple resolutions. If there are any browser inconsistencies, consider downloading normalize.css and linking your pages to it.
  • Upload your completed site to a server, and send me a link. Done! (only two more frameworks to go)
Posted in Uncategorized | Leave a comment

Responsive Framework Rubric

Yes, it’s the rubric you’ve all been waiting for!

We’ll be using three responsive frameworks: Skeleton, Foundation, and jQuery Mobile. To get started, go to each of these websites, download each framework, and organize your folders so you’ve got three unique locations, one for each framework, that are easy to find.

For Skeleton and jQuery Mobile, I’d like everyone to pick a restaurant – local or far away, but a real restaurant – and make a website for them. Please note, you will use the same restaurant for both Skeleton and jQuery Mobile. If you choose an existing restaurant that already has an online menu, it’ll make your life easier. We will make this jQuery Mobile-based version of the website web-app friendly, by including the <meta> tags explained in class last week (and located on the server as ‘WebAppTemplate.html’), and we will also add a popup that indicates to users that they should save the website to their home screen on iOS.

For Foundation, a restaurant website is not robust enough to warrant the complexity of the framework. Instead of picking content for the Foundation framework, I’d instead like everyone to make three layout mockups for foundation: one large, one medium, and one small. You can make these in Photoshop, Illustrator, or in the analog world (pen, paper), but I’d like you to hand them in along with your coding. The Foundation part of your project does not require content, but you can either use some dummy content, or just use colors, to indicate what the different sections are.

I will walk you through how to use the jQuery Mobile framework in Monday’s class, and on Wednesday, we can have an informal lab during class time to debug problems and discuss approaches. The more prepared you are (with content, images, and mockups), the more helpful it will be. As with all lab sessions, attendance is optional (but strongly recommended if you want any help).

If you’d like some help getting started with Foundation, here are some helpful links:

Getting started with Foundation:

http://www.webdesignerdepot.com/2013/11/how-to-get-started-with-foundation-5/

Tutorials for nearly every aspect of Foundation:

http://webdesign.tutsplus.com/categories/foundation (includes some tutorials for Foundation 4 – we’re using Foundation 5)

Examples of sites that use Foundation:

http://zurb.com/responsive?utf8=%E2%9C%93&style_id=&framework_id=1&name_or_style=

 

This project will be due on Monday, October 27th. It is worth 20% of your grade.

Posted in Uncategorized | Comments Off

Web Apps

Web Apps are Websites that, when added to the home screen on a mobile device (primarily iOS, but also kinda works on Android), looks and feels like a native ‘app’ (even though it’s still just a Website being loaded in mobile Safari). To make a Webpage web-app capable, just add the <meta> tags in the WebAppTemplate.html file to your project. Options include:

  • Setting the status bar to match the color of your app
  • Setting a splash page
  • Removing the address bar and share bar so the website runs full-screen
  • Setting Apple ‘Touch Icons’ for varying resolutions

A very good roundup of how to do all of this, as well as an explanation of all of the options, can be found here:

http://blog.teamtreehouse.com/optimizing-mobile-web-apps-ios

Posted in Uncategorized | Comments Off

Layout & Nav Rubric

Finally, our assignment rubric Woo HOO!!!!

Please try to contain your excitement.

Firstly, the

NAV RUBRIC

Please choose to implement three (3) of the following options:

  • A nav that uses Flexbox
  • A responsive nav that changes appearance when you resize the browser
  • A ‘show/hide’ style nav that uses the :target pseudo-class – an example is on the server
  • A nav that uses jQuery to work – examples include the Magic Line nav and the jQuery drop-down nav.
  • A drop-down navigation, like this – I’ll make a basic one in class Monday, and there’s one on the server.

A few additional notes:

  • The nav shouldn’t ‘go’ anywhere; that is, make your links go to ‘#’
  • The nav can (and should) be on a page by itself, i.e. not on the same page as your layouts. You could even make all three nav’s on one page….
  • You can use our examples on the server, just be sure to personalize your version so it looks different.

And now, without further ado…

LAYOUT RUBRIC

Please choose and implement three (3) of the following options:

  • A flexbox layout (either the entire site uses flexbox, or you use a fixed-width container, which has internal elements controlled with flexbox. Versions of each are on the server)
  • A horizontal layout – I recommend using the ‘NEWhorizontalScroll’ file as a starting point (on the server)
  • A vertical layout that uses a jQuery plugin, like fullpage.js (examples on server), or even a parallax plugin
  • A crazy, wacky layout never-before-seen on Earth. I have a (silly, basic) example on the server called ‘fourCorners’
  • A full layout that is totally responsive, using media queries.*

A few additional notes on the layouts:

  • I don’t care they have content. Some layouts are easier to achieve with content – for example, the mediocre horizontally scrolling pages I showed in class on Wednesday – and some may be easier without content. Totally up to you.
  • Your layout can have a navigation, but it doesn’t need one.
  • I encourage you to color the different sections so you and I can tell what’s going on

I haven’t decided on a concrete due date – how does ‘any time before Fall Break’ sound?

 

*We will learn to do this on Monday. This one requires that your layout have content. This is not the same as using a responsive framework, like Skeleton. Please don’t do that for this project, as it’s our next topic in class and we’ll have an assignment for it.

 

Posted in Uncategorized | Comments Off

An Update on Layouts

Class,

I’ve made some new projects and put them on the server – let me tell you about them.

Firstly, I took the ‘basic horizontal’ site that was on the server and added our ‘scroll.js’ script to it, so it can now use a navigation bar to scroll around horizontally. If you plan to make a horizontal site, I’d definitely use this new one as a starting point, rather than the two ‘broken’ ones I showed in class.

It can be found on the server, in the ‘layouts’ folder, and is named ‘NEWhorizontalScroll.’

Next, I made a site using fullpage.js to show the layout of the Powell Building. It includes an ‘elevator’ for navigation. It can be found on the server in the ‘layout’ folder, and is called ‘powell.’

Lastly, I made a page with a huge wrapper – 10,000px x 10,000px – and put named anchors in each corner of the page. There’s a fixed-position nav that will move you from corner to corner. The wrapper itself has a gradient on it. Not high art or anything, but this could be a good start for thinking about unique ways to lay out a site. It’s also in the ‘layouts’ folder, called ‘fourCorners.’

 

Posted in Uncategorized | Comments Off

Interesting Layout Plugins / Ideas

Firstly, our FullPage.js:

https://github.com/alvarotrigo/fullPage.js#fullpagejs

An interesting one we looked at in class, which ‘loops’ four pages of content:

http://tympanus.net/codrops/2013/09/05/sliding-horizontal-layout/

The funky page that has little squares ‘animate’ between pages:

http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

The ‘Origin of the Species’ book layout:

http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/

Posted in Uncategorized | Comments Off