DOCSLIB.ORG

Inky: a Sloppy Command Line for the Web with Rich Visual Feedback

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Inky: a Sloppy Command Line for the Web with Rich Visual Feedback Inky: a sloppy command line for the web with rich visual feedback The MIT Faculty has made this article openly available. Please share how this access benefits you. Your story matters. Citation Miller, Robert C. et al. “Inky: a sloppy command line for the web with rich visual feedback.” Proceedings of the 21st annual ACM symposium on User interface software and technology. Monterey, CA, USA: ACM, 2008. 131-140. As Published http://dx.doi.org/10.1145/1449715.1449737 Publisher Association for Computing Machinery Version Author's final manuscript Citable link http://hdl.handle.net/1721.1/51696 Terms of Use Article is made available in accordance with the publisher's policy and may be subject to US copyright law. Please refer to the publisher's site for terms of use. Inky: A Sloppy Command Line for the Web with Rich Visual Feedback Robert C. Miller1, Victoria H. Chou1, Michael Bernstein1, Greg Little1, Max Van Kleek1, David Karger1, mc schraefel2 1MIT CSAIL 2Electronics and Computer Science 32 Vassar St University of Southampton Cambridge, MA 02139 USA SO17 1BJ, United Kingdom {rcm,vikki,msbernst,glittle,emax,karger}@csail.mit.edu [email protected] ABSTRACT while using novel techniques to mitigate the costs. Inky We present Inky, a command line for shortcut access to (short for Internet Keywords) is a popup window, invoked common web tasks. Inky aims to capture the efficiency from the user’s web browser, into which the user can type benefits of typed commands while mitigating their usability keywords expressing a command. Keywords may include problems. Inky commands have little or no new syntax to command names, such as reserve or email or search learn, and the system displays rich visual feedback while flights, and command parameters, such as 9 am or vik- the user is typing, including missing parameters and con- [email protected] or New York. The keywords are matched textual information automatically clipped from the target heuristically against a set of known commands using tech- web site. Inky is an example of a new kind of hybrid be- niques presented in previous work [8,9] to produce a list of tween a command line and a GUI interface. We describe possible interpretations for the user to choose from. When the design and implementation of two prototypes of this the user chooses an interpretation and runs it, Inky fills in idea, and report the results of a field study. the menu-and-form interface for the corresponding web ACM Classification: H5.2 [Information interfaces and site. presentation]: User Interfaces. - Graphical user interfaces. Inky mitigates the classic pitfalls of command line interfac- General terms: Design, Algorithms, Human Factors, Lan- es in two ways: sloppy syntax and rich feedback. First, guages. Inky commands have little or no syntax to learn. Key- words may be provided in any order, command names may Keywords: command languages, natural language be omitted or replaced with synonyms, and parameters may processing, web automation be entered in a variety of ways. The Inky interpreter makes its best effort to match the user’s input against the available INTRODUCTION commands. In the traditional taxonomy of user interface styles [11], Second, Inky provides more rapid, richer feedback than a most web sites offer a menu-and-form interface, which traditional command line. While the user is typing, Inky delivers important benefits to learnability, memorability, incrementally and continuously displays how it is interpret- and error prevention. For frequent users, however, a ing the command. The interpretation also shows missing menu-and-form interface can be inefficient, particularly if parameters to remind the user what other information can the interface is poorly designed and presents a long, com- be included in the command, reducing the learning and plex form or a multi-step process. For these cases, a com- memory burden. mand line interface may be far more efficient, but at the cost of requiring the user to learn command names and In addition to textual feedback, Inky also judiciously in- syntax, putting more demands on the user’s memory and corporates graphical user interface widgets in its feedback. making more chances for errors. Some widgets are useful for parameter entry, such as a date picker for picking the day of a meeting, or a list of confe- This paper presents Inky, a command line for the Web that rence rooms for the meeting location. Other widgets pro- aims to capture the efficiency benefits of typed commands vide context for the command that helps the user choose parameters and avoid errors. For example, Inky retrieves the user’s own calendar and displays a snapshot of the re- levant day and time. Inky thus represents a hybrid between a command line and a GUI interface. Since Inky acts as a frontend shortcut for an existing menu- and-form system, the user does not need to write a com- plete command. If a command is invoked with important parameters missing, then Inky fills out as much of the form as it can from the parameters that were provided, and 1 leaves the user to complete the form and submit it. Inky Many search engines effectively implement a sloppy key- also distinguishes between functions with persistent side word-driven command line, at least for information retriev- effects (such as sending email or making a reservation) and al. For example, Google can display times (Samoa time), functions without side effects (such as viewing a calendar weather reports (weather 02139), arithmetic (67/83), and or looking up a person). For commands with side effects, maps (Monterey CA). Google Calendar’s Quick Add fea- Inky normally leaves it to the user to submit the final form, ture uses a similar approach to quickly add events to the unless the user presses Control-Enter to perform the side- calendar (dinner with Michael Tues 7 pm). Unlike these effect immediately. Thus Inky covers a spectrum from systems, Inky provides rich visual feedback while the simple bookmarks (email, then Enter, to go to the mail command is being entered, and can be used to automate composition page) to partial commands (email vik- web sites that are not accessible to public search engines, [email protected], Enter, to start composing an email to Vikki) such as an intranet conference room booking site. to complete automation (email [email protected] I’m run- Sloppy syntax has been used in other web automation sys- ning late, Control-Enter, to send a quick email right away). tems, notably Koala/CoScripter [7] and Smart Bookmarks One important application of a sloppy command line is [6]. The command languages in these systems operate at a lightweight personal information management (PIM), such lower level than Inky: clicking buttons and links, filling in as entering to-do items, calendar meetings, and contact text boxes, and selecting from lists, checkboxes, and radio information. Previous work [1,12] suggests that the cost of buttons. Inky commands aim at higher-level user goals, starting, navigating, and entering data in PIM applications such as reserving conference rooms and sending email, is one reason why users turn to Post-It notes or paper note- which have a greater variety of commands and parameter books, despite the difficulty of search and retrieval that types than other web automation systems must handle. paper poses later. A command line with sloppy syntax Others have considered how to solve usability problems in allows PIM data to be captured quickly and efficiently, command line interfaces. Seminal work by Furnas et al. [4] while filing it immediately in the appropriate application. showed that the names used for commands and objects This paper describes our experience building and evaluat- vary widely across users, so unlimited aliasing offers the ing two prototypes. The first prototype, called simply best hope for success. Inky follows this prescription by Inky, uses sloppy syntax with textual feedback, and pro- supporting synonyms. Usability improvements have been vides commands for several dozen websites. It was dep- aimed at the Unix shell, notably Fishy2, which adds syntax loyed in a small field study and a sample of commands highlighting, multiple line editing, more autocompletion for invoked by those users is analyzed in this paper. The command arguments, and better error messages. Systems second prototype, called Pinky, focuses primarily on data like XMLterm3 and LAPIS [10] move the Unix shell into entry for PIM web applications, such as Google Calendar the web browser, so that command line programs can dis- and Remember the Milk. Pinky incorporates GUI widgets play HTML or XML user interfaces for the user to interact to help enter some arguments, and automatically shows with. relevant web clippings from the target web site to help the Command lines have also been built on top of desktop GUI user complete the command. Both prototypes are imple- applications, notably Quicksilver4 and Enso5. These sys- mented as Firefox extensions using Chickenfoot [2] to au- tems incrementally search for desktop applications, files, tomate web sites. even dialog boxes and menu items. Quicksilver can be The rest of this paper is organized as follows. First we extended with plugins and user-written scripts. The conti- survey related work in web automation and command lines. nuous feedback provided by these desktop command lines Then we describe the user interface and implementation of inspired Inky’s feedback. the Inky prototype, and report the results of a small field For PIM data, our earlier Jourknow system [14] aimed to study. Finally, we describe recent work on the Pinky pro- bridge the gap between lightweight text entry and struc- totype, which includes GUI widgets and web clippings. tured information retrieval by managing the user’s data as RELATED WORK information scraps, but we found in subsequent studies that Most browsers support command-line-style shortcuts for users are loath to abandon their current PIM tools.
Load more

