Mod 0 Capstone

VanessaRandall-mod-0-capstone.md

Mod 0 Capstone:

Codepen: https://codepen.io/vrandall66/pen/YbrJeK

Day One:

HTML and CSS: Design and Build Websites - Chpt. 1 & 2

1. The purpose of HTML code is to outline the structure of the page; the various headings and sub-headings, where there will be body text or links. The foundation of a house, if you will.

2. An element is contained within an opening and closing tag. The element denotes the hierarchy of your text, and how it is (very simply) presented. An opening tag and closing tag must be present for the element to work. If elements are meals, tags are plates or tupperware.

3. Attributes allow elements to be more specific, giving them a name and a value. If I remember correctly, one reason is so you can later write CSS (and maybe JavaScript) that is specific to certain elements by linking their attribute name to the styling, instead of writing styling that affects the whole page. (Aside from <div> </div>)

4. The head element is used to contain information about the page that is not always visible. In the header, you will find the title element, which displays the name of the page above the URL address bar or on the tab. The body element contains all of the other information that will be displayed on the page.

5. To view the source code of a website in Chrome, go to View, Developer, View Source

6. <ol> </ol> Ordered list
   <br /> is a line break (is singular, does not have opening and closing tags)
   <em> </em> is for emphasis! Arguably the same visual result as <i> </i>, but not the same if using a screen reader
   <sub> </sub> is for text to shift _down (subscript) like the 2 in H₂O
   <abbr> </abbr> is an abbreviation, used in conjunction with a title element so users can hover the mouse over the acronym and see the full name
   

7. Empty elements are elements that only need one tag, like <br />

8. It seems to me that semantic markup is writing your elements in a more efficient way so that no matter the device or the app that the webpage is accessed on, the informtation would be presented/interpreted the same way across the board. Instead of using <b> </b> to make something bold, which only helps visually, the developer should use <em> </em> to tell screen readers and other accesibility devices that it is something that should be emphasized. Semantic elements should not be used to alter the appearance of the information on the page, that should all be done with styling later on.

9. nav, aside, article

Gear-Up Pre-Work

1. Empathy plays a huge role in my life. I come from a background in Theatre, and theatre is entirely about empathy. Most people don't realize that it is more than the actors and director who put themselves in other people's shoes; it's the technicians and designers, too. The designers have to put themselves in every character's shoes to try and understand what shoes (and everything else of course) they might wear, where they might live, where they have come from and what they have experienced in their lives that has led them to become who the audience sees at that point in time. A large number of actors have said that putting on their costume and getting into makeup helps them get even more into character because they are essentially one step closer to being in that character's skin. Similar things have been said about the set, light and sound designs for productions. It is one thing to rehearse in a room and imagine it looking like a run-down motel and parking lot, but another to walk onto the set and hear the highway, see the scattered trash and tumbleweeds and the half burnt-out neon sign. Suddenly the actor isn't having to imagine and create visuals in their mind to help them portray the story; they are fully immersed in that character's life, and have visual assistance in portraying the story/setting in its entirety.
   
   I have also frequently been told that I am an empath, and I take pride in that. I'm into astrology and am a cancer (birthday is July 19th, we're notorious for being the most emotional sign, with Pisces as a runner up), so I've always been more emotional, perceptive and receptive to other peoples emotions. My family and I are also extremely different, and having a good sense of empathy has been crucial to maintaining healthy relationships with family members. My sister and her family are extremely religious, and I have grown away from religion, my father's side of the family has never wanted to travel or live anywhere other than Nebraska, and I think that deprives them of the opportunities to experience different cultures and develop awareness of others, which in turn leads to empathy. Exposing yourself to people of all shapes/sizes and ways of living is crucial to understanding why society works the way it does, and why some people are less empathetic than others.
   
   

