Back

Web Development Tips for PL/SQL Programmers

How Does a PL/SQL Programmer Get Started with Web Development?

Learn FireFox’s Firebug or Chrome’s developer tool, HTML, CSS, DOM, AJAX, and JavaScript

Are you an expert server side software developer who needs to migrate to a browser based environment like Oracle Application Express (APEX)? Then this free tutorial is for you; it will help you to “break the back” on the somewhat steep learning curve that is required when you start learning how to effectively use client side browser tools like FireFox’s Firebug and Chrome’s developer tool. APEX expert and author Patrick Cimolini leads you, step by step, from a simple “hello world” web page to some real-world APEX pages; showing you along the way how to use the browser tools to inspect, test, and debug your HTML, CSS, DOM, AJAX, and JavaScript code.

The tutorial introduces the audience to the important browser development tools that are required in order to take advantage of the web’s browser based environment. Students are shown how to analyse and debug a web page by using the development tools that are built into the FireFox and Chrome browsers. The webinar starts with a simple “hello world” web page and then progresses, step by step, into real-world APEX pages where HTML, CSS, DOM, AJAX, and Javascript must be inspected, tested, and debugged. We’ll de-mystify the web tools and help you achieve a level of comfort and confidence when working with the client side web tools.

This free training is segmented into several separate lessons:

  1. Introduction & Agenda (2:11)
  2. Languages and Tools You Should learn (4:03)
  3. Demonstration: Use Google Chrome Inspect Element to Learn from the Experts (3:41) (click on video below)
  4. Using Hello World to Learn Chrome’s Inspect Element Tool (4:39)
  5. Adding CSS to Hello World (The Class and ID Selectors) (2:47)
  6. Demonstration: Adding CSS (5:56)
  7. A Word About Webkit (1:58)
  8. Introduction to and Debugging JavaScript (2:43)
  9. Demonstration: Debugging JavaScript (5:37)
  10. Inspecting AJAX Network Traffic (7:33)
  11. Oracle APEX Example: Borrowing HTML Elements from Existing Pages (8:41)
  12. CSS in APEX (1:37)

Date: Dec 17, 2013

For more Web Development Training see out HTML5, CSS3 and JavaScript class.

NOTE: Some corporate firewalls will not allow videos hosted by YouTube.


Transcript

Demonstration: Use Google Chrome Inspect Element to Learn from the Experts

Web Developer Primer for PL/SQL

 

3. Demo: Use Chrome Inspect Element to Learn from the Experts

 

>> Patrick:  Let’s go to something like RoyalBank.ca. That’s the bank I deal with up here in Canada. As you can see, this is a very conservative website. But it has been put together by people who are experts at web development and these people are trying to sell you a lot of products that they’ve put a lot of time and effort on to this. You can use the web development tools to actually see how this page is constructed. 

 

Here we have a little menu here that says, “You are now in personal banking and business banking.” If you want to see how that’s actually built you can actually right-click on it. There’s an inspect element menu option down here. If we click on that, lo and behold, the Chrome development tool comes up. 

 

As you can see, it’s kind of busy. There’s lots of stuff here. There’s HTML here and Cascading Style Sheet over here. You could see here I’ve just highlighted this h2 which is the “you are now in” option. You can see that they’ve put unordered list below that to contain the list items. There’s a list item here for personal banking. 

 

Then over here on the right you can see how it’s actually styled. Font white bold, that has a little bit of effect. You could see that personal banking is clicking on and off if you look up here where it says “personal banking.” I can make that change here in real time. You can see the background color changing. Margin, it didn’t have any effect. Padding, you can see that has effect. 

 

The point is you can come into these professionally built websites and actually see how they’re constructed using these tools that we’re going to show you today. So let’s just put that down. 

 

[pause]

 

So you can go to a very conservative site like this to inspect how the pros do it. I could show you something that’s kind of interesting here that I found actually on Twitter. A friend of mine actually put a link to this site up. 

 

You can see down here in the lower corner, Chris Ruppel has a blog and website and what not. He does all sorts of weird and wonderful stuff with Cascading Style Sheet. If you want to look at bleeding edge – I’m just going to press my right arrow key and you can see this unfolding the box model. 

 

[pause]

 

This is kind of fancy stuff. This is bleeding edge stuff that is being done by somebody just with care and love. It shows you really fancy stuff. If I right-click on this, you could actually inspect this type of thing. Again, could I handle on exactly what Chris is doing here? He is sharing this on his blog. You can either go to an existing production website to get an idea of how to build things, or you can monitor things like Twitter and the various blogs to see what people are doing and find all sorts of inspiration for your own webpages.

 

Copyright SkillBuilders.com 2017

×
Free Online Registration Required

The tutorial session you want to view requires your registering with us.

It’s fast and easy, and totally FREE.

And best of all, once you are registered, you’ll also have access to all the other 100’s of FREE Video Tutorials we offer!

 

×
Podcast
×