8,288
edits
Changes
no edit summary
<noinclude>
<noinclude>
[[Category:Feature Page Incomplete]]
[[Category:Feature Page Incomplete]]
[[Category:Feature|.]]
[[Category:Feature|Develop Web]]
<!-- You can add categories to tie features back to real deployments/schools requesting them, for example
<!-- You can add categories to tie features back to real deployments/schools requesting them, for example
[[Category:Features requested by School Xyz|<Feature Name>]] (the |Feature Name option sorts the entry on the category page under the first letter of <Feature Name>). -->
[[Category:Features requested by School Xyz|<Feature Name>]] (the |Feature Name option sorts the entry on the category page under the first letter of <Feature Name>). -->
<b>Features:</b>
<b>Features:</b>
* <b>IDE:</b> This will be an Integrated Development Environment(IDE) where toolbars will be presented with HTML components on it. Thus providing drag-drop feature for creating HTML pages just by dragging HTML components on canvas. The drag-drop operation on canvas will generate HTML markup in the backgroud and save to the file
* <b>IDE:</b> This will be an Integrated Development Environment (IDE) where toolbars will be presented with HTML components on it. Thus providing drag-drop feature for creating HTML pages just by dragging HTML components on canvas. The drag-drop operation on canvas will generate HTML markup in the backgroud and save to the file.
* <b>Modes of Operation:</b> It will support three modes-
* <b>Modes of Operation:</b> It will support three modes-
<b>(a)Design Mode:</b> In this mode, children can create HTML pages on the fly using drag-drop feature. The HTML components will be visible on canvas with re-sizing border. Double clicking on any HTML component will bring up its properties loaded into "Properties" window(Shown right below toolbar in screen mockup)
<b>(a) Design Mode:</b> In this mode, children can create HTML pages on the fly using drag-drop feature. The HTML components will be visible on canvas with re-sizing border. Double clicking on any HTML component will bring up its properties loaded into "Properties" window (Shown right below toolbar in screen mockup).
<br/>
<br/>
<b>(b)Source Mode:</b> In this mode, children can create HTML pages by writing the HTML markup by themselves. As in writing the Source code.
<b>(b) Source Mode:</b> In this mode, children can create HTML pages by writing the HTML markup by themselves, as in writing the Source code.
<br/>
<br/>
<b>(c) Publish Mode:</b> In this mode, children can view the page as it will appear when published. Support for view the HTML page within the activity.i.e. opening the resultant HTML page within same activity in this mode.
<b>(c) Publish Mode:</b> In this mode, children can view the page as it will appear when published. Support for view the HTML page within the activity.i.e. opening the resultant HTML page within same activity in this mode.
* <b>Tabbed Canvas</b>: Multitab feature where several pages can be edited simultaneously.
* <b>Tabbed Canvas</b>: Multitab feature where several pages can be edited simultaneously.
<b>Flow:</b> The flow will be like this: User starts with a new document. A 'New' document will be a new tab in multi-tabbed widget with a canvas as its child. Then the user can proceed in any of two development modes(design and source). Consider the design mode first. The user can create HTML pages on the fly by drag-drop the HTML component on to the canvas. This will bring up the component on canvas and at the same time the resulting HTML markup for entire document will be saved to file( if it is already saved) or to a temp file( if it is not yet saved by user). This mode provides quickest way to create HTML pages. The HTML components listed in toolbar will consists of TextBox, Checkbox, Paragraph, Headings, Tables, Radio button and other HTML markups currently in use. Now consider the source mode. In this mode the user can view the HTML markup. He can write HTML markup on his own in this mode. This will be beneficial for children to practice creating pages once they have idea of structure of markup of HTML components.
<b>Flow:</b> The flow will be like this: User starts with a new document. A 'New' document will be a new tab in multi-tabbed widget with a canvas as its child. Then the user can proceed in any of two development modes (design and source). Consider the design mode first. The user can create HTML pages on the fly by drag-drop the HTML component on to the canvas. This will bring up the component on canvas and at the same time the resulting HTML markup for entire document will be saved to file (if it is already saved) or to a temp file (if it is not yet saved by user). This mode provides quickest way to create HTML pages. The HTML components listed in toolbar will consists of TextBox, Checkbox, Paragraph, Headings, Tables, Radio button and other HTML markups currently in use. Now consider the source mode. In this mode the user can view the HTML markup. He can write HTML markup on his own in this mode. This will be beneficial for children to practice creating pages once they have idea of structure of markup of HTML components.
Children can switch between Design, Source and Publish modes to view page in different perspective.
Children can switch between Design, Source and Publish modes to view page in different perspective.
== Scope ==
== Scope ==
Tasks to develop this activity( at high level; these can be broken down into several tasks):
Tasks to develop this activity (at high level, these can be broken down into several tasks):
* Identify the requirements, features to design and implement.
* Identify the requirements, features to design and implement.
* Design the User Interface.
* Design the User Interface.
* Code and test unit functionality like individual features i.e design mode, source mode and publish mode.
* Code and test unit functionality like individual features, i.e., design mode, source mode and publish mode.
* Create properties windows.
* Create properties windows.
* Write functionality to save and load the HTML, JavaScript files.
* Write functionality to save and load the HTML, JavaScript files.
Design Mode:
Design Mode:
This image shows the mockup of screen in Design Mode. On left hand side there is a toolbar consisting of HTML components from where children can drag and drop them on to canvas on the right hand side. 'Canvas' is the region within a tab where HTML components are placed. In this mode the canvas provides ability to move, and reorder the HTML components through mouse itself.
This image shows the mockup of screen in Design Mode. On the left side, there is a toolbar consisting of HTML components from where children can drag and drop them on to the canvas on the right side. 'Canvas' is the region within a tab where HTML components are placed. In this mode the canvas provides the capability to move, and reorder HTML components with the mouse.
[[File:DevelopWeb_DesignMode.jpg]]
[[File:DevelopWeb_DesignMode.jpg|800px]]
The HTML component can be re-sized within canvas by mouse. However, the properties of component needs to be changed through "Propeties Window" that pops up on double clicking the HTML component.The following screen shows how the component properties and their values will be shown.
The HTML component can be re-sized within canvas by mouse. However, the properties of component needs to be changed through "Properties Window" that pops up on double clicking the HTML component. The following screen shows how the component properties and their values will be shown.
[[File:DevelopWeb_PropertiesWindow.png]]
[[File:DevelopWeb_PropertiesWindow.png|800px]]
Source Mode:
Source Mode:
This image shows the mockup of screen in Source Mode.
This image shows the mockup of screen in Source Mode.
[[File:DevelopWeb_SourceMode.jpg]]
[[File:DevelopWeb_SourceMode.jpg|800px]]
Publish Mode:
Publish Mode:
This image shows the mockup of screen in Publish Mode. The page appears as it is viewed in web browser(i.e. Browse activity)
This image shows the mockup of screen in Publish Mode. The page appears as it is viewed in web browser (i.e., Browse activity)
[[File:DevelopWeb_PublishMode.jpg]]
[[File:DevelopWeb_PublishMode.jpg|800px]]
== Sharing ==
== Sharing ==