chapter 4 – sample content - springer978-1-4302-4639-8/1.pdf · 371 appendix a chapter 4 –...

371

APPENDIX A

Chapter 4 – Sample Content

Listing A-1 specifies the initial HTML content used for the exercises in Chapter 4. This is available from the downloaded source in the Default_content.cshtml file. I’m including it here in case you want to see it without downloading the code.

Listing A-1. Chapter 4 Sample Content

<!DOCTYPE html>

<html lang="en"> <head> <meta charset="utf-8" /> <title>Chapter 4 - CSS Demo</title> </head> <body> <header class="intro"> <h1>CSS Demo</h1> <h2>Introducing the new HTML5 features</h2> <h3> Use the new CSS3 features to build some of the most visually appealing web sites. </h3> </header>

<nav> <ul> <li><a href="#feature">Feature</a></li> <li><a href="#other">Article</a></li> <li><a href="#another">Archives</a></li> <li><a href="http://www.apress.com" target="_blank">Apress</a></li> </ul> </nav>

<div id="contentArea">

<div id="mainContent"> <section class="rounded"> <header> <h2>Main content area</h2> </header>

APPENDIX A CHAPTER 4 – SAMPLE CONTENT

372

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. </p> </section>

<section> <article class="featuredContent"> <a id="feature"></a> <header> <h3>Featured Article</h3> </header>

<div class="rotateContainer" > <p>This is really cool. . .</p> <img class="rotate" id="phone" src="images/phonebooth.jpg" alt="phonebooth" /> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. </p> </div> </article>

<article class="otherContent"> <a id="other"></a> <header> <h3>Rounded Borders</h3> </header>

<div> <p>Details about rounded corners</p> <p> One of the most common features that you'll hear about is the use of rounded corners and we'll cover


373

that here. Also, by configuring the div size and radius properly you can also make circular divs </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. </p> </div> </article>

<article class="otherContent"> <a id="another"></a> <header> <h3>Another Interesting Article</h3> </header>

<div> <p>More things to say. . .</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus tincidunt justo nec tempor. Aliquam erat volutpat. Fusce facilisis ullamcorper consequat. Vestibulum non sapien lectus. Nam mi augue, posuere at tempus vel, dignissim vitae nulla. Nullam at quam eu sapien mattis ultrices. Quisque quis leo mi, at lobortis dolor. Nullam scelerisque facilisis placerat. Fusce a augue erat, malesuada euismod dui. Duis iaculis risus id felis volutpat elementum. Fusce blandit iaculis quam a cursus. Cras varius tincidunt cursus. Morbi justo eros, adipiscing ac placerat sed, posuere et mi. Suspendisse vulputate viverra aliquet. Duis non enim a nibh consequat mollis ac tempor lorem. Phasellus elit leo, semper eu luctus et, suscipit at lacus. In hac habitasse platea dictumst. Duis dignissim justo sit amet nulla pulvinar sodales. </p> </div> </article> </section> </div>

<aside id="sidebar"> <h3>Other Titles</h3> <div id="moon"></div> <p> Check out some of the other titles available from Apress. </p> <section id="titles"> <article class="book">


374

<header> <a href="http://www.apress.com/9781430240747" target="_blank"> <img src="images\office365.png" alt="Pro Office 365"/> </a> </header> <p> Pro Office 365 Development is a practical, hands-on guide to building cloud-based solutions using the Office 365 platform. </p> </article>

<article class="book"> <header> <a href="http://www.apress.com/9781430235781" target="_blank"> <img src="images\access2010.png" alt="Pro Access 2010"/> </a> </header> <p> Pro Access 2010 Development is a fundamental resource for developing business applications that take advantage of the features of Access 2010. You'll learn how to build database applications, create Web-based databases, develop macros and VBA tools for Access applications, integrate Access with SharePoint, and much more. </p> </article>

<article class="book"> <header> <a href="http://www.apress.com/9781430228295" target="_blank"> <img src="images\sharepoint_pm.png" alt="Pro Project Management w/SharePoint 2010"/> </a> </header> <p> The intention of this book is to provide a working case study that you can follow to create a complete PMIS (project management information system) with SharePoint Server's out-of-the-box functionality. </p> </article>

