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.

Campus Web Team Sign-up Form

Web Coders

Skill level: everyone from novices with an interest in advancing their knowledge to advanced coders looking to broaden skills
Frequency: Every other month
Next meeting: Second week of June
Meeting format ideas: announcements, problem solving, group discussion, presentations, show and tell, and competitions

Possible topics:

  • New or advanced techniques in CSS3, HTML5, and programming languages that could be applied to your own website(s)
  • Opportunities to brainstorm, develop requirements and test options for tools needed on campus
  • Competitions for creating tools or solutions to common problems on campus
  • Problem solving for questions submitted anonymously
  • Trends in web development and best practices from other higher ed institutions
  • Updates to web standards
  • Usability findings and techniques
  • Accessibility issues

Web Editors

Skill level necessary: anyone who edits a web page
Frequency: Once a quarter
Next meeting: Third week of July
Meeting format ideas: Announcements, step-by-step tutorials, open-ended question and answer

Possible topics:

  • Updates to web standards
  • Usability findings and techniques
  • Accessibility issues
  • Tools (like photo editor tools) to assist in making web edits
  • Step-by-step tutorials for managing accordions, popups, slideshows and other tools