2. Without empathy, "successful" software development would plateau and never improve, and all other software would most likely be uneffective and inefficient; one-dimensional. There wouldn't be need for innovation or optimization because of lack of continued research into user profiles and stories. The key to building software and websites that people will use and enjoy/prefer over others is to understand their backgrounds, needs, and hypothetical situations. Making software for elderly people who have little to no experience with technology is tricky, and seldom done well due to empathic oversight. The elderly most likely don't recognize the "hamburger button" like the younger generations, and therefore would be clueless as to that leading to a hidden menu on their mobile device. On the other hand, one could assume that most elementary and middle school children at this point are familiar with icon buttons, and would be able to successfully navigate a page with mostly icon buttons. A more specific example would be to have a deep understanding of the industry/niche you are making programs/websites for. I knew a start-up for agricultural software that was run entirely by former lawyers with no experience in agriculture. The ex-lawyers did not show much interest in furthering their understanding of the needs of their target audience, and therefore kept building software that had major oversights, making the software only partially helpful/useable, and a major waste of money and resources.
   
   

3. Empathy is relatively crucial on teams due to the collaboration process and communication needs. To maximize a group/team, the group/team must understand each other's assets, and delegate tasks somewhat accordingly. If Jim is great at writing tests, Pam is great at CSS, why put Jim on CSS and Pam on testing? There will be more excitement and investment in the project by the employees if they are put into positions where they are likely to thrive. There is something to be said about growth and switching up roles/assigned aspects, which I also don't think should be discouraged by any means. That being said, some people might have more assets than others for a variety of hypothetical reasons, and should not be overloaded.
   
   

4. Empathy has come in handy a plethora of times while working in the Theatre industry. Stress and tensions are often high due to deadlines, miscommunication, and a lack of recognition and knowledge of what Costuming entails from upper management. Often there is no understanding of the scale of what is being asked of the costuming department because of a lack of experience or willingness to learn, and that causes a ripple effect of unfortunate problems. More generically in theatre; being able to connect to other employees to improve morale or recognize when perhaps an employee should be forced to take a break/have someone cover their track for them if one can is extremely helpful. Theatre generates workaholics that often sacrifice their personal well-being in order to accomplish things, which isn't great. Empathy also comes into handy as a wardrobe crew member; actors deal with a lot depending on the content of a show. Some actors have to sob onstage and need to channel very dark memories and events. You learn not to take things personally and to support whatver the actor might need in the moment. (Unless of course it turns disrespectful or violent in any way) The theatre industry has a dangerous imbalance of situational empathy in that the show and actors are more important than everything else. The levels of empathy should be consistent across the board in workspaces because ultimately everyone should have the same goal of accomplishing something and also maintaining their sanity and enjoy life. So many people operate like a horse with the 'blinders' on, and fail to take a step back and see things from other vantage points.
   
   

5. I find it most difficult to be empathic in business situations in which the empathy is not reciprocated. Ultimately, I think it depends on the length of time I am with a company. If I am brand new, I swallow my pride and deal with it for a reasonable amount of time. Once I am more comfortable in my job, I can start testing the boundaries and see what changes could possibly be made to help increase empathy amongst coworkers and managers. This is when I would try and influence others to work on improving their awareness in general, maybe talk to supervisors if one-on-one critiques aren't beneficial. If the problem persists and the company does not seem to care about empathy in the slightest, maybe it is simply best to move to another company that is more supportive/welcoming of empathy, and would ultimately have a better company culture and work flow.

Day Two:

HTML and CSS: Design and Build Websites - Chpt. 3 & 4

1. Types of lists in HTML:
   

Ordered

A chronological list/with numbers:

1. One
2. Two
3. Three

Unordered

A list with bullet points, dashes, etc.

• One
• Two
• Three

Definition

A list containing multiple terms that can have multiple definitions

Like this list of lists!

2. <a href="http://www.ActualWebsiteHere.com">Description of Link Text</a>

3. <a href="http://www.ActualWebsiteHere.com" target="_blank">Link in New Tab</a>

4. You can add an id attribute to an element, and then create a link within the page like to various headers, back to the top, etc. Some examples for this page:
   

<h1 id="top">Mod 0 Capstone</h1>
<h2 id="day_one">Day One"></h2>
<a href="#day_one">Day One</a>
<a href="#top">Scroll to top</a>

HTML and CSS: Design and Build Websites - Chpt. 10, 11, 12

