Welcome @aislingsweb - Tumblr Blog

"The Technology Trap" and the Future of Work

https://soundcloud.com/bridging-the-gaps/the-technology-trap-with-dr-carl-frey

I listened to a discussion on the ‘Bridging the Gaps’ podcast called "The Technology Trap" and the Future of Work with Dr Carl Frey. His research focuses on how advances in digital technology are reshaping the nature of work and jobs and speculates what jobs there might be in the future. He discusses the forthcoming AI and automation revolution and how we may handle it. In my opinion artificial intelligence systems have the potential to do bring extraordinary benefits for society but may also leave millions of people unemployed. I believe that most jobs will be in the technology sector and most people will stare at screens all day. I am worried about the long term effect of people staring at screens and the isolation many people may feel from working remotely. I am worried about the future of democracy because of fake news being spread online. I am hopeful because of the advancements in science and healthcare because of AI.

What are some of the major new developments happening in Interactive Digital Media today?

Artificial Intelligence (AI)

Artificial intelligence is a new global phenomenon where computer science can create intelligent machines that can perform tasks that normally need human intelligence. There are four different types of AI which include self awareness, limited memory, theory of mind and reactive machines. Some examples of AI include Netflix recommendations, self driving cars, social media monitoring, manufacturing robots and smart assistants.

Internet of Things (IoT)

The Internet of Things is the definition for devices that are connected and share information to other devices and systems by using the internet. These devices are ingrained with sensors, software, technology and internet connectivity. Today IoT can be found everywhere in the world from our homes, to schools, to our industries. It is transforming our world fast into a smarter, digital world. Some examples of IoT include connected appliances, smart factory equipment, smart home security systems, elderly care monitoring and smart fire extinguishers.

Virtual Reality (VR)

Virtual reality can place users in a very different or similar place to their normal reality when they put on a virtual reality headset and/or gloves with sensors. They become immersed in a VR experience that can be computer generated or captured by video. VR is a three-dimensional image or environment that can be interacted with. It is used for many different reasons including virtual meetings, medical training, to help mental health, retail, tourism, real estate, art and design, or video games.

Video Marketing

Video marketing promotes a product or service through the use of video. Users are more likely to engage with your brand if they see your video marketed on social media. Video marketing is a very popular marketing strategy today and can be seen across almost all social media platforms. This includes the most popular social media platforms which are Instagram, YouTube, TikTok, Twitter and Facebook. There are a few different ways that videos can be marketed digitally which include video ads, demos, presentations, vlogs, product reviews, interviews and explainers.

What is the biggest challenge in Digital Media today?

There are so many different challenges that come with Digital Media today. A few of these challenges are data privacy, fake news, security, copywriting, algorithms, addiction, mental health issues, psychological and physical issues, the dark web, coded bias, accountability and hate speech. All of these challenges, along with more that I have not mentioned, are extremely valid but the challenge I am going to focus on is the growth in mental health issues due to social media.

Social media is a computer-based technology made up of online communities and networks which allows people to express their beliefs, information and perspectives. It is a form of interactive digital media that almost everyone uses today. It has become a huge part of our everyday lives and most young people will spend hours every day using it. It helps connect us with our friends and family who live all over the world and allows us to buy things without leaving the house. The challenge is that mental health issues are growing due to excessive use of social media and there does not seem to be a solution.

We have become dependent on social media to connect with others but but we are loosing connection with people face to face. Numerous academic studies have proven that there is a strong link between social media and mental health issues such as depression, anxiety, loneliness and even suicide. Social media users may compare their lives and appearances with others online and feel negative emotions about themselves. How can social media platforms tackle this huge problem with mental health?

CSS Images

This week we also learned about CSS images. This has opened up new possibilities for us when we our designing our final project - a full website.

Background Images

