quackquackquackduck-blog

[quackquackquackduck-blog]

Final Lab

I preferred Squarespace over Wix since it seemed simpler to understand. Although Wix seemed to have better image placement and spacing, Squarespace’s predesigned layouts seemed quick and easy, and with slight tweaks, could be made to look like my website. For that reason, I choose Squarespace as my website builder. I also found implementing custom CSS into Squarespace easy, so I did just that in order to put some borders around some of the elements on my pages. The hardest part of recreating my site was properly recreating the header. I had to edit the logo in order to remove the sharp borders, and I had to go into an image editor to make sure I set the background to exactly the right color. The hardest part of using Squarespace was moving images within the pages. Although the builder came with layouts that had the images aligned to the left, center, and right, there weren’t really options I found to do anything besides those. This made recreating my site somewhat annoying, and I had to settle for some of the layouts Squarespace had already. Despite these difficulties, some elements of redesigning the page were much easier with Squarespace. In particular, responsiveness was implemented as I was creating the site, so it was automatically sized properly to larger screens and phones. This was much better than my original site, which struggled with responsiveness.

Original:

http://nathanharding.vps.cs.uri.edu/overcookedhome.html

Squarespace Recreation:

https://sepia-octahedron-p4cl.squarespace.com/

Password: 271

[quackquackquackduck-blog]

Lab 16

An explanation of why you chose the option you did

I choose the RedBubble site because it was relatively simple and had a lot of images.  I wanted to avoid formatting a page with a lot of text, since I am already comfortable with it, and instead focus on images. Since I normally find it difficult to place images using CSS, I figured I should make it the focus of a Bootstrap project.

The most challenging aspect of recreating your option (and why)

The most challenging part of recreating the website was the line above the navigation bar. It’s early on in the page, so it was one of the first things I did. It involved an image, text, a search bar, and glyphicons all in one row. Since it incorporated so may different parts of Bootstrap, I found it the most difficult.

The most challenging thing about using Bootstrap (and why)

I found getting used to the cell system somewhat difficult. Particularly, I noticed it was fickle with allowing for other bootstrap classes to be defined along with the col class. Some classes would work along with it, while others would make it react strangely. After getting a grasp on the cell system, however, I found it easy to use.

Something you think was significantly simplified thanks to using Bootstrap (and why)

I found it much easier to move images around on the page using Bootstrap. Normally, I struggle to use float and other techniques to place images on my page. In fact, I used a lot of absolute positioning on my website for that exact reason.  Bootstrap makes building a site with responsive images much easier.

http://nathanharding.vps.cs.uri.edu/bootstrapSite.html

[quackquackquackduck-blog]

Weekly Reflection 9

Journal Entry for Week 9

             This week we learned about using Bootstrap (for which I had to do the class presentation, truly horrific). Bootstrap is a popular CSS and JavaScript framework for developing responsive websites. A website framework is basically what code library is to languages; it provides pre-made functions so you don’t have to start from scratch. For example, you can make a dropdown menu with a combination of custom CSS and JavaScript, however, that can be a lot of work. With Bootstrap, there are premade classes for dropdown menus, so you can easily implement a dropdown menu without having to reinvent it. Bootstrap comes with many classes with premade features, like buttons, icons, hover effects, and much more. It allows for easier creation of websites, saving a lot of time. Bootstrap also comes with automatic responsive design, so a lot of your site will already be responsive if you use Bootstrap. Bootstrap’s grid system involves 12 cells, which you can allocate to be filled by whatever elements you want. These cells can be set for large or small screens, depending on what you want your site to look like. By allocating cells, a certain portion of the page is taken up. For example, if you allocate an image to take up 4 cells, a paragraph to take up 4, and another image to take up 4, your site will be neatly organized into thirds with the corresponding elements. This design allows for simply creation of site without having to worry about float acting strangely. It provided a system for CSS and JavaScript, allowing for easy web design. The application of Bootstrap for this lab involved recreating a real website to the best of our ability using Bootstrap. I found this Lab useful since web frameworks seem like something I would use in the real world, so becoming familiar with them now is very beneficial.

