Overview
The focus of this website is to analyze emerging Web trends, investigate new and emerging Web standards & specifications, and evaluate new Web software. Each of these areas of focus was researched and demonstrated through various Web Projects. In addition, a sizable listing of Resources & Tools was compiled to assist developers in staying current in technologies, trends, and standards in the Web development field.
Trends Report
Trends and technologies in the Web development field are constantly evolving and sometimes change faster than they can be implemented. Through discussion and research, several potential new and emerging Web trends and technologies were identified. A Web Trends Report was constructed in the form of a Web page where each trend was described and ranked according to importance. Two of the identified trends (Geometric Grids, 50/50 Splits) were demonstrated.
Trends Report PageProjects
Responsive Web Design (RWD)
While the concept of RWD is already becoming a standard, techniques are always evolving, especially taking into consideration the diverse range of screen sizes now on the market. The challenge of this project was to convert a non-responsive basic HTML layout to a responsive design. The desired outcome was a design that is adaptable to all types of browsers, screen formats and devices, whether computers, tablets or smartphones. Presented in a tutorial format with demo images and downloadable source code.
Technologies Demonstrated:
HTML, CSS, JavaScript
Scalable Vector Graphics (SVG)
The future of SVG is just starting. As an adopted mobile image format (and standard), the use and development of SVG will only continue to grow. This tutorial explains what SVG is, why it is used, and SVG pros and cons. A comparison of the use of SVG vs. PNG icons is also presented. Concluding this tutorial is a step-by-step demo of building a simple loader icon comprised of three rectangles and SVG animations.
Technologies Demonstrated:
SVG
Designing for Touchscreen & API
There are many considerations to weigh when it comes to designing the most effective touch-screen interface for a device. This article takes a look at some best practices to integrate into the design and development process for an effective touchscreen UI. Information on designing for oversized screens is also presented. To round out this project, the use of APIs of Google Analytics, Google Fonts, and WeatherWidget were demonstrated.
Technologies Demonstrated:
Google Analytics API, Google Fonts API, WeatherWidget API
Custom Google Maps
In this tutorial, we created a custom Google map for The Fideler Farm, a popular local strawberry and produce farm. Included are step-by-step instructions on getting started with Maps API, inserting the HTML and JavaScript, adding a marker and pop-up screen, and custom styling of the map. Code is provided for each step (with explanations) and the source is available for download.
Technologies Demonstrated:
Google Maps JavaScript API, HTML, JavaScript
Parallax Design
Parallax design is a technique where background and foreground images move at different speeds, giving an illusion of depth and creating a 3D effect as you scroll. This technique has been around for quite some time in the Web design community before its recent rise to a trending style. This article offers things to consider when implementing parallax scrolling into your design. A fun parallax scrolling Christmas card built with CSS and skrollr.js is highlighted. Source code is provided and can be adapted for your own project.
Technologies Demonstrated:
Skrollr.js, Parallax Scrolling, CSS
WebVR
WebVR is a JavaScript API that allows virtual reality (VR) experiences to run in a Web browser, on VR headsets, and on mobile phones & tablets. In this tutorial, we used Aframe.js (a front-end Web framework for developing WebVR) to create a rotating 360° panorama that displays inside a VR scene. Within the scene, a sphere was added that slowly rotates, reflecting the background as it moves. Included is information on how to install and set up aframe.js and source code for building the VR scene. Explanation of each step of code is provided.
Technologies Demonstrated:
Aframe.js, HTML, CSS
Social Media for Business
Social media is an essential piece of any business marketing strategy. It not only allows for tremendous outreach and networking, but also allows for interactivity that can be very beneficial to business. The focus of this tutorial is Instagram — between posts, ads and stories, there is no shortage of potential marketing tools on Instagram. We've highlighted a few ways to market your business by getting users from this social media platform to your website. Also included is a demo on creating an Instagram post using Crello, an online graphics builder.
Technologies Demonstrated:
Crello, Instagram
Resources & Tools
We've compiled a list of essential Web development resources and tools that will likely be used on a daily basis. They are grouped into categories, with a brief description and rating for each. Categories include Bootstrap, Design, Development, Images, Validation, and WordPress.
Resources & Tools PageDesign
Design elements such as navigation, headings, body text, footer information, graphcs, links, and color are balanced, practical and aesthetic. The elements create unity and are consistent throughout the website, resulting in a harmonious visual appearance.
To focus on the technical nature of the content, this website was designed with a neutral color pallette and a generous amount of white space. Lead text was used in abundance on project pages for greater readability. Vector images were used to balance the white space, as well as add color and interest to the layouts.
Criteria
HTML
HTML pages validate 100%.
Service used: W3C Markup Validation Service
CSS
Stylesheets validate 100%.
Service used: W3C CSS Validation Service
Accessibility
All pages are accessible to WCAG 2.0 (Level AA) Standards.
Service Used: AChecker Web Accessibility Checker
SEO
Basic SEO practices are applied throughout the site, including semantic heading structure and unique meta information.
This website is 100% functional on Chrome and Firefox browsers on Windows. (Firefox may be an optimum browser for viewing the WebVR project.) It is also fully mobile-responsive and 100% functional on iOS 11.
Resources used to complete each project are listed in each project's Documentation respectively.
The link (example below) to each project's Documentation is located near the end of each project page.
I consider this course to be one of my favorites in the Web program. I enjoyed the variety of project topics, and the timeline to complete each project was ample enough for thorough research and development. It was encouraged to present projects of which we had little or no exposure, and this added to the learning experience. Using WebVR as an example, I was wary as I had no prior interest in it or experience with it. After scratching the surface, I found it interesting and fun and would like to learn more.
In addition to the individual projects, another asset is the massive listing of Web tools and resources compiled throughout the first 12 weeks of the class. Because these tools & resources are used on a regular basis in Web development, it is invaluable to have them organized on a dedicated page. One suggestion would be to limit the tools/resources postings to every other week to keep the interest level up.
No real difficulties were experienced other than coding issues, and I was able to troubleshoot those online on Stack Overflow or W3Schools. However, if I had to start over, there are a few things I would change to improve the workflow. Image organization and naming would be the first. At the beginning, it wasn't immediately clear what or how I'd be developing, and my images folder quickly grew out of hand. (This would have helped with FTP, as well.) I'd also like to improve the CSS to more efficiently use class names across project pages to improve the workflow. Regarding the design, I would add an accent color to the site that could be used for links, buttons, etc., instead of always the gray/black combo. It was intentionally designed as such, but a little pop of color wouldn't hurt. Lastly, I would start out being more cognizant of text size, color, and contrast for accessiblity reasons.
To expand my learning in topics we covered, I'll definitely start with social media for business. This topic is one I wish we had spent more time with; it is so extensive and always evolving. Many small businesses and cottage industries only market themselves on social media, and I see a world of freelancing opportunity. Also, I found experimenting with the various graphics creators very enjoyable! Another topic in which I'd like to learn more is WebVR. Some of the work out there is fascinating!
One topic we didn't cover, but one I will be following, is SEO. Because Google is King, and Google is always changing the rules, this is definitely an evolving field. I need to get on the bandwagon!
Anne Allmann
