ECS – Storyboarding and Introduction to Web Design
Last Class: Last class we learned data compression which a very important concept when trying to store digital data. Wherever we can find patterns in our data then we exploit that fact and replace patterns we find with other symbols This is the method we used when compressing songs All types of data has patterns, so we can compress really large files into smaller files A 30 MB song can be compressed to 3 MB An 800 GB hour long video can be compressed down to 1 GB
Introduction: Today we are moving away from Algorithms and Compression and moving onto web design The first part of web design or creating any high level program is to design or create a layout/structure for your code. There is a planning process that needs to occur first
Journal Entry: If you were to create a website of your choosing what would you create? Make a list of ideas for a website that might interest you Share your ideas with the people around you and choose one of your ideas This idea is what you will use to design your first web page using HTML Save your lists for use on later projects
Create a Storyboard: Now that you have developed a list of ideas for your website, you are going to choose one and create a storyboard based on the idea you chose. A Storyboard is a visual plan for a website(how it is going to look) Storyboards usually consist of pages that include a rough sketch outlining the content, navigation, and design elements of the website Navigation refers to elements in your web page that describe how to get to other areas. Design Elements refer to logo placement, pictures, how text is displayed, You can pair up and work on this assignment together. Create a storyboard for the homepage of the website chosen.
Gallery Walk: Post story boards around the room and have students visit about 5 different story boards Describe something you like about each one or give a recommendation about maybe something they should consider doing differently Add comments or suggestions via post-it notes
Introduction to HTML: Now that we’ve created our story boards for our website now we can go and move to creation of the site but first we must learn some basics. HTML (Hyper Text Markup Language) is the language used to design webpages. HTML works by using different HTML tags to define different types of text, image placement, headings, formatting options, everything <HTML> Defines an HTML document </HTML> <head> Describes information about the document </head> <title> Defines the title part of the document </title> <body> Defines the main part of the document </body>
Web Page Creation: Now I am going to design a very simple web page to show you the structure of an HTML file so you can create your idea. Now that I’ve shown you the basics create an HTML page. What you need to do: Have an appropriate title and have a sort paragraph of text When you are done designing the HTML save the file as a .html file and open up the file in your browser If you would like, you can engage in a process called Pair Programming One person programs while the other person describes what they need to do. Switch every 5-10 minutes.
HTML Example Format:
Webpage Add-ons: Mini Goal: Try to add one paragraph and add two lists to your web page. Notice no matter how you format the text in the <body> tag that all the text inside runs together For more formatting options you need more HTML tags
More HTML Tags: <p> Defines a paragraph </p> <h1> to <h6> defines a header </h1> to h</6> Try and insert these tags into your file and see the changes You need the end tag so the computer knows when to stop using a certain format The computer needs the correct instructions in order to produce the desired outcome
HTML Tags without End Tags: Some HTML tags don’t have ending tags because sometimes it doesn’t make sense to. You only want to do one task <br/> Defines a line break <hr/> Defines a horizontal line Experiment with these different HTML tags and see how you can format your site properly Try different tags and save your file to see if they produce the correct result If the output isn’t what is intended then debug your code A great reference site is http://www.w3schools.com/html/html_intro.asp Go there for more HTML tags you can use and other info about HTML