Session 1: Today we will take a look at creating simple HTML forms that can be connected to your email address through the FormSpree.io API. If time permits we will also demonstrate techniques to embed media, apply smooth scrolling, and display vector based social media icons.
Smooth scrolling can now be handled in CSS like so:
html {
scroll-behavior: smooth;
}
The only advantage of using this Javascript is that you can adjust the speed of the smooth scrolling.
$( document ).ready(function() {
// Select all links with hashes & remove links that don't actually link to anything
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {
if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) { // On-page links
var target = $(this.hash); // Figure out element to scroll to
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) { // Does a scroll target exist?
event.preventDefault(); // Only prevent default if animation is actually gonna happen
$('html, body').animate({
scrollTop: target.offset().top
}, 500, function() { // Callback after animation & must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
}
else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
});
Relevant Links:
The Basics of HTML Forms on W3Schools
Web3Form API to Send Email from HTML forms
Smooth Scrolling Code Snippet
FontFabric Social Media Pack
Final Web Application Milestone #3
Due: Week 14, Session 2 (before class starts: 2 points)
1. Be prepared to show your nearly finished final project in group critiques
2. Take notes and consider the suggestions of your classmates
3. Give your classmates feedback on their work-in-progress
Session 2: Today Final Project Milestone #2 is due. Also, any ideas that you have for quick demos will be considered. If time allows let’s take an introductory look at the Google Maps API.
Note: Don’t forget about your footers! Things to consider for the footer include: a site map (links to all the content on your site), additional resources (links to related websites and content), contact information (who are you?), social media icons (easily share the site).
http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/
This page provides a good overview of why smooth scrolling is necessary as well as explaining how you would implement it on your site. It also provides a nice file that you can link to in your html so you don’t have to deal with a bunch of code in a script tag.
http://designscrazed.org/free-social-media-icons/
This website has a bunch of different packs of social media icons for your website. You are able to view them and download a specific pack of icons that fit what you need for your website.
http://www.creativebloq.com/web-design/website-footers-1131597
The footer is just as important as the header. The first thing to think about when designing a footer is asking yourself: “What do you want your visitors to do when they reach the bottom of the page?” The last thing a lot of users see when visiting is the footer, so it is important to put good content there.
http://www.tutorialspoint.com/html/html_embed_multimedia.htm
This website explains how to embed many different types of media and shows what the code would look like for each example.
http://www.w3schools.com/html/html_youtube.asp
This page shows how to embed a Youtube video. It also includes how to use different tags to add controls and other features to the video.
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll
This page displays what the code for smooth scrolling looks like. It also allows you to edit the code and see its effects.
This one is about customizing your map through javascript:
https://developers.google.com/maps/documentation/javascript/styling
This one is about fancy scrolling:
https://css-tricks.com/fancy-scrolling-sites/
This one is more about the ‘how to’ of parallax scrolling. I know we saw examples but this is more of the how to do it:
http://www.w3schools.com/howto/howto_css_parallax.asp
http://embedresponsively.com/
Allows you to enter a link to media (YouTube, Vimeo, even Google Maps and Instagram) and convert it to a responsive style code. The code can be pasted right into your html.
https://www.w3schools.com/html/html_tables.asp
Explains the tag, which could be a great way to present contact lists and numerical information from your sustainability campaign.
https://www.canva.com/
Easily creates clean-looking infographics, plus offers a huge amount of free stock images. Also some cool CSS3 animations going on in the background of this site.
***The second website explains the “table” tag.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding
This website gives different examples/ways to multimedia and embedding (images, video & audio).
https://css-tricks.com/snippets/jquery/smooth-scrolling/
With this website, it gives lots of tips for perfecting smooth scrolling.
https://learn.shayhowe.com/html-css/adding-media/
Another website that gives insight to how to embed media in html with lots of examples.
Here is a website that has a great overview and tutorial for basic HTML form creation, including the coding and styling elements necessary to achieve a variety of results (https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form)
Here is a great blog post written by an interface designer and specialist about User Experience (UX) regarding HTML forms, exploring all the different possibilities within HTML coding to generate the best UX (https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/)
Here is a basic overview of the HTML process of embedding audio or video into a page, as well as some more advanced concepts like adding subtitles to a video (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
https://www.hongkiat.com/blog/cool-useful-html-tags/
This link is all about interesting things that you can do with images through HTML and Javascript. By far the coolest, I think, is the first example of using an interactive image as a map to get from page to page.
https://www.orbitmedia.com/blog/website-footer-design-best-practices/
This page details the importance of the footer. It also gives you 27 cool examples of information you could add to your footer should you choose to jazz it up.
https://mayvendev.com/blog/20-fresh-sites-with-amazing-scrolling-effects
My final link is a blog that mentions 20 “fesh” sites with cool scrolling techniques, many of which we haven’t touched on in class. While it doesn’t give direct text on how to apply these techniques to our pages, it does offer a good creative jumping off point. If you’re thinking if doing something more unique with your scrolling I would give this a good look. I recommend checking out “Monokroom” and “AFROM.”
https://stackoverflow.com/questions/13299297/using-fancybox-to-open-a-pop-up-html-page/13299886
This linked explains how to use a Fancybox to open a pop up HTML window page. I believe this function can be useful for building a website so the user can focus on whichever page they would like to open.
https://www.jqueryscript.net/slider/Awesome-Fully-Responsive-jQuery-Slider-FlexSlider.html
This link explains what FlexSlider is and how to use it in HTML code. The code is broken down in to adding items o head of document, markup, call to the function, and customization of slider.
https://css-tricks.com/snippets/jquery/smooth-scrolling/
This website explains what Smooth Scrolling is as well as the benefit of using Smooth Scrolling in HTML code. The website includes an example of Smooth Scrolling code with jQuery, and you can see the result of the implemented code.
This tutorial will help show how to implement smooth scrolling effects with just CSS.
https://www.youtube.com/watch?v=-yApsBs5rR4
This website explains the use of the tag and its many uses. This includes attributes and examples.
https://www.geeksforgeeks.org/html-embed-tag/#:~:text=The%20tag%20in%20HTML,ins%20such%20as%20flash%20animations.
This website mainly shows the web browsers that are compatible with CSSOM Scroll-behavior.
https://caniuse.com/css-scroll-behavior
The first website gives good examples on how to do smooth scrolling.
2 good links for smooth scrolling and vector based.
https://www.digitalocean.com/community/tutorials/how-to-create-a-static-footer-with-html-and-css-section-7
This one talks about adding social media icons to your footer and gives some guidance on menu items and how to add those/what to add.
https://alvarotrigo.com/blog/website-footers/
This one gives a bunch of inspo for footers and shows the CSS, HTML, and JavaScript for each one.
https://javascript.plainenglish.io/18-javascript-css-scroll-effects-for-website-d7cd8bd81da2
This link shows some scrolling features using javascript and how to insert it into your HTML.