ILP "Participation"- Lynda (CSS Transforms and Transitions)
For my first independent learning project, I decided to take a Lynda.com course on transformations and transitions for websites by Patrick Carey. The course discusses how to enhance websites through the use of animation and 3-D objects. I chose this course because I have no prior experience using animations or 3-D objects for websites. With that being said, my experience was rather difficult.
The course consists of four segments, (exploring transitions, working with 2D transitions, working with 3D transformations, and working in 3D space.) For most of the course, I learned about the process behind making transitions and transformations as opposed to hands-on experience. A transition by definition is a change from an initial state to an end state or final state, (the object's final appearance.) Below is an example of how that process works.
Obviously, the best way to get someone's attention can be by a moving object, or a 3-D image. It's probably safe to assume that people stay on webpages because something entices them. A regular boring page with just words is not going to keep traffic coming to your website. So we know that animation and 3-D objects are crucial when it comes to the aesthetic of the website. What can you do with 3-D and animation? Animatable properties include, but are not limited to, (font size, background color, line height, etc.) You can also move graphics.
Using CSS 2-D, you can do multiple transformations. One can do this when he or she wants to move a graphic, but they also would like to implement a credit/debit card function on a website. An example would be when a customer puts in the wrong data for a credit card number. The hover effect which I learned about in this section, is used to move a graphic, (like the art in the screenshot at the top of the page below.) The invalid pseudo class is used through the program when the user has entered the wrong data. The focus class is used when the user is in the process of entering data. A glowing red shadow will be used to indicate that the customer entered the wrong security number for example. These are just some instances where transition and animation is used on the web.
This has a direct correlation to education, as a teacher may want to use 3-D imaging, (it was used on a geometry teacher's blog from our blog post assignment earlier this week.) I also observed how to use 3-D shapes like cubes. This was discussed in the "working in 3-D space" section of the tutorial. I also attached a screenshot of that below. Another example would be when a band teacher might have an online store for band apparel. The course that I watched is well over an hour and a half long but it does not get very specific in terms of the software that is used for these effects. However, it should be noted that the software that is used is NotePad3++. With limited experience with this particular software, I found it to be a tad confusing. Although, I learned much more about the behind the scenes work that goes behind making these effects on webpages.
I have included the process of making these effects through the software NotePad+++, as well as an example of how it can be used on a website. In addition to those screenshots, I have included all of the notes that I took during the tutorial. The tab on the left of the page in the tutorial allows for you to take notes directly from the lecture, which I found particularly useful.
I should include by saying that I found this tutorial very useful. Should I not use the techniques I learned from this lecture in my college career, I certainly will use them in my professional career. It is rather fitting that we will be reading more about webpages in our class reading next week.
Tutorial link: https://www.lynda.com/CSS-tutorials/CSS-Transforms-Transitions/674608-2.html
The course consists of four segments, (exploring transitions, working with 2D transitions, working with 3D transformations, and working in 3D space.) For most of the course, I learned about the process behind making transitions and transformations as opposed to hands-on experience. A transition by definition is a change from an initial state to an end state or final state, (the object's final appearance.) Below is an example of how that process works.
Obviously, the best way to get someone's attention can be by a moving object, or a 3-D image. It's probably safe to assume that people stay on webpages because something entices them. A regular boring page with just words is not going to keep traffic coming to your website. So we know that animation and 3-D objects are crucial when it comes to the aesthetic of the website. What can you do with 3-D and animation? Animatable properties include, but are not limited to, (font size, background color, line height, etc.) You can also move graphics.
Using CSS 2-D, you can do multiple transformations. One can do this when he or she wants to move a graphic, but they also would like to implement a credit/debit card function on a website. An example would be when a customer puts in the wrong data for a credit card number. The hover effect which I learned about in this section, is used to move a graphic, (like the art in the screenshot at the top of the page below.) The invalid pseudo class is used through the program when the user has entered the wrong data. The focus class is used when the user is in the process of entering data. A glowing red shadow will be used to indicate that the customer entered the wrong security number for example. These are just some instances where transition and animation is used on the web.
This has a direct correlation to education, as a teacher may want to use 3-D imaging, (it was used on a geometry teacher's blog from our blog post assignment earlier this week.) I also observed how to use 3-D shapes like cubes. This was discussed in the "working in 3-D space" section of the tutorial. I also attached a screenshot of that below. Another example would be when a band teacher might have an online store for band apparel. The course that I watched is well over an hour and a half long but it does not get very specific in terms of the software that is used for these effects. However, it should be noted that the software that is used is NotePad3++. With limited experience with this particular software, I found it to be a tad confusing. Although, I learned much more about the behind the scenes work that goes behind making these effects on webpages.
I have included the process of making these effects through the software NotePad+++, as well as an example of how it can be used on a website. In addition to those screenshots, I have included all of the notes that I took during the tutorial. The tab on the left of the page in the tutorial allows for you to take notes directly from the lecture, which I found particularly useful.
I should include by saying that I found this tutorial very useful. Should I not use the techniques I learned from this lecture in my college career, I certainly will use them in my professional career. It is rather fitting that we will be reading more about webpages in our class reading next week.
Tutorial link: https://www.lynda.com/CSS-tutorials/CSS-Transforms-Transitions/674608-2.html
Comments
Post a Comment