Elon University Home

Interactive Writing & Design

This @font-face declaration worked for me…

@font-face {

font-family: ‘Graublau Web';

src: url(‘GraublauWeb.eot?’) format(‘eot’),

url(‘GraublauWeb.woff’) format(‘woff’),

url(‘GraublauWeb.ttf’) format(‘truetype’);

}

Posted in Uncategorized | Leave a comment

Internet Explorer Rubric

I’ve made a page and put it on the server, in a folder called ‘modernizrStart.’ If you open it up in Chrome, you’ll see that it has:

  • A ‘star’ image, which is an SVG
  • An embedded font
  • A CSS animation
  • Music, using the HTML5 audio tag
  • A border-radius rule
  • An RGBa background color, with transparency
  • A media query

None of the things listed above works in Internet Explorer 8. Your job is to fix them all:

  • To fix the SVG issue, replace the SVG with a PNG (provided) when SVG is not supported (in other words, don’t edit my source code to use a PNG instead, but rather use Modernizr to create a fallback to PNG as needed)
  • To fix the font-face issue, use Paul Irish’s Bulletproof Syntax (you may also have to edit your .htaccess file). Please note that the laptop in the lounge does NOT show your font when you use the correct syntax! Annoying, I know.
  • To fix the CSS animation, use a jQuery animation instead
  • To fix the music, create an audio fallback using audio.js
  • To fix the border-radius rule, use PIE.js, in an IE conditional statement
  • To fix the RGBa issues, use Modernizr’s fallback mode to replace that code with a hexidecimal value, then add the appropriate IE opacity rules
  • To fix the media query, use respond.js

This project is due next week. Your grade will be based on how many of these elements you get to work in IE8. Be sure to test in IE8, I will.

Posted in Uncategorized | Leave a comment

Css Animation Rubric

This rubric is pretty short and straightforward, as this assignment is really geared toward creativity, which I do not want to restrict.

  • Create three CSS animations, on three separate HTML pages
  • Use the ‘-webkit-‘ vendor prefix on everything
  • Make sure your animations are different from each other, and are also different from the content we made in class and is on the server. Again, this project is all about creativity, so please don’t minimally adjust existing content.
  • Feel free to make: an interactive infographic, a lo-fi representation of the analog world, a website that relies on animated elements, or anything like what we have on the server.
  • Feel free to re-create reality, or be totally abstract. You can also re-create your favorite video game.
  • If you have a practical use for a CSS animation on a website, make it!
  • Does not have to be responsive
  • Due any time next week.

Some inspirational ideas that we looked at in class:

Posted in Uncategorized | Leave a comment

Intro to CSS Animations

CSS Animations are pretty easy to code. They use Keyframes, as nearly all animations do, but the Web doesn’t have a timeline, so we add our keyframes via code. This makes the syntax look a little wonky, and forces you to fully think through what you want the start, end, and loop to be of your animation very carefully.

But again, it’s pretty easy. As a refresher (or in case you missed class), here’s a reasonably concise summary of the CSS transform properties:

http://css-tricks.com/almanac/properties/t/transform/

…and a summary of how to make a basic CSS animation:

http://css-tricks.com/snippets/css/keyframe-animation-syntax/

 

Posted in Uncategorized | Leave a comment

Schedule in Brief

I want to give everyone an outline of the remainder of our semester. Here’s when our assignments will be due:

  • Parallax: November 12 (10% of your grade)
  • CSS Animations: November 17 (15%)
  • Modernizr/IE: November 24 (20%)
  • Google Maps: December 5 (15%) (feel free to hand it in early)

That totals 60% of your grade, so work hard!

Posted in Uncategorized | Comments Off

Parallax Rubric

I would like everyone to make a website that uses a JS/JQ plugin which changes the appearance of your page upon either scrolling, mouse position, keyboard commands, or something similar. Examples include:

For any of the above plugins, I’d like you to control the narrative, to try to tell a ‘story,’ in a very loose sense. If there is a progression of ideas as the user scrolls, for instance, that’d be great. Remember Jess & Russ?

Alternately, you are more than welcome to design your personal portfolio as a parallax website (I guess that tells your story?). If you do not have all of your desired content for an online portfolio, you can substitute dummy content / ipsum.

You can also use a plugin that responds to the cursor’s position, such as Plax or Parallax.js. I’d encourage you to make something more interactive and visually engaging than the ‘car in desert’ thing we made in class.

This project will be due Wednesday, November 12. It is worth 10% of your grade.

Posted in Uncategorized | Comments Off

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 | Comments Off

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 | Comments Off

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 | Comments Off

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 | Comments Off