DOCSLIB.ORG

Designing Rich Internet Applications Using HTML5, CSS3 and Jquery- Beginner Level

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Designing Rich Internet Applications Using HTML5, CSS3 and Jquery- Beginner Level Designing Rich Internet Applications Using HTML5, CSS3 and jQuery- Beginner Level By High School Technology Services myhsts.org HTML5 Fundamentals By High School Technology Services myhsts.org Overview of HTML5 HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts: ▪ It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows more diverse and powerful Web sites and applications. ▪ The most interesting new HTML5 elements are: ▪ New semantic elements like <header>, <footer>, <article>, and <section>. ▪ New attributes of form elements like number, date, time, calendar, and range. ▪ New graphic elements: <svg> and <canvas>. ▪ New multimedia elements: <audio> and <video>. Comparing HTML5 to XHTML ▪ XHTML is essentially identical to HTML4 (the fourth iteration of HTML), but with elements of XML that extend HTML’s capabilities. XHTML came along before HTML5, right after HTML4, solving for some cross-browser compatibility issues and offering a “best of both worlds” scenario. It’s a bit stricter than HTML, providing more precise standards and specifications for how a site’s data is broken down and transmitted. This does make it a bit unforgiving, however, and it can be tougher to debug. ▪ HTML’s latest evolution, HTML5, is a versatile game-changer. HTML5 adds a ton of new features to the HTML repertoire, making it able to do so much more on its own. It’s a hybrid of three types of code—HTML, CSS, and JavaScript—and by bundling these three components, HTML5 lets developers work faster and more efficiently. The resulting site architecture is agile, mobile-friendly, and compatible with more browsers. ▪ HTML came along first, XHTML was designed to fix problems with HTML, and HTML5 solved problems XHTML was designed to fix. They’re all markup languages that provide structure and organization to the content of webpages and applications, but their relevance has shifted as newer versions of HTML have evolved, rising to the challenges of mobile demands, responsive design, and developers who want to accomplish more with less. Changes to Existing Tags, Deprecated Elements and Attributes ▪Some Tags That Have Been Redefined with New HTML5 Standards:<strike> <b> <i> <u> <small> ▪Deprecated items - http://w3c.github.io/html/obsolete.html Browser Support ▪ HTML5 is supported in all modern browsers. ▪ In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements. ▪ Because of this, you can "teach" older browsers to handle "unknown" HTML elements. ▪ HTML5 defines eight new semantic elements. All these are block-level elements. - To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block. ▪ However, IE8 (and earlier) does not allow styling of unknown elements! ▪ You will require the HTML5shiv to provide compatibility for IE Browsers older than IE 9. HTML5 Shiv ▪ The HTML5Shiv is placed within the <head> tag. ▪ The HTML5Shiv is a javascript file that is referenced in a <script> tag. ▪ You should use the HTML5Shiv when you are using the new HTML5 elements such as: <article>, <section>, <aside>, <nav>, <footer>. ▪ E.g. - <head> <!--[if lt IE 9]> <script src="/js/html5shiv.js"></script> <![endif]--> </head> Polyfill ▪ A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will. ▪ sessionStorage is available in all the latest browsers (IE8 and upwards) but isn't in IE7 and below. ▪ A polyfill can be used to plug the support for older browsers that don't provide sessionStorage. ▪ Another example is providing canvas support in IE. This is really where the poly part can be seen. If there's no native canvas, we can provide canvas support using Silverlight. If Silverlight isn't available, we can drop down to using VML using excanvas. Using these two scripts provides the developers with a (fairly) solid canvas backup should it not be native in the browser. Modernizer JavaScript Library ▪ Modernizr is a JavaScript library that detects which HTML5 and CSS3 features your visitor’s browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them. This is called feature detection and is much more efficient than browser sniffing. ▪ There are several new features which are being introduced through HTML5 and CSS3 but same time many browsers do not support these news features. ▪ Modernizr provides an easy way to detect any new feature so that you can take corresponding action. For example, if a browser does not support video feature then you would like to display a simple page. ▪ You can create CSS rules based on the feature availability and these rules would apply automatically on the webpage if browser does not support a new feature. Modernizer JavaScript Library ▪ Before you start using Modernizr, you would have to include its javascript library in your HTML page header as follows − <script src="modernizr.min.js" type="text/javascript"></script> ▪ As mentioned above, you can create CSS rules based on the feature availability and these rules would apply automatically on the webpage if browser does not support a new feature. Looking Forward In the next session we will cover HTML5 Structural Elements – ▪ New Block-Level Semantic Elements ▪ <header> ▪ <footer> ▪ <section> ▪ <article>, etc ▪ New Text-Level Semantic Elements ▪ <time> ▪ <meter> ▪ <details> ▪ <summary> ▪ <mark> Thank You. By High School Technology Services myhsts.org.
Load more