1. The purpose of CSS is to provide consistent style presentation for specific elements in the HTML. Colors, background, font type/size, padding, etc. This allows you to have multiple style settings for different sections of your pages.

2. Cascading Style Sheets! Cascading means that the stylization will happen in the order it is typed, or whatever is more specific or important.

3. Each CSS rule consists of a selector and a declaration. Each declaration is made up of at least one property (can be multiple) and a value. It should be formatted like so:
   

   h2 {
      font-family: Arial;
      color: red;}

4. In the <head> of the document, you use the <link> element to tell the browser where to find the document, what kind of document you're linking to (stylesheet), and how the link is related to the page.

5. It is more efficient and simple to use an external CSS document(s) when building a website with more than one page. The whole site can follow rules that are set up in one or two documents instead of having to implement various changes multiple times on every single page that uses them. It is also helpful for having cleaner code; HTML in one file, CSS in another.

6. A color hex code is a 6 letter/number code that tells you how much red, green and blue are in the color. It is always notated behind a # sign. #8A3151

7. Hue, saturation and lightness. Hue is the color with a value ranging from 0 to 360, like in a circle. Saturation is the amount of grey in a color. If the saturation is 0, the color is a shade of grey, if the saturation is 100, the color is the full color. Lightness represents how much white and/or black is in the color. If the lightness is 0 the color is white, 50 the color is normal, 100, the color is black.

8. 
   

Serif

Have details on the end of every stroke on a letter, and were thought to be easier to read in long passages of text in print.

Sans-serif

Do not have details on the end of every stroke on a letter, and are thought to be easier to read in long passages on a computer due to a lower resolution.

Monospace

Every character/letter has the same width, which is why it is used in coding, so the text is easier to follow.

9. Pixels, percentages and EMS. Pixels are a very specific way to notate how much space the font takes up, and are relative to each screen. If someone has modified their browser font settings, the pixels will still be presented in the scale of your choosing in relation to their settings. Percentages function off the standard rule of 100% being 16px. 75% would be 12px, 50% would be 8px. EMS are the width of the letter M, and are adjustable relative to the parent element. This however seems to be a less precise way to go due to individual browser settings.

Day Three:

HTML and CSS: Design and Build Websites - Chpt. 7

1. The value of the type attribute controls the behavior of the input element. For example, the type could be text, password, radio, checkbox, file, submit, image, hidden, etc.

2. <select> creates a dropdown menu

3. <input type="submit"

4. <fieldset>

HTML and CSS: Design and Build Websites - Chpt. 13 & 15

1. The box model! There is a box around every element, which is essentially the border. The border can be styled for various thickness. The margin and padding are separated by the border. The margin controls how much space is between the elements. The padding is how much space is between the element and its border.

2. The pixels are typed in a clockwise order, top, right, bottom, left.

3. Block-level elements take up the whole horizontal area whereas inline elements are presented within block elements/inline with the text.

4. Fixed positioning will allow you to see something in the same place while you scroll, and the z-index makes sure the elements don't overlap in weird ways. An elements with a higher z-index will be displayed on top of an element with a lower z-index number; similar to the bring to front or move to back feature in word documents.

5. A fixed layout is normally set in pixels like 60px, will always be 60px no matter the size of the screen. A liquid layout allows you to change the width of the browser page, and the layout will fluctuate with it, normally expressed in percentages.

Day Four:

HTML and CSS: Design and Build Websites - Chpt. 5

1. The alt attribute is important because it allows screen reading devices to describe the picture, and search engines to find the picture.

2. If the image is presented within a line of text, and text flows around it, it is inline. If the image is block, it will be presented on its own line.

3. Jpg/jpeg file extensions should be used when a picture has a large variety of colors, like a sunset or a meadow. Png is useful for "flat" photos like logos and transparent images with only a couple/few colors.

HTML and CSS: Design and Build Websites - Chpt. 16

1. Specifying image size in the CSS instead of HTML takes up less space in the code and saves you time. You make sure all of your images have classes of size, and then style the images through the class instead of repeatedly throughout the HTML.

2. An image sprite is one large file containing multiple images. Showing different ranges/positions of this file helps the page load faster because the page is not having to upload/render multiple different files.