[quackquackquackduck-blog]

Weekly Reflection 8

Journal Entry for Week 8

              This week I learned about domains and hosting, and I bought my own domain. I’m pretty familiar with URLs since they are a key part of navigating the internet, but learned the specifics was useful and interesting. I learned that URL stands for Uniform Resource Locator, and can also be written as URI, which I thought was pretty funny because awe go to URI. I also learned about TLD, or Top-Level Domains. I had already know what they were, since .com,.edu, .org. and others are seen everywhere. However, I didn’t know what they were called, so now I can sound smart when talking about URLs. I knew that domains were linked up to IP addresses (I think that was even another Lab from this class), and I was already pretty familiar with the idea of servers. I felt WHOIS was a very good thing to know that I hadn’t really thought about. I didn’t realize how easy it could be to get someone’s information from there website, so now I know the importance of privacy.

             I bought my domain through google domains, which worked very well since I already had a google account set up. I got my domain for about 14 dollars, and google domains come with a free option for privacy, which is awesome. My domain is gladspud.com, since that is a profile name I commonly use. It is easy to spell, appropriate, and not copyrighted. It is also the username I associate with game accounts, so since I plan to make games it seemed fitting. I also set it up so my domain links to my c-panel site, which seems to have worked easier than some of the other students, who were having trouble. Overall, I liked this lab since it acts as an introduction to actually having a site outside of class, which I found very useful. I will hopefully continue to use my domain beyond this class, so I’m glad I got it now.

[quackquackquackduck-blog]

Lab 15 Definitions

URL- is a Uniform Resource Locator (also called URI for Uniform Resource Identifier), and it refers to the text address of a website.

https://websitebuilders.com/how-to/web-at-a-glance/url-anatomy/

TLD- is Top-Level Domain, and refers to the last segment of a domain name after the dot. Some examples of TLDs are .com, .org. and .gov, and they generally represent the purpose and type of domain.

https://www.techopedia.com/definition/1348/top-level-domain-tld

Domain- a website domain is the name of the website, and exists in place of the IP address of the website. Since the domain is often a series of words rather than a series of numbers, they are more easily accessible than IP address. They also allow multiple IP addresses to be linked to the same domain, allowing for different pages on a website.

https://www.brickmarketing.com/define-website-domain.htm

Web hosting- is a service that allows people to post a website onto the internet. Websites are stored on servers.

https://www.website.com/beginnerguide/webhosting/6/1/what-is-web-hosting?.ws

WHOIS- this is an Internet service used to look up information about a domain name. It stands for “Who is responsible for this domain name.” WHOIS search engines look across multiple databases to find information about domain names. https://techterms.com/definition/whois

ICANN-stands for “Internet Corporation For Assigned Names and Numbers”, and it is a non-profit organization responsible for allocating IP addresses and managing the domain name system. They do this by allocating blocks of IP address to companies, which in turn distribute the IP’s.

https://techterms.com/definition/icann

[quackquackquackduck-blog]

Lab 15

gladspud.com

Domain name Ideas:

google2.com

URIne.com

gladspud.com

nharding.com

I choose gladspud.com since it is easy to spell and remember, not copyrighted, and it is a common profile name of mine. Since I’m most likely to expand my website to be about games I play and make, I figured the profile name I use for a few of my game consoles would be a good choice.

I used the .com TLD since it is the most popular and recognizable.

[quackquackquackduck-blog]

Lab 14

Adam had previous GitHub experience, so he set up the repository and build a lot of the foundation of the site. He did the HTML and CSS, and he also did one function of the JavaScript. Since I have a background in JavaScript, I focused on completing the majority of the JavaScript. I also changed the HTML accordingly, and worked on some CSS details of the page, like input text box size.

