(http://jqueryui.com) François Agneray. Octobre 2012

Size: px
Start display at page:

Download "(http://jqueryui.com) François Agneray. Octobre 2012"

Transcription

1 (http://jqueryui.com) François Agneray Octobre 2012

2 plan jquery UI est une surcouche de jquery qui propose des outils pour créer des interfaces graphiques interactives. Ses fonctionnalités se divisent en différentes catégories : Interactions Donner des propriétés à des éléments HTML => drag, drop, resize,... Widgets Objets "clé en main " qui proposent des fonctionnalités de haut niveau => Accordion, Tabs, Dialog, DatePicker...

3 Interactions Interaction: draggable 1. Inclure les bibliothèques 1 <html> <head> <title>test jquery</title> 2. Inclure le style CSS ( <script type="text/javascript" src="jquery/js/jquery.js"> <script type="text/javascript" src="jquery/js/jquery-ui.js"> <form action="traite_form.php"> <input type="text" name="date"> </form>

4 Interactions Interaction: draggable 1. Inclure les bibliothèques 2. Inclure le style CSS 1 2 <html> <head> <title>test jquery</title>. Inclure le style CSS ( <script type="text/javascript" src="jquery/js/jquery.js"> <script type="text/javascript" src="jquery/js/jquery-ui.js"> <link type="text/css" href="jquery/css/ui-lightness/jquery-ui custom.css" rel="stylesheet">

5 Interactions Interaction draggable 1 <html> <head> <title>test jquery</title> <script type="text/javascript" src="jquery/js/jquery.js"> <script type="text/javascript" src="jquery/js/jquery-ui.js"> 1. Inclure les bibliothèques 2. Inclure le style CSS. Définir un attribut id pour le champ cible. Inclure le style CS 2 <link type="text/css" href="jquery/css/ui-lightness/jquery-ui custom.css" rel="stylesheet"> <div id= "objdrag" > <p>déplace moi</p></div>

6 Interactions Interaction: draggable 1 <html> <head> <title>test jquery</title> <script type="text/javascript" src="jquery/js/jquery.js"> <script type="text/javascript" src="jquery/js/jquery-ui.js"> 1. Inclure les bibliothèques 2. Inclure le style CSS. Définir un attribut id pour le champ cible. Associer la fonction draggable 2 <link type="text/css" href="jquery/css/ui-lightness/jquery-ui custom.css" rel="stylesheet"> $("#objdrag").draggable(); <div id= "objdrag" > <p>déplace moi</p></div>

7 Interactions Interaction: resizable... $("#objet").draggable(); $("#objet").resizable(); <div id= "objet" > <p>resize & Drag</p></div>

8 Interactions Interaction: selectable 2 <style> #selection.ui-selected {background: grey; color: white;} #selection {list-style-type: none;} </style> $("#selection").selectable(); <ul id="selection"> <li class="ui-widget-content"> item 1</li> <li class="ui-widget-content"> item 2</li> <li class="ui-widget-content"> item </li> </ul>

9 Widget tooltip... $(document). tooltip (); Test de <a href="#" title="blabla info bulle">l'info bulle</a>

10 Widget Accordion $("#accordeon").accordion(); }) <div id="accordeon"> <h>section 1</h><div><p>bla bla bla bla section 1</p></div> <h>section 2</h><div><p>bla bla bla bla section 2</p> </div> <h>section </h><div><p>bla bla bla bla section </p></div> <h>section </h><div><p>bla bla bla bla section </p></div> </div>

11 Widget Tabs $("#onglets").tabs(); }) <div id="onglets"> <ul> <li><a href="#onglet1">onglet 1</a></li> <li><a href="#onglet2">onglet 2</a></li> <li><a href="#onglet">onglet </a></li> </ul> <div id="onglet1">blablabla section 1</div> <div id="onglet2">blablabla section 2</div> <div id="onglet">blablabla section </div> </div>

12 Widget Dialog $("#dialogue").dialog(); }) <div id="dialogue" title="basic dialog"> <p>boîte de dialogue</p> </div>

13 Widget DatePicker... $("#date1").datepicker(); Saisir une date: <input type="text" name="date" id="date1" >

