Introduction to Web Authoring

[architectswebdiary]

Responsive Web Design

Devices are getting smaller every day. Responsive web design is important because it automatically adjusts for different screen sizes and viewports, improving user experience.

There are three main points of Responsive Web Design:

·        Flexible, grid-based layout: The items become flexible when adding grids in HTML file. The columns are adjusted automatically to fit the size of the screen or browser window.

·        Flexible images and media: The purpose of using flexible images is to use the same content, only bigger or smaller depending on the screen size. The width of a container div should be expressed as a percentage.

#container {

Width:90%;

}

 ·        Media queries: If we only change the container's width, our code will start to break down once we view it on the smaller screens. Media queries allow us to write CSS that targets specific media sizes doing an if statement in CSS.

 @media screen and (min-width: 1024px) {

#content{

width:50%;

     }

}

Sidebars are usually tricky when it comes to mobile or smaller screens. Eliminating sidebars is an excellent way to prevent confusion and breakdowns. Long-scrolling pages are also a good option for mobile-friendly design.

Since we're designing for smaller screens, there should be limitations in design elements. There should be only essential elements such as navigation or search box.

       Like Dieter Rams said;

"Good design is as little design as possible."

The best advantage of responsive design is; if everything makes sense on a mobile screen, such as graphics, written content, and navigation, then it'll make sense on larger devices.

Image reference:

https://mediaqueri.es/

[architectswebdiary]

How to Plan & Build a Website

For our final assignment, we were asked to create a website including seven relevant pages about the hero we would choose. After deciding on the “hero,” I searched step-by-step website planning methods, wireframes, etc.

The best-designed websites always have great thinking behind every visual, text, and interaction indicator. Therefore, having a good website is about having an overarching strategy.

Here are the simple steps of planning a website;

1-     Define Your Goals: The first question that needs to be asked is the purpose of your website? If the goals are high, it’s good to break them into smaller tasks.

2-     Scope Definition: It is essential to decide the goals before planning. Once you start building a website, your tasks gradually increase/ evolve, and if you can’t stick with the plan, you may exceed the budget, and your website becomes unrealistic. Gantt chart, Work Breakdown Structure(WBS) are the tools to utilize while defining your scope.

3-     Creating Sitemap and Wireframe: Sitemap is the foundation of a website, and it gives a clear guide to information architecture and relations between elements. After creating a sitemap, the next step is to create a wireframe. A wireframe is not the finished product but acts like a guide, so you know how it’ll look when it’s finished.

There are various tools to create wireframes, such as Figma and Sketch, but pen and paper are also options.

4-     Content creation: Content is one of the most critical elements of a website since it provides user engagement. This is affected by the content itself and design elements such as typography, fonts, visual elements. The other important thing is SEO (search engine optimization) which helps a website rank well in search engines. Choosing keywords correctly is the key to being successful. There are also many tools to create SEO, such as Google Keyword Planner.

 5-     Visual elements: This part of the process will be shaped by design elements such as logos, color choices, images... Visual content attracts the user and increases clicks and engagement while building trust.

 6-     Testing and Launch: When everything is ready, it’s time for testing. It’s time to check if every link, image, and code is working properly. If everything is working well and you’re happy with the result- the final part is to publicize the website.

Image reference:

Eva, M. (2020) Planning a Website - 10 Steps Guide To a Successful Website - Melbourne. Masters of Digital. Available at: https://mastersofdigital.com.au/blog/planning-a-website/ (Accessed: 10 January 2022).

[architectswebdiary]

WordPress Installation

Practicing to do things yourself is the best way to understand the logic! We started to learn about dynamic websites, server-side web development, Content management systems in the class. We had the chance to install our first WordPress and dive into it in the following lab.

We first downloaded WordPress from wordpress.org/download. We were also needed to download an SFTP(secure file transfer protocol) Client on our laptops. I downloaded WinSCP as a Windows user.

To connect the server, we had to give some information to our SFTP Client, such as server address, port, and connection type. We used knuth.griffith.ie, as a server address—our user name and passwords provided by our lecturer, Ruairi.

When we log in, the first thing we see is our folders on the left and server files on the right side of the page. We need to put our files inside of public_html folder to be accessible on the web. We drag and drop our first index.html files inside the public_html folder in order to test it.

To look at the website we need to browse as ServerAddress/~sUsername/CMS:

https://knuth.griffith.ie/~s*******/wordpress/

