Ada Lovelace Day 2017
•
1 j'aime•489 vues
We were celebrating Ada Lovelace Day 2017 with a workshop organized by Lesbian-feminist university where we were learning about web technologies.
Recommandé
Contenu connexe
Similaire à Ada Lovelace Day 2017
Similaire à Ada Lovelace Day 2017 (20)
Plus de Maja Kraljič
Plus de Maja Kraljič (12)
Dernier
Dernier (20)
Ada Lovelace Day 2017
- 1. Ada Lovelace Day 2017 Web technologies and Lezba.si/Dyke.tech
- 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. 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
- 7. Open new tab CTRL + Klik
- 8. Change font size Ctrl + Ctrl -
- 9. Web page is built with ● HTML ● CSS ● JavaScript ● Images ● Fonts …
- 11. Task: Review code #1 ● Right click > View Page Source ● Ctrl + U
- 14. Task: Review code #2 ● Right click > View Page Source ● Ctrl + U
- 17. Task: Review code #3 - Inspector tab F12
- 18. HTML Elements ● body ● H1 ● ... Attributes ● class= ● id= ● style= ● src=
- 19. Task: HTML ● Select an element on the web page ● Use the search ● Change content ● Add elements ● Remove elements
- 21. body { /* background color */ background: #000; } #id { /* hide element */ display: none; } .class { font-size: 20px; }
- 22. Task: CSS Change CSS and see changes on the website ● Color of the background ● Font size ● Hide title, image...
- 25. Images
- 28. Images as code
- 29. SVG
- 30. 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>
- 32. 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….."); }
- 33. Task: CSS With CSS ● Add an image to the background of HTML element
- 35. Task: Add image in the background with CSS #page{ background: url("https://static1.squarespace.com/static/58e d2d6244024330c0a58707/t/58ee4bed9de4bbc8715ce8c a/1497857366405/?format=1500w"); }
- 38. Task: Add image in the background with CSS #page { background: url("data:image/jpeg;base64,/9j/7AARRHVja3kAAQA EAAAAZA..."); }
- 40. 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
- 41. Cookies and saving data in the browser
- 46. Variables
- 47. Numbers var one = 1; one = Math.random();
- 48. String var word; word = 'beseda'; word.length;
- 49. Array var list = [1, 2, 3]; list.length;
- 50. Object var myObj = { name: "LFU", location: "World" }; myObj.name
- 51. Boolean var bool = true; var bool = false;
- 52. Null var moon = null;
- 53. Function function add(num) { return num + num; } var result = add(5); console.log(result);
- 54. If
- 55. 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'); }
- 56. For loop
- 57. for (var i = 1; i < 10; i++) { console.log('LFU'); }
- 58. for (var i = 1; i < 10; i++) { console.log(Math.random()); }
- 59. forEach
- 60. var list = [1, 2, 3]; list.forEach( item => console.log(item) );
- 63. ^HTML
- 65. 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) }
- 66. Let’s play with elements on the web site
- 69. $$('li').forEach( item => console.log (item) );
- 73. Task: Get data from the web site ● All titles ● All mp3 links
- 74. All titles $$('h3 a span').forEach( title => console.log(title.innerText) )
- 75. All mp3 links $$('.enclosure a').forEach( a => console.log(a.href) )
- 76. All mp3 links - alternative $$('[href$=".mp3"]').forEach( a => console.log(a.href) )