DanLepore

Sunday, August 1, 2021

UVA Web Design - Week 11

OMG JavaScript and jQuery are AWESOME!!

The first thing to learn is the Document Object Model (DOM). DOM is how you identify specific objects when interacting with those objects using JavaScript. Here is a good link that describes DOM: https://www.w3.org/TR/WD-DOM/introduction.html

Scripts are placed in between script tags <script></script>

JavaScript Tutorial: https://www.w3schools.com/js/

A JavaScript excerpt from my project site:

function leporeFunction() {

var x = document.getElementById("btnlepore");

x.style.background = "#99ced3";

var x = document.getElementById("btnlaw");

x.style.background = "white";

var x = document.getElementById("btnwilson");

x.style.background = "white";

var x = document.getElementById("leporediv");

x.style.display = "block";

var x = document.getElementById("leporetree");

x.style.display = "block";

var x = document.getElementById("lawdiv");

x.style.display = "none";

var x = document.getElementById("lawtree");

x.style.display = "none";

var x = document.getElementById("wilsondiv");

x.style.display = "none";

var x = document.getElementById("willtree");

x.style.display = "none";

}

</script>

Once you have a good handle on JavaScript syntax and DOM, you can dive into jQuery, which is an incredible library of JavaScript functions.

jQuery Link: https://jquery.com/

A jQuery excerpt from my project site:

$(function() {

//single book

$('#mybook').booklet({

width: '100%',

height: '100%',

manual: false,

overlays:true,

arrows: true,

arrowsHide: true,

closed: true,

autoCenter: true,

keyboard: true,

tabs: true,

hovers: true,

hashTitleText: ' - ',

menu: '#custom-menu',

pageSelector: true });

});</script>

UVA Web Design - Week 10

Coming into the home stretch!

Photo by Giorgio Trovato on Unsplash

This week we examined E-Commerce, the web's moneymaker!

E-Commerce models:

Business-to-Consumer - Amazon,
Business-to-Business - EDI
Consumer-to-Consumer - eBay, Craigslist
Business-to-Government - CDWG

E-Commerce transactions need to be secured. That's where Encryption comes in!

SSL, Digital Certificates, and Encryption Keys are all important topics. Here is a good link covering web encryption: https://cyber.harvard.edu/ecommerce/encrypt.html

Photo by Duncan Meyer on Unsplash

We also read about Web Promotion including Search Engine Optimization. Some meta tags are needed to help promote a website's search engine score:

Here is an excerpt from my website project:

UVA Web Design - Week 9

Week 9 took us into the System Development Life Cycle (SDLC) a topic I learned in detail during a previous class. This chapter provided good information about testing websites, creating test plans and tools to help with testing.

Good links for testing websites:

HTML Validator: https://validator.w3.org/

CSS Validator: https://jigsaw.w3.org/css-validator/

Browser Compatibility: https://www.browserstack.com/users/sign_up?ref=guide-cross-browser-compatibility-testing-top

Web Download Speed: https://tools.pingdom.com/

Accessibility: http://www.cynthiasays.com/

We also looked at multi-media controls including <audio></audio> elements, <video></video> elements, and <embed>.

Here is a link to some good multimedia element information:
https://www.w3schools.com/html/html_media.asp

Here's a sample from my project site code:

UVA Web Design - Week 8

Photo by Kelly Sikkema on Unsplash

This week we learned about <table> and <form>.

I remember working with Tables back in the day to create HTML page layouts, but Flexbox, Grid and other techniques have taken over for layout styling. While I imagine there are still good reasons for using Tables, I found it much easier to use a flexbox or grid to present a table-like layout, including "cell" borders.

Here's a link to some good table syntax information:
https://www.w3schools.com/html/html_tables.asp

Here is an excerpt from my project:

<table border="1">
<caption><h2>Links to Useful Information</h2></caption>
<thead>
<tr>
<th id="group">Link Group</th>
<th id="link">Links</th>
</tr>
</thead>
<tbody>
<tr>
<td class="group" rowspan="6" headers="group">Technology</td>
</tr>
<tr>
<td headers="link"><a href="https://www.freebsd.org" target="_blank">FreeBSD Information</a></td>
</tr>
</tbody>
</table>