<article class="book"> <header> <a href="http://www.apress.com/9781430229049" target="_blank">


375

<img src="images\office_workflow.png" alt="Office 2010 Workflow"/> </a> </header> <p> Workflow is the glue that binds information worker processes, users, and artifacts—without it, information workers are just islands of data and potential. Office 2010 Workflow walks you through implementing workflow solutions. </p> </article>

<article class="book"> <header> <a href="http://www.apress.com/9781430224853" target="_blank"> <img src="images\beginning_wf.png" alt="Beginning WF"/> </a> </header> <p> Indexed by feature so you can find answers easily and written in an accessible style, Beginning WF shows how Microsoft's Workflow Foundation (WF) technology can be used in a wide variety of applications. </p> </article> </section> </aside> </div>

<footer> <p> Last updated <time datetime="2012-05-12T20:32:22+05:00"> May 12th 2012</time> by <a href="http://www.thecreativepeople.com" target="_blank">Mark J. Collins</a> </p> </footer>

</body></html>

377

APPENDIX B

Chapter 4 – Completed Style

Listing B-1 shows the completed style element from the Chapter 4 project. I’ve explained this in pieces but am including it here if you want to see it all together.

Listing B-1. Chapter 4 completed style element

<style> /* Basic tag settings */ body { margin: 0 auto; width: 940px; font: 13px/22px Helvetica, Arial, sans-serif; background: #f0f0f0; } h2 { font-size: 18px; line-height: 5px; padding: 2px 0; } h3 { font-size: 12px; line-height: 5px; padding: 2px 0; } h1, h2, h3 { text-align: left; } p { padding-bottom: 2px; }

APPENDIX B CHAPTER 4 – COMPLETED STYLE

378

.book { padding: 5px; } /* Content sections */ .featuredContent { background-color: #ffffff; border: 2px solid #6699cc; padding: 15px 15px 15px 15px; } .otherContent { background-color: #c0c0c0; border: 1px solid #999999; padding: 15px 15px 15px 15px; } aside { background-color: #6699cc; padding: 5px 5px 5px 5px; } footer { margin-top: 12px; text-align:center; background-color: #ddd; } footer p { padding-top: 10px; } /* Navigation Section */ nav { left: 0; background-color: #003366; } nav ul { margin: 0; list-style: none; }


379

nav ul li { float: left; } nav ul li a { display: block; margin-right: 20px; width: 140px; font-size: 14px; line-height: 28px; text-align: center; padding-bottom: 2px; text-decoration: none; color: #cccccc; } nav ul li a:hover { color: #fff; } /* Rounded borders */ .rounded { border: 1px solid; border-color:#999999; border-radius:25px; padding: 24px; } aside { border: 1px solid #999999; border-radius:12px; } /* Make the radius half of the height */ nav { height: 30px; border-radius:15px; } footer { height: 50px; border-radius:25px; }


380

/* Gradients */ .intro { border: 1px solid #999999; text-align:left; margin-top: 6px; padding-left: 15px; border-radius:25px; background-image: -webkit-linear-gradient(45deg, #ffffff, #6699cc); background-image: linear-gradient(45deg, #ffffff, #6699cc); } /* Setup a table for the content and sidebar */ #contentArea { display: table; } #mainContent { display: table-cell; padding-right: 2px; } aside { display: table-cell; width: 280px; } /* Setup multiple columns for the articles */ article div { text-align:justify; padding:6px; -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 20px; column-gap: 20px; } /* Add the box shadow */ article img { margin: 10px 0; box-shadow: 3px 3px 12px #222; }


381

.book img { margin: 10px 0; display: block; box-shadow: 2px 2px 5px #444; margin-left: auto; margin-right: auto; } aside { box-shadow: 3px 3px 3px #aaaaaa; } /* Stripe the title list */ #titles article:nth-child(2n+1) { background: #c0c0c0; border: 1px solid #6699cc; border-radius: 10px; } #titles article:nth-child(2n+0) { background: #6699cc; border: 1px solid #c0c0c0; border-radius: 10px; } /* Transforms - not supported yet */ .rotateContainer { -webkit-perspective: 600px; } .rotate { -webkit-transform-style: preserve-3d; } /* Animate the moon phases */ @@-webkit-keyframes moonPhases { 0% {background-image:url("images/moon1.png");} 12% {background-image:url("images/moon2.png");} 25% {background-image:url("images/moon3.png");} 37% {background-image:url("images/moon4.png");} 50% {background-image:url("images/moon5.png");} 62% {background-image:url("images/moon6.png");} 75% {background-image:url("images/moon7.png");}


382

87% {background-image:url("images/moon8.png");} 100% {background-image:url("images/moon1.png");} } @@keyframes moonPhases { 0% {background-image:url("images/moon1.png");} 12% {background-image:url("images/moon2.png");} 25% {background-image:url("images/moon3.png");} 37% {background-image:url("images/moon4.png");} 50% {background-image:url("images/moon5.png");} 62% {background-image:url("images/moon6.png");} 75% {background-image:url("images/moon7.png");} 87% {background-image:url("images/moon8.png");} 100% {background-image:url("images/moon1.png");} } #moon { width:115px; height:115px; background-image: url("images/moon1.png"); background-repeat: no-repeat; -webkit-animation-name:moonPhases; -webkit-animation-duration:4s; -webkit-animation-delay:3s; -webkit-animation-iteration-count:10; animation-name:moonPhases; animation-duration:4s; animation-delay:3s; animation-iteration-count:10; } </style>

383

APPENDIX C

Chapter 14 – Final Code

Listing C-1 specifies the final code for the project in Chapter 14. This is available from the downloaded source in the Index.cshtml file. I’m including it here in case you want to see it without downloading the code.

Listing C-1. Chapter 14 Final Code

@{ Layout = null;}

<!DOCTYPE html>

<html><head> <meta name = "viewport" content = "width = device-width" /> <title > Chapter 14 - Checkers</title> <style type = "text/css" > .board { width: 400px; height: 400px; } .bblack { background-color: #b93030; border-color: #b93030; border-width: 1px; border-style: solid; width: 48px; height: 48px; float: left; margin: 0px; padding: 0px; } .bwhite { background-color: #f7f7f7; border-color: #b93030; border-width: 1px; border-style: solid;

APPENDIX C CHAPTER 14 – FINAL CODE

384

width: 48px; height: 48px; float: left; margin: 0px; padding: 0px; } .piece { margin-left: 4px; margin-top: 4px; } .bblack.drop { opacity: 0.5; } .piece.selected { opacity: 0.5; } </style></head><body> <div class = "board">@for (int y = 0; y < 8; y++){ for (int x = 0; x < 8; x++) { string id = x.ToString() + y.ToString(); string css; if ((x + y) % 2 == 0) { css = "bwhite"; } else { css = "bblack"; } <text> <div id = "@id" class = "@css" draggable = "false"> @if ((x + y) % 2 != 0 && y != 3 && y != 4) { string imgSrc; string pid; if (y < 3) { imgSrc = "Images/WhitePiece.png"; pid = "w" + id; }


385

else { imgSrc = "Images/BlackPiece.png"; pid = "b" + id; } <text> <img id = "@pid" src = "@imgSrc" draggable = "true" class = "piece" > </text> } </div> </text> }} </div> <script type = "text/javascript"> // Get all the black squares var squares = document.querySelectorAll('.bblack'); var i = 0; while (i < squares.length) { var s = squares[i++]; // Add the event listeners s.addEventListener('dragover', dragOver, false); s.addEventListener('drop', drop, false); s.addEventListener('dragenter', dragEnter, false); s.addEventListener('dragleave', dragLeave, false); }

i = 0; var pieces = document.querySelectorAll('img'); while (i < pieces.length) { var p = pieces[i++]; // Add the event listeners p.addEventListener('dragstart', dragStart, false); p.addEventListener('dragend', dragEnd, false); }

// Handle the dragover event function dragOver(e) { if (e.preventDefault) { e.preventDefault(); }

// Get the img element that is being dragged var dragID = e.dataTransfer.getData("text/plain"); var dragPiece = document.getElementById(dragID);

if (dragPiece && e.target.tagName === "DIV" && isValidMove(dragPiece, e.target, false)) { e.dataTransfer.dropEffect = "move"; }


386

else { e.dataTransfer.dropEffect = "none"; } }

function dragStart(e) { if (e.target.draggable) { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", e.target.id);

e.target.classList.add("selected");

var dragIcon = document.createElement("img"); dragIcon.src = "Images/smiley.jpg"; e.dataTransfer.setDragImage(dragIcon, 0, 0); } }

function drop(e) { // Prevent the event from being raised on the parent element if (e.stopPropagation) { e.stopPropagation(); }

// Stop the browsers default action if (e.preventDefault) { e.preventDefault(); }

// Get the img element that is being dragged var droppedID = e.dataTransfer.getData("text/plain"); var droppedPiece = document.getElementById(droppedID);

if (droppedPiece && e.target.tagName === "DIV" && isValidMove(droppedPiece, e.target, true)) {

// Create a new img on the target location var newPiece = document.createElement("img"); newPiece.src = droppedPiece.src; newPiece.id = droppedPiece.id.substr(0, 1) + e.target.id; if (droppedPiece.draggable){ newPiece.draggable = true; newPiece.classList.add("jumpOnly"); } newPiece.classList.add("piece"); newPiece.addEventListener("dragstart", dragStart, false); newPiece.addEventListener("dragend", dragEnd, false); e.target.appendChild(newPiece);

// Remove the previous image droppedPiece.parentNode.removeChild(droppedPiece);


387

// Remove the drop effect from the target element e.target.classList.remove('drop');

// See if the piece needs to be promoted kingMe(newPiece); } }

function dragEnd(e) { e.target.classList.remove("selected"); }

function dragEnter(e) { // Get the img element that is being dragged var dragID = e.dataTransfer.getData("text/plain"); var dragPiece = document.getElementById(dragID);

if (dragPiece && e.target.tagName === "DIV" && isValidMove(dragPiece, e.target, false)) { e.target.classList.add('drop'); } }

function dragLeave(e) { e.target.classList.remove("drop"); }

function isValidMove(source, target, drop) { // Get the piece prefix and location var startPos = source.id.substr(1, 2); var prefix = source.id.substr(0, 1);

// Get the drop location var endPos = target.id;

// You can't drop on the existing location if (startPos === endPos) { return false; }

// You can't drop on occupied square if (target.childElementCount != 0) { return false; }

var jumpOnly = false; if (source.classList.contains("jumpOnly")) { jumpOnly = true; }


388

// Compute the x and y coordinates var xStart = parseInt(startPos.substr(0, 1)); var yStart = parseInt(startPos.substr(1, 1)); var xEnd = parseInt(endPos.substr(0, 1)); var yEnd = parseInt(endPos.substr(1, 1));

switch (prefix) { // For white pieces... case "w": if (yEnd < = yStart) return false; // Can't move backwards break;

// For black pieces... case "b": if (yEnd > = yStart) return false; // Can't move backwards break; }

// These rule apply to all pieces if (yStart === yEnd || xStart === xEnd) return false; // Move must be diagonal if (Math.abs(yEnd - yStart) > 2 || Math.abs(xEnd - xStart) > 2) return false; // Can't move more than two spaces if (Math.abs(xEnd - xStart) === 1 && jumpOnly) return false; // Only jumps are allowed

var jumped = false; // If moving two spaces, find the square that is jumped if (Math.abs(xEnd - xStart) === 2) { var pos = ((xStart + xEnd) / 2).toString() + ((yStart + yEnd) / 2).toString(); var div = document.getElementById(pos); if (div.childElementCount === 0) return false; // Can't jump an empty square var img = div.children[0]; if (img.id.substr(0, 1).toLowerCase() === prefix.toLowerCase()) return false; // Can't jump a piece of the same color

// If this function is called from the drop event // Remove the jumped piece if (drop) { div.removeChild(img); jumped = true; } }

// Set the draggable attributes so the next player can take a turn. if (drop) { enableNextPlayer(source);


389

// If we jumped a piece, we're allowed to go again if (jumped) { source.draggable = true; source.classList.add("jumpOnly"); } }

return true; }

function kingMe(piece) {

// If we're already a king, just return if (piece.id.substr(0, 1) === "W" || piece.id.substr(0, 1) === "B") return;

var newPiece;

// If this is a white piece on the 7th row if (piece.id.substr(0, 1) === "w" && piece.id.substr(2, 1) === "7") { newPiece = document.createElement("img"); newPiece.src = "Images/WhiteKing.png"; newPiece.id = "W" + piece.id.substr(1, 2); }

// If this is a black piece on the 0th row if (piece.id.substr(0, 1) === "b" && piece.id.substr(2, 1) === "0") { var newPiece = document.createElement("img"); newPiece.src = "Images/BlackKing.png"; newPiece.id = "B" + piece.id.substr(1, 2); }

// If a new piece was created, set its properties and events if (newPiece) { newPiece.draggable = true; newPiece.classList.add("piece");

newPiece.addEventListener('dragstart', dragStart, false); newPiece.addEventListener('dragend', dragEnd, false);

var parent = piece.parentNode; parent.removeChild(piece); parent.appendChild(newPiece); } }

function enableNextPlayer(piece) {

// Get all of the pieces var pieces = document.querySelectorAll('img');


390

i = 0; while (i < pieces.length) { var p = pieces[i++];

// If this is the same color that just moved, disable dragging if (p.id.substr(0, 1).toUpperCase() === piece.id.substr(0, 1).toUpperCase()) { p.draggable = false; } // Otherwise, enable dragging else { p.draggable = true; }

p.classList.remove("jumpOnly"); } }

</script></body></html>

391

� AAgent application

chat web pagebody element, 329–330JavaScript implementation, 331–333style element, 330–331

creation, 327HomeController class, [email protected]() methods, 329internet template, 327–328testing

chat page, 334–335navigation links, 334register, 333–334

AnimationadjustStates() function, 220CSS, 218map page, 220–221path and style element, 218–219script element, 219–220selection state, 221selectState() function, 220

Application programming interface (API), geolocationlocation

access denied error, 287current browsers, 288–289internet options, 287–288script element, 286–287

objectscallback function, 285getCurrentLocation() function, 284, 285navigator object, 284parameters, 284properties, 284

Visual Studio project, 282–283

ASP.NET web forms, 19HTML5Test.com web site, 35–37input types

ASP.NET project, 19color, 32–33database view, 24–26date/time fields, 31–32debugging, 22definition, 19email control, 20–22error message, 21feedback form, 27–30Firefox, 22form review, 34–35number, 33Opera, 22page inspector, 22–23phone, 32query window, 26range, 32Register.aspx page, 20–22register page, 20–21selection list, 30text area, 33url, 30

range controlattributes, 38–39HTML, 38values, 39–40

Attribute selectors, 77–78Audio, 169

browser supportcodecs, 174Index.cshtml file, 176MIME format, 175.mp3 extension, 176

Index

INDEX

392

.ogg extension, 176src attribute, 175XMedia Recode, 176

canPlayType() method, 182–184controls

events, 177input elements, 177types, 177

custom controlsdiv, 177–178event handlers, 178range controls, 178

elementsclip selection, 172index view, 170–171MVC4 project template, 169–170source file, 172

event handlersendAudio() function, 180Play and Pause, 178–180progress and seek, 180seekAudio() function, 180setupSeek() function, 179setVolume() function, 181togglePlay() method, 179updateSeek() function, 180volume control, 180–181

media formats, 169native controls

controls attribute, 173progress bar, 174UI, 173

source, 181–182

� BBox model, CSS3, 81Browsers, 147

CSS demoIE 7, 148IE 8, 147

demo applicationApplication_Start() method, 151home controller, 151index view, 149–150mode selection, 152MVC4 project, 149web page, 148

hiding unsupported elementsdemo page, 166–167features, 164–165Index.cshtml file, 165input element, 165types, 164–165

modernizr, 152–153

polyfillsbook list striping, 162–164features, 155gradients, 160–162options, 155–156rounded corners, 159–160tables, 156

style sheets, 153–155

� CCanvas, 223

chess boardanimation, 234–237draw rectangles, 225–226gradients, 227images, 227–234Visual Studio project, 223–225

compositedemonstration, 250elements creation, 247–249head section, 249options, 250–251script elements, 249–250source-over, 247

definition, 223features, 251solar system

adding button, 244anglePerSecond, 244–245animateSS() function, 242arc() command, 238canvas element, 240clipping path, 246–247context state, 240drawBoard() function, 246–247drawing commands, 237features, 237initial drawing, 242–234moon, 245paths, 237rotate() function, 243–244scale() function, 246script element, 241–242setInterval() function, 242transformations, 238–239

types, 223Cascading style sheets (CSS3), 75

box model, 81HTML content, 371–375properties, 80rules, 75selectors

attribute, 77–78class, 77

Audio (cont.)

INDEX

393

combinators, 76–77element selector, 76ID, 77pseudo-class, 78–80unions, 80

style element, 377–382style rules

animation, 103–105author styles, 82basic style, 91–94box-shadow attribute, 99–100cascading rules, 82–83column layout, 983D transforms, 101–103gradients, 96keyword, 83rotateImage() function, 103rounded corners, 94–95source specifications, 82tables, 96–97zebra striping, 100–101

syntax, 75vendor prefixes, 80–81web page

content, 89–90features, 83–84layout plan, 84–85project, 85–87structural elements, 87–89

Checkers applicationdraw the board

CSS style, 349demonstration, 351div, 348–349image element, 350initial board, 350

Visual Studio project, 346–348Chess board

animationdrawAllPieces(), 236fillText() method, 235–236makeNextMove() function, 235results, 236–237variables, 235

draw rectanglesbody element, 225–226drawBoard() function, 226initial board, 226project template, 225types, 225

gradients, 227images, 234

createPieces() function, 230–233drawAllPieces() function, 229–230drawImage() method, 228

height and width properties, 229loadImages(), createPieces() and

drawAllPieces() functions, 233–234loadImages() function, 229pieces displays, 234variables, 228

Visual Studio project, 223–225Chrome Ripple. See Ripple emulatorsClass selector, 77Combinator selectors, 76–77Custom controls

audiodiv, 177–178event handlers, 178range controls, 178

videodiv, 188–189element and controls, 190–191Index.cshtml file, 188–189script element, 189

� DDrag and drop (DnD), 343

checkers applicationdraw the board, 348–349Visual Studio project, 346–348

custom drop actionevent handler, 353implementation, 353querySelectorAll() function, 354script element, 353stopPropagation() function, 354wire-up, handlers, 354

data transfer objectdraggable attribute, 346drop effects, 345–346storing data, 345

dragStart() function, 368–369effectAllowed property, drop, 352final code, 383–390game rules

events, 357move verification, 357points, 359promotion, 361–363turns, 363–367ValidMove() function, 357

handling eventsDnD operation, 343–344events, 344source and target elements, 343–344

image dragging, 368–369img elements, 351kingMe(), 361–363

INDEX

394

move verificationdragEnter() function, 360–361dragOver() function, 360drop() function, 361points, 359–360rules, 358ValidMove() function, 358–359

setDragImage() function, 368–369source element, 370target element, 370turns

classList, 366dragStart() function, 365drop() function, 365enableNextPlayer() function, 364, 367isValidMove() function, 365jumpOnly, 366querySelectorAll() function, 364ValidMove() function, 364

visual feedbackadd dragend and dragleave, 356dragEnd() function, 355dragEnter() and dragLeave() function, 355dragStart() function, 355image display, 357script element, 355–356style element, 356

windows, 369

� EElement selectors, 76Emulators

Chrome RippleBlackBerry, 131download page, 129Enable button, 130options, 131–132platform, 130

iPhone devices, 132–133Opera mobile provides, 127

lanuch window, 127LG Optimus, 128Nokia N800, 128–129

Windows phone developer tools, 125–126Event handlers

endAudio() function, 180Play and Pause, 178–180progress and seek, 180seekAudio() function, 180setupSeek() function, 179setVolume() function, 181togglePlay() method, 179updateSeek() function, 180volume control, 180–181

� FFirefogg, 185

� GGeolocation

APIlocation and display, 285–289object, 284–285Visual Studio project, 282–283

cellular telephone towers, 282data, 282IP Block, 282technologies, 281–282

getElementByID() function, 107Global Positioning Satellites (GPS), 281

� HHTML, content, 371–375

� IID selector, 77Indexed DB

application creationcanvas, 260–261image configuration, 261–262Visual Studio project, 259–260

asynchronous processing, 256–257competing technologies, 255database

configureDatabase() function, 264–265createObjectStore() method, 265drawBoard() function, 263–264event handlers, 264index creation, 266objectStoreNames property, 265pieceTypes[] array, 263put() method, 268resetBoard() function, 267static data, 262–263unique key, 266

dbCall1(), 257key concepts, 279object stores, 255–256onerror event, 256pieces

animation, 276–277application testing, 270–271configureDatabase() function, 271–272continue() method, 268cursor, 268–269database, 273delete() method, 275

Drag and drop (DnD) (cont.)

INDEX

395

displayCapturedPieces() function, 277–279drawBoard() method, 273drawPiece() function, 268makeNextMove() function, 274, 278moves, 271object key, 275openCursor() method, 268position convertion, 272–273removePiece() function, 275–276single object, 269–270update, 275–276

transactions, 257–258

� J, K, LJavaScript, 216–218

� M, NMapping platforms

bing maps accountaccount page, 289–290center page, 290–291key creation, 291–292

body element, 293initial map, 294pushpins

current location, 294–295markRestroom() function, 296restrooms, 296–297scenarios, 295script element, 295–296showLocation() function, 294

setView() function, 294showLocation() function, 293

Media queriesCSS3 code, 134style sheet, 134use of, 135

Mobile web applications, 125emulators

Chrome Ripple, 129–132iPhone devices, 132–133Opera mobile provides, 127windows phone developer tools, 125–126

flexible images, 142–143handling form factors

media queries, 134–135techniques, 133–134

medium layout, 136–137Ripple emulator device, 143–144small layout

aside section, 142issues, 138medium, 138narrow pages, 140–141

rules, 140style element, 139–140

web Matrix application, 136Model-view-controller (MVC)

architecture, 41ASP.NET

data validation, 48–49editor templates, 46–48initial solution, 44internet application, 42–43MVC4 project, 42Razor view syntax, 44–45

EditorFor() method, 45feedback form

complete form, 53–54design, 50–53editor templates, 55–57HTML5 controls, 57models, 49–50page creation, 49view, 50

framework, 41HTML

create() method, 59custom method, 57email template, 59–60helper extension, 57–59

literal HTMLEditorFor() method, 65meter control, 70–73progress bar, 67–68range control, 66–67static progress bar, 68–69

range controlcustom helper method, 60–61template, 61–62

source extensions, 62–64TextBoxFor() method, 45

Modernizr, 152–153

� OOpera mobile emulators

lanuch window, 127LG Optimus, 128Nokia N800, 128–129

� PPolyfills

book list stripingfunction, 162–163getElementById() function, 163manual striping, 163–164nth-child selector, 162supportsSelector() function, 163

INDEX

396

features, 155gradients

demo page, 162Index.cshtml file, 161progressive internet explorer, 160style element, 161

options, 155–156rounded corners, 159–160tables

add, IE7, 158tr and td, 159definition, 157–158HTML component (HTC) file, 156–157IE 6 and IE 7, 156

Poster images, 191–192postMessage() function, 109–110Progressive internet explorer (PIE), 160Pseudo-class selectors, 78–80

� QquerySelectorAll(), 108querySelector() function, 107–108

� RRipple emulators

BlackBerry, 131download page, 129enable button, 130options, 131–132platform, 130

rotateImage() function, 107

� S, TScalable vector graphics (SVG), 193

advantages, 193animation

adjustStates() function, 220CSS, 218map page, 220–221path and style element, 218–219script element, 219–220selection state, 221selectState() function, 220

database creation, 203–207image files

background, 198–199creation, 197–198features, 199shapes, 194–195styles, 196–197Visual Studio project, 193–194

interactive mapinitial map, 203–211path element, 200

.jpg/.png files, 193map view

attributes, 210–211creation, 209–210elements, 209–211HomeController class, 211namespace, 211State properties, 210

model creation, 207–209SQL model

class, 208design surface, 208State.dbml design, 209

state elementsbackground image, 214–216gradient fills, 213–214JavaScript, 216–218

state tablecode editor, 206dialog box connection, 204results, 207selection, 206server, 205SQL database, 204–205

Scripting enhancements, 107broad application, 107features, 124query selectors

functions, 107querySelector(), 107–108querySelectorAll(), 108

Visual Studiobundling and minification, 120–121project, 108–109

web workerscommunication, 109–110dedicated worker, 110–116postMessage() function, 109–110retrieving data, 110shared worker, 116–120

Selectorsattribute, 77–78class, 77combinators, 76–77element selector, 76ID, 77nth-child(n), 79pseudo-class, 78–80unions, 80

Socket technology. See WebSockets technologySolar system

adding button, 244

Polyfills (cont.)

INDEX

397

anglePerSecond, 244–245animateSS() function, 242arc() command, 238canvas element, 240clipping path, 246–247context state, 240drawBoard() function, 246–247drawing commands, 237features, 237initial drawing, 242–234moon, 245paths, 237rotate() function, 243–244scale() function, 246script element, 241–242setInterval() function, 242transformations, 238–239

StartSocketServer() method, 306–307Style rules implementation

animation, 103–105basic style, 91–94box-shadow attribute, 99–100column layout, 983D transforms, 101–103features, 91gradients, 96rotateImage() function, 103rounded corners, 94–95tables, 96–97zebra striping, 100–101

� UUnion selector, 80

� VVideo, 169

browser supportcodec, 184formats, 184

download, 187elements

demo page, 187–188Index.cshtml file, 188–189poster image, 191–192

Firefogg, 185media formats, 169MP4 files

converter application, 186faststart option, 186–187

Visual Studiobundling and minification

activities, 123code editor, 121–122

network traffic, 121RegisterBundles() method, 122Scripts.Render() and Styles.Render(), 122standard files, 122techniques, 120–121

project, 108–109

� W, X, Y, ZWeb page creation, CSS3

content, 89–90features, 83–84initial files and folders, 87layout plan, 84–85project, 85–87structural elements, 87–89WebMatrix application, 85

WebSockets technology, 299agent application

chat web page, 329–330creation, 327HomeController class, [email protected]() methods, 329internet template, 327–328testing, 333–335

agent chat application, 303–304bulding frame, 301–302client application creation

connect() function, 338div implements, 335–336script element, 337–338style element, 336

communication, 303enhance

agent and client objects, 323internal server classes, 319MessageReceived(), 323–325, 326sign-on message, 325–326WsAgentConnection class, 320–321WsClientConnection class, 321–323WsServer class, 326–327WsServer project, 319

handshaking and protocol manipulation, 300–301initial projects

browser selection, 317–318startup projects, 316–317webpage, 318

masking and unmasking frames, 302messages, 299–300peer-to-peer communication, 300servers, 302–303

class members, 310console application project, 305initial implementation, 305–306Main() method, 314

INDEX

398

OnConnect() event handler, 308PerformHandshake() method, 308primary methods, 310ReadMessage() method, 304, 310SendMessage() method, 312–313WsConnection class, 304, 308–310

solution testingagent page, multiple sessions, 340–341client web application, 338–339outgoing message, 339–340

web applicationclient web page, 314connect() function, 315head element, 315–316Index.cshtml file, 315output() function, 316

Web workersdedicated worker

closeWorker(), 116code editor, 111–112createWorker(), 116

form design, 113implementation, 114–115index view, 110–111message log, 115–116reference, 116sendWorkerMessage(), 116steps, 110–111style sheet, 112–113wep page creation, 110worker.js file, 113–114

shared workeraddEventHandler() method, 120advantages, 116controlSharedWorker.js, 118message page, 119script reference, 117sendResponse() function, 120sharedWorker.js, 117–118task manager, 119–120

Wi-Fi networks, 281Windows phone emulator, 125–126Windows Presentation Foundation (WPF), 134

WebSockets technology (cont.)

chapter 4 – sample content - springer978-1-4302-4639-8/1.pdf · 371 appendix a chapter 4 –...

Documents