Lab 15 Reflection

     Lab 15 was mainly about embedding web pages in a single web page but dealt with creating a digital scene and clicker game to a much smaller extent. We were supposed to create a web page in which we would embed our clicker game and digital scene but before we could do that we needed to make sure those two things were done, which they were a while before this lab. Creating a digital scene was pretty self explanatory, the objective was to create a digital drawing using code.org's App Lab. The process, which was collaborative, required the use of abstractions, such as functions and for loops, to efficiently make a nice looking drawing. Creating a clicker game involved a more complex process that built on the skills of the digital scene. The objective was to create a game in App Lab in which the player clicks on a certain object a specific number of times to win the game. If the player were to click anything besides the object the amount of lives they had would decrease, the game ending if the player ran out of lives. The making of this game again involved abstractions such as functions and for loops but introduced 2 new things into our JS arsenal: if statements, variables, and event listeners. Using variables, we were able to keep track and update the values of certain things like points and lives. If statements allowed us to control when we would update the values of variables by setting a condition to be met and checking if it was met, setting events to occur upon it being met. Event listeners acted much the same way with a slight difference, an event would occur if the user did something that met the condition. For example, if an event requires the user click a certain object an event listener is constantly checking if the user clicked said object and acts accordingly when the condition is met. With a combination of these things the game was created.

     In order to embed these games into our web page we needed their URLs. App Lab has a share functionality which gives the user a URL they share to others so they can access the game. This was the same URL we would also be using in our embedding process. After getting the URL we needed to introduce ourselves to a new HTML tag, <iframe></iframe>. This tag has the attribute src in which we put the URL of the web page we are trying to embed. While at first it seemed it was a simple task of copying and pasting the URL there was a final step that needed to be done to make it work, altering the URL. With the URL in its current state the iframe didn't work, displaying a blank page. To make it work at the end of the URL a /embed needed to be inserted.

     These skills are important for a web designer because they make a website more convenient. Using iframes you can compile an experience that takes multiple web pages into a single page. In our lab we compiled a hub page and 2 game pages into a single page, reducing the amount of pages the user has to traverse into 4 pages (search engine to website, website to labs page, labs page to this lab). A website is supposed to have many pages but too many can lead to a bad user experience, the user not wanting to do so much work to use the site. An easy solution would be combing multiple pages into one using iframes to reduce the amount of work the user must do. All in all, with iframes a web designer has the opportunity to make a compact, efficient, and easy website.