andrewbrennan

[andrewbrennan]

Web Authoring blog #12

In this blog I will be discussing new social media trends for 2022

Mobile Video Marketing

The future of media is continuously evolving, and advertisers' methodologies to reach consumers need to change alongside it. According to a survey by The Trade Desk, 74% of U.S. households in the 18-34 age group have cut the cable TV cord, are planning to, or have never subscribed. With adults in this age group shifting to streaming services, such as Netflix, Hulu, and Sling, advertisers must develop new strategies to reach them. Each year, more consumers choose online video platforms over traditional television, and many are using their mobile devices. This indicates that the future of media, particularly video, requires a mobile-first strategy. This goes beyond advertising on popular streaming channels and requires businesses to evaluate how they appear in the marketplace. With videos now accessed across platforms, having mobile-friendly, accessible video content is critical.

Continued Investment in VR and AR

Through specific software and hardware, VR recreates environments, while AR enhances physical images. These two industries, which have grown up side-by-side, have gained new emphasis in recent years, and each is proliferating.

According to market research provider Research and Markets, the global VR and AR market is projected to grow to $1.3 trillion by 2030 (from $37 billion in 2019). Many experts envision these technologies will allow customers to have immersive experiences with products before buying them, helping convert ad dollars to actual customer purchases. These technologies can also help print media integrate with digital and use real-time data to deliver robust, personalized experiences to customers.

[andrewbrennan]

Web Authoring blog #11

In this blog I will describe my design document for a project I will be completing in this module. The project is to create a website dedicated to someone that you would consider a hero.

My hero site is going to be dedicated to Brian O'Driscoll, Irish international rugby player. This site will have a number of pages, including a “home page”, a page about his early life and growing up, and pages dedicated to his career with Leinster, Ireland, and the Lions. There will also be pages that address his life after retiring from rugby, what he is up to currently, and also why I think he is deserving of the title “Hero”.

All the different pages will be accessible through a hotbar on the top of the page, which will list the webpages in order. I plan to include images that will act as highlights of his career throughout the website, links to videos that showcase him, and some of his official sites that are available on the web. I will likely use a black background for all the webpages, because I prefer that look stylistically. The hotbar will also be different colours for each page, I.E. Blue for the Leinster section, green for Ireland etc. I might also include some framing for articles that match these colours.

[andrewbrennan]

Web Authoring blog #10

In this blog I will talk about Wordpress Plugins.

WordPress Plugins are PHP scripts that extend the functionality of WordPress. They enhance the features of WordPress or add entirely new features to your site. 

Plugins are available via the WordPress Plugin Directory. Although plugins you find here are thoroughly tested and considered safe to use, they are of varying quality and often work in progress. 

The WordPress content management system software, or WordPress core, provides the primary functionality for publishing content and managing users. Each WordPress plugin is an additional piece of software that can be easily installed to extend the functionality of WordPress core. 

This allows you to customize your WordPress site with your desired functionality. Since so much functionality is provided through plugins, WordPress core is full-featured and customizable, without having to include everything for everyone.

[andrewbrennan]

Web Authoring Blog #9

In Cascading Style Sheets, CSS grid layout or CSS grid creates complex responsive web design grid layouts quickly and consistently across browsers.

Historically, other methods have been controlling web page layouts, such as tables, floats, and CSS Flexible Box Layout (Flexbox). CSS grid is currently not an official standard (it is a W3C Candidate Recommendation), although it has been adopted by the recent versions of all current major browsers.

CSS grid can create more robust and flexible layouts than the previous options like CSS floats. It also allows for more standardized code that works across browsers. This is in contrast to relying on specific browser hacks or complicated workarounds. 

One issue with exploiting floats in CSS is that if the content gets added to one portion of the page, it could disrupt the flow of the page and break the layout. This is due to the varying heights for layout elements. Though CSS flexbox supports flexible formats and provides the flexibility of creating complex structures, it fails when the need for creating responsive designs in 2-dimensional space arises.

[andrewbrennan]

Web Authoring Blog #8

CSS Flexible Box Layout is a CSS3 web layout model, commonly known as Flexbox. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.

