• Save
ARTDM 170, Week 1: Introduction
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

ARTDM 170, Week 1: Introduction

on

  • 1,031 views

 

Statistics

Views

Total Views
1,031
Views on SlideShare
956
Embed Views
75

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 75

http://www.gilbertguerrero.com 75

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • BEFORE CLASS•    Check if books are in student bookstore or across the street•    Fill out Office Hours Form in Dean’s office•    Post name, email, and course title and section on the board: ARTDM-171 Web Design, Section: 0465, Lecture and Lab: Tuesdays 2-4:50pm in A-303, Open Lab: Tue 1-2pm, 5-6pm, A-303.•    Print out the roster •    Print out 26+ syllabi•    Take attendance
  • HW: <br /> <br /> * Meta tag refresh animations <br /> * At least 10 frames <br /> * Recycle these frames for GIF animation next week.

ARTDM 170, Week 1: Introduction Presentation Transcript

  • 1. ARTDM 170 Week 1: Meta Tag Refresh Animation Gilbert Guerrero gguerrero@dvc.edu http://gilbertguerrero.com/blog/artdm-170/
  • 2. Meta Tag Refresh Animation • Most basic form of animation on the web • Pre-dates gif animations
  • 3. Meta Tag Refresh code <meta http-equiv="Refresh" content="1; URL=slide2.html" /> • The meta tag will cause the browser to refresh with a new web page • The code is placed in the header of your web page
  • 4. Create a basic web page called slide1.html with this code: <html> <head> <meta http-equiv="Refresh" content="1; URL=slide2.html" /> </head> <body> <center>Hello</center> </body> </html>
  • 5. Create a second web page called slide2.html with this code: <html> <head> <meta http-equiv="Refresh" content="1; URL=slide1.html" /> </head> <body> <center>World</center> </body> </html>
  • 6. Meta Refresh tag causes pages to go from one to the next and loop back Hello World slide1.html slide2.html URL=slide2.html URL=slide1.html
  • 7. Duplicate pages and change the code to make a sentence with five words Hello World How Are You? slide1.html slide2.html slide3.html slide4.html slide5.html URL=slide2.html URL=slide3.html URL=slide4.html URL=slide5.html URL=slide1.html
  • 8. Add a “pause” button by creating a link that goes to a duplicate page which does not contain the refresh tag World slide2stop.html Pause Hello World How slide1.html slide2.html slide3.html URL=slide2.html URL=slide3.html URL=slide4.html
  • 9. Code for slide2.html with a pause button <html> <head> <meta http-equiv="Refresh" content="1; URL=slide3.html" /> </head> <body> <center>World</center> <center> <p><a href=”slide2stop.html”>Pause</a></p> </center> </body> </html>
  • 10. Add a “play” button by creating a link that goes to the next slide To start playing the World slideshow, add a link that takes them to the next slide2stop.html slide that has a refresh tag Pause Hello World How slide1.html slide2.html slide3.html URL=slide2.html URL=slide3.html URL=slide4.html
  • 11. Code for slide2stop.html with a play button. Notice: there is no refresh tag! <html> <head> </head> <body> <center>World</center> <center> <p><a href=”slide3.html”>Play</a></p> </center> </body> </html>
  • 12. Replace the word with an image: <html> <head> <meta http-equiv="Refresh" content="1; URL=slide2.html" /> </head> <body> <center><img src=“images/pic1.jpg” /></center> </body> </html>
  • 13. Homework, due Feb 2 – Make a short slideshow animation • Fill out the student survey • Read about the Meta Refresh technique • Create a slideshow animation using HTML pages with Meta Tag Refresh ‣ Create at least 10 frames ‣ Use images, so there will be at least ten images ‣ Place the images in a folder called “images” with your slide html pages ‣ Add Play, Pause, Forward, and Back buttons (By the end youʼll have at least 20 pages) See you next week!