Follow us on :  

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

Generating Barcodes

Need for Barcodes

Barcodes are commonly used for categorizing products in a store having hundreds of products. They are used for representing product information, most commonly identification numbers, in a machine readable format. Then we can use scanners to read the barcodes and process the information contained them using computers. Usually if you want to list your products in a store, then you need to have a valid identification number. This product number is obtained form the authority regulating your product. For example, ISBN is the authority for publishing books. You have to fill a form and get a valid ISBN number for your book. Then you can convert the number into a barcode and add it to the book. This is typically added to the back of the book. Then you can supply your books to a book store.

Generating Barcodes using Inkscape

Inkscape has a builtin extension for generating Barcodes codes. This makes the process of generating a Barcode much more easier. We’ll have to enter only the information and then click a button to generate the Barcode. Since Inkscape is a vector art program we can resize the Barcode to any size we want.

  1. In order to open the Barcode extension go to Extensions > Render > Barcode > Classic
  2. The Barcode type is used to specify a particular format. This is decided by the authority who issues the product numbers. The type of the code also determines what information can be entered. For example some types support only numbers while others support alphabets as well as some special characters. You have to contact the store or your product regulator to obtain the type details. For example, ISBN numbers are issued for books. They are represented using the EAN-13 extension.
  3. In the barcode data field you can enter your product information like product number that will be converted into the barcode.
  4. If you are going to be using the barcodes internally for your own store, then you can choose any of the types you want and then configure your scanners to scan for that type of barcode.
  5. Click on Apply to generate the barcode.
  6. The barcode appears small initially. In order to expand the Barcode code press Ctrl and then drag one of the corners.
  7. You can go to File > Export PNG image to bring up the export settings.
  8. Enter the height and width required for the image and give a file name
  9. Click on Export to save as a PNG image and then click on File > Save to save the project as an Inkscape SVG file for later use.

Generating QR codes

Need for QR codes

Quick Response codes or more commonly known as QR codes are a special type of bar code. They are commonly used for representing information like website URLs and other information in a format which is accessible for anyone with a smart device with a camera. Since mobile phones have become ubiquitous essentially every person with one is able to read information in a QR code.

Generating a QR code in Inkscape

Inkscape has a builtin extension for generating QR codes. This makes the process of generating the QR code much more easier. We’ll have to enter only the information and then click a button to generate the QR code. Since Inkscape is a vector art program we can resize the QR to any size we want. This is especially helpful when the code needs to be printed on large banners or posters.

  1. In order to open the QR code extension go to Extensions > Render > Barcode > QR code
  2. In the Text field enter the information you want to be converted into a QR code.
  3. Set the size in unit squares field to auto to make Inkscape calculate the size automatically.
  4. When you have your QR code printed on a material like paper, chances are that the printed code might get damaged or torn in some part. The QR code could still be read correctly depending on the error correction level. If the error correction level is set to high, then the chance of obtaining the information from a damaged code increases. On the flip side the size of the QR code may increase in order to hold the extra error correction information. So choose the level you want in the error correction level field.
  5. Choose the encoding as Latin 1 if you only have Latin alphabets. If you want other language alphabets choose UTF-8.
  6. Click on Apply to generate the QR code.
  7. The QR code appears small initially. In order to expand the QR code press Ctrl and then drag one of the corners.
  8. You can go to File > Export PNG image to bring up the export settings.
  9. Enter the height and width required for the image and give a file name
  10. Click on Export to save as a PNG image and then click on File > Save to save the project as an Inkscape SVG file for later use.

VLC for Windows

VLC media player is a free and open source program. It is capable of playing almost any video or audio format. It has features that can help enhance the experience with the media. It is also capable of other features like screen recording and format conversion. It is available for all major desktop and mobile platforms.

You can download VLC media player from:

https://www.videolan.org/vlc/index.html

Instructions for Installation

  1. You can open the link above or Open a browser and search for VLC media player in Google or any other search engine.
  2. Click the first link in the search results.
  3. Click the download button.
  4. Wait for the download to finish.
  5. Click the downloaded file to start installing.
  6. Click Yes when the User Account Panel asks for permission.
  7. Select your preferred language and click OK.
  8. Click Next
  9. Read the license agreement if you want and then click Next if you agree to the license terms.
  10. You can change the installation settings if you want in the next window.
  11. Click Next
  12. You can change the installation path if you want and then click Install.
  13. Wait for the installation to complete.
  14. Click Finish.
  15. You can uncheck the Network Access policy options if you don’t want them.
  16. You can pin the software to the taskbar by right clicking on the icon in the taskbar and selecting the "Pin to Taskbar" option.

