WTF BONUS project: CSS Animation

PLEASE NOTE THAT THIS IS NOT MY WTF PROJECT, THIS IS AN ADDITIONAL PROJECT I COMPLETED AFTER I FINISHED MY WTF PROJECT!

Because I was so happy with the way my image overlays turned out for the WTF project, I decided to take on a mini project to further expand my learning of web authoring. I wanted to teach myself some CSS animation. I’ve seen it around before, and I thought it might be something I could take on;  it’d be pretty cool to achieve an animation without even using JavaScript.

I researched this project on stackoverflow, W3School, and CodePen user Benjamin Zanatta. I found a really cool effect in which colored stripes pull apart and the center to reveal the page. I decided to attempt this for my portfolio about page.

The HTML was a bit tricky because I have to set up a different div for each bar. I organized each bar by left and right and labeled the divs a1-a8 and b1-b8. This way, I could give each individual bar different CSS properties while still being able to use the left and right id names to give a CSS attribute to all the left bars at once (same for the right bars). After this, I used some basic 210 skills to put in a picture of me (img src) and my professional bio (a simple p tag).

Next, I was on to the CSS. For the effect, I needed to use animation, more specifically, keyframes.  Keyframes is a specific kind of CSS animation that allows me to specify when I want a certain change in CSS to occur (how far along in the animation).  So, as far as the code goes, I first had to code the basic animation movement. I needed two traits for my animation: forward and linear. The forward is what makes the bars move horizontally away, and the linear part means that the bars will pull away with a constant speed.

I used my letter/numbering system to give each bar a background color and then applied the forward and linear animation properties to each one. For example:

.a2 {

  background-color: #2ecc71;

  animation: openA2 1.5s linear 0.5s forwards;

Next, I needed to incorporate the keyframes. With each keyframe, I first indicated which animation I was talking about. Then, I coded in a different width (from the original 50%, since each bar covered half the page and there was a set of bars on the right and the left) for when the bars were 75% through with the transformation and finally, done with the transformation.

I thought it might be nice to have the bars have a little stagger effect, so I coded every other bar differently at the 75% mark. Half are at 15% at this point in the animation, and half are at 10%. This took a little while to get to work because I had a small syntax error, but I finally got the bar animation exactly how I wanted!

I also played around with another keyframe animation to have my info (picture and bio) fade in. This was another animation line of code, called the FadeIn, which required another keyframe. This time, instead of changing width, I changed opacity throughout the animation. Unfortunately, with the way my theme is set up, the header image is so large that you have to scroll down to see my info, which my that time, is basically already faded in. I made the fade effect a little longer, so hopefully the user is still able to see the fading by the time they scroll down. I didn’t want to make the animation so long that the user gets confused, so it was a fine line (I ended up with a 3 second transition). In the future, hopefully I’ll be able to make the header image a bit smaller so that this is not an issue.

From there, it was pretty much basic CSS; image border radius, font family, and text color. After that, it was complete! It is currently implemented on my about page here.

I had fewer obstacles to overcome with this project as compared to my actual WTF project, my image overlays, but it was still a fun challenge that introduced me to a whole new concept. I didn’t find keyframes terribly difficult, so I definitely will keep them in mind for the future. The fade in effect is especially useful, and adds a nice twist to any web page with information to display.

Overall, this was a great little bonus for my WTF project that I really wanted to document. I’m glad I didn’t stop exploring just because I reached my first goal with the image overlays. To me, advanced web authoring is about pushing every possible boundary, and continuing to expand my skills.

 

Trying Something New: Color-Changing Background.

Part of WRA 410 is be experimenting and pushing boundaries as far as our coding abilities. One things I decided that I wanted to try was getting the background of a web page to change color as if animated. To research how to do this, I just typed it into google and read on a few difference sources (stackoverflow.com and designshack.net, for example) to determine how to do this. The answer I kept seeing was to use a bit of JavaScript tucked inside the HTML page. By using the setTimeout feature, I can set the background of my page to a certain color for a set number of seconds after the page loads. I taught myself the syntax, and wrote the following code:

<SCRIPT LANGUAGE= “javascript”>
setTimeout(“document.bgColor=’white'”, 1000)
setTimeout(“document.bgColor=’f9c6ef ‘”, 1010)
setTimeout(“document.bgColor = ‘#c6f9f1′”, 2500)
setTimeout(“document.bgColor =  ‘#c6f9c8′”, 3500)
setTimeout(“document.bgColor = ‘#f7f9c6′”, 4500)
setTimeout(“document.bgColor = ‘#ecbff9′”, 5500)
setTimeout(“document.bgColor = ‘#e0c4e3′”, 6500)
</SCRIPT>

I decided to implement this into a module (see it here). This was a great way to dip my toe into some JavaScript without really overwhelming myself. It was actually really fun to teach myself a new skills, especially in a language outside of HTML and CSS. It was nice to see it work after I FTP-ed the page!

A Responsive Design

For my responsive web page, I decided to pretend that I wanted to edit a detailed view of a portfolio piece so that it responds to viewport size. I used the template given in class to create an HTML file that talks about one of my projects: the RDC newsletters I designed last year. I included text and a picture on this page, as well as a nav menu so that users could travel to other areas of my website.

I used a media query for a viewport smaller than 480px to adjust some of the CSS features. First, I made the nav bar horizontal, because the vertical menu wasted a lot of space on the mobile version. I made the font of the different pages a bit smaller so that the menu would fit on one line. Because the screen is smaller, the smaller font doesn’t look out of the ordinary. I also made the picture smaller in the mobile version so that it wasn’t taking up an out-of-proportion amount of space. I also moved the footer from the bottom right hand side of the page to the bottom center of the page because with the smaller screen, it just looked slightly off centered as opposed to deliberately placed on the right.

Because the text got messed up in a viewport somewhere between my screen size and the 480px media query, I created another media query for a viewport between 481 and 700 px to stack the text beneath the image. Thus, I actually have three different sets of CSS in respect to the viewport. It took forever to figure out, but I’m glad that I finally got it looking decent at a tablet size!

I also changed the header color, mostly just as a fun touch to display  the moment of change from default to mobile. I also changed the a hover color to match the header when the screen was made to be smaller.

I know the page isn’t perfect, and the text and picture interaction can look a bit awkward while on some viewports, but I will continue to tinker with the positioning of the elements so that the page will look good at any size!

Check out how I planned the views below! The yellow outlines are the boxes that I knew had to be incorporated. The first picture is full screen, the second is mobile:

This module can be found here and it is linked in my dev space.

If this, than this!

For my applet, I created an IFTTT in which when a post is published on my WordPress site with the tag or category “medium,” the post will then also be published on my Medium account. Medium is an app that allows users to post all kinds of written content, especially in a blog-like format. By connecting these accounts, I don’t have to re-write posts that I put on my portfolio for my Medium.
So why link the two? I think the nice thing about Medium is that it follows a format similar to Instagram or Twitter where users can scroll through a feed and read posts from different people. This means that people can go to this one website to see content from all the people they follow; because this is a convenient one-stop-shop for blogs, people are more likely to continually check Medium than continually checking the individual WordPress site of each writer they are interested in. By putting my posts on Medium, I am opening my posts up to being read by a wider audience: all the people who follow me on Medium as opposed to just those people who actually travel to my WordPress site (I just made a Medium account, so I don’t have that many followers yet!). Integrating my posts to a more social app like Medium will increase the number of people who see the post, and thus, the number of people who read it.
That being said, I may not want every single post that I make to be put onto my Medium account. For this reason, I made my applet only upload medium posts that are tagged with the word “medium.” This way, I can choose if I want the posts to be transferred over for my followers to see.
I think this applet would be useful to anyone who wants to have their blog posts transferred over to a place where more people will be likely to see them and interact with them. It allows for people to easily transfer their posts and expand their readership!

Here’s the applet:
https://ifttt.com/applets/51090791d-if-new-wordpress-post-with-tag-or-category-mediumthen-create-a-post-on-medium

This post itself is tagged medium, so it should show up on my Medium account!

 

Advanced Web Authoring: Definition and Personal Goals

 

To me, the first component of advanced web authoring is the expansion of the three laws of web development: accessibility, sustainability, and usability. These ideas were introduced to me in the intro class, and I think they are going to be even more important here in advanced web authoring as I begin to consider the purpose and structure of websites much bigger than my personal portfolio. While it was good to focus on a personal project in WRA 210, I think learning about worldwide websites that have millions of users from all over the world, on all kinds of devices, will be very valuable. The creators of these sites have managed to write a program that people all over the world have access to, that is continuously being updated, and that provides a pleasurable experience for the user; these are the three laws that were touched on in 210, and I look forward to applying them to more global situations. Additionally, as I continue to grow as a web author, I hope to further develop my personal project strategy. This means I want to have an arsenal of tools and resources that I feel comfortable using and allow me to accomplish various tasks along the development process. Maintaining and improving my project methodology will really help to prepare me for the professional world.

When I think of advanced web authoring skills, I think first of JavaScript. While HTML and CSS are pillars of web development, JavaScript was something that went largely untouched in WRA 210, and I look forward to learning this whole other type of syntax. I know there are other topics we are going to touch on as well (PHP, MySQL) that will also be great additions to my skillset. Another type of knowledge that I think a web developer should definitely possess is an understanding of rhetoric. Narrowing in on what experience I want the user to have while visiting a site and how my content and design choices might affect that experience is a skill that was talked about in 210, but I’d really like to go even deeper into this area of web authoring. Finally, I think an advanced web author should have two very important skills: problem-solving and persistence. I know that this type of advanced coding can be frustrating, and I think my ability to try a bunch of things until I find the solution will definitely improve after this class.

As far as technologies and methodologies, I know that building a list of reliable online resources to help me when I run into an issue is vital in advanced web authoring. Also, picking programs that work for me (code editor, FTP) will be useful as I continue to advance my skills. One method that I think is really valuable is workshopping. In 210, I really realized the value in having a network of people that are able to help me and offer advice, and I think having peer support will be even more important as I get more into the nitty gritty of web authoring. One example of this is SCRUM workshopping, which I found really helpful in 210 and might be helpful in this class as well. Even if the workshopping in this class doesn’t follow SCRUM exactly, just the ability to talk and ask questions to my classmates (and colleagues, in the future) will be very beneficial.

One skill that I think professional writers bring to the table as far as web authoring is something that I already touched on: rhetoric. PW students spend a lot of time studying how certain elements of a text contribute to the experience that the user has and the trust that they put in that text. This is a great skill to have in a web development team, as websites are designed to be looked at interacted with. Professional writers will be able to offer insight into how a user might be affected by certain elements that someone who has only ever studied computer engineering might not have. Furthermore, web authoring contains the word “authoring” because it’s just that. It’s writing in a language that can be read by computers, and generally, students in professional writing are pretty great writers!

I am excited to continue my journey into web authoring, and look forward to learning more about this frustrating but ultimately rewarding skill.