Upload
wingston
View
5.403
Download
0
Embed Size (px)
Citation preview
Drupal Webdesign made easyWilson Wingston [email protected]
To retrieve files, connect to “Workshop India” Adhoc wifi network.
Look for ◦Adraze
The reqiured file will be in the public folder.
Copy to desktop.Adraze/users/public/drupal workshop
welcomeIntroduction to www architecture.Technology stack.HTML/CSSPHP/MySQL
Drupal fundamentalsOpen source technology
The World Wide Web March 1989 – Tim Berners-Lee
proposed www as a web of “Hypertext Documents” to be viewed by browsers and set up within a client server architecture. URL HTTP HTML
1993 – Mosaic browser
Evolved from the need to provide a uniform method of content transfer and cataloguing over the internet.
The Address of a webpage
http://www.my-website.com?q=login#middle
Communication protocol usedftp:// - filesSmtp:// - mail
Host name. can be anything. Even NULL. Usually represents sub domain of main site.
Web site name. DNS lookup will give IP address
Query passed to web server for side server procsessing
Portion of site to show firstNot sent to server. Handled by browser
Technology Stack Server - A server is a computer which provides
information or services to other computers on a network. Operating system - The software that runs the server.
Unix, Linux, BSD, OS X and Windows are some examples. Database - A structured collection of records. Drupal
uses a database to store most content and configuration settings for your site, some content such as media files are generally stored in the server's file system.
Web server - The software component responsible for serving web pages. Examples are Apache and Microsoft IIS.
PHP - PHP is a programming language that allows web developers to create dynamic content that interacts with databases.
Drupal - A framework for building dynamic web sites offering a broad range of features and services.
Client Server Model – HTTP model
Client Server
1. Browser sends request for particular HTTP file
2. HTML file on disk sent to browser directly
Client Server Model – CGI model
ClientServer
1. Browser sends request for particular HTTP file
CGI applicati
on
2. Server finds and calls required CGI application.
3.After execution CGI app sends result to server.
4. Server sends formatted HTML back to browser
Client Server Model – Side server scripting
ClientServer
1. Browser sends request for particular HTTP file with scripts embedded in it.
Database
2. Server reads scripts embedded & executes them.4. Server sends formatted
HTML back to browser
3. Database for storage & retrieval of data as defined in script.
Developing for the webWeb developers will need have interdisciplinary skills / roles
Information architecture
web usability, accessibility and search engine optimization
Project management, QA and other aspects common to IT development in general
The Web we know now, which loads into a browser window in essentially static screenfulls, is only an embryo of the Web to come. [...]The Web will be
understood not as screenfulls of text and graphics but as a transport mechanism, the ether through which interactivity happens. It will [...] appear on your
computer screen, [...] on your TV set [...] your car dashboard [...] your cell phone [...] hand-held game
machines [...] maybe even your microwave oven
Web 2.0The term "Web 2.0" was coined in 1999.
Darcy DiNucci in her article "Fragmented Future,"
Web 2.0 Fundae•Finding information through keyword search.
Search
•Connects various bits of information together into a meaningful information ecosystem using the model of the Web,
Links
•The ability to create and update content leads to the collaborative work of many rather than just a few web authors.
Authoring
•Categorization of content by users adding one-word descriptions to facilitate searching, without dependence on pre-made categories.
Tags
•Software that makes the Web an application platform as well as a document server.
Extensions
•The use of syndication technology such as RSS to notify users of content changes.
Signals
Web Technologies – client side
•Hyper Text Transfer Protocol•Maintained by W3C [world wide web consortium]HTML•Dynamic HTML to create interactive elements like menu and rollover buttons.DHTML•Describes the presentation schematics of content in a markup language. CSS
•eXtensible Markup language.•Representation of arbitrary data structures XML•Extends and improves upon HTML with XMLXHTML
Web Technologies – client side
•adds animation and interactivity to web pages. Flash•Client side scripting language for enhanced user interface and dynamic web pages.Javascript•Platform for creating rich applications running on a variety of devices.JavaFX•Integrates multimedia, graphics, animation and interactivity into a single package.Silverlight•Asynchronous JAVA and XMLAJAX•Automation tool allowing web pages to run applications on client side windows computers.Vbscript
Web Technologies – Server side
•Active Server Pages on .net infrastructure.ASP.net•Commercial database control scripting language.Coldfusion•Powerful database and scripting language for UNIXCGI/Perl•Cross platform application developmentJava•Hypertext PreprocessorPHP•Open source scripting languagePython
Web Technologies - Databases
•Java Relational database management system embeddable into java applicationsApache Derby
•IBM RDBMS – accessed by SQLDB2•Embedded database processing solutionsOracle•Open source Objetct-RDMBSPosegreSQL
•RDBMS most popularly used in web application in conjuction with PHP.MySQL
Web application frameworks
•Open source toolkit to allow development of high end javascript apps in Java.
Google web toolkit
•AJAX application development in python. Port of GWT.
Pyjamas/web2py
•Eases creation of complex database driven websites.Django
•CMS written in PHP that allows website development for non-programmers.Drupal•Another CMS like drupal.Joomla
Choosing the Right Tools
Understanding your needs.
Understanding the capabilities and limitations of various technologies.
Implementation. []
My FavoritesDjango - high-level Python Web framework
that encourages rapid development and clean, pragmatic design. Mostly for “high powered” applications.
Drupal - free and open source Content Management System (CMS) written in PHP
C# .net – too cool IDE and MSDN help references. Best for C users who don’t want to bother with PHP or python.
About Drupal.More CMF than CMS
Balance between “specific tasks” and “ manageable abstraction”
Generalized approach to core systems that allow you to tweak as much as possible for clever customized site functions.
Programming on a need-to-do basis only.
Time investment needed.
Drupal – languages usedHTML – basics of any web
framework.
PHP – the code base of drupal
SQL – database management routines
CSS – theming the looks
HTMLborn from desire to separate
structure from presentation. [SGML]
<tag open> </tag close> ; anything in these tags are commands to browser.
At its core, HTML is just text linking to other text.
Document type definition <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
The document’s top tag level is HTML.
The document adheres to the formal public identifier (FPI) “W3C HTML 4.01 Strict English” standards
The full DTD can be found at the URL http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd.
Overall structure<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta ... meta tags go here ... >
<title>title of the page/document goes here</title>
<LINK rel=“stylesheet” href=“external style sheet name”
type=“text/css”>
<style>
... any document specific styles go here ...
</style>
Overall structure<script>
... client-side scripts go here ...
</script>
</head>
<body>
... body of document goes here, paragraphs modified by
block elements, characters, words and sentences modified by
in line elements ...
</body>
</html>
Basic elements•Formatted paragraphs<p>•Headings<h1> through <h6>
•Quoted text<blockquote>
•Preformatted text<pre>•Unnumbered, ordered, and definition lists<ul>,<ol>, <dl>
•Centered text<center>•A division of the document<div>
Styles<html><head><style>
.redline { color:red; text-decoration:line-through; }
</style></head><body><h1>An Example of style usage</h1><p> If its required to say, change a part of text, red and with a a
strike through, you might be tempted to use <font> tags and a <del> tag.. This is not appreciated in the new HTML 4 standard. Instead, we create a style and then apply the style as <span class=“redline”>to this portion of the text, now this part between the span tags has the style applied</span>
</p></body></html>
In main HTML page<html>
<head>
<LINK rel=“stylesheet” href=“site-styles.css” type=“text/css”>
</head>
<body> ...
In site-styles.css.redline
{ color:red;
text-decoration:line-through;
}
Linking<a href=“http://www.linkhere.com”> click
here</a>
◦Links to external site
<a href=“#jmp2”> jump here</a><a name = “jmp2”> jump space 2</a>
◦Links to Internal Bookmark
Things to rememberUse <!doctype>Nest element tags properly.
◦ <p>The last word is <b>bold</b></p>Tags are case sensitiveAll elements must be terminated
This is one paragraph<p>This is another paragraph<p> <p>This is one paragraph</p><p>This is another
paragraph</p>
Any empty tag must have a closing tag or the opening tag must end with a slash (/). ◦ <br />
Comment code </table> <!-- /Top heading --> </table> <!-- /Main body --> </table> <!-- /Floating page -->
PHPHypertext preprocessorAwesome language with its
fundamentals in CMost common language for web
applications. [facebook, amazon, youtube.]
PHP Code is embedded within HTML code by <?php> </php>
Secure, customizable, operating sys independent.
Web Server Processing of PHP The Web server starts scanning the file in
HTML mode. It assumes the statements are
HTML and sends them to the browser without
any processing.
The Web server continues in HTML mode
until it encounters a PHP opening tag
(<?php).
When it encounters a PHP opening tag, the
Web server switches to PHP mode. This is
sometimes called escaping from HTML.
The Web server then assumes that all statements
are PHP statements and executes
the PHP statements. If there is output, the
output is sent by the server to the browser.
The Web server continues in PHP mode
until it encounters a PHP closing tag (?>).
When the Web server encounters a PHP
closing tag, it returns to HTML mode. It
resumes scanning, and the cycle continues
from Step 1.
How PHP works.
<?php echo “<p>Hello World”; ?>
<p>Hello World
PHP code in original HTML document
What is sent to browser
$number = 2;$number = 2+1;$number = (2 - 1) * (4 * 5) -17;$number2 = $number + 3;$string = “Hello World”;$string2 = $string.” again!”;
Sample PHP
<html><head><title>Hello World Program</title></head><body><p>Hello World!</body></html>
<html><head><title>Hello World Program</title></head><body><?phpecho “<p>Hello World!”?></body></html>
PHP code for table from 2D arrayecho “<table border=1>”;foreach( $productPrices as $category ){
foreach( $category as $product => $price ){
$f_price = sprintf(“%01.2f”, $price);echo “<tr><td>$product:</td><td>\$$f_price</td></tr>”;
}}echo “</table>”;
Integration of RDMBS
PHP – Application code base.
MySQL – Data storage mechanism
Data storage solutions must always be mindful of the security issue.
MySQL can store complicated information reliably and securely.
PHP can do elegant manipulation of data.
Together, they prove an invaluable tool for open source developers to develop sophisticated web applications.
Both PHP and MySQL are under constant development and appraisal.
MySQLSELECT (lastName,firstName FROM
MemberWHERE lastName LIKE “B%”AND city = “Chennai”AND (phone LIKE “%8%” OR fax LIKE
“%8%”)
Understanding Drupal
5) Template
4) User Permissions
3) Blocks and Menu’s
2) Modules
1) Nodes
NodesNodes are the data pool.
Everything is a node in drupal.
Nodes are just pieces of content – page, story, image, text, poll, comment, etc etc
Most basic “token” of drupal.
ModulesModules are functional plug-ins that are
either part of the Drupal core (ship with Drupal) or they are contributed items that have been created by members of the Drupal community for various tasks.
Easily create your own modules for small tasks.
Drupalmodules.org
Blocks and MenusBlocks often provide the output
from a module or can be created to display whatever you want, and then can be placed in various spots in your template (theme) layout.
Highly configurable output control.
User PermissionsThis is where settings are
configured to determine which things different user types have access to.
Permissions are assigned to various roles, and in turn, users are associated with those various roles in order to grant them the associated permissions.
Site TemplateThis is made up predominately of
XHTML and CSS, with some PHP tokens sprinkled throughout to insert content from the system into the correct spots
Overridable theme functions to give complete control for how modules generate markup [HTML].
When NOT to use DrupalOnly a blog? Use wordpress.
Need a blog with extra features like ecommerce, galleries, user interaction – go Drupal.
Only a wiki? Use mediawiki.
Only a Forum? Use phpBB.
When u NEED DrupalFlexibility - easily add cool extendable
features.
Interaction with other sites.
Complex forms or workflows.
Organize and display lists of information on a per-user basis.
Custom functionality.
Security issues. Security always depends on good
maintenance.
Constantly update all modules and Drupal core to highest release version.
Subscribe to Drupal Security mailing list. It actually helps.
GPL Incidentally, the GPL is not tied specifically to Drupal;
rather Drupal makes use of the GPL, which is a kind of generic license for distributing open-source software
The way things work is that the software is copyrighted, and then licensed, for everyone to use freely.
anyone who makes use of this software cannot create proprietary software from it.
the only time you do need to worry about the niceties of the GPL is when you decide to set up a business installing, configuring, and customizing Drupal websites for money, or modifying, and redistributing the original source code.
Who’s using drupal?http://appel.nasa.gov/http://www.whitehouse.gov/http://www.economist.com/http://www.grammy.com/http://harvardscience.harvard.edu/http://ubuntu.com/http://spreadfirefox.com/http://liptongreenmint.ro/http://nikemedia.com/
Who’s using drupal?