Patrick's Voice User Interface

Results:

Click to start speaking

Innovation and Expansion of Skills

  The web trend idea I chose to focus on for my student project is Voice User Interface. Voice User Interface makes spoken human interaction with computers possible by speaking into your computer microphone and using speech recognition to understand spoken commands and answers to a question. When you speak, the words are printed out on the screen and you can ask a question through the microphone instead of typing it all out. Google is a great example for incorporating the Voice UI for Search Engine Optimization. Once you ask a question on Google's Mic, it will recognize the words you are saying and it will direct you to the answer and to articles that say the same answers. I used a HTML, CSS, and JavaScript to create my Voice UI to keep track on what the user is saying. I had to change the microphone colors when you start, stop, and clear text form the text area.

One Browser Meeting Web Coding and Design Standards

  One browser I used to complete this Project was Google Chrome. Google Chrome is very good with checking JavaScript errors in the Developer Tool area when you right click on the browser and select Inspect, the Console will notify you if you have any errors in your JavaScript code. If you don't have any errors in it, the Console will be blank. For my code validation, I used W3C Validation because it does the work of catching HTML and CSS errors. Once I validated my HTML and CSS code, I had no errors. If you had errors in your code, W3C Validator would give you the following errors and warning in the results. It will also show what line the error is occurring on so that you can fix it right away instead of locating where it's happening.

Reflection

  In this learning plan, I learned how to create a Voice User Interface. I always wanted to know how it was created because I've used it often on Google and it's very popular in the age we are living in. The Voice User Interface uses speech recognition to recognize what you are saying in the text area. This is very useful for people who can't type and can only use their language to speak. Voice UI helps you to speak instead of typing out what you want to say. When going to Google, you can ask a question by clicking the mic button and you can say "Ok Google, What is this?" or you can say "What is this?" instead. When creating this project, I never knew how Google created it and now that I know how they did it, I can now use this for my future web pages. I used HTML, CSS, and JavaScript to create the speech recognition for what the user is saying. I really enjoyed creating a Voice UI because this is my first time creating one, and learning about how it works and how it functions.

Resources

Web Standards: The What, The Why, And The How

ABOUT W3C STANDARDS

With the Microsoft v. Netscape war long over, the pivotal Web Standards Project is shutting down

11 Must-Know FrontEnd Trends for 2020

Top 10 Best Web Development Frameworks in 2020-2021

12 Leading UI/UX Design Trends to Dominate in 2020-2021

HTML5: Network Information API

Adding a Google Map with a Marker to Your Website

Google Maps Tutorial

Build a voice controlled UI

Designing a VUI – Voice User Interface