Elon University Home

Interactive Writing & Design

Listen to him, he’s your President!

Posted in Uncategorized | Comments Off

jQuery Rubric

I’d like everyone to choose TWO jQuery-based projects and see them to completion.  As a general rule, please make your versions look ‘complete,’ that is, somewhat more realized than the bare-bones examples we have on the server; Also please make an effort to have your work be noticeably different than what we made in class.  Here are some specific rubrics:

Google Maps:

Create a map centered around a unique location, and add multiple custom markers and infowindows.

Requirements:

  • At least two markers
  • An internal logic, i.e. you identify locations along a theme (restaurants, points of interest, where radioactive waste was found, whatever).

Above and beyond:

  • Create a map that is historical, fictional, or otherwise adheres to a non-traditional approach to using Google Maps.  Use the ‘Styled Map Wizard’ to make a cool looking color scheme that fits with your content.

Shadowbox:

Requirements:

  • A gallery of images
  • Make sure the buttons (forward, backward, close) show up

Above and beyond:

  • Use some of the customization options on Shadowbox (detailed on their website)
  • Embed non-image content (websites, videos, YouTube, Flash, etc.)

Alternates:

  • Use Fancybox, Lightbox, or any other jQuery image gallery solution.

Facebook/Twitter:

Requirements:

  • Create a page with an embedded Twitter feed AND a Facebook like button.  I want you to do both to count for one of your two jQuery projects (because it’s easy)
  • Make sure it works!

Above and beyond:

  • Customize the Twitter feed’s appearance and size
  • Create a live hashtag stream of relevant content

Alternates:

  • Embed a FB ‘share’ button, or use any of their other dev tools

Unslider:

Requirements:

  • Create a page with an embedded slideshow
  • Use at least four images

Above and beyond:

  • Customize the appearance and options for the Unslider

Alternates:

  • Use an alternate slider (Anything Slider, WOW Slider, etc.)

Scrollorama:

Requirements:

  • Create a page with animated content via scrollrama.js

Above and beyond:

  • Try animating things other than HTML text
  • Try using numeric CSS properties beyond what we did in class (opacity, zoom, position)

Alternates:

  • Create a page with any other parallax jQuery plugin.
Posted in Uncategorized | Comments Off

Maps Update

Folks,

In case you’re struggling to get multiple markers and infoWindows to work in your Google Map, I’ve updated the map on the IM server to show two marker/infoWindow points.  Basically, you need to change things from just ‘marker’ and ‘infowindow’ to ‘marker1,’ ‘infoWindow2,’ etc. – same with the icons and the latitude/longitude of the point on the map.  You’ll have the potential for multiple infoWindows to be open at once – that’s fine, for now (there are solutions to this, if you want to look it up, but iI don’t care for the assignment).

Enjoy your turkeys.  I’ll be late to school next Monday (doctor’s appt.), but I’ll be around to help all week. More JS fun in our last class.

Posted in Uncategorized | Comments Off

THIS IS WHY WE ARE LEARNING THIS STUFF

Pure genius:

Fool.js — I pity the user!

Posted in Uncategorized | Comments Off

JQM Rubric

This one should be pretty simple:

  • Use JQuery Mobile on your site.

The End.


