I began by discussing the purpose of the extra session: to talk about advanced material that is not covered in the lectures or homework. The material taught in the extra sessions will never be tested on. In the future, there may be extra homework associated with the extra sessions, but it will not be worth points.
Feel free to pick and choose which sessions you come to. They will not be especially cumulative. We will try to post notes and slides on the course website for those of you who cannot attend the session in person.
The first session covers a few cool HTML5 / CSS3 goodies that we won't go into in lecture. The ones we covered were: embedding audio, video and fonts into a webpage, and creating CSS transformations and animations. Note that most of these techniques do not work in older browsers. They might not be very practical yet, but they still are cool!
You can easily embed audio in a webpage with the audio HTML tag. Let's say I have the file beyonce.mp3 in the same folder as index.html. Inside of index.html I can write:
<audio>
<source src="beyonce.mp3" type="audio/mp3" />
</audio>
We saw that this was invisible when we opened the page in Chrome. There was no way to play the music. We must give the audio file some controls so that the user can press "play":
<audio controls="controls">
<source src="beyonce.mp3" type="audio/mp3" />
</audio>
Now a "play" button (and some other controls) appear on the page. I mentioned that many older browsers would not render anything, because they do not support HTML5. Someone asked if there was a way to detect if someone had an older browser and display a message to them. Doing this is fairly simple:
<audio controls="controls"> <source src="beyonce.mp3" type="audio/mp3" /> Sorry, your browser does not support audio! </audio>
Any text you place within the audio tag will be rendered if the browser does not support the audio tag. Otherwise, it will not appear.
There are a slew of other attributes you can add to an audio tag, most of which have the same weird repetition as the controls attribute:
<audio autoplay="autoplay" autobuffer="autobuffer" loop="loop" controls="controls"> <source src="beyonce.mp3" type="audio/mp3" /> Sorry, your browser does not support audio! </audio>
You can read about these attributes (and others) on w3schools.
The video tag behaves exactly like the audio tag. Let's say I want to embed a video called dog.mp4:
<video controls="controls"> <source src="dog.mp4" type="video/mp4" /> Your browser does not support video. </video>
The video tag has many of the same attributes that the audio tag has. You can read about them on w3schools.
CSS3 gives you the capability to embed fonts on a page. This means you can use the font in your CSS even if the user does not have the font installed on their computer. First, you must declare the new font in your CSS file with the following syntax:
@font-face {
font-family: MyCoolFont;
src: url('BlackBoard.ttf');
}
This will embed the font 'BlackBoard' and give it the name 'MyCoolFont' for use elsewhere in your CSS. Note that you must first have a font file (in this case, a file that ends with .ttf) in the same folder as your webpage. I mentioned that you can find many royalty free fonts at dafont.com.
After we declare our font, we can use it anywhere like we would a normal font face:
h1 {
font-family: MyCoolFont, Verdana;
}
Finally, I mentioned that you can also find many royalty free fonts on Google Web Fonts.
CSS3 has a transform property that describes rotations, scaling, and other 2D or 3D modifications to a tag:
h1 {
transform: rotateZ(30deg);
}
CSS3 also has an animation property that you can use to indicate a transition between two or more different states.
If you use animation in combination with transform, you can cause a tag to move from being rotated one way to being rotated another way, etc.
An animation is described by a @keyframes rule that indicates the start/end state of the styling along with any other important states.
@keyframes spin {
from {
/* styles to have at the start of the animation */
transform: rotateZ(0deg);
}
to {
/* styles to have at the end of the animation */
transform: rotateZ(180deg);
}
}
h1 {
animation: spin 2s infinite;
}