Day Five:

JavaScript & jQuery: Interactive Front-End Web Development - Chpt. 2

1. To declare a variable, you type var andThenTheName; For another example: var height; The = sign in JavaScript is referred to as the Assignment Operator and it allows you to assign a value to a variable, or update the value that has already been given to the variable.

2. JavaScript Data Types

Numbers

Either an integer or a number with a decimal (no percentages, fractions...)

Strings

Contains letters and symbols/characters: "Well hello there!" "Money is notated by $"

Booleans

A data structure that has a value of either true or false. Is the engine running? Is RX due for refill? Etc. Booleans are helpful in determining the next path for the computer to take.

3. Rules for Naming Variables

1. Must always begin with either a letter, sign or _ NO numbers.
2. Can contain letters, numbers, a dollar sign, or an underscore, but NO dashes or periods.
3. No keywords or reserved words, like var, typeof, instanceof, for, function, else.
4. Variables are case sensitive. Bad form to have variables with the same name but varied cases
5. Make the name logical and descriptive
6. If the variable is more than one word, capitalize the beginnings of words except the very first letter. Example: vanessaRandallCapstone

4. An array is helpful to use if I have a list of items that are all in a similar category, but I do not know how many items the list will have. To access an item in an array, you need to know the position of that value in the array. Array values are numbered off starting at 0, known as an index value. Once you know the index value, you type the array name and the index number for the value within square brackets. Changing the value in an array is done by selecting the array and assigning a new value to it, for example upholstery[3] = 'leather';

5. A statement is a step in a series of instructions that the computer can follow, and it ends with a semi-colon. They start on a new line and can be organized into code blocks. Expressions can assign a value to a variable or use multiple values to return a single value through operators.

6. Types of Operators

Assignment Operators

Assigning a value to a variable. Examples: quantity = 4; or roomNum = 302;

Arithmetic Operators

Simple mathmatical equations like enrollmentJune = 15 + 23 or sqFoot = 12 * 8.5;

String Operators

Words, characters, numbers. For example: var make = 'Chevy'; var model = 'Silverado'; varMakeModel = make + model;

Comparison Operators...

For later

Logical Operators...

For later

Day Six:

JavaScripts & jQuery: Interactive Front-End Web Development - Chpt. 3

1. The difference is that sayHello will return the function, versus sayHello() will run the function, and give the desired return value of "Hello!"

2. When a function needs object specific information to run a function, it is written with parameters as variables. The values the function recieves for the parameters are the arguments for that individual object.

3. Return stops the function from running, and outputs the result of the function. It returns the interpreter to the function, so it can be run again (if programmed to do so) Like a dog playing fetch, I suppose. It goes, catches the stick, and brings it back to the owner to be thrown again, until playtime is over. The owner can throw different sticks, which might affect the dogs ability to fetch it, but it will still go fetch the stick if it is thrown.

4. Local variables take up less space by being generated and removed when the function runs/is done running. Global variables can be used from anywhere in the script, and take up much more memory because they are stored in the webpage throughout the webpage's loading duration. Local variables can have the same name in different functions and not cause a problem, whereas having global variables with the same name does not work, and naming becomes more difficult/creative.

Day Seven:

UI/UX

1. Psychology - "How does this make them feel?"
   

   Bad: https://www.jcpenney.com/?utm_source=google&utm_medium=cpc&utm_campaign=paid%20search&cid=paid%20search%7cgoogle%7cG_JCP_Official_Site%7cG_JCPenney_EXACT&utm_content=aud-384198643429:kwd-29180950&utm_adgroupid=2963342685&utm_keyword=jcpenny&utm_matchtype=e&utm_device=c&gclid=Cj0KCQjwov3nBRDFARIsANgsdoFU5k99F2UiBsx_BRLsj6S1o0xzmDqXBGyJ1kqrXgcSLdZ9FL6LXWEaAm54EALw_wcB&gclsrc=aw.ds
   

   This gives me so much anxiety, it makes me not want to shop at JCPenny's ever because there is so much going on on the front page. There's ads, all the capital letters make me feel like I'm being screamed at, and the colors are all over the place. The page is also extremely long, and basically looks like a mail advertisement adapted for the web. My eyes don't know where to look first. Also, why is the link so long!?
   

   Good: https://www.lushusa.com
   Just as a comparison for a different shopping experience, this is less overwhelming. Different categories are broken up by large images/sections, and it flows much better. The website isn't as long, highlights fewer individual products, and has a consistent design flow.
   
   
   

