Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Today’s Notes
- Today is an EHS A Day
- Pantone Color of the Year – Very Peri – let’s take a quick look
- English will start at 11:30am today due to a meeting
- Blender 3.0. Let’s not all download at once. Sometime this week, update your version of Blender
- This is week Eighteen (18) and we have two weeks after this one before the semester ends.
- Visitors this week – just a couple – Tuesday and Thursday at 1:30pm until 2pm.
- Semester 1 – Ends on January 17th. We are not doing an exam (cheering, screaming, general excitement). Your grade will be 50% Q1 and 50% Q2. All work must be in to me by Monday, January 17th – midnight. After that date, the grade is locked and done.
- In this new year we will be jumping into animation 2D and 3D, game design and game development as well as Skills USA teams and programming. The time will go fast and I think you’ll find enjoyable.
- This week we will begin your Web Portfolio and we’ll look again at the requirements today.
| January 3rd – 7th (Week 18) | Collection of portfolio assets Personal Photo Final Draft About Me Site Design, Layout planning Wireframe of Senior Portfolio (graded) |
| January 10th – 14th (Week 19) End of Term Jan. 17th | Wireframe of Mobile version (graded) Coding Sprint, desktop – all pages |
| January 17th – 21st (Week 20) | Usability testing Coding Sprint, mobile version Updates Presentation of Portfolios (Friday, January 21st) |
| January 24th -28th (Week 21) | New unit – Animation & Game Dev |
9:40 Attendance & Mail
9:45 Where were we…?
Back before break (last year) we were playing around with Bootstrap. You built several projects using Bootstrap and each of you were successful calling the Bootstrap classes in your HTML.
As you demonstrated with your 5 section website – Bootstrap is fast and easy for website layouts and prototyping.
There are other Frontend Frameworks on the web…. many others……
W3.CSS is part of the W3 Schools documentation and has no JS, just pure light CSS classes
Foundation is a popular modern and reliable web development framework
Pure.CSS is another easy to use framework with good documentation
Metro 4 is a quick to use scaled down framework
Semantic UI is pretty similar to Bootstrap – nice components
and there are many more..
Questions – I’ll set a timer for 3 minutes for each framework. With Your partner, jot some notes while you do a quick investigation. Be prepared to respond to the following questions:
- Is this framework free?
- Is the framework open source?
- How was the documentation? (like.. does it make sense) What companies are using this framework?
- Were there example or tutorials available?
- Scale of 1-10 (10 being heavy lifting) how hard do you think it is to use? What made this Framework different from your Bootstrap experience?
Activity: An Alternative to Bootstrap
ReBuild the Home Page of this website using one of the front end frameworks listed above or investigate and find your own framework to try out.
- Select one of the frameworks from above
- Just do the front page. You’ll build in ATOM
- Incorporate the colors and images.
- Recreate the page to be more interesting
- Explore typography and layouts
- Try out a component
- Do create the navigation but it does not have to go anywhere
- Check for validation and clean commented code
- Don’t forget to populate the head tag
- Filename: FrontEndFrameworks and upload to the server. Due Thursday, January 6th.
10:35 Mask Break
10:45 Wireframing
Wireframing is a pre-production process that creates a prototype simple enough to be understood by everyone but with enough detail to show all the functionalities.
A wireframe is the first step to communicating your website ideas to other people!
Additionally, wireframing can help teams by finding problem areas and user experience issues within a new app before it’s launched and wireframing can help explain and share with key stakeholders within an organization how a webpage or webapp is going to work.
Wireframing is a quick sketch or illustration (it is not a detailed drawing) of a website’s hierarchy. Headings, Divs, Menus, Buttons, logos, images ,text all can be included in a wireframe.
Wireframing can be done on paper or digitally with a host of tools. Personally, I prefer to work on paper first.
Let’s do a quick exercise where we create a wireframe from something already built in order to learn how it’s been made. We can use this site as our WireFrame model. Let’s work off pencil and paper to begin.
Try to be as neat as possible, most often it will be others that will be working off your design.
11:30 English with Ms. Yopp
12:15 Lunch
12:45 MAMP and WAMP and Local
Linux Apache MySql PHP
Windows Apache MySql PHP
Macintosh Apache MySql PHP
Operating System, Apache is the Http server language, MySql is the database language and PHP is the programming language
In order for us to run a content management system, like WordPress, we need to install some tools that turn our machines into local hosts (servers) just like if the website was live on the web.
I really like the ease of Local, as it creates a nice and easy WordPress installation too.
This afternoon, create an account with Local and do an installation of WordPress. We’ll come back to this as the week progresses.
1:10 Mask Break
1:20 Production Time & Guided Support
FrontEnd Frameworks Webpage Rebuild (due Thursday)
Wireframing for Portfolio Desktop (all pages) (due Friday)