Synfig Studio is a free and open source 2D animation software. It specializes in the tweening process. In this process, we can reduce the number of frames to be created to only keyframes. Synfig Studio can import images from other programs and can export the animation as video or sequence of images.
You can download Synfig from the following link:
Inkscape is a free and Open Source vector graphics editor. It is available on all major platforms like Windows, MacOS, and Linux. As a vector editor, it has a simple to use interface. It can export images to both raster and vector formats. It is particularly useful for making logos, infographics, illustrations, diagrams, and charts.
You can download Inkscape from the following link:
Synfig Studio is a free and open source 2D animation software. It specializes in the creation of animated content using a technique called tweening. Tweening is a short form for the term “in-betweening”. Normally in an animated video, someone working on the project must create the beginning frame and ending frame for a particular cut or scene. Then another person is typically responsible for filling the frames in between. This can be a tedious process. Synfig Studio was originally created to simplify this process. It has since developed into a full-blown animation software.
Synfig Studio is a 2D animation program. It can be used for making animated films and other kinds of videos that have animated content. Unlike other 2D animation software, it is based on a vector toolset. This means that the layers created using synfig can be upscaled to obtain high resolution videos without any loss in detail. Synfig Studio has support for multiple video formats.
It is also possible to render the animation as a series of images. This can be helpful in situations where it is needed to render in multiple video formats or formats that are not supported by Synfig. Synfig Studio also has the ability to import and work with images created using other programs.
Perhaps the best showcase for Synfig Studio is the Morevna Project. A group of Russian volunteers have used Synfig Studio for creating a sci-fi anime project.
Synfig is available for all popular platforms like Windows, MacOS and Linux. On the Linux platform there are no commercial animation programs available. So Synfig Studio is one of compelling options for 2D animation on that platform.
You can download Synfig Studio from Synfig.org
A list of all HTML attributes.
A list of all inline elements.
A list of all HTML and XML entity character references.
As we learned in the last lesson, HTML5 is a lenient language and allows for different styles of writing code. Many people who switched over to XHTML still write web pages today in a similar style. However, this does require some extra effort from the developer. This is especially true if the developer is not taking advantage of an advanced editor. Many of the problems like mismatching tags, missing end tags and potentially erroneous code are easily identifiable in editors that have Syntax Highlighting. Many editors have features link auto-generation of end tags and quotes. So choosing the right code editor could save some hassles and lead to well-formed code. The well-formed code does not necessarily mean XHTML compliant code. It is meant for code that complies with the HTML5 standards.
The Doctype has been used in previous generations for providing additional validation information. This information about the document was typically a reference to a standard file from W3C. In the past, this used to be a nightmare for developers. The Doctype format was difficult to write from memory for many people. Most developers copied the code from the documentation or from their previous pages. Fortunately HTML5 has the shortest and easiest Doctype available. If the Doctype is omitted then browsers switch to a mode known as quirks mode. In this mode, the browsers try to behave like browsers from the past for displaying older versions of HTML. If we omit the Doctype in our web pages then it may not be displayed. We recommend including the Doctype at the beginning of all pages.
<!DOCTYPE html>
HTML5 is not case sensitive. This means that we can use both upper and lower case letters. But for the sake of consistency, we need to stick with one format. Since there were no editors with Syntax Highlighting features in the early days, developers used upper case for elements and attribute to differentiate them from content. This is not required now since editors with Syntax Highlighting are widespread. It may be beneficial to use a lower case because they are easier to type.
<p id="unique">This paragraph is unique.</p>
HTML5 allows for both single and double quotes for quoting attribute values. It also allows for omitting them in certain situations. But this is not recommended. Choosing one of the two and using them throughout the project is the best solution. An example of using single quotes.
<p class='red'>This is a red paragraph.</p>
Also, we can use double quotes.
<p class="red">This is a red paragraph.</p>
Always use the same type of quote. Mixing them can lead to breaking the page.
HTML5 does not require elements to be closed. This is not good practice. We should at least close the nonempty elements.
<p>This is a paragraph.</p>
Empty attributes can be closed within the starting tag. This can be useful if you use any XML software to parse HTML web pages. Otherwise, we can safely use empty elements without closing.
<img src="example.png" alt="Example Image">
Images should always be provided with alternate text and dimensions. If the height and width are specified then the browser will allocate the space for the image. This can reduce page flickering.
<img src="example.png" alt="Example Image" style="width:300px;height:300px">
In HTML5 it is valid to have empty attributes. We can take advantage of this liberty to have cleaner code.
<input type="text" disabled>
HTML5 ignores extra whitespace. We can take advantage of this by making our code more readable by padding lines and indenting code to reflect the document structure. Many editors indent code by default. When it is time for deployment these HTML files can be minified and compressed for better performance.
<select> <option value="red">Red</option> <option value="blue">Blue</option> </section>
The title element should be always specified. The title element has other uses like SEO and bookmarks. So we recommend specifying a descriptive title element for every page.
The script elements should be provided at the end of the page right before the closing body tag. This allows for the page to be loaded before requesting for the scripts.
All the web pages written in HTML should have the extension .html or .htm. We recommend using lower case for file names. Different servers have different policies for file names. Some servers are case insensitive while others are case sensitive. This can lead to problems when the filename on the server and file name in the link do not match.
The World Wide Web(www) and the first version of HTML were invented by Tim Bernes Lee. Since the web became popular a committee called the W3C(World Wide Web Consortium) was founded to maintain and provide new HTML standards. Until 1999 W3C provided new standards regularly. Then the W3C began working on a new language XHTML(Extensible HTML). XHTML was supposed to be a more well-formed and stricter version of HTML. If the web page written in XHTML was not well-formed then the browser will not display the entire document. Well-formed documents will have more predictable behavior in different browsers. This will ensure that the web pages will work correctly in all browsers that supported XHTML.
Some developers jumped onboard and started making web pages made out of XHTML. Since only well-formed pages should be displayed any older HTML web page with errors will not be displayed. Browsers were reluctant to enforce this restriction because it will break thousands of websites that were still written in legacy HTML that had errors. These were mostly minor errors but even a single error could make a page not load. Another group called the WHATWG(Web Hypertext Application Technology Working Group) was formed to revive the abandoned HTML standards. This group wanted to make a new HTML standard that would add new features but also support old features of HTML. This group had members like major browser vendors.
The principle of the web was to provide people with an easy way to make information available anywhere in the world. XHTML by not conforming to this principle began to be forgotten. W3C was left without a choice. It officially supported the WHATWG standards. In 2008 the first draft version of HTML5 was released. It is now supported extensively by modern browsers. In the end, the XHTML standard was replaced with the more lenient HTML5 standard.
Even though XHTML did not catch on, it had many good practices. These practices are made optional in HTML5. Even if the browser finds that the page is not well-formed, it will try its best to correctly display the content. We as developers can make XHTML compliant pages to reap the benefits of XHTML.
Even if we follow all these rules we cannot make web pages that will validate in a XHTML validator. These rules are meant be used as a guideline for making well formed web pages. HTML5 is a easier language that is well supported by most browsers. A developer should always make web pages that conforms to a current standard not an abandoned standard.
There are times where we will want to include characters like quotes(‘ or “), angle brackets( < or >) or ampersand(&). These symbols have special meaning in HTML and cannot be included directly. They have to be included using entity character references. The general format is:
&name; &#number;
A symbol can have a unique name or number or both. Anyone of the two methods can be used. Generally, the support for numbers is better than support for names in older browsers.
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| non-breaking space | |   | |
| < | less than | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| “ | double quotes | " | " |
| ‘ | single quotes (apostrophe) | ' | ' |
<p> Tom & Jerry</p>
In some situations we may also want to add symbols like copyright and trademark. They can also be added using the same methods.
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| © | copyright | © | © |
| ® | registered trademark | ® | ® |
If you want to know about the entire list of symbols you can read the Wikipedia article on HTML and XML entity character references.
The autofocus attribute is used for specifying a default form widget where the insertion pointer will be placed once the page loads. There can only be one element with the autofocus attribute.
The disabled attribute is an empty attribute used for disabling the user from entering input into a widget. It is typically used in combination with JavaScript. This attribute is inheritable, which means if a container element( for example fieldset) is set with this attribute then all the widgets within this container will be disabled.
This attribute is most commonly used in the input element. The element is made read-only i.e., the user can only see the value not edit it.
This form attribute is used for specifying a placeholder value that will be displayed inside the widget. Usually, it is used for stating the purpose of the widget. The placeholder text disappears once the user starts to input data into the widget.
The size attribute is used for setting the physical size of the widget. It differs from widget to widget. The input widget uses size to determine the number of characters that will be visible. The select widget uses size for the number of options to be displayed.
The length attribute is used for maximum quantity allowed input. It is used for limiting text input to an input widget or textarea widget.
The cols attribute is used for specifying the number of columns to be displayed in the textarea. It refers to the number of characters that could be in a single line of the textarea. The default is 20.
This form attribute works similar to the cols attribute. It provides the number of rows to be displayed in the textarea.
This attribute is used in the textarea widget to specify how the text will be wrapped. It accepts hard and soft as its values. The default is the soft wrap.
The required attribute is used for specifying that a widget should be filled before it can be submitted.
A meter bar shows a value that is in between the min and the max attributes. A meter bar has other values like low and high attrubutes that will determine the look of the meter bar. The meter bar is usually divided into three sections.
Now that we have divided the meter bar into three sections we have to set the preferred value. This can be done using the optimum attribute.
The browsers will display the different sections differently by using different colors to match the level of preference.
The meter element is provided with the value as content for fallback.
<meter min="0" low="20" optimum="50" high="80" max="100">90</meter>
Progress bars are useful for indicating the level of completion of a process. They are usually used for indicating download progress or form completion level. The progress element accepts a value and a max value. The value is provided as content for the progress element for fallback.
<progress value="99" max="100">99</progress>
Usually the value of the progress bar and content are set using JavaScript.
The select element is used for creating a drop-down list. A drop-down list provides a list of options from which a user can select his choice. The option element is used for providing the different options for the list. The value attribute of the selected option element is sent when the form is submitted. If a value is not provided then the content of option element is sent as value. By default, the first one is selected. If we want to select a particular option as the default option we can use the selected attribute.
<select name="languages">
<option value="python">Python</option>
<option value="java">Java</option>
<option value="ruby">Ruby</option>
</select>
The empty attribute multiple can be used for denoting that multiple options can be selected.
<select name="languages" multiple>
<option value="python">Python</option>
<option value="java">Java</option>
<option value="ruby">Ruby</option>
</select>
The optgroup element can be used for grouping a set of options. The label attribute is shown above the options.
<select name="countries">
<optgroup label="asia">
<option value="china">China</option>
<option value="india">India</option>
</optgroup>
<optgroup label="europe">
<option value="france">France</option>
<option value="italy">Italy</option>
</optgroup>
</select>
The datalist element is used for providing options when users begin to enter information in an input element. The options are specified using the option element. When a user selects an option from the drop down the value of the selected option is entered into the input element. In order to connect the datalist to the input element, an id attribute has to be provided for the datalist element. Then the input element must have a list attribute with the id value of the datalist.
<input type="text" list="language">
<datalist id="language">
<option value="python">
<option value="java">
<option value="ruby">
</datalist>
</input>