Flex container

Parent element that holds all flex items. The container can be defined as either flex or inline-flex using the CSS display property.

Flex item

Any direct child element held within the flex container is considered a flex item. Any text within the container element is wrapped in an unknown flex item.

Axes

Each flexbox contains two axes: the main and cross axes. The main axis is how the items align with each other. The cross axis is perpendicular to the main axis.

Flex-direction

Establishes main axis. Possible arguments: row (default), row-reverse, column, column-reverse.

Justify-content

Determines how content gets placed on the main axis on the current line. Optional arguments: left, right, centre, space-between, space-around.

Align-items

Determines the default for how flex items get placed on the cross axis on each line.

Align-content

Determines the default for how cross-axis lines are aligned.

Align-self

Determines how a single item is placed along the cross axis. This overrides any defaults set by align-items.

Directions

cross-start/ cross-end

The cross-start/cross-end sides determine where flex lines get filled with flex items from cross-start to cross-end.

main-start/ main-end

The main-start/main-end sides determine where to start placing flex items within the flex container, starting from the main-start end and going to the main-end end.

Order

Places elements in groups and determines which order they are to be placed in within the container.

Flex-flow

Shorthands flex-direction and flex-wrap to place the flex content.

[andrewbrennan]

Web Authoring Blog #7

We have been learning about and applying CSS, or Cascading Style Sheets throughout this module.

CSS was its own rules and codes, which are different from HTML. CSS is now what we need to learn to create web pages that look visually attractive. The latest version of the CSS is CSS3, and we will be learning to style the text, background, borders and positions of the HTML elements.

There are three ways to use CSS; inline, embedded and external. Inline, the first method applies to any web page element, like an attribute within an HTML file, and our lecturer indicated that it's not a good way to do it. The second method, embedded, is also written within the HTML file but in a different section; it's better than inline, but the best way to use CSS is the last method which is external. In the external method, we create a different file with the extension of CSS and link that file to our HTML file. In this way, all of the CSS codes will be separated from the HTML file to be easy to manage. In order to link our HTML and CSS files we need to add <link real=“stylesheet” href=“stylesheet.css”> to the <head> of our HTML file.

As mentioned before, CSS has its own rules; you need to identify the selector, which is the element you want to apply to style, then the properties you would like to use to that selector and the values, which are the value of properties. For instance, if you would like to change the font of the text inside your <p> element, your selector will be "p" (without < and >), then the property will be "font-family", and your value will be the type of the font such as "Helvetica" or "Verdana".

[andrewbrennan]

Web Authoring Blog #6

Server-side technologies, including scripting languages and databases, are the foundation of almost all websites Databases are also essential in the modern world. 

Server-side scripts: When a page is loaded, it generates server-side content. Therefore, pages that change when the site is loaded use server-side scripts. When a user downloads a different page, server-side scripts create a website.

PHP is a widely used open-source, multi-purpose scripting language embedded in HTML and is particularly suitable for web development.

A database is an organised collection of data. It is usually stored and accessed on a computer.

A relational database organises data into rows and columns of a table consisting of rows and columns—each row in a table in a row. Rows in different tables can be related or linked to each other.

A content management system, often abbreviated to CMS, is software that helps users create, manage and modify the content of a website without the need for technical expertise. It is a tool that helps you build websites without having to write all the code from scratch (or even know how to code at all)

Secure File Transfer Protocol (SFTP) is a file protocol for transferring large files over the Web. It is built on top of File Transfer Protocol (FTP) and includes a Secure Shell (SSH) security component. SFTP is handy in all situations where sensitive data needs to be protected. For example, trade secrets may not fall under any specific data privacy rules, but falling into the wrong hands can be devastating.

[andrewbrennan]

Web Authoring Blog #5

This blog will detail the steps one should take when planning and building a website. Here are the simple steps of designing a website.

Define Your Goals

 The first question you need to ask is, what is the purpose of your website? If you have lofty and complicated goals with designing the website, it’s good to break them into smaller tasks.

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.

Creating Sitemap and Wireframe

 A 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.

Content creation

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

Visual elements

