Web Dev… – What is Website Development? – Browsers and the DOM

View Github Repository Open presentation in a new window

ot-joe-padilla

See all presentation from ot-joe-padilla

Web Dev… – What is Website Development? – Browsers and the DOM

0 0

ot-joe-padilla.github.io

On Github ot-joe-padilla / ot-joe-padilla.github.io

Web Dev…

“or ‘Website Development,’ if, you know, you’re not into the whole brevity thing.”

– Jeffery “The Dude” Lebowski

So…

What is Website Development?

At One Technologies, Web development refers to the “front end” component of the development process.

The “Front End”

The “front end” is the client interface responsible for collecting input from the user.

The Client Interface

At “The OT,” the client interface of choice is the browser.

Browsers and the DOM

Manipulating the Document Object Model (DOM)

Imagine If You Will…

  • A web page is a model…
  • a model of a document…
  • a document that is an object
If you print out a web page, you now have a physical real world object in your hands. That object just happens to be a document. Since we aren't dealing with FAX machines, our browsers build a model of that document object digitally.

HTML and the DOM

<button id="theBtn" type="submit" class="btn-cta">View Your Scores Now</button>

HTML adds the content to the DOM.

HTML adds each element as an object on the DOM. Because each element rendered on the browser follows a standard node tree heirarchy, we are able to traverse through the DOM and manipulate those elements.

CSS and the DOM

.btn-cta {
  color: #605800;
  font-size:25px;
  font-weight: 700;
  outline: 0;
  text-shadow: 0 2px 0 rgb(255,255,255, .25);
  background: -webkit-gradient(linear,0 0,0 100%, from(#f7e621), to(#ddcc08));
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
}

CSS adds the aesthetic layer to the HTML.

Cascading Style Sheets separate the document's content from its actual presentation. Layout, colors, fonts... basically the design proposed by the creative team is actually created with the CSS.

JavaScript and the DOM

<script type="text/javascript">
// Submits the form when elements on the LP are clicked
$('#theBtn').click(function() {$('#theForm').submit();});
</script>

JavaScript adds interaction to the HTML.

JavaScript allows us to separate the document's content and presentation layers so that we can add behaviors to the document based on the interactions that happen in the browser. In this example, when a user clicks the button we created, we are able to submit the form

HTML + CSS + JavaScript

We can now create an experience for our users

So again…

What is Web Dev at “The OT?”

The 3 Masters

  • Testing/Marketing
  • Product
  • Customer Service
Your web dev team uses these technologies to support the front end endeavors for marketing's testing team, the product team and yes, even the customer service team.

Testing/Marketing

  • A/B testing,
  • adding tracking and conversion pixels,
  • testing product configurations,
  • etc…

Product

  • Member portal experiences,
  • product white labels,
  • etc…

Customer Service

  • Agent portal,*
  • etc…

* We know that portal needs a serious update. We'd love to fix it if only we can get it prioritized. :-/

Questions?