Building a Web Authoring Experience

More and more people have been using mobile devices such as smartphones and tablets instead of computers. Responsive Web Design aims to program a website so that the elements of a webpage automatically adapt to the screen size of the device on which it is being viewed. It can be on a desktop, mobile phone or tablet; the webpage will remain with the same features.

So, a webpage with a responsive design needs to have three main elements: Flexible, grid-based layout, flexible images and media and, Media queries.

Grids: When we add grids to our HTML, the items become flexible, so the columns automatically rearrange themselves to fit the size of the screen or browser window.

Flexible images: For the images in a webpage, the aim is to show the same content, only bigger or smaller depending on the device. One of the solutions is to change the max-width to 100%, so the image will shrink if the page becomes smaller. It will allow the image scale to up to 100 per cent of their containing element.

Media queries: Media query is a technique applied to CSS. We can attribute a breakpoint in order to ensure that certain parts of the web design will behave differently on each side of the breakpoint.

Following the steps of planning a website, one of the most important parts is researching the project. It needs to consider the type of business the site will be for. A Client survey can help with it, for instance. Searching websites with similar features as a comparative business model can be useful.

Above all, knowing the target and audience is also essential to define the goals. The content is another step to be considered. It needs to know who will be responsible for providing and maintaining the web page's content. 

  Many tools are used to design the Information Architecture in this planning process. It means where each thing will be placed on the webpage. A sitemap can be used to organize the ideas of each page that will compose the whole site. 

It is also possible to have a pre website design through a Wireframe. It usually considers key pages such as welcome page, blog page, contact etc. A basic layout is created, positioning each element in its place on the webpage. So, this is possible to have an idea of how the page will be at the end.

For our last assignment this semester, we will have to build a website using HTML, CSS and JS. It is essential to plan it before we start to code. The first step while planning a website with the client is to create a "Brief".

The Brief has the aim to collect all the vital information for the construction of the project. It is crucial to understand the client's idea, the website purpose and needs.

The Brief is important to align a client's expectations to deliver the best solution at the end of the project. At this moment, it is also important to consider the project's functionality; sometimes, the client can ask a demand that is impossible to be done, so this is the moment to be sincere and make clear why it won't be possible.

A theme is a collection of elements that control how website contents are displayed. It means a structural basis for the design model that the site will follow, such as markings where texts, photos, videos, links, comments and everything else will be placed. It is possible to find WordPress themes suitable for many niche sites. Some are free, and others are Premium that needs to be paid for. Choosing a theme seems complicated, especially with thousands of options available. We have to consider some basic points such as Functionality, User Reviews, Developer Support and Frequent Updates. It is recommended to consider the main features that a user need on its site. Then, the next step is reducing the list to the minimum of the other criteria.

In some cases, adding a different feature not available in the chosen theme is necessary. A Plugin is something that adds new functionality to  a WordPress site or extends existing functionality on a site. Plugins can do everything from small to big changes to a website. 

Some examples of popular Themes and Plugins:

Themes : Twenty Twenty one, Astra, Hello Elementor, Twenty Twenty. 

Plugins: Elementor Website Builder, Contact Form 7, Yoast SEO.

For a machine to do what you want: whether it's posting a photo, buying a plane ticket, finding a route - or doing anything - it needs a command to tell it how to act. In order to process information, it needs to be stored somewhere, in this case, in a database. When we ask a machine for information, it takes our instruction to a data storage location, selects what we need and returns with the answer. A database is like a vast library, essential in the whole programming process.

So, the front end part is called client-side, involves languages processed by the user's browser. On the other hand, the server-side refers to what is processed on the server through different languages. Both have to ensure that the best features are created from the combination of these two sides.

Static sites don't undergo major content changes over time because they don't have management tools built into the site. Furthermore, complex interactions are not allowed, such as performing searches or registering users. In this case,  usually the website developer can perform content updates, as they are created in HTML and published on the server.