To be able to edit the web page; ServerAddress/~sUsername/CMS/wp-admin/:

https://knuth.griffith.ie/~s*******/wordpress/wp-admin/

After we made sure that everything was clear up to this point, we dived into it a little bit and saw how we could change things without writing a single code! It was inspiring because it gave me all the features I needed to create my portfolio! We can add pages, posts, change the themes, add plug-ins; in short, we can customize it up to our taste.

[architectswebdiary]

Dynamic Websites-Server Side Web Development

So far we have been looking at static websites, which we can only view our files on our own browser. Dynamic Websites, on the other hand, give us an opportunity to share these files on the web.

In dynamic websites, the server application constructs the page; websites deliver customized information in response to HTTP requests. It has been done using a scripting language such as PHP, ASP, Python along with a database.

PHP (hypertext pre-processor) is the most popular server-side script language, being used by 79,1% of websites. PHP code can be embedded in an HTML page. It starts with <?php and ends with ?>

Database Management System is the software that allows users to interact with a database. MySQL is the most popular open-source database management system. PHP and MySQL work together by connecting and querying data from the script you are writing. In the script, you can make a connection to MySQL by using some of the built-in libraries. You can then query the database on that connection and retrieve the result or use stored procedures in MySQL.

A content management system is software that helps users to create, manage, and modify content on a website without the need for specialized technical knowledge. CMS platforms allow users to make a website without writing code or learning programming. Multiple users can access and work at the same time, therefore CMS can help improve workflows and productivity across the team.

There are many CMS Platforms examples: WordPress, Joomla, Drupal, CMS Hub, Moodle. WordPress is the most popular Content Management System being used by 39% of the web. built using PHP and MySQL.

Although these topics feel too intimidating to me, after connecting to a server from our own laptop through an SFTP client at the lab, I feel like I got a basic understanding of how it works. Yet, practical sessions always take more time than I imagine to feel confident.

[architectswebdiary]

CSS Grid Layout

This week, we have introduced the CSS Grid layout that I always come across on the websites I browse while doing last week's assignment. Although some refer to it as the most complex CSS model, I think it is a layout model that provides much more possibilities than Flexbox and provides great convenience when revising.

A CSS Grid is made up of lines. The space between the lines is known as tracks. The space between tracks is known as gaps.

Like Flexbox, your HTML elements should have a specific structure to use the CSS Grid layout. You need to wrap the elements that you want to control within a parent container div.

The first things we need to learn about the grid layout are grid-template-columns and grid-template-rows. Those two rules control how your grid is shaped.

The value of these rules can be a length, a percentage, or a fraction of the free space in the grid. You can also set any value to auto, which fills up the remaining space.

If you have a repeating pattern for grid-template, you can use repeat and tell it how many times to repeat the same pattern.

To position the items, we use grid lines as a reference.

image reference: https://dev.to/

We will use the grid-column and grid-row rules with line numbers to position the elements.

For example, if we set grid-column: 1/3 for the first child div, it will use the first two cells in the grid. 

[architectswebdiary]

First Profile Website using HTML and CSS

As of the second week of November, we have reached the halfway point of the semester! The last two weeks were filled with assignment submissions, and we designed our first personal profile website for the web authoring assignment.

We created the website using HTML and CSS, following the instructions in the assignment brief and using almost all the elements we have learned so far. On the first web page we created, we added information such as our photograph, personal background. We have added our favorite movies, websites, and facts on the second web page.

During this process, I had a lot of fun creating HTML. Still, it was pretty messy when it came to creating CSS. I struggled a lot while using flexbox. Going back to my HTML page and making all the necessary divs from scratch was primarily the source of my problem! By removing what I’ve done over and over, surfing countless web pages, watching tutorials and reading forums, I finally managed to create the page I wanted!

I never think of myself as a front-end developer, but I have to admit even though I’m not too fond of the struggling part, when you accomplish something on your own and seeing the results straight away gave me joy. I added some extra links and played with the design choices such as color, shapes. It felt like it would never end; you constantly can improve what you design.

Eventually, my page looks like this below, and I wonder; If we can do these things using CSS, I can’t even imagine what we can do using javascript.

[architectswebdiary]

CSS Flexbox Model

It’s officially November now! Although it is a month that I have always had a hard time liking because it evokes the cold, now I can't like it because it evokes the approaching deadlines.