If the image is part of the content use the HTML <img> tag but if it’s part of the design use CSS images. The default is to repeat images in a tile manner but background-repeat lets us control how the image is repeated. By default it’s behind the text. Whatever element you put it on, it goes on that element and by default it puts it in the top left corner.

Example of background image

#header {

Background-image: url (“logo.jpg”);

}

Background Repeat

Repeat - default (tiles the image)

Repeat x - repeats on x-axis

Repeat y - repeats on y-axis

No repeat

Example of background repeat

#header {

Background-image: url (“logo.jpg”);

Background-repeat: repeat-x;

}

Background attachment

Possible values: scroll, fixed and local.

Example of background attachment

#header {

Background-image: url (“logo.jpg”);

Background-attachment: fixed-x;

}

Background Position

Values can be added as numeric or keywords. Keywords: top left, top center, top right, center left, center center, center right bottom left, bottom center, bottom right.

Background Image Size

Controls the size of the background images. You can use px or %. Background-image: 50% = 50% of the images containers width/height not the image itself width/height. Background-size: contain = makes sure the entire image fits into the screen when we use responsive web design. Background-size: cover = Lets you place fullscreen background images that are flexible and retain their ratio. You should place Background-size on to the HTML tag. CSS3 lets you have multiple background images for box elements, that you can separate with commas in your code.

Example of full screen background image

html {

Background-image: url (“logo.jpg”);

Background-repeat: no-repeat;

Background-attachment: fixed; /* optional */

Background-position: center center;

Background-size: cover;

}

Example of multiple background images for a box element

#example1 {

Width: 500 px;

Height: 250 px;

Background-image: url (“logo.jpg”),

Background-image: url (“logo2.jpg”);

Background-position: center bottom, top left;

Background-repeat: no-repeat;

}

Web Typography

We also learned about web typography this week which was cool! Web fonts let you specify web fonts to be downloaded along with the website files. Any browser that supports web fonts lets you use whatever fonts you like! You need to download a font file and include it with the other font files. Examples of font file types that are supported by most web browsers are WOFF and WOFF2. WOFF is supported by 90% of browsers but you should still include font stacks just in case. You can supply multiple versions of a type. You can get free fonts on sites like “font squirrel’ or ‘league of moveable type’.

Font types

Woff, Woof 2, Truetype, Opentype, Embedded-opentype and Svg

Font-face

At the start of your CSS include @font-face block which tells the browser which fonts to download (Chunk is the name you will use later in your stylesheet).

Example

@font-face {

Font-family: Chunk;

Src.url (‘fonts/chunk.woff’);

}

Format

Format is how to let your web browser know which font-type to expect.

Example

@font-face {

Font-family: Chunk;

Src.url (‘fonts/chunk.woff’) format (“woff”);

}

Example of multiple formats

@font-face {

Font-family: Chunk;

Src.url (‘fonts/chunk.woff’) format (“woff”),

Src.url (‘fonts/chunk.woff2’) format (“woff2”);

}

Font Stacks

You can use the font-family font you defined in @font-face in your font stacks.

Example of font stacks

H1 {

Font-family: Chunk, Rockwell, Georgia, serif;

}

Font weight

100 = thin

200 = extra light

300 = light

400 = regular

500 = medium

600 = semi bold

700 = bold

800 = extra bold

900 = black

950 = extra black

Example of multiple font weights in the same font family

@font-face {

Font-family: Chunk;

Src.url (‘fonts/chunk.woff’) format (“woff”),

Font- weight: 900;

Font-style: normal;

}

@font-face {

Font-family: Chunk;

Src.url (‘fonts/chunk.woff’) format (“woff”),

Font- weight: 700;

Font-style: normal;

}

H1 {

Font-family: Chunk;

Font-size: 4rem

Font- weight: 900;

Text-transform: uppercase;

}

P {

Font-family: Chunk;

Font-size: 3rem

Font- weight: 700;

}

Online Font Services

