UI Toolkits. HCID 520 User Interface Software & Technology
|
|
- Stanley Webb
- 6 years ago
- Views:
Transcription
1 UI Toolkits HCID 520 User Interface Software & Technology
2
3 Xerox Alto 1973
4 Evolution of User Interfaces Command Line (UNIX shell, DOS prompt) Interaction driven by system User prompted for input when needed Text-based input and output Event-Driven Interfaces (GUIs) Interaction driven by user System waits for user action and responds Pointing & text input, graphical output More complex architecture & development
5 Component Model
6 Component Model Encapsulate interactive components (widgets) Component library (button, slider, container) Interface built as a hierarchy of components Widgets drawn by underlying graphics library Input event generation and dispatch Historically mouse & keyboard, now touch, Bounds management & damage/redraw Model geometry, redraw updated regions only
7
8 Java Swing Widgets
9
10 User Interface Components Label TextArea Each component is a clipped 2D Buttons canvas with its own coordinate system.
11 User Interface Components Each component (widget) is an object with: A bounding box A paint method for drawing itself Drawn in the component s coordinate system Callbacks to process input events public void paint(graphics g) { g.fillrect( ); // interior g.drawstring( ); // label g.drawrect( ); // outline }
12 Containment Hierarchy Window Panel Label TextArea Panel Button Button
13 Component Layout Each container is responsible for positioning its contents. Label Window Panel TextArea Border Layout (direct placement) Panel NORTH Button Button springs CENTER struts Struts and Springs (simple constraint-based layout) SOUTH
14 Event-Driven Architecture
15 Events User input is modeled as events that must be processed by the system. Hardware Events Mouse: move, button-down, button-up Keyboard: key-down, key-up Inferred Events Mouse: click, double-click, enter, exit, drag Keyboard: key-press Window: move, resize
16 Anatomy of an Event Events encapsulate the information needed for components to react to input or changes. Event Type (mouse moved, key down, etc) Event Target (the input component) Timestamp (when did event occur) Modifiers (Ctrl, Shift, Alt, etc) Event Content: Mouse: x,y coordinates, button pressed, # clicks Keyboard: which key was pressed
17 Event Dispatch Loop Event Queue List of input events Mouse moved (t 0,x,y) Event Loop (runs in dedicated thread) Remove next event from queue Determine event type Find proper component(s) Invoke callbacks on components Repeat, or wait until event arrives Component Invoked callback method Update application state Request repaint, if needed
18 Event Dispatch Event Queue Mouse moved (t 0,x,y) Mouse pressed (t 1,x,y,1) Window Panel Mouse dragged (t 2,x,y,1) Key typed (t 3, F1 ) (queue and dispatch incoming events in a dedicated thread) Label TextArea Panel /* callback for TextArea */ public void mousemoved(e) { // process mouse moved event } Button Button
19 Demo: Browser DOM Events Go to Open the JavaScript console, enter: var h = document.queryselector("#header"); h.addeventlistener("click", function(event) { console.log(event); }); Click the header image at the top of the page. Inspect the events in the JavaScript console.
20
21 Event Minutiae Event Capture Process event either as it moves down or up the component hierarchy? Default is up. Why?
22 Event Capture (Down) Event Queue Mouse moved (t 0,x,y) Mouse pressed (t 1,x,y,1) Window Panel Mouse dragged (t 2,x,y,1) Key typed (t 3, F1 ) (queue and dispatch incoming events in a dedicated thread) Label TextArea Panel /* callback for TextArea */ public void mousemoved(e) { // process mouse moved event } Button Button
23 Event Bubbling (Up) Window Panel Event Queue Mouse moved (t 0,x,y) Mouse pressed (t 1,x,y,1) Mouse dragged (t 2,x,y,1) Key typed (t 3, F1 ) (queue and dispatch incoming events in a dedicated thread) Label TextArea Panel Button Button
24 Event Minutiae Event Capture Process event either as it moves down or up the component hierarchy? Default is up. Why? Throttling & Debouncing You don t always want to process every event, both for performance and experience reasons. Examples: Flurry of mouse drags > process last event Rapid enter/exit > pause to process exit
25 Model View Controller
26 Model View Controller (MVC) Architecture for interactive applications Introduced by Smalltalk developers at PARC Partitions app to be scalable & maintainable Model View Controller
27 Model Information the app is trying to manipulate Circuits: logic gates and connecting wires Drawing: geometry and color of shapes Model View Controller
28 View Implements a visual display of the model Apps may have multiple views for one model Example: shape & numerical views of drawing Model View Controller
29 View Implements a visual display of the model When model changes, each view must be notified so that it can update itself. Model View Controller
30 Controller Processes all input events from the user Query view to interpret events (e.g., selection) Call methods of model to make changes Model updates & notifies views Model View Controller
31 Example Drawing Application Blue circles: 3 Red squares: 2
32 The Controller handles input Blue circles: 3 Red squares: 2
33 updates the Model Click Blue circles: 3 Red squares: 2
34 and Views update in response. Blue circles: 4 Red squares: 2
35 Relationship of View & Controller Controller must contact view to interpret what some user events mean. Example: Mouse(x, y) -> selected object Pattern of behavior in response to user events (controller issues) is independent of visual geometry (view issues).
36 Combining View & Controller View and controller are tightly intertwined Lots of communication between the two Occur in pairs: each view needs a controller Some architectures combine into a single class Model View Controller
37 Why MVC?
38 Why MVC? Putting MVC into one class does not scale Model may have more than one view Each view different, update on model change Separation aids maintenance & extensibility Easy to change view or add a new view later Models can be extended; old views still work Flexibility of input handling when using separate controllers (e.g., mouse vs. touch)
39 Adding Views Later Blue circles: 3 Red squares: 2
40 Changing the Display Erase and Redraw Using background color to erase fails Draw shape in new position -> loses ordering Move in model and then redraw everything Change position of shapes in model Model keeps shapes in a desired order Tell all views to redraw themselves in order Slow for large / complex drawings
41 Move a red square Blue circles: 3 Red squares: 2
42 Erase at old position, draw at new Blue circles: 3 Red squares: 2
43 Register damage, redraw region Blue circles: 3 Red squares: 2
44 Damage / Redraw View informs window system of areas that need to be updated (i.e., damaged) Does not redraw these areas yet Window system batches updates & clips them to visible portions of window On next event cycle, window system invokes repaint, passes region that need updates Critical for many 2D graphics systems, typically not used in 3D interfaces. Why?
45 Cascading Style Sheets
46 Technical Limitations Traditional GUI tools often make assumptions: Rectangular (non-overlapping?) components Difficult to style graphic elements Many modern frameworks are more flexible, using a scenegraph to model the display. Ex: the browser document object model (DOM). Decouple content from appearance using separate stylesheets to specify design.
47 Cascading Style Sheets A language for styling an HTML document W3C standard, first introduced in 1996 Goal: separate content from presentation Specify layout, spacing, colors, fonts, Share formatting across pages on a site Enable various formats for a single page Why cascading? Multiple style definitions may apply to an element, ordered ( cascaded ) by priority.
48 CSS Example p { margin-bottom: 1em; font-family: Helvetica, Arial; font-size: 16px; line-height: 24px; color: #333333; }
49 CSS Example Selector style p (paragraph) elements p { margin-bottom: 1em; font-family: Helvetica, Arial; font-size: 16px; line-height: 24px; color: #333333; }
50 CSS Example Selector p { margin-bottom: 1em; font-family: Helvetica, Arial; font-size: 16px; line-height: 24px; color: #333333; } Property
51 CSS Example Selector p { margin-bottom: 1em; font-family: Helvetica, Arial; font-size: 16px; line-height: 24px; color: #333333; } Property Value or #333, or rgb(51,51,51)
52 CSS Selectors Tag (select all elements of a certain type) a, p, h1, ul, li, etc
53 CSS Selectors Tag (select all elements of a certain type) a, p, h1, ul, li, etc Id (select by unique identifier, prefix #) <div id="logo"> > #logo
54 CSS Selectors Tag (select all elements of a certain type) a, p, h1, ul, li, etc Id (select by unique identifier, prefix #) <div id="logo"> > #logo Class (select by shared identifier, prefix.) <div class="c1 c2"> >.c1
55 CSS Selectors Tag (select all elements of a certain type) a, p, h1, ul, li, etc Id (select by unique identifier, prefix #) <div id="logo"> > #logo Class (select by shared identifier, prefix.) <div class="c1 c2"> >.c1 These selectors can be combined: div.headlines
56 CSS Selector Combinations For multiple selections, use a comma div.headlines, div.news { } Selects both div.headlines and div.news elements
57 CSS Selector Combinations For multiple selections, use a comma div.headlines, div.news { } Selects both div.headlines and div.news elements For nested selections, use a space div.headlines ul li { } Selects all li within a ul within a div.headlines
58 CSS Selector Combinations For multiple selections, use a comma div.headlines, div.news { } Selects both div.headlines and div.news elements For nested selections, use a space div.headlines ul li { } Selects all li within a ul within a div.headlines For direct descendants, use > div.headlines > ul li { } Now the ul must be the direct child of div.headlines
59 CSS Box Model
60 CSS display property block <div> inline <span> inline-block none
61 Specify a 2-Column Layout <body> <div id= left > Sidebar column content (assume max 400px tall) </div> <div id= right > Main column content (variable height) </div> <div id= footer > Footer column content (assume 50px tall) </div> </body>
62 Specify a 2-Column Layout <body> > select with body <div id= left > > select with #left Sidebar column content (assume max 400px tall) </div> <div id= right > > select with #right Main column content (variable height) </div> <div id= footer > > select with #footer Footer column content (assume 50px tall) </div> </body>
63 Layout with no styling
64 Layout with absolute positioning, 250 pixel sidebar What are some shortcomings of this layout? Why did we include body { position: relative }?
65 Layout with absolute positioning, without position:relative position: relative sets the coordinate space for absolutely positioned elements. In this example the position [0,0] is relative to the browser window, not the body tag.
66 Layout with float: left and margin-left What are some shortcomings of this layout? Why did we include #footer { clear: both }?
67 Layout with float: left and margin-left, without clear: both clear: both tells the browser layout engine to clear any floats (both left and right) before placing the element. Next, can we make the sidebar resize automatically in response to the window width?
68 Float layout using percentages What if we want to ensure the width of the left sidebar never falls below a minimum size?
69 Float layout using percentages and minimum width Here s one attempt at setting a minimum width. Why is this unsatisfactory?
70 Float layout using percentages Let s go back to our previous design How can we limit the maximum width of the page?
71 Float layout using percentages and body max-width Use the max-width property on the body element.
72 Adding automatic margins margin-left: auto; margin-right: auto centers the body.
73 Useful CSS Properties margin (-left, etc) padding (-left, etc) border (-left, etc) border-radius overflow (-x/-y) background-color background-image position float (max-/min-) width, height font font-family font-size font-weight font-variant line-height text-transform text-align vertical-align display
74 CSS Power Tools CSS preprocessors (LESS / SASS) Add support for variables (e.g., $basecolor) Perform computation, unit conversion Enable better reuse, less repetition Now commonly used in web applications HTML/CSS frameworks (e.g., Bootstrap) Provide better defaults out of the box More dynamic components (popup menus) Responsive design; mobile friendly
75 UI Tools Discussion
76 Myers, Hudson & Pausch Brief UI tool history, establish vocabulary in wide use today, and chart future trajectories. At any point did they miss the mark?
77 Myers, Hudson & Pausch Brief UI tool history, establish vocabulary in wide use today, and chart future trajectories. At any point did they miss the mark? Web: subsuming many desktop applications Design vs. Dev: In practice often done by teams with varied skills (interaction design, graphic design, implementation) 3D: Mostly limited to games? BUT fabrication now likely to drive new 3D design tools
78 Toolkits Abound Not just for desktop GUI widgets & events Mobile applications (ios, Android) Information visualization (d3.js, Protovis, Prefuse) Tangible user interfaces (Papier-Maché) Gestural user interfaces (Kinect API) Speech user interfaces (MS Speech API) Proxemic user interfaces (Proximity Toolkit) Many exhibit similar tensions around expressiveness, efficiency and ease-of-use
79 Toolkit Benefits & Shortcomings Simplify & accelerate UI development Lower the threshold of specification difficulty Raise the ceiling of what can be expressed But hard to do both Establish path of least resistance Makes common / successful designs easy Makes unusual / ineffective designs harder Can limit & shape what we conceive / design Enforce consistency of design Maintain familiar widgets and interactions
80 Discussion Question Topics Timeliness & Future Predictions Threshold/Ceiling, Expressivity vs. Usability Varied Display Sizes (from Walls to Watches) Personalization User Attention & Cognitive Load End User Programming Constraints / Model-Driven / Automatic Design Security
81 The authors of the main reading mention the possibility of tools that not only enable design systems that have high usability, but that actual promote or help ensure that they are. How might this be taken further in the future to help prevent designs that cause users frustration or discomfort (or error)? - Avery The author suggests that there should be a balance between creating UIs that are accessible while also allowing for innovation to accommodate for ubiquitous computing. Shouldn't UI design and technology revolve around how a task is performed as opposed to creating technologies to fit a certain form factor or input/output interaction? - Garrick
UI Toolkits. HCID 520 User Interface Software & Technology
UI Toolkits HCID 520 User Interface Software & Technology http://www.cryptonomicon.com/beginning.html Xerox Alto 1973 Evolution of User Interfaces Command Line (UNIX shell, DOS prompt) Interaction driven
More informationUI Toolkits. HCID 520 User Interface Software & Technology
UI Toolkits HCID 520 User Interface Software & Technology http://www.cryptonomicon.com/beginning.html Xerox Alto 1973 Evolution of User Interfaces Command Line (UNIX shell, DOS prompt) Interaction driven
More informationEvent Driven UIs and Model-View-Controller
Event Driven UIs and Model-View-Controller CS160: User Interfaces John Canny Includes slides based on those of James Landay & Jeffrey Heer Reminder Archos 5 hardware available in class this Weds one per
More informationCS260. UI Toolkits. Björn Hartmann University of California, Berkeley EECS, Computer Science Division Fall 2010
CS260 UI Toolkits Björn Hartmann University of California, Berkeley EECS, Computer Science Division Fall 2010 In the beginning cryptonomicon.com/beginning.html The Xerox Alto (1973) Event-Driven UIs Old
More informationMOBILE COMPUTING 1/20/18. How many of you. CSE 40814/60814 Spring have implemented a command-line user interface?
MOBILE COMPUTING CSE 40814/60814 Spring 2018 How many of you have implemented a command-line user interface? How many of you have implemented a graphical user interface? HTML/CSS Java Swing.NET Framework
More informationUsing Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links
Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationHTML and CSS COURSE SYLLABUS
HTML and CSS COURSE SYLLABUS Overview: HTML and CSS go hand in hand for developing flexible, attractively and user friendly websites. HTML (Hyper Text Markup Language) is used to show content on the page
More informationUsing Dreamweaver CS6
Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationBlock & Inline Elements
Block & Inline Elements Every tag in HTML can classified as a block or inline element. > Block elements always start on a new line (Paragraph, List items, Blockquotes, Tables) > Inline elements do not
More informationstanford hci group / cs376 UI Software Tools Scott Klemmer 14 October research topics in human-computer interaction
stanford hci group / cs376 UI Software Tools Scott Klemmer 14 October 2004 research topics in human-computer interaction http://cs376.stanford.edu cs547 tomorrow: Scott Snibbe Body, Space, and Cinema 2
More informationStyles, Style Sheets, the Box Model and Liquid Layout
Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of
More informationZen Garden. CSS Zen Garden
CSS Patrick Behr CSS HTML = content CSS = display It s important to keep them separated Less code in your HTML Easy maintenance Allows for different mediums Desktop Mobile Print Braille Zen Garden CSS
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More information8/30/15 MOBILE COMPUTING. CSE 40814/60814 Fall How many of you. have implemented a command-line user interface?
MOBILE COMPUTING CSE 40814/60814 Fall 2015 How many of you have implemented a command-line user interface? 1 How many of you have implemented a graphical user interface? HTML/CSS Java Swing.NET Framework
More informationCSS: The Basics CISC 282 September 20, 2014
CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML
More informationYouTube Break. https://www.youtube.com/watch?v=lvtfd_rj2he
Layout Jeff Avery YouTube Break https://www.youtube.com/watch?v=lvtfd_rj2he Positioning Visual Components Previously, we learned about event handling and model-view-control architecture. Next, we need
More informationIntroduction to WEB PROGRAMMING
Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks
More informationTable Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
More informationWindows and Events. created originally by Brian Bailey
Windows and Events created originally by Brian Bailey Announcements Review next time Midterm next Friday UI Architecture Applications UI Builders and Runtimes Frameworks Toolkits Windowing System Operating
More informationCOMSC-031 Web Site Development- Part 2
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create
More informationInteractive Programming
Interactive Programming CS160: User Interfaces John Canny. Reminders Midterm one week from Weds. Review next Monday. Previous semesters midterms will be posted today. Due today Low fidelity prototype Pair
More informationFall UI Design and Implementation 1
Fall 2005 6.831 UI Design and Implementation 1 1 Suggested by Daniel Swanton Fall 2005 6.831 UI Design and Implementation 2 2 Suggested by Robert Kwok Fall 2005 6.831 UI Design and Implementation 3 3 Input
More informationCSS. https://developer.mozilla.org/en-us/docs/web/css
CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties
More informationWeb Engineering CSS. By Assistant Prof Malik M Ali
Web Engineering CSS By Assistant Prof Malik M Ali Overview of CSS CSS : Cascading Style Sheet a style is a formatting rule. That rule can be applied to an individual tag element, to all instances of a
More informationWebsite Development with HTML5, CSS and Bootstrap
Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on
More informationWhen you complete this chapter, you will be able to:
Page Layouts CHAPTER 7 When you complete this chapter, you will be able to: Understand the normal fl ow of elements Use the division element to create content containers Create fl oating layouts Build
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block
More informationDeccansoft Software Services
Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module
More informationIndex LICENSED PRODUCT NOT FOR RESALE
Index LICENSED PRODUCT NOT FOR RESALE A Absolute positioning, 100 102 with multi-columns, 101 Accelerometer, 263 Access data, 225 227 Adding elements, 209 211 to display, 210 Animated boxes creation using
More informationSoftware Tools. Scott Klemmer Autumn 2009
stanford hci group http://cs147.stanford.edu Software Tools Scott Klemmer Autumn 2009 It accomplishes an important task (for better and for worse) You don t have to make it yourself, and it abstracts a
More informationHTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web
HTML & CSS SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML: HyperText Markup Language LaToza Language for describing structure of a document Denotes hierarchy of elements What
More informationWelcome Please sit on alternating rows. powered by lucid & no.dots.nl/student
Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS
More informationHTML & CSS. Rupayan Neogy
HTML & CSS Rupayan Neogy But first My Take on Web Development There is always some tool that makes your life easier. Hypertext Markup Language The language your web browser uses to describe the content
More informationWeb Design & Dev. Combo. By Alabian Solutions Ltd , 2016
Web Design & Dev. Combo By Alabian Solutions Ltd 08034265103, info@alabiansolutions.com www.alabiansolutions.com 2016 HTML PART 1 Intro to the web The web Clients Servers Browsers Browser Usage Client/Server
More informationDesigning RIA Accessibility: A Yahoo UI (YUI) Menu Case Study
Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study Doug Geoffray & Todd Kloots 1 Capacity Building Institute Seattle, Washington 2006.11.30 What s Happening? 2 3 Web 1.0 vs. Web 2.0 Rich Internet
More informationCreating and Building Websites
Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21 Week 6 Slide 1 of 28 Week 6 Agenda
More informationCSS Cascading Style Sheets
CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with
More informationSession 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style
Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style precedence and style inheritance Understand the CSS use
More informationData Visualization (DSC 530/CIS )
Data Visualization (DSC 530/CIS 602-01) HTML, CSS, & SVG Dr. David Koop Data Visualization What is it? How does it differ from computer graphics? What types of data can we visualize? What tasks can we
More informationCOMS 359: Interactive Media
COMS 359: Interactive Media Agenda Review CSS Preview Review Transparent GIF headline Review JPG buttons button1.jpg button.psd button2.jpg Review Next Step Tables CSS Introducing CSS What is CSS? Cascading
More informationINFS 2150 Introduction to Web Development
INFS 2150 Introduction to Web Development 3. Page Layout Design Objectives Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout
More informationINFS 2150 Introduction to Web Development
Objectives INFS 2150 Introduction to Web Development 3. Page Layout Design Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout
More informationREADSPEAKER ENTERPRISE HIGHLIGHTING 2.5
READSPEAKER ENTERPRISE HIGHLIGHTING 2.5 Advanced Skinning Guide Introduction The graphical user interface of ReadSpeaker Enterprise Highlighting is built with standard web technologies, Hypertext Markup
More informationEXPLORE MODERN RESPONSIVE WEB DESIGN TECHNIQUES
20-21 September 2018, BULGARIA 1 Proceedings of the International Conference on Information Technologies (InfoTech-2018) 20-21 September 2018, Bulgaria EXPLORE MODERN RESPONSIVE WEB DESIGN TECHNIQUES Elena
More informationUsing CSS for page layout
Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility
More informationCOSC 2206 Internet Tools. CSS Cascading Style Sheets
COSC 2206 Internet Tools CSS Cascading Style Sheets 1 W3C CSS Reference The official reference is here www.w3.org/style/css/ 2 W3C CSS Validator You can upload a CSS file and the validator will check it
More informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
More informationCertified CSS Designer VS-1028
VS-1028 Certification Code VS-1028 Certified CSS Designer Certified CSS Designer CSS Designer Certification requires HTML knowledge or VSkills HTML Designer Certification to allow organizations to easily
More informationCSS Selectors. element selectors. .class selectors. #id selectors
CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).
More informationPage 1 of 11 Units: - All - Teacher: WebPageDesignI, CORE Course: WebPageDesignI Year: 2012-13 Introduction to the World of Web Standards Why do web development standards play a key role in the proliferation
More informationWebsite Design (Weekday) By Alabian Solutions Ltd , 2016
Website Design (Weekday) By Alabian Solutions Ltd 08034265103, info@alabiansolutions.com www.alabiansolutions.com 2016 TECHNOLOGIES DATE TIME Day 1 HTML Part 1 Intro to the web The web Clients Servers
More informationPage Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning
Page Layout contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning 2 1 4.1
More informationCascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Mendel Rosenblum 1 Driving problem behind CSS What font type and size does introduction generate? Answer: Some default from the browser (HTML tells what browser how)
More informationIntroduction to HTML & CSS. Instructor: Beck Johnson Week 2
Introduction to HTML & CSS Instructor: Beck Johnson Week 2 today Week One review and questions File organization CSS Box Model: margin and padding Background images and gradients with CSS Make a hero banner!
More informationWeb Design and Implementation
Study Guide 3 - HTML and CSS - Chap. 13-15 Name: Alexia Bernardo Due: Start of class - first day of week 5 Your HTML files must be zipped and handed in to the Study Guide 3 dropbox. Chapter 13 - Boxes
More informationAppendix D CSS Properties and Values
HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by
More informationCSC309 Programming on the Web week 3: css, rwd
CSC309 Programming on the Web week 3: css, rwd Amir H. Chinaei, Spring 2017 Office Hours: M 3:45-5:45 BA4222 ahchinaei@cs.toronto.edu http://www.cs.toronto.edu/~ahchinaei/ survey 1 in survey 1, you provide
More informationSession 4. Style Sheets (CSS) Reading & References. A reference containing tables of CSS properties
Session 4 Style Sheets (CSS) 1 Reading Reading & References en.wikipedia.org/wiki/css Style Sheet Tutorials www.htmldog.com/guides/cssbeginner/ A reference containing tables of CSS properties web.simmons.edu/~grabiner/comm244/weekthree/css-basic-properties.html
More informationData Visualization (CIS/DSC 468)
Data Visualization (CIS/DSC 468) Web Programming Dr. David Koop Definition of Visualization Computer-based visualization systems provide visual representations of datasets designed to help people carry
More informationIndex. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148
Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,
More informationCS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)
CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property
More informationData Visualization (DSC 530/CIS )
Data Visualization (DSC 530/CIS 60201) CSS, SVG, and JavaScript Dr. David Koop Definition of Visualization Computerbased visualization systems provide visual representations of datasets designed to help
More informationCompuScholar, Inc. Alignment to Utah's Web Development I Standards
Course Title: KidCoder: Web Design Course ISBN: 978-0-9887070-3-0 Course Year: 2015 CompuScholar, Inc. Alignment to Utah's Web Development I Standards Note: Citation(s) listed may represent a subset of
More informationCSS: formatting webpages
CSS: formatting webpages Why CSS? separate content from formatting (style) style can be changed easily without rewriting webpages keep formatting consistent across website allows more advanced formatting
More informationBIM222 Internet Programming
BIM222 Internet Programming Week 7 Cascading Style Sheets (CSS) Adding Style to your Pages Part II March 20, 2018 Review: What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements
More informationBerkeley. CS160: User Interface Design. Video Puppetry: SIGGRAPH Asia Widgets, Events, MVC 02/29/12 2/29/12
CS160: User Interface Design Widgets, Events, MVC 02/29/12 Berkeley UNIVERSITY OF CALIFORNIA Video Puppetry: SIGGRAPH Asia 2008 Authors: Connelly Barnes, David E. Jacobs, Jason Sanders, Dan B Goldman,
More informationChapter 3 Style Sheets: CSS
WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE JEFFREY C. JACKSON Chapter 3 Style Sheets: CSS 1 Motivation HTML markup can be used to represent Semantics: h1 means that an element is a top-level heading
More informationIntroduction to HTML & CSS. Instructor: Beck Johnson Week 5
Introduction to HTML & CSS Instructor: Beck Johnson Week 5 SESSION OVERVIEW Review float, flex, media queries CSS positioning Fun CSS tricks Introduction to JavaScript Evaluations REVIEW! CSS Floats The
More informationCOMS 359: Interactive Media
COMS 359: Interactive Media Agenda Review CSS Layout Preview Review Introducting CSS What is CSS? CSS Syntax Location of CSS The Cascade Box Model Box Structure Box Properties Review Style is cascading
More informationWebsite Design (Weekend) By Alabian Solutions Ltd , 2016
Website Design (Weekend) By Alabian Solutions Ltd 08034265103, info@alabiansolutions.com www.alabiansolutions.com 2016 TECHNOLOGIES DATE TIME Day1 Section 1 HTML Part 1 12am 5pm Intro to the web The web
More informationHTML Organizing Page Content
HTML Organizing Page Content CSS for layout Examples http://www.shinybytes.com/newcss.html Generic Elements Used to create a logical grouping of content or elements on the page Can be customized to describe
More information1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014
1/6/2019 12:28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014 CATALOG INFORMATION Dept and Nbr: CS 50A Title: WEB DEVELOPMENT 1 Full Title: Web Development 1 Last Reviewed:
More informationCSS for Page Layout Robert K. Moniot 1
CSS for Page Layout 2015 Robert K. Moniot 1 OBJECTIVES In this unit, you will learn: How to use style sheets for layout Controlling text flow, margins, borders, and padding Controlling visibility of elements
More informationIntroducing Cascading Style Sheets. Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS
Introducing Cascading Style Sheets Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS Cascading Style Sheet Basics CSS has many benefits: The pages look
More informationGetting Started with Eric Meyer's CSS Sculptor 1.0
Getting Started with Eric Meyer's CSS Sculptor 1.0 Eric Meyer s CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly
More informationID1354 Internet Applications
ID1354 Internet Applications CSS Leif Lindbäck, Nima Dokoohaki leifl@kth.se, nimad@kth.se SCS/ICT/KTH What is CSS? - Cascading Style Sheets, CSS provide the means to control and change presentation of
More informationCSS worksheet. JMC 105 Drake University
CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html
More informationHTML + CSS. ScottyLabs WDW. Overview HTML Tags CSS Properties Resources
HTML + CSS ScottyLabs WDW OVERVIEW What are HTML and CSS? How can I use them? WHAT ARE HTML AND CSS? HTML - HyperText Markup Language Specifies webpage content hierarchy Describes rough layout of content
More informationClient-Side Web Technologies. CSS Part II
Client-Side Web Technologies CSS Part II Topics Box model and related properties Visual formatting model and related properties The CSS Box Model Describes the rectangular boxes generated for elements
More informationCS 4300 Computer Graphics
CS 4300 Computer Graphics Prof. Harriet Fell Fall 2011 Lecture 8 September 22, 2011 GUIs GUIs in modern operating systems cross-platform GUI frameworks common GUI widgets event-driven programming Model-View-Controller
More informationCSS: Lists, Tables and the Box Model
CSS: Lists, Tables and the Box Model CISC 282 September 20, 2017 Basics of CSS Style Name classes semantically What the style is intended for not what it does Define and apply styles efficiently Choose
More informationCSS: Cascading Style Sheets
What are Style Sheets CSS: Cascading Style Sheets Representation and Management of Data on the Internet, CS Department, Hebrew University, 2007 A style sheet is a mechanism that allows to specify how HTML
More informationFrontend guide. Everything you need to know about HTML, CSS, JavaScript and DOM. Dejan V Čančarević
Frontend guide Everything you need to know about HTML, CSS, JavaScript and DOM Dejan V Čančarević Today frontend is treated as a separate part of Web development and therefore frontend developer jobs are
More informationBasics of Web Technologies
Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for Web Designing Given below is the brief description for the course you are looking for: Introduction to Web Technologies
More informationCascading Style Sheets Level 2
Cascading Style Sheets Level 2 Course Objectives, Session 1 Level 1 Quick Review Chapter 6 Revisit: Web Fonts Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your Site s Navigation Begin
More informationSections and Articles
Advanced PHP Framework Codeigniter Modules HTML Topics Introduction to HTML5 Laying out a Page with HTML5 Page Structure- New HTML5 Structural Tags- Page Simplification HTML5 - How We Got Here 1.The Problems
More informationOracle Eloqua s User Guide
http://docs.oracle.com Oracle Eloqua Emails User Guide 2018 Oracle Corporation. All rights reserved 11-Jan-2018 Contents 1 Emails Overview 6 2 Examples of emails 7 3 Creating emails 19 4 Email authoring
More informationINTRODUCTION TO CSS. Mohammad Jawad Kadhim
INTRODUCTION TO CSS Mohammad Jawad Kadhim WHAT IS CSS Like HTML, CSS is an interpreted language. When a web page request is processed by a web server, the server s response can include style sheets,
More informationFrontPage 2000 Tutorial -- Advanced
FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right
More informationHIERARCHICAL ORGANIZATION
A clearly defined home page Navigation links to major site sections HIERARCHICAL ORGANIZATION Often used for commercial and corporate websites 1 Repetition DESIGN PRINCIPLES Repeat visual elements throughout
More informationBEFORE CLASS. If you haven t already installed the Firebug extension for Firefox, download it now from
BEFORE CLASS If you haven t already installed the Firebug extension for Firefox, download it now from http://getfirebug.com. If you don t already have the Firebug extension for Firefox, Safari, or Google
More informationThis course is designed for web developers that want to learn HTML5, CSS3, JavaScript and jquery.
HTML5/CSS3/JavaScript Programming Course Summary Description This class is designed for students that have experience with basic HTML concepts that wish to learn about HTML Version 5, Cascading Style Sheets
More informationHTML5, CSS3, JQUERY SYLLABUS
HTML5, CSS3, JQUERY SYLLABUS AAvhdvchdvchdvhdh HTML HTML - Introduction HTML - Elements HTML - Tags HTML - Text HTML - Formatting HTML - Pre HTML - Attributes HTML - Font HTML - Text Links HTML - Comments
More informationIntroduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100
Introduction to Multimedia MMP100 Spring 2016 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!
More information2005 WebGUI Users Conference
Cascading Style Sheets 2005 WebGUI Users Conference Style Sheet Types 3 Options Inline Embedded Linked Inline Use an inline style sheet to modify a single element one time in a page.
More informationChapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
More informationAssignments (4) Assessment as per Schedule (2)
Specification (6) Readability (4) Assignments (4) Assessment as per Schedule (2) Oral (4) Total (20) Sign of Faculty Assignment No. 02 Date of Performance:. Title: To apply various CSS properties like
More informationCSS. Shan-Hung Wu CS, NTHU
CSS Shan-Hung Wu CS, NTHU CSS Zen Garden 2 Outline The Basics Selectors Layout Stacking Order 3 Outline The Basics Selectors Layout Stacking Order 4 Grammar selector { property: value; 5 Example /* for
More information