14 Widget DatePicker... $("#date1").datepicker({ dateformat: "yy-mm-dd", altfield: "#Altdate", altformat: "DD, d MM, yy" Saisir une date: <input type="text" name="date" id="date1" > => <input type="text" id="altdate" size=0>

15 Widget DatePicker... $("#date1").datepicker({ dateformat: "yy-mm-dd", altfield: "#Altdate", altformat: "DD, d MM, yy", showon: "button", buttonimage: "IMG/calendar.jpeg", buttonimageonly: true Saisir une date: <input type="text" name="date" id="date1" > => <input type="text" id="altdate" size=0>

16 Widget slider... $("#monslider"). slider ({ min: 0, max: 10, value : 0, slide: function(event, ui){$("#variation").html(ui.value);} <b>variation</b> [ <span id="variation"> 0 </span> ] <div id="monslider"></div>

17 Widget Button... $("#radio"). buttonset (); <form> <div id="radio"> <input type="radio" id="radio1" name="btn-radio" checked><label for="radio1"> Radio 1</label> <input type="radio" id="radio2" name="btn-radio"><label for="radio2"> Radio 2</label> <input type="radio" id="radio" name="btn-radio"><label for="radio"> Radio </label> </div> </form>

18 Widget Menu... $("#monmenu"). menu ({ select: function( event, ui ) { }... var link = ui.item.children( "a:first" ); if ( link.attr( "target" ) event.metakey event.shiftkey event.ctrlkey ) {return;} location.href = link.attr( "href" ); <ul id="monmenu"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li> <a href="#">item </a> <ul> <li><a href="#">item -1</a></li> <li><a href="#">item -2</a></li> <li><a href="#">item -</a></li> </ul> </li> </ul>

Web - Travaux Pratiques 1

Web - Travaux Pratiques 1 Web - Travaux Pratiques 1 Pour rappel, le squelette d une page HTML5 est la suivante : Syntaxe ... ... Une fois qu une page est terminée,

More information

OPENTABLE GROUP SEARCH MODULE GETTING STARTED ADD RESERVATIONS TO YOUR WEBSITE

OPENTABLE GROUP SEARCH MODULE GETTING STARTED ADD RESERVATIONS TO YOUR WEBSITE ADD RESERVATIONS TO YOUR WEBSITE OPENTABLE GROUP SEARCH MODULE The group search module allows users to select a specific restaurant location from a list and search tables at that location. The code below

More information

Intro to jquery. Web Systems 02/17/2012

Intro to jquery. Web Systems 02/17/2012 Intro to jquery Web Systems 02/17/2012 What is jquery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event handling, animations, and

More information

CLASSROOM WEB DESIGNING COURSE

CLASSROOM WEB DESIGNING COURSE About Web Trainings Academy CLASSROOM WEB DESIGNING COURSE Web Trainings Academy is the Top institutes in Hyderabad for Web Technologies established in 2007 and managed by ITinfo Group (Our Registered

More information

SizmekAdFeature. Maps HTML5BuildGuide

SizmekAdFeature. Maps HTML5BuildGuide AdFeature Maps HTML5BuildGuide Table of Contents Overview... 2 Supported Platforms... 2 Demos/Downloads... 2 Known Issues... 2 Included Files... 4 Implementing the Ad Feature... 5 Configuring the HTML5

More information

A7 CSS Review Reviewing examples of all the CSS learned throughout the semester

A7 CSS Review Reviewing examples of all the CSS learned throughout the semester GRC 175 A7 A7 CSS Review Reviewing examples of all the CSS learned throughout the semester Tasks: 1. Please first read CSS tutorial http://multimedia.journalism.berkeley.edu/tutorials/css-intro/printfriendly/

More information

Software API guide (EN) Manuale dei componenti software API (EN) Pag. 1 di 11

Software API guide (EN) Manuale dei componenti software API (EN) Pag. 1 di 11 Sftware API guide (EN) Manuale dei cmpnenti sftware API (EN) Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, 10-40129 Blgna e-mail pendata@cmune.blgna.it

More information

Alloy UI with Liferay Part 1

Alloy UI with Liferay Part 1 Alloy UI with Liferay Part 1 By Mohib Mansuri contact@attuneuniversity.com www.attuneuniversity.com About Author Mohib Mansuri Liferay Magento Drupal Over 3+ years of hands on experience in Liferay Portal

More information

Modifier le texte d'un élément d'un feuillet, en le spécifiant par son numéro d'index:

Modifier le texte d'un élément d'un feuillet, en le spécifiant par son numéro d'index: Bezier Curve Une courbe de "Bézier" (fondé sur "drawing object"). select polygon 1 of page 1 of layout "Feuillet 1" of document 1 set class of selection to Bezier curve select Bezier curve 1 of page 1

More information

Créer une carte. QGIS Tutorials and Tips. Author. Ujaval Gandhi http://google.com/+ujavalgandhi. Translations by

Créer une carte. QGIS Tutorials and Tips. Author. Ujaval Gandhi http://google.com/+ujavalgandhi. Translations by Créer une carte QGIS Tutorials and Tips Author Ujaval Gandhi http://google.com/+ujavalgandhi Translations by Sylvain Dorey Allan Stockman Delphine Petit Alexis Athlani Florian Texier Quentin Paternoster

More information

CST 150 Web Design I CSS Review - In-Class Lab

CST 150 Web Design I CSS Review - In-Class Lab CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and

More information

Using Spry Widgets. In This Chapter

Using Spry Widgets. In This Chapter B2 Using Spry Widgets One foundation of Web 2.0 is widespread user interactivity enabled by extensive use of CSS and JavaScript. This allows applications that run inside a Web browser to offer the kind

More information

Introduction to Adobe Photoshop. Introduction to HTML. Intermediate HTML. Advanced HTML & HTML5

Introduction to Adobe Photoshop. Introduction to HTML. Intermediate HTML. Advanced HTML & HTML5 Introduction to Adobe Photoshop Section Intro: The 80/20 Rule, Photoshop Basics, and More Creating a New Photoshop Document Photoshop Environment: The Toolbar - Part 1 Photoshop Environment: The Toolbar

More information

WELCOME TO CORNERSTONE ONDEMAND LMS FUNCTIONALITY TRAINING

WELCOME TO CORNERSTONE ONDEMAND LMS FUNCTIONALITY TRAINING Slide 1 WELCOME TO CORNERSTONE ONDEMAND LMS FUNCTIONALITY TRAINING UI Maintenance: How To Edit The Interface, The Navigation And Custom Pages Slide 2 OBJECTIVES At the end of this session, you should be

More information

There are a lot of alternative JavaScript frameworks E.g.

There are a lot of alternative JavaScript frameworks E.g. There are a lot of alternative JavaScript frameworks E.g. Google Web Toolkit Ember.js Backbone.js Angular.js React Joe Mertz - Distributed Application Development 2 All frameworks have: Varying capabilities

More information

JTouch Mobile Extension for Joomla! User Guide

JTouch Mobile Extension for Joomla! User Guide JTouch Mobile Extension for Joomla! User Guide A Mobilization Plugin & Touch Friendly Template for Joomla! 2.5 Author: Huy Nguyen Co- Author: John Nguyen ABSTRACT The JTouch Mobile extension was developed

More information

Introduction to web development and JavaScript

Introduction to web development and JavaScript Objectives Chapter 1 Introduction to web development and JavaScript Applied Load a web page from the Internet or an intranet into a web browser. View the source code for a web page in a web browser. Knowledge

More information

Rich User Interfaces for Web-Based Corporate Applications

Rich User Interfaces for Web-Based Corporate Applications Rich User Interfaces for Web-Based Corporate Applications Ivan Zapevalov, Software Engineer 1 Outline RIA technologies AJAX technology Widgets Demo application in JavaScript Demo application in GWT Web-catalog

More information

jquery Sliding Image Gallery

jquery Sliding Image Gallery jquery Sliding Image Gallery Copyright 2011 FlashBlue Website : http://www.flashdo.com Email: flashblue80@hotmail.com Twitter: http://twitter.com/flashblue80 Directories source - Original source files

More information

SmartTouch R CRM Enhancements. 1. Administrators now have an Account Preferences Section where you can view emails & phones in search views.

SmartTouch R CRM Enhancements. 1. Administrators now have an Account Preferences Section where you can view emails & phones in search views. SmartTouch R CRM Enhancements 1. Administrators now have an Account Preferences Section where you can view emails & phones in search views. You now have the option to view Email Address and/or Phone Number

More information

C:\Users\Micha\Documents\drupal 7 module\improved_multi_select-7.x-2.x-dev.tar\improved_multi_select-7.x-2.x-dev\improved_multi_sel

C:\Users\Micha\Documents\drupal 7 module\improved_multi_select-7.x-2.x-dev.tar\improved_multi_select-7.x-2.x-dev\improved_multi_sel 1 (function ($) { 2 Drupal.behaviors.improved_multi_select = { 3 attach: function(context, settings) { 4 if (settings.improved_multi_select && settings.improved_multi_select. selectors) { 5 var options

More information

DREAMWEAVER CS5.5: USING STYLE SHEETS

DREAMWEAVER CS5.5: USING STYLE SHEETS Medical Library/Department of Information & Communication Sciences WHAT ARE STYLE SHEETS? DREAMWEAVER CS5.5: USING STYLE SHEETS Style sheets are collections of rules that define the styles of a document.

More information

HTML5 & Friends. And How They Change A Developer s Life

HTML5 & Friends. And How They Change A Developer s Life HTML5 & Friends And How They Change A Developer s Life Yang Piao yp@cmu.edu 2 HTML5? 3 What is HTML5 The markup language 5 th major version of HTML successor of HTML 4.01 Or a set of cutting-edge web technologies

More information

Using Adobe Dreamweaver CS4 (10.0)

Using Adobe Dreamweaver CS4 (10.0) Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called

More information

<Insert Picture Here> Oracle Application Express: Mobile User Interfaces Marc Sewtz Senior Software Development Manager Oracle Application Express Oracle USA Inc. 520 Madison Avenue,

More information

The jquery UI CSS Framework & ThemeRoller An in-depth overview of theming and design in jquery UI.

The jquery UI CSS Framework & ThemeRoller An in-depth overview of theming and design in jquery UI. The jquery UI CSS Framework & ThemeRoller An in-depth overview of theming and design in jquery UI. Todd Parker & Scott Jehl hello. Todd Parker Scott Jehl A Boston-based design firm specializing in complex

More information

Subject Tool Remarks What is JQuery. Slide Javascript Library

Subject Tool Remarks What is JQuery. Slide Javascript Library Subject Tool Remarks What is JQuery Slide Javascript Library Picture John Resig Tool for Searching the DOM (Document Object Model) Created by John Resig Superstar Very Small (12k) Browser Independent Not

More information

Over mij. 17 jaar 17 jaar 2 jaar. 1 week

Over mij. 17 jaar 17 jaar 2 jaar. 1 week Oracle Application Express & Christian Rokitta.nl OGh APEX Dag 26 Maart 2012 1 2 Over mij 17 jaar 17 jaar 2 jaar 1 week Agenda Waarom Waarom mobile website (vs native App)? HTML APEX Kosten voor mobile

More information

PROJECT 2. Development of Internet Applications

PROJECT 2. Development of Internet Applications PROJECT 2 Development of Internet Applications Description of available elements within specification Specification of basic construction elements of the project is delivered as a project in Visual Studio.

More information

Peers Technologies Pvt. Ltd. Web Application Development

Peers Technologies Pvt. Ltd. Web Application Development Page 1 Peers Technologies Pvt. Ltd. Course Brochure Web Application Development Overview To make you ready to develop a web site / web application using the latest client side web technologies and web

More information

Technical Service Bulletin

Technical Service Bulletin Technical Service Bulletin FILE CONTROL CREATED DATE MODIFIED DATE FOLDER OpenDrive 02/05/2005 662-02-25008 Rev. : A Installation Licence SCO sur PC de remplacement English version follows. Lors du changement

More information

HTML Tags For Amazon DTP

HTML Tags For Amazon DTP 1 of 5 1/11/2011 2:55 PM s For Amazon DTP Custom s Attributes Values Description Forces a page break. Formats enclosed text as "not underlined." (Overres

More information

Chrysa Papazoglou IT Services. Part I: Intro & Terminology Chrysa Papazoglou

Chrysa Papazoglou IT Services. Part I: Intro & Terminology Chrysa Papazoglou Chrysa Papazoglou IT Services Part I: Intro & Terminology Chrysa Papazoglou Part I - Outline 1. Basic concepts & Terminology 2. Developer tools 3. Guidelines for mobile websites 4. Developing a mobile

More information

COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA

COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA ADOBE DREAMWEAVER AUTHORING TOOL DTM 3612 SEMESTER 1 SESI 2010/2011 DTM 3612 ADOBE DREAMWEAVER AUTHORING

More information

Cours de Java. Sciences-U Lyon. Java - Introduction Java - Fondamentaux Java Avancé. http://www.rzo.free.fr

Cours de Java. Sciences-U Lyon. Java - Introduction Java - Fondamentaux Java Avancé. http://www.rzo.free.fr Cours de Java Sciences-U Lyon Java - Introduction Java - Fondamentaux Java Avancé http://www.rzo.free.fr Pierre PARREND 1 Octobre 2004 Sommaire Java Introduction Java Fondamentaux Java Avancé GUI Graphical

More information

Form Management Admin Guide

Form Management Admin Guide Form Management Admin Guide Getting around the navigation Model Management (Admin/Technical). Create, edit and manage the basic template of content models. Form Builder - Lets you create properties in

More information

ios App Development Using Cordova

ios App Development Using Cordova ios App Development Using Cordova Created by Todd Treece Last updated on 2015-06-29 08:20:06 AM EDT Guide Contents Guide Contents Overview Installing Dependencies Creating a New App index.html index.css

More information

Personnalisez votre intérieur avec les revêtements imprimés ALYOS design

Personnalisez votre intérieur avec les revêtements imprimés ALYOS design Plafond tendu à froid ALYOS technology ALYOS technology vous propose un ensemble de solutions techniques pour vos intérieurs. Spécialiste dans le domaine du plafond tendu, nous avons conçu et développé

More information

Mobile Web Applications using HTML5. L. Cotfas 14 Dec. 2011

Mobile Web Applications using HTML5. L. Cotfas 14 Dec. 2011 Mobile Web Applications using HTML5 L. Cotfas 14 Dec. 2011 Reasons for mobile web development Many different platforms: Android, IPhone, Symbian, Windows Phone/ Mobile, MeeGo (only a few of them) Reasons

More information

SEO Content Writing Guide

SEO Content Writing Guide A Guideline for Creating Content to Achieve Higher Search Engine Ranking By Steve Wiideman Search Engine Optimization Expert Contents Writing Content in Wordpress... 3 Questions for the Designer... 3 Wordpress

More information

Vanilla Forums Theme Guide Version 1.3

Vanilla Forums Theme Guide Version 1.3 1 Topics Covered Introduction Tool Box Choosing Your Theme Homepage Layout Homepage Layouts Customize HTML Basic HTML layout Understanding HTML Layout Breaking down and customizing the code The HTML head

More information

Sun Management Center 3.6 Version 5 Add-On Software Release Notes

Sun Management Center 3.6 Version 5 Add-On Software Release Notes Sun Management Center 3.6 Version 5 Add-On Software Release Notes For Sun Fire, Sun Blade, Netra, and Sun Ultra Systems Sun Microsystems, Inc. www.sun.com Part No. 819-7977-10 October 2006, Revision A

More information

HTML5 Cloud Dashboard Designer Offline Documentation

HTML5 Cloud Dashboard Designer Offline Documentation HTML5 Cloud Dashboard Designer Offline Documentation How To Videos The Essentials Tour of Dashboard Designer's UI Preview your Dashboard Sharing your Dashboard Saving/Updating your Dashboard Theming your

More information

CSS3 Horizontal Accordion Slider

CSS3 Horizontal Accordion Slider CSS3 Horizontal Accordion Slider DOCUMENTATION Webarti October 2, 2010 Table of Contents 1. Introduction.......3 1.1. Description and Features....3 2. Documentation...3 2.1. File Content.............3

More information

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file. Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded

More information

Installing and Sending with DocuSign for NetSuite v2.2

Installing and Sending with DocuSign for NetSuite v2.2 DocuSign Quick Start Guide Installing and Sending with DocuSign for NetSuite v2.2 This guide provides information on installing and sending documents for signature with DocuSign for NetSuite. It also includes

More information

Liste d'adresses URL

Liste d'adresses URL Liste de sites Internet concernés dans l' étude Le 25/02/2014 Information à propos de contrefacon.fr Le site Internet https://www.contrefacon.fr/ permet de vérifier dans une base de donnée de plus d' 1

More information

.NET Best Practices Part 1 Master Pages Setup. Version 2.0

.NET Best Practices Part 1 Master Pages Setup. Version 2.0 .NET Best Practices Part 1 Master Pages Setup Version 2.0 2014 CrownPeak Technology, Inc. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any means, electronic

More information

Dreamweaver CS5. Module 2: Website Modification

Dreamweaver CS5. Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Last revised: October 31, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland,

More information

Tutorial JavaScript: Switching panels using a radio button

Tutorial JavaScript: Switching panels using a radio button Tutorial JavaScript: Switching panels using a radio button www.nintex.com support@nintex.com Contents About this tutorial... 3 Upload the JavaScript File... 4 Using JavaScript to hide or show a control

More information

Chapter 1 Introduction to web development and PHP

Chapter 1 Introduction to web development and PHP Chapter 1 Introduction to web development and PHP Murach's PHP and MySQL, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Use the XAMPP control panel to start or stop Apache or MySQL

More information

Tutorial: Building a Dojo Application using IBM Rational Application Developer Loan Payment Calculator

Tutorial: Building a Dojo Application using IBM Rational Application Developer Loan Payment Calculator Tutorial: Building a Dojo Application using IBM Rational Application Developer Loan Payment Calculator Written by: Chris Jaun (cmjaun@us.ibm.com) Sudha Piddaparti (sudhap@us.ibm.com) Objective In this

More information

UComment. UComment is a comment component for Umbraco, it makes it very easy to add comment functionality to any Umbraco content document you wish.

UComment. UComment is a comment component for Umbraco, it makes it very easy to add comment functionality to any Umbraco content document you wish. UComment UComment is a comment component for Umbraco, it makes it very easy to add comment functionality to any Umbraco content document you wish. Contents Installation... 3 Setup... 4 Prerequisites...

More information

Coding Standards for Web Development

Coding Standards for Web Development DotNetDaily.net Coding Standards for Web Development This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and distribute this document for any noncommercial purpose as

More information

Dynamic Input Settings

Dynamic Input Settings DSETTINGS Type DSETTINGS DS SE Pointer Input Dynamic Input Settings You can configure dynamic input to meet your personal, school, or company standards. Dynamic input settings appear on the Dynamic Input

More information

The Smart Forms Web Part allows you to quickly add new forms to SharePoint pages, here s how:

The Smart Forms Web Part allows you to quickly add new forms to SharePoint pages, here s how: User Manual First of all, congratulations on being a person of high standards and fine tastes! The Kintivo Forms web part is loaded with features which provide you with a super easy to use, yet very powerful

More information

The resulting HTML page, with colors and layout, all done with CSS.

The resulting HTML page, with colors and layout, all done with CSS. CSS TUTORIAL STARTING WITH HTML + CSS REVIEW/TUTORIAL 1. The HTML 2. Adding color 3. Adding fonts 4. A navigation bar 5. Styling links 6. Horizontal line 7. External CSS Further reading This short tutorial

More information

Maximizing the Use of Slide Masters to Make Global Changes in PowerPoint

Maximizing the Use of Slide Masters to Make Global Changes in PowerPoint Maximizing the Use of Slide Masters to Make Global Changes in PowerPoint This document provides instructions for using slide masters in Microsoft PowerPoint. Slide masters allow you to make a change just

More information

CSS : petits compléments

CSS : petits compléments CSS : petits compléments Université Lille 1 Technologies du Web CSS : les sélecteurs 1 au programme... 1 ::before et ::after 2 compteurs 3 media queries 4 transformations et transitions Université Lille

More information

PDF Web Form. Projects 1

PDF Web Form. Projects 1 Projects 1 In this project, you ll create a PDF form that can be used to collect user data online. In this exercise, you ll learn how to: Design a layout for a functional form. Add form fields and set

More information

jquery Tutorial for Beginners: Nothing But the Goods

jquery Tutorial for Beginners: Nothing But the Goods jquery Tutorial for Beginners: Nothing But the Goods Not too long ago I wrote an article for Six Revisions called Getting Started with jquery that covered some important things (concept-wise) that beginning

More information

CHAPTER 3: DESIGNING A WEB PAGE WITH CSS CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)

CHAPTER 3: DESIGNING A WEB PAGE WITH CSS CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY) CHAPTER 3: DESIGNING A WEB PAGE WITH CSS OVERVIEW Applying Style to Elements Based on ID and Class Styling Web Page Text Styling Lists Styling Tables Styling Forms Psuedo Classes and Elements APPLYING

More information

Client side Development withtml5, CSS3 and JavaScript (FT100)

Client side Development withtml5, CSS3 and JavaScript (FT100) Client side Development withtml5, CSS3 and JavaScript (FT100) 40 Hours Outline HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current

More information

Figure 1 responsive grid system for all view ports, from desktops, tablets and smart phones

Figure 1 responsive grid system for all view ports, from desktops, tablets and smart phones Pimp your SharePoint with Uihiro our front-end framework for developing responsive, on-prem, hybrid, pure Office 365 and mobile ready projects. Our theming engine provides a rich repeatable design experience

More information

Developer Tutorial Version 1. 0 February 2015

Developer Tutorial Version 1. 0 February 2015 Developer Tutorial Version 1. 0 Contents Introduction... 3 What is the Mapzania SDK?... 3 Features of Mapzania SDK... 4 Mapzania Applications... 5 Architecture... 6 Front-end application components...

More information

Site.com Workbook. Version 1: Summer 14. Last updated: July 4, 2014

Site.com Workbook. Version 1: Summer 14. Last updated: July 4, 2014 Version 1: Summer 14 Site.com Workbook Last updated: July 4, 2014 Copyright 2000 2014 salesforce.com, inc. All rights reserved. Salesforce.com is a registered trademark of salesforce.com, inc., as are

More information

Nanacast.com Manual for Creating Buttons, Forms, Links and Coupon boxes.

Nanacast.com Manual for Creating Buttons, Forms, Links and Coupon boxes. Nanacast.com Manual for Creating Buttons, Forms, Links and Coupon boxes. Create Forms, Buttons & Links Nanacast.com will allow you to create your own buttons and forms to use on your own website by generating

More information

To Begin Customize Office

To Begin Customize Office To Begin Customize Office Each of us needs to set up a work environment that is comfortable and meets our individual needs. As you work with Office 2007, you may choose to modify the options that are available.

More information

Further web design: Cascading Style Sheets Practical workbook

Further web design: Cascading Style Sheets Practical workbook Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these

More information

UI Interactive Objects: Widgets. Widgets. Different Types of Widgets. UI Design Elements

UI Interactive Objects: Widgets. Widgets. Different Types of Widgets. UI Design Elements UI Interactive Objects: Widgets UI Design Elements Widgets Interactive objects, basic building blocks Used for input and output of information Graphical objects for UI design Part of UI design is choosing

More information

WEB DESIGN COURSE CONTENT

WEB DESIGN COURSE CONTENT WEB DESIGN COURSE CONTENT INTRODUCTION OF WEB TECHNOLOGIES Careers in Web Technologies How Websites are working Domain Types and Server About Static and Dynamic Websites Web 2.0 Standards PLANNING A BASIC

More information

Tutorial 6 Creating a Web Form. HTML and CSS 6 TH EDITION

Tutorial 6 Creating a Web Form. HTML and CSS 6 TH EDITION Tutorial 6 Creating a Web Form HTML and CSS 6 TH EDITION Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create input boxes and form labels

More information

Step 1: How to Create Links / Hyperlinks

Step 1: How to Create Links / Hyperlinks Step 1: How to Create Links / Hyperlinks Links allow you to use text or images to link a site visitor to another page or file either on your site or on another site. To learn how to create links, watch

More information

How to Build a More Effective XSite

How to Build a More Effective XSite How to Build a More Effective XSite presented by a la mode Course Highlights Take advantage of advanced design and content features Enable XSite access and features for your employees and colleagues Introduction

More information

Animating Side Menu Panels In SiteSpinner

Animating Side Menu Panels In SiteSpinner Animating Side Menu Panels In SiteSpinner Introduction In the tutorial Side Panel Menus in SiteSpinner, I showed you how to create a menu panel in your SiteSpinner project that was displayed and hidden

More information

Homepage & Widget Design Faculty Support Guide

Homepage & Widget Design Faculty Support Guide Homepage & Widget Design Faculty Support Guide D2L Services West Chester University of Pennsylvania www.wcupa.edu/d2l 610-436-3350, option 2 Anderson Hall, room 20 d2l@wcupa.edu v10.3 July 2014 1 HOMEPAGE

More information

Customization: Foundations

Customization: Foundations Customization: Foundations Trainer Name Trainer/Consultant PowerSchool University 2012 Agenda Languages of PowerSchool Customization Custom Page Manager HTML CSS JavaScript PowerSchool Codes Object and

More information

An Introduction to jquery (+ a Primer on HTML and CSS)

An Introduction to jquery (+ a Primer on HTML and CSS) An Introduction to jquery (+ a Primer on HTML and CSS) David Devlin - UCC ACM Student Chapter Monday 29 th November 2010 HTML and CSS Primer What is HTML? HTML is an acronym for HyperText Markup Language.

More information

Introduction to Web Development with Dreamweaver

Introduction to Web Development with Dreamweaver ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn

More information

Making an online form in Serif WebPlus

Making an online form in Serif WebPlus Making an online form in Serif WebPlus Before you begin your form, it is a very good idea to plan it out on a piece of paper. Decide what information you wish to collect, and which type of fields will

More information

Dreamweaver. Introduction to Editing Web Pages

Dreamweaver. Introduction to Editing Web Pages Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel

More information

Path Style Menu

Path Style Menu Path Style Menu 3.7.0.8 WordPress Configuration Made by Alessandro Zifiglio After installing the plugin, a new menu item will appear in the left side Navbar of your WordPress Admin page. If you have not

More information

Audit de sécurité avec Backtrack 5

Audit de sécurité avec Backtrack 5 Audit de sécurité avec Backtrack 5 DUMITRESCU Andrei EL RAOUSTI Habib Université de Versailles Saint-Quentin-En-Yvelines 24-05-2012 UVSQ - Audit de sécurité avec Backtrack 5 DUMITRESCU Andrei EL RAOUSTI

More information

Internet System Programming. Fall 2012 MIDTERM EXAMINATION

Internet System Programming. Fall 2012 MIDTERM EXAMINATION 0 Internet System Programming Fall 2012 MIDTERM EXAMINATION 1 1. Concepts. Be brief and precise. 1.1 TCP/IP is the name (abbreviation) of the protocol used by all computer connections to the Internet.

More information

Yusof Al-Wadei Page 1 of 9. Interactive Web Design through Survey and Adoption of Modern Web-Technologies Yusof Hussein Al-Wadei

Yusof Al-Wadei Page 1 of 9. Interactive Web Design through Survey and Adoption of Modern Web-Technologies Yusof Hussein Al-Wadei Page 1 of 9 Interactive Web Design through Survey and Adoption of Modern Web-Technologies Yusof Hussein Al-Wadei Page 2 of 9 ABSTRACT Technologies used in modern web development are continuously being

More information

6. If you want to enter specific formats, click the Format Tab to auto format the information that is entered into the field.

6. If you want to enter specific formats, click the Format Tab to auto format the information that is entered into the field. Adobe Acrobat Professional X Part 3 - Creating Fillable Forms Preparing the Form Create the form in Word, including underlines, images and any other text you would like showing on the form. Convert the

More information

HTML Egg Pro. User Guide ipad Version 8.52

HTML Egg Pro. User Guide ipad Version 8.52 HTML Egg Pro User Guide ipad Version 8.52 Last updated: Aug 10, 2016 Table of Contents How to add new website Transfer data between multiple devices Sync through Dropbox 1. Sync in native design document

More information

Excel 2016 Dashboards

Excel 2016 Dashboards Alexandria Technical & Community College 2016 Linda Muchow 320-762-4539 Excel 2016 Dashboards Defining dashboards A dashboard is a visual interface that provides at-a-glance views into key measures relevant

More information

Interface differences and CSS variables

Interface differences and CSS variables MS Expression Web vs Adobe Dreamweaver Interface differences and CSS variables Each program has its advantages and disadvantages. If you re upgrading from FrontPage, and prefer MS products, Expression

More information

View Component of Web-based IDE in CakePHP

View Component of Web-based IDE in CakePHP View Component of Web-based IDE in CakePHP A Writing Project Presented to The Faculty of the Department of Computer Science San José State University In Partial Fulfillment of the Requirements for the

More information

RT-Theme 9 / Wordpress Theme

RT-Theme 9 / Wordpress Theme RT-Theme 9 / Wordpress Theme Documentation by Tolga Can v1.0.5 RT-Theme 9 / Wordpress Theme Created: 29/04/201 0 By: Tolga Can Email: ftolgacan@gmail.com Version: 1.0.5 Twitte r: @ftolgacan Thank you for

More information

Microsoft PowerPoint 2013

Microsoft PowerPoint 2013 Microsoft PowerPoint 2013 Chapter 2 Enhancing a Presentation with Pictures, Shapes, and WordArt Objectives Search for and download an online theme Insert and format pictures Insert and size a shape Apply

More information

Adobe Acrobat Electronic Signatures

Adobe Acrobat Electronic Signatures Adobe Acrobat Electronic Signatures Creating a custom signature stamp 1. Sign your name on a piece of paper (a marker style pen works well) 2. Scan the paper 3. Save to the desktop (or anywhere you like)

More information

Training Studio Templates Documentation Table of Contents

Training Studio Templates Documentation Table of Contents Training Studio Templates Documentation Table of Contents Loading the TrainingStudio Solution... 2 Architecture... 3 Big Picture... 4 Lesson Directory... 6 index.htm... 6 Styles... 16 backgroundstyles.css...

More information

Web Editing Basics 2: Reference

Web Editing Basics 2: Reference Web Editing Basics 2: Reference We will be using the sample pages as a reference point for this training. They can be found on the Web Policy site: http://www.umkc.edu/web-policy/downloads.asp TOPICS 1.

More information

Using the Scheduling Module of MBA

Using the Scheduling Module of MBA Create the Job and Import the Trusses (MBA) Using the Scheduling Module of MBA The process of preparing work for and entering it into the MBA Scheduling Module requires a number of steps. MBA The job is

More information

< Web Development /> Presented by

< Web Development /> Presented by < Web Development /> Presented by Table of Contents 1. The World Wide Web 2. HTML 3. CSS 4. JavaScript DOM AJAX 5. Bootstrap, JQuery, and CDNs 6. Web Development Stacks 7. Fun Projects Introduction to

More information

HTML & CSS Workshop. by Bethany Davis FemmeHacks 2016

HTML & CSS Workshop. by Bethany Davis FemmeHacks 2016 HTML & CSS Workshop by Bethany Davis FemmeHacks 2016 Welcome! Bethany Davis Junior at Penn studying CS Taught myself HTML/CSS in 7th grade I have a few lines of HTML and CSS in the Google codebase www.bethanytdavis.com

More information