Even if I see it negatively from my point of view, there are very exciting developments taking place in digital media and technology. Like Facebook’s CEO Zuckerberg introducing 'Meta' to the world and the concept of metaverse being placed on the agenda of our lives! For those who are curious about the subject, I leave the relevant link below and continue with what we learned in CSS this week.

The Metaverse and How We'll Build It Together -- Connect 2021;

https://youtu.be/Uvufun6xer8

The more you mess around with CSS layouts the more it gets complicated. This week, we made the CSS layout a little more meaningful with Flexbox layout model and enriched it in terms of design.

So, what is CSS Flexbox?

CSS flexbox is a one-dimensional layout that makes it easy to create flexible and effective layouts. Using Flexbox ensures that items are placed correctly and are predictable. The flex items are positioned in a flex container along a flex line. By default, there is only one flex row per flex container.

There is a basic terminology in flexbox model which are;

·        main-axis:  The main-axis is the primary axis of the flex container along which flex items are aligned.

·        main-start | main-end:  The flex items are placed or set inside the container beginning with main-start and going up to main-end.

·        cross-axis: Cross-axis is referred to as the axis perpendicular to the main axis, and its direction depends on the main axis direction.

 We do shape the flexbox model by using flexbox properties;

Image source: https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/

·        display is used to set the type of box used for an HTML element.

·        flex-direction is used to fix the direction of the flex items inside the flex container.

·        align-items is used to vertically align the flex items, across the cross-axis.

·        flex-wrap specifies whether the flex items are forced in a single line or can wrap onto multiple lines.

·        align-content is used to align the flex container within it when there is extra space in the cross axis.

·        align-self is used on flex items. It overrides the container's align-items property.

·        justify-content  is used to define the alignment along the main axis.  

·        flex-grow specifies the extent to which the item will grow relative to the rest of the flexible items inside the same container.

·        flex-basis sets the initial main size of a flex item.

·        flex-shrink defines how much a flexbox item should shrink if there's not enough space available. 

[architectswebdiary]

# Being IN or OUT of Flow

Elements in CSS are described as being ‘in flow’ or ‘out of flow.’ Elements in flow are given space and that space is respected by the other elements in flow. If you take an element out of flow, by floating or positioning it, then the space for that element will no longer be respected by other in flow items.

 This week, we expanded our CSS capabilities a little more,  learning and applying topics such as colors, the box model, layout, links/lists. Colors has definitely brought a new dimension to CSS by completely destroying that boring character of HTML. With The box model, we understood how we can separate and position the contents, and add a different character to each content. Deciding on the layout of the page is actually making the design decisions of the page. In fact, things always gets a little more difficult when the design is included in the work, but the more the design is involved, the simpler the result becomes. The more simplified the result, the more beautiful and consumable it is.

 I’ll put this explanation of CSS Box Model here,

The browser renders all elements as rectangles. Dubbed the CSS box model, the size of these rectangles are determined by margin, padding, border, and the content itself. Margin is set by the margin property and the same applies to the padding and border properties. Size of the content is determined by the content itself.

