Month: April 2013

What is HTML5?

What is HTML5?

What is HTML5?…HTML is the latest version of HTML, Hypertext Markup Language. This is the language used to communicate with web browsers to display web documents displayed in pages. The W3c as of December 2012 has  recommended the use of HTML5 for all new and existing websites.

HTML5 has a number of new features:

  • Section and Article tags
  • API’s that assist with web apps
  • Support for audio and video
  • Reduces the need for plugins

What is HTML5? Structural tags:

Structural tags refer to the structure of the web document, HTML 5 has made structuring the website based on the modern format of web documents.

HTML5-tips-structural-tags
General Structure of HTML5 Website

New HTML5 Structural Tags:

  • Section: Generic Section, splits into distinct regions or chapters.
  • Article: Forum posts, Magazine Articles, Blog entry, Comment for syndication, anything that can be republished on it’s own.
  • Aside: Content related to main content – quotes, ads, relational groupings.
  • Header: Introductory or navigational Aids, wraps tables, search form or logos.
  • Hgroup: heading of a section, group set of headings, related headings.
  • Footer: Information about the writer or copyright information for specific section of whole page.
  • Nav: Section of page providing navigational links to other pages or parts within a page.

What is HTML5? Content tags:

  • Figure: Grouping visual content 
  • Video: Media element video and audio
  • Audio: Media element video and audio
  • Embed: Integration point for external non-HTML application
  • Canvas: Resolution dependent bitmap canvas, rendering graphs, graphics etc.
    puts canvas on page

What is HTML5? Application focused tags:

  • Meter: scalar measurement of known range, disk usage,
    relevance, gauge [only use when range is known]
  • Progress:  Completion of a task [use when range not known]
  • Time: Time(24h) or date – machine readable way only gregorian
    [too specific]
  • Details: Widget displaying extra help info
  • Command:  Command a user can invoke, toolbars, icons
  • Menu: Represents list of commands

What is HTML5? Depreciated HTML tags (Still supported but use is not recommended):

  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u
  • frame
  • frameset
  • noframes
  • acronym
  • applet
  • isindex
  • dir

What is HTML5? debated tag attribute removals:

  • rev, charset : FROM : a , link
  • longdesc, name : FROM : img
  • version : FROM : html
  • abbr : FROM : th
  • scope : FROM : td
  • align : FROM : all block elements
  • background : FROM : body
  • hspace, vspace : FROM : img
  • bgcolor : FROM : table, tr, th, td
  • border, cell padding, cell spacing : FROM : table
  • height, width : FROM : td, th
  • valign : FROM : table

What is HTML5? New integrated API’s:

  • Video and Audio playback
  • inline editing: edit text without use of an editor
  • Offline and History API
  • Web protocol API: Application can register the protocol they use
  • Drag and Drop API

What is HTML5? Associated API’s:

  • Geolocation API
  • 2D Canvas API
  • local Storage API
  • Messaging API

What is HTML5? Content Models:

  • Metadata – presentation of rest of content [base, command, link, meta, script, noscript, style, title]
  • embeded – content that imports [audio, canvas, embed, iframe, img, object, video]
  • interactive – user interaction [a, audio, button, details, embed, iframe, img, input, keygen, label, menu object, select, textarea, video]
  • heading – [h1 – h6, hgroup]
  • phrasing – text and text markup, eg. inline [a, abbr, command, code, select, small, object, var, textarea]
  • flow – included in normal flow, in body tag [majority of html: a, article, size, details, div]
  • sectioning – defines scope of headings and footers [article, aside, nav, section]

Display is now controlled with CSS – HTML5 and CSS must work together! 

Easy HTML5 character encoding:

  • Usually http header deals
  • Easier html 5: <meta charset=”utf-8″>

Please check the following links to find out about other new developments and how to apply the new HTML5 tips in your website:

http://www.w3schools.com/html/html5_intro.asp

