About Mr. Messina

Hey class, Mr. Messina here. This is my second year at Andover High School.
This year I will be teaching five classes:

Michael Messina is a technology teacher and community engagement architect coaching students to solve real-world problems with computing and information and communication technologies (ICTs). Michael holds a Master’s in Urban and Environmental Policy and Planning from Tufts University where he concentrated his studies on how ICTs could enhance urban planning and public participation. His thesis research project enabled him to collaborate with community organizations to test crowdsourcing as a problem solving model for government and nonprofits. He worked at City Year where he pioneered their social media program including the development and implementation of corporate policies, social media training and a new management structure which encompassed 20 locations. Mr. Messina was also a web designer at MIT and a systems manager in U.S. Air Force where he received awards for his leadership and performance. Michael graduated magna cum laude from Emerson College with a Bachelor's in Marketing Communication and Speech.

Course Resources and Tutorials

Assignments and Quizzes

A.1.1 Class Setup

A.1.1 Class Setup

posted August 24, 2015

Before we get started with Web Design and Development, please complete the following assignment. You will be graded on this because it's that important.

  1. Sign in with your k12.andoverma.us school address.
  2. Go to Google Classroom
  3. Verify that the code editor Brackets is installed
  4. Create an account on Codeacademy (use your Google login)

A.1.2 Your Favorite Website

A.1.2 Your Favorite Website

posted August 24, 2015

You are not going to know everything that goes into the website and that is okay.

This is a starting point to help you get an idea of all the different components that make a website work. Feel free to use this website or any resource on the Internet as a resource (use links to cite work).

Consider the following questions:
  • What is the name of your favorite website?
  • Why is it your favorite?
  • What does it do?
  • Who uses the website? Who does it appeal to? (see Alexa.com and Quantcast.com)
  • What does the design look like?
  • Draw your website in boxes or in a grid.

Hint:

You can view the source code of every web page.
Chrome > Menu > More Tools > View Source

A.1.3 History of the Web

A.1.3 History of the Web

posted August 22, 2015
  1. Pick any topic you are interseted in related to the 1.2 History of the Web and 1.2.1 Web Standards.
  2. Write 3-5 paragraphs about the topic in a Google Doc.
    • Please include links and citations.
    • Write for the web (concise)
    • Use an outline format.
  3. The next class you will share the document with the person to your right.
  4. Each student will now make suggestions to their partner.
    • Don't edit the document, make suggestions via comments.
    • think about how it might be converted into a website

A.1.4 File Management

A.1.4 File Management

posted August 24, 2015
  1. Create a new folder in your school Google Drive titled "Andover High School"
  2. Inside that folder, create a folder for each year. (Freshman, Sophomore, Junior, Senior)
  3. Within that folder, create folders for each of your subjects.
  4. Your folder for this class should have automatically been created in Google Classroom.
  5. Create any additional folders that pertain to Andover High School (clubs, activities, sports, etc.)
  6. Organize and sort all of your documents and put them in the correct folders
  7. Create folders for anything outside of Andover High School and organize your entire Google Drive so every single file is in a folder

A.1.5 Command Line

A.1.5 Command Line

posted August 22, 2015

Before doing this lesson, you should review A.1.4 File Management

Login to your Codeacademy account and start on the tutorial.
Show me your work after the Navigation and Manipulation sections of the tutorial. (You do not need to do Redirection and Environment).
The tutorial is based on a unix-based systems such as Linux or Mac OSX (MS-DOS would be different).
The following information is provided by Codecademy (also in your tutorial). They also provide a nice list of common command line commands.

A.2.1 HTML Page Structure

A.2.1 HTML Page Structure

posted August 22, 2015
Login to your Codeacademy accound and start on the Make a Website tutorial and complete Unit 1: Structure your page.
Write 3-5 paragraphs about the topic in a Google Doc.
The next class you will share the document with the person to your right.
Each student will now make suggestions to their partner.
  • Don't edit the document, make suggestions via comments.
  • think about how it might be converted into a website
Show me your work after you complete the tutorial.
The tutorial some of the fundamentals of building a website with HTML and CSS:

A.3.1 Web History Group Project

A.3.1 Web History Group Project

posted August 22, 2015

