DOCSLIB.ORG

An Introduction to Jquery-UI Widget Development

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
An Introduction to Jquery-UI Widget Development Piece by piece An introduction to jQuery-UI widget development Jakob Westhoff <[email protected]> Confoo.ca March 2, 2012 Piece by piece 1 / 55 About Me I More than 10 years of professional PHP Working with experience I More than 7 years of Qafoo professional JavaScript passion for software quality experience I Open source enthusiast I Regular speaker at (inter)national conferences I Consultant, Trainer and Author Piece by piece 2 / 55 About Me I More than 10 years of professional PHP Working with experience I More than 7 years of Qafoo professional JavaScript passion for software quality experience We help people to create I Open source enthusiast high quality web I Regular speaker at applications. (inter)national conferences I Consultant, Trainer and Author Piece by piece 2 / 55 About Me I More than 10 years of professional PHP Working with experience I More than 7 years of Qafoo professional JavaScript passion for software quality experience We help people to create I Open source enthusiast high quality web I Regular speaker at applications. (inter)national conferences I Consultant, Trainer and http://qafoo.com Author Piece by piece 2 / 55 Questions answered today 1. What is jQuery? 2. What is jQuery UI? 3. What features and widgets does jQuery UI provide? 4. In which way can jQuery UI be used to write own widgets? 5. How does the jQuery UI Theme generation/usage work? Piece by piece 5 / 55 What comes next? jQuery Piece by piece 6 / 55 jQuery about itself I Fast and concise JavaScript library I HTML document traversing I Event handling I Animation I AJAX Piece by piece 6 / 55 Working with jQuery $(”.tooltip”).addClass(”highlight”).fadeIn(”slow”); I Document centric I Operates on sets accessed using $ or jQuery I $(css selector).operation I jQuery(css selector).operation I Fluent interface paradigm I operation().operation().operation() Piece by piece 7 / 55 Working with jQuery $(”.tooltip”).addClass(”highlight”).fadeIn(”slow”); I Document centric I Operates on sets accessed using $ or jQuery I $(css selector).operation I jQuery(css selector).operation I Fluent interface paradigm I operation().operation().operation() Piece by piece 7 / 55 What comes next? jQuery-UI Piece by piece 8 / 55 jQuery-UI about itself From the jQuery-UI Website: jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. Piece by piece 8 / 55 jQuery-UI - A short overview I A set of high level widgets I Low level framework to create own Widgets, Behaviors and Effects I Compatible with all major Browsers (thanks to jQuery) I Modular code base between 5-220kb I Fully themeable using a graphical tool: ThemeRoller I Highly extensible I Download: http://jqueryui.com Piece by piece 9 / 55 What comes next? Widgets Piece by piece 10 / 55 Widgets included in jQuery UI I Accordion I Autocomplete I Button I Dialog I Slider I Tabs I Datepicker I Progressbar Piece by piece 10 / 55 Live Demo Live Demo - jQuery UI Widgets Live Demo Next section Piece by piece 11 / 55 Accordion Piece by piece 12 / 55 Accordion Piece by piece 12 / 55 Accordion Piece by piece 12 / 55 Autocomplete Piece by piece 13 / 55 Buttons Piece by piece 14 / 55 Dialog Piece by piece 15 / 55 Slider Piece by piece 16 / 55 Tabs Piece by piece 17 / 55 Datepicker Piece by piece 18 / 55 Progressbar Piece by piece 19 / 55 What comes next? Behaviors Piece by piece 20 / 55 Behaviors included in jQuery UI I Draggable I Droppable I Resizable I Selectable I Sortable Piece by piece 20 / 55 What comes next? Effects Piece by piece 21 / 55 Effects included in jQuery UI I Blind I Bounce I Clip I Drop I Explode I Fold I Highlight I Pulsate I ... Piece by piece 21 / 55 What comes next? Animation Enhancements Piece by piece 22 / 55 Animation Enhancements over default jQuery I Color animations I New easing functions I easeInBounce I easeInQuad I ... I CSS class based animation Piece by piece 22 / 55 What comes next? Calling conventions Piece by piece 23 / 55 Calling conventions I For each widget (behavior) one function is registered I The function can be called on any created jQuery set (jQuery.fn) I The widgets name is used as function name I All interaction with the Widget is accomplished through this function Piece by piece 23 / 55 Calling conventions I Widget creation $(”#id”). autocomplete(); $(”#id”). autocomplete( f ... g ); I Invoking a method without arguments $(”#id”). autocomplete(”method”); I Invoking a method with arguments $(”#id”). autocomplete(”method”, arg1, arg2,...); Piece by piece 24 / 55 Calling conventions I Widget creation $(”#id”). autocomplete(); $(”#id”). autocomplete( f ... g ); I Invoking a method without arguments $(”#id”). autocomplete(”method”); I Invoking a method with arguments $(”#id”). autocomplete(”method”, arg1, arg2,...); Piece by piece 24 / 55 Calling conventions I Widget creation $(”#id”). autocomplete(); $(”#id”). autocomplete( f ... g ); I Invoking a method without arguments $(”#id”). autocomplete(”method”); I Invoking a method with arguments $(”#id”). autocomplete(”method”, arg1, arg2,...); Piece by piece 24 / 55 What comes next? Creating your own Widget Piece by piece 25 / 55 Creating a Widget without jQuery-UI I Widgets usually have a state I Excessive use of .data method I Nested closures and custom objects I Different initialization phases I Handling of default and user options I Multiple public methods I Destruct and remove Widget on request Piece by piece 25 / 55 What comes next? Widget Factory Piece by piece 26 / 55 The Widget factory of jQuery-UI I DOM-Instance based persistent states I ”Magic” methods for different initialization phases I Automatic merging of default and user supplied options I Custom methods without namespace pollution I Distinguish between public and private methods Piece by piece 26 / 55 What comes next? Example Widget Piece by piece 27 / 55 The SparkleBar Widget I A custom made progressbar I Less flexible due to heavy usage of images I More sophisticated graphical design possible Piece by piece 27 / 55 Live Demo Live Demo - SparkleBar Live Demo Piece by piece 28 / 55 Filename conventions I Name of this widget: sparklebar I Namespace of this widget: ui I All widgets should follow a certain filename convention: I jquery.ui.sparklebar.js I jquery.ui.sparklebar.css I jquery.ui.sparklebar/image.png I ... Piece by piece 29 / 55 The widget factory in action I Call $.widget to create a new Widget I First argument: namespace and identifier I Namespaces do not protect against naming conflicts I All default widgets use the ui namespace I Using the ui namespace for your own widgets is just fine Piece by piece 30 / 55 The widget factory in action 1 $.widget( 2 ’ui.sparklebar’, 3 f 4 / ∗ Widget implementation ∗ / 5 g 6 ); Piece by piece 31 / 55 What comes next? Initialization Piece by piece 32 / 55 ”Magic” create method I create function is automatically invoked on widget creation I Only called once for each widget Piece by piece 32 / 55 Access to the targeted element I Targeted element stored in element property I Saved as jQuery set I Other magic properties exist: options, widgetName, widgetEventPrefix Piece by piece 33 / 55 ”Magic” create method 1 $.widget(”ui.sparklebar”, f 2 c r e a t e: function () f 3 4 this .element.empty(); 5 6 $(’ <img /> ’). appendTo( 7 this .element 8 ); 9 10 //... Set needed properties of img... 11 12 g 13 g ); Piece by piece 34 / 55 ”Magic” create method 1 $.widget(”ui.sparklebar”, f 2 c r e a t e: function () f 3 4 this .element.empty(); 5 6 $(’ <img /> ’). appendTo( 7 this .element 8 ); 9 10 //... Set needed properties of img... 11 12 g 13 g ); Piece by piece 34 / 55 ”Magic” create method 1 $.widget(”ui.sparklebar”, f 2 c r e a t e: function () f 3 4 this .element.empty(); 5 6 $(’ <img /> ’). appendTo( 7 this .element 8 ); 9 10 //... Set needed properties of img... 11 12 g 13 g ); Piece by piece 34 / 55 ”Magic” create method 1 $.widget(”ui.sparklebar”, f 2 c r e a t e: function () f 3 4 this .element.empty(); 5 6 $(’ <img /> ’). appendTo( 7 this .element 8 ); 9 10 //... Set needed properties of img... 11 12 g 13 g ); Piece by piece 34 / 55 ”Magic” init method I init is invoked every time the widget function is called without a method name I $("#id").sparklebar() I $("#id").sparklebar(f...g) I Little brother of the create function I Called after create has been called Piece by piece 35 / 55 ”Magic” init method 1 $.widget(”ui.sparklebar”, f 2 i n i t: function () f 3 4 // Set DOM properties based on provided options 5 // Initialize state of the widget 6 7 g 8 g ); Piece by piece 36 / 55 ”Magic” init method 1 $.widget(”ui.sparklebar”, f 2 i n i t: function () f 3 4 // Set DOM properties based on provided options 5 // Initialize state of the widget 6 7 g 8 g ); Piece by piece 36 / 55 ”Magic” init method 1 $.widget(”ui.sparklebar”, f 2 i n i t: function () f 3 4 // Set DOM properties based on provided options 5 // Initialize state of the widget 6 7 g 8 g ); Piece by piece 36 / 55 init and create I Use create to prepare the DOM for the widget I Use init to initialize widget based on options Piece by piece 37 / 55 What comes next? Methods / Properties Piece by piece 38 / 55 Widget methods and properties I Use custom properties and methods to structure your code I Both are defined in the Widget object 1 $.widget( 2 ’ui.sparklebar’, 3 f 4 ’currentValue’: 42 5 ’value’: function () f ..
Load more