Online Font Services store and serve the font for you. You just need to include a line of code. Google Fonts is a free example. Select a font in Google Fonts and press the plus button beside it and it will show you the HTML and CSS code. You can add multiple weights!

Responsive web design

This week we learned about responsive web design. It was really interesting but also hard. Mobile is becoming the most popular way to access the web. We need 3 things to make responsive web design

1. Flexible, grid-based layout

2. Flexible images and media

3. Media queries

1. Flexible Grids

For the #container div, we express it as a % of the browser window. We put a maximum width on the outer div later. As long as we use fractional units for the widths of our columns then our grid is proportional and flexible.

Example of CSS Grid

#container {

Width 90%;

Margin: 0 auto;

Background-colour: #fff;

Display: grid;

Grid-template-columns: 6fr 3fr;

}

Example of setting up our grid items in CSS Grid

#masthead {

Grid-column: ⅓;

Grid-row: ½;

}

main {

Grid-column: 1/2;

Grid-row: 2/3;

}

aside {

Grid-column: ⅔;

Grid-row: ⅔;

}

#footer {

Grid-column: ⅓;

Grid-row: ¾;

}

Example of setting up our grid with 12 column tracks

#container {

Grid-template-columns: repeat (12fr, 1fr);

}

Example of setting up our grid items with 12 column tracks

#masthead {

Grid-column: 1/span 12;

Grid-row: ½;

}

main {

Grid-column: ⅛;

Grid-row: 2/3;

}

aside {

Grid-column: 8/13;

Grid-row: ⅔;

}

#footer {

Grid-column: 1/13;

Grid-row: ¾;

}

2. Flexible Images

If a container for img becomes smaller than the image will shrink but max-width means that it won’t get any bigger than its actual size.

Example of images

Img {

Max-width: 100%;

}

3. Media Queries

Media queries help our web page respond to different browser sizes better by allowing us to write CSS targeting media screens and sizes. Media queries do not work for all browsers. Before we write media queries, we must make sure the client browser tells us its viewport size. Dropping the viewport into our header makes the browser’s viewport equal to the width of the device's screen.

Example of Media Queries

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

#content {

Width: 50%;

}

Example of dropping the viewport into our HTML header

If a heading from a webpage looks too big on a smaller screen we can use media queries to write a new rule to the heading. The example underneath says that all browsers larger than 700px will get the original size of the heading but those smaller will get the new size. We only need to write rules we are going to overwrite.

Example of using media queries to target a heading

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

#masthead h1 {

Font-size: 3rem;

}

Example of turning a nav bar into a column flex box layout

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

Nav ul {

Text-align: center;

}

At smaller sizes 2 columns doesn’t work so we could change our grid

Example of changes our grid for smaller screens

main {

Grid-column: 1/4;

Grid-row: 2/3;

}

aside {

Grid-column: 1/4;

Grid-row: ⅔;

}

Example of using max-width attribute to never go above a certain width

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

#container {

Min-max: 900px;

Margin: 0 auto;

}

Breakpoints (Pixels)

Widescreen: 1300 pixels or higher

Standard: 960-1300px

Tablet: 768px = ipad in portrait mode

Mobile: 320-480px

Breakpoints (Ems)

960 px = 60rem (if 1rem = 16px)

480 px = 30 rem

Example of using Em

@media screen and (min-width: 30em) {

#container {

Min-max: 900px;

Margin: 0 auto;

}

Planning and Designing a Website

This week we learned about planning and designing a website! We must build something that’s useful for the people using it. Below is a list of questions we must try to answer when planning and designing a website! This will be useful for our final project.

1. Brief Questions

What does the client want?

What’s the end goal?

2. Research Questions

Client survey

What’s the purpose of the site?

What are the goals?

What's the client's vision?

Why is the client redesigning?

What's the most important reason for users to visit the site?

What’s the most important thing you want to convey on your site?

Needs assessment

Who are you?

What do you do?

Why was your company created?