Website Goals

  • To inform students and Mr. Messina about the history of the web.
  • Create a basic, static website that is based on you and your partner(s) web history project.
  • Develop a theme, site architecture and wireframe before you code.

Steps and Criteria

  • Create a shared folder in your Drive (in the web classroom folder)
  • Share your web history project with your partner.
  • Merge your information and begin to come up with a theme.
  • How can you connect the information?
  • How can you present it in a way that makes sense?
  • Create the site architecture with Site Map tools like bubbl.us
  • Save the site map image in your project folder
  • Develop a wireframe (use wireframe design tools like Pidoco, Gliffy, or MockNow)
  • Save the wireframe image in your project folder.
  • Your website should be appealing to students and Mr. Messina and include the following:
  • color scheme
  • clear and organized navigation and structure (3-5 main links)
  • multiple pages (not a one-page site for this project)
  • relevant and appealing images
  • relevant media (gifs and/or YouTube video)
  • text links
  • unique factor - something that makes your site different
  • original content - create original content (and link back to sources)

Grading and Rubric

See this grading rubric

Expectations

  • Make your site look professional, to the best of your abilities
  • Work as a team, ensure that if one of you are absent that the project will continue (share information)

Submitting Your Assignment

  • One folder should be submitted:
  • Folder name: Each of your last names and group project - "Slade Smith Group Project"
  • Contents of folder should include:
  • site map image
  • wireframe image
  • website folder (with html files, images etc.)

A.4.1 Individual Website Project

A.4.1 Individual Website Project

posted August 22, 2015

Website Goals

  • Create a website on a topic of interest
  • A portfolio site for yourself to show off your skillz (see end of page)
  • A sports team you love
  • All about dancing and how you are awesome at it
  • You get the picture, do something you are passionate about.

Steps and Criteria

  • Create a shared folder in your Drive (in the web classroom folder)
  • Develop a Proof of Concept for your individual website project
  • Design and Develop your website by November 2

Grading and Rubric

See this grading rubric

Expectations

  • Make your site look professional, to the best of your abilities
  • Use anything we covered in class and feel free to take it a step further and do your own research and development!

Submitting Your Assignment

  • One folder should be submitted:
  • Folder name: Each of your last names and group project - "Slade Smith Individual Project"
  • Contents of folder should include:
  • site map image
  • wireframe image
  • website folder (with html files, images etc.)

Digital Portfolio Option

If you are not sure what to do for your website, create a digital portfolio website about you!
Your target audience:
  • College Admissions Officers
  • Potential Employers
Create a persona for a college admissions officer to start. You might not find any info on quantcast so you will have to gather information in other ways. Start with some Google searches
Consider using a blog to highlight your experiences and interests. For example, if you play sports, you could write a post about teamwork or leadership and how that could create value in a classroom or in a company that you just might work for.
Start off by creating categories of interest and then add potential posts and themes within the categories. Also, think about a community or volunteer work category. You need to ask yourself how you can change the world and try infuse that into your portfolio.
Check out these one-page portfolio responsive designs for ideas...

A.5.1 Bootstrap Group Project

A.5.1 Bootstrap Group Project

post date not available

Due January 24

Project Goal

Design a website for an existing business or nonprofit organization

Grading and Rubric

Rubric

Group Composition and Roles

Work in groups of two

Coder

  • Responsible for source code and all its iterations
  • Backup all code
  • Submitting Final Project
  • Research and testing

Designer

  • Proof of Concept including wireframe, layout
  • Project Management
  • Color Scheme (with appropriate hex codes)
  • Image editing
  • Mini-projects (e.g. create and test slider)
  • Research and testing

Q.2.1 Basic HTML Quiz

Q.2.1 Basic HTML Quiz

Posted August 23, 2015

Quiz Criteria

  • Create a basic one-page website about yourself (portfolio)
  • You are allowed to use this website or other online resources but you must put it together yourself
  • Your target market is potential employers and college admissions officers
  • Present your unique value - what makes you so special?
  • You need to create 3 to 5 sections, for example:
  • Academics
  • Athletics
  • Clubs
  • About me
  • Each section should include a heading, paragraph text and an image (or embedded media)
  • You will upload your website's root directory to your student Google Drive and submit it via Google Classroom

Required HTML Tags and Attributes