(img and explanation source: https://www.humaneer.org/blog/css-box-model-explained/)

[architectswebdiary]

Introduction to CSS

The first people who developed HTML only intended to be able to send articles to each other and have these articles to be able to link together. But through the years, style ended up becoming a huge part of web pages and HTML wasn’t designed to be handling this. Html defines the structure and content of a web page and after that CSS comes in.

CSS: Cascading Style Sheets is actually the language for designing web pages. We finally give it a go this week in the class and lab afterwards. So, what can we do with CSS is that we can describe colors, fonts, spacing, alignment, size, position and even more.

We’ll be using preferred external method which means separate CSS page linked to the HTML pages.

<link rel=”stylesheet” href=”style.css”>  

Since the <body> contains all the content and CSS should be separated from content, Style Link placed in the <head> element as the metadata of a content.

Writing CSS code involves defining CSS rules, so here are the rules;

Selector defines exactly which HTML elements this rule is going to apply to. 

 Properties and values are declarations what actually define the style.

There are many properties as well as many rule sets in style sheets. Here are some of the useful Properties:

font-size: Default size of the font is 16 px equals 1 rem

font-family: Arial, Times, Calibri, Helvetica …

font-style: Italic or normal.

font-weight: How thick the font is; normal/ bold

        There are four ways to select properties:

element ;this selects all the elements with same name.

class ; selectors are indicated by a dot.

Id ; selectors identified by a # symbol.

Position in document ;  this example below says select all a elements, that are children of p elements.

                            p  a{

                                   color:red;

                                  }

 There are many important things to say, but one of the important one is that the rules are applied in the order we define them. The most important thing is to understand specificity. A more specific selector will override others, even if its defined earlier.

Css gives you a lot of control over how text is presented and it provides you endless possibilities of how to design your website , and this is thrilling! Can’t wait to go further learning CSS!

I’ll put the two useful links that is recommended by our lecturer for CSS learning below.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals

https://www.cssfontstack.com/

[architectswebdiary]

Last week of dear ‘HTML’

In class this week we learned basically how to structure the content of a page. We then try it on the lab class , it was a little challenging for me. But once you start to grasp it, it becomes very enjoyable. So, take a look at this HTML document I created below, and I am agree that it’s not appealing but it’s actually not that overwhelming.

In html 5 we have elements to indicate certain parts of a web page;

·        Header <header></header> introductiory or navigational aids.

·        Navigation <nav></nav>  main navigator for a page, contains lists and links.

·        Article <article></article> is a container for any section such as article, blog entry, comment.

We can have multiple article elements in one page, even article inside an article! Article can also contain its own header and footer elements.

·        Side bar <aside></aside> is a side bar of a web page and contains advertisements, links, recent posts etc.

·        Footer <footer></footer> usually at the bottom of a page and contains contact details, information, etc.

<div>, <h1>, <ul>, <p> are known as block element and they always have blank space between other elements.

Inline elements such as <img>, <a>,<em>, <strong> on the other hand have no space between them. In order to give the space between elements we put them inside block elements.

Class attribute allows you to identify one or more elements in a document, very similar to ID, but ID can appear only once in a page where class can appear multiple times. Even one element can contain multiple classes.

·        Main <main></main> element contains the main content of a webpage which shouldn’t include the elements repeated on the other pages such as <header> <nav> <aside><footer>

·        Meta <meta> element includes information about the document. It’s a void element and must appear inside <head>

 Next week we’re moving on to the CSS, although we have a long way to go, I still can’t believe how fast we’re progressing.

[architectswebdiary]

Lorem Ipsum Dolor !

I always come across these words somewhere: “lorem ipsum dolor sit amet”.

When designing any web page, it is a text that is normally used so that the places where the content will come from are not blank. Although this text was created with random letters inspired by Cicero's "The ends of Good and Evil", it has little meaning other than the purpose it serves.

I wanted to mention this text, which was our main assistant in the HTML lab last week and this week, and which I will obviously use frequently from now on.

So, what is this HTML?

HTML, is a markup language that defines the structure of your content. It does this using 4 specific elements;

1-root <html></html> ,

2- head <head></head>  ,

3-title  <title></title> and

4- body  <body></body> .

Each HTML has only 1 body element which basically contains all the content of our page.

I think the most important part so far is not to forget the closing tags. However, there are some exceptions like <br> as break line which is a void element, also an image <img> doesn't need a closing tag.

Lists are one of the basic elements of HTML. Unordered lists <ul> and ordered lists <ol> are the most used lists in HTML. Before putting each item in the list, <li> 'as a list item' is used. Links created with <a> </a> a stands for anchor and href is a reference to the absolute URL to the website we want to refer. So it looks like:

<a href=“about.html”> About Us </a>

The second most important that we need to be careful is that we need to put all relative html documents into the same folder, or refer the folder name with using “ / ” inside of a href tag. <a href= “foldername/about.html>

To add the images; <img> tag and “src” attribute;

<img src= “cat.jpg”> cat

Although learning a new language is challenging(cause it's a new language to me after all!) I've started to enjoy it. Especially producing something that we can see the results of immediately, makes me more willing and motivated to learn new things. We'll finish the outlining of HTML next lesson and move on to CSS. A long road awaits us, but the happiness of learning and comprehending new information every day is indescribable!

[architectswebdiary]

Hello, World!

I'm Ezgi from Turkey! Former architect, new digital media practitioner.

It all started with my interest in UX/UI design as a result of the online courses I took during the pandemic.This September, I started to do my master's in Interactive Digital Media in order to deepen my knowledge in this field and get into it in a much more comprehensive way. 

In this blog, I'm planning to share my learning progress and improvements in the digital world as a part of my master program. Every week, I will be sharing my own ideas about current developments and discussions in the web world, as well as what I learned in the course, and I would like to thank those who support me, follow and participate in this journey.