Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
432 views

70 480 JavaScript and HTML5

The Epcot center is a theme park in Disney world, Florida. La etiqueta define la informacion de contacto del autor / propietario de un documento o un articulo. Jquery is a library for displaying json files in a web page.

Uploaded by

JuanMa Capuano
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
432 views

70 480 JavaScript and HTML5

The Epcot center is a theme park in Disney world, Florida. La etiqueta define la informacion de contacto del autor / propietario de un documento o un articulo. Jquery is a library for displaying json files in a web page.

Uploaded by

JuanMa Capuano
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

Back in the summer I took the 71-480 (Beta exam Programming in HTML5 with JavaScript and CSS3) and

failed it. This is one of the new line of Microsoft developer certifications for both the web platform and
for developing Windows Store (formerly known as Metro) applications. At that time I had very little
experience in developing HTML5 applications or in using jQuery. Since then I have been using it
professionally for about six months. I had a background in HTML and JavaScript before the advent of
HTML5 but most of my professional experience was in the data access and what you might consider
dev ops Windows Server administration, SQL Server, IIS, and of course SharePoint.
HTML5 (Windows) Reference
<address>
La etiqueta < address > define la informacin de contacto del autor / propietario de un documento o
un artculo.
Si el elemento es < address > dentro del elemento <body>, representa la informacin de contacto
para el documento.
Si el elemento < address > est dentro de un elemento <article>, representa la informacin de
contacto de ese artculo.
<article>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
La etiqueta <article> especifica el contenido independiente, autnomo.
Un artculo debe tener sentido por s mismo y que debera ser posible distribuir de forma
independiente del resto del sitio.
<aside>
<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
La etiqueta <aside> define algn contenido al margen de los contenidos que se coloca pulg
El contenido de un lado debe estar relacionado con el contenido circundante.

<audio>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
autoplayNew autoplay Specifies that the audio will start playing as soon as it is ready
controlsNew controls Specifies that audio controls should be displayed (such as a play/pause button etc).
loopNew loop Specifies that the audio will start over again, every time it is finished
mutedNew muted Specifies that the audio output should be muted
preloadNew auto
metadata
none
Specifies if and how the author thinks the audio should be loaded when the page loads
srcNew URL Specifies the URL of the audio file

<bdi>
Ejemplo
Aislar los nombres de usuario de los ajustes de texto de direccin alrededores:
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi></bdi>: 90 points</li>
</ul>
BDI es sinnimo de aislamiento bidireccional.
La etiqueta <bdi> asla una parte de texto que pueda ser formateada en una direccin distinta de otro
texto fuera de ella.
Este elemento es til al incrustar el contenido generado por el usuario con una direccionalidad
desconocido.
<canvas>
Ejemplo
Dibuja un cuadrado rojo, sobre la marcha, y mostrarlo dentro del elemento <canvas>:
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas">Your browser does not support the HTML5 canvas
tag.</canvas>

<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

</body>
</html>

La etiqueta <canvas> se utiliza para dibujar grficos, sobre la marcha, a travs de secuencias de
comandos (normalmente JavaScript).
La etiqueta <canvas> es slo un contenedor de grficos, debe utilizar un script para llamar la realidad
de los grficos.
Attribute Value Description
heightNew pixels Specifies the height of the canvas
widthNew pixels Specifies the width of the canvas

<command>
Ejemplo
Un elemento <comando> puede ser marcado de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<script>
function save()
{
alert("Some javaScript....");
}
</script>
</head>
<body>

<menu>
<command type="command" label="Save" onclick="save()">Save</command>
</menu>

<p><b>Note:</b> The command element is currently only supported in IE9.</p>

</body>
</html>
La etiqueta <comando> define un comando (una casilla, una casilla de verificacin o un botn de
comando) que el usuario puede invocar.
Un comando puede ser parte de un men contextual o la barra de herramientas, utilizando el
elemento <men>, o se puede poner en cualquier otro lugar de la pgina, para definir un atajo de
teclado.
Attribute Value Description
checkedNew checked Specifies that the command should be checked when the page
loads. Only for type="radio" or type="checkbox"
disabledNew disabled Specifies that the command should be disabled
iconNew URL Specifies an image that represents the command
labelNew text Required. Specifies the name of the command, as shown to the
user
radiogroupNew groupname Specifies the name of the group of commands that will be
toggled when the command itself is toggled. Only for
type="radio"
typeNew checkbox
command
radio
Specifies the type of command

<datalist>
<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>Note:</strong> The datalist tag is not supported in Internet Explorer 9 and earlier
versions, or in Safari.</p>

</body>
</html>

La etiqueta <datalist> especifica una lista de opciones predefinidas para un elemento <input>.
La etiqueta <datalist> se utiliza para proporcionar una funcin de "autocompletar" en elementos
<input>. Los usuarios podrn ver una lista desplegable de opciones predefinidas como datos que de
entrada.
Utilice atributo de lista del elemento <input> para ligarlo con un elemento <datalist>.
<details>
<!DOCTYPE html>
<html>
<body>

<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<p><b>Note:</b> The details tag is currently only supported in Chrome and in Safari
6.</p>

</body>
</html>

La etiqueta <details> especifican otros detalles, que el usuario puede ver o esconder bajo demanda.
La etiqueta <details> puede utilizar para crear un widget de interactivo que el usuario puede abrir y
cerrar.Cualquier tipo de contenido se puede poner dentro de la etiqueta <details>.
El contenido de un elemento <details> no debe ser visible a menos que se establece el atributo
abierto.

<dialog>
<!DOCTYPE html>
<html>
<body>

<p><b>Note:</b> The dialog tag is only supported in Chrome and Safari 6.</p>


<table border="1">
<tr>
<th>January <dialog open>This is an open dialog window</dialog></th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>

</body>
</html>

La etiqueta <dialog> define cuadro de dilogo aa, inpector o ventana.
Attribute Value Description
openNew open Specifies that the dialog element is active and that the user can interact with it

<embed>
<!DOCTYPE html>
<html>
<body>

<embed src="helloworld.swf">

</body>
</html>

La etiqueta <embed> define un contenedor para una aplicacin externa o contenido interactivo (un
plug-in).

Attribute Value Description
heightNew pixels Specifies the height of the embedded content
srcNew URL Specifies the address of the external file to embed
typeNew MIME_type Specifies the MIME type of the embedded content
widthNew pixels Specifies the width of the embedded content

<figcaption>
<!DOCTYPE html>
<html>
<body>

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag
plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82
feet) square and almost flat, and is a famous tourist attraction in Norway.</p>

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

</body>
</html>

La etiqueta <figcaption> define un ttulo para un <figure> elemento.
El elemento <figcaption> puede ser colocado como el primer o el ltimo hijo del elemento <figure>.
<figure>
<!DOCTYPE html>
<html>
<body>

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag
plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82
feet) square and almost flat, and is a famous tourist attraction in Norway.</p>

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>
</body>
</html>
La etiqueta especifica <figure> contenido autnomo, como ilustraciones, diagramas, fotos, listas de
cdigos, etc
Mientras que el contenido del elemento <figure> est relacionada con el flujo principal, su posicin es
independiente de la corriente principal, y si se quita no debera afectar el flujo del documento.
<footer>
<!DOCTYPE html>
<html>
<body>

<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a
href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

</body>
</html>

La etiqueta <footer> define un pie de pgina de un documento o seccin.
Un elemento <footer> debe contener informacin acerca de su elemento contenedor.
A pie de pgina suele contener el autor del documento, informacin de copyright, enlaces a trminos
de uso, informacin de contacto, etc
Usted puede tener varios elementos <footer> en un solo documento.
<header>
<!DOCTYPE html>
<html>
<body>

<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>

</body>
</html>

La etiqueta <header> especifica un encabezado de un documento o seccin.
El elemento <header> debe utilizarse como un contenedor para el contenido de introduccin o un
conjunto de enlaces de navegacin.
Usted puede tener varios elementos <header> en un solo documento.
Nota: Una etiqueta <header> no puede ser colocado dentro de un <footer>, <direccin> u otro
elemento <header>.
<keygen>
<!DOCTYPE html>
<html>
<body>

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>

<p><strong>Note:</strong> The keygen tag is not supported in Internet Explorer.</p>

</body>
</html>

La etiqueta <keygen> especifica un campo generador de par de claves utilizado para formularios.
Cuando se enva el formulario, la clave privada se almacena localmente, y la clave pblica se enva al
servidor.
Attribute Value Description
autofocusNew autofocus Specifies that a <keygen> element should automatically get focus when the page
loads
challengeNew challenge Specifies that the value of the <keygen> element should be challenged when
submitted
disabledNew disabled Specifies that a <keygen> element should be disabled
formNew form_id Specifies one or more forms the <keygen> element belongs to
keytypeNew rsa
dsa
ec
Specifies the security algorithm of the key
nameNew name Defines a name for the <keygen> element

<mark>
<!DOCTYPE html>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>

La etiqueta <mark> define el texto marcado.
Utilice la etiqueta <mark> si quieres resaltar partes del texto.
<meter>
<!DOCTYPE html>
<html>
<body>

<p>Display a gauge:</p>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

<p><strong>Note:</strong> The meter tag is not supported in Internet Explorer.</p>

</body>
</html>

La etiqueta <meter> define una medida escalar dentro de un rango conocido, o un valor
fraccionario. Esto tambin se conoce como un indicador.
Ejemplos: uso de disco, la importancia de un resultado de la consulta, etc
Nota: La etiqueta <meter> no se debe utilizar para indicar el progreso (como en una barra de
progreso). Para las barras de progreso, utilice el <progress> tag.
Attribute Value Description
formNew form_id Specifies one or more forms the <meter> element belongs to
highNew number Specifies the range that is considered to be a high value
lowNew number Specifies the range that is considered to be a low value
maxNew number Specifies the maximum value of the range
minNew number Specifies the minimum value of the range
optimumNew number Specifies what value is the optimal value for the gauge
valueNew number Required. Specifies the current value of the gauge

<nav>
<!DOCTYPE html>
<html>
<body>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

</body>
</html>

La etiqueta <nav> define un conjunto de vnculos de navegacin.
No todos los enlaces de un documento debe estar en un elemento <nav>. El elemento <nav> es slo
para grandes bloques de vnculos de navegacin.
Los navegadores, tales como lectores de pantalla para usuarios con discapacidad, puedan utilizar este
elemento para determinar si se debe omitir la prestacin inicial de este contenido.
<output>
<!DOCTYPE html>
<html>
<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

<p><strong>Note:</strong> The output tag is not supported in Internet Explorer.</p>

</body>
</html>

La etiqueta <output> representa el resultado de un clculo (como uno realizado por un script).

Attribute Value Description
forNew element_id Specifies the relationship between the result of the calculation, and the elements
used in the calculation
formNew form_id Specifies one or more forms the output element belongs to
nameNew name Specifies a name for the output element

<progress>
<!DOCTYPE html>
<html>
<body>

Downloading progress:
<progress value="22" max="100">
</progress>

<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer 9 and earlier
versions.</p>

</body>
</html>

La etiqueta <progress> representa el progreso de una tarea.
Consejo: Utilice la etiqueta <progress> conjuntamente con JavaScript para mostrar el progreso de
una tarea.
Nota : La etiqueta <progress> no es adecuado para la representacin de un indicador (por ejemplo,
uso de espacio en disco o relevancia de un resultado de consulta). Para representar un indicador,
utilice el <meter>etiqueta en su lugar.
Attribute Value Description
maxNew number Specifies how much work the task requires in total
valueNew number Specifies how much of the task has been completed

<section>
<!DOCTYPE html>
<html>
<body>

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues
regarding the conservation, research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from
a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year
of the establishment of WWF.</p>
</section>

</body>
</html>

La etiqueta <section> define las secciones de un documento, como captulos, encabezados, pies de
pgina o cualquier otra seccin del documento.
<source>
<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

La etiqueta <source> se utiliza para especificar mltiples recursos de los medios para los elementos
multimedia, como <video> y <audio>.
La etiqueta <source> permite especificar video alternativo / archivos de audio que el navegador
puede elegir, en funcin de su tipo de papel o soporte codec.
Attribute Value Description
mediaNew media_query Specifies the type of media resource
srcNew URL Specifies the URL of the media file
typeNew MIME_type Specifies the MIME type of the media resource

<summary>
<!DOCTYPE html>
<html>
<body>

<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<p><b>Note:</b> The summary element is currently supported only in Chrome and Safari 6.</p>

</body>
</html>

La etiqueta <summary> define un visible en direccin a la <details> elemento. El ttulo se puede
hacer clic para ver / ocultar los detalles.

<time>
<!DOCTYPE html>
<html>
<body>

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime="2008-02-14">Valentines day</time>.</p>

<p><b>Note:</b> The time element does not render as anything special in any of the major
browsers.</p>

</body></html>
La etiqueta <hora> define bien una hora (reloj de 24 horas), o una fecha en el calendario gregoriano,
opcionalmente con un tiempo y un desplazamiento de la zona horaria.
Este elemento puede utilizarse como una manera de codificar fechas y horas en una forma legible por
mquina de modo que, por ejemplo, los agentes de usuario pueden ofrecer para aadir recordatorios
de cumpleaos o eventos programados para el calendario del usuario, y los motores de bsqueda
pueden producir resultados ms inteligente de bsqueda.
Attribute Value Description
datetimeNew datetime Gives the date/time being specified. Otherwise, the date/time is given by
the element's contents

< track >

<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>

La etiqueta <track> especifica pistas de texto para los elementos multimedia (<audio> y <video>).
Este elemento se utiliza para especificar subttulos, archivos de subttulos u otros archivos que
contienen texto, que debe ser visible cuando los medios de comunicacin se est reproduciendo.
Attribute Value Description
defaultNew default Specifies that the track is to be enabled if the user's preferences
do not indicate that another track would be more appropriate
kindNew captions
chapters
descriptions
metadata
subtitles
Specifies the kind of text track
labelNew text Specifies the title of the text track
srcNew URL Required. Specifies the URL of the track file
srclangNew language_code Specifies the language of the track text data (required if
kind="subtitles")

< wbr >
<!DOCTYPE html>
<html>
<body>

<p>Try to shrink the browser window, to view how the word "XMLHttpRequest" in
the paragraph below will break:</p>

<p>To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.</p>

<p><b>Note:</b> The wbr element is not supported in IE.</p>

</body>
</html>

El <wbr> (Word rotura Opportunity) etiqueta especifica que en un texto que estara bien aadir un
salto de lnea.
Consejo: Cuando una palabra es demasiado largo, o tienes miedo de que el navegador va a romper
sus lneas en el lugar equivocado, puede utilizar el elemento <wbr> aadir palabra oportunidades de
quiebre.

HTML5 Labs
IE Developer Documentation
Channel 9 HTML5 Jump Start for 70-480 and MS Virtual Academy: Developing in HTML5 with
JavaScript and CSS3 Jump Start.
JavaScript Design Patterns A book by Addy Osmani
PluralSight.com (Paid developer training, but they do have a free trial and a starter subscription for
MSDN members)
Implement and Manipulate Document Structures and
Objects (24%)
Create the Document Structure.
This objective may include but is not limited to: structure the UI by using semantic markup,
including for search engines and screen readers (Section, Article, Nav, Header, Footer, and Aside);
create a layout container in HTML
HTML5 Semantic Tag Reference W3 Schools
Learn HTML5 in 5 Minutes MSDN
Fork this JSFiddle and play with it.
Write Code that Interacts with UI Controls.
This objective may include but is not limited to: programmatically add and modify HTML
elements; implement media controls; implement HTML5 canvas and SVG graphics

Apply styling to HTML elements programmatically.
This objective may include but is not limited to: change the location of an element; apply a
transform; show and hide elements
Implement HTML5 APIs.
This objective may include but is not limited to: implement storage APIs, AppCache API, and
Geolocation API
Establish the scope of objects and variables.
This objective may include but is not limited to: define the lifetime of variables; keep objects out of the
global namespace; use the this keyword to reference an object that fired an event; scope variables
locally and globally
Create and implement objects and methods.
This objective may include but is not limited to: implement native objects; create custom objects and
custom properties for native objects using prototypes and functions; inherit from an object; implement
native methods and create custom methods
Implement Program Flow (25%)
Implement Program Flow.
This objective may include but is not limited to: iterate across collections and array items; manage
program decisions by using switch statements, if/then, and operators; evaluate expressions
Most of this section is exceptionally basic. The most important links are probably those on the
comparison operators. Because JavaScript has some quirks in this area it is possible that those
quirks will appear on the exam. Of course having a good understanding of those quirks is also
essential to being a successful web developer. If you have a few months of professional
experience with developing JavaScript apps you can likely skip this section entirely.
W3 Schools Operators
MSDN Comparison Operators
W3 Schools Comparison and Logical Operators
W3 Schools IfElse
W3 Schools Switch Statement
W3 Schools For Loop
W3 Schools While Loop
W3 Schools Break and Continue
Ive not added a JSFiddle since the W3 Schools tutorials all contain similar functionality on each
page with the Try It section.
Raise and Handle an Event.
This objective may include but is not limited to: handle common events exposed by DOM (OnBlur,
OnFocus, OnClick); declare and handle bubbled events; handle an event by using an anonymous
function.
Im really not sure why anyone would want to use anything other than jQuery for this, but its
always good to cover the basics as this will give you the ability to debug the library of your
choice when you need to. From an exam perspective it is possible that MS Learning could
include questions covering both standard JavaScript event handling and jQuery-based events. It
is a good idea to go into the exam understanding both scenarios well.
W3 Schools JavaScript DOM Events
StackOverflow - What is event bubbling and capturing?
MSDN Understanding the Event Model
JSFiddle onclick and window.event.srcElement
jQuery Events API
JSFiddle Adding Event Listeners using standard JavaScript and jQuery
Implement Exception Handling.
This objective may include but is not limited to: set and respond to error codes; throw an exception;
request for null checks; implement try-catch-finally blocks
It should be noted that this is a Microsoft exam and I am therefore covering some IE specific
aspects of error handling. Even considering that, most of what the objectives cover is cross
platform. From a test perspective and a Windows 8 development perspective please be aware of
the IE specific details. From a practical perspective for web development in general, be aware of
the broader picture.
MSDN Try, Catch, Finally
MSDN Throw Statement
MSDN Error Object
MSDN Error Object Properties and Methods
A Cross Platform Look at the Error Object.
An instructive StackOverflow discussion of JavaScript Error Handling.
IE Blog Diagnosing Error Faster with Error.stack
JSFiddle Try/Catch, Throw and Error Object REQUIRES IE. The important thing here is to fork
the fiddle and play with the code until you understand the sub-objective as much as possible.
MSDN Null and Undefined Values
MSDN typeof Operator
MSDN Debug and debugger Statements
Practical Not Specifically Test Related: Visual Studio Blog JavaScript Debugging Enhancements
Implement a Callback.
This objective may include but is not limited to: receive messages from the HTML5 WebSocket API;
use jQuery to make an AJAX call; wire up an event; implement a callback by using anonymous
functions; handle the this pointer
Understanding Callback Functions in JavaScript
jQuery .ajax()
JavaScript Events
jQuery Events
jQuery Promises
WinJS Promises Since this exam targets both the web platform and Windows Store app
developers it is unlikely that this topic will be covered to any great extent in the exam. But if you
intention is to complete the MCSD: Windows Store Apps you should start getting your head
around this now.
Create a web worker process.
This objective may include but is not limited to: start and stop a web worker; pass data to a web
worker; configure timeouts and intervals on the web worker; register an event listener for the
web worker; limitations of a web worker
Access and Secure Data (26%)
Validate user input by using HTML5 elements.
This objective may include but is not limited to: choose the appropriate controls based on
requirements; implement HTML input types and content attributes (for example, required) to
collect user input
Validate User Input by Using JavaScript.
This objective may include but is not limited to: evaluate a regular expression to validate the
input format; validate that you are getting the right kind of data type by using built-in functions;
prevent code injection
Web to Windows 8: Security
Consume Data.
This objective may include but is not limited to: consume JSON and XML data; retrieve data by
using web services; load data or get data from other sources by using XMLHTTPRequest
Serialize, Deserialize, and Transmit Data.
This objective may include but is not limited to: binary data; text data (JSON, XML); implement
the jQuery serialize method; Form. Submit; parse data; send data by using XMLHTTPRequest;
sanitize input by using URI/form encoding