<!DOCTYPE html>
<html>
<head>
<title>
<meta>
<body>
<a href="">
<li>, <ul>
<nav>
<section>
<img>
<p>
<h1>
You must also include: charset, name, description, alt, width, id

Course Material

Basic Website Template

Basic Website Template

posted March 26 2015

Very, very basic - the essentials

<!DOCTYPE html>
<html>
    <head>
        <title>Title of your page</title>
    </head>
    <body>

    </body>
</html>

Basic Website - HTML

<!DOCTYPE html>
<html>
<head><!--START HEAD-->
<!--LINK TO -->
    <link rel="stylesheet" type="text/css" href="main.css">
    <title>Website title here - page title here</title>
</head><!--END HEAD-->    
<body> <!--BODY STARTS-->
    <div class="main"> <!--MAIN STARTS-->   
    <div class="container"><!--CONTAINER STARTS-->    
<header>This is the header</header>
<!--NAVIGATION-->    
<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="location.html">Location</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>
<!--END NAVIGATION-->   
<div class="content"><!--START CONTENT DIV-->
       
</div> <!--END CONTENT DIV-->
<footer>This is my footer</footer>
    
</div> <!--END CONTAINER DIV-->    
</div> <!--END MAIN DIV-->
</body><!--END BODY-->
</html>

Basic Website - CSS

.main{
margin:0 auto;
}

body{ 
background: #F5F5F5 /*Try ColorZilla, Google via Chrome Store to pick colors*/
}

header{
width:960px;
height:125px;
background-color:#4A9CEB;
margin:0 auto;
position:relative;
margin-top: 0px;
}

nav{
width:100%;
height:40px;
background-color:#FEFFFF;
}

ul{
padding-top:8px;margin:0;
}

li{
display:inline;
list-style:none;
padding:5px;
margin:4px;
}

a:link{
color:blue;
font-size:20px;
font-family:Arial, Times New Roman, serif;
text-decoration: none;
}

a:visited{
color:blue;
font-size:20px;
font-family:Arial, Times New Roman, serif;
text-decoration: none;
}

a:hover{
color:red;
font-size:20px;
font-family:Arial, Times New Roman, serif;
text-decoration:none;
}

a:active{
color:blue;
font-size:20px;
font-family:Arial, Times New Roman, serif;
text-decoration: none;
}

.container{
width:960px;
height:850px;
background-color:#627486;
margin:0 auto;
position: relative;
}

.content{
width:920px;
height:550px;
background-color:#FFFFFF;
margin-left:20px;
margin-right:20px;
margin-top:10px;
margin-bottom:10px;
position: relative;
}

#homecontent1 {
width:750px;
height:300px;
background-color:lightgray;
margin-top:5px;
margin-left:35px;
padding:5px;
font-size:20px;
font-family:sans-serif; 
position: relative;
display:block;
}

footer{width:100%;
height:150px;
background-color:#A4CFF8;
position:relative;
bottom:0px;
}

Course Expectations

Couse Expectations

Posted August 26 2014

Website Rubric

Website Rubric

Posted August 26 2014

Website Evaluation Rubric for Term 1 Projects

Link to rubric

Introduction

Introduction

Posted September 3 2014

Introduction to Web Design

HTML

HTML

Posted April 9 2015

HTML

HTML (Hyper-Text Markup Language) is the language used to create documents on the web. It is considered the programmatic structure of the web page.1

The Three Main Languages of the Web

HTML is considered one of the three main programming languages that front-end web developers use:

  • HTML provides structure and meaning.
  • CSS defines what the web page looks like visually
  • JavaScript tells objects on the page how to move and behave and sometimes a lot more2!

JavaScript is also providing frameworks for some advanced web applications these days including:

  • Node.js
  • Angular.js
  • BackBone.js

Notes

  1. The standard file extension of HTML documents is .html and your web browser is the app that interprets and displays your web page document. Just as .doc or .docx are file extensions of Microsoft Word. There are many file extensions available on the web such as .php, .asp, .htm and many more.
  2. CSS3 and HTML5 have helped to replace some of the more simple JavaScript commands. JavaScript is alive and well and developing in areas like 3D web development (three.js), powerful frameworks (node.js) and game development engines.
  3. Certain start tags and end tags can in certain cases be omitted and are implied by other tags.
  4. W3C