no, just kidding.  A few more things:

  • Customize the appearance of your site using Theme Roller
  • Assemble a menu using the ‘listview;’ consider using icons, thumbnails, a combination of <h3> and <p> tags, and anything else you like.
  • Use small image files throughout
  • Remove the extra stuff in our boilerplate (header, footer, HTML5 shiv, link to jQuery, #wrapper)
  • Don’t allow for any ‘dead-ends’ (pages a user can navigate to, but not from)
  • Include a ‘back’ button on subsequent pages, or use the JQM ‘navbar’
  • Comment your HTML, or you’ll get lost.  Also, name your <div>s with ‘data-role=”page” the name of that page, i.e. <div data-role=”page” id=”#aboutus”>

 

Posted in Uncategorized | Comments Off

JQuery Mobile

Folks, two things regarding the net phase of our mobile project:

I kept calling it JQTouch – which exists, but we’re using JQ Mobile.  Oops.

I’ll go over how to set up a JQM project, but in a pinch, you can link to the necessary files by copying and pasting this into your <head>:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
Posted in Uncategorized | Comments Off

Responsive Rubric

For the responsive version of your site, I’m looking for the following:

  • A fluid grid, with ALL values in percent or em – no pixels! (The only exceptions are for your media queries, and if you set a ‘max-width’ on your wrapper).  Remember, creating a fluid grid requires that you first design your site at a fixed width, then calculate what your percentages would be for widths using target / context = result.
  • One CSS stylesheet controlling the appearance (and media queries) of all of your pages.
  • A series of media queries that correct any issues that arise with your design as the browser window becomes smaller (please note, I’m not testing on a phone or tablet, I’ll just be re-sizing a browser window).

So, if content sticks out of its container, or the container goes off-screen, or your nav buttons look cramped, or the relative sizes of your text get screwed up when you resize the browser, that’s exactly where you’ll want to add a media query to fix the site.  There’s no minimum / maximum number of media queries, but note that the use of a flexible grid, combined with clean HTML and CSS, should not necessitate more than 10.   My example in class will use about five.

If your desktop site uses a large image, such as one that stretches to fill the background of your site, replace that image with a smaller image for media queries that approach phone-size width (<600px).  Keep in mind this can only be done via CSS, so it requires that your initial design add a background image to a <div> that can be changed later, not an HTML <img> tag.

You are encouraged to re-use assets from the mobile-only version of your site, including images, icons, and text content, but I strongly encourage you to create this responsive site starting from our boilerplate, and just copy and paste images, CSS and HTML.  Trying to adapt the mobile-only site would make this project much harder.

 

 

Posted in Uncategorized | Comments Off

Mobile-Only Rubric

Here’s what I’m looking for in the mobile-only version of your site:

Objectives

  • Very small file sizes: no image files over 100k, no link to jQuery, as much as possible <25k. (PLEASE use Photoshop’s ‘save for Web’ option)

    NOTE: As we did in class, if you want a larger image file for your desktop version of your site, that’s fine, jsut ve sure to replace the large image witha smaller one in your media queries for when you shrink the browser window.

  • No pages wider than your device! If you can scroll at all horizontally when you view your site on a phone, so can I, and that’s not good.  Remember, width: auto, not width: 100%.

    NOTE: iOS has a little ‘overscan’ function that makes it look like you’re scrolling ‘past’ your page to a grey background.  That’s fine; I don’t want your content to extend beyond the natural width of the screen.

  • Icons and titles: give your pages an Apple Touch icon, and keep the page title(s) short, under 16 characters.
  • No floats, columns, or CSS positioning – everything should be one column, stacked vertically.

    NOTE: Floats and positioning are fine inside an element that’s not wider than your page; i.e. if your header is set to ‘width:auto;’ and you float an image inside it (or position something absolutely inside it), it’ll be fine.  The aim here is to prevent a mobile layout with columns – that’s all.

  • Remove all non-primary content, only show what’s necessary
  • Use one CSS page for all of your HTML pages (unless you want to modularize your CSS into fonts.css, layout.css, etc.)
  • Have all telephone numbers ‘link’ to phone usage
  • Set margin and padding to zero for your page, or use the CSS reset
  • Make buttons large enough to press, and text large enough to read.  No hover effects on buttons.
  • No JavaScript, no frameworks, no plugins,  no responsiveness / media queries.

FYI

The best way to utilize a site like this is to place it a sub-domain (m.yoursite.com), and detect when users go to your primary site with their phones.  You’d re-direct them to your mobile site, but your mobile-only version would have a link to the ‘desktop version.’  There’s no need to do this for our assignment, but everyone should note that the JavaScript-based user agent detector we set up last week works great with a link to the desktop site (that is, it does not re-re-direct you back to the mobile site on your phone).

Posted in Uncategorized | Comments Off

Three Versions

A reminder, we’re making three mobile versions of your restaurant Websites: a mobile-only one (that’d be placed in a ‘mobile.yourURL.com’ sub-domain, with a redirect), a responsive one (adapting to any screen resolution, more on this Wednesday), and a JQTouch one (next week).  Some general suggestions on how to start out:

Your mockup for Professor Motley’s class is assumedly done as mobile-only, so you should be able to adapt your design easily to code.  Start with our boilerplate, and remember that the less code you use, the better: no widths, no margins, no floats, no columns.  Set your <body> to have a margin and padding of zero. The worst-case-scenario is if your page is slightly wider than your screen when you test it on mobile.  You can make your pages as tall as necessary.  Also remember that part of mobile-only design is stripping away what isn’t needed, so, for a restaurant site, you’ll only want to see an address / map / telephone number,  some menus, an ‘about’ page, and that’s about it.

On Wednesday, we’ll walk through the best approach to a responsive site, so this should make more sense.  After that, I’ll make a mock mobile-only restaurant site, then start adapting it to be responsive. We may not get to that until Monday; for those of you struggling to wrap your head around how to start this project, it should help significantly.

Also: Some of you asked about alternatives to the <select> menu for mobile-only navigations.  A roundup of the options can be found here, but please note that one of these uses SASS ( a variant of CSS we briefly looked at a few weeks ago), and another isn’t supported in iOS6 or below:

http://css-tricks.com/responsive-menu-concepts/

Posted in Uncategorized | Comments Off

IE Project updates

For those of you still toiling with the IE project, here are some additional fixes to the issues (not covered in class):

Getting the ‘Pretendo’ font to work in IE8: I’ve added an ‘.EOT’ version of the Pretendo font to the assignment folder on the server (COM540_Walsh > IE > Pretendo.oet); if you copy this file into your ‘marioToFix’ folder and tweak your @font-face rule like this, it should work:

@font-face {
font-family: Pretendo;
src:URL('Pretendo.ttf');
src: url('Pretendo.eot');
}

…and then in your CSS, just call the Pretendo font for the <body>, #one, #two and #three.

Fixing the text-shadow: If you look closely at the provided CSS file, I’ve added the ‘text-shadow’ property for IE 9 and 10 with the ‘filter’ tag (an IE-only CSS tag).  To turn off text shadow for IE 8, try:

filter: none;

Alternately, Lucas found a way to get the text-shadow to actually show up in IE8:

.no-textshadow header {

filter:

progid:DXImageTransform.Microsoft.Shadow(Direction=135, Strength=5, Color=grey)

progid:DXImageTransform.Microsoft.Blur(pixelradius=2)

}

Posted in Uncategorized | Comments Off