Visual Design Journal by Jorge Carty

As a Senior in High School there are many goals I want to achieve. Obviously I want to graduate from High School but I also want to do some stuff for myself. My dream is to become a professional e-Sports player. What is an e-Sports player? They're professional players in certain games, and that might sound silly but they make more than enough money to sustain themselves and more. The reason behind this decision is because I love video games and the opportunity to get payed playing games that I love is mind-blowing. Also, I would love to become a YouTuber and Twitch Streamer. I still want to be a Graphic Designer and work as that in the future but if I get an opportunity to achieve my goal, I won't let it go. How would I achieve this goal? I need to put in some real grind. I wouldn't say non-stop because we all need a break at some point, but I need to grind so I can get enough experience to become a top player. I will create a YouTube channel to post clips of my best...

Visual Representation of Lab 36 Lab 36 consisted on making a Box where you can type and a voice generated by the computer will read it. I used JavaScript and HTML to create this little program and it was fun to design it. JavaScript was used to make the voice reader read the text that was inputted into the text boxes. Also, there are bars that control the Rate and Pitch of the voice. If I was you, I wouldn't touch them. I used CSS and HTML to make this look decently nice and pleasing to the human eye. This is important for a web designer to know because if someone is disabled and wants to read something on your website, you can give them a chance to listen to your work and alt texts. JavaScript of Lab 36

Visual Representation of Lab 35 This is one of those labs that are simple and fast to explain. Let's see how fast I can explain this. JavaScript work with the highlighting of each work that works as a link, there are multiple words that have been linked to something in the paragraphs and every time you hover over them, they get highlighted. The HTML is just there to hold everything together. This is important for Web Designers to know because they can decorate their website and make them visually more interesting. I will use this functionality in my own website, I like the animation and the concept, maybe I can modify it and make it even better. Let's see how that goes. JavaScript for Lab 35

Visual Representation of Lab 34 All I will say is 🤯🤯🤯🤯🤯🤯🤯. Once again, a lab blew my mind. All I will say is that this lab can track you and see how fast you're traveling. I used JavaScript and HTML for this lab. In simple words, JavaScript was responsible to find the Geolocation of your device and depending on what device you're using, it will display the speed you're traveling. For the HTML, I used an external source for the Geolocation since it looks complicated to code from 0. Web Designers can develop cool stuff with this. They can make a map like google maps to find locations of different places or to get directions to travel, etc. Ideas are limitless. HTML of Lab 34

Visual Representation of Lab 33 I didn't know this was possible but it blew my mind. The basic concept of this lab is that the website uses you mic to capture your voice and type all words you say in the div shown in the middle of the lab. In the JavaScript, I used the Speech Recognition webkit to make this possible. An event listener was used to hear everything the user says and it was displayed in a P tag within the HTML file. This app won't type everything you say in sentences type form, instead, what it does is, it types one word per line. This can get reworked so it can type in sentences form, but let's leave that to the future. This skill is important for a web designer because it can be used in many ways. You can make an app for a computer that uses your speech to type instead of using the keyboard. I'm pretty sure people would prefer to use that instead of a keyboard since not everyone is comfortable with using a keyboard. JavaScript for Lab 33

Visual Representation of Lab 32 This lab was complex but interesting to make. Its concept is simple but making it sure is not. Basically, when you access the website, you will get a pop-up asking if you give permission to the site to use your camera. DON'T WORRY, I'm not going to spy on you, I don't know why I would do that but still needed to be said. If you give permissions, your camera will appear within the white canvas. As you can see, there's a button called "Take Photo" on the top left corner of the white canvas, that button is there to turn off your computer. No, but it's self-explanatory what that button's for. Once you click the button, little images will appear at the bottom, and by clicking them you will be able to download them to your computer. This required HTML and JavaScript. We used the HTML to make the div which ends up being the white canvas and also the "Take Photo" button is also made in HTML. When it comes to Jav...

Visual Representation of Lab 31 This lab consisted on placing information about videos, to be more exact, their duration. For this lab, I used JavaScript (WOW what a surprise) and some basic HTML and CSS to link this lab to my website and make it look like it's part of my website. For the JavaScript part, an array that held all the information for all the videos was required, but that's not it. In the JavaScript, I created consts that have the basic job of getting the duration of each single video and add them up to a total of X hours. In my case, the duration of all the video add up to 5 hours 50 minutes and 7 seconds. This skill is important to a web designer because it helps us organize data in many ways. In previous labs I've shown different ways to store or organize data and this seems like a different way of organizing such data. I can't think of something I would create that I need to include this functionality but I'll think of something. Ja...