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) (click on video below)
  3. Demonstration: Use Google Chrome Inspect Element to Learn from the Experts (3:41)
  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

Languages and Tools You Should learn

Web Developer Primer for PL/SQL

 

2. Languages and Tools You Should learn

 

>> Patrick:  Just a word about the languages you have to learn in the web. I’m sure you’re all knowledgeable in this area – at least know that these languages do exist. 

 

HTML – for the structure of your pages. The building blocks in all of these languages are actually quite simple. Like in HTML, you just have an opening tag for a paragraph and a closing tag and your content goes in between. 

 

Cascading Style Sheets – the fundamental building block is an element here on the left. You can see a P here for paragraph then a named value pair going inside the curly braces. 

 

[pause]

 

JavaScript – it is the web scripting language now and it comes with a bunch of libraries, principally jQuery which saves you a lot of work, a lot of nice routines that help you out. 

 

[pause]

 

The good news in the APEX world is that all of the JavaScript libraries are actually built into the APEX framework, so you don’t have to do any ugly importation of that code. It’s all just sitting there for you waiting and ready to be used. 

 

AJAX – some people think AJAX is a language. It is not a language. It is rather a technique that is based or written in JavaScript. It stands for Asynchronous JavaScript and XML. This is the technology that is used to pass information back and forth between the browser and the backend server when you do want to do things like partial page refreshes. If you have a fairly large page and you make a trivial change to it, you really don’t want to reload the entire page from the server if you want to make your application scalable. AJAX is the ticket there and we can have a look at that in a little bit here. 

 

Now here’s the slide on the tools. The answer is that yes, most of the browsers do have some sort of web developer tool built into them. If you’re in Internet Explorer, if you press F12 their tool comes up. But I believe that the best of breed development tools are actually in Chrome and in Firefox, especially the FireBug add-in with Firefox. 

 

[pause]

 

Six months ago I was a Firefox FireBug user, and when I went to Oracle Open World this year, Shakeeb Rahman who is the APEX theme and template guru demonstrated that Chrome actually has an edge over Firefox these days. Not a big one, but a slight edge. If you’re familiar with Firefox, the jump over to Chrome is actually quite easy because their fundamental architecture is very similar. So if you can navigate one you can navigate the other. 

 

The other tool you need is a good text editor that highlights syntax because most of this technology is text-based. If you don’t have a favorite browser, I’ll have a look at NotePad++. It’s a free download. 

 

You’ll also need to know something about image manipulation in the web world. That’s beyond the scope with this course but I just want to point you towards Photoshop which is the industry standard. It’s quite expensive, a bit steep learning curve with that one. If you want something a bit lighter, Photoshop Elements is cheaper, easier to learn. Both of those products are from the Adobe Corporation. 

 

Then GIMP is an open source tool for image manipulation. There’s a bunch of others there that you can find if you Google that space.

 

 

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
×