An online markdown blog and knowledge repository.
Notes taken from Duckett HTML Book:
Chapter 16: “Images” (pp.406-427)
Chapter 19: "Practical Information" (pp.476-492)
MDN Article: Video and Audio APIs
Skim over Chapter 9: pp.201-206 re: Flash (as a history lesson)
Keep your HTML markup clean by using CSS to control the placement, style, and orientation of images on the website.
The width or height properties in CSS control image size and help the browser to load the page more efficiently.
Use CSS classes names "small", "medium", and "large" to pre-determine 3 common image sizes for the site and apply those classes in the HTML markup.
Two common ways to achieve image alignment, in conjunction with small, medium, and large image size classes:
align-left or align-right properties.An example from [Duckett, pg.411]:
img.align-left {
float: left;
margin-right: 10px;
}
img.align-right {
float: right;
margin-left: 10px;
}
img.medium {
width: 250px;
height: 250px;
}
Image block type are inline by default, so in order to center, change to block level instead.
An example from [Duckett, pg.412]:
img.align-center {
display: block;
margin: 0px auto;
}
img.medium {
width: 250px;
height: 250px;
}
To place an image behind another element use background-image.
Images set via background-image will attempt to fill their parent container.
Require a valid path to the file using syntax url("").
section {
background-image: url("img/my-logo.png");
}
Background images can be repeated several ways, not repeated, fixed in place, or scrollable by the users mouse.
background-repeat accepts values of: repeat; repeat-x; repeat-y; or no-repeat.
background-attachment accepts values of: fixed or scroll.
.norepeat {
background-repeat: no-repeat;
}
.repeat-xplane {
background-repeat: repeat-x;
}
.scroll-pic {
background-attachment: scroll;
}
Shorthand can be used to lump-together the following:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionA Sprite is made up of several images that can be programed to create an illusion of animation.
Set a background image on an element and set three styles to get a rollover effect [Duckett, pgs.417-418]:
a.button {
height: 36px;
background-image: url("");
text-indent:-9999px;
display: inline-block;
}
a#add-to-basket {
width: 174px;
background-position: 0px 0px; /* used to move image into and out of viewport */
}
a#framing-options {
width: 210px;
background-position: -175px 0px;
}
a#framing-options:hover {
background-position: 0px -40px;
}
a#add-to-basket:active {
background-position: 0px -80px;
}
a#framing-options:active {
background-position: -175px -80px;
}
A gradient is a slight transformation of color or hue, and brightness. Note: Set a class or ID selector with fallback images and colors when using gradients so browsers that cannot support the implementation can instead use the "fallback" settings.
An example gradient CSS class from [Duckett, pg.419]:
#gradient {
background-color: #66cccc;
background-image:url("");
background-image: -moz-linear-gradient(#336666,#66cccc);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66cccc), to(#336666));
background-image: -webkit-linear-gradient(#336666,#66cccc);
background-image: -o-linear-gradient(#336666,#66cccc);
height: 150px;
width: 300px;
}
The properties are set in this order for these browsers and situations:
When setting a background image behind text:
opacity: [0-1] to fade the contrast of the image.SEO, Analytics, and Putting Your Site on the Web.
SEO is the art of increasing chances your website will appear in search engine results.
Search Engines look at:
On-page Techniques are things you can do to improve your site's search ranking:
alt= attribute.<title>.<h1-6> elements.description tag should include a good site description that includes keywords.Duckett suggests six tasks to perform when developing keywords and phrases for your site:
Once your site is published you will want to learn how often your home page is loaded and other related information. Google Analytics provides tracking code for your site that reports site visits back to Google, and access to a site with reports showing site visit data and trends.
There are several analytic properties:
Reference: Google Analytics
Web Hosting Services have various offerings in terms of:
Hosted Services do a majority of the web hosting and managing services for you, and could provide a web-development interface, but might not include email:
FTP is a file transfer tool that allows you upload your website files to the webserver.
There are GUI versions and terminal FTP programs that will do the trick.
Common FTP Tools:
FileZilla
FireFTP
CuteFTP
SmartFTP
Transmit
Common Third Party Tools:
WordPress
tumblr
posterous.com
Shopify
BigCartel
Go Magento
Campaign Monitor
MailChimp
AddThis.com
AddToAny.com
Google AdWords. Use the 'exact match' option.
Word Tracker.
Keyword Discovery.
Source: MDN: Video and Audio APIs
Embed rich media content using tags <video> and <audio>.
Supply a <p> tag immediately following the audio or video elements for unsupported browsers, providing a link to the source video file.
The attribute controls in a video or audio element tells the browser to show start/stop and other controls in the window.
HtmlMediaElement HTML5 API provides .stop() and .play() functions.
HTML5 Native Player controls are all defined within HTML.
Use multiple <video src=""... elements to point to different files to support multiple media types/encodings (e.g. MP4 and WEBM).
Attribute aria-label="" is used to provide a readable button purpose description like 'Play'.
Style the native controls using CSS.
The following css snippets are from MDN's Client Side Audio and Video APIs documentation
.video-controls {
visibility: hidden; /* use javascript to show the player */
opacity: 0.5; /* mute control so it is visually distracting */
width: 400px;
border-radius: 10px;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -200px;
background-color: black;
box-shadow: 3px 3px 5px black;
transition: 1s all;
display: flex; /* control the layout of the buttons in the player */
}
.player:hover .controls, player:focus .controls {
opacity: 1;
}
@font-face { /* import custom font */
font-family: 'HeydingsControlsRegular';
src: url('fonts/heydings_controls-webfont.eot');
src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/heydings_controls-webfont.woff') format('woff'),
url('fonts/heydings_controls-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
button:before { /* display content before button element */
font-family: HeydingsControlsRegular; /* custom font family makes 'P' a play icon intead of alpha-numeric' */
font-size: 20px;
position: relative;
content: attr(data-icon); /* displays the content of data-icon as the button content e.g. 'P' for play */
color: #aaa;
text-shadow: 1px 1px 0px black;
}
The API documentation shows how to build an animated timer that tracks video progress. It uses HTML, CSS, and JavaScript to accomplish this.
The JavaScript uses DOM .querySelector('') methods to make references to all of the player controls including the timer bar.
Also, JavaScript functions are used to define event listeners and event handlers to manage user-clicks on the controls, executing API calls to media.play(), media.pause(), etc.
And ended event will fire when the video reaches the end of teh media, so an event handler must be implemented to handle it.
The API has media.currentTime and media.duration properties that indicate where in the media the player is 'at' and how long the media is in its entirety. In the API example, these are used to define the behavior of the timer element and animation.
The DOM 'event' type captures mouse click (x,y) location information with it, and that can be used to implement a 'click-and-seek' function where a user can click anywhere in the seek bar, and the media will move to that location.
APIs contain the capability to manage data in programming languages.
In JavaScript, EventListener and EventHandler methods are used to capture events (like mouse click), that then call API methods to cause the desired effect.
In the case of an API like HTML5 Media, calling 'media.play()' after a mouse click event is faily simple and the user sees immediate results.
Other API calls mights require some pre-processing of information: User-input data, API.property information, time-of-day, etc.
Although Flash is an older, deprecated technology, Flash had a large impact on the internet, then and now.
Authoring Flash content usually required software licensed from Adobe - some other unlicensed tools were available.
HTML tags <object> and <embed> were used to add Flash to websites but later JavaScript was used instead.
Flash .fla files were run within a browser using the Flash Player plugin.
Initially, Flash was used for small animations, but it grew into a tool for creating fully functional websites.
HTML5 introduced <audio> and <video> tags, which are used now.
A web server can host video files in various formats for HTML5 websites to consume.
Generally it is easier to host video on a service like Vimeo or YouTube.
Requiring a Plug-in to use certain features of your website could reduce the number of potential site viewers.
Using a hosting service also simplifies transcoding...it is done for you.
Mozilla Developer Network: Video and Audio APIs