Successfully reported this slideshow.
Your SlideShare is downloading. ×

Ada Lovelace Day 2017

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 78 Ad
Advertisement

More Related Content

Similar to Ada Lovelace Day 2017 (20)

Advertisement

Recently uploaded (20)

Ada Lovelace Day 2017

  1. 1. Ada Lovelace Day 2017 Web technologies and Lezba.si/Dyke.tech
  2. 2. ● Intro ○ Ada Lovelace Day- History ○ Lezba.si ○ Firefox and help at MDN ● HTML ○ Source code ○ Code added with JavaScript/jQuery ○ Changing code ● CSS ○ Changing styles ○ Images ○ Images as code Topics for today ● Good to know ○ Google and robots.txt ○ Saving data in the browser - cookies and Local Storage ○ Privacy badger ● JavaScript ○ Variables ○ If, for, forEach ○ RegEx ○ Elements on the web page ○ Getting data from web pages ● Lezba.si/Dyke.tech - solving tasks
  3. 3. 1. https://www.lezba.si 2. https://developer.mozilla.org/en-US/ 3. https://www.mozilla.org/en-US/firefox/new/ 4. http://lizzythelezzy.com/ 5. https://www.lezfemuniverza.org/ 6. https://moments.epic.net/#bird 7. https://www.typewithpride.com/ 8. http://edition.cnn.com/robots.txt 9. https://www.facebook.com/robots.txt 10. http://edition.cnn.com/ 11. https://www.eff.org/privacybadger 12. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions 13. https://www.typewithpride.com/ 14. http://radiostudent.si/dru%C5%BEba/sektor-%C5%BE/podcast 15. https://www.lezba.si Links
  4. 4. mozilla.org/en-US/firefox/new/
  5. 5. developer.mozilla.org
  6. 6. Open new tab CTRL + Klik
  7. 7. Change font size Ctrl + Ctrl -
  8. 8. Web page is built with ● HTML ● CSS ● JavaScript ● Images ● Fonts …
  9. 9. lizzythelezzy.com
  10. 10. Task: Review code #1 ● Right click > View Page Source ● Ctrl + U
  11. 11. lezfemuniverza.org
  12. 12. Task: Review code #2 ● Right click > View Page Source ● Ctrl + U
  13. 13. Firefox Developer Tools
  14. 14. Task: Review code #3 - Inspector tab F12
  15. 15. HTML Elements ● body ● H1 ● ... Attributes ● class= ● id= ● style= ● src=
  16. 16. Task: HTML ● Select an element on the web page ● Use the search ● Change content ● Add elements ● Remove elements
  17. 17. CSS Style HTML elements
  18. 18. body { /* background color */ background: #000; } #id { /* hide element */ display: none; } .class { font-size: 20px; }
  19. 19. Task: CSS Change CSS and see changes on the website ● Color of the background ● Font size ● Hide title, image...
  20. 20. moments.epic.net/#bird
  21. 21. Images
  22. 22. typewithpride.com
  23. 23. Images as code
  24. 24. SVG
  25. 25. SVG <svg class="sqs-svg-icon--social" viewBox="0 0 64 64"> <use class="sqs-use--icon" xlink:href="#twitter-icon"></use> <use class="sqs-use--mask" xlink:href="#twitter-mask"></use> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none"> <symbol id="twitter-icon" viewBox="0 0 64 64"> <path d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0 .1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"></path> </symbol> <symbol id="twitter-mask" viewBox="0 0 64 64"> <path d="M0,0v64h64V0H0z M44.7,25.5c0,0.3,0,0.6,0,0.8C44.7,35,38.1,45,26.1,45c-3.7,0-7.2-1.1-10.1-2.9 c0.5,0.1,1,0.1,1.6,0.1c3.1,0,5.9-1,8.2-2.8c-2.9-0.1-5.3-2-6.1-4.6c0.4,0.1,0.8,0.1,1.2,0.1c0.6,0,1.2-0.1,1.7-0.2 c-3-0.6-5.3-3.3-5.3-6.4c0,0,0-0.1,0-0.1c0.9,0.5,1.9,0.8,3,0.8c-1.8-1.2-2.9-3.2-2.9-5.5c0-1.2,0.3-2.3,0.9-3.3 c3.2,4,8.1,6.6,13.5,6.9c-0.1-0.5-0.2-1-0.2-1.5c0-3.6,2.9-6.6,6.6-6.6c1.9,0,3.6,0.8,4.8,2.1c1.5-0.3,2.9-0.8,4.2-1.6 c-0.5,1.5-1.5,2.8-2.9,3.6c1.3-0.2,2.6-0.5,3.8-1C47.1,23.4,46,24.5,44.7,25.5z"></path> </symbol> </svg>
  26. 26. data:image/jpeg;base64,/9j/7AARRHVja3kAAQAEAAAAZAAA/+EDMWh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz 4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMjEgNzkuMTU1NzcyLCAyMDE0LzAxLzEzLTE5OjQ0OjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3J nLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpz dFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNDk2NTIyMTE1MDIxM UU3QjhENEFFMDUxNUQ3Mjk1NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowNDk2NTIyMjE1MDIxMUU3QjhENEFFMDUxNUQ3Mjk1NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA0OTY1MjFGMTUwMjExRTdCOEQ0 QUUwNTE1RDcyOTU3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA0OTY1MjIwMTUwMjExRTdCOEQ0QUUwNTE1RDcyOTU3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGT AAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM 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
  27. 27. HTML <div> <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38 GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /> <img src="//d2wd18kp3k18ix.cloudfront.net/no rdicdesign2017/pens.svg" alt="Pens" /> </div> CSS div { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZ J….."); }
  28. 28. Task: CSS With CSS ● Add an image to the background of HTML element
  29. 29. Task: Add image in the background with CSS #page{ background: url("https://static1.squarespace.com/static/58e d2d6244024330c0a58707/t/58ee4bed9de4bbc8715ce8c a/1497857366405/?format=1500w"); }
  30. 30. Task: Add image in the background with CSS #page { background: url("data:image/jpeg;base64,/9j/7AARRHVja3kAAQA EAAAAZA..."); }
  31. 31. cnn.com/robots.txt Sitemap: http://www.cnn.com/sitemaps/sitemap-index.xml Sitemap: http://www.cnn.com/sitemaps/sitemap-news.xml Sitemap: http://www.cnn.com/sitemaps/sitemap-video-index.xml Sitemap: http://www.cnn.com/sitemaps/sitemap-section.xml Sitemap: http://www.cnn.com/sitemaps/sitemap-interactive.xml User-agent: * Allow: /partners/ipad/live-video.json Disallow: /editionssi Disallow: /ads Disallow: /aol Disallow: /audio Disallow: /beta Disallow: /browsers Disallow: /cl Disallow: /cnews Disallow: /cnn_adspaces Disallow: /cnnbeta Disallow: /cnnintl_adspaces Disallow: /development Disallow: /help/cnnx.html Disallow: /NewsPass Disallow: /NOKIA Disallow: /partners Disallow: /pipeline Disallow: /pointroll Disallow: /POLLSERVER Disallow: /pr/ Disallow: /PV Disallow: /quickcast Disallow: /Quickcast Disallow: /QUICKNEWS Disallow: /test Disallow: /virtual Disallow: /WEB-INF Disallow: /web.projects Disallow: /search
  32. 32. Cookies and saving data in the browser
  33. 33. eff.org/privacybadger
  34. 34. JavaScript In the console
  35. 35. Variables
  36. 36. Numbers var one = 1; one = Math.random();
  37. 37. String var word; word = 'beseda'; word.length;
  38. 38. Array var list = [1, 2, 3]; list.length;
  39. 39. Object var myObj = { name: "LFU", location: "World" }; myObj.name
  40. 40. Boolean var bool = true; var bool = false;
  41. 41. Null var moon = null;
  42. 42. Function function add(num) { return num + num; } var result = add(5); console.log(result);
  43. 43. If
  44. 44. var one = 1, first = 1, best = 1; if (one === first) { console.log(They are the same'); } else if (first === best) { console.log('Top 2!'); } else { console.log ('They are not the same'); }
  45. 45. For loop
  46. 46. for (var i = 1; i < 10; i++) { console.log('LFU'); }
  47. 47. for (var i = 1; i < 10; i++) { console.log(Math.random()); }
  48. 48. forEach
  49. 49. var list = [1, 2, 3]; list.forEach( item => console.log(item) );
  50. 50. Regular Expressions RegEx
  51. 51. ^HTML
  52. 52. developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
  53. 53. var name = 'LFU' var pattern = /LFU/; // whole word // var pattern = /^L/; // beginning // var pattern = /U$/; // end // var pattern = /.{3}/; // 3 characters // var pattern = /.*/; // anything // var pattern = /L.U/; // LIU, LAV ... if (pattern.exec(name) !== null) { console.log(name) }
  54. 54. Let’s play with elements on the web site
  55. 55. Get elements $$(selector)
  56. 56. $$('h2') $$('div li') $$('#page') $$('.black')
  57. 57. $$('li').forEach( item => console.log (item) );
  58. 58. $$('h2').forEach( h2 => console.log(h2.innerText) )
  59. 59. $$('img').forEach( img => console.log(img.src) )
  60. 60. radiostudent.si/dru%C5%BEba/sektor-%C5%BE/podcast
  61. 61. Task: Get data from the web site ● All titles ● All mp3 links
  62. 62. All titles $$('h3 a span').forEach( title => console.log(title.innerText) )
  63. 63. All mp3 links $$('.enclosure a').forEach( a => console.log(a.href) )
  64. 64. All mp3 links - alternative $$('[href$=".mp3"]').forEach( a => console.log(a.href) )
  65. 65. Remember, multiple solutions are available!

×