Features/Develop Web - Revision history

Godiard at 12:11, 18 July 2014

2014-07-18T12:11:36Z

← Older revision		Revision as of 08:11, 18 July 2014
Line 1:		Line 1:
	<noinclude>		<noinclude>
	[[Category:Feature Page Incomplete]]		[[Category:Feature Page Incomplete]]
	[[Category:~~Feature~~\|Develop Web]]		[[Category:FeatureRejected\|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>). -->
Line 8:		Line 8:
	We also request that you maintain the same order of sections so that all of the feature pages are uniform. -->		We also request that you maintain the same order of sections so that all of the feature pages are uniform. -->
	<!-- The actual name of your feature page should look something like: Features/Your Feature Name. This keeps all features in the same namespace -->		<!-- The actual name of your feature page should look something like: Features/Your Feature Name. This keeps all features in the same namespace -->
			== Rejected ==

			This is a process to discuss Sugar Fetures. Activities (as Develop Web) can be developed without need follow this process.

	== Summary ==		== Summary ==
	'''DevelopWeb''' is an Activity for Web Development using which children can develop Web Sites through HTML, Javascript and other web technologies. Children can learn quickly how to develop web pages in a step by step approach through examples provided for each HTML component.		'''DevelopWeb''' is an Activity for Web Development using which children can develop Web Sites through HTML, Javascript and other web technologies. Children can learn quickly how to develop web pages in a step by step approach through examples provided for each HTML component.

FGrose: FGrose moved page Features/DevelopWeb to Features/Develop Web: deCamelCase

2013-11-05T20:20:00Z

FGrose moved page Features/DevelopWeb to Features/Develop Web: deCamelCase

← Older revision	Revision as of 16:20, 5 November 2013
(No difference)

Kartik kumar perisetla: /* Timeline */

2012-12-17T11:48:12Z

Timeline

Kartik kumar perisetla at 11:46, 17 December 2012

2012-12-17T11:46:12Z

@@ Line 77: / Line 77: @@
 [[File:DevelopWeb_PublishMode.jpg|800px]]
-== Sharing ==
+==Collaboration==
-The best and fun part of this activity could be that children can share the web pages they created within this activity. In spite of using the bulletin board, children can just share the page from within the activity.
+The best and fun part is collaborative work with this activity. Children can form teams and can develop their web site or web application simultaneously from different places.Children can share the web pages they created within this activity. In spite of using the bulletin board, children can just share the page from within the activity. Also, In future scope we are planning to include a small server component that will be used to host the web site/application. Thus children can host their application and make it live to be accessible by others. This server component will be useful at places where there is no internet to serve content.
 ==Future Scope==

FGrose at 20:26, 25 August 2012

2012-08-25T20:26:03Z

← Older revision		Revision as of 16:26, 25 August 2012
Line 1:		Line 1:
	<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>). -->
Line 31:		Line 31:

	<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.
Line 41:		Line 41:
	* <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.
Line 50:		Line 50:

	== 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.
Line 62:		Line 62:

	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 ==

Kartik kumar perisetla at 12:53, 25 August 2012

2012-08-25T12:53:36Z

← Older revision		Revision as of 08:53, 25 August 2012
Line 77:		Line 77:
	[[File:DevelopWeb_PublishMode.jpg]]		[[File:DevelopWeb_PublishMode.jpg]]

	== ~~Scope~~ ==		== Sharing ==
	The best and fun part of this activity could be that children can share the web pages they created within this activity. In spite of using the bulletin board, children can just share the page from within the activity.		The best and fun part of this activity could be that children can share the web pages they created within this activity. In spite of using the bulletin board, children can just share the page from within the activity.

Kartik kumar perisetla at 15:56, 24 August 2012

2012-08-24T15:56:58Z

