Mathml Slides

Total Page:16

File Type:pdf, Size:1020Kb

Mathml Slides MathML 1 Mathematical Typesetting ● Mathematical typesetting differs in significant ways from typesetting of ordinary text. ● Mathematical typesetting uses a different font with different spacing between characters than ordinary typesetting. ● It is frequently not line-oriented. ● It has complex alignments both horizontally and vertically. ● It uses a huge character set. ● It has some symbols that change size and have other typesetting around them that depend on the situation 2 XML ● XML stands for Extensible Markup Language. It represents yet another effort by the W3C to divorce content from presentation. Whereas CSS allows us to take most formatting out of a document, but continues to require a restricted set of typesetting commands concerning the structure of the document, XML removes most of the restrictions on the structural commands. XML allows an author to determine the structure of a document, create tags to describe that structure, and leave all the formatting for later. ● XML has a stricter syntax than HTML, but really has very few rules. The only requirements for a well-formed XML file are as follows: 1. Every opening XML tag must have a corresponding closing tag: for example <tag> must be followed by </tag>. 2. Tags must be nested properly. The last tag to open must be the first to close. 3. <tag/> is considered to be equivalent to <tag></tag>. 4. There must be one tag, called the root tag, which does not appear in the content of any other tag. 3 XML ● What are the tags? That is up to us. We can define the tags, their relationship to each other, and the way in which their content will be formatted on a page. As you can see, this means that every XML document actually relies on at least two other files. ● A Data Type Definition (DTD) file contains the rules regarding relationships among the tags we define. We do not really require a DTD, but it allows us to define default values, and enforces our syntax across many different XML documents. ● In addition to a DTD, the presentation of our XML requires an associated style file to tell how it is to be formatted. The style file could be done in CSS - see this sample XML with CSS formatting. As you can see, the control over the appearance is limited. For that reason the X Stylesheet Language was invented - XSL. XSL is a much more versatile language for XML formatting, allowing us to include some typesetting commands in addition to formatting instructions. In short, XSL can handle all procedural matters, while XML is exclusively structural. You can view more examples of that same sample XML file here, here, and here (if you try clicking the links you will see simple web pages, try looking into the source code and you will see XML file. As I mentioned, Ctrl+U is the default shortcut for showing source code in Chrome, Firefox, IE, Edge; for Safari try these steps http://ccm.net/faq/33026-safari-view-the-source-code-of-a-webpage . Also in the header of the file you will see a link to the stylesheet file – try opening this file by simply copying file address, pasting it in your browser’s address line and pressing enter). 4 MathML ● Mathematical Markup Language (MathML) is a mathematical markup language, an application of XML for describing mathematical notations and capturing both its structure and content. It aims at integrating mathematical formulae into World Wide Web pages and other documents. ● Although MathML was officially included by World Wide Web Consortium (W3C) in HTML5 Standard in 2015, currently there is no built-in support for it in such popular browsers as Chrome, Internet Explorer or Edge (it is still possible to render MathML typesetting with those browser, but it requires some additional libraries/extensions, e.g. https://en.wikipedia.org/wiki/MathJax ). Latest versions of Firefox and Safari have built-in support for MathML. ● MathML typesetting may look cumbersome (e.g. this <math><msup><mi>x</mi><mn>2</mn></msup></math> will simply produce x^2).But on the other hand, it appears to be highly structured and meaningful in itself. For example, this give search engines better understanding of what exactly particular formula says. 5 MathML Syntax ● MathML was designed as a small subset of XML, so its syntax is basically that of XML. The rules are simple: 1. MathML commands are tags as with HTML, enclosed in “angle brackets” (less than and greater than signs). 2. MathML tags themselves enclose the text that is to be formatted. 3. There must be a top-level tag that encloses all the content. In MathML that tag is always <math>. 4. Every opening tag must have corresponding closing tag. 5. Tags must be nested properly. ● All tags in MathML start from “m” letter, e.g. <math>, <mi>, <mn>/ 6 Basic Elements ● MathML code is inserted into the <body> element of an HTML document and wrapped with the <math>...</math> tag. ● The symbols to be represented as a part of expressions and formulas have to be inserted as text into one of the following basic child elements of the <math> tag: <mi> for variables, e.g., <mi>x</mi> for “x”; <mn> for number values, e.g., <mn>2</mn> for “2”; <mo> for mathematical operators, e.g., <mo>+</mo> for “+”, or <mo>=</mo> for “=”. ● These basic elements are therefore necessary for every expression in MathML and determine the font style of the inserted symbols. The elements <mn> and <mo> can contain several symbols, however, <mi> can contain only one-letter variables. ● Another important element in MathML is <mrow> which lets group several MathML elements to a single unit, a term. For simple examples it usually does not have a visible effect, but we will see below cases where it is necessary. 7 Constants, Symbols and Blank Spaces ● Constants and symbols rendering are implemented with character entities (like &lt; or &nbsp;) together with <mn>..</mn> tag. ● For example <mn>&alpha;</mn> will display α; <mn>&pi;</mn> will display π; <mn>&infin;</mn> will display ∞; <mn>&pm;</mn> will display ±; <mn>&hbar;</mn> will display ℏ. ● See complete list of all characters here https://www.w3.org/TR/MathML2/chapter6.html#chars.entity.tables ● The MathML <mspace> element is used to display a blank space, whose size is set by its attributes, e.g. depth, height, width. 8 Superscripts, Subscripts, Fractions ● Expressions can be written as superscripts or subscripts using tags <msup> and <msub> respectively. <msup> and <msub> should contain exactly two child elements (two parameters are passed to msup/msub command): the first one is treated as a variable, the second one is actually an expression for superscript/subscript. you want to display expression consisting of more than one element you should use <mrow> tag to group elements together. ● A fraction is generated by the element <mfrac>. <mfrac> should also contain exactly two child elements: the first one will is used as numerator, the second one provides content for denominator. For example, typesetting for “2 over x” expression will look like: <mfrac> <mn>2</mn> <mi>x</mi> </mfrac> ● If the numerator or the denominator consists of several terms, they have to be grouped by <mrow> to separate units. For example, typesetting for “2 over (x + 3)” expression will look like: <mfrac> <mn>2</mn> <mrow><mi>x</mi><mo>+</mo><mn>3></mn></mrow> </mfrac> 9 Square Root, Sum, Limit, Integral ● In MathML the root symbol is generated by the element <msqrt>. The tag should have exactly one child to be used an expression under the square root. ● To display roots with indices different from 2, i.e., to use other roots than the square root, MathML provides the element <mroot> which expects two subelements, first the term from which the root is to be extracted, and second the index. ● <munder>/<mover> can attach attach an accent or a limit under/ below an expression. Both tags expect two child elements: base expression and expression to be attached under/below the base expression. ● The limits of sums, products or integrals are enabled by the element <munderover>. It expects three elements in the ordered sequence: symbol (sum &sum; or integral &int;), the lower limit, and the upper limit. If one of the limits is not intended to be displayed, its place has to occupied by an empty element <mn></mn>. ● Again, to display an expression that is longer than just a single variable/number use <mrow> tag. 10 Functions ● Functions are usually displayed in italic letters, thus they should be included into <mi> tags. However, names for standard functions like sine, cosine, logarithm etc. are represented in roman letters, and so several letters enclosed by <mi> tags are not displayed in italic. ● Functions of several variables can be defined in MathML by the grouping element <mfenced>. ● The commas between the arguments then are set automatically. In case of a single argument consequently no comma is displayed. 11 Matrices ● To display matrices, we need to combine <mfenced> element and <mtable> element. <mtable> is responsible for rendering tabular structure; <mfenced> will enclose the table in brackets. <mtable> should be nested inside <mfenced>. ● <mtable> has the same structure as an HTML table <table>, only with the mandatory m prefix in the element name, i.e. table row is defined with <mtr> tag and inside each row we define cells using <mtd> tag. ● With the attributes open and close in <mfenced> we can customize the brackets to be display, e.g. <mfenced open="[" close="]"> or <mfenced open="{" close="}">. 12 Indented Formulas ● A mathematical expression may appear in the running text (“inline mode”) or indented from the running text and centered (“display mode”).
Recommended publications
  • Differential Fuzzing the Webassembly
    Master’s Programme in Security and Cloud Computing Differential Fuzzing the WebAssembly Master’s Thesis Gilang Mentari Hamidy MASTER’S THESIS Aalto University - EURECOM MASTER’STHESIS 2020 Differential Fuzzing the WebAssembly Fuzzing Différentiel le WebAssembly Gilang Mentari Hamidy This thesis is a public document and does not contain any confidential information. Cette thèse est un document public et ne contient aucun information confidentielle. Thesis submitted in partial fulfillment of the requirements for the degree of Master of Science in Technology. Antibes, 27 July 2020 Supervisor: Prof. Davide Balzarotti, EURECOM Co-Supervisor: Prof. Jan-Erik Ekberg, Aalto University Copyright © 2020 Gilang Mentari Hamidy Aalto University - School of Science EURECOM Master’s Programme in Security and Cloud Computing Abstract Author Gilang Mentari Hamidy Title Differential Fuzzing the WebAssembly School School of Science Degree programme Master of Science Major Security and Cloud Computing (SECCLO) Code SCI3084 Supervisor Prof. Davide Balzarotti, EURECOM Prof. Jan-Erik Ekberg, Aalto University Level Master’s thesis Date 27 July 2020 Pages 133 Language English Abstract WebAssembly, colloquially known as Wasm, is a specification for an intermediate representation that is suitable for the web environment, particularly in the client-side. It provides a machine abstraction and hardware-agnostic instruction sets, where a high-level programming language can target the compilation to the Wasm instead of specific hardware architecture. The JavaScript engine implements the Wasm specification and recompiles the Wasm instruction to the target machine instruction where the program is executed. Technically, Wasm is similar to a popular virtual machine bytecode, such as Java Virtual Machine (JVM) or Microsoft Intermediate Language (MSIL).
    [Show full text]
  • XML a New Web Site Architecture
    XML A New Web Site Architecture Jim Costello Derek Werthmuller Darshana Apte Center for Technology in Government University at Albany, SUNY 1535 Western Avenue Albany, NY 12203 Phone: (518) 442-3892 Fax: (518) 442-3886 E-mail: [email protected] http://www.ctg.albany.edu September 2002 © 2002 Center for Technology in Government The Center grants permission to reprint this document provided this cover page is included. Table of Contents XML: A New Web Site Architecture .......................................................................................................................... 1 A Better Way? ......................................................................................................................................................... 1 Defining the Problem.............................................................................................................................................. 1 Partial Solutions ...................................................................................................................................................... 2 Addressing the Root Problems .............................................................................................................................. 2 Figure 1. Sample XML file (all code simplified for example) ...................................................................... 4 Figure 2. Sample XSL File (all code simplified for example) ....................................................................... 6 Figure 3. Formatted Page Produced
    [Show full text]
  • Document Object Model
    Document Object Model DOM DOM is a programming interface that provides a way for the values and structure of an XML document to be accessed and manipulated. Tasks that can be performed with DOM . Navigate an XML document's structure, which is a tree stored in memory. Report the information found at the nodes of the XML tree. Add, delete, or modify elements in the XML document. DOM represents each node of the XML tree as an object with properties and behavior for processing the XML. The root of the tree is a Document object. Its children represent the entire XML document except the xml declaration. On the next page we consider a small XML document with comments, a processing instruction, a CDATA section, entity references, and a DOCTYPE declaration, in addition to its element tree. It is valid with respect to a DTD, named root.dtd. <!ELEMENT root (child*)> <!ELEMENT child (name)> <!ELEMENT name (#PCDATA)> <!ATTLIST child position NMTOKEN #REQUIRED> <!ENTITY last1 "Dover"> <!ENTITY last2 "Reckonwith"> Document Object Model Copyright 2005 by Ken Slonneger 1 Example: root.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE root SYSTEM "root.dtd"> <!-- root.xml --> <?DomParse usage="java DomParse root.xml"?> <root> <child position="first"> <name>Eileen &last1;</name> </child> <child position="second"> <name><![CDATA[<<<Amanda>>>]]> &last2;</name> </child> <!-- Could be more children later. --> </root> DOM imagines that this XML information has a document root with four children: 1. A DOCTYPE declaration. 2. A comment. 3. A processing instruction, whose target is DomParse. 4. The root element of the document. The second comment is a child of the root element.
    [Show full text]
  • Extensible Markup Language (XML) and Its Role in Supporting the Global Justice XML Data Model
    Extensible Markup Language (XML) and Its Role in Supporting the Global Justice XML Data Model Extensible Markup Language, or "XML," is a computer programming language designed to transmit both data and the meaning of the data. XML accomplishes this by being a markup language, a mechanism that identifies different structures within a document. Structured information contains both content (such as words, pictures, or video) and an indication of what role content plays, or its meaning. XML identifies different structures by assigning data "tags" to define both the name of a data element and the format of the data within that element. Elements are combined to form objects. An XML specification defines a standard way to add markup language to documents, identifying the embedded structures in a consistent way. By applying a consistent identification structure, data can be shared between different systems, up and down the levels of agencies, across the nation, and around the world, with the ease of using the Internet. In other words, XML lays the technological foundation that supports interoperability. XML also allows structured relationships to be defined. The ability to represent objects and their relationships is key to creating a fully beneficial justice information sharing tool. A simple example can be used to illustrate this point: A "person" object may contain elements like physical descriptors (e.g., eye and hair color, height, weight), biometric data (e.g., DNA, fingerprints), and social descriptors (e.g., marital status, occupation). A "vehicle" object would also contain many elements (such as description, registration, and/or lien-holder). The relationship between these two objects—person and vehicle— presents an interesting challenge that XML can address.
    [Show full text]
  • HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, Javascript and Web Storage
    Androidfp_19.fm Page 1 Friday, May 18, 2012 10:32 AM 19 HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, JavaScript and Web Storage Objectives In this chapter you’ll: ■ Implement a web-based version of the Favorite Twitter Searches app from Chapter 5. ■ Use HTML5 and CSS3 to implement the interface of a web app. ■ Use JavaScript to implement the logic of a web app. ■ Use HTML5’s Web Storage APIs to store key-value pairs of data that persist between executions of a web app. ■ Use a CSS reset to remove all browser specific HTML- element formatting before styling an HTML document’s elements. ■ Save a shortcut for a web app to your device’s home screen so you can easily launch a web app. = DRAFT: © Copyright 1992–2012 by Deitel & Associates, Inc. All Rights Reserved. Androidfp_19.fm Page 2 Friday, May 18, 2012 10:32 AM 2 Chapter 19 HTML5 Favorite Twitter Searches App 19.1 Introduction 19.5 Building the App 19.2 Test-Driving the Favorite Twitter 19.5.1 HTML5 Document Searches App 19.5.2 CSS 19.5.3 JavaScript 19.3 Technologies Overview Outline 19.6 Wrap-Up 19.1 Introduction The Favorite Twitter Searches app from Chapter 5 allowed users to save their favorite Twit- ter search strings with easy-to-remember, user-chosen, short tag names. Users could then conveniently follow tweets on their favorite topics. In this chapter, we reimplement the Fa- vorite Twitter Searches app as a web app, using HTML5, CSS3 and JavaScript.
    [Show full text]
  • Seamless Offloading of Web App Computations from Mobile Device to Edge Clouds Via HTML5 Web Worker Migration
    Seamless Offloading of Web App Computations From Mobile Device to Edge Clouds via HTML5 Web Worker Migration Hyuk Jin Jeong Seoul National University SoCC 2019 Virtual Machine & Optimization Laboratory Department of Electrical and Computer Engineering Seoul National University Computation Offloading Mobile clients have limited hardware resources Require computation offloading to servers E.g., cloud gaming or cloud ML services for mobile Traditional cloud servers are located far from clients Suffer from high latency 60~70 ms (RTT from our lab to the closest Google Cloud DC) Latency<50 ms is preferred for time-critical games Cloud data center End device [Kjetil Raaen, NIK 2014] 2 Virtual Machine & Optimization Laboratory Edge Cloud Edge servers are located at the edge of the network Provide ultra low (~a few ms) latency Central Clouds Mobile WiFi APs Small cells Edge Device Cloud Clouds What if a user moves? 3 Virtual Machine & Optimization Laboratory A Major Issue: User Mobility How to seamlessly provide a service when a user moves to a different server? Resume the service at the new server What if execution state (e.g., game data) remains on the previous server? This is a challenging problem Edge computing community has struggled to solve it • VM Handoff [Ha et al. SEC’ 17], Container Migration [Lele Ma et al. SEC’ 17], Serverless Edge Computing [Claudio Cicconetti et al. PerCom’ 19] We propose a new approach for web apps based on app migration techniques 4 Virtual Machine & Optimization Laboratory Outline Motivation Proposed system WebAssembly
    [Show full text]
  • An XML Model of CSS3 As an XƎL ATEX-TEXML-HTML5 Stylesheet
    An XML model of CSS3 as an XƎLATEX-TEXML-HTML5 stylesheet language S. Sankar, S. Mahalakshmi and L. Ganesh TNQ Books and Journals Chennai Abstract HTML5[1] and CSS3[2] are popular languages of choice for Web development. However, HTML and CSS are prone to errors and difficult to port, so we propose an XML version of CSS that can be used as a standard for creating stylesheets and tem- plates across different platforms and pagination systems. XƎLATEX[3] and TEXML[4] are some examples of XML that are close in spirit to TEX that can benefit from such an approach. Modern TEX systems like XƎTEX and LuaTEX[5] use simplified fontspec macros to create stylesheets and templates. We use XSLT to create mappings from this XML-stylesheet language to fontspec-based TEX templates and also to CSS3. We also provide user-friendly interfaces for the creation of such an XML stylesheet. Style pattern comparison with Open Office and CSS Now a days, most of the modern applications have implemented an XML package format that includes an XML implementation of stylesheet: InDesign has its own IDML[6] (InDesign Markup Language) XML package format and MS Word has its own OOXML[7] format, which is another ISO standard format. As they say ironically, the nice thing about standards is that there are plenty of them to choose from. However, instead of creating one more non-standard format, we will be looking to see how we can operate closely with current standards. Below is a sample code derived from OpenOffice document format: <style:style style:name=”Heading_20_1” style:display-name=”Heading
    [Show full text]
  • Copyrighted Material
    05_096970 ch01.qxp 4/20/07 11:27 PM Page 3 1 Introducing Cascading Style Sheets Cascading style sheets is a language intended to simplify website design and development. Put simply, CSS handles the look and feel of a web page. With CSS, you can control the color of text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what back- ground images or colors are used, as well as a variety of other visual effects. CSS was created in language that is easy to learn and understand, but it provides powerful control over the presentation of a document. Most commonly, CSS is combined with the markup languages HTML or XHTML. These markup languages contain the actual text you see in a web page — the hyperlinks, paragraphs, headings, lists, and tables — and are the glue of a web docu- ment. They contain the web page’s data, as well as the CSS document that contains information about what the web page should look like, and JavaScript, which is another language that pro- vides dynamic and interactive functionality. HTML and XHTML are very similar languages. In fact, for the majority of documents today, they are pretty much identical, although XHTML has some strict requirements about the type of syntax used. I discuss the differences between these two languages in detail in Chapter 2, and I also pro- vide a few simple examples of what each language looks like and how CSS comes together with the language to create a web page. In this chapter, however, I discuss the following: ❑ The W3C, an organization that plans and makes recommendations for how the web should functionCOPYRIGHTED and evolve MATERIAL ❑ How Internet documents work, where they come from, and how the browser displays them ❑ An abridged history of the Internet ❑ Why CSS was a desperately needed solution ❑ The advantages of using CSS 05_096970 ch01.qxp 4/20/07 11:27 PM Page 4 Part I: The Basics The next section takes a look at the independent organization that makes recommendations about how CSS, as well as a variety of other web-specific languages, should be used and implemented.
    [Show full text]
  • Qumu HTML5 Multicast Extension Deliver Video Across the Enterprise—With No Plugins Required
    DATASHEET Qumu HTML5 Multicast Extension Deliver video across the enterprise—with no plugins required What is it? The Qumu HTML5 Multicast Extension is a revolutionary solution to the problem introduced by modern browsers— delivering Multicast video behind the firewall, to users who no longer have browsers that support Microsoft Silverlight. The HTML5 Multicast Extension from Qumu provides a seamless way to play a Multicast live broadcast natively in newer versions of Google Chrome, Internet Explorer, Microsoft Edge and Firefox. How does it work? Deployed with Qumu’s on premise solution, enterprises simply install the extension on each desktop to allow employees to experience live streaming with Multicast on the browser of their choice. By working together with the Qumu VideoNet Edge that originates multicast throughout the corporate network, the HTML5 Multicast Extension provides a complete solution for delivering and rendering multicast video in corporate environment. What are the benefits? Organizations can leverage current infrastructure on the Network and WAN to support multicast in modern browsers The extension supports HTML5 with no additional requirements for Windows Media, Flash, or Silverlight The Qumu HTML5 Multicast Extension delivers high-quality video to the entire organization with minimal network impact Qumu on premise platform customers can expand their video delivery footprint to thousands of users—quickly and cost effectively The extension can be deployed and managed via a software- only solution, 100% behind the firewall. Playlist failover from RTP Multicast to RTSP Unicast is supported, and so are in-band slides and events What are the technical details? Client Support: Formats Supported: · Windows 7, 8.1 and 10 · IE11 (Win10) Live – RTP Multicast, RTSP Unicast · Google Chrome · Microsoft Edge · Firefox Want to Know More? Contact Us.
    [Show full text]
  • Mathplayer: Web-Based Math Accessibility Neil Soiffer Design Science, Inc 140 Pine Avenue, 4Th Floor
    MathPlayer: Web-based Math Accessibility Neil Soiffer Design Science, Inc 140 Pine Avenue, 4th Floor. Long Beach, CA 90802 USA +1 562-432-2920 [email protected] ABSTRACT UMA[4] and Lambda[9]. Both projects have a strong focus on MathPlayer is a plug-in to Microsoft’s Internet Explorer (IE) that two-way translation between MathML and multiple braille math renders MathML[11] visually. It also contains a number of codes. They also include some standalone software for voicing features that make mathematical expressions accessible to people and navigating math. with print-disabilities. MathPlayer integrates with many screen Our work differs from previous work mainly in its focus – readers including JAWS and Window-Eyes. MathPlayer also MathPlayer is a mainstream application that is also designed to works with a number of TextHELP!’s learning disabilities work with popular assistive technology (AT) software. Our goal is products. to allow people to continue to use tools that they are already familiar with such as JAWS and IE, and not require them to use a Categories and Subject Descriptors different browser simply because the document they are reading H.5.4 [Information Systems]: Information Interfaces and contains mathematical expressions. Presentation—User Issues. 2. MATHPLAYER FEATURES General Terms MathPlayer is a free plug-in for IE that displays MathML in Web Design, Human Factors. pages. Because MathML is not an image format, MathPlayer is able to dynamically display a mathematical expression that Keywords matches the document’s font properties such as size and color. Hence, if a user chooses to read a document using a larger font Print Disabilities, Visual Impairments, Math Accessibility, size than standard or chooses a particular color scheme, the math Assistive Technology, MathML will also be displayed using that larger font size or color scheme.
    [Show full text]
  • HTML5 Indexeddb
    HHTTMMLL55 -- IINNDDEEXXEEDDDDBB http://www.tutorialspoint.com/html5/html5_indexeddb.htm Copyright © tutorialspoint.com The indexeddb is a new HTML5 concept to store the data inside user's browser. indexeddb is more power than local storage and useful for applications that requires to store large amount of the data. These applications can run more efficiency and load faster. Why to use indexeddb? The W3C has announced that the Web SQL database is a deprecated local storage specification so web developer should not use this technology any more. indexeddb is an alternative for web SQL data base and more effective than older technologies. Features it stores key-pair values it is not a relational database IndexedDB API is mostly asynchronous it is not a structured query language it has supported to access the data from same domain IndexedDB Before enter into an indexeddb, we need to add some prefixes of implementation as shown below window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange if (!window.indexedDB) { window.alert("Your browser doesn't support a stable version of IndexedDB.") } Open an IndexedDB database Before creating a database, we have to prepare some data for the data base.let's start with company employee details. const employeeData = [ { id: "01", name: "Gopal K Varma", age: 35,
    [Show full text]
  • Coding Your First HTML5 Game
    Coding Your First HTML5 Game Randy Hoyt @randyhoyt randyhoyt.com/launchgame @randyhoyt Overview • Code • HTML5 • Games @randyhoyt Overview • Games • HTML5 • Code @randyhoyt Games Games • Games are fun I love games! @randyhoyt A Theory of Fun (2004), by Ralph Koster Games • Games are fun • Games are everywhere I love games! @randyhoyt Homo Ludens (1938), by Johan Huizinga Games • Games are fun • Games are everywhere • Games exercise the brain I love games! @randyhoyt Play engages the prefrontal cortex, responsible for your highest-level cognitive functions – including self- knowledge, memory, mental imagery, and incentive and reward processing. Brain Workout, Life Optimizer, http://trhou.se/WHkaR7 Brain Workout, Life Optimizer, http://trhou.se/WHkaR7 Games • Games are fun • Games are everywhere • Games exercise the brain • Games are practice for the real world I love games! @randyhoyt 7 TED Talks on Gaming, http://trhou.se/gamesTED Games And Me @randyhoyt HTML5 Buzzword Alert! HTML5 and Related Technologies • Canvas @randyhoyt HTML5 and Related Technologies • Canvas • WebGL http://trhou.se/whyWebGL @randyhoyt HTML5 and Related Technologies • Canvas • WebGL http://trhou.se/whyWebGL • WebSocket http://trhou.se/introwebsockets @randyhoyt HTML5 and Related Technologies • Canvas • WebGL http://trhou.se/whyWebGL • WebSocket http://trhou.se/introwebsockets • SVG @randyhoyt HTML5 Games It’s official: with HTML5 today the browser has become a full- fledged gaming platform. HTML5 Gaming, http://html5rocks.com/gaming Behind the Scenes, http://www.cuttherope.ie/dev/
    [Show full text]