Emerging Web Technologies
& Trends
This was an 8-week class based on job scenarios such as "Quick, this new software/trend came out, and we need to implement it into our site." It forces the student to learn the latest trends in the ever-changing web development industry.
In this course, we evaluated new technologies, emerging web trends and standards and specifications in the web development field. Application of new technologies to web site design and construction was performed. Also investigation and use of resources and tools for maintaining up-to-date skills in the field will be done.
Taking this class reinforced the fact of how this industry is constantly changing. Like the instructor stated, this class is different every time she teaches it. Just when you think you know what the new trends are, the next is coming out.
The most difficult aspect of this class and this program in general is everything is PC-based. Since I work on a Mac I have to find alternatives. On a positive note, I feel that just adds that much more to my knowledge - seeing both sides. An example is the browser testing issue. I use Safari and Firefox constantly. Internet Explorer is no longer available for Mac so I have to use different sites to render my pages on the different IE versions for me.
My goal to stay ahead on the trends is to keep checking out the various blogs and what not. I already have a few RSS feeds and newsletters sent to me. My greatest challenge currently is having the time to set aside for reading up on the trends. I will find a way though. It was interesting to see how the different students had their preferences to resources and then see the projects reflect their interest/specialty especially with coding/technical and graphics/design.
Listed below is my compiled list of great web developing resources and tools. The grade it received (A, B or C) is based on a "must-have" resource/tool to a resource/tool that will be useful but not as crucial.
Compiled Resources and Tools to Help Educate and to Assist Web Developers
RESOURCES
DESIGN
Sexy Web Design
"Create your own stunning web interfaces that just work"
Elliot Jay Stock
Sitepoint, 1st Edition
ISBN: 978-0-9804552-3-6
Easy-to-follow guide that reveals the secrets of how to build your own breathtaking interfaces from scratch, guided through the entire process by applying the principles of user-centered design
CSS Zen Garden
http://www.csszengarden.com/
Great demonstrations of what can be accomplished visually with CSS-based design. It is a place to get inspiration for functional, practical CSS.
Web Designer Wall
http://www.webdesignerwall.com/
A good resource for the creative web designers. It discusses different design trends, ideas and tutorials. It also has job postings including freelance.
CSS Play
http://www.cssplay.co.uk/
Features layouts, menus, boxes, Javascript, etc to use. You can use the code as long as you give the creator proper acknowledgment. There are a lot of menus you can implement such as dropdowns, flyouts, multi-tiered, CSS only, and the list goes on.
Smashing Magazine
http://www.smashingmagazine.com/
Blog featuring topics for Graphics, Inspiration, Coding, Design and Work. Not only do they have their own posts but ones from other great resources. They try to touch on a little bit of everything.
Layers Magazine
http://www.layersmagazine.com/
How-to magazine featuring tutorials, reviews and forums for everything Adobe. Great for those how use Adobe Creative Suite. Since I use the Creative Suite all the time for everything, it is nice to know there is a place to go to get some great answers.
CONTENT
Letting Go of the Words: Writing Web Content that Works
Janice (Ginny) Redish
ISBN: 978-0123694867
A user friendly book on how to write for the web. It has examples of what works and what to avoid. It talks about web user skimming and scanning patterns, what should be on home pages, how to break up large documents, etc. Great resource especially since people don't have time to read lengthly documents online. When they want to find an answer to a question, they don't have to pick through a huge document to find it.
COLLECTIONS
CorkDump
http://www.corkdump.com/
Web design and development resources that are user-submitted and customizable. Features CSS/XHTML resources, JavaScript/AJAX resources, Flash/ActionScript resources, Photoshop/Illustrator resources, Blog resources, Design Inspirations resources, PHP/MySQL resources, Web Application/Tool resources, SEO Guides/Tools resources, CMS Guides resources. This is just a huge list of good resources but with no descriptions.
Smart Webby - Resources
http://www.smartwebby.com/resources.asp
Free Tutorials on web design and web programming. Includes articles, tutorials, ideas, and tips discussing design, Flash, ASP.net, AJAX, ASP, PHP, Javascript, DHTML, web promotion, Adobe software, etc. They are constantly releasing new educational tools.
The Design of Sites
2nd Edition
"Patterns for Creating Winning Web Sites"
Douglas K. Van Duyne,
James A. Landay,
Jason I. Hong
ISBN 0-13-134555-9
Great reference book. Features coverage of AJAX, mobile web, online communities, key site elements including site maps, style sheets, dynamic elements and customer profiles and so much more. It has color coded sections for easy reference.
Sitepoint
http://www.sitepoint.com/
This is a mother-lode of web developing information from blogs, articles and books to videos, forums and reference guides. Everything is easily understood, and to the point. The books are great references as well.
W3C Schools
http://www.w3schools.com/
Learn about web development with web building tutorials and references, try-it-yourself examples and even get certifications. Check statistics, examples, quizzes, validation. It is a great resource. This is THE largest web developer resource.
A List Apart
http://www.alistapart.com/
Great resource for code, content, culture, design, process and user. Many times I have come to this site to find fixes to problems and many times they will have 1-2 methods to the problem. They focus on web standards and best practices.
Noupe
http://www.noupe.com/
"Curiosity for finding what's new & better". Contains info for Ajax, CSS, Design, Photoshop, Tutorials, Wordpress, etc. Includes Freebies! This collection of resources seems to be focused more around creative design - frontend developing.
Tools
QUALITY ASSURANCE
Web Developer Tool 1.1.8
https://addons.mozilla.org/en-US/firefox/addon/60
Firefox Add-on that adds a menu and a toolbar with various web developer tools
Menu includes: disable, cookies, CSS, Forms, Information, Miscellaneous, Outline, Resize, Tools, View Source and Options. You can turn off/on images, colors, edit the CSS. You can validate your site with the different tools - HTML, CSS, Section 508, etc.
Test Everything!
http://tester.jonasjohn.de/
100+ tools in one - CSS/HTML validators, SEO Tools, social services, web proxies, network tools, text tools, image tools, miscellaneous tools. Check the tools you want to test a specific URL, and it gives you all your results with one click.
Browsershots
http://browsershots.org/
Check browser compatibility, cross platform browser tests for Linux, Windows, BSD, Gecko, KHTML/WebKit. You can also test with different screen size, color depth, Javascript, Java, and Flash.
IE NetRenderer
http://ipinfo.info/netrenderer/
Browser test made for Macs - This tool runs a URL on Internet Explorer version 5.5, 6.0, 7.0 and 8.0. It was especially designed for Mac web developers – the big reason is that IE is no longer available for Mac.
Validifier
http://validifier.com/
Turns Flash embed code into valid XHTML
iWeb Tools
http://www.iwebtool.com/tools/
Huge list of of great web developer tools for domain checkups, search engines, HTML and miscellaneous items. It uses Google webmaster tools as well.
SITE PROMOTION
Submit Express - Website Webmaster Search Engine Tools
http://www.submitexpress.com/tools.html
Features META Tag & Keyword Analyzer (Using this tool allows you to see how search engine robots analyze your or your competitors website, receive tips on how to improve your Meta tags, check the keywords on your page and find the keyword density as well as many other ), Link Popularity Checking Tool, Keyword Suggestion Tool, Keyword Traffic Estimator, SEO Dictionary, Meta Tags Generator, Page Rank Checker, Page Snooper, Broken Link Checker, and Link Counter. Free newsletters also available.
AddThis.com
http://www.addthis.com
Very easy, popular bookmarking and sharing tool used to increase traffic. It makes it easier for visitors to share the content.
Your "Add This" button is created in 4 steps:
- Select your service such as website, WordPress, Blogger, MySpace
- Select a button style
- Determine if you want analytics
- You're done! Get button.
XML-Sitemaps
http://www.xml-sitemaps.com/
Creates a Google Sitemap online free. It asks for the full URL of the site requested and a few parameters. Then click start. It works very nicely and gives you options to download the newly created sitemap.
DESIGN
Color Combos
http://www.colorcombos.com/
Helps you choose a color scheme and browse thousands of color combinations. It also has the ability to test your colors to help ensure accessibility. This site is similar to a reference book graphic designer use called "Color Index" - for example, by giving complementary colors suggestions.
Favicon
http://www.favicon.cc/
Used to create the logo/image displayed along the URL in the address bar. Either upload your own jpg, jpeg, png, gif, bmp, ico (max file size 5MB) or create it on the site. Download the favicon for use on your website.