Recommended publications
  • CSS Browser Selector Plus: a Javascript Library to Support Cross-Browser Responsive Design Richard Duchatsch Johansen Talita C
    CSS Browser Selector Plus: A JavaScript Library to Support Cross-browser Responsive Design Richard Duchatsch Johansen Talita C. Pagani Britto Cesar Augusto Cusin W3C Accessibility WG Member and Assistant Coordinator Professor at Faculdade Paraíso do Senior Front-end Developer at of Educational Projects - MStech Ceará and W3C Accessibility WG Eventials – Rua Itapaiúna, 2434 Rua Joaquim Anacleto Bueno, 1-42 Member – Rua da Conceição, 1228 São Paulo – SP – Brazil, Zip Code Bauru – SP – Brazil, Juazeiro do Norte – CE – Brazil, 05707-001 Zip Code 17047-281 Zip Code 63010-465 +55 14 9711-7983 +55 14 3235-5500 +55 15 8100-4466 [email protected] [email protected] [email protected] ABSTRACT means you can use CSS Media Queries to tweak a CSS for a Developing websites for multiples devices have been a rough task mobile devices, printer or create a responsive site. for the past ten years. Devices features change frequently and new Media queries is an extension to the @media (or media=”” devices emerge every day. Since W3C introduced media queries attribute, in <link> tag) specification on CSS, allowing in CSS3, it’s possible to developed tailored interfaces for multiple declaration of conditional queries expressions to detect particular devices using a single HTML document. CSS3 media queries media features, such as viewport width, display color, orientation have been used to support adaptive and flexible layouts, however, and resolution [1], as shown on Table 1. it’s not supported in legacy browsers. In this paper, we present CSS Browser Selector Plus, a cross-browser alternative method Table 1.
    [Show full text]
  • Javascript for Web 2.0 Development Introduction
    "Web Age Speaks!" Webinar Series JavaScript for Web 2.0 Development Introduction Mikhail Vladimirov Director, Curriculum Architecture [email protected] Web Age Solutions Providing a broad spectrum of regular and customized training classes in programming, system administration and architecture to our clients across the world for over ten years ©WebAgeSolutions.com 2 Overview of Talk Overview of ECMAScript 6 release Hybrid Mobile Web Development Overview of Popular JavaScript libraries: jQuery AngularJS Modernizr _Underscore.js ©WebAgeSolutions.com 3 JavaScript for Web 2.0 Development Some JavaScript Facts Who Owns JavaScript Name The "JavaScript" name is a trademark now owned by Oracle Corporation (US Patent and Trademark Office, copyright entry #75026640). ©WebAgeSolutions.com 5 ECMAScript… JavaScript is un-related to Java It was originally designed by Netscape to add scripting to their browser. It was called 'LiveScript'. Re-naming it to JavaScript was a marketing trick to get more attention to it It is more of a “Lisp in C's Clothing” with elements of functional programming (http://javascript.crockford.com/javascript.html ) Each browser’s JavaScript engine is an attempt to implement ECMAScript standard (first draft in 1997) Well-known implementations are JavaScript, JScript and ActionScript ©WebAgeSolutions.com 6 ECMAScript Release 6 (Work in Progress) Classes and modules ( import {func1} from ‘js/mylib’ ) Better variable scoping (let for the new block scope) Multiple return values (return {x, y})
    [Show full text]
  • Client-Server Web Apps with Javascript and Java
    Client-Server Web Apps with JavaScript and Java Casimir Saternos Client-Server Web Apps with JavaScript and Java by Casimir Saternos Copyright © 2014 EzGraphs, LLC. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/ institutional sales department: 800-998-9938 or [email protected]. Editors: Simon St. Laurent and Allyson MacDonald Indexer: Judith McConville Production Editor: Kristen Brown Cover Designer: Karen Montgomery Copyeditor: Gillian McGarvey Interior Designer: David Futato Proofreader: Amanda Kersey Illustrator: Rebecca Demarest April 2014: First Edition Revision History for the First Edition: 2014-03-27: First release See http://oreilly.com/catalog/errata.csp?isbn=9781449369330 for release details. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Client-Server Web Apps with JavaScript and Java, the image of a large Indian civet, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.
    [Show full text]
  • Types/Bluebird
    @types/bluebird MIT https://www.npmjs.com/package/@types/bluebird @types/body-parser MIT https://www.npmjs.com/package/@types/body-parser @types/chai MIT https://www.npmjs.com/package/@types/chai @types/express MIT https://www.npmjs.com/package/@types/express @types/express-serve-static-core MIT https://www.npmjs.com/package/@types/express-serve-static-core @types/form-data MIT https://www.npmjs.com/package/@types/form-data @types/geojson MIT https://www.npmjs.com/package/@types/geojson @types/js-yaml MIT https://www.npmjs.com/package/@types/js-yaml @types/lodash MIT https://www.npmjs.com/package/@types/lodash @types/mime MIT https://www.npmjs.com/package/@types/mime @types/moment-range MIT https://www.npmjs.com/package/@types/moment-range @types/node MIT https://www.npmjs.com/package/@types/node @types/node-statsd MIT https://www.npmjs.com/package/@types/node-statsd @types/react MIT https://www.npmjs.com/package/@types/react @types/react-dom MIT https://www.npmjs.com/package/@types/react-dom @types/react-transition-group MIT https://www.npmjs.com/package/@types/react-transition-group @types/recompose MIT https://www.npmjs.com/package/@types/recompose @types/request MIT https://www.npmjs.com/package/@types/request @types/sequelize MIT https://www.npmjs.com/package/@types/sequelize @types/serve-static MIT https://www.npmjs.com/package/@types/serve-static @types/validator MIT https://www.npmjs.com/package/@types/validator aasm MIT https://rubygems.org/gems/aasm abab ISC https://www.npmjs.com/package/abab abbrev ISC http://github.com/isaacs/abbrev-js
    [Show full text]
  • Beginning HTML5 and CSS3
    For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. www.it-ebooks.info Beginning HTML5 and CSS3 Richard Clark, Oli Studholme, Christopher Murphy and Divya Manian www.it-ebooks.info Beginning HTML5 and CSS 3 Copyright © 2012 by Richard Clark, Oli Studholme, Christopher Murphy and Divya Manian This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher's location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law. ISBN-13 (pbk): 978-1-4302-2874-5 ISBN-13 (electronic): 978-1-4302-2875-2 Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logos, or image we use the names, logos, or images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark.
    [Show full text]
  • Hitachi Ops Center V10.6.0 Open Source Software Packages
    Hitachi Ops Center V10.6.0 Open Source Software Packages Contact Information: Hitachi Ops Center Project Manager Hitachi Vantara LLC 2535 Augustine Drive Santa Clara, California 95054 Name of Product/Product Component Version License "Java Concurrency in Practice" book 1.0-redhat-4 Creative Commons Attribution annotations 2.5 Generic @agoric/babel-parser 7.10.5 The MIT License @agoric/babel-parser 7.12.11 The MIT License @angular-builders/custom-webpack 8.0.0-RC.0 The MIT License @angular-devkit/build-angular 0.800.0-rc.2 The MIT License @angular-devkit/build-angular 0.901.13 The MIT License @angular-devkit/core 7.3.8 The MIT License @angular-devkit/schematics 7.3.8 The MIT License @angular/animations 9.1.11 The MIT License @angular/animations 9.1.13 The MIT License @angular/cdk 9.2.4 The MIT License @angular/cdk-experimental 9.2.4 The MIT License @angular/cli 8.0.0 The MIT License @angular/cli 9.1.13 The MIT License @angular/common 9.1.11 The MIT License @angular/common 9.1.13 The MIT License @angular/compiler 9.1.11 The MIT License @angular/compiler 9.1.13 The MIT License @angular/compiler-cli 9.1.13 The MIT License @angular/core 7.2.15 The MIT License @angular/core 9.1.11 The MIT License @angular/core 9.1.13 The MIT License @angular/forms 7.2.15 The MIT License @angular/forms 9.1.0-next.3 The MIT License @angular/forms 9.1.11 The MIT License @angular/forms 9.1.13 The MIT License @angular/language-service 9.1.13 The MIT License @angular/platform-browser 7.2.15 The MIT License @angular/platform-browser 9.1.11 The MIT License @angular/platform-browser
    [Show full text]
  • Responsible Responsive Web Design
    Responsible Responsive Web Design By: Matt Busche What is Responsive Web Design? ● an approach ● provide optimal user experience ● platform agnostic ● content first ● not a separate website What is Responsive Web Design? ● not a separate site ● one codebase ● no context ● m.espn m.espn2 ● mobile, desktop, UA sniffer ● SEO, device, orientation Why Responsive Design? ● users don’t want an app Why Responsive Design? ● you have mobile users ● don’t have money for apps ● accessible from any device ● SEO matters How does it work? ● CSS3 spec ● media query ● IE9, FF3.5, Chrome 2 ● 93.92% How does it work? ● link and @import selectively* load ● window pixels How does it work? ● foolproofing the viewport ● meta tag not w3c standard How does it work? ● meta tag; no meta Layout Process ● identify constraints ● mobile first! ● useful for some, useful for all ● design for touch screen Layout Process ● identifying breakpoints ● progressive disclosure Progressive disclosure Mobile First Development ● can cause issues with unsupported browsers ● determine what’s important ● progressive enhancement Supporting the unsupported ● respond.js IE 6+, FF2+ ● HTML5shiv ● PIE.js - CSS3 (Prog IE) ● selectivizr - CSS3 pseudo classes Determining the unsupported ● graceful degradation ● media queries ● HTML4 or HTML5 Detecting features ● modernizr Detecting other features ● @supports ● user agent detection Progressive Enhancement ● EnhanceJS ● upgrading images for HD screens Lang attribute ● no lang then unknown ● accessibility - screen readers ● hyphens ● internationalization
    [Show full text]
  • Compatibility Via Modernizr
    Compatibility via Modernizr Making web things fit their medium by Stu Cox / @stucoxmedia #McrFRED | 27th June 2013 | Manchester, UK com•pat•i•bil•i•ty |kәmˌpatɪˈbɪlɪti| (abbr.: compat.) noun (pl. -i•ties) a state in which two things are able to exist or occur together without problems or conflict. In this case: Your web thing ←→ Your user's browser/device How we did it back in the day 1. Make a web thing 2. Test it in Browser A 3. It works! Hurray! 4. Test it in Browser B 5. Doesn't work :-( So we hack it. CSS hacks: .btn { *margin-left: -13px; } User-Agent sniffs: if (navigator.userAgent.match(/MSIE [67]\./)) { // Fix for old IE } These are essentially heuristics. Heuristics imply assumptions. "All browsers which parse CSS hack A also have layout bug B" "All browsers which match user-agent C support feature D" "I know about every browser my users might use" "If my assumptions are true now, they'll also be true in the future" "I know about every browser my users might use" 85 browser versions with > 0.1% market share 7,000 different devices login to Facebook every day [1] Users have different needs (think accessibility) [1] techcrunch.com/2012/08/03/vp-mike-schroepfer-7000-different-mobile-devices-access-facebook-every-day/ Browser A Browser B Three sources of compatibility problems: Features Plugins Bugs Features CSS: @font-face, transitions, animations, flexbox, ... HTML: <audio>, <video>, input types, drag & drop, ... JavaScript: History API, IndexedDB, WebSockets, ... ... Plugins Platforms/Runtimes: Flash, Silverlight, Java, ... Viewers: PDF, Office documents, ... ... Bugs Rendering: Box model, double margin, ..
    [Show full text]
  • Adaptto() 2014 Presentation
    APACHE SLING & FRIENDS TECH MEETUP BERLIN, 28-30 SEPTEMBER 2015 Making Sling Grunt Or How to Integrate Modern Front-End Development with Sling Philip Hornig (Publicis Pixelpark), Michael Sunaric (Netcentric) Topics . Modern front-end development and why we need it. How to integrate modern front-end development with the Sling development stack. The tools necessary to achieve the integration. adaptTo() 2015 2 Modern Front-End Development adaptTo() 2015 3 Complexity is increasing . Complex layouts and responsive design . Client side apps . Modular and object oriented design . Automated testing . Documentation adaptTo() 2015 4 Agile development . Rapid prototyping . Design in HTML . Prototyping engine with node.js, express.js adaptTo() 2015 5 Setup Scaffolding Yeoman, Middleman, … Libraries jQuery, Bootstrap, Modernizr, Bourbon Frameworks Ember.js, AngularJS, Backbone.js, ExtJS, Dojo, ... adaptTo() 2015 6 Develop Watch CSS (Sass, Less, Stylus) Javascript (CoffeeScript, TypeScript, ECMAScript 6) HTML (Jade, Haml, Handlebars) Lint CSS (csslint, sasslint, styluslint) Javascript (jshint, jscs) Refresh LiveReload Prototype Node.js, Express adaptTo() 2015 7 Test Function Form PhantomJS, CasperJS, Selenium, BackstopJS Selenium adaptTo() 2015 8 Build 1. Code linting 7. Optimize images 2. Compile 8. Measure performance 3. Unit tests 9. Prototype 4. Concatenate 10. Integration tests 5. Minify 11. Deploy 6. Generate icons/iconfonts adaptTo() 2015 9 Build Tools and Dependency Mgmt. NPM, Bower, Gulp, Grunt, Broccoli adaptTo() 2015 10 Gruntfile.js module.exports
    [Show full text]
  • Form Creation Input Widgets-Data Binding and Data Valid
    Part 2 Browser-based apps For a very long time developers were processing everything—form validation, file management, storage, messaging, and other vital application functionality— on the server. Server-side processing was a great idea for security reasons, lack of user processing power, and many other issues. There were workarounds through technologies such as Flash and Java, but the mobile market explosion revealed unanticipated limitations that HTML5 is aiming to fix. Thanks to major advances in JavaScript processing power and new W3C stan- dards, you can now perform server-side tasks through a user’s browser (aka client- side). Performing complex tasks through browsers saves tons of money on server costs, allows startups to easily create complex apps, and creates seemingly instant application responses during heavy load times. It also opens up a completely different thought process on application development and deployment to mobile and desktop. And they can both be done at the same time if you play your cards right. Many popular web applications use HTML5’s application features. Google Drive, for example, uses a new storage technology known as the Indexed Data- base API. You’ve probably also used HTML5’s WebSockets, forms, and many other features that we’ll be covering throughout this section. By the time you’ve completed part 2 (chapters 2–5), you’ll know enough to put together a small application with minimal server usage. Chapter 2 at a glance Topic Description, methods, and so on Page New input types1 HTML5 <input> element types
    [Show full text]
  • The Missing Manual by Matthew Macdonald
    HTML5 The book that should have been in the box® Matthew MacDonald Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo HTML5: The Missing Manual by Matthew MacDonald Copyright © 2011 Matthew MacDonald. All rights reserved. Printed in the Unites States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles: http://my.safaribooksonline.com. For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected]. Printing History: August 2011: First Edition. Nutshell Handbook, the Nutshell Handbook logo, the O’Reilly logo, and “The book that should have been in the box” are registered trademarks of O’Reilly Media, Inc. HTML5: The Missing Manual, The Missing Manual logo, Pogue Press, and the Pogue Press logo are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. ISBN: 978-1-449-30239-9 [LSI] [2013-06-28] Table of Contents The Missing Credits .............................. xi Introduction ................................... 1 Part One: Meet the New Language Chapter 1: Introducing HTML5 ....................... 11 The Story of HTML5 ......................................
    [Show full text]
  • Html / Js / Css / Jpg Jpeg / Gif / Png
    HTML5 CREATIVE SPECIFICATIONS HTML5 creatives are a type of display creative that must BEST PRACTICES follow the same guidelines as display creatives in terms • JavaScript and CSS Libraries: JavaScript and CSS libraries of content, security, and restricted products with some (such as jQuery) need to be included with the creative. additional requirements specific to HTML5. • Image Sprite: To help increase performance from HTML The IAB Display Advertising Guidelines delineate HTML5 ads, include image sprites instead of many images to creative specifications. decrease the number of file requests made by your creative. See the IAB list of SUPPORTED AD TYPES sprite tools for details. HTML5 Containing: • Video Tags: We do not recommend the use of video tags HTML / JS / CSS / JPG in HTML5. JPEG / GIF / PNG / SVG • Audio Tags: Audio tags should only play if a user intentionally starts the audio. Initial: 200 KB max Max Initial File Load Count: 15 files ADDITIONAL RESOURCES Subsequent/Polite Load: 1 MB max • HTML5 For Digital Advertising: Guidance for Ad Designers User-Initiated Load: 2.2 MB max recommended and Creative Technologists • HTML5 for Digital Advertising Resources Wiki HTML5 CREATIVE SPECIFICATIONS GRACEFUL DEGRADATION There are several options for displaying an ad when the browser it is running on a browser that does not support a feature, including: Different browsers have different subsets of HTML5 features enabled. Your creative • Shim/Polyfill:There are many polyfills and shims available for older may fail on a browser if it attempts to use a browsers to emulate HTML5-like. These are usually provided through feature that is not enabled on the browser.
    [Show full text]