Design elements such as logos, colour choices, images will shape this part. Visual content attracts the user and increases clicks and engagement while building trust.

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 correctly. If everything is working well and you’re happy with the result. The final part is to publicize the website.

[andrewbrennan]

Web Authoring Blog #4

I will be discussing responsive web design. 

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 people view. 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 to ensure that certain parts of the web design will behave differently on each side of the breakpoint.

If well applied on the HTML and CSS, these changes will make the page look almost the same on a different device.

[andrewbrennan]

Web Authoring Blog #3

In this blog I will be discussing what web development is. 

Web development is the process of creating internet-based websites and web applications. From building a simple static one-page website to developing a full-fledged powerful web application with a content management system, we have got you covered.

Website development includes; coding the application logic, incorporating databases and managing user queries, designing user interfaces, hosting the website on servers, and maintaining and updating.

Server-side, client-side, and full-stack development are the different classifications engaged in web development.

Server Side

Backend or server-side development refers to all of the procedures behind the scenes in a website.

The backend’s key components are database management, server administration, and logical component management.

These are not visible to users, yet your website will be a blank page incapable of performing any operations without a solid backend development team.

Client-Side

This layer, often known as the frontend, is responsible for the site’s visual presentation and design.

Frontend developers employ CSS, HTML, and JavaScript to provide a seamless user experience through responsive web pages.

Your website will not attract customers if it has a robust user interface.

Full Stack

Full-Stack development encompasses the entire web development process by combining the frontend and backend.

This layer deals with The complete stack of tasks and technologies involved in the website development life cycle.

A full-stack engineer is skilled in UI-UX design, database management, server hosting, and browser code.

Together, these three levels make up the web development life cycle.

For both website and web application development, the process is the same.

Understanding the web development life cycle is critical if you or your team are working on a development project.

[andrewbrennan]

Web Authoring blog #2

After running through the main principles of HTML, it was time to tackle the fundamentals of CSS. CSS, in theory, seems straightforward, but I know from experience that in practice, CSS can quickly cause complications. 

I have struggled to grasp CSS in the past, but having a second chance at reviewing the different elements and tags involved has meaningful insight that I didn’t have from last time. The lecturer provided a brief explanation of the three different types of CSS, Inline, Embedded and External, something which I would have been aware of prior, but I was not aware of the varying practicality of each method, with inline being the least practical and external being the most. 

The lecturer went on to provide a generic template to explain the basic structure of CSS. Once again, this is something that I would have been inherently aware of, but seeing this core structure laid out has given me extra confidence to write proper syntax in CSS. 

I am looking forward to getting started on the CSS portion of the Assignment I have for this module. Web authoring has truly been a breath of fresh air in a course that has proven to be stressful at times; it provides a level of familiarity comfort that I wish I could experience in all my modules. 

[andrewbrennan]

Web Authoring blog #1

I started my Master’s after the first week, and naturally, I was a little nervous going into the different modules. Unfortunately for my introverted self, the nerves never really settle in these scenarios, so I press on stressed and under pressure. 

I was unsure of what to expect from the Web Authoring module. I assumed that it would be either the more specialised or more advanced counterpart to the Software Engineering for Web Development module I went through in the Higher Diploma course. I enjoy the process of web development, but it was by no means my strong suit, and I struggled to grasp its concepts in my previous study, so naturally, trepidation and dread pervaded my thoughts and seeded doubt in my mind.

My first lecture quickly quenched all doubts in the first few minutes, and I found sincere comfort in staring up at the screen at the front of the room and seeing the familiar face of the HTML syntax that I had come to know and love like an old friend. It felt like a breath of fresh air that I could sit down and finally enjoy. 

The lecture itself was a rundown of HTML 101. The lecturer gave us a concise and coherent explanation of the different tags, their uses, and where to use them, and emphasised the importance of proper syntax. Couple that with a sprinkling of levity, plus a commanding presence in the classroom, and you get a lecture that is both engaging and informative. Getting a second run-through for these core concepts has helped refresh my knowledge on this subject and further cemented it in my brain. This module is quickly becoming my personal favourite, and I’m sure others feel the same.