Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Creating a web presence. Starting points.

Aimed at the beginner, to outline the options and possibilities when entering the world of web design.
by

Mark Hatton

on 25 January 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Creating a web presence. Starting points.

Cr ating a web presence.
Todays session
The Aim.
Going it alone...
Get help.. Using site builders.
Working with micro Blogs
& Social Media
The benefits:

The ability to create bespoke, original sites without limitations.

The ability to update, change and adapt with changing web technologies. Such as responsive website design for various devices.
The drawbacks:

You need a good understanding and working knowledge of HTML coding.

Money to fund web site hosting.

The ability to keep HTML skills up to date and develop with changing web trends.
What will you need?
For most applications a working knowledge of HTML and other programing launguages such as Java or CSS, would be benificial.

Access to a web design program like Adobe Dreamweaver. Or 'Adobe Muse'

A Domain name – www.me.com

A Hosting package – server storage

And front the cost ..
CSS - Cascading
Style
Sheets
CSS works separately from the content of a website and its code, HTML code controls the content of the website while CSS controls the style and layout of the website and determines how the browsers position its page elements, layout and design.

Sites designed with CSS are more efficient, use less code and are more reliable when viewed across a wide range of platforms. The standard is constantly developing and now on version 3.
Web widgets - link your social media - with ease
Simple user friendly site creation.
The possibility of using the immense networking potential.
To ability to build a comprehensive site by linking two or more blogs/social media outlets together, creating a wide ranging web presence.
Mobile and tablet compatibility options available.
The ability to easily update, daily / hourly, maintaining a fresh / interesting web presence that can help to attract more traffic through your site.
What are my options?

Going it alone, and build it from scratch.

Get help: Use a site builder tool..

Working with Blogs/micro Blogs and Social Media
Facebook, Behance, Twitter, Linkedin, StumbleUpon, Pintrest, instagram, google + ..etc
Image Preperation
Simple user friendly site creation.

Drag and drop interface.

Tutorials and online help.

Cost effective option Or free.

Mobile and tablet compatibility options available.

The potential to have a trusted e-commerce option available to sell your work on a global scale.

The ability to take advantage of current - dynamic web technology including HTML5 and Flash without any prior knowledge of coding.


The Drawbacks

Limitation to design and options

Restricted Layout and personal choice (without a good working knowledge of HTML coding)
www.tumblr.com
www.flickr.com
www.vimeo.com
www.youtube.com

We are awash with social media connectivity now, it's up to you how much you plugin too. However they are powerful promotional tools.

Remember that the smartphone is shifting the trends in web development.
http://www.notonthehighstreet.com
Sell, Sell, Sell!
You will need to purchase this from a web provider. Choosing one of the ever growing list of provider is up to the individual however the standard cost for a intro level package should be around £45 to £50 per year, depending on storage size, e-commerce options etc.
Getting a Domain Name and Hosting Package

http://www.compila.com
Image optimisation
Save for web & devices
Get a personal e-mail
populate searches quicker
create your own channel
Image & Video
The method of loading the image.
Graphics Interchange Format

You can use animated gif’s.
For banners or adverts. Also retains transparency.

Portable Network Graphic

Lossless compression -Used in cases where it is important that the original and the decompressed data be identical.
Retains transparency
.PNG
.GIF
Joint Photographic Experts Group:

Very common usage on the web – But optimise when possible.

The compression method is usually lossy, meaning that some original image information is lost and cannot be restored, affecting image quality. Use this file format for your Photographs as a general rule.
.JPG
Progressive
Or Baseline?
Photoshop
Baseline 'Standard': The image downloads one line a time, starting from the top.

Progressive: The image is displayed incrementally in several passes, and detail is added each time. Use this option with larger images so that the viewer can get an idea of how the image looks while waiting for it to download.
Resizing images correctly
Meta Keywords /Meta Tags

A META Tag is the hidden text placed in the HEAD section of your HTML page. META Tags are used by most major search engines to index websites based on their keywords and descriptions.

Name you images descriptively. Good file naming conventions.

Alt tags - provide further detail for an image or the destination of a hyperlinked image.

Use a good site description. (per Page if pos)
GET NOTICED!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">

<head profile="http://dublincore.org/documents/dcq-html/">