http://www.w3.org/html/wg/drafts/html/master/What-is-html5

http://html5demos.com/

Find out about HTML6 here:

http://html6spec.com/

Git Github Quick Reference Tutorial

What is Git Github?

Git Github is distributed version control. It is free and open source, made by Linus Torvalds.

It is different from previous version control techniques:

  • Different users maintain their own repositories.
  • There is no single failure point.
  • Changes are stored as change set.
  • Change sets can be exchanged between repositories.
  • Branches can be used, with fast context switching, to control your working development directory.
  • Much faster than any other version control system.
  • No network access required.

Git is for anyone who wants to track changes, it was designed by developers for developers but anyone wanting to track changes can use it. However Git is no good for:

  • Images
  • Movies
  • Fonts
  • Music
  • Microsoft Office (Word, Excel, etc)
  • PDF

Git and Github Quick Reference

Download Git

go to: http://git-scm.com
download and install with Git Bash

Now open Git Bash and go to the folder where you want a new repository:

Initialise a project Git:

git init

Staging Changes Git:

git add .

Commiting Changes Git:

git commit -m "Message"

How to write commit messages Git:

  • Substitute “Message” above with:
  • A short single line description of your changes or actions
  • Optionally followed by a blank line and a more complete description
  • Each line should be less than 72 characters
  • Present Tense
  • Asterix, Hyphen or ‘>’ as bullets
  • It is not email, no dates or times

View change log Git:

git log

Change log additional commands Git:

#single line per commit
git log --oneline
#show just 3
git log --oneline -3
#since
git log --since="2012-02-20"
#until
git log --until="2 weeks ago"
#author
git log --author="Name"
#Searching
git log --grep="test"
#difference of log
git log -p
#statistics
git log --stat --summary
#email format
git log --format="email" 
#graph
git log --graph
#well formatted (works better on unix)
git log --oneline --graph --all --decorate

Architectural differences between Git and other Version Control Git:

Other version control:

  • Two-tree Architecture
  • Repository -> checkout -> sandbox -> commit -> repository

Git:

  • Three-tree Architecture
  • Repository -> checkout -> sandbox -> staging index -> commit -> repository

Git changes and Checksums Git:

  • When anything is changes in Git, a change set is created.
  • Git converts the change set into a SHA-1 checksum
  • Every change including the change message has a unique checksum
  • Therefore is maintains the integrity of changes

Head in Git:

head is a pointer to the tip of the current branch in the repository

Git Status:

Shows current branch and all untracked files (changes not yet staged)

git status

 Differences in Git:

#working directory
git diff

#staged differences
git diff --

#differences between branches
git diff master..sandbox

Deleting in Git:

#Unstaged
#just delete the file

#staged differences
git rm <filename>
git commit -m "Message Delete"

Renaming in Git:

git add <renamed>
git rm <old file>
git commit -m "Rename Message"

Moving Files in Git:

git mv <onefile.txt> <otherfile.txt>

Converting a Real Project to a repository (Skipping Staging) iwth Git:

git init
#skip add just commit
git commit -a

Undo Unstaged Changes with Git:

git checkout -- <Filename>

Undo Staged Changes with Git:

git reset HEAD <Filename>

Undo Commits with Git:

  • Changing the latest commit forces all other commits down the line to change due to checksums
  • You can change the last commit (at HEAD)
  • Below can be used just to change the last commits message
git commit --amend -m "Amend Message"

Undo Commits of Specific Commit with Git:

git checkout <CommitSHA/Checksum> -- <Filename>
#eg.
git checkout 4d5shd6a -- test.php
#or
git checkout b47hsdf4

#Use: git log to get the SHA/Checksum

Revert to Specific Commit with Git:

#stage and commit
git revert <Commit SHA / Checksum>
#no commit no stage
git revert -n <Commit SHA / Checksum>

Reset in Git:

#USE WITH CAUTION - Changes position of HEAD
git reset --soft
git reset --mixed (default)
git reset --hard
  • Soft: Moves Head Pointer, No staging, No Changes in Working Directory.
  • Mixed: Moves head pointer, changes staging directory to match repository, No Changes in Working Directory.
  • Hard: Changes Staging and Working Directory.

Remove Untracked Files from Working Directory in Git:

#test run
git clean -n
#force to run
git clean -f

Ignoring Files in Git:

#in project/ .gitignore
#if not there create
#basic regs: * ? [aeiou] [0-9]
*.php

Typical things to ignore with .Gitignore:

  • Compiled Source Code
  • packages
  • Compressed Files
  • Logs
  • Databases
  • Operating System Generated Files
  • user-Uploaded Assets (Images, PDF, Videos)

Global Ignores in Git:

#personal preferences specific to OS
git config --global core.excludesfile /users/Username/.gitignore_global

Remove just from Staging index in Git:

git rm --cached <Filename>

Tracking an Empty Directory Git:

#Place a small file in the directory, Git only tracks files not directories

Treeish – what is it with Git:

Treeish: References part of a tree

Can Use:

  • full SHA-1 Hash
  • short SHA-1 Hash (4 to 15 characters)
  • HEAD pointer
  • branch reference
  • parent commit: -HEAD^ or -HEAD~2
  • tree is a directory, blob is a file
git ls-tree <treeish>
git ls-tree HEAD

Branching in Git:

  • Don’t use much resources
  • Easy to Create
  • Fast
  • Little space required
  • Ability to try new ideas and test
  • Can create for specific parts of project
  • One working Directory
  • Fast context switching
#check branches
git branch

#new branch
git branch sandbox

#switching between branches
git checkout master

#create and switch branch
git checkout -b master

Checkout Files in Git:

git checkout -- <Filename>

Finding if branch which has all commits within:

git branch --merged

Delete branch in Git:

git branch -d <branchname>

Merging branches with Git:

git merge <branchname>

#fast forwardn is not a true merge
#no fast forward
git merge --no-ff <branchname>
#fast forward only
git merge --ff-only <branchname>

Merge Conflicts in Gits:

  • Go through and decide which changes you want
  • abort merge
  • Resolve Conflicts manually
  • use merge Tool

Avoiding Merge Conflicts with Git:

  • Keep lines short
  • No unnecessary whitespace edits
  • Keep focused do not wander around the project
  • Merge Often

Stashing uncommited Changes in Git:

git stash save "Stash Message"
git stash list
git stash show -p stash{0}

Stash brought into any Repository:

#default puts latest one in
git stash pop
#put specific
git stash pop stash@{2}
#pops but keeps in stash
git stash apply

Delete Items from Stash in Git:

git stash list
git stash drop stash@{1}
#clear stash
git stash clear

Remote Servers and Github:

  • Used as convention Remote not necessarily required
  • Git makes an origin/master referencing remote server

List of remotes:

git remote

Telling Git where the remote repository is, usually Github:

git remote add <name usually origin> <https address or ssl>

Pushing an Existing Repository or github:

#push masterbranch to github
git push -u origin master

Getting a from a Git Github:

#find project on git
#go to folder you want it to reside
git clone <https/ssl of project> <project name>

Pushing changes to Remote or Github:

git push origin master

#if tracking branch
git push

Fetching from remote repository or Github:

git fetch origin
#fetch and merge
git pull origin

Fetching Tips for Github and Remote Servers:

  • Fetch before you work
  • Fetch before you push
  • Fetch often

Delete a remote branch from Github:

#push nothing to origin
git push :<branch>
#new way
git push origin --delete <branchname>

Using an IDE, Git and Github:

many IDE’s have this functionality built in to make it much easier

More Info Git Github:

Git Official Tutorial

Git-Github-tutorial

Reconciling a Detached Head with Master/origin