Scribd Logo
Upload

Welcome to Scribd!

  • Web Development - MeenteCo

    Uploaded by

    Masoom 'Meente' Tulsiani
    17 views96 pages
    Web services are typically application programming interfaces (API) or web APIs that are accessed via Hypertext Transfer Protocol (HTTP) Any application can have a Web Service component.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Web services are typically application programming interfaces (API) or web APIs that are accessed via Hypertext Transfer Protocol (HTTP) Any application can have a Web Service component.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    17 views96 pages

    Web Development - MeenteCo

    Uploaded by

    Masoom 'Meente' Tulsiani
    Web services are typically application programming interfaces (API) or web APIs that are accessed via Hypertext Transfer Protocol (HTTP) Any application can have a Web Service component.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 96

    Web 2.

    0
    Development
    www.meenteco.com

    What is a Web Service?

    Web Services
    Web services are typically application programming interfaces (API) or Web APIs that are accessed via Hypertext Transfer Protocol (HTTP). Web API is typically a defined set (HTTP) request messages usually expressed in an Extensible Markup Language (XML) or JavaScript Object Notation (JSON) format. Any application can have a Web Service component. Examples of Web Service are Gmail Google Docs Dropbox

    Languages
    HTML/CSS JAVASCRIPT PHP AJAX JSON - (JavaScript Object Notation)

    Tools
    Dreamweaver Photoshop Web Server - WAMP Notepad++ Browser Firebug Extension FTP Client

    Web Development Life Cycle


    Requirement Gathering from Client

    Creating a PSD Design with Layers

    Converting PSD to HTML/CSS Template

    Adding Dynamic Code with PHP

    Platforms for developing web applications

    Microsoft ASP.NET Backend: SQL Server Requirements: Windows Hosting, IIS, Visual Studio IDE, ASP.Net framework

    Open Source LAMP PHP - Facebook Python Ruby on Rails Twitter Back end: MySQL Requirements: Linux Hosting, Apache

    Steps in Hosting a Website Online 1. Buy a Domain from a Domain Registrar like GoDaddy.com 2. Buy Web Space from a hosting company like hostgator.com, bluehost.com etc. 3. Use a FTP Client to transfer files from your computer to the server

    Steps in Deploying website locally 1. Install WAMP on your localhost to run PHP 2. Save your php files in the /www folder inside WAMP 3. Turn on your WAMP Server 4. Type http://localhost:8080 (Port no. may differ)

    How many of you know HTML?

    HTML Standards HTML 4.01 Accepted W3C Standard

    HTML 5 latest version Dynamic

    Demo 1 HTML

    Basic HTML Structure <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> </head> <body> ... </body> </html>

    Demo 2

    Demo of HTML5 & jQuery http://demos.9lessons.info/geo2.html

    How can I give styling to HTML?

    CSS

    CSS Styling
    Sandbox Simulator Demo On http://cssdesk.com/ create rounded corners with CSS

    four rules of being an awesome web programmer

    efficient code maintainable code modular code hack-free code

    Writing efficient CSS

    Use external style sheets instead of inline or header styles.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> </head> <body> <p style="color: red"> ... </p> </body> </html>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> < /head> <body> ... </body> </html>

    Use link rather than @import for IE & NN4

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <style type="text/css" media="screen"> @import url("styles.css");</style> </style> </head> <body> ... </body> </html>

    Good::

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> </head> <body> ... </body> </html>

    Use inheritance

    body { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }

    Use multiple selectors

    Inefficient::

    h1 { color: #236799; h2 { color: #236799; h3 { color: #236799; h4 { color: #236799;

    } } } }

    Efficient::

    h1, h2, h3, h4 { color: #236799; }

    Use multiple declarations

    Efficient::

    Use shorthand properties

    Inefficient::

    body { font-size: 85%; font-family: arial, helvetica, sans-serif; background-image: url(image.gif); background-repeat: no-repeat; background-position: 0 100%; margin-top: 1em; margin-right: 1em; margin-bottom: 0; margin-left: 1em; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-style: solid; border-width: 1px; border-color: red; color: #222222;

    Efficient::

    body { font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0; padding: 10px; border: 1px solid red; color: #222; }

    Demo: CSS & jQuery

    DEMO : Facebook Timeline Design & Update Status using Jquery

    So, how can you make your CSS easier to understand for people who maintain your website?

    Writing maintainable CSS

    Place a time stamp, author and notation at top of CSS files.

    /* --------------------------------Site: Site name Author: Masoom Tulsiani Updated: Date and time Updated by: Name --------------------------------*/

    Include global color notation

    /* --------------------------------COLORS Body background: Container background: Main Text: Links: Visited links: Hover links: H1, H2, H3: H4, H5, H6: --------------------------------*/

    #def455 #fff #333 #00600f #098761 #aaf433 #960 #000

    Use meaningful names for IDs & classes

    Not good::

    .green-box { ... } #big-text { ... }

    Better::

    .pullquote {... } #introduction {... }

    Group related rules

    #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } #header a#skip { ... } #navigation #navigation #navigation #navigation #navigation { ... } ul { ... } ul li { ... } ul li a { ... } ul li a:hover { ... }

    #content { ... } #content h2 { ... } #content p { ... } #content ul { ... } #content ul li { ... }

    Add clear comments to your CSS files

    /* --------------------------------header styles --------------------------------*/ #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } /* --------------------------------navigation styles --------------------------------*/ #navigation { ... }

    OK, how can you manage your CSS across an entire site?

    Modular CSS

    An example: Your HTML pages are linking to a master CSS file


    HTML files Master CSS file

    Step 1 Separate into individual files


    container.css

    HTML files

    header.css

    content.css

    Why separate CSS files? Its easier to find rules. You can also serve specific CSS files to pages.

    Step 2 Add a bridging CSS file

    HTML files

    Bridging CSS file

    Why add a bridging file? You can add or remove files as needed without changing the HTML.

    Step 3 Link to bridging file

    HTML files

    Bridging CSS file

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="bridging.css" type="text/css media="screen, projection"> </head> <body> ... </body> </html>

    CSS Best Practises

    Step 4 Import CSS into bridging file


    HTML files Bridging CSS file

    @import header.css; @import content.css; @import footer.css;

    Recap?

    HTML files

    Bridging CSS file

    header

    nav Home bridge1 footer

    home

    large sites have lot of content.

    CMS

    One of our biggest challenges is managing content

    Solve the problem using content management systems.

    CMS Maintains multiple themes & has third party components which can be Integrated!

    So how do you solve the problem?

    Companies are making use of content management systems made using MVC.

    What is a content management system?

    CMS Systems Joomla Drupal Wordpress Magento

    Why should we use server side scripting?

    PHP

    PHP Powerful Server Side Scripting Lang. Used Widely with MYSQL For Web Applications Syntax:
    <?php //on//and //off ?>

    Installed PHP on Localhost

    Download WAMP http://www.wampserver.com/en/ - Allows you to run Apache Server/PHP/MySQL on Windows

    hello.php

    <html> <head> <title>PHP Test</title> </head> <body> <?php echo '<p>Hello World</p>'; ?> </body> </html>

    DEMO LOGIN USING PHP & Jquery <?php if($_POST) { $email = $_POST['email']; $password = $_POST['password']; $newpassword = $_POST['newpassword']; if($_POST['password'] && $_POST['email']) { $sql=mysql_query("SQl select statement"); echo "Login success"; } else if($_POST['newpassword'] && $_POST['email']) { $sql=mysql_query("SQl Insert values statement"); echo "Registration Success"; } } ?>

    Javascript code <script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#signup').click(function() { $('#password').val(''); $('#login_block').hide(); $('#signup_block').show(); }); $('#login').click(function() { $('#newpassword').val(''); $('#signup_block').hide(); $('#login_block').show(); }); }); </script>

    Web Development Career Opportunities

    User Interface Designer/UX Web Programmer LAMP/ ASP.Net Backend Programmers MySQL Graphic Designers

    Finally the HTML Code <form method="post" action="loginup.php"> <div> <label>Email</label> <br/> <input type="text" name="email"/><br /> <input type="radio" name="choose" id="login" checked="checked"/> I have an account <br /> <input type="radio" name="choose" id="signup"/> I am new!<br /> </div> <div id="login_block"> <label>Password</label><br /> <input type="password" name="password" id="password"/><br/> <input type="submit" value=" Login "/> </div> <div id="signup_block" style="display:none"> <label>Choose password</label><br/> <input type="password" name="newpassword" id="newpassword" /><br/> <input type="submit" value=" Signup "/> </div> </form

    DEMO: Instant Search with Jquery and Ajax (Auto Suggestor) JSON File Javascript Code CSS

    Important Links W3Schools Source Forge Stack Overflow Github MSDN

    Web Development Career Opportunities

    User Interface Designer/UX Web Programmer LAMP/ ASP.Net Backend Programmers MySQL Graphic Designers

    Contact me www.masoom.us www.meenteco.com


    Email:info@meenteco.com Twitter: @CloudJedi_

    Questions?

    You might also like