Google Photos for Windows

Google Photos is a free service from Google which allows for unlimited photos and videos storage. It comes preinstalled on some Android phones and is available for most mobile platforms. Since it is a web service it can be accessed in devices having a browser. There is also a software version called Backup and Sync which allows for backing up certain folders in Google Drive and Google Photos.

You can download Backup and Sync from:

https://photos.google.com/apps

Instructions for Installation

  1. You can open the link above or Open a browser and search for Google Photos Desktop in Google or any other search engine.
  2. Click the first link in the search results.
  3. Click the download button.
  4. Click the downloaded file to start installing.
  5. Wait for the installation to complete.
  6. Click on get started.
  7. Sign in to your Google account.
  8. Click Next.
  9. You can choose the folders you want to backup.
  10. Select high quality option if you want unlimited backup for photos and videos.Click start
  11. Click start.
  12. Wait for Google photos backup to be installed.

 

Synfig Studio for Windows

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:

https://www.synfig.org

Instructions for Installation

  1. You can open the link above or Open a browser and search for Synfig Studio in Google or any other search engine.
  2. Click the first link in the search results.
  3. Click the download button.
  4. Click on the stable version.
  5. You can enter a price that you consider fair for the software. If you don’t want to pay, enter the amount 0.
  6. Click on “Get Synfig”.
  7. You can provide your email address in the textbox.
  8. If you want you can opt-in for email notifications by clicking the checkbox.
  9. Click on continue to receive the link in your email.
  10. If you want to download anonymously you can click on the private link to GitHub.
  11. On the top of the page, you can find developer releases that have the latest untested features.
  12. If you want a stable version of Synfig then you have to scroll down to the bottom.
  13. Choose the version that matches your OS.
  14. Wait for the download to complete.
  15. Once the downloading is complete, click on the file to start installing.
  16. Click Yes when the UAC panel asks for permission.
  17. Click I Agree to accept the terms of the license.
  18. You can change your install settings in the next window.
  19. Once you are done click Next.
  20. You can choose the path where you want the install to be stored.
  21. Select your desired folder and click Ok.
  22. Click Install and wait for the process to be completed.
  23. Click close once the installation is complete.
  24. Usually, a desktop icon is added. If not you can search for Synfig from the taskbar.
  25. You can pin the software for easy access.
  26. Just right-click on the Synfig icon in the taskbar and select "Pin to taskbar".

Inkscape for Windows

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:

https://www.inkscape.org

Instructions for Installation

  1. You can open the link above or Open a browser and search for Inkscape in Google or any other search engine.
  2. Click the first link in the search results.
  3. Click the dowload button.
  4. Click on your OS name.
  5. Select the type of installer you want like exe or msi.
  6. Wait for the download to complete.
  7. Once the downloading is complete, click on the file to start installing.
  8. Click Yes when the UAC panel asks for permission.
  9. Select your language and click OK.
  10. Click Next.
  11. You can change your install settings in the next window.
  12. Once you are done click Next.
  13. You can choose the path where you want the install to be stored.
  14. Select your desired folder and click Ok.
  15. Click Install and wait for the process to be completed.
  16. Click Finish once the installation is complete.
  17. Usually a desktop icon is added. If not you can search for Inkscape from the taskbar.
  18. You can pin the software for easy access.
  19. Just right click on the Synfig icon in the taskbar and select "Pin to taskbar".

Introduction to Synfig Studio

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.

What can it do?

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.

Where can I get it?

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

References

Mozilla Developers Network

A list of all HTML elements.

A list of all HTML attributes.

A list of all inline elements.

A list of all block elements.

Wikipedia

A list of all HTML and XML entity character references.

HTML wiki article.

HTML5 wiki article.

Style Guide

Benefits of having Consistent Style

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.

Doctype

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>

Lower Case

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>

Quotes

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.

Closing Elements

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

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">

Empty Attributes

In HTML5 it is valid to have empty attributes. We can take advantage of this liberty to have cleaner code.

<input type="text" disabled>

Indenting Code

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>

Title element

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.

Scripts at bottom

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.

File names

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.