How would you like to be perceived?

Audience and Goals

Who are the users of the site?

How would you describe the users?

Why will they come to the site?

When and where will users access the site?

How will users access this site?

Task analysis

What will users do on the site?

Which tasks are critical to users' success on the web site?

How will you judge if this is a successful website? List websites you do / don’t like.

Content

Will the client provide the content?

Who will maintain it?

Competitor Audit

Who is your competition? (look at 3 similar sites and judge them)

Why should clients choose your product / service over others?

Virtual Sketchbook / mood board

Find inspiration online and use Miro

3. Idea Generation

a. Content

(Plan content, Site map, Name pages, Write brief description of each page)

What will the site have on it?

How will it be organised?

b. Usability

(effectiveness, efficiency, safety, utility, learnability and memorability)

Ease of learning

How fast can a user be familiar with the interface?

Efficiency of use

How fast can a user be familiar with performing tasks?

Memorability

Will the user remember how to use the interface when visiting the website again?

Error frequency and severity

How often do users make errors while using the system?

How serious are the errors?

How do users recover from these errors?

Subjective satisfaction

How much does the user like using the system?

c. Navigation

(Crucial, usable, intuitive, natural, easy to understand, consistent)

Header

Can contain navigation, search bar and log in options. Logo can be used as a home button.

Context

Content, purpose, audience of the site

Wireframe

Sketch: The page, the header, the nav, content areas, footer etc.

Key pages: Home page, general content page and gallery page.

Design

What is the mood or tone?

What graphics, fonts, textures and colours will convey this tone?

Design Mock ups after wireframes and before coding.

Server-Side Web Development , Content Management Systems And Wordpress

Server-Side Web Development

Almost all modern websites are built using both client-side web technologies (HTML, CSS) and server-side web technologies (scripting languages, database). Static websites content doesn’t change no matter who looks at it and to change the content the source code must be edited. In a dynamic website, the server application constructs the page using a scripting language as well as a database. The content may change depending on input (forms filled in) or user logins etc.

scripting languages

Examples of scripting languages include PHP, ASP, Python, Ruby and Java. Javascript can be used in both client-side and server-side scripting languages. PHP is the most popular. PHP code (embedded in HTML page) must be executed by a PHP interpreter, which has to be installed on a web server.

Example of PHP code in a HTML body

<body>

<?php echo ‘<p> Hello World!</p>’; ?>

</body>

Databases

Database: An organised collection of data stored & accessed on a computer.

Database Management System: Software that allows users to interact with a database e.g. MySQL

Content Management Systems

A web content management system is a software application that lets users add, edit and delete content on a website. Users can run dynamic, database driven websites without knowing any code. Examples include Wordpress and m=Moodle.

Wordpress

Wordpress uses PHP and MySQL. 39% of the web use Wordpress. In our web authoring lab we all set up our own Wordpress, which we will edit for our next assignment. We have a lot of control over the design. It seems really easy to use! It’s recommended that we use a child theme. I am excited to start using Wordpress!

CSS Grids

Overview of CSS Grids

This week we learned about CSS grids. It was a lot of new information to learn and remember but it is really interesting and powerful. It will help us create great web pages. To align items in CSS we use both flex-box and grid. A grid is made up of horizontal (columns) and vertical (rows) lines. An element can be a grid container and all children of the element are grid items. A CSS grid consists of lines: tracks are the space between lines and gaps are the space between tracks. To turn an element into a grid container write: #container { display: grid; }. Then all child items of that element become grid items.

Grid-track

The grid only creates one column so we need to add column tracks. A grid-track is the space between any 2 lines on a grid. We add column tracks by writing grid-template-columns. To make 3 columns, each 200px wide write: #container { display: grid; grid-template-columns: 200px 200px 200px; }. The grid automatically will add rows: this is an implicit grid. It asked for 3 column tracks, so it didn’t add extra columns: this is an explicit grid. We can use any length (% or px) to define a track. We do have a specific unit (fr) for grids to create flexible grid tracks. In the grid container, Fr stands for a fraction of the available space. To make 3 equal width tracks that grow/shrink according to the space available write: #container { display: grid; grid-template-columns: 1fr 1fr 1fr; }. It can also be written like: #container { display: grid; grid-template-columns: repeat (3, fr); }.

To make columns different lengths we could write: #container { display: grid; grid-template-columns: 2fr 1fr 1fr; }. Another way to define track sizes is grid-auto-rows and grid-auto-columns. Write: #container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 200px; }. We can set a minimum/maximum height for auto added rows by writing: grid-auto-rows: minmax (200px, auto);. Auto means that the height of the content will be its height.

Grid lines

We can use grid lines to define where items are placed in the grid. When tracks are created, grid lines are too. They start on the left and the first number is 1. To position items between lines we use: grid-column-start, grid-column-end, grid-row-start and grid-row-end.

Example of CSS grid

#container {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-auto-rows: 100px;

}

.one {

grid-row-start: 1;

grid-row-end: 3;

grid-column-start: 1;

grid-column-end: 4;

}

.two {

grid-row-start: 3;

grid-row-end: 5;

grid-column-start: 1;

grid-column-end: 2;

}

Example of shorthand

Grid-row: start/end

Grid-column: start/end

.two {

Grid-row: 3/5

Grid-column: 1/2

}

Example of even more shorthand: Grid area

.two {

Grid-row: 3/5

Grid-column: 1/2

}

Becomes…

.two {

Grid-area: 3/1/5/2;

}

Example of Span

.one {

Grid-row-start: 1;

Grid-row-end: 3;

}

Becomes…

.one {

Grid-row: 1 / span 2;

}

Grid areas

As well as using grid lines to stand for grid areas, we can give names to areas using the grid-area property and lay it out with grid-template-areas.

Example of Grid Area

.header {

grid-area: header;

}

.content {

grid-area: content;

}

.sidebar {

grid-area: sidebar;

}

.footer {

grid-area: footer;

}

#container {

Display:grid;

Grid-template-columns: 3fr 1fr;

Grid-auto-rows: 100px;

Grid-gap: 1rem;

Grid-template-areas:

“Header header”

“Content sidebar”

“Footer footer”

}

Gutters

Gutters are gaps between grid cells. We can make them by writing grid-column-gap and grid-row-gap.

Example of Gutter

#container {

Display:grid;

Grid-template-columns: 1fr 1fr 1fr;

Grid-auto-rows: 100px;

Grid-column-gap: 5%;

Grid-row-gap: 1 rem;

}

Alignment

CSS Grid has 2 axes: the block axis (horizontal) and the inline/row axis (vertical). We use align-items and align-self to align items on the block axis. We use justify-items and justify-self to align items on the inline axis.

Align items

Place align-items on the container if you want all items in the grid container to have the same alignment. Place align-self to align individual items. Align items have the following values: auto, normal, start, end, center and stretch. Example: align-items: start. Start is usually the top. Stretch the item to fill the area by writing: align-items: stretch.

Justify items

Justify items have the same following values: auto, normal, start, end, center and stretch. Example: justify-items: start.

Flexbox Alignment

Align items

Align-items will align items on the cross axis. This property is applied to the container. There are 4 values: flex-start, flex-end, center and stretch (default). Flex-start aligns items to the start of the container (the top). Flex-end aligns items to the end of the container (the bottom). Flex-center aligns items to the center of the cross axis

Justify

Justify content is used to align items on the main axis. There are 6 values: flex-start, flex-end, center, space-between, space-around and space-evenly.

Gap

Gap allows us to place a gap between items: .container {display:flex; gap:1rem;}.

Flex properties: flex-grow, flex-shrink, flex-basis and flex

We can control how much space a flex item takes up with flex-grow, flex-shrink and flex-basis. In reality we rarely use these properties, we use the shorthand property flex, a combination of the 3 properties.

Flex-grow

Flow-grow defines how an item should grow to fit the available space. It is a unitless value that serves as a proportion. If all items are set to 1 then the available space in the container will be disrupted equally to the children. If 1 item has a flex-grow of 2 then the item will take up twice as much space as the others.

Flex-shrink

This defines the ability for an item to shrink. If there isn’t enough space in a container for all items then flex-shrink lets an item become smaller.

Flex-basis

The default size of an element before the available space is given. By default it’s set to auto. It uses the item's width and height value. You can also give a measurement value e.g. 16rem etc. If it doesn’t have a set size then the item's content is used as the flex-basis.

Flex

Flex: flex-grow flex-shrink flex-basis;. By default it is set to: flex:0 1 auto;. If you say flex:auto it’s the same as saying flex: 1 1 auto. If you say flex:2 it’s the same as saying flex: 2 2 0.

Flex properties: flex-direction, flex-wrap, flex-flow & order

Flex-direction

The main axis is the direction the items will go and the cross axis runs perpendicular to this. The main axis is defined by ‘flex-direction’ which includes row, row, row-reverse, column and column reverse. When you select ‘row’ items run horizontally from left to right (from the flex start to the flex end). If you select ‘column’ items will run from top to bottom. You can use ‘row-reverse’ or ‘column reverse’ to switch directions of items. By default flex direction is set to row so flex items will line up horizontally. The items start from the start edge of the main axis. The items don’t stretch on the main dimension but they can shrink. The items will stretch to fill the size of the cross axis.

Flex-wrap

Flexbox is one-dimensional but we can control what happens if items run over the edge of the container. We can set flex-wrap to wrap or nowrap. Flex-wrap:wrap means that if there isn’t even room for items they will be pushed down to the next line. Flex-wrap:nowrap means that items will shrink to fit the space. If there’s not enough room there might be overflow.

Flex-flow

Flex-direction and flex-wrap can be combined in one: flex-flow. The first value is the direction and the second is the flex-wrap: flex-flow: row; wrap;. Those properties will apply to the container.

Order

By default flex items are laid out by the order they appear in the source. The order property can control the order in which they appear in the flex container: one {order:2;}.

Introduction to Flexbox

This week we learned about CSS ‘flexbox’. It is a one-dimensional layout model which creates space between items and it’s a powerful tool for alignment. One-dimensional layout lets you layout things in one direction e.g. rows and columns. CSS grid is a two-dimensional layout model.

A Flexbox is made of a flex container and its children are flex items. Flexbox lets containers change its items width and height to best fill the space available. A flexbox container expands items to fill the available free space or shrinks them. It is flexible and direction-agnostic. It is able to change depending on the screen size and content etc. To make a container into a flex container, use the display property and change it to flex or ‘flex-inline’: .container {display:flex;}. All children of the container now become flex items.

Styling Lists With CSS

It is interesting to learn how to style lists using CSS because they are a very important element and it makes a huge difference when they are styled. They look a lot more visually interesting. It is a lot of new stuff to learn and to understand.

To change the number/bullet style we use list-style-type: #sidebar ul {list-style-type: square;} or #content ol {list-style-type: lower-roman;}. We can remove bullet points: #navigation ul {list-style-type:none;}. By default lists are indented and we can change this: ul {padding:0; margin:0;}.

To change a list from horizontal to vertical first we remove padding, margins and list style: ul {list-style-type:none; padding:0; margins:0;}. Then we need to change the display properties of the list items which means change <li> to an inline element: ul il {display:inline;}. You can also change the display to block or none. You can then add other styling like padding etc. Even though ‘display:inline’ makes a list horizontal, we will be using a better method to layout our navigation symptoms.

Trending Blogs

Recently Viewed Blogs

Welcome