DOCSLIB.ORG

01 Creation of HTML Pages with Frames, Links, Tables and Other Tags Date

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
01 Creation of HTML Pages with Frames, Links, Tables and Other Tags Date www.vidyarthiplus.com Ex. No. : 01 Creation of HTML pages with frames, links, tables and other tags Date : AIM: To create a simple webpage using HTML that includes all tags. ALGORITHM: 1. Write a HTML program in the notepad with the tags such as A. FRAMES With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The Frameset Tag The <frameset> tag defines how to divide the window into frames. The Frame Tag The <frame> tag defines what HTML document to put into each frame. Example: <frameset cols="25%, 75 %"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> Tags and their Description: <frameset> Defines a set of frames <frame> Defines a sub window (a frame) www.vidyarthiplus.com www.vidyarthiplus.com B. LINKS A hyperlink is a reference (an address) to a resource on the web. Example: <a href="http://www.w3schools.com/">Visit W3Schools!</a> The href Attribute The href attribute defines the link "address". The target Attribute The target attribute defines where the linked document will be opened. Tag and its Description: <a> Defines an anchor C. TABLES Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. Example: <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> Tags and their Description: <Table> Defines a table <th> Defines a table header <tr> Defines a table row <td> Defines a table cell 2. Use appropriate tags to apply the background colors and desired styles as Required and save the file with .html extension. www.vidyarthiplus.com www.vidyarthiplus.com 3. Run the program in the Web Browser. PROGRAM: Home.html <html> <head> <title>Home</title> </head> <frameset rows="25%,*"> <frame src="frame1.html"> <frameset cols="25%,*"> <frame src="frame2.html" name="f2"> <frame src="frame3.html" name="f3"> </frameset> </html> Frame1.html <html> <head><title>frame1</title> </head> <body bgcolor="blue"> <h1 style="color.green;font-size:15pt"> <marquee bgcolor="#cccccc" loop="-1" scrollamount="6" width="100%"> THIRUVALLUVAR COLLEGE OF ENGINEERING AND TECHNOLOGY </marquee> </h1> </body> </html> Frame2.html <html> <head><title>frame2</title> <style type="text/css"> h1 { font-size:25pt;color:pink; www.vidyarthiplus.com www.vidyarthiplus.com } </style> </head> <body bgcolor="red"> <h1>click the link</h1> <a href="intro.html" target=f3>Introduction</a><br> <a href="dept.html" target=f3>Departments</a><br> <a href="ad.html" target=f3>ADDRESS</a><br> <a href="feed.html" target=f3>Feedback</a><br> <a href="gall.html" target=f3>Gallery</a><br> </body> </html Frame3.html <html> <head><title>1st page</title> <link rel="stylesheet" type="text/css" href="C:\Documents and Settings\Administrator\Desktop\ab\css1.css"/> </head> <body bgcolor="tan"> <h2> <center>YOU ARE IN HOME PAGE</center></h2> </body> </html> Intro.html <html> <head><title>intro</title> </head> <body bgcolor="black"> <font color=red> <p> Welcome to Thiruvalluvar College of Engineering and Technology - Affiliated to Anna University<br> <br> www.vidyarthiplus.com www.vidyarthiplus.com “Thiruvalluvar College of Engineering and Technology resolves to mould a human task force useful to the society through transparent methods that lead to continuous improvement of the resources and state-of-the-art methodologies conforming to recognized standards.” </p> </font> </body> </html> Ad.html <html> <head><title>ADDRESS</title> </head> <body bgcolor="black"> <p> <font color=red> Name:Thiruvalluvar College of Engineering and Technology<br> Location:Vandavasi<br> Contact No:04183-221444<br> Website: www.google.co.in<br> </font> </p> </body> </html> Dept.html <html> <head><title>Departments</title> </head> <body> <div align="center"> <table border=2> <tr> <th>Dept code</th> <th>Dept name</th> </tr> www.vidyarthiplus.com www.vidyarthiplus.com <tr> <td>01</td> <td>CSE</td> </tr> <tr> <td>02</td> <td>ECE</td> </tr> <tr> <td>03</td> <td>EEE</td> </tr> <tr> <td>04</td> <td>IT</td> </tr> <tr> <td>05</td> <td>MECH</td> </tr> <tr> <td>06</td> <td>AERO</td> </tr> </table> </div> </body> </html> Feed.html <html> <head><title>feed</title> </head> <body bgcolor="black"> <p> <font color=green> www.vidyarthiplus.com www.vidyarthiplus.com To give your feedback mail to [email protected] </font> </p> </body> </html> Gall.html <html> <head><title>gall</title> </head> <body bgcolor="pink"> <p> <font color=blue> College Front View</font> </p> <img src="file:///d:/google.JPG" height="300" width="400"/> </body> </html> www.vidyarthiplus.com www.vidyarthiplus.com OUTPUT: www.vidyarthiplus.com www.vidyarthiplus.com www.vidyarthiplus.com www.vidyarthiplus.com RESULT: Thus the HTML pages are created using frames, links, tables and other tags and have been successfully executed. www.vidyarthiplus.com www.vidyarthiplus.com Ex. No. : 2 APPLYING STYLE TO AN HTML PAGE USING CSS Date: Aim: To create an html page, and to apply style formatting using external Cascading Style Sheet. Algorithm: Step 1: Start the program. Step 2: Create an html page. Step 3: Create an external CSS (Cascading Style Sheet). Step 4: Link the external style sheet page with the main html page. Step 5: Load the main page. Step 6: The style formatting will be applied to the main html page. Step 7: Stop the program. www.vidyarthiplus.com www.vidyarthiplus.com PROGRAM: Style.html <html> <head> <style type="text/css"> .class1 A:link {text-decoration: none} .class1 A:visited {text-decoration: none} .class1 A:active {text-decoration: none} .class1 A:hover {text-decoration: underline; color: red;} .class2 A:link {text-decoration: underline overline} .class2 A:visited {text-decoration: underline overline} .class2 A:active {text-decoration: underline overline} .class2 A:hover {text-decoration: underline; color: green;} </style> <title>My first styled page</title> <link rel="stylesheet"href="mystyle.css"> <style type="text/css"> <!-- .style2 {font-family: Verdana, Arial, Helvetica, sans-serif} --> </style> </head> <body> <!--site navigation menu--> <span class="class2"> <ul class="navbar"> <li><a href="home.html">HOME</a> <li><a href="home.html">Department</a> <li><a href="home.html">Contact us</a> </ul> </span> <!--Main content--> <h1>My first Internal styled page</h1> <p> Thiruvalluvar College of Engineering and Technology resolves to mould a human task force useful to the society through transparent methods www.vidyarthiplus.com www.vidyarthiplus.com that lead to continuous improvement of the resources and state-of-the-art methodologies conforming to recognized standards. <!--sign and date the page--> <p><address class="style2" >M.E(CSE) <br> 31-06-2011</address></p> </body> </html> Mystyle.html: <html> <head> <title>My first styled page</title> <link rel="stylesheet"href="mystyle.css"> </head> <body> <!--site navigation menu--> <ul class="navbar"> <li><a href="About.html">About us</a> <li><a href="home.html">Department</a> <li><a href="home.html">Contact us</a> </ul> <!--Main content--> <h1>My first External styled page</h1> <p> THIRUVALLUVAR COLLEGE OF ENGINEERING AND TECHNOLOGY <BR> ARUNACHAL CITY<br> VANDAVASI<br> <p> An ISO 9001:2008 institution<br> NBA Accredited<br> <!--sign and date the page--> <p><address>December 28th <br> Dept. of I.T.</address> </body> </html> www.vidyarthiplus.com www.vidyarthiplus.com /* CSS Document */ BODY { PADDING-LEFT: 11em; COLOR: purple; FONT-FAMILY: Georgia, "Times New Roman", Times, serif; BACKGROUND-COLOR: #d8da3d } UL.navbar { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 1em; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 9em; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 2em } H1 { FONT-FAMILY: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } UL.navbar LI { BORDER-RIGHT: 1em solid; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: white; PADDING-BOTTOM: 0.3em; MARGIN: 0.5em 0px; PADDING-TOP: 0.3em } www.vidyarthiplus.com www.vidyarthiplus.com OUTPUT: RESULT: Thus an html page is created and style formatting is applied using external Cascading Style Sheet. www.vidyarthiplus.com www.vidyarthiplus.com Ex. No. : 3(A) Client Side Programming Date : Java script for Displaying and Comparing Date AIM: To write a Java script program for displaying and comparing two dates. ALGORITHM: Java script program for displaying date 1. Create a variable for DATE object as shown below, var currentTime = new Date() 2. Obtain the current date from it using getDate() as shown below, Var d=currentTime.getDate() 3 Display the value of d. Java script program for comparing two dates 1. Get two dates to be compared from the user in string format. 2. Convert the obtained string into DATE objects as shown below, var todate = new Date(todatestring); var fromdate = new Date(fromdatestring); 3. Compare these two dates using ‘<’ operator. www.vidyarthiplus.com www.vidyarthiplus.com PROGRAM: <html> <script> function Compare() { if (document.frmTest.startDate.value > document.frmTest.endDate.value){ alert ("Start Date is greater"); } if (document.frmTest.startDate.value < document.frmTest.endDate.value){ alert ("End Date is greater"); } if (document.frmTest.startDate.value == document.frmTest.endDate.value){ alert ("Dates are the same"); } } </script> <body> <form name="frmTest"> Start Date: <b><input type="text" name="startDate" size="14"></b> <br> <br> End Date: <b><input type="text" name="endDate" size="14"></b> <a href="javascript:Compare();">Compare</a> </form> </body> </html> www.vidyarthiplus.com www.vidyarthiplus.com OUTPUT: RESULT: Thus the program for displaying and comparing two dates has been completed successfully and output is verified. www.vidyarthiplus.com www.vidyarthiplus.com Ex. No. : 3.b Client Side Programming Date : Form Validation AIM: To write a Java script program for Form Validation including text field, radio buttons, check boxes, list box and other controls.
Load more

Recommended publications
  • Windows 7 Operating Guide
    Welcome to Windows 7 1 1 You told us what you wanted. We listened. This Windows® 7 Product Guide highlights the new and improved features that will help deliver the one thing you said you wanted the most: Your PC, simplified. 3 3 Contents INTRODUCTION TO WINDOWS 7 6 DESIGNING WINDOWS 7 8 Market Trends that Inspired Windows 7 9 WINDOWS 7 EDITIONS 10 Windows 7 Starter 11 Windows 7 Home Basic 11 Windows 7 Home Premium 12 Windows 7 Professional 12 Windows 7 Enterprise / Windows 7 Ultimate 13 Windows Anytime Upgrade 14 Microsoft Desktop Optimization Pack 14 Windows 7 Editions Comparison 15 GETTING STARTED WITH WINDOWS 7 16 Upgrading a PC to Windows 7 16 WHAT’S NEW IN WINDOWS 7 20 Top Features for You 20 Top Features for IT Professionals 22 Application and Device Compatibility 23 WINDOWS 7 FOR YOU 24 WINDOWS 7 FOR YOU: SIMPLIFIES EVERYDAY TASKS 28 Simple to Navigate 28 Easier to Find Things 35 Easy to Browse the Web 38 Easy to Connect PCs and Manage Devices 41 Easy to Communicate and Share 47 WINDOWS 7 FOR YOU: WORKS THE WAY YOU WANT 50 Speed, Reliability, and Responsiveness 50 More Secure 55 Compatible with You 62 Better Troubleshooting and Problem Solving 66 WINDOWS 7 FOR YOU: MAKES NEW THINGS POSSIBLE 70 Media the Way You Want It 70 Work Anywhere 81 New Ways to Engage 84 INTRODUCTION TO WINDOWS 7 6 WINDOWS 7 FOR IT PROFESSIONALS 88 DESIGNING WINDOWS 7 8 WINDOWS 7 FOR IT PROFESSIONALS: Market Trends that Inspired Windows 7 9 MAKE PEOPLE PRODUCTIVE ANYWHERE 92 WINDOWS 7 EDITIONS 10 Remove Barriers to Information 92 Windows 7 Starter 11 Access
    [Show full text]
  • The Desktop (Overview)
    The desktop (overview) The desktop is the main screen area that you see after you turn on your computer and log on to Windows. Like the top of an actual desk, it serves as a surface for your work. When you open programs or folders, they appear on the desktop. You can also put things on the desktop, such as files and folders, and arrange them however you want. The desktop is sometimes defined more broadly to include the taskbar and Windows Sidebar. The taskbar sits at the bottom of your screen. It shows you which programs are running and allows you to switch between them. It also contains the Start button , which you can use to access programs, folders, and computer settings. On the side of the screen, Sidebar contains small programs called gadgets. The desktop, taskbar, and Sidebar Where did my desktop go? Because programs run on top of the desktop, the desktop itself is often partially or completely hidden. But it's still there, underneath everything. To see the whole desktop without closing any of your open programs or windows, click the Show Desktop button on the taskbar. The desktop is revealed. Click the icon again to restore all of your windows to the way they were. Desktop Training Session Handout Page 1 http://ict.maxwell.syr.edu/vista/ Working with desktop icons Icons are small pictures that represent files, folders, programs, and other items. When you first start Windows, you'll see at least one icon on your desktop: the Recycle Bin (more on that later).
    [Show full text]
  • Spot-Tracking Lens: a Zoomable User Interface for Animated Bubble Charts
    Spot-Tracking Lens: A Zoomable User Interface for Animated Bubble Charts Yueqi Hu, Tom Polk, Jing Yang ∗ Ye Zhao y Shixia Liu z University of North Carolina at Charlotte Kent State University Tshinghua University Figure 1: A screenshot of the spot-tracking lens. The lens is following Belarus in the year 1995. Egypt, Syria, and Tunisia are automatically labeled since they move faster than Belarus. Ukraine and Russia are tracked. They are visible even when they go out of the spotlight. The color coding of countries is the same as in Gapminder[1], in which countries from the same geographic region share the same color. The world map on the top right corner provides a legend of the colors. ABSTRACT thus see more details. Zooming brings many benefits to visualiza- Zoomable user interfaces are widely used in static visualizations tion: it allows users to examine the context of an interesting object and have many benefits. However, they are not well supported in by zooming in the area where the object resides; labels overcrowded animated visualizations due to problems such as change blindness in the original view can be displayed without overlaps after zoom- and information overload. We propose the spot-tracking lens, a new ing in; it allows users to focus on a local area and thus reduce their zoomable user interface for animated bubble charts, to tackle these cognitive load. problems. It couples zooming with automatic panning and provides In spite of these benefits, zooming is not as well supported in an- a rich set of auxiliary techniques to enhance its effectiveness.
    [Show full text]
  • Tracker Helps You Mark the Steps but Does Not Limit Your Control Over Them
    Tracker 6 Help Tracker is a free video analysis and modeling tool from Open Source Physics (OSP). Features include manual and automated object tracking with position, velocity and acceleration overlays and data, video filters, line profiles for analysis of spectra and interference patterns, and dynamic particle models for direct comparison with real-world videos. It is designed to be used in physics education but is also widely used in many other fields. To start using Tracker, see getting started. Getting Started When you first open Tracker it appears as shown below. Here's how to start analyzing a video: 1. Open a video or tracker file. 2. Identify the frames ("video clip") you wish to analyze. 3. Calibrate the video scale. 4. Set the reference frame origin and angle. 5. Track objects of interest with the mouse. 6. Plot and analyze the tracks. 7. Save your work in a tracker file. 8. Export track data to a spreadsheet. 9. Print, save or copy/paste images for reports. Note that the order of the buttons on the toolbar mirrors the steps used to analyze a video. For more information about Tracker's user interface, including user customization, see user interface. 1. Open a video or tracker file To open a local video, tracker tab (.trk), or tracker project (.trz) file, click the Open button or File|Open File menu item and select the file with the chooser, or drag and drop the file onto Tracker. You can also open still and animated image files (.jpg, .gif, .png), numbered sequences of image files, and images pasted from the clipboard.
    [Show full text]
  • Webgl™ Optimizations for Mobile
    WebGL™ Optimizations for Mobile Lorenzo Dal Col Senior Software Engineer, ARM 1 Agenda 1. Introduction to WebGL™ on mobile . Rendering Pipeline . Locate the bottleneck 2. Performance analysis and debugging tools for WebGL . Generic optimization tips 3. PlayCanvas experience . WebGL Inspector 4. Use case: PlayCanvas Swooop . ARM® DS-5 Streamline . ARM Mali™ Graphics Debugger 5. Q & A 2 Bring the Power of OpenGL® ES to Mobile Browsers What is WebGL™? Why WebGL? . A cross-platform, royalty free web . It brings plug-in free 3D to the web, standard implemented right into the browser. Low-level 3D graphics API . Major browser vendors are members of . Based on OpenGL® ES 2.0 the WebGL Working Group: . A shader based API using GLSL . Apple (Safari® browser) . Mozilla (Firefox® browser) (OpenGL Shading Language) . Google (Chrome™ browser) . Opera (Opera™ browser) . Some concessions made to JavaScript™ (memory management) 3 Introduction to WebGL™ . How does it fit in a web browser? . You use JavaScript™ to control it. Your JavaScript is embedded in HTML5 and uses its Canvas element to draw on. What do you need to start creating graphics? . Obtain WebGLrenderingContext object for a given HTMLCanvasElement. It creates a drawing buffer into which the API calls are rendered. For example: var canvas = document.getElementById('canvas1'); var gl = canvas.getContext('webgl'); canvas.width = newWidth; canvas.height = newHeight; gl.viewport(0, 0, canvas.width, canvas.height); 4 WebGL™ Stack What is happening when a WebGL page is loaded . User enters URL . HTTP stack requests the HTML page Browser . Additional requests will be necessary to get Space User JavaScript™ code and other resources WebKit JavaScript Engine .
    [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]
  • Digital Photo Frame User's Manual
    PO_11960_XSU_00810B_Manual_en-gb Lang: English FI No.: 11960 Proof: 01 Date: 08/09/08 Page: 1 Digital Photo Frame User’s Manual Questions? Need some help? If you still have questions, call our Or visit help line found on the www.polaroid.com/support This manual should help you insert with this icon: understand your new product. PO_11960_XSU_00810B_Manual_en-gb Lang: English FI No.: 11960 Proof: 01 Date: 08/09/08 Page: 2 Controls and Basic Instructions CONGRATULATIONS on your purchase of a Polaroid Digital Photo Frame. Please read carefully and follow all instructions in the manual and those marked on the product before fi rst use. Failing to follow these warnings could result in personal injury or damage to the device. Also, remember to keep this User’s Manual in a convenient location for future reference. Important: Save the original box and all packing material for future shipping needs. Controls AUTO: Press it means exit.Hold for 2 seconds to start a Slide show. MENU: Press to enter or select. Hold for 2 seconds to enter the SETUP menu. UP ARROW Press to move up or select Previous. DOWN ARROW Press to move down or select Next. POWER: Turns power on or off. Installing a Flash Media Card USB Port 1. Find the slot that fi ts your fl ash media card. 2. Insert the card in the correct slot. 3. To remove the card, simply pull it out from the card slot. MS/SD/MMC Card Power Note: Do not remove any memory card from its slot while pictures are playing.
    [Show full text]
  • Webgl: the Standard, the Practice and the Opportunity Web3d Conference August 2012
    WebGL: The Standard, the Practice and the Opportunity Web3D Conference August 2012 © Copyright Khronos Group 2012 | Page 1 Agenda and Speakers • 3D on the Web and the Khronos Ecosystem - Neil Trevett, NVIDIA and Khronos Group President • Hands On With WebGL - Ken Russell, Google and WebGL Working Group Chair © Copyright Khronos Group 2012 | Page 2 Khronos Connects Software to Silicon • Khronos APIs define processor acceleration capabilities - Graphics, video, audio, compute, vision and sensor processing APIs developed today define the functionality of platforms and devices tomorrow © Copyright Khronos Group 2012 | Page 3 APIs BY the Industry FOR the Industry • Khronos standards have strong industry momentum - 100s of man years invested by industry leading experts - Shipping on billions of devices and multiple operating systems • Khronos is OPEN for any company to join and participate - Standards are truly open – one company, one vote - Solid legal and Intellectual Property framework for industry cooperation - Khronos membership fees to cover expenses • Khronos APIs define core device acceleration functionality - Low-level “Foundation” functionality needed on every platform - Rigorous conformance tests for cross-vendor consistency • They are FREE - Members agree to not request royalties Silicon Software © Copyright Khronos Group 2012 | Page 4 Apple Over 100 members – any company worldwide is welcome to join Board of Promoters © Copyright Khronos Group 2012 | Page 5 API Standards Evolution WEB INTEROP, VISION MOBILE AND SENSORS DESKTOP OpenVL New API technology first evolves on high- Mobile is the new platform for Apps embrace mobility’s end platforms apps innovation. Mobile unique strengths and need Diverse platforms – mobile, TV, APIs unlock hardware and complex, interoperating APIs embedded – mean HTML5 will conserve battery life with rich sensory inputs become increasingly important e.g.
    [Show full text]
  • 1 Lecture 15: Animation
    Lecture 15: Animation Fall 2005 6.831 UI Design and Implementation 1 1 UI Hall of Fame or Shame? Suggested by Ryan Damico Fall 2005 6.831 UI Design and Implementation 2 Today’s candidate for the Hall of Shame is this entry form from the 1800Flowers web site. The purpose of the form is to enter a message for a greeting card that will accompany a delivered flower arrangement. Let’s do a little heuristic evaluation of this form: Major: The 210 character limit is well justified, but hard for a user to check. Suggest a dynamic %-done bar showing how much of the quota you’ve used. (error prevention, flexibility & efficiency) Major: special symbols like & is vague. What about asterisk and hyphen – are those special too? What am I allowed to use, exactly? Suggest highlighting illegal characters, or beeping and not allowing them to be inserted. (error prevention) Cosmetic: the underscores in the Greeting Type drop-down menu look like technical identifiers, and some even look mispelled because they’ve omitted other punctuation. Bosss_Day? (Heuristic: match the real world) Major: how does Greeting Type affect card? (visibility, help & documentation) Cosmetic: the To:, Message,: and From: captions are not likely to align with what the user types (aesthetic & minimalist design) 2 Today’s Topics • Design principles • Frame animation • Palette animation • Property animation • Pacing & path Fall 2005 6.831 UI Design and Implementation 3 Today we’re going to talk about using animation in graphical user interfaces. Some might say, based on bad experiences with the Web, that animation has no place in a usable interface.
    [Show full text]
  • Khronos Open API Standards for Mobile Graphics, Compute And
    Open API Standards for Mobile Graphics, Compute and Vision Processing GTC, March 2014 Neil Trevett Vice President Mobile Ecosystem, NVIDIA President Khronos © Copyright Khronos Group 2014 - Page 1 Khronos Connects Software to Silicon Open Consortium creating ROYALTY-FREE, OPEN STANDARD APIs for hardware acceleration Defining the roadmap for low-level silicon interfaces needed on every platform Graphics, compute, rich media, vision, sensor and camera processing Rigorous specifications AND conformance tests for cross- vendor portability Acceleration APIs BY the Industry FOR the Industry Well over a BILLION people use Khronos APIs Every Day… © Copyright Khronos Group 2014 - Page 2 Khronos Standards 3D Asset Handling - 3D authoring asset interchange - 3D asset transmission format with compression Visual Computing - 3D Graphics - Heterogeneous Parallel Computing Over 100 companies defining royalty-free APIs to connect software to silicon Camera Control API Acceleration in HTML5 - 3D in browser – no Plug-in - Heterogeneous computing for JavaScript Sensor Processing - Vision Acceleration - Camera Control - Sensor Fusion © Copyright Khronos Group 2014 - Page 3 The OpenGL Family OpenGL 4.4 is the industry’s most advanced 3D API Cross platform – Windows, Linux, Mac, Android Foundation for productivity apps Target for AAA engines and games The most pervasively available 3D API – 1.6 Billion devices and counting Almost every mobile and embedded device – inc. Android, iOS Bringing proven desktop functionality to mobile JavaScript binding to OpenGL
    [Show full text]
  • Prof-UIS Frame Features White Paper
    Prof-UIS Frame Features White Paper Published: January 2005 FOSS Software, Inc. 151 Main St., Suite 3 Salem, NH 03079 Phones: (603) 894 6425, (603) 894 6427 Fax: (603) 251 0077 E-mail: [email protected] Technical Support Forum: http://prof-uis.com/forum.aspx E-mail: [email protected] Contents Introduction.............................................................................................................................................3 Why choose us?.....................................................................................................................................4 Set of Samples.....................................................................................................................................4 CHM Help.............................................................................................................................................4 Technical Support ................................................................................................................................4 Royalty Free Licensing.........................................................................................................................4 Excellent Value ....................................................................................................................................4 Prof-UIS Feature List..............................................................................................................................5 GUI themes......................................................................................................................................5
    [Show full text]
  • Link to Website Fails to Open Inside Blackboard- Page Never Loads Issue Description Recommended Action
    Link to Website Fails to Open Inside Blackboard- SUPPORT eLearning Page Never Loads Known Issue Issue Description Normally, when a link to an outside website is clicked and loads inside Blackboard, a gray bar will appear at the top of the frame, stating that “The Content Below is Outside of the Blackboard Learn Environment”. However, non-secured websites (i.e. url addresses beginning with HTTP://) or sites containing scripted or multimedia content may have trouble loading into frames within Blackboard. The gray notice bar will appear, but the webpage will never load. Also, in Internet Explorer an additional message may appear, stating “The Content Cannot Be Displayed in a Frame”. Recommended Action Easy Fix – Open Link in New Window or Tab This can be accomplished by right-clicking your mouse on the link and choosing “Open Link in New Window” or “Open Link in New Tab” from the context menu that appears. The web page will open in a new window and be accessible. RIGHT-CLICK your mouse cursor on the link; Choose Open in New Window Updated 9/11/2013 MH Best Practice Fix – Create or Edit the Link to Open in New Window Automatically Links created through Blackboard’s Web link tool are easier to create and modify than links added to the text of a Blackboard Item. When creating or editing a link to your course, be sure to set the link to open in a new window. This will help ensure that the website is easily accessible in any browser going forwards. These instructions assume that you have EDIT MODE turned on in your course.
    [Show full text]