Recommended publications
  • HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, Javascript and Web Storage
    Androidfp_19.fm Page 1 Friday, May 18, 2012 10:32 AM 19 HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, JavaScript and Web Storage Objectives In this chapter you’ll: ■ Implement a web-based version of the Favorite Twitter Searches app from Chapter 5. ■ Use HTML5 and CSS3 to implement the interface of a web app. ■ Use JavaScript to implement the logic of a web app. ■ Use HTML5’s Web Storage APIs to store key-value pairs of data that persist between executions of a web app. ■ Use a CSS reset to remove all browser specific HTML- element formatting before styling an HTML document’s elements. ■ Save a shortcut for a web app to your device’s home screen so you can easily launch a web app. = DRAFT: © Copyright 1992–2012 by Deitel & Associates, Inc. All Rights Reserved. Androidfp_19.fm Page 2 Friday, May 18, 2012 10:32 AM 2 Chapter 19 HTML5 Favorite Twitter Searches App 19.1 Introduction 19.5 Building the App 19.2 Test-Driving the Favorite Twitter 19.5.1 HTML5 Document Searches App 19.5.2 CSS 19.5.3 JavaScript 19.3 Technologies Overview Outline 19.6 Wrap-Up 19.1 Introduction The Favorite Twitter Searches app from Chapter 5 allowed users to save their favorite Twit- ter search strings with easy-to-remember, user-chosen, short tag names. Users could then conveniently follow tweets on their favorite topics. In this chapter, we reimplement the Fa- vorite Twitter Searches app as a web app, using HTML5, CSS3 and JavaScript.
    [Show full text]
  • Copyrighted Material
    05_096970 ch01.qxp 4/20/07 11:27 PM Page 3 1 Introducing Cascading Style Sheets Cascading style sheets is a language intended to simplify website design and development. Put simply, CSS handles the look and feel of a web page. With CSS, you can control the color of text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what back- ground images or colors are used, as well as a variety of other visual effects. CSS was created in language that is easy to learn and understand, but it provides powerful control over the presentation of a document. Most commonly, CSS is combined with the markup languages HTML or XHTML. These markup languages contain the actual text you see in a web page — the hyperlinks, paragraphs, headings, lists, and tables — and are the glue of a web docu- ment. They contain the web page’s data, as well as the CSS document that contains information about what the web page should look like, and JavaScript, which is another language that pro- vides dynamic and interactive functionality. HTML and XHTML are very similar languages. In fact, for the majority of documents today, they are pretty much identical, although XHTML has some strict requirements about the type of syntax used. I discuss the differences between these two languages in detail in Chapter 2, and I also pro- vide a few simple examples of what each language looks like and how CSS comes together with the language to create a web page. In this chapter, however, I discuss the following: ❑ The W3C, an organization that plans and makes recommendations for how the web should functionCOPYRIGHTED and evolve MATERIAL ❑ How Internet documents work, where they come from, and how the browser displays them ❑ An abridged history of the Internet ❑ Why CSS was a desperately needed solution ❑ The advantages of using CSS 05_096970 ch01.qxp 4/20/07 11:27 PM Page 4 Part I: The Basics The next section takes a look at the independent organization that makes recommendations about how CSS, as well as a variety of other web-specific languages, should be used and implemented.
    [Show full text]
  • Chapter 10 Document Object Model and Dynamic HTML
    Chapter 10 Document Object Model and Dynamic HTML The term Dynamic HTML, often abbreviated as DHTML, refers to the technique of making Web pages dynamic by client-side scripting to manipulate the document content and presen- tation. Web pages can be made more lively, dynamic, or interactive by DHTML techniques. With DHTML you can prescribe actions triggered by browser events to make the page more lively and responsive. Such actions may alter the content and appearance of any parts of the page. The changes are fast and e±cient because they are made by the browser without having to network with any servers. Typically the client-side scripting is written in Javascript which is being standardized. Chapter 9 already introduced Javascript and basic techniques for making Web pages dynamic. Contrary to what the name may suggest, DHTML is not a markup language or a software tool. It is a technique to make dynamic Web pages via client-side programming. In the past, DHTML relies on browser/vendor speci¯c features to work. Making such pages work for all browsers requires much e®ort, testing, and unnecessarily long programs. Standardization e®orts at W3C and elsewhere are making it possible to write standard- based DHTML that work for all compliant browsers. Standard-based DHTML involves three aspects: 447 448 CHAPTER 10. DOCUMENT OBJECT MODEL AND DYNAMIC HTML Figure 10.1: DOM Compliant Browser Browser Javascript DOM API XHTML Document 1. Javascript|for cross-browser scripting (Chapter 9) 2. Cascading Style Sheets (CSS)|for style and presentation control (Chapter 6) 3. Document Object Model (DOM)|for a uniform programming interface to access and manipulate the Web page as a document When these three aspects are combined, you get the ability to program changes in Web pages in reaction to user or browser generated events, and therefore to make HTML pages more dynamic.
    [Show full text]
  • How-To Guide: Copy and Adjust Skins (SAP CRM 7.0).Pdf
    How-to Guide: Copy and Adjust Skins ® SAP CRM 7.0 Target Audience System administrators Technology consultants Document version: 1.1 – December 2008 SAP AG Dietmar-Hopp-Allee 16 69190 Walldorf Germany T +49/18 05/34 34 24 F +49/18 05/34 34 20 www.sap.com © Copyright 2007 SAP AG. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, and other SAP products and services mentioned herein as well as their Some software products marketed by SAP AG and its distributors respective logos are trademarks or registered trademarks of SAP AG contain proprietary software components of other software vendors. in Germany and in several other countries all over the world. All other product and service names mentioned are the trademarks of their Microsoft, Windows, Outlook, and PowerPoint are registered respective companies. Data contained in this document serves trademarks of Microsoft Corporation. informational purposes only. National product specifications may vary. IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries, These materials are subject to change without notice. These materials xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, are provided by SAP AG and its affiliated companies ("SAP Group") Tivoli, Informix, i5/OS, POWER, POWER5, OpenPower and for informational purposes only, without representation or warranty of PowerPC are trademarks or registered trademarks of IBM Corporation.
    [Show full text]
  • Head First HTML with CSS & XHTML
    Head First HTML with CSS & XHTML Wouldn’t it be dreamy if there was an HTML book that didn’t assume you knew what elements, attributes, validation, selectors, and pseudo-classes were, all by page three? It’s probably just a fantasy... Elisabeth Freeman Eric Freeman Beijing • Cambridge • Köln • Sebastopol • Taipei • Tokyo Head First HTML with CSS and XHTML by Elisabeth Freeman and Eric Freeman Copyright © 2006 O’Reilly Media, Inc. 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 Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (safari.oreilly.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected]. Associate Publisher: Mike Hendrickson Series Creators: Kathy Sierra, Bert Bates Series Advisors: Elisabeth Freeman, Eric Freeman Editor: Brett McLaughlin Cover Designers: Ellie Volckhausen, Karen Montgomery HTML Wranglers: Elisabeth Freeman, Eric Freeman Structure: Elisabeth Freeman Style: Eric Freeman Page Viewer: Oliver Printing History: December 2005: First Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. The Head First series designations, Head First HTML with CSS and XHTML, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps.
    [Show full text]
  • Framework for Developing Offline HTML5 Applications
    MASARYK UNIVERSITY FACULTY}w¡¢£¤¥¦§¨ OF I !"#$%&'()+,-./012345<yA|NFORMATICS Framework for Developing Offline HTML5 Applications DIPLOMA THESIS Petr Kunc Brno, 2013 Declaration Hereby I declare, that this paper is my original authorial work, which I have worked out by my own. All sources, references and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source. Advisor: doc. RNDr. Tomás Pitner, PhD. ii Acknowledgement Above all, I would like to thank my advisor doc. RNDr. Tomáš Pitner, PhD. for leading not only this diploma thesis but also for leading me during my studies. I would also like to thank my colleagues in Laboratory of Software Architectures and Information Systems, especially Mgr. Filip Nguyen and Mgr. Daniel Tovarˇnákfor priceless advice on implementation and for providing their knowledge. Nevertheless, I would like to thank my colleagues in Celebrio Software company. iii Abstract The aim of this thesis is to provide detailed information about developing offline web ap- plications. The thesis presents important technologies in the development and mostly deals with Application cache technology. It summarizes advantages and also disadvantages and problems of the technology. Then, it offers solutions to some of the problems and introduces framework for build- ing offline web applications more sophisticatedly. At last, demonstration application is pre- sented which shows the benefits of proposed technology. iv Keywords HTML5, offline, web applications, application
    [Show full text]
  • Advanced HTML5 and CSS3 Specialist: CIW Web and Mobile Design Series Student Guide CCL02-CDHTCS-CK-1405 • Version 1.0 • Rd042214
    Advanced HTML5 and CSS3 Specialist: CIW Web and Mobile Design Series Student Guide CCL02-CDHTCS-CK-1405 • version 1.0 • rd042214 Advanced HTML5 and CSS3 Specialist Student Guide Chief Executive Officer Barry Fingerhut Vice President, Operations & Development Todd Hopkins Senior Content Developer Kenneth A. Kozakis Managing Editor Susan M. Lane Editor Sarah Skodak Project Manager/Publisher Tina Strong Customer Service Certification Partners, LLC 1230 W. Washington St., Ste. 201 Tempe, AZ 85281 (602) 275-7700 Copyright © 2014, All rights reserved. Advanced HTML5 and CSS3 Specialist Developer Patrick T. Lane Contributors James Stanger, Ph.D., Sadie Hebert, Jason Hebert and Susan M. Lane Editor Susan M. Lane Project Manager/Publisher Tina Strong Trademarks Certification Partners is a trademark of Certification Partners, LLC. All product names and services identified throughout this book are trademarks or registered trademarks of their respective companies. They are used throughout this book in editorial fashion only. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with the book. Copyrights of any screen captures in this book are the property of the software's manufacturer. Disclaimer Certification Partners, LLC, makes a genuine attempt to ensure the accuracy and quality of the content described herein; however, Certification Partners makes no warranty, express or implied, with respect to the quality, reliability, accuracy, or freedom from error of this document or the products it describes. Certification Partners makes no representation or warranty with respect to the contents hereof and specifically disclaims any implied warranties of fitness for any particular purpose. Certification Partners disclaims all liability for any direct, indirect, incidental or consequential, special or exemplary damages resulting from the use of the information in this document or from the use of any products described in this document.
    [Show full text]
  • Adaptive Mobile Web Pages Using HTML5 and CSS for Engineering Faculty
    ASEE-NMWSC2013-0057 Adaptive Mobile Web Pages Using HTML5 and CSS for Engineering Faculty Wen-Chen Hu Naima Kaabouch Department of Computer Science Department of Electrical Engineering University of North Dakota University of North Dakota Grand Forks, ND 58202-9015 Grand Forks, ND 58202-7165 [email protected] [email protected] Hung-Jen Yang Hongyu Guo Department of Industrial Department of Computer Science Technology Education University of Houston – Victoria National Kaohsiung Normal Victoria, TX 77901 University [email protected] Kaohsiung City, Taiwan 80201 [email protected] Abstract Many engineering faculty members have their class materials like lecture slides and assignments posted on the Internet, so students can easily access them anytime. Nowadays students also like to access the online class materials anywhere via their mobile devices such as smartphones or tablet computers. However, traditional Web pages are distorted or become awkward to use when they are displayed on devices. Additionally, mobile features of handheld devices such as geolocation information, which could be useful for engineering education, are usually ignored. The introduction of HTML5 and the newest CSS have greatly solved this problem. This paper introduces the mobile features of HTML5 and CSS to engineering faculty for building adaptive mobile class Web pages. Introduction Using Web to deliver engineering education has been a trend. Many engineering students are used to do various things on the Web, e.g., printing class slides and assignments, checking the class announcements, posting questions, interactively discussing issues with fellow students, etc. On the other hand, IDC, a market research firm, predicted that more users would access the Internet wirelessly via a mobile device compared to the users using wired connection by 20154.
    [Show full text]
  • Rewriteengine on # Libwww-Perl Access Fix # Rewritecond
    # RewriteEngine On # Libwww-perl Access Fix # RewriteCond %{HTTP_USER_AGENT} libwww-perl.* # RewriteRule .* – [F,L] # Redirect www to non-www # RewriteEngine On # RewriteBase / # RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] # RewriteRule ^(.*)$ http://%1/$1 [R=301,L] # Turn eTags Off # https://github.com/ucarmetin/toolbox/blob/master/lists/awesome-htaccess.md#turn-etags- off # <IfModule mod_headers.c> # Header unset ETag # </IfModule> # FileETag None # BEGIN GZIP <ifmodule mod_deflate.c> AddType x-font/otf .otf AddType x-font/ttf .ttf AddType x-font/eot .eot AddType x-font/woff .woff AddType x-font/woff2 .woff2 AddType image/x-icon .ico AddType image/png .png AddType text/css .css AddType image/svg+xml .svg AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript image/svg+xml x-font/otf x-font/ttf x- font/eot x-font/woff x-font/woff2 image/x-icon image/png </ifmodule> # END GZIP # BEGIN Cache-Control Headers <ifModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header set Cache-Control "public" Header set Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header set Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header set Cache-Control "private, must-revalidate" </filesMatch> </ifModule> # END Cache-Control Headers # Proper MIME Types <IfModule mod_mime.c> # Audio AddType audio/mp4 m4a f4a f4b AddType audio/ogg oga ogg # JavaScript AddType application/javascript
    [Show full text]
  • Working with Html, Css, and Http
    Chapter 2 WORKING WITH HTML, CSS, AND HTTP Working with HTML An essential aspect of running a website is creating HTML files. Even sites that rely heavily on page technologies other than static HTML, such as script-driven pages, inevitably keep many static HTML files on the site. Although Web authors can write HTML in any text editor, many have adopted specialized HTML editor programs to handle the job. Ideally, an HTML editor should manage the job of converting an authors writing into the structures defined by the HTML standard without requiring the author to know the details of that standard. As the job is accomplished, the editor program may carry out additional tasks, such as letting the author fine-tune the finished documents appearance or handling site management tasks such as uploading documents to a server and checking its links. The most widely used HTML editors handle these secondary tasks with great success. Over the years, however, many designers created their actual HTML code with an emphasis on appearance rather than structure. This so-called presentational markup achieved popularity with an older generation of browsers because no widely supported alternative to controlling an HTML documents appearance was available. Presentational HTML has drawbacks, though, and a growing number of Web authors are abandoning it in favor of HTML markup that describes a documents structure. Reasons for this choice include: Library Technology Reports Many aspects of presentational markup make assumptions about the users display environment (specifically, screen resolution and window width) that are increasingly unwarranted and may lead to accessibility problems.
    [Show full text]
  • CSS Activity Overview
    Girls Who Code At Home Activist Toolkit Part 4 Building: Intro to CSS Activity Overview Now that you have some HTML written for your website, it’s time to beautify it with some CSS, or Cascading Style Sheets! CSS, describes what kinds of presentation rules – or styles – should be applied to HTML elements. For example, if you wanted to make the text larger or smaller you would do that using CSS. CSS allows you to change the way content on your website looks, including text color, text size, the fonts used, background colors or images, and so much more. There are so many different ways you can style your website but in this tutorial we will show you how to style the text, images, the navigation bar, and take action checklist. Example Project Buy the end of Part 4, your website will have colors, fonts, and more! HTML CSS Materials ➔ Computer Note: If you did not complete Part 3, you can access Parts 1 and 2 here. If ➔ Trinket or the text editor of your choice you have some experience with HTML, ➔ Your Mockup from Part 2 you can remix and use the Part 3 ➔ Code you wrote during Part 3 Example Code that stops at the end of Part 3. ➔ Part 4 Example Code PART 1 PART 2 PART 3 PART 4 PART 5 PLANNING PLANNING BUILDING BUILDING BUILDING Research & Wireframe Intro to Intro to Make it Feedback & Mockup HTML CSS Responsive with CSS Identify and Layout the Build the Style the research a skeleton of framework of HTML Add styling cause.
    [Show full text]
  • 07 5390 8136 - - [email protected]
    07 5390 8136 - www.snapcodesign.com.au - [email protected] Overall score for http://www.cbdremovalssydney.com.au/ Your Score is 69/100 13 Important Fixes 3 Semi-Important Fixes 31 Passed Checks The meta title of your page has a length of 86 characters. Most search engines will truncate meta titles to 70 characters. BEST REMOVALISTS SYDNEY |SYDNEY REMOVALISTS| HOME OFFICE REMOVALS SYDNEY- CBD REMOVALS The meta description of your page has a length of 31 characters. Most search engines will truncate meta descriptions to 160 characters. Removalists in Sydney Australia BEST REMOVALISTS SYDNEY |SYDNEY REMOVALISTS| HOME OFFICE REMOVALShttp://www.cbdremovalssydney.com.au/ SYDNEY- CBD REMOVALS We Are Best Sydney removalists, CBD Removals don&#39;t charge base to location fees. When you need a office, home or commercial Sydney removals service, call There is likely no optimal keyword density (search engine algorithms have evolved beyond keyword density metrics as a significant ranking factor). It can be useful, however, to note which keywords appear most often in your page, and if they reflect the intended topic of your page. More importantly, the keywords in your page should appear within natural sounding and grammatically correct copy. sydney - 16 times removalists - 16 times removals - 9 times furniture - 5 times service - 3 times Congratulations! You are using your keywords in your meta-tags, which helps search engines properly identify the topic of your page. Keyword(s) included in Meta-Title Tag Keyword(s) included in Meta-Description
    [Show full text]