Unlike a static website, a dynamic website contains a built-in content management system and is ideal for those who want autonomy to manage and update their own content and page images through a CMS platform (Content management system) such as WordPress.

CSS Grid is a two-dimensional layout system, with lines and columns, more straightforward and much easier to use. It allows us to control the size and position of the interface components and their contents. Like flexbox, to use this element, we have to use the display property with the value Grid so that all children from the Grid container will become grid items. We have also to use the property to set up the number of columns and rows on the Grid box, using the property grid-template-columns or grid-template-rows. So, after that, we can move columns and rows to give the desired position of the elements inside the Grid box.

Some examples of Grid Properties 

- grid-column-start - 

- grid-column-end

- grid-row-start

- grid-row-end

- grid-column-gap

     We have learned through CSS an attribute that allows sitting elements side by side called Display. We used it to display items inline such as links for example, in the last update of the Daily Sponge web page.     However, we also have another way to display objects inline called flexbox. It can display items in columns or rows. Flexbox is a one-dimensional layout model that is responsible to align items given precise space between them. So, we can manage the direction of elements in vertical or horizontal positions.

Some steps for making an element flexbox:

Create a div class container inside the HTML; 

On CSS file give an entry for the new div class "Display: Flex";

Automatically its items became children;

Use the property Flex direction to the container attributing it to a row or column position. 

    So, the flex items will display in a row or column using the space as needed to fit inside the container. We can manage the space between the items by applying the flex property to the children.  We have also a property called flex-wrap. This property can be applied to the container when its elements overflow the space available on the page, so it will wrap the content onto another line.

The designer of our The Daily Sponge webpage has been improved.

We are learning a lot of CSS in the last classes.  Now, we can add some attributes selectors to give our site a different structure such as background color, alignment and others that make the site appearance visually attractive.

For these changes, we used some of the properties bellow:

- Background color

- Margin

- Padding

-Border 

-Font family

-Width

-List-style-type

- Text-alignment 

-Display

and others. 

We have been learning a lot about Html, CSS and we will be learning JavaScript until the end of this semester. Now, we know a lit bit about what happens behind the website's creation. Let's know more about the web developer professional.

      A front-end developer is responsible for creating a functional user experience by managing the client-facing aspect of websites. It means, through languages such as Html, CSS, and JavaScript is possible to design an interface that allows the user to see texts, images, access links, navigation bars, and other functionalities.

Web developers are in charge of analyzing the architecture of a page, making it easy for the users to access and get information from a website.

Finally, first step done! HTML page. 

HTML elements reference is necessary for the structure of a page, such as paragraphs, images, blockquotes, links, and etc. We created them using tags. We learned some of the tags that represent the root of an HTML document.

<p> element represents a paragraph.

<link> element specifies relationships between the current document and an external resource. 

<em> element marks text that has stress emphasis.

<strong>  element indicates that its contents have strong importance, seriousness, or urgency.

<br> element produces a line break in text (carriage-return).

<blockquote> element indicates that the enclosed text is an extended quotation.

<ol> element represents an ordered list of items — typically rendered as a numbered list.

<li> element is used to represent an item in a list.

<lu> element represents an unordered list of items, typically rendered as a bulleted list.

<a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address.

<img> element embeds an image into the document.

<HELLO, WORLD! >

The first exercise was to create a page that is a time-honored tradition in computer programming. We used the basic HTML structure, in which we could see the main tags that are necessary for the document to be correctly interpreted by browsers.

Three steps were followed:

Write a function that returns the string "Hello, World!".

Run the test suite and make sure that it succeeds.

Submit your solution and check it on the website.

Hi There,

My name is Carla, and I am a food engineer with more than ten years of experience in this field. So, I decided to change my career choosing a master’s in Interactive Digital Media as the beginning of a new journey in my life.

It has been challenging to get into this new world. Everything is different from my background. I had to prepare my mind to show up with my creative side. However, I am thrilled about this new experience.

I am going to record some pieces of information about the Web Authoring classes that already started. I can not wait to see my first web page created.