Use CSS3 in Applications (25%)
W3 Schools CSS3 Tutorial
Style HTML Text Properties.
This objective may include but is not limited to: apply styles to text appearance (color, bold, italics);
apply styles to text font (WOFF and @font-face, size); apply styles to text alignment, spacing, and
indentation; apply styles to text hyphenation; apply styles for a text drop shadow.
@font-face W3 Schools
Text 2D Transforms W3 Schools
Web Safe Fonts W3 Schools

Style HTML Box Properties.
This objective may include but is not limited to: apply styles to alter appearance attributes (size,
border and rounding border corners, outline, padding, margin); apply styles to alter graphic
effects (transparency, opacity, background image, gradients, shadow, clipping); apply styles to
establish and change an elements position (static, relative, absolute, fixed)
Create a Flexible Content Layout.
This objective may include but is not limited to: implement a layout using a flexible box model;
implement a layout using multi-column; implement a layout using position floating and
exclusions; implement a layout using grid alignment; implement a layout using regions, grouping,
and nesting
-ms-grid - Hands On: CSS3 Grid Layout
IE 10 and the Future of CSS Layout


Create an Animated and Adaptive UI.
This objective may include but is not limited to: animate objects by applying CSS transitions; apply
3-D and 2-D transformations; adjust UI based on media queries (device adaptations for output
formats, displays, and representations); hide or disable controls
jQuery Example in JSFiddle: display:none, fadeIn(), toggle(), on([event],
function(){})
jQuery API Effects
CSS3 Transitions, Transforms, Animation, Filters and more!
CSS3 2D Transforms W3Schools
CSS3 transform Property W3Schools
CSS3 Transforms WC3.org
Creating Adaptive Layouts with CSS Part I and Part II MSDN
Find Elements by Using CSS Selectors and jQuery.
This objective may include but is not limited to: choose the correct selector to reference an
element; define element, style, and attribute selectors; find elements by using pseudo-elements and
pseudo-classes (for example, :before, :first-line, :first-letter, :target, :lang, :checked, :first-child)
CSS3 Selector Test Drive from the IE Test Drive site. Use IE 10!
Cascading Style Sheets (Internet Explorer) Reference: You will want to refer to this link
repeatedly for information throughout this study guide.
See also the How to Get Anything links in the following section.
Structure a CSS File by Using CSS Selectors.
This objective may include but is not limited to: reference elements correctly; implement
inheritance; override inheritance by using !important; style an element based on pseudo-elements
and pseudo-classes (for example, :before, :first-line, :first-letter, :target, :lang, :checked, :first-child)
I am grouping the two sections above because I dont think they can be separated didactically.
Developing HTML5 Apps Jump Start (02a): CSS Selectors and Style Properties, Part 1
Developing HTML5 Apps Jump Start (02b): CSS Selectors and Style Properties, Part 2
The Cascade, Specificity, and Inheritance
CSS Specificity And Inheritance If you take nothing else from this section, study this article.
jQuery Selectors W3 Schools
How to Get Anything you Want Part I.
How to Get Anything you Want Part II.
JSFiddle Show What you have Learned.

You might also like