← Older revision		Revision as of 11:56, 24 August 2012
Line 77:		Line 77:
	[[File:DevelopWeb_PublishMode.jpg]]		[[File:DevelopWeb_PublishMode.jpg]]

			== Scope ==
			The best and fun part of this activity could be that children can share the web pages they created within this activity. In spite of using the bulletin board, children can just share the page from within the activity.

			==Future Scope==
			* The future work can include support for HTML 5 widgets. Once we are ready with base version of this Activity we can definitely add these.
			* Support for deployment to server can be provided where user can select server to FTP files created through this activity.
			* Support to allow multiple users working on same web project(or website)- editing different pages or parts to complete it in collective manner- This will enhance teamwork and encourage collective working environment.
			* To make it more interesting, we can include a small server component that will serve the web pages created through this activity. Children can then directly host the pages by hitting a button in this activity.

Kartik kumar perisetla at 15:48, 24 August 2012

2012-08-24T15:48:09Z

← Older revision		Revision as of 11:48, 24 August 2012
Line 5:		Line 5:
	[[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>). -->
	</noinclude>		</noinclude>

	<!-- All fields on this form are required to be accepted.		<!-- All fields on this form are required to be accepted.
	We also request that you maintain the same order of sections so that all of the feature pages are uniform. -->		We also request that you maintain the same order of sections so that all of the feature pages are uniform. -->

	<!-- The actual name of your feature page should look something like: Features/Your Feature Name. This keeps all features in the same namespace -->		<!-- The actual name of your feature page should look something like: Features/Your Feature Name. This keeps all features in the same namespace -->

	== Summary ==		== Summary ==
	'''DevelopWeb''' is an Activity for Web Development using which children can develop Web Sites through HTML, Javascript and other web technologies. Children can learn quickly how to develop web pages in a step by step approach through examples provided for each HTML component.		'''DevelopWeb''' is an Activity for Web Development using which children can develop Web Sites through HTML, Javascript and other web technologies. Children can learn quickly how to develop web pages in a step by step approach through examples provided for each HTML component.

Kartik kumar perisetla at 15:47, 24 August 2012

2012-08-24T15:47:04Z

← Older revision		Revision as of 11:47, 24 August 2012
Line 36:		Line 36:
	* <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.		<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.
Line 44:		Line 44:
	* <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.

			Children can switch between Design, Source and Publish modes to view page in different perspective.

	== Benefit to Sugar ==		== Benefit to Sugar ==

Kartik kumar perisetla at 15:35, 24 August 2012

2012-08-24T15:35:22Z

← Older revision		Revision as of 11:35, 24 August 2012
Line 5:		Line 5:
	[[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>). -->
	</noinclude>		</noinclude>

	~~'''Comments and Explanations:'''~~

	There are comments (in italic) providing guidance to fill out each section, see also the [[Features/Policy\|Feature Policy Page]] for a more detailed explanation of the new-feature process. '''Copy the source to a ''new page'' named Features/''Your Feature Name'' before making changes! DO NOT EDIT THIS TEMPLATE.'''

	<!-- All fields on this form are required to be accepted.		<!-- All fields on this form are required to be accepted.
Line 87:		Line 83:
	{{:{{PAGENAME}}/Testing}}		{{:{{PAGENAME}}/Testing}}
	== User Experience ==		== User Experience ==
	''~~If this~~ feature is noticeable ~~by its target audience, how will~~ their ~~experiences change as a result? Describe what they~~ will ~~see or notice~~.''		''This feature will bring noticeable change in their Sugar environment. This activity will allow users to create,learn and explore HTML,JavaScript and Web Development.

	~~== Dependencies ==~~
	''What other packages (RPMs) depend on this package? Are there changes outside the developers' control on which completion of this feature depends? In other words, does your feature depend on completion of another feature owned by someone else or that you would need to coordinate, which might cause you to be unable to finish on time? Other upstream projects like Python?''

	== Contingency Plan ==		== Contingency Plan ==

← Older revision		Revision as of 07:48, 17 December 2012
Line 83:		Line 83:
	Proposed Timeline: ( Duration -6 months)		Proposed Timeline: ( Duration -6 months)

	<b>Month 1:</b>		<b>Month 1:</b><br/>
	1.Identify the requirements, features to design and implement.		1.Identify the requirements, features to design and implement.<br/>
	2.Design the User Interface carefully by understanding the GTK+ framework, PyGTK and how Sugar shell understands it.		2.Design the User Interface carefully by understanding the GTK+ framework, PyGTK and how Sugar shell understands it.<br/>
	3.Identify and understand the components/widgets required to develop this activity.		3.Identify and understand the components/widgets required to develop this activity.<br/>
	4.Design the components under the light of Sugar Human Interface Guidelines.		4.Design the components under the light of Sugar Human Interface Guidelines.<br/>
	5.[Milestone] Design and develop the ElementToolbox to hold web elements that can be dragged or clicked to bring them on Canvas holding the web page		5.[Milestone] Design and develop the ElementToolbox to hold web elements that can be dragged or clicked to bring them on Canvas holding the web page

	<b>Month 2:</b>		<b>Month 2:</b><br/>
	1.Develop properties windows. Develop Muti-tabbed Canvas where user can simultaneously open several web project entities like web page, script file, image,etc.		1.Develop properties windows. Develop Muti-tabbed Canvas where user can simultaneously open several web project entities like web page, script file, image,etc.<br/>
	2.Develop Sugar Toolbar with button for design mode, source mode and publish mode		2.Develop Sugar Toolbar with button for design mode, source mode and publish mode<br/>
	3.[Milestone]Write python class to handle canvas entities and events. like opening the properties windows when element is clicked on web page; Save page on hard disk, read page or file from disk		3.[Milestone]Write python class to handle canvas entities and events. like opening the properties windows when element is clicked on web page; Save page on hard disk, read page or file from disk

	<b>Month 3:</b>		<b>Month 3:</b><br/>
	1.Write Callback functions to handle events on Items listed in Element toolbox.		1.Write Callback functions to handle events on Items listed in Element toolbox.<br/>
	2.[Milestone]Rendering component that will render entities like image, page, script onto canvas.		2.[Milestone]Rendering component that will render entities like image, page, script onto canvas.<br/>
	3.Write functionality to save and load the HTML, JavaScript files.		3.Write functionality to save and load the HTML, JavaScript files.<br/>

	<b>Month 4:></b>		<b>Month 4:</b><br/>
	1.[Milestone]Develop and complete design mode using the classes and components written so far.		1.[Milestone]Develop and complete design mode using the classes and components written so far.
	2.[Milestone]Develop and complete source mode using classes and components written so far.		2.[Milestone]Develop and complete source mode using classes and components written so far.
	3.[Milestone]Develop and complete publish mode using classes and components written so far.		3.[Milestone]Develop and complete publish mode using classes and components written so far.

	<b>Month 5:</b>		<b>Month 5:</b><br/>
	1.Identify the approach to use for deploying the web application or site.		1.Identify the approach to use for deploying the web application or site.<br/>
	2.Design and develop the classes and components to be used for serving the resources for web application.		2.Design and develop the classes and components to be used for serving the resources for web application.<br/>
	3.[Milestone]Develop small web server component to deploy developed web site or web application based on above described approach and classes.		3.[Milestone]Develop small web server component to deploy developed web site or web application based on above described approach and classes.

	<b>Month 6:</b>		<b>Month 6:</b><br/>
	1.Devise support for HTML 5 widgets. Once we are ready with base version of this Activity we can definitely add these.		1.Devise support for HTML 5 widgets. Once we are ready with base version of this Activity we can definitely add these.<br/>
	2.Support for deployment to server can be provided where user can select server to FTP files created through this activity.		2.Support for deployment to server can be provided where user can select server to FTP files created through this activity.<br/>
	3.[Milestone]Collaboration: Support to allow multiple users working on same web project(or website)- editing different pages or parts to complete it in collective manner- This will enhance teamwork and encourage collective working environment.		3.[Milestone]Collaboration: Support to allow multiple users working on same web project(or website)- editing different pages or parts to complete it in collective manner- This will enhance teamwork and encourage collective working environment.<br/>
	4.To make it more interesting,link the activity with a small server component developed in previous step that will serve the web pages created through this activity. Children can then directly host the pages by hitting a button in this activity. i.e they can deploy/undeploy the web application with one click.		4.To make it more interesting,link the activity with a small server component developed in previous step that will serve the web pages created through this activity. Children can then directly host the pages by hitting a button in this activity. i.e they can deploy/undeploy the web application with one click.
	Share the activity for testing among developers, testers in the community.		Share the activity for testing among developers, testers in the community.