Web Coders – June 11, 2014

Gillham Park room – Administrative Center

  1. Updates
  2. Ads on Youtube (and how to avoid them) – Mary Lackamp
  3. Expanding WP beyond a blog
    • Transitioning from blogs to websites – Kristen
    • Moving static websites to WordPress – Brian
    • Using plugins to support functionality – Alia
      Faculty/Staff tool evernote

Boilerplates for Web and Email

The start-up time for new website and email projects is often cumbersome. Boilerplates and frameworks are a great way to speed up setup time and get you focused on the real project at hand.

The power behind boilerplates is that they are a conglomeration of collective knowledge and continually in development,  responding to new web-standards and technology.

Resources:
HTML5 Boilerplate
Email Boilerplate

 

Evernote Logo

Keeping organized with Evernote

As web developers and content managers, we are constantly facing an evolution of website technology. Evernote is a powerfully simple tool to help us keep our research and learnings organized for fast recall.

Advantages:

  • Access your notes from desktop, tablet, or mobile
  • Platform agnostic (Windows, OSX, iOS, Android)
  • File-format agnostic (text, photos, microsoft office, PDF, etc.)
  • Collaboration with others (shared notebooks and notes)
  • Organization through categories, tags, and searching
  • Online publishing and presentations
  • Integration with other Apps (i.e. JotNotPro)
  • Basic account is free and offers the essential functionality

Add-on Tools:

  • SKITCH- screen grabbing tool and annotation
  • PENULTIMATE- hand-writing app
  • WEB CLIPPER- webpage content saving (text, links, images)
  • HELLO- Relations management tool
  • FOOD- Recipe, restaurant, and experience tool
  • CLEARLY- website content reading tool
  • PEAK- Study tool

Web Coder Application:

  • Collective knowledge on website development learnings
  • Paste in code, screenshots, links, etc

UMKC Header and Footer Updates

UPDATE: We will not be launching this change in January. Due to unforeseen delays, we will make the change at a future date.

We have made changes to the UMKC header and footer to streamline the code and eliminate conflicts with popular frameworks like Bootstrap.

View the example page with new header and footer

Because these changes are more significant than updates we’ve made in the past, we have created a new process for rolling out the change. The header and footer will be updated on the main website, www.umkc.edu first and then rolled out to the other servers.

Update Timeline

November 22
A duplicate of umkc-standard.css has been created and named umkc-styles.css. The two files are identical except for file name.

November 25 – January 30
Every page on www.umkc.edu that references http://www.umkc.edu/umkc-standards/umkc-standard.css and uses includes for the header and footer needs be updated to import http://www.umkc.edu/umkc-standards/umkc-styles.css instead.

TBD
We will replace these files with updated code for the header/footer:
http://www.umkc.edu/umkc-standards/umkc-header.html
http://www.umkc.edu/umkc-standards/umkc-footer.html
http://www.umkc.edu/umkc-standards/umkc-styles.css

IMPORTANT: If your site is on www.umkc.edu and still referencing http://www.umkc.edu/umkc-standards/umkc-standard.css when the header and footer are replaced, your site will break.

If your website is on www.umkc.edu and you are not using the standard includes, or if you want to make the updates yourself, you will need to download the new versions of the header/footer and implement them on your site on this date.

Web Coders – October 2, 2013

1. Updates – Alia

  • Revised Starter Kit
  • Responsive Home Page
  • New sites launched – check your links for Admissions, School of Education, Welcome Center (and don’t forget the Major Maps URL change)
  • WordPress updates

2. Tips and tricks – Kristen

3. Problem solving – Alia

  • Problem solving submissions
  • UMKC header – popout navigation

4. Presentation : Optimizing for mobile devices – Brian

Web Coders Sandbox: CodePen

As the web development community grows here on UMKC’s campus, we thought a good way to interact, collaborate, inspire, and entertain would be to meetup in a front-end “playground” (A.K.A. Sandbox). We would like to introduce you to CodePen.

Screebshot of CodePen Home Page
Two features that are really handy that we will definitely be taking advantage of as a group:

  1. Tags- these allow you to place labels on your work and also search for others. So, if you are looking for inspiration on a new design or javascript interaction for a form field, simply search the tag “form” or “input”
  2. Forks- forking allows you to take someone else’s pen and start modifying it without messing up their own work. This is great for collaborative projects and innovation

We’d love to see your first pen after you sign in to CodePen. Please share your first by leaving a comment on this page.