www.webdeveloper.com
Results 1 to 5 of 5

Thread: Show mockup in a Web browser

Hybrid View

  1. #1
    Join Date
    Dec 2012
    Posts
    3

    Show mockup in a Web browser

    Hello everyone,

    For my systems analysis class we need to create a mockup of a Web-based employee information system.

    What is the best software for creating a Website mockup? I found Pencil which is free and looks pretty good, but I would love to hear other suggestions.

    Once a mockup is created, what is the best way to show the mockup in an actual browser? I don't see an easy way to do this in Pencil.

    Thanks for any suggestions.

  2. #2
    Join Date
    Oct 2012
    Posts
    78
    No need to create an image of a database plan when you can use a table.
    So from what I can see you just want to make a fake table. I google'd pencil which seems to be like paint program.

    If you use the following code I made it is a very simply mock database. (Like a plan of a database).

    Code:
    <table border="1">
    	<tbody>
    		<tr>
    			<td>Employee ID</td>
    			<td>First Name</td>
    			<td>Second Name</td>
    			<td>Address</td>
    			<td>Telephone</td>
    			<td>Home Phone</td>
    		</tr>
    		<tr>
    			<td>1</td>
    			<td>Bravo</td>
    			<td>Jonny</td>
    			<td>342 Google Street</td>
    			<td>000000000</td>
    			<td>000000000</td>
    		</tr>
    		<tr>
    			<td>2</td>
    			<td>Bugs</td>
    			<td>Bunny</td>
    			<td>214 Firefox Rd</td>
    			<td>33523523535</td>
    			<td>3532523532</td>
    		</tr>
    	</tbody>
    </table>

  3. #3
    Join Date
    Dec 2012
    Posts
    3
    Thanks for the help, but really all I need to do is show the user input and output screens. Specifically, for input we need to illustrate a log in screen and a employee look up screen. Then, for output we need to show a detailed report and a summary report.

    The professor is not asking for any code, merely a mock up or "dummy" version of the web-based system.

  4. #4
    Join Date
    Oct 2012
    Posts
    78
    I think it would be better practice if you made your "mock" system in HTML. But I'm not a teacher.

    Code:
    <html>
    <head>
    </head>
    <body>
    <form method="" action="">
    <h4> Employee Login </h4>
    Username: <input type="text" name="username" size="20" /><br />
    Password: <input type="password" name="passwort" size="20" /><br />
    <p><input type="submit" value="Login" /></p></div>
    </form>
    <form>
    <form method="post" action="">
    <h4> Find Employee Records </h4>
    <textarea name="search" cols="25" rows="1">
    </textarea><br>
    <input type="submit" value="Fined Employee" />
    </form>
    </form>
    </body>
    </html>
    The above code shows a simple login system and a search box when click it would bring up employee information.
    For the output you could be lazy, just open up Microsoft access every uni/college has it. Make some fields e.g. ID(Primary), First Name...
    What ever you want in your report and use the report wizard simply print screen it and your works done. I don't see a problem in your print screening a login system or the search box either.

    To display it within a browser you will need to use code.
    Save your images. e.g. ( imageone.jpg)

    Code:
    <img border="0" src="imageone.jpg" alt="">
    You can use any software to edit images. I'd download GIMP it's free and like photoshop.

    Best of Luck.

  5. #5
    Join Date
    Dec 2012
    Posts
    3
    Thanks for your help. Since this is a systems analysis class the object is to make something that the user can look at and still be easily changed if the user is unhappy.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles