Year 1 Introduction to Development & Emerging Technologies-assignment1

coding – html basic code for web design

eccleshsadLeave a comment
code
<!doctype html>
<html class=”no-js” lang=””>
<head>
<metacharset=”utf-8″>
<metahttp-equiv=”x-ua-compatible”content=”ie=edge”>
<title></title>
<metaname=”description”content=””>
<metaname=”viewport”content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<linkrel=”apple-touch-icon”href=”icon.png”>
<!– Place favicon.ico in the root directory –>
<linkrel=”stylesheet”href=”css/main.css”>
</head>
<body>
<headerclass=”primary-header”>
<imgsrc=”http://placehold.it/200×200″alt=”example site logo”class=”primary-header__logo”/>
<navclass=”primary-navigation”>
<ulclass=”primary-navigation__links-list”>
<li>
Google
</a>
</li>
</ul>
</nav>
</header>
</body>
</html>

Code – Semantic

eccleshsadLeave a comment

subtitles which divides the code to make it easier to read and function.

  • H1-H6 (H1 prioritises)
  • header
  • footer
  • paragraph
  • section
  • nav (navigation)
  • main
  • content
  • article
  • address
  • figure
  • figcaption (image description)

Coding – Setting up E-commerse

eccleshsadLeave a comment

Sandbox – the testing environment to try programs and websites for testing and evaluation before making it available to everyone

Stages of setting up E-commerse payments:

  1. Choose the payment gateway (Stripe, Paypal, Sage pay, ect)
  2. Develop the website
  3. Fulfil hosting requirements of SSL certificate

Developing the website:

  • development in Sandbox
  • staging in Sandbox
  • production in Sandbox

Hosting requirements:

  • apply for certificate
  • install it
  • verify HTTPS is secure
  • check SSL certificate using a SSL checker

 

Coding – E-commerse

eccleshsadLeave a comment

E-commerce – the process of payments on electronic path ways such as the internet for the sale of goods and services.

Comparing 3 payment gateways:

  1. Stripe

Advantages:

  • cheaper for the business than Paypal
  • create subscription
  • access the coding easily

Disadvantages

  • not well known
  • users have reported a lot of updates
  • not linked as noticeably as Paypal with big companies
  1. Pay Pal

Advantages :

  • simple to use
  • create an account for fast check out
  • used worlwide
  • well known
  • linked to most sites already

Disadvantages :

  • has had a lot of past problems
  • has to be linked to a bank card
  • customer service is delayed not as instant as most would like
  1. Sage Pay

Advantages :

  • range of payment methords
  • generate invoices
  • well known in businesses
  • simple set up

Disadvantages:

  • not well known by the public
  • not much support
  • website not very easy to find resources

My preference :

My choice out of these 3 systems would be either Sage Pay for a large business as a larger business would benefit more from the range of payment methods available and the ability to generate quick invoices with a secure payment system while or Paypal for a smaller independent one as it is more known on a global scale and people find this more trusting in a small unknown company.

Coding – SSL

eccleshsadLeave a comment

SSL – Secure Sockets Layer

SSL is a security protocol that encrypts online communications to a higher level keeping personal information more secure on the web by adding the ‘s’ to HTTPS and will usually show a lock in the corner of the address bar, to do this you must obtain a SSL certificate, it requires the website identity to be submitted and check to make sure it id a true website and domain.

 

Coding – Acronyms & HTTP Statuses

eccleshsadLeave a comment

JSON : JavaScript Object Notation –  for storing and exchanging data written with JavaScript (eg { “key” : “value”}

API : Application Program Interface – tools used to build software applications by determining how they should interact

HTTP : Hypertext Transfer Protocol – the foundation to a website which defines the way which it is formatted and transmitted including the actions of the servers and browsers

HTTPS : Hypertext Transfer Protocol Secure – the secure version of HTTP meaning  communications between browser and website are encrypted to protect confidential online such as; transactions, online banking,online shopping, log in details and other personal information. It can be identified on browsers such as Internet Explorer and Chrome by the green padlock at the beginning of the address bar.

HTTP Statuses :

  • 200 – OK/successful
  • 403 – Forbidden
  • 404 – Not found
  • 500 – Internal server error

CSS – basic structure

eccleshsadLeave a comment
body {
background: #000000;
colour: #ffffff;
}

 

.main-title{
background: #ffffff;
colour: #000000;
font-family: arial, helvetica, sans-serif;
margin: 10px10px10px10px;
padding: 10px10px10px10px;
}
.first-section{
background: #ffffff;
colour: #000000;
font-family: Arial, Helvetica, sans-serif
margin: 10px 10px 10px 10px;
padding: 10px10px10px10px;
}

 

.main-title {
text-transform: uppercase;
}

CSS explained

eccleshsadLeave a comment

CSS – Cascading Style Sheets

They are used to describe how the website is displayed on the screen/device/media, it is used to set the layoutof multipl web pages, these will controle everything from the basics of font and colours that you see.

we create each of these using an external style sheet using CSS files/code which is linked into the coding using:

<link rel=”stylesheet” href=” enter file“>

HTML – Lists

eccleshsadLeave a comment
<ul> – unordered
<ul style=”list-style-type:disc”> – disc bullet
<ul style=”list-style-type:circle”> – circle bullet
<ul style=”list-style-type:square”> – square bullet
<ol> – ordered 
<ol type=”1″> – ordered number
<ol type=”A”> – uppercase letters
<ol type=”a”> – lowercase letters
<ol type=”I”> – uppercase roman numbers
<ol type=”i”> lowercase roman numbers
 <li> list items
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Lesson 1</title>
</head>
<body>
<section class=”first-section”>
<h1>Hello world</h1>
<p><strong>Example text </strong></p>
<ul>
<li>Coffee</li>
<li>Keys</li>
<li>Phone</li>
</ul>
</section>
<section class=”first-section”>
<h2>Practising coding</h2>
<p><strong>Trying to add bold and sections to coding</strong></p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</section>
</body>
</html>

Basic HTML adding CSS 1

eccleshsadLeave a comment

HTML file

Lesson 1

Hello world

Example text

Practising coding

Trying to add bold and sections to coding

CSS file
body {
background: #000000;
colour: #ffffff;
}
.fisrt-section{
background: #ffffff;
colour: #000000;
font-family: Arial, Helvetica, sans-serif
margin: 10px 10px 10px 10px;
padding: 10px10px10px10px;
}