- HTML is the foundation of everything we see on a page. Using elements we can structure how a page will be laid out.
- Elements contain two tags, an opening tag
<html>and a closing tag</html>, this example indicates that anything in between is HTML code. "Element" and "tag" are terms used interchangeably but some tags can stand alone (have no closing tag), elements must contain an opening and closing tag. - We use attributes in HTML elements to give additional information about the content of that element. Attributes appear in the opening tag containing the name of that attribute and a value for it. Most attributes are limited to specific elements and can only be useed in a pre-defined way or following a stipulated format.
- The
<head>,<body>, and<title>HTML elements can be compared to a book. The<title>is like the book cover, on a web browser like chrome it will show up as the title of your open tabs. The<head>element usually contains information about the page including the<title>. The<body>element indicates everything that will be seen in the web browser. - To view the source of a website using Chrome open the view drop down menu for the browser, go to the developer option, and click on source. Another way to view the source is to right click on the page and look for the "view page source" option.
- Five examples of HTML elements:
<h1> </h1>is an HTML element for headings. There are six levels of headings and decrease in size as the number gets larger.<b> </b>is an HTML element that will make any characters contained within bold .<i> </i>is an HTML element that will make any characters conatained within italic .<sup> </sup>is an HTML element that will make any characters contained within a superscript or raised character(s). Most commonly its used for dates or mathematical concepts like powers. ex. The 4th of July.<sub> </sub>is an HTML element that will make any characters contained within a subscript or a lowered character(s). It's most commonly used for footnotes or seen in chemical formulas. ex. H2O<strong> </strong>is an HTML element used to indicate a strong impotance. Characters contained in this element are bolded by default. ex. WARNING: May contain parts dangerous for small children.
- An element that doesn't conatin any words between an opening and closing tag is referred to as an empty element. They usually only contain one tag with a space and forward slash before the closing bracket. ex.
- Semantic markups are text elements that are not intended to change structure but add extra information to pages. Though they don't alter the structure of pages but they allow programs to better understand a coders intentions. For example google can identify quotes placed in
<blockquotes>or screen readers can put emphasis into their voice if you use the emphasis element<em>. - HTML 5 introduces new elements that allow for easier structuring of pages. Abandoning a lot of code such as
<div>and their id and class elements. The new elements are still subject to change but a lot has been adopted and used to enhance pages and their navigation. Three examples of new HTML 5 elements are:<nav>stands for navigation and is used to navigate the primary site. Not to be confused with links realted to content, the<nav>feature was initially used for things like privacy policy, terms and conditions, and accessibility information.<aside>is another new element that has two fucntions depending on whether it is in an<article>or outside. When it is inside an<article>element it should be information that is related to the main article but not essential. More of a reference piece pertaining to article such as a glossary or pull quote.<section>groups related content, there may be multiple sections on a page. Sections can contain multiple<article>elements that have a similar theme, but can also be used to "section" lengthy articles.
Day 1 Codepen link: https://codepen.io/ckoga/full/pBEPKX
-
The three types of lists in HTML and they're characteristics are:
- Ordered lists can be numbered, or steps that need to be preformed in a specific order. A couple of examples are recipes or legal documents.
- Unordered lists use bullet points and characeters in a straight forward list format.
- Definition lists are lists that have terms and their definitions in a list format.
-
<a href="http://try.turing.io">Turing</a>is an example of basic structure of writing a link. Users can click on anything inbetween<a> </a>and the href attribute specifies which page you want to link. -
In order to have a link open in another tab/window the attribute and value needed is
target="_blank"wheretarget=is that attribute and_blankis the value placed at the end of the first tag in your element. An example would be<a href="http://try.turing.io" target"_blank">Turing</a>. -
To link specific parts of the same page you must first set up id attributes to specify location. This is normally done on headers with the attribute id and a value that starts with the # symbol and must be followed by and underscore or letter. An example
<a href="#top">
Day 2 Codepen link 1: https://codepen.io/ckoga/pen/pBEPKX?editors=1000
-
CSS controls the visual aspect of a page. CSS allows us to create rules that will determine how elements will be seen. We can change all
<h1>headings to show up in red or all<p>paragraphs should be displayed in a specific font. -
Cascading Style Sheet or CSS is a plain file text format for formatting content on web pages. It allows a style to cascade, or fall, from one style sheet to another. This allows us to use multiple style sheets for one HTML document and its easier to assign styles to elements.
-
A CSS rule is comprised of two parts a selector, and a declaration. A selector is the element that the rule applies to. A declaration styles the elements indicated by the selector, a declaration is comprised of two parts placed inside of
{}. The two parts needed are a property and a value seperated by a colon. Properties are the aspect of the element you wish to style. An example would the type of font you want to use it would be writtenfont-family:the value would be the name of the font you wish to useVerdana.h1{
font-family: Verdana;}
Here the selector ish1the declaration says we want the font(property)to be Verdana(value). -
Linking a CSS stylesheey only occurs when you are using an external CSS. The
<link>element is an empty element that is placed in the<head>. It should have three attributes that tell your page; where to look for the CSS style sheethref, the type of of document being usedtype, and the relationship between HTML page and file you are linking to itrel. A couple things to note aretype, in this case will have a value of text or css. Therelwill bestylesheetwhen linking to a CSS file. -
Using an external CSS stylesheet shows its effetivness when you are styling a site with multiple pages. This allows you to use a uniform style across all pages with out having to put a
<style>element into every page. -
One of three ways to apply color using CSS is called hex code. Hex codes are six digits following a pound sign/hash tag. The six digits represent values or red, green, and blue in hexadecimal code. #66cdaa
-
Introduced in CSS3, HSL which stands for hue, saturation, and lightness offeres an intuitive way to select colors used in stylesheets. Hue represents what we normally think of when we hear the word color, in HSL it is often shown as a circle with all the standard colors. Saturation is the amount of grey in a color. Lightness is the amount of white in a color.
- Hue is shown as an angle (0o-360o).
- Saturation is shown as a percentage.
- Lightness is also shown as a percentage with 0% being white, 50% being normal, and 100% being black.
-
The three main categories of font in typeface are:
- Serif named because of the details added to end of each stroke
- Serif fonts are typically used in longer passages because they are considered easier to read.
- San-serif fonts have straight end letters giving off a more clean look.
- San-serif is more commonly used when text is small as it can be easier to read.
- Monospace fonts have fixed-width letters, letters that are the same width.
- Monospace fonts are commonly used in code because of how nicely they align. It is considered easier to read in code.
- Serif named because of the details added to end of each stroke
-
Font-size can be specified three ways:
- Pixels are commonly used as they offer the percise control over the amount of space text uses.
- The number of pixels is followed by
px.
- The number of pixels is followed by
- Percentages can be used in reference to 16px which is the default size of text in browsers.
- A size of 50% would be 8px. Important: If you make a rule that pertains to all the text inside the
<body>that you want text to be 75% (12px), then if you make another rule it will be based off the 75% not the standard 16px.
- A size of 50% would be 8px. Important: If you make a rule that pertains to all the text inside the
- EMS is another unit of measure for fonts.
- An em is the width of the letter m.
- Pixels are commonly used as they offer the percise control over the amount of space text uses.
Day 2 Codepen link 2: https://codepen.io/ckoga/pen/pBEPKX?editors=1100
-
When using the
<input>element for a form it'stype=will determine how it behaves. A few examples would be:- "text"
- This will result in a single line text input.
- "checkbox"
- A checkbox input allows useres to select multiple options, usually answers to a question.
- "radio"
- A radio button unlike a checkbox only allows one option to be checked. Often seen as a pick your favorite type of input.
- "text"
-
If you wish to creat a dropdown list you will need to use the
<select>element. Within the<select>element you must have a name attribute that will tell the servers the value of the options available. Next you must create the<option>element, this will provide the user with options to select from. -
In order to send form data to a server the input element type is submit.
-
When grouping multiple form items together you want to use the
<fieldset>element. Following the<fieldset>element you can add the<legend>element as it can be useful to show why those specific forms were grouped together.
Day 3 Codepen link 1: https://codepen.io/ckoga/pen/pBEPKX?editors=1100
-
The definition and difference between border, margin, and padding:
- Borders seperates one box from another whether you make it visible or specify it to be as small as possible.
- Margin is the size/space you allocate between two boxes. Think of two images on a page, if left alone they will be put right next to each other by defining a margin you can leave a space between them.
- Padding adds space between the HTML element and the box given by CSS. Adding padding is helpful to make the content easier to understand.
-
The CSS rule for padding goes in a clockwise order starting at the top. If the input is 1px, 2px, 5px, and 10px the top padding is one pixel, the right side will be 2 pixels, the bottom will be 5 pixels and the left will be 10 pixels.
-
The difference between block-level elements and inline elements are visual. Block-level elements puts elements like
<h1>, <p>, <ul>, and <li>on a new line, versus inline elements like<img>, <b>, or <i>that flow along in the text. -
Fixed positioning ignores containing elements and is fixed in relation to the browsing window. These elements do not affect the position of other elements and do not move when a user scrolls. When using fixed positioning elements are no longer in normal flow and boxes can overlap, the z-index property allows you to control which box appears on top.
-
A user will sometimes change the size of a browser window a fixed width layout will prevent the layout of a page from changing. A liquid lay out will stretch and contract as a user increases or decreases the size of a browser window.
Day 3 Codepen link 2: https://codepen.io/ckoga/pen/OGjrpQ?editors=1100
- In an image element the
altattribute provides a description in case the image cannot be seen. - The placement of an image in code determines whether or not it is inline or block. By placing an image inside of a block element the text will flow around it. If an image is place before a block element such as
<h1> or <p>then the text or content of that block element will appear on a new line. - When creating images to use on a website the image format is important. When using images with varying colors you should use jpg, flat or monocolored images should be in png format.
- A page will load HTML and CSS code before it loads images by specifying height and width of an image in CSS it helps pages load more smoothly as it tells a browser how much space is needed for an image letting the image download as it renders the rest of the page.
- An image sprite is the use of one image for several different parts of an interface. By using just one image a browser can load faster. The one image will have various appearances depending on its function in the interface. If it's a button it can have a clicked or unclicked appearance.
-
Declaring a variable must be done using both a variable keyword and a variable name. An example of that would be var color; or var quantity; the
varis a variable keyword and lets JavaScript know that you are creating a variable. Color and quantity in this case are the variables and as of right now are considered undefined since there isn't any value assigned to the variable. In order to assign a value we need to use an assignment operator(=)the value can be numeric, a string, or boolean. -
The three big data types in JavaScript are:
- numeric data
- For counting and calculating, even taking negative numbers. The only thing to note is Java will not take comas.
- string data
- Is comprised of letters and other characters. String data must be contained within a pair of matching quotes.
- boolean data
- Boolean data can only have two values true or false.
- numeric data
-
The six rule of naming variables:
- A variable name must start with a letter, dollar sign ($), or underscore (_). It cannot start with a number.
- A name can contain letters, numbers, dollar sign, or and underscore. It cannot contain a dash or period.
- You cannot use variable keywords or reserved words. Keywords like
varwhich is used to declare a variable. Reserved words are words that may be used in future versions of JavaScript. A few examples of reserved words are abstract, else, and insatanceof. - All variables are case sensitive so color and Color are considered to be different variable names. Using both is considered bad practice so be creative.
- Use a name that describes the kind of information that the variable stores.
- If a variable name is made up of more than one word use a capital letter for the first letter of every word after the first word. An example would be firstName.
-
Arrays are useful when working with lists or a set of values. Arrays are extremely useful for listing as you do not need to specify how many values will be contained. When creating an array the values listed start at zero instead of one and increase as you go.
var animals; abimals = ('lion', 'tiger', 'bear'); To retrieve a value for 'tiger' you would put
animals.item(1). -
Statements and expressions are very similar, most expressions can be used as statements but most statements cannot be used as expressions. The reason is that a statement (a complete line of code) performs an action while an expression (any section of code) evaluates to value.
-
Operators are used in expressions to create a single value from one or more values. You can use assignment operators to assign values to a variable, or arithmetic operators perform basic math, string operators combine two strings, and comparison operators compare to values and return true or false values.
- When entering sayHello versus sayHello() into the console, sayHello() is read as a function name and can call upon the function. Alternatively sayHello will return the statement associated with it.
- Function parameters are used like variables and are placed within the parentheses after the function name. Arguments are the values or variable needed to do the calculations.
- The return keyword will return a value to the code that called the function. I would interpret this as executing the code, doing the calculation required using inputted variables.
- The key difference between local variables and global variables are their usages in functions. Local variables are written inside a function and can only be used by that function, these variables can be changed and called upon whenever needed. A global variable is written outside of a function and can be used anywhere in a script. Something to note is that a global variable takes up more memory and should be used as little as possible. There are some circumstances where a global variable is more practical, if you have a variable that is constant throughout the entire script then it is acceptable to make it a global variable so you don't have to define the variable in each function.
-
Psychology: How much work does a user have to do to get what they want?
- YouTube is one of the best examples of a site that requires a minimum amount of work from the user. The hardest part of using YouTube for a user is stopping.
- This car parts site is a good example of a bad UX design. There are too many links, some are redundant, some you have to wait fifteen seconds to even know where they might lead.
-
Usability: Have you provided everything a user needs to know?
- Amazon is a good example of a site that tries to provide a user with all the information they would need to accomplish the task at hand.
- This one I have personal experience with. RTD says they want to make transportation easier and more affordable. Unfortunately besides a phone number hidden at the bottom of the page they have no clearly marked contact information for this specific department. The biggest problem I had with this information page was the lack of information besides the obvious, I know you are trying to make it more affordable but I would love to know what the price is or which neighborhoods/regions already have a pass set up.
-
Design: Do the colors, shapes, and typography help people find what they want and improve usability of the details?
- Mockplus is something I stumbled upon finishing day 7 of the capstone. It not only fits the requirments for great use of colors and fonts but so far seems to be a great reference for UI/UX design.
- Arngren is an all around example of terrible UI/UX design, but the colors and layout were especially hard to handle at first glance.
-
Copyright: Does it reduce anxiety?
- I immediately thought of Google. The first reason is because Google can solve any problem right? The second is the simplicity of Google's main page, there is nothing confusing or complicated about it.
- I have to use Arngren again as it is the polar opposite of the Google search page. its chaotic and confusing in every aspect.
-
Analysis: How can you use this analysis to make improvements?
-
Mangarock is an app that I have been using for close to a decade now and though it isn't the prettiest UI out there I can say that the UX has improved greatly over the years. From search features, dark theme, to their suggestion feature each has been added and upgraded over the years to make an amazing app.
-
I searched for Myspace to showcase their bad UI and talk about how it fell behind sites like Facebook not only in functionality but also appearance. I discovered that it has drastically changed it's look even though it appears very modern and updated I would say this is a great example of how bad analytics can be detrimental to a site. I can't figure out if Myspace is trying to be a music streaming service or a entertainment news blog. It would appear they are trying to cover two fields that have been reported to be popular but can't decide which one to go with.
-