WEb VR camp
CMRIT
24th September, 2017
Rutuja Surve
Abhiram
@MozillaIn
Mozilla & the
WEB
Abhiram RavikumarMozilla Tech Speaker
Bangalore | 24 Sep 2017
Credits: @alrocar & @xurxosanz
CC BY-SA 4.0 International
Mission
AGENDA
- MozActivate
- HTML
- CSS
- JavaScript
Activities
Web VR
Rust
Web ExtensionS
Compat
Web VR
A frame
https://aframe.io/
Anime Ui
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
- Solves a single problem
- Modular
- Not always integrated
- Small
- http://microjs.com/
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