http://nathanharding.vps.cs.uri.edu/popcorn.html

[quackquackquackduck-blog]

Weekly Reflection 7

Journal Entry for Week 7

For Lab 11 I used JavaScript to make my website interactive, which I really enjoyed since it sort of shows how JavaScript should actually be used. You can make a site interactive by using interal JavaScript or by using an external JavaScript sheet and linking it like I did.  Before you start editing your site with JavaScript, you must first choose the element of the site you want to edit. You can do this with a variety of methods, including document,getElementById, which gets elements by id’s, and document.getElementsByTagName, which gets elements by tag name. If there are multiple elements with the same id, you can specify which one you want by using brackets to select the number of the id. For example, if you document.getElementsByTagName("p") ang you only want to edit the first paragraph on the page, you would write paragraph[0]. With JavaScript, you can edit CSS using .style, change HTML using .innerHTML, and much more. With these tools, I added a day and night mode to my site by editing the body with JavaScript, made an image change when you hover over it, and added an alert to a link. In order for the site to recognize when to run these JavaScripts, events had to be used. Basically, an event is a condition that needs to be met in order for something to happen. There are many event types, but I mostly only used 3. I used onclick, which runs JavaScript when an element is clicked, onmouseover, which runs a JavaScript when the mouse hovers over something, and onmouseout, which is triggered when the mouse leaves an element.

           I really liked this lab since it took the logic of JavaScript that I was familiar with and applied it to a website. I saw how functions, loops, and conditionals could be used on something visual, allowing me to move another step towards programming for practical use rather than educational.

[quackquackquackduck-blog]

Lab 13

http://nathanharding.vps.cs.uri.edu/overcookedform.html

[quackquackquackduck-blog]

Lab 12

http://nathanharding.vps.cs.uri.edu/overcookedhome.html

1. It might be nice to have a button that makes the text size bigger or smaller to make it easier to read for the user.

2. I would like the image of my logo to change to something else when the user hovers over it and change back to the original when the user moves away.

3. Add a button that causes a confirmation box to pop up that if agreed on adds a gif to the page.

4. Add an option to only load basic html for users with slower computers.

5. Add a function that randomizes the type of food that pops up on the navigation table.

6. Add an image to move with the mouse to make the site feel more similar to the game.

7. Add an option that makes the background a different color.

8. Have the navigation table be drawn with a loop.

9. I possibly would have done the navigation table pop up’s with javaScript.

10. Add a conformation box on the form to submit the form.

11. Add an option to change the color scheme of the webpage. (Day and night mode)

12. Check the current page with a variable rather than changing each page.

13. Add a conformation box to go to the YouTube video.

 I did #2, changing the image of my logo, because it was easy, sort of funny, and a good way to take care of multiple event handlers. It involves an onmouseover and onmouseout, and demonstrates how to change an image with JavaScript. Originally, I changed the image of the onion king to have a beard and glasses to look like me back in the image processing lab. I figured I could reincorporate the actual image with JavaScript.

I did #11, a day and night mode, because I wanted to do something with the body of my site. I wanted to be able to make an overall change to the site with one quick button click. I also see day and night mode a lot on modern sites, so I figured it would be fun to add. I also enjoyed the idea of a Boolean conditional, which day and night mode allows for.

I did #13, a conformation to the YouTube video (which is the image on the homepage), since I had to check of the alert requirement of the assignment. This was originally an embedded video, but that was causing warnings so I got rid of it. I figured an alert then a link to the YouTube video was a good alternative.

[quackquackquackduck-blog]

Weekly Reflection 6