2. Usability "Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?" and "Could you solve this just as well by doing something more common?"
   

   Bad: http://www.richardthethread.com/index.php?src=gendocs&ref=Glossary&category=Main
   This entire webpage has broken links, but this entire page of definitions that could be presented more efficiently, or at least consistently. The fonts are two different colors, but not for consistency's sake; you can tell more terms were added to the Glossary at a later date. Important links are tiny and in non-obvious places, like "How to Order" at the very bottom. The left menu with products is long and doesn't offer much distinction between groupings of things. You can't click the head/header photo to get to the homepage. The site does say copyright 2013, so it hasn't been updated in too long, but it is cringe-worthy.
   

   Good: https://www.vocabulary.com/lists/23400
   For an example of how something could be done by doing something more common... Such subtle changes like increasing font size and color of the term they are defining, and having a consistent color scheme of Term: One color, Definition: Second color makes a huge difference! Also, everything is easy to find and navigate on their main page.
   
   
   

3. Design - "Do users think it looks good? Do they trust it immediately?"
   

   Bad: http://www.arngren.net
   This page is a visual nightmare. My eyes don't know where to go, where to start, what is important, what is a link, are they all links...? My mind is reeling, lots of anxiety. It, like JCPenny's website, looks like a printed out ad, which is not what websites should be going for. There appears to be no attempt at a design here, just putting everything on the page.
   

   Good: https://cicmd.com
   This isn't a direct comparison example, but the difference in design is night and day. It looks legitmate because it has been updated recently, looks lovely, flows well, important links are more prominent like "Patients", "Contact Us", "Our Physicians", etc.
   
   
   

4. Copywrighting - "Is it clear, direct, simple, and functional?"
   I'm honestly really struggling with thinking of examples for this one. I tend to avoid websites that are overly complicated like the plague, so thinking of examples is proving to be quite difficult.
   

   Bad - https://www.nytimes.com/2018/09/07/your-money/fafsa-app.html
   Honestly, running out of time, but this article is exciting because I remember filling out the FAFSA and wanting to pull my hair out. Seriously, most government organization websites are not simple at all.
   

   Good https://www.rockthevote.org/register-to-vote/
   I know that Rock the Vote's platform has drastically increased voter registration numbers since its inception, and it is because it makes the process so painfully simple, and offers other organizations the ability to "partner" with them, so that organizations like March for our Lives all the way through the National Parks can have this widget installed on their own website to encourage voter registration outside of the Rock the Vote website. Simple, widespread, and efficient! Hardly any big terms that tend to get confusing on government documents.
   
   
   

5. Analysis - "Do you know why users do that, or are you interpreting their behaviour?"
   

   Bad: Honestly, most government aid programs websites for the elderly fail to utilize analytics. Here's two: https://www.medicare.gov/index and https://www.medicaid.gov
   For Medicare, I think most states/cities fail to make the webpage easy to use for their target audience. My mom is a perfect example of someone in their 60's that struggles to use most websites (even computers/tablets) because of a lack of understanding tech and how it has progressed/become more efficient. That being said, a website with 80+ links on a page is very overwhelming, or a page with 6 different "button" styles makes for inconsistent understanding. On medicaid.gov, when you hover over the Medicaid dropdown menu, you have an insane number of links to choose from. Thankfully they have a search bar, but I doubt most elderly people understand the "find" function that computers have for various webpages to highlight the term they are looking for.
   

   Good: https://crypton.trading/
   This website knows its target audience, and makes interacting with the website very fun. People that trade an electronic currency have to be pretty "with the times" in terms of navigating and understanding websites, so this one hits the nail on the head. There is only be one page, but nothing feels crammed or rushed, and all of the text is extremely simple. "Clever code" is definitely more welcome to a demographic that loves innovation.