Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Instagram filters (8 24)
Similar a Instagram filters (8 24) (20)
Más de Ivy Rueb
Más de Ivy Rueb (20)
Último
Último (20)
Instagram filters (8 24)
- 1. Build your own Instagram Filters with Javascript May 2017 http://bit.ly/tf-filters Please download Sublime Text & Firefox
- 2. Note Sublime Text is the text editor we’ll be using. We’ll be opening our HTML files in Firefox. Please make sure you have both downloaded and installed.
- 3. About me • Ivy Rueb • Thinkful Community Manager • Thinkful Graduate
- 4. The Assistance • London Baker • Thinkful Student
- 5. Now Tell Us About you Your Name? What brought you to the workshop tonight? What programming languages have you used?
- 6. About us Thinkful prepares students for web development & data science jobs with 1-on-1 mentorship programs
- 7. Goals • Set up static web page using Javascript • HTML + Javascript basics • Access third-party library in Javascript • Build v1 of Instagram app • Advanced challenges
- 8. The Starter Code Download and unzip the starter files into a folder on your desktop (four files in total). Open index.html and index.js in Sublime Text. http://bit.ly/tf-instagram-starter
- 9. Demo Double-click on the index.html file and open it in Firefox
- 10. Demo Click “Apply Filter” and the picture should change
- 11. Demo Click “Revert Filter” to change the picture back
- 12. HTML overview HTML is the content and structure of a webpage It’s the skeleton of your website.
- 13. HTML tags Every tag starts with a “less than” sign and ends with a “greater than” sign <html> #this is an HTML opening tag <body> #this is a body opening tag <h1>Hello world!</h1> #this is set of H1 tags </body> #this is a body closing tag </html> #this is an HTML closing tag
- 14. More about tags • There are opening tags and closing tags — closing tags have a backslash before the tag name (</html> versus <html>) • Tags instruct a browser about the structure of our website • There are hundreds of built-in tags though you’ll use the same few a lot
- 15. HTML attributes HTML attributes set properties on an element — the are attached in the opening tag <a href=“https://somewhere.com">This is a link</a> href is an attribute that sets the destination of a link <h1 id=“headline”>This is a headline</h1> id is another attribute that identifies element (for CSS & Javascript)
- 16. Basic functions A function lets you separate your code into bite-sized pieces which you can use over again. When you write a function to use later, you are “declaring” it. When you use (or run) that function you are “calling” it.
- 17. Example Declaring a function function doSomething() { alert(“Done!”); } Calling a function doSomething();
- 18. More about basic functions • Functions can save us time because we can use them over and over code. They are like building blocks. • Make your code more organized and easier to read • Javascript has many built-in functions • You’ll write many, many functions in your programs
- 19. Lets work through the rest of the HTML
- 20. Javascript overview If HTML is the skeleton of a website, Javascript is the brains. Javascript controls the behavior of our app We’ll write our Javascript in the index.js file. We’ll then import that file using a similar syntax.
- 21. Adding our functions to index.js
- 22. What is a third-party “library”? In JavaScript, we can use third-party libraries to do cool things. A third-party library is a JavaScript file that contains a bunch of functions that someone else wrote for us. There are a ton of these in every language.
- 23. The CamanJS Library We’ll be using the CamanJS library (camanjs.com)
- 24. Importing the CamanJS library The CamanJS library is included in your starter code. You’ll import it with this syntax at the top of your index.html file.
- 25. Documentation How do we know what functions we can use? We could look at the JavaScript file, if it's short, or better, we could look at the documentation. All common libraries will have documentation with a list of available functions and/or real-world examples.
- 26. Note A core part of being a developer is constantly learning new languages, tools, libraries, and frameworks. They will all be documented and you should get used to finding answers through these resources.
- 28. Our two functions The right function is “called” when a button is clicked
- 29. Challenge #1 • Change out the example image with your own image • Adjust the filter values in the example code to update the filter. • Make your own filter with at least one new property (hint: look in built-in functionality)
- 30. Challenge #2 Instead of making your own filter, try using a built-in filter Here’s a full list: vintage, lomo, clarity, sinCity, sunrise, crossProcess, orangePeel, love, grungy, barques, pinhole, oldBoot, glowingSun, hazyDays, herMajest, nostalgia, hemingway, concentrate
- 31. Challenge #3 (Advanced) • Add more buttons, each one should add only one filter • Try cropping your pictures to different sized frames