Lesson 14(E).pdf

14 HTML5 and Web Content Management Systems Lesson Introduction In previous weeks you have gained the basic HTML, DHTML, JavaScript and all the other related knowledge regarding web designing. During this week, you will learn the semantic web design elements cooperated in HTML5 and to ap...

14 HTML5 and Web Content Management Systems Lesson Introduction In previous weeks you have gained the basic HTML, DHTML, JavaScript and all the other related knowledge regarding web designing. During this week, you will learn the semantic web design elements cooperated in HTML5 and to apply CMS to host websites. Modern businesses industries are require customizable web systems to manage the content with their dynamic changes. Hence, Web CMSs are capable of providing user-friendly customizable environments for web developers with most frequent functionalities. Learning Outcomes: After completion of this lesson, the learner will be able to create websites using HTML5 and also construct web systems by using popular CMSs. This lesson enables you to Describe the extensions of HTML5 Differentiate facilities and functionalities of CMSs Install and deploy CMSs Customize CMSs based on requirements Lesson Outline HTML5 directives RIA development Popular CMSs and their Features Design content for the CMS Installation and configuration of CMSs Customization of CMS Migration of Content and versioning Administration of CMS 14.1 HTML5 directives HTML5 stands for Hypertext Markup Language version 5.This is the latest version of HTML. HTML as well is not a programming language; it is a markup language published in October 2014 by World Wide Web Consortium (W3C). It introduces a number of new powerful elements and attributes that can help you in building websites. No browsers have full HTML5 support. Lets see some of the most prominent features introduced in HTML5. 1. Semantic Elements: A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: and - Types of tags caries only formatting instructions and nothing about its content. Examples of semantic elements: , , and - Clearly defines its content HTML5 provides semantic elements to define different parts of a web page. Defines an article Defines content aside from the page content Defines additional details that the user can view or hide Defines a caption for a element Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a footer for a document or section Specifies a header for a document or section Specifies the main content of a document Defines marked/highlighted text Defines navigation links Defines a section in a document Defines a visible heading for a element Defines a date/time Specifies a list of pre-defined options for input controls Defines the result of a calculation Draw graphics, on the fly, via scripting (usually JavaScript) Draw scalable vector graphics Defines sound content Defines a container for an external (non-HTML) application  Defines multiple media resources for media elements ( and ) Defines text tracks for media elements ( and ) Defines video or movie New input types color range date search datetime tel datetime-local time email url month week number New input attributes autocomplete min and max autofocus multiple form pattern (regexp) formaction placeholder formenctype required formmethod step formnovalidate formtarget height and width list The above list of new elements and attributes and their descriptions can be found in the following web link: https://www.w3schools.com/htmL/html5_semantic_elements.asp Usage of Semantic Elements: : An article element make identity on its own, and it can be read independently from the rest of the web site. element can be used for Forum post, Blog post, Newspaper article. : The element should be used as a container for introductory content. :A footer typically contains the information about its child elements such as the author of the document, copyright information etc. Activity 14.1: Go through the tutorial content and the exercises given in the following link step by step. https://www.w3schools.com/htmL/html5_semantic_elements.asp 2. WebForms 2.0: To enhance the features of HTML web forms, a set of new attributes have been introduced for tag. Form elements and attributes in HTML5 provide a greater degree of semantic mark-up and it is simple. 3. Persistent Local Storage: To achieve without resorting to third-party plugins. 4. WebSocket: A next-generation bidirectional communication technology for web applications. 5. Server-Sent Events: HTML5 introduces events, which flow from web server to the web browsers and they are called Server-Sent Events (SSE). 6. Canvas: This supports a two-dimensional drawing surface that can program with JavaScript. 7. Audio & Video: Facility to embed audio or video on webpages without resorting to third-party plugins. 8. Geolocation: Visitors can choose to share their physical location when accessing web application. 9. Microdata: It lets developer to create their own vocabularies beyond HTML5 and extend web pages with semantic elements. 10. Drag and drop: Drag and drop the items from one location to another location on the same webpage. HTML5 elements and attributes: The following example shows basic structure of any HTML5 web page. Welcome Welcome to HTML5! HTML5 simplifies the declaration and it gives all the HTML4 elements to work accordingly. Therefore, inner content of given HTML4 content will work as usual inside HTML5 declaration. 14.2. RIA (Rich Internet Application) A rich Internet application (RIA) is a Web application designed to deliver the same features and functions normally associated with desktop applications. RIAs generally split the processing across the Internet/network divide by locating the user interface and related activity and capability on the client side, and the data manipulation and operation on the application server side. An RIA normally runs inside a web browser and usually does not require software installation on the client side to work. However, some RIAs may only work properly with one or more specific browsers. One specific feature of an RIA (compared to general web applications) is the client process that acts between the user and the application server. The client app downloads when the RIA launches. The app can be augmented during subsequent operation with additional downloads in which the app acts as a browser extension to handle the user interface and server communications. Watch the following video for your additional references: https://www.youtube.com/watch?v=UQI66j8jmQM 14.3 Popular CMSs and their Features What is Content Management System? CMS is a tool that enables you to create, edit, delete and finally publish in a variety of formatted and variety of content (such as text, graphics, video, documents, etc) while being governed by a set of rules, processes and workflows that ensure validated electronic content and coherency of the data. Benefits of CMS Consistent website design Availability of site modules and templates. An open source community (for support). Content and structure can easily be adapted. Content is well organized and searchable. You can assign different webmasters to administer the content. Content management systems (CMS) allows you to make changes to a website without need of a single touch to line of code. WordPress, Joomla and Drupal all offer great features, tons of customizations, ease-of-use, and strong security. Wordpress : especially well for small to medium sized websites, blogs and smaller e-commerce stores. Joomla : Great for e-commerce or social networking websites, but requires a basic understanding of technical skills Drupal : The most difficult, but also the most powerful. It requires a familiar understanding of HTML, CSS and PHP. 14.3.1 Wordpress WordPress is the world’s most popular content management system and there is lot of features to become as the most popular one as follows, Easy to Install Customizable Free Community Support 14.3.2 Joomla Joomla is the second most popular CMS. It’s like the compromise between WordPress and Drupal. The features of Joomla includes, Social Networking Commerce Sites Not too technical Help Portal Free 14.3.3 Drupal Drupal is the third most popular content management system available today, used by sites both large and small Technically Advanced Improved Performance Customizable Free 14.4 Design content for the CMS Content Management System' quite literally allows you to control and manage the content within your web site - without technical training. Using this uncomplicated system you can very easily add, delete images and edit text in your web site on the fly. You can also have an unlimited number of pages and a full site-search engine. Compared to designing for static content (print or web), designing for CMS-output is an entirely different discipline. It requires a big-picture systems-thinking approach that might best be described as architecture. What is good CMS design? Accommodates the needs of content and navigation regardless of length. Considers not just the present, but future needs and growth. Exemplifies page-to-page consistency in element placement, type, colors, and imagery. Defines a set of standards that are broad enough to accommodate current and future content needs, but strict enough to maintain strong site-wide consistency.  Navigation that makes it clear where you are, where you came from, what’s related, and how to go elsewhere. Retains its identity and consistency regardless of what text it contains or how it’s scaled. Understands and uses the limitations of XHTML/HTML5 as an asset. Developed in an accessible, web standards-friendly way that properly defines and uses markup. What is bad CMS design? Layouts designed as if they were for print. Layouts that make assumptions about the maximum and minimum length of copy. Headlines, navigation or copy requiring [non-dynamic] images or flash. Layouts with ambiguous navigation. Design that fails to accommodate the stylistic needs of future content, forcing the client to come up with his/her own (often inappropriate) solutions. Layouts that don’t consider the effects of text-wrapping. Designs that are poorly developed (this can make or break it, no matter how good the actual design is). Designs output by a CMS that gives the client too much stylistic control. 14.5 Installation and configuration of CMSs Step 01: choose a platform to build your website Step 02: get a domain & web hosting from web hosting and domain registrar. Step 03: Choose Website Hosting Plan of your choice Step 04: Pick a Domain Name and create your account Step 05: Check Your “Package Information” and Finish Registration Step 06: Create Your Password. Step 07: Once you’ve bought your domain name and set up your hosting it’s time to get your website up and running. Step 08: Since we are going to use wordpress here you’ll need to do is install WordPress to your domain. To create a website with wordpress (or joomla & drupal), use one click installation. Here are the steps you should follow (should be similar/same on all the major web hosting companies – Ex: www.GoDaddy.com). 1. Log in to your hosting account. 2. Go to your control panel. 3. Look for the “WordPress” or “Website” icon. 4. Choose the domain where you want to install your website.  5. Click the “Install Now” button and you will get access to your new WordPress website. If for some odd reason (some hosting companies don’t provide one-click-install for WordPress) you don’t have the option to install WordPress automatically, then use this manual installation. Installing WordPress Manually. 1) Download WordPress from here: https://wordpress.org/download 2) Create a new folder on your desktop and unzip WordPress in it 3) Look for a file named wp-config-sample.php and rename it to: wp-config.php 4) Now open the wp-config.php (with notepad for example) and fill the following lines: define(‘DB_NAME’, ‘database_name_here’); – Database name (if you don’t know it, ask this from your hosting support) define(‘DB_USER’, ‘username_here’); – Your hosting username define(‘DB_PASSWORD’, ‘password_here’); – Your hosting password After you have filled the gaps, save the file. 5) Now log into your hosting ftp (download FileZilla for that). The FTP address is usually ftp.yourdomain.com, username and password are the same that you used to register to your host. 6) If there is any file named “index” – delete it. After that upload all the files from your WordPress folder to your FTP server. You can use “drag n drop” function in FileZilla. 7) Once you have completed the previous steps, go the URL: yourdomain.com/wp- admin/install.php  This is the page you should see: 14.6 Customization of CMS Once you have installed wordpress to your domain need to choose a Theme/Template for your site. Theme means a design template that tells WordPress how your website should look. how to find a theme 1. Log into your WordPress dashboard 2. Once you have found a theme you like, installing it is as simple as clicking “Install” followed by “Activate”. 3. adding content and create new pages. 4. Adding pages to the menu (If you want your new page to be linked to in your navigation bar) Save any changes you’ve made to the page by clicking “Update” Click “Appearance” -> “Menus” in the sidebar of the WordPress Dashboard. Find the page you created and add it to the list by clicking the checkbox next to it and then “Add to Menu”. 5. Editing sidebar Go to “Appearance -> Widgets” in the WordPress Dashboard. From here, you can use drag and drop to add different “boxes” to your sidebar, or remove the items you don’t want. 6. Installing Plugins to Get More out of WordPress.  “Plugins” are extensions that are built to expand WordPress’ capabilities, adding features and functions to your site that don’t come built-in. To start installing plugins, go to “Plugins -> Add New” and simply start searching. If you’ve followed the steps in this guide, you should now have a fully-functional WordPress website! 14.7 Migration of Content and versioning Whether moving content to an upgraded CMS version, or changing vendors, you need to plan your migration early on to avoid unexpected costs and delays. There are several steps to follow to migrate the content. 1. Start planning early. Delaying content migration until the end of the project sets you up for failure. Content migration can easily take weeks of technical work since you want that work to be completed well before launch. Planning should be part of the initial content strategy phase, and extend into the design phase when you know a bit more about your new content models. 2. Allocate sufficient budget and client resources. Investing in a thorough content strategy is a given for any successful migration project. In due time, developers will also provide an estimate for the technical side of the content migration, so that's another thing to budget for. But the client should also budget for a significant amount of internal resources throughout the migration. The client will need to contribute in the auditing process to determine which parts stay and go. Even when using automated migration tools, the client needs to get involved afterwards to make sure content is still relevant and complete. Let's not forget, the client is also responsible for producing new content, which is another frequently underestimated task. 3. Do content and SEO audit. Migration is faster when the amount of content is reduced to the essentials. To arrive there, we first need to inventory all the content on the old site - pages, blocks (or equivalent), media files and metadata. A content strategist can help decide when to cut or merge existing content, and when to write all-new stuff. 4. Research automatic vs manual migration. Various automatic migration tools exist (, but don't expect them to be a magic cure. While running the migration script might be a matter of clicking a button, the main bulk of this approach is the mapping and configuration of your old and new content models.  5. Handle your SEO Deleting, moving and renaming your old content will mess up your sitemap. If you launch without handling it properly, inbound traffic will plummet, search spiders won't find your stuff, and users will grow annoyed by all your broken links. Be sure that your new site generates a sitemap.xml file to tell search spiders about all your content, rather than relying on them to discover it all on their own. The sitemap should be re-generated frequently to reflect the up-to-date state of your content structure. 14.8 Administration of CMS The usage of a content management system (cms) offers a lot of advantages to every web presence since contents are stored and edited separately from design and structure. The software consistently adjusts the content to the layout. Thus, texts, images, and files are rearranged on their own to the web site view, even if changes increase the extend of your web site considerably. Just as easy, the cms regulates the creation and reorganization of pages, or the deletion of pages and content. All formats relevant for Internet publication can be handled easily. Activity 14.2: Study the operation of above installations and download one of the popular CMS and install it on a web server. Summary Now we have completed learning Lesson 14. During this lesson, we have mainly focused on creating websites using HTML5 and also construct web systems by using popular CMSs. Now you should be able to describe the extensions of HTML5, differentiate facilities and functionalities of CMSs, install and deploy CMSs, customize CMSs based on requirements.