Reflections on Web Authoring @webauthoringreflections - Tumblr Blog

Posts

My Heroine Site Assignment is on Amanda Gorman, a 22 year old Poet and Activist. She’s incredibly talented and has done so much in her young life already. A real joy learning more about her and making her the subject of my website.

Image by Artist Kimothy Joy

Front End Developer (2020 Edition)

I read another interesting article by Alex Ivanovs about becoming a front end developer- that was recently posted on the class moodle page. The article discusses that it can be tiresome for a beginner developer but after a year or 2 of solid web development practice, it really gets a lot better. The projected salary range for a career in web development continues to be promising, and the article supplies a list of job boards specializing in jobs in this area. A few other interesting things I learned:

- Learning code inevitably will bring you to codeacacemy for answers. Next you’ll need to learn about layout and “Learn CSS layout” is a great tool to learn about containers and row work but really the best way to learn this is through lots of practice!

- In regards to framework, the writer recommends Bootstrap as the most popular platform, because its easy to get started on and is automatically mobile friendly.

- Running your site through Front End Checklist will audit your website for best practices in front end development and Vue.js helps you build amazing interfaces with HTML & Java.

I’ve made notes of these platforms and tools and many others that the article recommends!

5 biggest development trends for 2021

I thought this article in the week was relevant to our course. It discusses the 5 biggest web development trends for 2021:

- Expansion of voice search- voice enabled technology across web/mobile apps is becoming more popular

- Growth of Cybersecurity Concerns- Building algorithms to protect the increasing phishing attacks

- Development of CMS - leverage CMS for businesses enables instant updates and drag/ drop building

- Evolution of API - building your interface first then rely on it for the remainder of the site.

- Popularisation of Multi-Experience Programming - ensuring users can use the site on any device they want - even smartwatches and in the car

Whether continuing on along the web development path or not, this seems to be important trends to stay on top of.

Hierarchy was also brought up in this article discussing 27 web design tips. The author offers some interesting ideas about what is considered low visual prominence versus high visual prominence.

Some other notable tips discussed is keeping things clean and modern by showing one thing at a time, avoiding clutter and having enough whitespace. Also he suggests using images with people to personalise and draw attention but try to avoid stock imagery if possible which looks more staged and less genuine.

Use arrows and facial looks as visual cues for where viewers should also look. So if a picture of a woman is showing her looking to the right, that is where the content should go as the viewer will look where the woman is.

Color should help highlight the call to action and draw the viewer to that immediately if it’s used correctly. Try and write meaningful subheadings and don't use any social media icons in your header as it can be a distraction and leave the user off the page more quickly.

This article has many other great ideas to consider when creating your web page.

I thought this was a very interesting read and video discussing the importance of hierarchy in our web design. The idea is that web designers need to keep hierarchy in mind when designing and leading the user through the order of most important information on a website. The article shows a number of articles which illustrate to be good examples of hierarchy of information - where its clear where the user is drawn to key information and action using elements like visuals, size/scale, color, how things are aligned and contrast. Some of the best sites in terms of information hierarchy are more minimalistic in design. The article shows examples which do a poor job of hierarchy illustrating the difficulty for the user to know where to go, or understand what is most important on the website.

Web Design Trends for 2021

I read this really interesting piece highlighting some web design trends for 2021. The article by the 99 Designs team can be found here.

Two Trends in particular grabbed my eye as I’ve been seeing it more and more. First the idea of Parallax Animation which basically is the separation of page elements into the foreground and the background.

The second is around 3 dimensional colour which I’ve already started to see especially on app button icons. The article suggests that 3D and Saturated colour is taking web design towards a higher realm of realism.

Really interesting website design, with what looks to be 3D / 3D-like imagery. I was perusing some of the best website designs and this one caught my eye for these popular LA nightlife venues.

Check it out here.

I’ve been reading about responsive web design and mobile lead web design in a time where there are barely any constraints to how we view a web page based on browsers or devices....software or hardware...and web design today has to be ready to respond to whatever environment the user is on. The CSS reset was an interesting article that requires some experimentation with. The use of the media queries was especially interesting in laying out the bylaws for what must be present to enact an actual css rule. All requires a proper amount of hands on practicing. With very little constraints for the web, flexible designs are paramount. So even when a client does ask for an iphone website- they really are requesting so much more.

I read an interesting article having to do with color….”What’s in a Color? Color Psychology & Web design” by Adrienne Erin. I reflected on the colours I’d like conveyed in my ideal website and it fell into mostly blues for serenity, calmness and peace. I’ve always struggled a bit with determining colour in the digital format whether it was for a video graphic or something for a social media ad. Strangely enough in my real live world, I can create a lot of harmony with colour in how I decorate my home, my children’s rooms, etc. However, it’s not as fluid a process for me when doing it in a digital project especially around colour pairings and appropriate accent colours and how much to use of it- so articles like this are very helpful.

It was great to finish my html/css web assignment this week as it required a lot of rereading of class notes, slides and reviewing of lectures. I also restarted the entire HTML and CSS basics from the very beginning on Free Code Camp. While it was a lengthy process and a bit gruelling when things weren’t working properly, I learned a lot by the struggle, the trial-and-error process and revisiting the lessons.

I am really looking forward to learning wordpress. I’ve got an old blog that needs some new life breathed into it and I have another project, blog based, that I am hoping to start as soon as I feel confident enough with what I learn in this module.

#webauthoring

Learning to focus on the details