Forms on the other hand... awesome! Forms are essential when you want to collect information from site visitors. There are many types of form controls. Here's a great link to some form information: https://www.tutorialspoint.com/html/html_forms.htm

Here's an excerpt from the form on my project site. Notice I am using a server-side script to process the form and that script is hosted on formmail.com

<form class="submit" action="https://fp1.formmail.com/cgi-bin/REDACTED" method="post">
<input type="hidden" name="_pid" value="REDACTED">
<input type="hidden" name="_fid" value="REDACTED">
<input type="hidden" name="recipient" value="1">
<label for="realname">Name:</label>
<input type="text" name="realname" id="realname" required="required" placeholder="Your Name"><br>
<label for="email">Email:</label>
<input type="email" name="email" id="email" required="required" placeholder="Your Email"><br>
<label for="comments">Question:</label>
<textarea name="comments" id="comments" rows="4" cols="22" required="required"></textarea><br>
<input id=mySubmit name="askbutton" type="submit" value="Ask!">

</table></form> 🤣

UVA Web Design - Week 7

What can I say except - CSS GRID LAYOUT

Photo by Romanov on Unsplash

Grid Layout is a way to create a two-dimensional page grid to organize HTML content. Looking at grid layout examples I knew I wanted to use the technique but it took a bit to figure out how it all worked. Once I got it going, I was able to organize my site content the way I wanted it.

Things to consider: Grid is for two-dimensional layouts - both horizontal and vertical. You can create a grid container that has both rows and columns, then you can assign HTML elements to particular rows, parts of rows, and one or more columns.

It took me a minute to understand the difference between grid and flexbox. Flexbox is ONE dimensional, meaning it can define a row OR a column but not both.

Both grid and flexbox can auto-align contents and you can reassign grid rows when you define @media for different screen sizes.

Here's a link to some grid information:
https://www.w3schools.com/css/css_grid.asp

Here is an excerpt from one of my grids:

body{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 80px auto 75px;
}

header {grid-column: 1 / 3;

grid-row: 1 / 2;

}

When troubleshooting the grid, I used Chrome's developer tools to "see" the grid and how my HTML elements were assigned to the rows and columns. In the developer tools, you can click the GRID button on the HTML element and the tool will draw the grid lines. This tool helped me trial and error troubleshoot.

UVA Web Design - Week 6

This week we dug deeper into CSS and page layouts, topics I felt somewhat comfortable with already but there was a lot more to learn. The FLOAT property can be used to shift HTML elements either to the right or left.

#selector { float: right; }

To clear a float, you can use the CLEAR property.

#selector { clear: right; }

We looked at Pseudo-Classes this week too, which was brand new for me but I quickly realized the value and incorporated several :hover sudo classes into my project.

Things to remember:

:link - for selecting the default state of a link that has not been clicked

:visited - visited link

:focus - when a hyperlink has keyboard focus

:hover - when the mouse pointer moves over a hyperlink

:active - when a hyperlink is clicked.

Photo by Merve Sehirli Nasir on Unsplash

A few examples from my web project:

#select button:hover {background-color: pink;}
#select button:active {background-color: #99ced3;}

footer a:link {color:inherit;}
footer a:visited {color: #ffffff;}
footer a:hover {color: pink;
font-weight: bold;}

UVA Web Design Week - 5

Photo by Edho Pratama on Unsplash

This week we explored the principles of visual design. We learned site organization options including hierarchical (the most common), random, and linear. We reviewed the use of color and how important contrasting colors are when presenting text to users that is easy to read and when designing other website elements.

A few things to consider:

1. Avoid horizontal scrolling.

2. Design easy navigation options.

3. Review how your site looks on various resolutions.

4. Use percentages when defining widths for a fluid site experience.

5. Place important information near the top of the page (above the fold).

6. Use white space to make page elements stand out from each other and be more readable.