Recommended publications
  • Title of Thesis
    Bachelor’s thesis Degree programme in Information Technology 2019 Suman Aryal BOOTSTRAP – A Front-End Framework For Responsive Web Design BACHELOR’S THESIS | ABSTRACT TURKU UNIVERSITY OF APPLIED SCIENCES Degree programme in Information Technology 2019 | 37 Suman Aryal BOOTSTRAP • A Front-End Framework For Responsive Web Design With the rapid advancement of modern technology, web development has been regularly improving on every platform. Variation in the platforms from desktop to tablets and mobiles has rendered web development furthermore challenging. Different screen sizes determine the display and design of the websites. For this reason, the responsive design approach was created to resize the web page based on the screen size of the device. Bootstrap is a web development front-end library for creating responsive websites. Bootstrap with HTML, CSS, and JavaScript helps the web developers as it comes with free sets of tools to build a correctly functioning website. The primary objective of the thesis was to use Bootstrap in a website and check its responsive behavior in various devices with different screen sizes. To achieve this objective, the thesis explains the method of designing a responsive website using Bootstrap. The outcome of the thesis is a fully functioning responsive website. Similarly, this thesis also discusses the development tools used for making the website including the Bootstrap framework. Other similar front-end frameworks are compared with Bootstrap in the thesis. KEYWORDS: Bootstrap, HTML, CSS, JavaScript, Responsive
    [Show full text]
  • Predix Design System Contents
    Predix Design System Contents Predix Design System Overview 1 Create Modern Web Applications 1 About the Predix Design System 6 Application Development with the Predix Design System 7 Supported Browsers for Web Applications 9 Predix Design System Glossary 10 Use the Predix Design System 12 Using the Predix Design System 12 Setting Up the Predix Design System Developer Environment 13 Migrate to Predix Design System Cirrus 15 Migrating to Predix Design System Cirrus 15 New Predix UI Components for Predix Design System Cirrus 17 Deprecated Predix UI Components for Predix Design System Cirrus 18 Predix Design System Cirrus Design Changes 18 Predix Design System Cirrus API Changes 19 Get Started with Predix UI Components 26 About Predix UI Components 26 Getting Started with Predix UI Components 27 Using a Predix UI Component in a Web Application 27 Predix UI Basics 29 Predix UI Templates 30 Predix UI Components 31 Predix UI Datetime Components 33 Predix UI Mobile Components 33 Predix UI Data Visualization Components 34 Predix UI Vis Framework 35 Localize Predix UI Components 39 Localizing Predix UI Components 39 Localizing Text Strings 40 Localizing with the Moments.js Library 41 Localizing with the D3.js Library 44 Custom Locale Support 46 ii Predix Design System Theme Web Applications 51 Theming Web Applications 51 Styling a Predix UI Component 51 Applying a Theme to a Web Application 53 CSS Custom Properties Overview 54 CSS Custom Properties Reference 55 Get Started with Predix UI CSS Modules 56 About Predix UI CSS Modules 56 Getting Started with Predix UI CSS Modules 56 Predix UI CSS Visual Library 59 Predix UI CSS Layout Library 60 Predix UI CSS Utilities Library 61 Predix UI CSS Module Overview 62 Predix Design System Release Notes 66 Predix Design System Release Notes 66 iii Predix Design System Overview Create Modern Web Applications Web applications have evolved to implement many coordinated user functions and tasks traditionally associated with desktop software (for example, Google Docs and Microsoft Office).
    [Show full text]
  • Building Responsive Websites
    HTML5 and CSS3: Building Responsive Websites Design robust, powerful, and above all, modern websites across all manner of devices with ease using HTML5 and CSS3 A course in three modules BIRMINGHAM - MUMBAI HTML5 and CSS3: Building Responsive Websites Copyright © 2016 Packt Publishing All rights reserved. No part of this course may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this course to ensure the accuracy of the information presented. However, the information contained in this course is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this course. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this course by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. Published on: October 2016 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78712-481-3 www.packtpub.com Credits Authors Content Development Editor Thoriq Firdaus Amedh Pohad Ben Frain Benjamin LaGrone Graphics Kirk D’Penha Reviewers Saumya Dwivedi Production Coordinator Deepika Naik Gabriel Hilal Joydip Kanjilal Anirudh Prabhu Taroon Tyagi Esteban S. Abait Christopher Scott Hernandez Mauvis Ledford Sophie Williams Dale Cruse Ed Henderson Rokesh Jankie Preface Responsive web design is an explosive area of growth in modern web development due to the huge volume of different device sizes and resolutions that are now commercially available.
    [Show full text]
  • Always Updated Source: Github Table of Contents Are Clickable UI Graphics
    Always Updated Source: Github Table of contents are clickable UI Graphics ........................................................ 2 Javascript Animation Libraries ...................... 23 Fonts .................................................................. 3 Javascript Chart Libraries .............................. 24 Colors ................................................................ 5 UI Components & Kits ..................................... 24 Icons .................................................................. 8 React UI ........................................................... 27 Logos ............................................................... 10 Vue UI ............................................................... 29 Favicons .......................................................... 11 Angular UI ........................................................ 31 Icon Fonts ........................................................ 11 Svelte UI ........................................................... 32 Stock Photos ................................................... 12 React Native UI ................................................ 32 Stock Videos ................................................... 14 Design Systems & Style Guides ..................... 33 Stock Music & Sound Effects ........................ 15 Online Design Tools ........................................ 35 Vectors & Clip Art ............................................ 15 Downloadable Design Software ..................... 37 Product & Image Mockups
    [Show full text]
  • Responsive Design a Keyhole Software Tutorial
    Responsive Design A Keyhole Software Tutorial Table of Contents What Does Responsive Design Mean? Implementing Responsive Design Mobile First CSS Media Queries Responsive Layout Use a CSS Framework <DIV> not <TABLE> Avoid HTML Pos, Width, Height Type Attributes Responsive UI Layout Frameworks Bootstrap.js - Turning Mere Developers Into UI Geniuses GUI Libraries Responsive UI Design Decisions Limit Data Entry Dialogs Apply Touchable Controls Design Vertically Think About Navigation Summary References About The Author About Keyhole Software Related Services Snapshot For More Information Page 2 of 16 Tel 877-521-7769 https:/keyholesoftware.com ​ Copyright © 2016 Keyhole Software Responsive Design A Keyhole Software Tutorial This tutorial covers: ● Responsive design in the enterprise ● Mobile first or one-size-fits-all ● How responsive design works ● Responsive design frameworks ● Bootstrap.js, a responsive design framework ● ResponsiveUI layout ideas Enterprises are feeling the pressure of the need to develop applications that allow users to use their own devices to access enterprise applications. Most devices will have a browser application, just like a desktop device, so current web applications are accessible without doing anything but providing connectivity to the corporate network. However, odds are that these “built-for-desktop” browser applications will not be fully useable, especially if any kind of data entry is required. Why, are they unusable? Because the screen sizes differ so much, and even though the application will run in a mobile browser, the user will constantly be scrolling and expanding trying to comprehend, navigate, and interact with the application. Not to mention, they are not built for mobile touch screen interfaces as they assume a standard keyboard.
    [Show full text]
  • Project Instructions
    Web Development with JavaScript and DOM, Spring 2017 Project Instructions Project Instructions Introduction These instructions will guide you on your quest to create a simple website where a user can play a single player dice game. The game consists of four dice, and the user should guess the sum of the first three dice before throwing them all. If the user's guess turned out to be lower than or equal to the sum of the first three dice, his score should be incremented by the guessed number multiplied by the fourth dice. This should be repeated 10 times, after which the game is over. To implement the game, you will use: • HTML to create the graphical components the browser should render. • CSS to tell the browser how to render the graphical components. • JavaScript to implement the game logic. • JavaScript and DOM to catch the user's interaction with the graphical components. • JavaScript and DOM to update the graphical components to reflect the current state of the game. Your website should also be connected to a server provided by us. Through it, users should be able to: • Create a new account. • Sign in to an existing account. • Sign out from an account (requires the user to be signed in). • Add a high score to an account (requires the user to be signed in; the game should be playable for anonymous users). • Get the top 10 high scores across all accounts (requires the user to be signed in). • Get all high scores for a specific account (the one the user is signed in to; requires the user to be signed in).
    [Show full text]
  • Bootstrap-Modal-Mvc-Partial-View-Example.Pdf
    Bootstrap Modal Mvc Partial View Example usuallyIs Wolfgang scandalising unspoilt spiritosowhen Berk or encumbersassuring illiterately competitively? when acock Particularized Gordie cane or beneficed, dominantly Sidnee and autumnally. never bowdlerises any enantiotropy! Fritz Delete modal updating Updating the Delete ModalUpdating the Delete Modal lists. Here provided a concept of sample code I am using bootstrap modal to separate the modal popup 1 2 3 4 5 var. How about Display Ajax Response In Html Table. Describes how to exert the Bootstrap Native library simply remove. SOLVED Showing a partial view whereas a modal popup C. NET Identity net core mvc loginlogout and registration example without identity or. Devexpress modal dialog. APICaller return PartialViewCustomerOrderDashboardList order. Adding the Partial View e controller is wired to pass the single notification to a. Bootstrap Modal Form Validation Example Sensible Dev. See here down list of answers 15 public who Answer either set 16 17. Html content many more step of the mvc bootstrap window in the model binding works, we must delete? Jan 17 2016 In this tutorial we tend see how you submit form using bootstrap. Sometimes everybody really helps to see code in context Want to truck the. How to enrol an expense manager using Entity Framework. Most alter the times ASPNET MVC views are rendered as a result of user navigating to next action in example image a user navigates to. Render MVC partial view inside bootstrap modal dialog 1 We deny to patch a modal container in the check layout page 2 Now children need please add. Net jQuery jQuery Plugins Entity Framework MVC Partial View Jul 0 2015.
    [Show full text]
  • Thank You for Buying Responsive Web Design by Example Beginner's Guide
    www.it-ebooks.info Responsive Web Design by Example Beginner's Guide Discover how you can easily create engaging, responsive websites with minimum hassle! Thoriq Firdaus BIRMINGHAM - MUMBAI www.it-ebooks.info Responsive Web Design by Example Beginner's Guide Copyright © 2013 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: March 2013 Production Reference: 1140313 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84969-542-8 www.packtpub.com Cover Image by Arief Bahari ([email protected]) www.it-ebooks.info Credits Author Copy Editors Thoriq Firdaus Brandt D'Mello Insiya Morbiwala Reviewers Alfida Paiva Kevin M. Kelly Ruta Waghmare Shawn McBurnie Volkan Özçelik Project Coordinator Chad Adams Amey Sawant Abhishek Bhardwaj Proofreaders Acquisition Editor Lynda Sliwoski Erol Staveley Maria Gould Lead Technical Editor Indexer Neeshma Ramakrishnan Rekha Nair Technical Editors Production Coordinator Prasad Dalvi Nilesh R.
    [Show full text]
  • The Little Book of HTML/CSS Frameworks
    The Little Book of HTML/CSS Frameworks Jens Oliver Meiert ISBN: 978-1-491-92016-9 Foreword by Eric A. Meyer, author of CSS: The Definitive Guide Additional Resources 3 Easy Ways to Learn More and Stay Current Radar Blog Read more news and analysis about JavaScript, HTML5, CSS3, and other web platform technologies. radar.oreilly.com Web Newsletter Get web development-related news and content delivered weekly to your inbox. oreilly.com/web-platform/newsletter Fluent Conference Immerse yourself in learning at the annual O’Reilly Fluent Conference. Join developers, UX/UI designers, project teams, and a wide range of other people who work with web platform technologies to share experiences and expertise— and to learn what you need to know to stay competitive. fluentconf.com ©2014 O’Reilly Media, Inc. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. 14114 The Little Book of HTML/CSS Frameworks Jens Oliver Meiert The Little Book of HTML/CSS Frameworks by Jens Oliver Meiert Copyright © 2015 Jens Oliver Meiert. 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://safaribooksonline.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected]. Editor: Meg Foley Interior Designer: David Futato Production Editor: Kristen Brown Cover Designer: Karen Montgomery Copyeditor: Amanda Kersey Illustrator: Rebecca Demarest March 2015: First Edition Revision History for the First Edition 2015-02-25: First Release See http://oreilly.com/catalog/errata.csp?isbn=9781491920169 for release details.
    [Show full text]
  • Review of Different Responsive Css Front-End Frameworks
    Volume 5, No. 11, November 2014 Journal of Global Research in Computer Science REVIEW ARTICLE Available Online at www.jgrcs.info REVIEW OF DIFFERENT RESPONSIVE CSS FRONT-END FRAMEWORKS Nilesh Jain Lecturer, Mandsaur Institute of Technology,Mandsaur Abstract: In this article we have compare different responsive CSS frameworks and found that Bootstrap having more flexibility and more stability. Bootstrap framework is actively maintained by the community. INTRODUCTION a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the Responsive design is an approach to web page creation that development of websites, as a basis to start building a site. makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is FRONT-END FRAMEWORKS (OR CSS to build web pages that detect the visitor’s screen size and FRAMEWORKS) orientation and change the layout accordingly. Frontend frameworks usually consist of a package made up Responsive design is a somewhat retro approach to web site of a structure of files and folders of standardized code design that solves a lot of design problems caused by the (HTML, CSS, JS documents etc.) proliferation of new types of mobile devices. Responsive design pages use x and y coordinates on a grid for layout The usual components are: and mathematical percentages for images instead of fixed- width parameters. Using percentages instead of fixed-width CSS source code to create a grid: this allows the parameters and a grid layout creates a more fluid layout that developer to position the different elements that will resize itself to fit the size of the display.
    [Show full text]
  • Bootstrap Ebook, Epub
    BOOTSTRAP PDF, EPUB, EBOOK Jake Spurlock | 128 pages | 20 Jun 2013 | O'Reilly Media, Inc, USA | 9781449343910 | English | Sebastopol, United States Bootstrap PDF Book Copyright by Refsnes Data. First Known Use of bootstrap Noun , in the meaning defined at sense 1 Adjective , in the meaning defined at sense 1 Verb , in the meaning defined above. Entry 1 of 3 1 : a looped strap sewed at the side or the rear top of a boot to help in pulling it on 2 bootstraps plural : unaided efforts — often used in the phrase by one's own bootstraps bootstrap. Comments on bootstrap What made you want to look up bootstrap? According to Twitter developer Mark Otto:. While the latter always fills the width of the web page, the former uses one of the four predefined fixed widths, depending on the size of the screen showing the page:. Is Singular 'They' a Better Choice? Views Read Edit View history. Download as PDF Printable version. If you require IE support, use Bootstrap 3. Free and open-source software portal. We're intent on clearing it up 'Nip it in the butt' or 'Nip it in the bud'? Forgot password? W3Schools is optimized for learning and training. Wikimedia Commons has media related to Bootstrap framework. Time Traveler for bootstrap The first known use of bootstrap was in See more words from the same year. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. It contains CSS - and optionally JavaScript -based design templates for typography , forms , buttons , navigation , and other interface components.
    [Show full text]
  • Web-Based Wireless Sensor Network Platform
    WEB-BASED WIRELESS SENSOR NETWORK PLATFORM Pérez Cano, José Antonio Academic course 2014-2015 Supervisor: Gabriel Martins BACHELOR’S DEGREE IN AUDIOVISUAL SYSTEMS ENGINEERING Final Degree Project GRAU EN ENGINYERIA EN xxxxxxxxxxxx WEB-BASED WIRELESS SENSOR NETWORK PLATFORM José Antonio Pérez Cano FINAL DEGREE PROJECT Bachelor’s degree in Audiovisual Systems Engineering Polytechnic School – Pompeu Fabra University 2015 Supervisor Gabriel Martins Dias Dedicado a mi familia y amigos. iii Acknowledgement I would like to specially thank my family and friends for supporting me during these recent years of my life, and my supervisors, Toni Adame and Gabriel Martins, for helping me in the development of this project. v Abstract The aim of this project is to design and implement a web-based platform for storing and visualizing the data retrieved by Wireless Sensor Networks (WSNs). This approach is part of the Entomatic project, an European Union (EU) funded plan for addressing a major problem faced by EU Associations of Olive growing Small and Medium-sized Enterprises (SMEs): the Olive fruit fly (Bactrocera oleae). Olive oil trees will feature a series of sensors, mainly consisting of olive fly traps as a way to track its population. Such sensors will output data through a gateway to be finally gathered by the platform proposed in this document. The system presented in this project consists of two parts: (1) a web-server that receives the sensed data and stores them in a database; and (2) a web-application for visualizing the obtained measurements including, among others, map node location, statistics, and charts. Cutting edge web technologies have been used in order to create a modern, yet maintainable and scalable platform.
    [Show full text]