html5

Introduction to Git and GitGUB

Posted on Updated on

On 3/6/19 at 10:30am, I attended the North Carolina Computer Instructor Association Conference Session Introduction to Git and GitHUB at East Carolina University’s SCITech Building in Greenville, NC. This was presented by Michael Schore of Wake Technical Community College.

 

Introduction to Git and GitGUB

  • Without VCS (a version control system), there are problems when you overwrite a file.
  • Why is it good, why use it and what is it?
  • Who should use it?

 

What is a version control system

  • It Tracks changes to files, especially text files
  • Source code for every piece of software or code library is written or has been written in some form of text
  • VCS is also called source code management (SCM)

A version control system is really just a way to take care of added text and then to catalog and understand what text was added, when, and by whom.

History of GIT

Version Control Systems really got their start as coding back in 1972 – SCCS (AT&T). Any participants in the class working then? A few. At the time, attendants were using fortran or punch cards.

1982 RCS much higher performance.

1986 –cvs concurrent use was an issue though

2000 – apache tracked as a subdirectory

2005 – linus torval. Replaced proprietary bitkeeper SCM

 

 

What is a version control system (VCS) Good For?

Think about the tracking required for software or web environment. How many files might be in a basic bootstrap environment? 10? 30?

Initializer.com will assist you in making a basic website with GRID, BOOTSTRAP, etc. Choose one, and it will spit out the basics needed to begin that type of website. Easy, but if you don’t know how to code this, not helpful. Many students may feel initially that using a system like this is smart, helpful, and saves them time, but unfortunately if they do not understand the coding it takes to see, use, change, and adjust this material, they don’t really know how to upkeep the websites they’ve started. In the end, they feel disheartened, upset, and as if they’ve wasted valuable time. Many will choose to have failed rather than put in the time end effort to learn what they have missed.

Without version control in the classroom, students do not always have the steps that many employers would like to have from new employees. Students with an understanding of version control software can quickly and easily move into a software or coding environment, while those without the experience may find themselves having to learn on the job.

Students have excuses, but an online version control system bypasses many of these. If the dog ate their flash drive, the computer fell from the table, etc., anecdotal evidence notwithstanding, having versions of materials available online allow them to go anywhere. They can go to the school lab and work on their materials. They can go directly to the classroom and begin working on it without pause.

 

 

Are Our Students Prepared? Are We Preparing Them?

Modern workflow options require us to ask: Are we really preparing students for jobs in the workplace? If we are teaching students to work on local machines, is this really the industry standard anymore? This opens us up to problems like those noted above. Transportation issues, mechanical and electronic failure, home wi-fi or general connection issues, windows and software updates, etc., can all be blamed without a cloud-based server or version control system. If the students cannot produce the class files at class time, its a real problem

Using GIT and GITHUB is something which can be used to assist students in job availability and preparedness. Employers in coding or web design & development can learn a great deal from a GitHUB. They can see how many updates the students have made, how many active files students are using, how many adjustments they’ve made to existing pieces and how timely the responses are to requests. It allows them to see the technical writing and explanations shown, and many other pieces of material. Imagine the increase in employability this could bring to the table.

Its not all a bed of roses though. An issue with this can be some learned helplessness on the part of our younger, or online students. We need to generate students who break out of their shells and learn to solve problems for themselves. If students don’t feel they have been given a number-by-number, step-by-step approach, many will check out and simply say that they cannot fulfill the project. We need to teach them to rely on themselves and prepare themselves to solve real-world solutions.

Watch this learned helplessness video at: youtube https://www.youtube.com/watch?v=TU7RBqTndJ8

 

What is GIT

Starting in the fall this will be taught in the classrooms at Wake Technical Community College. Git is distributed version control available via the internet or any online connection.

  • No communication requirement with a central server
    • Faster
    • No single point of failure
  • Encourages programmer involvement and “forking” of projects
    • Developers can work independently
    • Can submit change sets for inclusion or rejection

This allows us (both workers such as students and observers such as faculty, bosses, and the general public) to see who checked out individual files, how many lines of code were removed, as well as how many lines of code were added into the environment. It adds accountability into the online group project environment, because there is no way to mask the amount of work done, and code from one update can be checked against code from earlier updates (avoiding duplication and/or copying) as well as against later versions (avoiding duplication and reprinting materials, or having useless code removed later by others..

Who Should Use Git?

  • Anyone needing to track edits in text files
  • Anyone working with appropriate files in a collaborative setting
  • Anyone not afraid to use command-line tools
  • Types of files being worked on
    • Web files (html, css, JS…)
    • Web Programming (PHP, Python, Ruby,Perl, ASP…)
    • Programming (JAVA, C, C++, C#, Objective C…)
    • Offshoots of web languages (like coffeeScript, ActionScript…)
  • Can track other types of files, but not as useful- think images, sound files, etc.

Installing GIT

Nothing difficult about installation. It runs anywhere.

Bash, Apple and unix flavors come with Bash. Windows version installation is an option (GitBash). Having the right-click option to open GitBash from any windows explorer location is a great thing.

Configuring GIT

Systems have all been going to GUI over the years.  Students are afraid of command line. This really allows us to go back to basics and add in another level of professionalism and base-level working knowledge into our classes earlier. Configuring Git is as easy as using the .gitconfig file in the configuration folder.

  • Local Git config file… request slides

Editing GIT

Visual studio code can be used as the visual editor for github. You can also use color output of git.

Repositories

What is a repository? How do you create one? A repository is a place to save and store files. In a VCS, you’re trying to have a backup in case something stupid happens. If you have set up GITHUB and a repository, you can give it some information and choose a day and time to commit to those changes.

How safe is my data? How easily is it destroyed?

At its most basic, its just a file location, created on your development system.

Local repository can be set up, where your development is taking place so you can monitor and record its history.

Remote repository can also be set up, a place where your files can be saved as above, but offsite.

 

Creating A Repository

There is no free lunch. Once git is installed on your computer, its pretty simple to do. Looking at a typical website:

  • Using Git, initialize the project
  • Looking at the directory, we now see a .git file added and a (master) line added.

  

 

At this point in the lecture, we did some hands-on work with GIT to use the materials firsthand. It was a little technical, so I have included the slides as I was not able to type during this time.


  

Best Practices

  • Commit chmessage in example was very simple
  • Commit messages should be a descriptive message about the changes
    • Start with simple single line – 40 to  50 characters
    • Add more lines as needed but less than 70 characters
    • Keep messages in the present tense, not past tense
    • Bullet points using asterisks
    • Add bug number and tracking numbers in the material to be ready for business standards

 

 

Understanding GIT Architecture

Repository >> working >> git add file.html ?? staging >> git commit file.html >> repository

Again, this example was pretty hands-on, so I didn’t have much time for notes and notation.

 

 

GITHUB Training

Find some introductory GIT training and walk though it a few times. Teacher training  to master GIT and Git GUB training via https://education.github.com

Push the workflow ideas on the students. A student who understands GIT can easily understand and pickup the other repository functions. Whatever system suits the company Is the one they’ll use. Think it might be a passing phase? Microsoft bought GITHUB for 7.5 Billion last year.

Where will this go? We’ve recently added in educational contracts with GITHUB and Wake Tech. This allows us a bit of flexibility but can be difficult as it requires schools to work alongside an entity like Microsoft which is itself incredibly large.

 

GITHUB Campus Advisor program

  • As a Github Campus Advisor, you’re not only a master, but a champion of real-world tools at the School.
    • Unlock benefits provided by Github, including a free Github package to meet the needs of your school?
    • Event support, workshop kits and fresh swag delivery every semester
    • Early access to new education features and materials from GitHub education
    • Special invitations to github education events
    • Github camps advisors-only gear and special swag

  

Microsoft Technology Associate (MTA) status in Introduction to Programming Using HTML and CSS Achieved!

Posted on Updated on

At 10:45am On 3/22/18 I attended the Certiport certification lab presented by Certiport at the 2018 NCCIA Conference located at Asheville-Buncomb Technical Community College in Asheville, NC.

MTA-Introduction-to-Programming-using-HTML-and-CSS-2018Tyler Dockery Achieves MTA status in Introduction to Programming Using HTML and CSS

MTA status in Introduction to Programming Using HTML and CSS Achieved!

I chose to attempt this exam because I felt I could validate the skills and knowledge to recognize and write syntactically correct HTML and CSS, structure data using HTML elements, and create and apply styles using CSS. Since I was trained on HTML in 1996 and certified with CSS in 2001, and had been working with HTML and CSS with clients for 18 years at this point, I’m familiar with their features and capabilities, and understand how to write, debug, and maintain well-formed HTML and CSS code.

The Official Breakdown of Subject Matter

Microsoft’s official exam page for this test: MTA EXAM 98-338 outlines the following fundamentals will possibly be covered:

 

Understand HTML Fundamentals (10-15%)
  • Construct markup that uses metadata elements
    • Script; noscript; style; link; meta tags, including encoding, keywords, viewport, and translate
  • Construct well-formed markup that conforms to industry best practices
    • DOCTYPE declaration; HTML; head; body; proper syntax, including closing tags and commonly used symbols; comments
Understand CSS Fundamentals (15-20%)
  • Analyze the impact of using inline styles, internal style sheets, and external style sheets
    • When to use inline styles; when to use internal style sheets; when to use external style sheets; precedence when using a combination of inline styles and style sheets
  • Construct and analyze rule sets
    • Valid syntax for the CSS rule set; selectors, including class, id, elements and pseudo-class
  • Construct well-formed style sheets that conform to industry best practices
    • Reusing rules and rule sets; commenting; testing on multiple browsers; web safe fonts
Structure Documents Using HTML (30-35%)
  • Construct and analyze markup to structure content and organize data
    • Table tags; h1-h6; p; br; hr; div; span; ul; ol; li
  • Construct and analyze markup that uses HTML5 semantic elements
    • Semantic tags; header; nav; section; article; aside; footer; details; summary; figure; caption
  • Construct and analyze markup that implements navigation
    • Image links; a; target; bookmark; relative versus absolute links; navigating simple folder hierarchies
  • Construct and analyze markup that uses form elements
    • Form attributes; action; method; submission methods; accessibility; input types and restrictions; select; textarea; button; output; option; datalist; fieldset
 Present Multimedia Using HTML (10-15%)
  • Construct and analyze markup that displays images
    • img and picture elements and their attributes
  • Describe the appropriate use of the img, svg, and canvas elements
  • Construct and analyze markup that plays video and audio
    • Video; audio; track; source; simple iframe implementations
Style Web Pages Using CSS (20-25%)
  • Construct and analyze styles that position content
    • Positioning, including float, relative, absolute, max-width, overflow, height, width, and align; inline versus block; visibility; box model, including margins and padding
  • Construct and analyze styles that format text
    • Font-family; color; font-style; font-size; font-weight; link colors; text formatting, including text alignment, text decoration, and indentation
  • Construct and analyze styles that format backgrounds and borders
    • Border-color; border-style; border-width; backgrounds; divs; colors
  • Analyze styles that implement a simple responsive layout
    • Units of measure; responsive effects with CSS, including viewport and media query; percentages versus pixels; frameworks and templates; max width

Conclusion

All in all, this test was well worth the time and effort. The materials covered had a good amount of in-depth knowledge requirement, and I was able to break through with a score in the mid 900s. It was a good challenge, and I felt it will be helpful to me to show students that the MTA exams are a fine choice to showcase their abilities.

Microsoft Technology Associate Status in HTML5 Application Development Fundamentals Achieved!

Posted on Updated on

At 10:00am On 3/22/18 I attended the Certiport certification lab presented by Certiport at the 2018 NCCIA Conference located at Asheville-Buncomb Technical Community College in Asheville, NC.

Tyler Dockery Achieves MTA status in HTML5 Application Development Fundamentals

MTA status in HTML5 Application Development Fundamentals Achieved!

I chose to attempt this exam because of my knowledge of core HTML5 client application development skills that will run on today’s touch-enabled devices (PCs, tablets, and phones). Although HTML is often thought of as a web technology that is rendered in a browser to produce a UI, this exam seemed to focus on using HTML5, CSS3, and JavaScript to develop client applications. I felt confident to take this exam, because I had a solid foundation of knowledge of HTML5 & CSS3, but expected some issues with JavaScript. Since I teach and have hands-on experience with these technologies and since I’ve been working in the field of web design since 2000, I felt I’d have a fair handle on this. While I did not have a ton of experience with Microsoft Visual Studio, I felt I could do well.

The Official Breakdown of Subject Matter

Microsoft’s official exam page for this test: MTA EXAM 98-375 outlines the following fundamentals will possibly be covered:

Manage the application life cycle (20–25%)

  • Understand the platform fundamentals
    • Packaging and the runtime environment: app package, app container, credentials/permission sets, host process, leverage existing HTML5 skills and content for slate/tablet applications
  • Manage the state of an application
    • Manage session state, app state, and persist state information; understand states of an application; understand the differences between local and session storage
  • Debug and test an HTML5-based, touch-enabled application
    • Touch gestures; understand which gestures you test on a device

Preparation resources

Build the user interface (UI) by using HTML5 (25–30%)

  • Choose and configure HTML5 tags to display text content
  • Choose and configure HTML5 tags to display graphics
    • When, why, and how to use Canvas; when, why, and how to use scalable vector graphics (SVG)
  • Choose and configure HTML5 tags to play media
    • Video and audio tags
  • Choose and configure HTML5 tags to organize content and forms
    • Tables, lists, sections; semantic HTML
  • Choose and configure HTML5 tags for input and validation

Preparation resources

Format the user interface by using Cascading Style Sheets (CSS) (20–25%)

  • Understand the core CSS concepts
    • Separate presentation from content (create content with HTML and style content with CSS); manage content flow (inline versus block flow); manage positioning of individual elements( float versus absolute positioning); manage content overflow (scrolling, visible, and hidden); basic CSS styling
  • Arrange UI content by using CSS
    • Use flexible box and grid layouts to establish content alignment, direction, and orientation; proportional scaling and use of “free scale” for elements within a flexible box or grid; order and arrange content; concepts for using flex box for simple layouts and grid for complex layouts; grid content properties for rows and columns; use application templates
  • Manage the flow of text content by using CSS
    • Regions and using regions to flow text content between multiple sections (content source, content container, dynamic flow, flow-into, flow-from, msRegionUpdate, msRegionOverflow, msGetRegionContent); columns and hyphenation and using these CSS settings to optimize the readability of text; use “positioned floats” to create text flow around a floating object
  • Manage the graphical interface by using CSS
    • Graphics effects (rounded corners, shadows, transparency, background gradients, typography, and Web Open Font Format); two-dimensional (2-D) and three-dimensional (3-D) transformations (translate, scale, rotate, skew, and 3-D perspective transitions and animations); SVG filter effects; Canvas

Preparation resources

Code by using JavaScript (30–35%)

  • Manage and maintain JavaScript
    • Create and use functions; jQuery and other third-party libraries
  • Update the UI by using JavaScript
    • Locate/access elements; listen and respond to events; show and hide elements; update the content of elements; add elements
  • Code animations by using JavaScript
    • Use animation; manipulate the canvas; work with images, shapes, and other graphics
  • Access data access by using JavaScript
    • Send and receive data; transmit complex objects and parsing; load and save files; App Cache; datatypes; forms; cookies; localStorage
  • Respond to the touch interface
    • Gestures, how to capture and respond to gestures
  • Code additional HTML5 APIs
    • GeoLocation, Web Workers, WebSocket; File API
  • Access device and operating system resources
    • In- memory resources, such as contact lists and calendar; hardware capabilities, such as GPS, accelerometer, and camera

Conclusion

All in all, this test was not bad, but perhaps a little more vigorous than expected. The materials covered had a good amount of in-depth knowledge requirement, and while I suffered a bit with the knowledge of JavaScript and managing session states of the application, I was able to break through with a score in the mid 900s. It was a good challenge, and I felt it will be helpful to me in the long run.

Web Design Concepts Certification Achieved!

Posted on Updated on

Apparently, I was in danger of having my certification lapse (Brainbench certification is only good for 3 years). Taking some time here at the end of the semester, I revisited my notes and aced this certification. I was pleased to see that HTML5 and CSS3 questions were now part of this exam. Way to update!

webdesignconcepts

HTML5 Certification Achieved!

Posted on Updated on

I learned HTML initially in East Carolina University (ECU) and University of North Carolina at Greensboro (UNCG), emerging in 1994 with a minor smattering of understanding. In 2000, I took classes at the University of Georgia (UGA) to get HTML and CSS firmly under my belt. HTML5 is a new and emerging standard for web designer. Since I teach a little of this, my HTML5 learning has all been self-taught. Getting this certification is a reflection of study and understanding of the newest upgrade to HTML. So, I determined to get my certifications with BrainBench

html5

HTML5 Certification Achieved!

Posted on Updated on

HTML5 Certification Achieved!

My training in HTML started in 1996. Stop laughing. I didn’t use it much, finding it clunky and difficult to work with. Programs like Web Warrior used some of the first WYSIWYG interfaces, but their setup was basically put together to show you what you had done, rather than allow you to design visually. Later, in 2000 I got to know Macromedia Dreamweaver 2.0 and Adobe Golive, finding GoLive to be the better of the two. That said, I took training in Macromedia Dreamweaver to get to know it better when receiving my certification in Web Design from the University of Georgia (UGA). In all honesty, I used Adobe GoLive more often, because I simply couldn’t afford a full working version of Macromedia Dreamweaver until about 2005.

Well, a lot has changed between 2012 and 2005. HTML had upgraded to HTML5 some time ago, but implementation of it is still spotty at best. That said, we have classes that teach HTML5 and my grasp on the new items such as sections, articles, headers, footers, HTML5 video and HTML5 audio were tenuous at best. This will only become more visible, more popular, and more widespread as time goes on.

As such, I had decided I would spend some time learning about HTML5 over the last few weeks, and I felt my grasp on this was good enough to seek certification. I’m glad I achieved this certification in HTML5, but I’m more glad that I understand the core concepts and specifics about this new coding style.

Tyler Dockery is certified in HTML5 coding through Brainbench.com
Tyler Dockery is certified in HTML5 coding through Brainbench.com