JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Digital Media
Project Info Page Requirements for Seniors

Websites/index.html will be your new Project Info Page (PIP) with short introductions and links to all other projects (8) throughout the 2 years at Freestyle. The new features of this revision of your old Project Info Pages are the uses of JavaScript/jQuery and CSS Transitions for more dynamic and animation based content presentation.

Here are some links to previous students' versions

Project Info Page Revision Rubric

Requirements include:

  1. REQUIRED Design with application of the 5 principles of good web design: Contrast, Repetition, Alignment, Proximity, Usability as discussed in class. This project listing webpage should have a completely different design than all the project 1-8 webpages.
  2. REQUIRED External Cascading Style Sheet (CSS) - Use of and properly linked to an external CSS file - Websites/project0/styles/p0-styles2.css - move all internal styles to this external style sheet
  3. REQUIRED External Javascript - Use of and properly linked to an external Javascript file - Websites/project0/scripts/p0-scripts.js
  4. REQUIRED Photo of Yourself placed in Websites/project0/images/name.jpg
  5. REQUIRED graphics - All graphics for the design placed in Websites/project0/images
    • background.png or background.jpg in your Websites/project0/images folder
    • username.png (photo of you) in your Websites/project0/images folder
    • header.png in your Websites/project0/images folder
    • other images in in your Websites/project0/images folder
    • NOTE: PSD, AI work files MUST be saved in Websites/project0/_P0_WORK_FILES
  6. REQUIRED Music on your website - click here for more details about music on your page
  7. REQUIRED Header with custom design graphic
  8. REQUIRED Footer with "20xx Copyright © Freestyle Academy or your First Name. All rights reserved." somewhere on your page (preferably on the bottom) - use appropriate smaller font size.
  9. REQUIRED Navigation buttons - 10 total buttons each with a timed (not instantaneous) hover effect
    • Introduction button to display Main Introduction to ALL projects
    • Self-Portrait button to display Project 1 introduction (1-2 paragraphs), a related graphic, and text or graphic link to Project 1 Self-Portrait website
    • Narrative 1 button to display Project 2 introduction (1-2 paragraphs), a related graphic, and text or graphic link to Project 2 Narrative 1 website
    • Documentary button to display Project 3 introduction (1-2 paragraphs), a related graphic, and text or graphic link to Project 3 Documentary website
    • Conceptual button to display Project 4 introduction (1-2 paragraphs), a related graphic, and text or graphic link to Project 4 Conceptual website
    • Profile button to display Project 5 introduction (1-2 paragraphs), a related graphic, and text or graphic link to Project 5 Profile website
    • Narrative 2 button to display Project 6 introduction (1-2 paragraphs), a related graphic, and text or graphic link to Project 6 Narrative 2 website
    • Innovator button to display Project 7 introduction (1-2 paragraphs), a related graphic, and text or graphic link to Project 7 Innovator website
    • Portfolio button to display Project 8 introduction (1-2 paragraphs), a related graphic, and text or graphic link to Project 8 Portfolio website
    • Old PIP button to your OLD Project Info Page from your Junior Year - to show your growth
    • All of the above buttons need to be available all the time so that the user can view content to any project from any project (go DIRECTLY from say Project 5 content to Project 1 content)
    • 1st Year Seniors will be limited to 5 buttons - Introduction, Project 5 Profile button, Project 6 Narrative 2 button, Project 7 Innovator button, Project 8 Portfolio button
  10. REQUIRED divs on index.html

    <div id="centeringDiv">
    <header> for your main header image
    <nav>
    <div class="btn" id="btn1">Introduction </div>
    <div class="btn" id="btn2">Self-Portrait</div>
    <div class="btn" id="btn3">Narrative 1</div>
    <div class="btn" id="btn4">Documentary</div>
    <div class="btn" id="btn5">Conceptual</div>
    <div class="btn" id="btn6">Profile</div>
    <div class="btn" id="btn7">Narrative 2</div>
    <div class="btn" id="btn8">Innovator</div>
    <div class="btn" id="btn9">Portfoio</div>
    <div class="btn" id="btn10">Old PIP</div>
    </nav>
    </header>
    <section id="allArticles">
    <div id="allArticlesWrapper">
    <article id="article1">
    <div class="articleTitle" id="articleTitle1">Unique title for each article</div>
    <div class="articleContent" id="articleContent1">Unique1-2 teaser paragraph for each article</div>
    <figure id="photoOfSelf"> photo of yourself</figure>
    <audio id="musicBox"> for your music</audio>
    </article>
    <article id="article2">
    <div class="articleTitle" id="articleTitle2">Unique title for each article</div>
    <div class="articleContent" id="articleContent2">Unique1-2 teaser paragraph for each article</div>
    <figure class="articleGraphic" id ="articleGraphic2">Unique graphic for each article</figure>
    <div class="webLink" id="webLink1">Unique text or graphic link for each article</div>
    </article>
    <article id="article3">
    <div class="articleTitle" id="articleTitle3">Unique title for each article</div>
    <div class="articleContent" id="articleContent3">Unique1-2 teaser paragraph for each article</div>
    <figure class="articleGraphic" id ="articleGraphic3">Unique graphic for each article</figure>
    <div class="webLink" id="webLink2">Unique text or graphic link for each article</div>
    </article>
    <article id="article4">
    <div class="articleTitle" id="articleTitle4">Unique title for each article</div>
    <div class="articleContent" id="articleContent4">Unique1-2 teaser paragraph for each article</div>
    <figure class="articleGraphic" id ="articleGraphic4">Unique graphic for each article</figure>
    <div class="webLink" id="webLink3">Unique text or graphic link for each article</div>
    </article>
    <article id="article5">
    <div class="articleTitle" id="articleTitle5">Unique title for each article</div>
    <div class="articleContent" id="articleContent5">Unique1-2 teaser paragraph for each article</div>
    <figure class="articleGraphic" id ="articleGraphic5">Unique graphic for each article</figure>
    <div class="webLink" id="webLink4">Unique text or graphic link for each article</div>
    </article>
    <article id="article6">
    <div class="articleTitle" id="articleTitle6">Unique title for each article</div>
    <div class="articleContent" id="articleContent6">Unique1-2 teaser paragraph for each article</div>
    <figure class="articleGraphic" id ="articleGraphic6">Unique graphic for each article</figure>
    <div class="webLink" id="webLink5">Unique text or graphic link for each article</div>
    </article>
    <article id="article7">
    <div class="articleTitle" id="articleTitle7">Unique title for each article</div>
    <div class="articleContent" id="articleContent7">Unique1-2 teaser paragraph for each article</div>
    <figure class="articleGraphic" id ="articleGraphic7">Unique graphic for each article</figure>
    <div class="webLink" id="webLink6">Unique text or graphic link for each article</div>
    </article>
    <article id="article8">
    <div class="articleTitle" id="articleTitle8">Unique title for each article</div>
    <div class="articleContent" id="articleContent8">Unique1-2 teaser paragraph for each article</div>
    <figure class="articleGraphic" id ="articleGraphic8">Unique graphic for each article</figure>
    <div class="webLink" id="webLink7">Unique text or graphic link for each article</div>
    </article>
    <article id="article9">
    <div class="articleTitle" id="articleTitle9">Unique title for each article</div>
    <div class="articleContent" id="articleContent9">Unique1-2 teaser paragraph for each article</div>
    <figure class="articleGraphic" id ="articleGraphic9">Unique graphic for each article</figure>
    <div class="webLink" id="webLink8">Unique text or graphic link for each article</div>
    </article>
    <article id="article10">
    <div class="articleTitle" id="articleTitle10">Unique title for each article</div>
    <div class="articleContent" id="articleContent10">Unique1-2 teaser paragraph for each article</div>
    <figure class="articleGraphic" id ="articleGraphic10">Unique graphic for each article</figure>
    <div class="webLink" id="webLink9">Unique text or graphic link for each article</div>
    </article>
    </div>
    </section>
    <footer> for your copyright info</footer>
    </div>
  11. REQUIRED ANIMATIONS
  12. REQUIRED CONTENT DETAILS about Main Introduction to all Projects - Write appropriate text to introduce yourself and your projects with correct spelling and grammar - something about you being a student at Freestyle and the classes you are taking at Freestyle. Perhaps write something about how each project button takes you to a different website design that showcases the work you do in all of your classes at Freestyle. This text is perhaps the MOST IMPORTANT part of the page because:
  13. REQUIRED CONTENT DETAILS about each "article" project introduction - Write 1 or 2 paragraphs as a short introduction to each Project Website to include but not limited to:

 

Assessments for this website project will include

  1. Completion of content requirements listed above
  2. Use of the web design concept of C.R.A.P = Contrast, Repetition, Alignment, Proximity
  3. Use of the web design concept: Usability