WEb VR camp

cc logo






CMRIT

24th September, 2017


Rutuja Surve

Abhiram

@MozillaIn



Mozilla & the

WEB

Abhiram Ravikumar
Mozilla Tech Speaker

             Bangalore | 24 Sep  2017                                                                                                                                                                         Credits: @alrocar & @xurxosanz
CC BY-SA 4.0 International

Mission



AGENDA


  1. MozActivate
  2. HTML
  3. CSS
  4. JavaScript

Activities


  • Web VR

  • Rust

  • Web ExtensionS

  • Compat

Web VR


A frame




https://aframe.io/




Anime Ui


https://aframe.io/examples/showcase/anime-UI/

Other activities at MozActivate


Header image

WEB DEVELOPMENT TOOLS

  • A text editor
  • A browser
  • A web server

INTRO TO HTML

  • Hyper Text Markup Language
  • Standard for writing web pages
  • HTML Tags - 1991
  • HTML 2.0 - 1995
  • HTML 4.0 - 1997
  • HTML 5.0 - ¿2014?

WHAT IS HTML?

WEB PAGES that run in a web browser (client side)

 <html>  <head>
    <meta charset="utf-8" />
    <title>A tiny document</title>
  </head>    <body>

    <p>My dog ate all the guacamole.</p>

  </body>
</html>

THE DOCUMENT TREE



TAGS

<tag>content</tag>

<!--paragrapah--><p>This is text within a paragraph.</p>

<!--nested tags--><p>I <strong>really</strong> mean that</p>

<!-- single elements --><img src="smileyface.jpg" />

ATTRIBUTES

<tag attributeName="attributeValue">content</tag>

<p id="myinput">
<p class="foo">

<img src="picture.gif" width="40" height="20" alt="I am a picture" />

HEAD


<head><meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Intro to web dev">
<meta name="author" content="Alberto Romeu">
<meta http-equiv="refresh" content="30">
<title>Title of the document</title>

</head>

BODY


 <body>Write here the content of your web page </body>

HEADING


 <h1>I'm a very big heading</h1>
<h2>I'm a quite big heading</h2>

<h3>I'm a big heading</h3>

<h4>I'm a heading</h4>

...

PARAGRAPH


<p>
    Here’s a paragraph.
</p>
<p>
    And here’s a different one.
    It’s as simple as that.
</p>

LINE BREAK


 I’d like to write some text<br>and then have the next bit on the line below.

span


<p>Here’s a paragraph of text. What I want to happen is to make <span style="font-weight:bold;">some of the text bold</span></p>

link


 <a href="http://www.prodevelop.es" target="blank">This is a link</a>

IMAGE


<img src="picture.jpg" width="104" height="142" />
<a href="http://www.prodevelop.es" target="blank"> <img src="picture.jpg" width="104" height="142"/></a>

DIV


Here’s some content…
<div>This is a div.</div>
<div>And this is another one. Works pretty much like a new paragraph for now.</div>
Here’s some more content…

TABLE


<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

list


<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>
<ol> <li>Coffee</li> <li>Milk</li> </ol>

html layouts


<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
I'm the footer</div>

</div>

</body>
</html>

FORM AND INPUT


<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

IFRAME


 <iframe src="demo_iframe.htm" width="200" height="200"></iframe>

LEARNING RESOURCES



INTRO TO CSS

  • Cascading Style Sheets
  • Standard for styling HTML elements
  • CSS 1  1996
  • CSS 2 1998
  • CSS3 2012
  • Browser support!! http://caniuse.com/

INTERNAL STYLESHEET


<head>
<title><title>

<style type=”text/css”> CSS Content Goes Here </style>
</head> <body>

EXTERNAL STYLESHEET


<head>
<title><title>

<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head> <body>

INLINE STYLES


 <p style=”color: #ff0000;”>Some red text</p>

CSS SYNTAX

selector { property: value }

body {
  background: #eeeeee;
  font-family: “Trebuchet MS”, Verdana, Arial, serif;
}

INHERITANCE


body {font-family: Verdana, serif;}


h1 {font-family: Georgia, sans-serif;}
p {font-family: Tahoma, serif;}

TAG SELECTOR


 <p>this is a paragraph</p>

 p {font-family: Tahoma, serif;}

CLASS SELECTOR


  <span class="greentext">I'm green</span>

 .greentext {  font-size: small;  color: #008080;}

id selector


<div id="container">This is a div</div>

 #container {  width: 80%;  margin: auto;  padding: 20px;  background: #ffffff;  border: 1px solid #666;}

NESTED SELECTORS


PROPERTIES


LEARNING RESOURCES



INTRO TO JAVASCRIPT

  • Scripting programming language
  • Client side (also server side)
  • Interpreted (runtime evaluation)
  • JavaScript 1.0 - 1996
  • Javascript 1.8.5 - 2010

JAVASCRIPT IN HTML


<script type="text/javascript">
//JavaScript goes here
</script>

<script src="whatever.js" type="text/javascript"></script> 



JAVASCRIPT LAB

JSON

  • JavaScript Object Notation
  • Plain Text
  • Human readable
  • JSON.parse(), JSON.stringify()
  • Faster, shorter, easier... than XML

THE DOCUMENT TREE



DOM

Document oBJECT MODEL


  • Access with JavaScript
  • Better with jQuery


DOM

var element = document.getElementById("theID");document.getElementByClass('a');
element.innerHTML = "Write the HTML";
element.style.color = "blue";


WEB PROGRAMMING LAB

Complete the HTML


  • Set the title of the web page
  • Add the link tag to import the profile.css file
  • Add the script tag to import the profile.js file
  • Add a VERY BIG header in the div 'container' with the id 'myname'

COMPLETE THE CSS


  • Change the body color to #444
  • Set the container width to 800px
  • Create a style for h2 tags
    • Change the weight, size and color of the font

COMPLETE THE JAVASCRIPT

  • Open the profile.js
  • Write the code necessary after the comments

libraries 

vs

micro-frameworks 

VS 

TOOLKITS

JAVASCRIPT LIBRARIES


  • A collection of functionality you can call.
  • Integrated.
  • Tested
  • BIG

JAVASCRIPT MICRO-FRAMEWORKS


javascript toolkits


  • Several libraries together
  • Set of components you can use (or not)
  • Integrated
  • BIGGER

widgetS


  • jQuery UI
  • ExtJS
  • MochaUI
  • Dijit

Graphical


  • D3
  • Raphael
  • Kinetic
  • Three

MAPPING


  • OpenLayers
  • LeafletJS (MF)
  • ModestMaps (MF)
  • PolyMapS

MAPPING GUI


  • MapQuery (jQuery)
  • GeoExt (ExtJS)

LEARNING RESOURCES



cONTACT US


Abhiram | Mozilla Tech Speaker

Mail me: abhi12ravi@gmail.com

Telegram: @abhi12ravi


Rutuja | Mozilla Rep

Mail: rutuja.r.surve@gmail.com

Telegram: @rsurve

Feedback: MZL.LA/HOWWASIT

Mozilla and the Web

By Abhiram Ravikumar

Mozilla and the Web

Slides for the Open Source Opportunities in GIS Summer School, Open Web Services and Web Map Applications. Licence: CC BY-SA 4.0 International. You are free to share and adapt.

  • 2,723