Presentation 2


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Presentation 2

  1. 1. Team Members: Iovan Claudia Matei Gabriela Nania Mihai Popa AlexandruSpeaker: Matei Gabriela
  2. 2. About SocialX, our exercise sharing tool, is an application to e-learning of a simple reputation system to increase the student motivation and interaction, and to let them learning from each other, either by reusing others solutions or by correcting others mistakes. Moreover, students gain reputation from others reusing their solutions. The SOCIALX system allows three types of users: ● Administrators. ● Teachers-upload lectures, add exercises to topics of their lectures and “endorse” a solution by stating if its correct or wrong. ● Students-browse courses, exercises and solutions and add votes and new solutions WAD 2012
  3. 3. Objectives • The subject of this presentation is an efficient and flexible web application aimed at managing an e- learning site. It has the ability to offer users a way to learn from distance (home computer), by providing the necessary materials in a more attractive and flexible form. • It can be used by any teacher and student. It has an easy to use interface, simple, friendly and efficient at the same time, and users can easily accommodate with it. • A web application is commonly structured as a three- tiered application - Web Browsers (Presentation/ User Interface) - Engine using some dynamic Web content technology (Application Logic) - Database (Storage) WAD 2012
  4. 4. User Interface The user interface is the system which helps users communicate with the computer system and/or the application system Technologies used: - HTML (Hyper Text Markup Language) -CSS (Cascading Style Sheets) -JavaScript WAD 2012
  5. 5. Login Page Overview WAD 2012
  6. 6. Login Page– Source Code</head> .logo {<body> font-size: 50px; <div> font-family: "Brush Script MT"; <div align="right"></div> color: #FFF; <div id="logo"> height: 30px; <h1 align="justify" class="logo"><a href="#">SocialX</a></h1> font-weight: lighter; </div> top: 10px; <hr /> bottom: 10px; <!-- end #logo --><!-- end #header --> } <div id="page"> .lala { color: #238EC6; <div id="content"> font-size: 36px; <div id="page2"> text-decoration: none; <div style="clear: both; font-size: 24px;">&nbsp; } <h2 align="center" class=""><a href="#" .t { font-family: Arial, Helvetica, sans-serif;class=""><span class="lala"><em>Welcome to font-size: 18px;SocialX</em></span></a></h2> color: #238EC6; <p align="center">&nbsp;</p> } <div class="entry"> <blockquote> <p class="t"> Welcome to SocialX, our exercisesharing tool, an application to e-learning of a simple reputation system toincrease the student motivation and interaction. </p> </blockquote> </div> </div> WAD 2012
  7. 7. Register Page-Overview WAD 2012
  8. 8. Register Page- Source Code <tr> h1, h2, h3 { <th height="100" scope="col"><div align="justify"> margin: 0; <dl> <dl> text-transform: uppercase; <dt>&nbsp;</dt> font-weight: normal; <div align="right">*Username: color: #549900; <input name="textfield2" type="text" id="textfield" size="50" border-top-style: solid;maxlength="30" /> </div> border-right-style: solid; <dt>&nbsp;</dt> border-bottom-style: solid; <div align="right"> <br /> border-left-style: solid; *Email: <input name="textfield2" type="text" id="textfield" size="50" width: 800px;maxlength="30" /> height: 50px; </div> } <dt>&nbsp;</dt> <div align="right"> <br /> *Password: h1 { <input name="textfield3" type="password" id="textfield2" size="50" font-size: 36px;maxlength="30" /> </div> } <dt>&nbsp;</dt> <div align="right"> <br /> h2 { font-size: 18px; } *Confirm Password: <input name="textfield4" type="password" id="textfield4" size="50"maxlength="30" /> h3 { } </div> <dt>&nbsp;</dt> <div align="right"> </div> <dt>&nbsp;</dt> <div align="right"> </div> <div align="right"> </div> <div align="right">**About You: <input name="textfield" type="password" id="textfield3" size="50"maxlength="100" /> <dt>&nbsp;</dt> </div> </div></th> WAD 2012
  9. 9. Home Page - Overview WAD 2012
  10. 10. Home Page- Source Codediv id="menu">< #menu { <ul> float: left; width: 600px; <li><a href="home.html" class="first"> height: 90px;<li class="current_page_item"><a href="#">profile</li></a> } <li><a href="cps.html">courses </a></li> #menu ul { <li><a margin: 0;href="">Contact</a></li> padding: 20px 0px 0px 0px; </ul> list-style: none; </div> line-height: normal; <!-- end #menu --> } <div id="search"> <form method="get" #menu li {action=""> display: block; float: left; <fieldset> } <input type="text" name="s" id="search-text" size="15"/> <div onmouseover="mOver(this)" onmouseout="mOut(this)" >Home</div> <input type="submit" id="search-submit" value="GO" /> <script> function mOver(obj) </fieldset> { </form> obj.innerHTML="news page" </div> } function mOut(obj) { obj.innerHTML="Home" } </script> WAD 2012
  11. 11. Profile Page1 - Overview WAD 2012
  12. 12. Profile Page2 - Overview WAD 2012
  13. 13. Profile Page – Source Code<div class="profile" id="profile"> .profile { <p> border-top-style: double; border-right-style: double; <img src="teacher.png" alt="" align="left" border-bottom-style: double;width="217" height="182" > <b> <font size="5" border-left-style: double;>Teacher Name</p> <p><font size="3">Description: the phrase that the width: 650px;teacher introduced about himself when its registring left: 10px;</p> top: 10px; <blockquote> right: 10px; <blockquote>&nbsp;</blockquote> bottom: 10px; </blockquote> margin-top: 10px; <form id="form1" action=""> margin-right: 125px; <div align="justify"> margin-bottom: 10px; <input name="button" type="submit" margin-left: 125px;class="butoane" id="button" value="Courses" /> } <input name="button2" type="submit" .butoane {class="butoane" id="button2" value="Problems" /> font-size: 16px; <input name="button3" type="submit" color: #F60;class="butoane" id="button3" value="Solutions" /> </p> } </div> </form> </div> WAD 2012
  14. 14. Courses Page - Overview WAD 2012
  15. 15. Courses Page – Source Code<div class="abc" id="prev"> .abc { <table border-top-style: solid;width="850" height="271" border="1" align="center"> border-right-style: solid; border-bottom-style: solid; border-left-style: solid;<tr> width: 860px; height: 290px;<td height="265"><p align="justify">Course/Lectures Description</p> } .abc1 {<td width="168"><form id="form1" method="post" action=""> width: 600px; top: 10px;<p align="center"> bottom: 5px; border: medium solid #D6D6D6;<label for="select"></label>Courses List height: 300px; }<select name="select" size="5" id="select"> .abc2 { height: 300px; width: 250px;<option>Course 1</option> border-top-width: medium;</select> border-right-width: medium; </form></td> border-bottom-width: medium; </tr> border-left-width: medium; </table> border-top-style: solid; border-right-style: solid; <p>&nbsp;</p> border-bottom-style: solid; </div> border-left-style: solid; right: 690px; } WAD 2012
  16. 16. LogOut Page - Overview WAD 2012
  17. 17. Questions? WAD 2012