<meta name="dcterms.created" content="2011-09-23T11:50:20Z" />

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<meta name=
"description" content="Breaking news, sport, TV, radio and a whole lot more. The BBC informs, educates and entertains - wherever you are, whatever your age." />

<meta name=
"keywords" content="BBC, bbc.co.uk, bbc.com, Search, British Broadcasting Corporation, BBC iPlayer, BBCi" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<meta name="robots" content="noodp" />

<link rel="apple-touch-icon" href="http://static.bbc.co.uk/homepage/img/iphone.png"/>

<title>BBC - Homepage</title>
Browsers
Sites display differently on various web browsers. Be aware of this and check your site on several platforms or online checkers.
So what is ...
HTML , XHTML,
CSS
HTML5 ..
Flash...
Java script
Jarva
script


Is a prototype-based scripting language that is dynamic.
[e.g Lightbox - as above] Giving a web developer the ability to create more interesting & dynamic elements to increase interactivity.
Adobe Flash – ARRRRRR ARRRRRRR

Is a multimedia platform used to add animation, video, and interactivity to web pages. Flash is frequently used for advertisements, games and flash animations for broadcast.

However Flash content is now a thing of the past for pure web use .
HTML - Hypertext
mark-up language

Originally used for the sharing of scientific journals ‚hence its main elements are based upon titles, paragraphs, headings, images, tables.

HTML 5
Is the fifth revision of the HTML standard. Its core aims have been to improve the language with support for the latest multimedia. It's functionality is intended to rival Flash based sites.
MySQL

A database that uses a language called SQL (Structured Query Language) for adding, accessing, and processing data in a database. ‘MySQL’ typically runs on Linux/Unix servers in conjunction with PHP. MySQL, and is noted for its speed, reliability, and flexibility.
FTP -

File Transfer Protocol. This protocol is for transferring data between computers, so many content management systems include a FTP capability.
S.E.O
That's it .
So what will you decide to build?
http://themeforest.net/category/site-templates/creative
http://www.css-templates.org/
Using Templates
Test , Test , Test!
Ghost Lab
Browserstack
Thanks for listening.
notes.
ask.
edit templates in Dreamweaver ?
build it from scratch
Setting up shop.

Hosting packages will offer secure options.

e-commerce
Register Your site with Yahoo, Google etc.
http://www.google.co.uk/submit_content.html
http://www.ask.com/questions-about/Add-Url.
http://search.yahoo.com/info/submit.html.

http://www.folksy.com
http://www.etsy.com
http://www.fasthosts.co.uk
http://www.register.com
http://www.123-reg.co.uk
http://www.supanames.co.uk
http://www.apple.com/html5/showcase/threesixty/
Web Fonts
Adaptive / Responsive design.
http://mododesigngroup.com
https://typekit.com
http://www.google.com/webfonts
css3 now introduces > basic animations, menus, rounded div tags & more.
Adobe Muse cc
Create and publish dynamic websites for desktop and mobile devices that meet the latest web standards — without writing code.

The application is available through the Adobe Cloud membership - with Annual or monthly membership.
Subscription to the cloud does not include domain name & hosting.
You can host your Adobe Muse CC website with either Adobe or a hosting provider of your choice.
If you use Adobe there will be additional fees to host your site, usually monthly. Once you are ready to take your site live, you have a choice — you can either host your site using a third-party hosting provider or host with Adobe. For more information about Adobe Muse CC membership pricing and hosting plan options, see the Adobe Muse CC buying guide.
Benefits of Premium Blog Templates..
Edge Reflow CC
Edge Animate CC
Edge Animate lets web designers create interactive HTML animations for web, digital publishing, rich media advertising and more, reaching both desktop and mobile browsers with ease.
Start responsive designs faster and create high-fidelity prototypes through media query breakpoints, precise CSS layouts, grouping and more. Edge Reflow now connects directly to Photoshop CC, allowing you to go from static design to responsive comp in just one-click.
Edge Code CC
Edge Code is a lightweight code editor for web developers and designers working with HTML, CSS, and JavaScript. Edge Code is built to work with browsers, speeding up development time by displaying changes to the code directly on the screen.
http://webplatform.adobe.com
http://fontdeck.com
Tools
https://society6.com
Full transcript