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

		

	


	

		

		

			

			

		

	








	

		

			

			

				Source: Alberto Romeu
			

				

					
					
				

			


			

				
				
			

		


		

			
		


		


		

			

				
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,715
					
    • 
				

			


			

			

		

	


	

		
More from Abhiram Ravikumar