Netex learningMaker | Use Recommendations v1.0 [EN]

240 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
240
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Netex learningMaker | Use Recommendations v1.0 [EN]

  1. 1. Use recommendations Version 1.0 Review 3
  2. 2. 2 Index 1. Introduction .......................................................................................................................................3 2. Images................................................................................................................................................3 2.1 Supported formats ..................................................................................................................................................... 3 2.2 Recommended configurations ................................................................................................................................... 3 2.3 Recommended programmes...................................................................................................................................... 4 3. Videos.................................................................................................................................................4 3.1 Supported formats ..................................................................................................................................................... 4 3.2 Recommended configurations ................................................................................................................................... 4 3.3 Recommended programmes...................................................................................................................................... 5 4. Audios ................................................................................................................................................5 4.1 Supported formats ..................................................................................................................................................... 5 4.2 Recommended configurations ................................................................................................................................... 5 4.3 Recommended programmes...................................................................................................................................... 5 5. Documents.........................................................................................................................................6 5.1 Supported formats ..................................................................................................................................................... 6 5.2 Recommended configurations ................................................................................................................................... 6 5.3 Recommended programmes...................................................................................................................................... 6 6. Animations and interactions..............................................................................................................6 6.1 Supported formats ..................................................................................................................................................... 6 6.2 Recommended configurations ................................................................................................................................... 7 6.3 Recommended programmes...................................................................................................................................... 7 7. Fonts...................................................................................................................................................7 7.1 Use of basic combinations.......................................................................................................................................... 7 7.2 Use of safe combinations ........................................................................................................................................... 8 7.3 Use of aggressive combinations................................................................................................................................. 8 7.4 Use of embedded fonts.............................................................................................................................................. 8 7.5 Recommendations...................................................................................................................................................... 9
  3. 3. 3 1. Introduction This document includes a series of recommendations on the use of multimedia elements within the projects created with Netex learningMaker, such as images, audios, videos, documents, animations, interactive activities or fonts. These resources are usually created by tools external to Netex learningMaker. That is why it is so important to take these recommendations into account so that the quality of the content we are going to produce is not affected by the misuse of other type of tools when creating the resources we are going to include in our projects. Therefore, we do not only make recommendations for the formats and configurations, but also for tools which make creation easier in an appropriate way. 2. Images Images can be displayed in our projects in different ways, depending on the template and the component we are going to use to insert them. In some cases, images will have to have a specific height and width, and in others we will be completely free to decide their size. You can consult all these details in the user guide of the template/s you are going to use, within the Appendix corresponding to the images sizes, where you will find an image similar to the following: 2.1 Supported formats The supported image formats are:  JPEG (recommended for photographic images)  GIF (recommended for images with blocks of plain colours, such as icons or cliparts)  PNG (recommended for images with effects such as shines or shadows, which also require transparency) 2.2 Recommended configurations Whatever format and configuration we are going to apply to our images, we can use the following guide to check that the weight of our image is optimal:
  4. 4. 4  Background images should not weigh more than 10 KB.  The images we use for the header of a page, section or similar should weigh around 60 KB.  The images which correspond with pictures or other relevant elements within our project should not weigh more than 100 KB. According to the image format we use, the recommended configurations will be different. It is important to highlight that these recommendations are generic, as they can vary depending on the specific characteristics of each image we are going to use:  For JPEG format images: Property Recommended value Quality High (70%) Height Specified in the component in which it is going to be used, in case it exists. Width Specified in the component in which it is going to be used, in case it exists. Resolution 72 PPI  For GIF format images: Property Recommended value Colours 256 or less, depending on the number of colours the image contains Palette Web Height Specified in the component in which it is going to be used, in case it exists. Width Specified in the component in which it is going to be used, in case it exists.  For PNG format images: Property Recommended value Depth 24 bits Height Specified in the component in which it is going to be used, in case it exists. Width Specified in the component in which it is going to be used, in case it exists. Resolution 72 PPI 2.3 Recommended programmes We recommend the use of Adobe PhotoShop and Adobe Illustrator to create, design and manipulate images. If our images have already been created and we just need to convert them following the recommendations in this guide, we recommend the use of the free online tool Yahoo!Smush.it 3. Videos Videos can be placed in our projects in different ways: within the body of a page, a pop-up or a multimedia gallery. Depending on the template we are going to use in our project, we will have different possibilities. In any case, unlike images, video formats and configurations are independent of the place where we use them within our project. 3.1 Supported formats The only supported video format is MP4, as it is the only one which offers compliance with all the devices and browsers on the market. 3.2 Recommended configurations The recommended weight of a video depends on its durations and its frames. The longer the video is, the heavier it will be. Besides, videos which have many transitions and which are very dynamic will be heavier than the static ones.
  5. 5. 5 In any case, we can take as a general rule the fact that each minute of video should not be exceed 8 MB. That is, if we have a 4-minute video, the weight should not exceed 32 MB. Therefore, we recommend the following codification settings: Property Recommended value Resolution 640x360 Codec H.264 (x264) H.264 Profile Baseline H.264 Level 3.1 Bitrate Video 1 Mb/s Bitrate Audio Mono (if there is only one voice) / Stereo (if there is music and/or several voices) 3.3 Recommended programmes We recommend the use of Adobe Premiere and Adobe AfterEffects to create, design and manipulate videos. If the source video is already available and we just want to convert it to any of the formats supported by learningMaker, we recommend the use of the free open source tool Handbrake. 4. Audios Audios can be included in our projects in different places: within the body of a page, a pop-up or a multimedia gallery. Depending on the template we are going to use in our project, we will have different possibilities. The following configuration and recommendations are of general application for any audio we use in any project. 4.1 Supported formats The only supported audio format is MP3, as it is the only one which offers compliance with all the devices and browsers on the market. 4.2 Recommended configurations The weight of an audio depends on the sound complexity of the recording we are going to use and its duration. The longer the audio is and the more sound spectrum it has to cover, the heavier it will be. Despite the fact that there is no master rule to know if the weight of an audio is correct, each minute of audio should not exceed 1 MB. That is, if we have a 3-minute audio, the weight should be about 3 MB. Property Recommended value Bitrate 128 Codec MP3 Codec Profile VBR (Variable Bit Rate) Encoding lossy Channels 2 (Stereo) if there is music or several voices / 1 (Mono) if there is only one voice Sample Rate 44100 khz Bit Float 16-bit 4.3 Recommended programmes We recommend the use of Adobe Audition to create, design and manipulate audios.
  6. 6. 6 5. Documents Documents are resources which can be introduced into our projects so that students can download them or view them online, serving as support or additional material. For this reason, we will link them in general to components in our project, whether from a link in a text or an image, or from a widget. Depending on the template we use, we will have more or less options to do it. In any case, the following recommendations can be applied to any document we want to include in our project. 5.1 Supported formats In general, all types of files are supported, but the use of PDF format resources is recommended because it is the only one which can be viewed on any device and browser without requiring the user to install a specific viewer. 5.2 Recommended configurations The weight of a PDF document depends on the number of pages and the type of information it is going to include. The more pages and images it contains, the heavier it will be. A good criterion to know if the weight of our PDF is correct consists on checking that each page of our document weighs about 50KB. That is, if our document has 10 pages, its size should be about 500 KB. Property Recommended value Resolution 72 PPI 5.3 Recommended programmes We recommend the use of Adobe InDesign to create, design and manipulate PDF documents. 6. Animations and interactions Animations and interactions are resources which can be introduced into our projects through the “External resource” and “Iframe” components. They are generally used to include elements created by external tools which provide our content with interactivity and animation, usually activities. 6.1 Supported formats It is important to emphasize that these external resources have to be developed in formats which are compatible with our final users’ devices and browsers. Not only on a technological level, but also on a screen resolution level. The tool supports the inclusion of external resources in the following formats:  SWF (Flash)  HTML Given that the support of Flash resources is inexistent or limited on many devices (iPhone, iPad), it is recommended to use external resources created in HTML format, specifically in HTML5 and with “Responsive Web Design” capacity; that is, being able to automatically adapt to the size of the user’s device. For those cases in which it is complicated to obtain the desired functionality with HTML5, it is recommended to create two versions of the resource: one in Flash with all the functionality and another one in HTML5 with reduced functionality. Netex learningMaker components allow you to include both resources in one component and then our project will show one or other version depending on the capacities of our device and browser.
  7. 7. 7 6.2 Recommended configurations It is impossible to define a rule which establishes the weight of an animation or interaction because the content can be varied and different. A good practice consists on including external resources with a weight below 10 MB, as they can make projects too heavy and the user experience can be affected by the required loading times. 6.3 Recommended programmes We recommend the use of Adobe Edge to create animations and interactions in HTML5, which will also allow them to automatically adapt to the different devices. Besides, Adobe Edge allows us to publish the resources both in HTML5 and Flash. If we just want to generate resources in Flash, we recommend the direct use of Adobe Flash Professional. 7. Fonts Depending on the template we are going to use in the project, we have different alternatives for the fonts:  Use of basic combinations (use of serif, sans serif and monospaced fonts which are practically standard in all browsers and operating systems)  Use of safe combinations (normally used on pages or applications for the Web, and which include fonts with similar visualizations for all browsers and operating systems)  Use of aggressive combinations (they include fonts into the safe combinations which are not supported by all browsers and operating systems, but which are supported by the most important ones)  Use of embedded fonts (you can use any font you want, but on low capacity devices there will be performance problems and a considerable increase on the content weight) The templates included by default in the tool always use “safe combinations”; but if you are a customer with custom templates you are probably using “aggressive combinations” or “embedded fonts”. It is important to take into account that each browser and operating system uses their own way to render the fonts. Therefore, it is almost impossible to make two things look exactly the same on different browsers. 7.1 Use of basic combinations There are three families of basic fonts on any browser and operating system:  SANS-SERIF, typeface without projecting features at the end of strokes (serif), also known as gothic or linear. Eg: Arial, Helvetica or Verdana.  SERIF, typeface with projecting features at the end of strokes (serif), also known as Roman. Eg: Georgia or Times New Roman.  MONOSPACE, typeface in which all characters occupy the same amount of horizontal space and are usually very clear and wide. They can have serifs or not, but they are not very useful for working with long paragraphs. Eg: Courier or Courier New. The use of classic combinations of fonts is materialised with the definition of a list of fonts based on these families. We are talking about the following combinations:  Sans serif «wide» combination: Verdana, Geneva, sans-serif.  Sans serif «narrow» combination: Tahoma, Arial, Helvetica, sans-serif.  Serif «wide» combination: Georgia, Utopia, Palatino, 'Palatino Linotype', serif.  Serif «narrow» combination: 'Times New Roman', Times, serif.  Monospace combination: 'Courier New', Courier, monospace. As you can see in the combinations, the last font reserve is defined as the family base font, which always has an equivalent font in any operating system or browser because all of them use some of the fonts of these families as its “implementation by default”.
  8. 8. 8 7.2 Use of safe combinations If basic combinations are not enough or not attractive enough, we can complement them with a “safe” additional font. A font is said to be “safe” when it is available on almost all operating systems and browsers on the market. The industry considers the following fonts as safe:  Arial/Helvetica  Courier/Courier New  Georgia  Times/Times New Roman  Trebuchet MS  Verdana Taking this into account, the most used “safe combinations” in the Web are the following:  Safe sans serif combination: Arial, Helvetica, sans-serif; Tahoma, Geneva, sans-serif; "Trebuchet MS", Helvetica, sans-serif; Verdana, Geneva, sans-serif.  Safe serif combination: "Palatino Linotype", "Book Antiqua", Palatino, serif.  Safe monospace combination: "Lucida Console", Monaco, monospace. 7.3 Use of aggressive combinations Nowadays, a lot of people use less traditional “stocks” and include in the combinations names of fonts which are not normally considered to be safe, but they are usually installed by default in most browsers and operating systems. In these cases, the order of the combination is the following: exact font, closest alternative, alternative provided by the operating system, safe font, family name. Taking this into account, the most used combinations are:  Serif based on Times New Roman: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;  Serif based on Georgia: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;  Serif based on Garamond: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;  Sans serif based on Helvetica/Arial: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;  Sans serif based on Verdana: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;  Sans serif based on Trebuchet: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;  Sans serif based on Impact: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;  Monospace: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace. 7.4 Use of embedded fonts Finally, the option to embed the fonts directly in the template is available by using the @font-face property. It is possible to use any font we want with this alternative and it is guaranteed that it will be displayed in any situation.
  9. 9. 9 However, the use of embedded fonts seriously affects the performance of our content and their weight, as the font needs to be stored completely within the content, and the browser has to download and render it for each access to them. Besides, in the case you use property fonts, you will need to have the licences which allow their use and distribution. 7.5 Recommendations Depending on the template we are going to use in our project, we will have different possibilities. Nevertheless, we recommend the use of basic and safe combinations, avoiding the use of embedded fonts as much as possible.

×