As I sit down to work on my web authorising assignment, there appears to be endless references on the web plus so many have been provided for us on Moodle. The articles posted along with the assignment brief have been extremely helpful in regard to the proper way to lay out a page with html, the importance of semantic elements, common mistakes beginners make in HTML and CSS and relevant cheat sheets. Also, it’s interesting to start learning more about how semantic html will help with the SEO of your website.

Reading the article about becoming a front-end web developer was intriguing. I was not familiar that there appears to be a high demand in this field and that even as a junior developer, the salary range is solid. The article provided several factors that make the profession appealable- particularly around the flexibility to work remotely or freelance on various client projects. It did indicate the steep learning curve and keeping up with the technology in regard to coding requirements and shortcuts. It’s clear to see that training would have to continue beyond this WA class, whether it be through online tutorials that are free or cost a small fee.

I’m still finding this very complex as I’m not that technical of an individual. I’m more of a big picture person and do not perhaps pay enough attention to the details. Thinking like a web developer seems to intensely focused on details and perhaps why it feels a bit cumbersome. However, the article makes several suggestions to not get overwhelmed by the technology or the trial and error that goes along with learning these skills, so perhaps as it becomes more familiar to me, the idea of being a front-end developer will be more of a possibility.

#webauthoring

Learning CSS Basics

Last week’s lab was a bit challenging even though the directions were to create a “simple” web site, I spent a good amount of time after class to complete it. The lecture last week centred on CSS and I believe this week we will be adding CSS to the web pages we created last week.

I’ve done a lot of reading this week on CSS and because none of this really comes naturally to me, CSS feels to be even more complex than HTML. I think I’ll generally stick to the basics of CSS although the options seem unlimited as to how many bells and whistles you can add to style your website.

I’m attempting to learn how to write CSS using the recommended way -by creating an external style sheet. Like HTML tags, CSS comes with a long list of properties to use, as well as lists to indicate values and units of measure. I’m sure people who actually code and style websites for a living can quickly recall the necessary elements or properties to include In their HTML and CSS documents. However as a beginner to web development, this is not the case for me so I rely heavily on resources (and there many of them) on the web. Taking a website into inspector and practicing altering the various CSS properties has also helped to instantly compare the CSS changes to how it looks on a web page.

Another interesting part of CSS we began to discuss in the last lecture and explored in subsequent readings this week is around fonts and typography. “Canva’s Ultimate Guide to Font Pairing” is a good read especially for those who do not come from a graphic design background. There are many techniques to consider when creating font pairings for your design, so Canva offers recommendations for most every type of project. Because the web is 90% text, fonts and font styles are of utmost importance. Font stacking was a new concept for me. The idea that the viewer of the website must have the font on their system to view it on the web and so offering alternative fonts In the order for the site to default to, is a very critical part of your CSS style sheet.

#learning css

More on html structure

I’m finding HTML coding more complicated as we learn more and more elements / tags. I used to have a blog on travel and I did it in wordpress using a premium template that I purchased. One of the areas I struggled with was navigation although I am pretty certain this was referred to as menus and sub-menus at the time. So I am finding all the information we are learning on <Nav> to be important. I also have found it useful to understand the multiple areas on a website that <Nav> can be used – such as in the Main Navigation, sidebar and footer.

Blog templates seem to automatically set up your blog posts as <articles>, which could stand alone or be syndicated. I’ve had a much more limited understanding of this as I had only used templates for past blogs . Most importantly, I’ve learned the several items that could fall within the <article> tag – that could be used / searched independently of the website it belongs to.

The use of the <div> tag was an interesting discussion to learn in class and read about. I think the general understanding I got from it was that html has gotten away from using the <div> tag as frequently as it used to be and now its recommended to use the diverse list of semantic HTML tags available instead. Although it’s still acceptable to use <div> as a top level way to wrap the site or if there is no other semantic HTML tag that is appropriate.

Also I found this chart from html5doctor.com to be a great guide….

Musings on recent WA readings

I thought the analogy of the way the web works being like a street where one end is your house and the other a store you need something from was helpful to understand the exchange of data and information that occurs between clients and servers. I find the inner workings of the internet to be quite technically challenging for me personally to comprehend, so this made these introductory web concepts much clearer.

Growing up in America, the joke was always former Vice President Al Gore’s claim that he invented the internet so learning about Sir Tim Berners-Lee was very interesting. His writing of HTML, URI and HTTP remain foundational technologies today. His belief that the web being open and free for all to use would be key to its success that ultimately was proven. By the time that the web was 25 years old, 2 in 5 people worldwide were using it. Today it’s probably even greater.

The original ideas developed by the organization Berners-Lee founded, W3C, were indeed innovative, hopeful, revolutionary for that time. He co-founded another organization in 2009 called the World Wide Web Foundation, fighting for “ a web that is safe, empowering and for everyone”. So much work needs to be done in this area in terms of keeping our beautifully diverse humanity safe- especially our children, but also informed by facts not fiction.

I witnessed this recently in yet another US election where Americans are divided more than ever and the level of false information and inflammatory, dangerous narrative is a common way of life on the world wide web. I am not sure what the solution is but it lends the question – has Berners-Lee’s beliefs of a free and open, unleashed web gotten out of control?

A little free code camp on this Halloween eve. Kind of like learning a new language.

#htmlcoding #freecodecamp

html basics

Here we go! html...DOM...Tags...basic text editor...essential elements...metadata...attributes...w3c...WHATWG...validator...html comments...<!DOCTYPE html>...<head>...<title>...<body>... I think even my thoughts are coming across in code.

#learninghtml

Trending Blogs

Recently Viewed Blogs

Reflections on Web Authoring