Short Story

             Everyone in JavaScript-ville lived a happy, safe life. Or so they thought. That was until the murders began. My name is Detective Println, and I’m here to debug this mystery. It started with a murder on 21st street. The body was left mangled, a series of loose strings and integers. Truly horrific. Then there was the killing on 31st street, the poor girl. All that was left was the character ‘*’ and the Boolean false. I assume the variable was isAlive, because this statement was clearly dead. Then there was the statement on 41st street, dead as a doorknob. Then 51st street, and then 61st street, the trail of bodies went on. Only then did I see the pattern. I traced the code, drawing a complex memory diagram of the whole operation. These weren’t single statements; these came from a repeat offender. I immediately thought of the while loop, the sick bastard. I locked him up years ago for a similar series of killings, one iteration here, one iteration there. Could he have escaped the library? Impossible. Maybe, however, he can clue me into this new killer. I went to the prison, to find a smug while loop sitting in his cage. “Ah, Detective, what a pleasant surprise!”, he said with a smirk. “What are you so happy about, sitting in your cage. You’re lucky to even have a window, if it were up to me you’d never see the sun again.”, I said in disgust. “Oh, but in fact it is a sunny day today. Have you read the newspaper? This is a new breed of killer. So refreshing,” while loop said. I replied, “You’re pathetic, you know that. Having to initialize outside of your loop, a flimsy conditional in the middle, with your own iteration. No wonder I caught you after only three killings.” I had agitated him, and he ran up and grabbed the bars. “Ah but this new killer is much better. Internal initialization, conditional, and iteration. I’m humble enough to admit he’s better than me. But that’s ok, as long as there’s murder, I’m happy!”, he said confidently. But to his surprise, I grinned. He had given me what I wanted. I left without another word. “You’ll never catch him!”, he hollered as I walked away. This new killer, with his pattern and what the while loop had given me, I deduced that he must be a for loop. Of course! How could I be so blind. I hurried to 71st street, figuring the next killing would be there soon. I wasn’t wrong. I saw a horrible for loop, towering over an innocent statement, ready to strike blood. “Stop right there!”, I screamed. He turned to face me, gun in hand, but I had already drawn. Bang! Bang! Bang! I shot three times, killing him instantly. “How’s that for iteration”, I said smoothly. After processing the situation, I helped the statement to his feet. The day was saved. I had ended the killings, and broken the loop. The end.

[quackquackquackduck-blog]

Lab 11

[quackquackquackduck-blog]

Weekly Reflection 5

Journal entry for Week 5.

             This week’s labs involved a deeper dive into web programming, adding more advanced techniques to create a website. In particular for Lab 9, we had to add a form, click/hover effects, and a drop-down menu to our website. These are done with various methods from html and css, which we learned about from the material and in practice. The form was done almost entirely in html, with some css to position how I wanted it on the webpage. Forms are useful since they allow the user to answer questions directly on a webpage, and easily send that form’s information to a given email. This allows a programmer to compile data and see results. The html form used a variety of tags like <form> and <input>, with different input type such as checklists, multiple choice, dates, and comments. In addition, I learned about hover and click on effects, which is an important part of making a website feel interactive. I added hover and click on effects by using the :hover and :active selectors respectively, allowing my site to do things like add a tomato image when you hover over a button or move the button when you click on it. The hover effects also enabled me to create my drop down menu, adding another layer of interactivity to my site.

             I was particularly worried to do a drop-down menu since I figured it would involve a difficult set of tables or something to work, so I was trying to avoid it. I was pleasantly surprised when I found out it wasn’t that bad, so I appreciate the assignment pushing my boundaries and making me try something new. For the form, I had issues setting it up since I deleted the mail app on my computer, so the mailto function wasn’t working. However, I resolved this by answering my survey on my phone, where the mail app was still present. I will have to look into properly setting up the mailto function since I have encountered it on other website and it has given me trouble. Luckily, with this lab, I now have a better understanding of what the issue is and possibly how to fix it.

[quackquackquackduck-blog]

Lab 10

Before:

Before Mobile:

After:

After Mobile:

There were plenty of things my partner noticed about my site that I hadn’t. One thing was I had the width of my banner set to 1500px, which completely filled my screen. John had a wider computer, however, and when my site was loaded on his, there was about 500 px of blank space on the right side of the screen. Also, it turns out my jump links no longer worked, which I forgot to try. Further, some of the absolutely placed text boxes acted a little strange for his viewport.

I noticed a few things about John’s site that he hadn’t. One thing was some of the red text was difficult to read on the orange background, so I suggested he change the color. Also, the navigation bar could have been centered slightly better, and the page felt a little left heavy.

The navigation of partner’s site had improved after the experience, especially the mobile site. The page feels cleaner after the background of the navigation was removed. Also, some of the difficult to read red text was replaced with easier to read blue text. A lot of the issues with feeling left centered were resolved. In addition, the site felt more responsive on the mobile site, with a bigger navigation bar and text. He made good use of media queries.

My site also improved navigation wise after the experience. I removed the broken jump link and replaced it with a direct link to my email, which make much more sense for the page. Also, I changed a lot of the absolute positioning on my site to change relatively, creating a much more responsive experience. I made the navigation bar larger on my mobile site, along with other media queries. My site works with the flow of the page a lot better now.

http://nathanharding.vps.cs.uri.edu/overcookedhome.html

[quackquackquackduck-blog]

Lab 10 Definitions

Responsive design- This is an approach to designing webpages that makes use of layouts that change with the screen size, flexible images, and media queries on the css. In short, responsive design should look at a user’s screen size and adjust accordingly.

https://whatis.techtarget.com/definition/responsive-design

Adaptive design- Adaptive design refers to adjusting the layout of a webpage according to screen size. It is similar to responsive design, but different in that the content follows a fixed layout size in adaptive design, while the layout moves dynamically in responsive design. So for adaptive, there are several fixed layouts in which the best one will be selected, while in responsive, there is a single layout that resizes.

https://www.interaction-design.org/literature/topics/adaptive-design

Mobile design- This refers to the layout of a website on mobile devices. When building a webpage, it is important to remember to include mobile devices when factoring in good responsive design.

https://www.interaction-design.org/literature/topics/mobile-ux-design

Viewport- A browser’s viewport is the area of a webpage where content is visible to the user. The viewport varies with screen size, and is important to remember when thinking about responsive design.

https://www.geeksforgeeks.org/html-viewport-meta-tag-for-responsive-web-design/

 Media queries- These are a feature of CSS that allow a webpage to adapt to different screen sizes and resolutions. These are very useful for responsive design since the browser can look at the size of the user’s screen and build the layout of the page accordingly.

https://techterms.com/definition/media_queries

[quackquackquackduck-blog]

Lab 9

http://nathanharding.vps.cs.uri.edu/overcookedform.html

[quackquackquackduck-blog]

Weekly Reflection 4

Journal entry for Week 4.

             While programming my site, I learned a lot about how CSS works and how organize things on a page the way I want. I learned about the box model, which refers to content, padding, border, and margin and how they interact with each other. The content is the actual HTML that is being edited, whether it be an image or text. The padding refers to the space in between the image and border. The border refers to the outline of where the content ends, and the margin is the area after that. There are many CSS commands that allow you to manipulate the look of the box model, allowing for a wide range of customization. I also learned about other methods of grouping and positioning elements, like declaring them to be block or in line. Block elements are ones that span the entire page while in line elements will fit as many as possible on any given line with the allotted space. You can also position things absolutely or relatively on the page, meaning you can declare elements to take up a certain percentage of the page, or you can give them specific pixel positions and widths.

             When originally programming my site, I forgot to optimize the images, so I had several png images that were taking a while to load. To fix this, I had to convert the pngs to jpgs with an online converter, then upload the new jpgs and replace them with the old pngs. Also, I used a lot of absolute positioning on my website since I was struggling to use the flow of the site to place stuff. This made my site really rigid and sub optimal for small screens.  Next time, I will have to place things more relatively to create a better site.