cyberweb 0.4.174

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of cyberweb might be problematic. Click here for more details.

Files changed (573) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +3259 -0
  3. data/bin/cyberweb +27 -0
  4. data/cyberweb.gemspec +119 -0
  5. data/doc/AUTHORS.md +12 -0
  6. data/doc/CONVENTIONS.md +7 -0
  7. data/doc/CYBERWEB_TUTORIAL.cgi +43 -0
  8. data/doc/DOCUMENTATION_FOR_CYBERSPRAWL.md +50 -0
  9. data/doc/FUTURE_DESIGN_GOAL_CONSIDERATIONS.md +13 -0
  10. data/doc/JQUERY.md +122 -0
  11. data/doc/MOUSE.md +80 -0
  12. data/doc/README.gen +3231 -0
  13. data/doc/RENDER_WEB_BASE.md +46 -0
  14. data/doc/USAGE.md +246 -0
  15. data/doc/configuration/configuration.md +23 -0
  16. data/doc/deprecations.md +32 -0
  17. data/doc/html_characters.md +15 -0
  18. data/doc/todo/TODO_FOR_THE_CYBERWEB_PROJECT.md +1089 -0
  19. data/examples/README.md +4 -0
  20. data/examples/advanced/delayed_update_of_the_body_via_javascript.cgi +38 -0
  21. data/examples/advanced/hybrid_experiment.cgi +108 -0
  22. data/examples/advanced/larger_image_on_mouse_over_example.cgi +35 -0
  23. data/examples/advanced/no_right_click.cgi +26 -0
  24. data/examples/advanced/objectified_html_tags.cgi +35 -0
  25. data/examples/advanced/simple_calculator.cgi +42 -0
  26. data/examples/advanced/simple_form_example.cgi +38 -0
  27. data/examples/css/blue_border.html +28 -0
  28. data/examples/css/caret_colour_example.html +22 -0
  29. data/examples/css/css_border_spacing_example.html +69 -0
  30. data/examples/css/css_bubbles.html +43 -0
  31. data/examples/css/css_clock.html +344 -0
  32. data/examples/css/css_drag_and_drop.html +89 -0
  33. data/examples/css/css_neon_glow_effects.html +317 -0
  34. data/examples/css/css_text_decoration_example.html +70 -0
  35. data/examples/css/css_tooltip.html +44 -0
  36. data/examples/css/fade_in_and_fade_out_effect.html +66 -0
  37. data/examples/css/font_size_examples.html +40 -0
  38. data/examples/css/letter_spacing_example.cgi +36 -0
  39. data/examples/css/meter_example.html +31 -0
  40. data/examples/css/on_mouse_button_pressed.html +41 -0
  41. data/examples/css/planets.html +187 -0
  42. data/examples/css/scale_example.html +25 -0
  43. data/examples/css/shadow_example_in_CSS.cgi +30 -0
  44. data/examples/css/sticky_div_example.html +56 -0
  45. data/examples/css/stitched_div.html +36 -0
  46. data/examples/csv/README.md +1 -0
  47. data/examples/csv/sample.csv +10 -0
  48. data/examples/example1.rb +7 -0
  49. data/examples/flip_card_example/flip_card_example.html +72 -0
  50. data/examples/frames/frame_left.html +1 -0
  51. data/examples/frames/frame_right.html +1 -0
  52. data/examples/html/README.md +1 -0
  53. data/examples/html/abbr_example.html +25 -0
  54. data/examples/html/base64_image_example.html +26 -0
  55. data/examples/html/colour_wheel.html +1389 -0
  56. data/examples/html/column_width_example.html +34 -0
  57. data/examples/html/custom_cursor.html +103 -0
  58. data/examples/html/draggable_paragraph.html +12 -0
  59. data/examples/html/fieldset_example.html +25 -0
  60. data/examples/html/frames_example.html +7 -0
  61. data/examples/html/glyph_example.html +43 -0
  62. data/examples/html/hbox_and_vbox_example.html +65 -0
  63. data/examples/html/href_examples.html +27 -0
  64. data/examples/html/input_autofocus_example.html +16 -0
  65. data/examples/html/larger_image_on_mouse_over_example.html +30 -0
  66. data/examples/html/ordered_and_unordered_bulletsin.html +33 -0
  67. data/examples/html/play_video_example.html +13 -0
  68. data/examples/html/readonly_textarea_example.html +23 -0
  69. data/examples/html/remote_image_example.html +10 -0
  70. data/examples/html/simple_unordered_list.html +16 -0
  71. data/examples/html/table_with_header_example.html +27 -0
  72. data/examples/html/two_columns_flex_example.html +39 -0
  73. data/examples/javascript/README.md +2 -0
  74. data/examples/javascript/arrays/arrays_example_in_javascript.html +16 -0
  75. data/examples/javascript/delay_example/delay_example.html +46 -0
  76. data/examples/javascript/drag_support/drag_support.html +37 -0
  77. data/examples/javascript/jquery_drag_and_drop/drag_and_drop_image_example.html +33 -0
  78. data/examples/javascript/on_click_event_hello_world/on_click_event_hello_world.html +21 -0
  79. data/examples/javascript/rgb_to_hex/rgb_to_hex.html +15 -0
  80. data/examples/javascript/screen_resolution/screen_resolution.html +20 -0
  81. data/examples/javascript/select_everything/select_everything.html +14 -0
  82. data/examples/javascript/write_into_a_file/write_into_a_file.html +39 -0
  83. data/examples/rack/README.md +4 -0
  84. data/examples/rack/example_with_html_template.rb +123 -0
  85. data/examples/rack/example_with_rack_and_cyberweb_showing_how_to_use_images.rb +56 -0
  86. data/examples/rack/hello_world_example_with_rack.rb +45 -0
  87. data/examples/rack/lobster.rb +79 -0
  88. data/examples/rack/rack_env.rb +10 -0
  89. data/examples/rack/standalone_example.rb +26 -0
  90. data/examples/show_greek_letters.rb +3 -0
  91. data/examples/simple/on_click_event_hello_world.cgi +34 -0
  92. data/examples/sinatra/001_your_ip_address_is.rb +8 -0
  93. data/examples/sinatra/002_the_request_object.rb +16 -0
  94. data/examples/sinatra/003_hello_world_example.rb +82 -0
  95. data/examples/sinatra/004_splat_example.rb +10 -0
  96. data/examples/sinatra/005_attachment_example.rb +11 -0
  97. data/examples/sinatra/006_outer_self_example.rb +8 -0
  98. data/examples/sinatra/007_mime_type_example.rb +17 -0
  99. data/examples/sinatra/008_post_example.rb +55 -0
  100. data/examples/table_example.rb +37 -0
  101. data/images/cyberweb_favicon.png +0 -0
  102. data/images/cyberweb_logo.png +0 -0
  103. data/images/cyberweb_theme.png +0 -0
  104. data/lib/cyberweb/and_sinatra_base.rb +9 -0
  105. data/lib/cyberweb/autoinclude.rb +20 -0
  106. data/lib/cyberweb/autoinclude_webobject.rb +14 -0
  107. data/lib/cyberweb/base/base.rb +41 -0
  108. data/lib/cyberweb/base/colours.rb +69 -0
  109. data/lib/cyberweb/base/constants.rb +18 -0
  110. data/lib/cyberweb/base/encoding.rb +19 -0
  111. data/lib/cyberweb/base/misc.rb +239 -0
  112. data/lib/cyberweb/base/reset.rb +23 -0
  113. data/lib/cyberweb/base/save_file.rb +22 -0
  114. data/lib/cyberweb/cascading_style_sheets/README.md +4 -0
  115. data/lib/cyberweb/cascading_style_sheets/admonition.css +33 -0
  116. data/lib/cyberweb/cascading_style_sheets/balloon.css +344 -0
  117. data/lib/cyberweb/cascading_style_sheets/border.css +202 -0
  118. data/lib/cyberweb/cascading_style_sheets/code.css +58 -0
  119. data/lib/cyberweb/cascading_style_sheets/colours.css +476 -0
  120. data/lib/cyberweb/cascading_style_sheets/default.css +1836 -0
  121. data/lib/cyberweb/cascading_style_sheets/div.css +26 -0
  122. data/lib/cyberweb/cascading_style_sheets/fonts.css +365 -0
  123. data/lib/cyberweb/cascading_style_sheets/links.css +207 -0
  124. data/lib/cyberweb/cascading_style_sheets/margin.css +677 -0
  125. data/lib/cyberweb/cascading_style_sheets/menu.css +37 -0
  126. data/lib/cyberweb/cascading_style_sheets/message_boxes.css +48 -0
  127. data/lib/cyberweb/cascading_style_sheets/misc.css +162 -0
  128. data/lib/cyberweb/cascading_style_sheets/popup.css +63 -0
  129. data/lib/cyberweb/cascading_style_sheets/rpg.css +51 -0
  130. data/lib/cyberweb/cascading_style_sheets/ruby_regexes.css +33 -0
  131. data/lib/cyberweb/cascading_style_sheets/template2.css +18 -0
  132. data/lib/cyberweb/cascading_style_sheets/text_shadow.css +19 -0
  133. data/lib/cyberweb/cascading_style_sheets/tooltip.css +36 -0
  134. data/lib/cyberweb/cgi/README.md +6 -0
  135. data/lib/cyberweb/cgi/cgi.rb +340 -0
  136. data/lib/cyberweb/cgi/constants.rb +121 -0
  137. data/lib/cyberweb/cgi/cookie.rb +218 -0
  138. data/lib/cyberweb/cgi/core.rb +638 -0
  139. data/lib/cyberweb/cgi/exceptions.rb +223 -0
  140. data/lib/cyberweb/cgi/html.rb +1025 -0
  141. data/lib/cyberweb/cgi/mod_ruby_exception_printer.rb +40 -0
  142. data/lib/cyberweb/cgi/query_extension.rb +431 -0
  143. data/lib/cyberweb/cgi/session/file_store.rb +131 -0
  144. data/lib/cyberweb/cgi/session/memory_store.rb +90 -0
  145. data/lib/cyberweb/cgi/session/pstore.rb +127 -0
  146. data/lib/cyberweb/cgi/session.rb +444 -0
  147. data/lib/cyberweb/cgi/tag_maker.rb +94 -0
  148. data/lib/cyberweb/cgi/util.rb +239 -0
  149. data/lib/cyberweb/charts/README.md +2 -0
  150. data/lib/cyberweb/charts/google_charts.rb +51 -0
  151. data/lib/cyberweb/classes/simple_form.rb +55 -0
  152. data/lib/cyberweb/classes/tooltips.rb +169 -0
  153. data/lib/cyberweb/coloured_tags/coloured_tags.rb +3099 -0
  154. data/lib/cyberweb/colours/colour_chart.rb +117 -0
  155. data/lib/cyberweb/colours/colours.rb +50 -0
  156. data/lib/cyberweb/colours/random_colour.rb +28 -0
  157. data/lib/cyberweb/colours/sanitize_for_colours.rb +95 -0
  158. data/lib/cyberweb/commandline/commandline_interface.rb +49 -0
  159. data/lib/cyberweb/configuration/configuration.rb +66 -0
  160. data/lib/cyberweb/configuration/load_the_configuration_file.rb +73 -0
  161. data/lib/cyberweb/constants/array_images.rb +21 -0
  162. data/lib/cyberweb/constants/array_local_css_files.rb +35 -0
  163. data/lib/cyberweb/constants/array_predefined_constants.rb +23 -0
  164. data/lib/cyberweb/constants/configuration_file.rb +33 -0
  165. data/lib/cyberweb/constants/constants.rb +9 -0
  166. data/lib/cyberweb/constants/file_constants.rb +16 -0
  167. data/lib/cyberweb/constants/http_status_codes.rb +42 -0
  168. data/lib/cyberweb/constants/nl.rb +22 -0
  169. data/lib/cyberweb/constants/project_constants.rb +99 -0
  170. data/lib/cyberweb/constants/roebe.rb +28 -0
  171. data/lib/cyberweb/constants/standalone_constants.rb +309 -0
  172. data/lib/cyberweb/controller/README.md +4 -0
  173. data/lib/cyberweb/controller/webobject_controller.rb +50 -0
  174. data/lib/cyberweb/csv/README.md +2 -0
  175. data/lib/cyberweb/csv/csv.rb +58 -0
  176. data/lib/cyberweb/cybersprawl +1 -0
  177. data/lib/cyberweb/debug/debug.rb +69 -0
  178. data/lib/cyberweb/encoding/encoding.rb +84 -0
  179. data/lib/cyberweb/erb/test.rhtml +81 -0
  180. data/lib/cyberweb/erb/test_template.erb +9 -0
  181. data/lib/cyberweb/evaluate_from_the_same_named_file_then_serve.rb +9 -0
  182. data/lib/cyberweb/favicon/favicon.rb +196 -0
  183. data/lib/cyberweb/generator/README.md +2 -0
  184. data/lib/cyberweb/generator/cgi.rb +201 -0
  185. data/lib/cyberweb/generator/class.rb +25 -0
  186. data/lib/cyberweb/generator/static_webpage.rb +162 -0
  187. data/lib/cyberweb/generator/webpage_for_images.rb +553 -0
  188. data/lib/cyberweb/help/help.rb +29 -0
  189. data/lib/cyberweb/html_codes/README.md +15 -0
  190. data/lib/cyberweb/html_codes/greek_letters.rb +204 -0
  191. data/lib/cyberweb/html_tags/README.md +3 -0
  192. data/lib/cyberweb/html_tags/a.rb +65 -0
  193. data/lib/cyberweb/html_tags/accesskey.rb +25 -0
  194. data/lib/cyberweb/html_tags/blockquote.rb +56 -0
  195. data/lib/cyberweb/html_tags/body.rb +14 -0
  196. data/lib/cyberweb/html_tags/br.rb +19 -0
  197. data/lib/cyberweb/html_tags/button.rb +110 -0
  198. data/lib/cyberweb/html_tags/canvas.rb +59 -0
  199. data/lib/cyberweb/html_tags/chtml.rb +14 -0
  200. data/lib/cyberweb/html_tags/div.rb +163 -0
  201. data/lib/cyberweb/html_tags/fieldset.rb +67 -0
  202. data/lib/cyberweb/html_tags/figure.rb +72 -0
  203. data/lib/cyberweb/html_tags/form.rb +203 -0
  204. data/lib/cyberweb/html_tags/h1.rb +75 -0
  205. data/lib/cyberweb/html_tags/h2.rb +73 -0
  206. data/lib/cyberweb/html_tags/h3.rb +58 -0
  207. data/lib/cyberweb/html_tags/h4.rb +60 -0
  208. data/lib/cyberweb/html_tags/h5.rb +54 -0
  209. data/lib/cyberweb/html_tags/h6.rb +54 -0
  210. data/lib/cyberweb/html_tags/hr.rb +22 -0
  211. data/lib/cyberweb/html_tags/html_tags.rb +240 -0
  212. data/lib/cyberweb/html_tags/i.rb +50 -0
  213. data/lib/cyberweb/html_tags/img.rb +294 -0
  214. data/lib/cyberweb/html_tags/input.rb +345 -0
  215. data/lib/cyberweb/html_tags/label.rb +63 -0
  216. data/lib/cyberweb/html_tags/legend.rb +56 -0
  217. data/lib/cyberweb/html_tags/li.rb +67 -0
  218. data/lib/cyberweb/html_tags/map.rb +31 -0
  219. data/lib/cyberweb/html_tags/nav.rb +63 -0
  220. data/lib/cyberweb/html_tags/object.rb +56 -0
  221. data/lib/cyberweb/html_tags/ol.rb +56 -0
  222. data/lib/cyberweb/html_tags/option.rb +61 -0
  223. data/lib/cyberweb/html_tags/p.rb +90 -0
  224. data/lib/cyberweb/html_tags/pre.rb +164 -0
  225. data/lib/cyberweb/html_tags/section.rb +33 -0
  226. data/lib/cyberweb/html_tags/select.rb +100 -0
  227. data/lib/cyberweb/html_tags/span.rb +338 -0
  228. data/lib/cyberweb/html_tags/strong.rb +39 -0
  229. data/lib/cyberweb/html_tags/table.rb +273 -0
  230. data/lib/cyberweb/html_tags/tbody.rb +24 -0
  231. data/lib/cyberweb/html_tags/td.rb +214 -0
  232. data/lib/cyberweb/html_tags/textarea.rb +138 -0
  233. data/lib/cyberweb/html_tags/th.rb +68 -0
  234. data/lib/cyberweb/html_tags/thead.rb +36 -0
  235. data/lib/cyberweb/html_tags/tr.rb +97 -0
  236. data/lib/cyberweb/html_tags/ul.rb +51 -0
  237. data/lib/cyberweb/html_template/html_template.rb +352 -0
  238. data/lib/cyberweb/images/embed_this_image.rb +37 -0
  239. data/lib/cyberweb/images/images.rb +58 -0
  240. data/lib/cyberweb/images/is_image.rb +22 -0
  241. data/lib/cyberweb/images/path_to_images.rb +60 -0
  242. data/lib/cyberweb/images/real/README.md +6 -0
  243. data/lib/cyberweb/images/remove_this_substring_from_all_images.rb +44 -0
  244. data/lib/cyberweb/images/standalone_drag_and_drop_this_image.rb +64 -0
  245. data/lib/cyberweb/images/string_image.rb +399 -0
  246. data/lib/cyberweb/images_base64_encoded/AUSRUFUNGSZEICHEN.png.md +1 -0
  247. data/lib/cyberweb/images_base64_encoded/BLUEARROW.png.md +1 -0
  248. data/lib/cyberweb/images_base64_encoded/BUBBLE.png.md +1 -0
  249. data/lib/cyberweb/images_base64_encoded/CAT.png.md +1 -0
  250. data/lib/cyberweb/images_base64_encoded/CAUTION.png.md +1 -0
  251. data/lib/cyberweb/images_base64_encoded/CHEERING_PERSON.png.md +1 -0
  252. data/lib/cyberweb/images_base64_encoded/CURSOR.png.md +1 -0
  253. data/lib/cyberweb/images_base64_encoded/DOT_01.png.md +5 -0
  254. data/lib/cyberweb/images_base64_encoded/DUCKY.png.md +1 -0
  255. data/lib/cyberweb/images_base64_encoded/ELEPHANT.png.md +1 -0
  256. data/lib/cyberweb/images_base64_encoded/HALLOWEEN.png.md +1 -0
  257. data/lib/cyberweb/images_base64_encoded/HANGING_MONKEY.png.md +1 -0
  258. data/lib/cyberweb/images_base64_encoded/LENS.png.md +1 -0
  259. data/lib/cyberweb/images_base64_encoded/README.md +2 -0
  260. data/lib/cyberweb/images_base64_encoded/TU_WIEN_LOGO.png.md +1 -0
  261. data/lib/cyberweb/images_base64_encoded/VOGEL.png.md +1 -0
  262. data/lib/cyberweb/io/README.md +1 -0
  263. data/lib/cyberweb/io/io.rb +19 -0
  264. data/lib/cyberweb/javascript/drag_and_drop.rb +105 -0
  265. data/lib/cyberweb/javascript/dragula_collection.rb +54 -0
  266. data/lib/cyberweb/javascript/javascript.rb +211 -0
  267. data/lib/cyberweb/javascript/javascript_bundle.rb +223 -0
  268. data/lib/cyberweb/javascript/javascript_clock.rb +69 -0
  269. data/lib/cyberweb/javascript/javascript_last_modified.rb +27 -0
  270. data/lib/cyberweb/javascript/javascript_magic.rb +150 -0
  271. data/lib/cyberweb/javascript/javascript_selectable.rb +24 -0
  272. data/lib/cyberweb/javascript/jquery.rb +30 -0
  273. data/lib/cyberweb/javascript/on_click_change_opacity.rb +97 -0
  274. data/lib/cyberweb/javascript/on_click_hide.rb +63 -0
  275. data/lib/cyberweb/javascript/popup.rb +80 -0
  276. data/lib/cyberweb/javascript/print_javascript.rb +33 -0
  277. data/lib/cyberweb/javascript/registered_javascript_methods.rb +30 -0
  278. data/lib/cyberweb/javascript/resize.rb +28 -0
  279. data/lib/cyberweb/javascript/return_javascript.rb +48 -0
  280. data/lib/cyberweb/javascript/scroll.rb +17 -0
  281. data/lib/cyberweb/javascript/snoweffect.rb +122 -0
  282. data/lib/cyberweb/javascript_code/README.md +6 -0
  283. data/lib/cyberweb/javascript_code/chmod_displayer.js +74 -0
  284. data/lib/cyberweb/javascript_code/custom_functions.js +267 -0
  285. data/lib/cyberweb/javascript_code/jquery/jquery-3.6.0.js +10881 -0
  286. data/lib/cyberweb/javascript_code/jquery/jquery-ui-1.12.1.js +18706 -0
  287. data/lib/cyberweb/javascript_code/rgb_to_hex.js +14 -0
  288. data/lib/cyberweb/javascript_code/select_even_numbers.js +7 -0
  289. data/lib/cyberweb/javascript_code/select_everything.js +22 -0
  290. data/lib/cyberweb/javascript_code/simple_calculator.js +15 -0
  291. data/lib/cyberweb/javascript_code/sleep.js +3 -0
  292. data/lib/cyberweb/javascript_code/to_celsius.js +8 -0
  293. data/lib/cyberweb/mouse/README.md +3 -0
  294. data/lib/cyberweb/mouse/libxdo.rb +321 -0
  295. data/lib/cyberweb/mouse/mouse.rb +264 -0
  296. data/lib/cyberweb/objectified_html_tags/README.md +8 -0
  297. data/lib/cyberweb/objectified_html_tags/a.rb +129 -0
  298. data/lib/cyberweb/objectified_html_tags/abbr.rb +84 -0
  299. data/lib/cyberweb/objectified_html_tags/base.rb +376 -0
  300. data/lib/cyberweb/objectified_html_tags/button.rb +135 -0
  301. data/lib/cyberweb/objectified_html_tags/combobox.rb +165 -0
  302. data/lib/cyberweb/objectified_html_tags/div.rb +129 -0
  303. data/lib/cyberweb/objectified_html_tags/embed.rb +161 -0
  304. data/lib/cyberweb/objectified_html_tags/form.rb +129 -0
  305. data/lib/cyberweb/objectified_html_tags/h1.rb +129 -0
  306. data/lib/cyberweb/objectified_html_tags/h2.rb +129 -0
  307. data/lib/cyberweb/objectified_html_tags/h3.rb +129 -0
  308. data/lib/cyberweb/objectified_html_tags/h4.rb +129 -0
  309. data/lib/cyberweb/objectified_html_tags/h5.rb +129 -0
  310. data/lib/cyberweb/objectified_html_tags/h6.rb +129 -0
  311. data/lib/cyberweb/objectified_html_tags/hbox.rb +71 -0
  312. data/lib/cyberweb/objectified_html_tags/img.rb +202 -0
  313. data/lib/cyberweb/objectified_html_tags/input.rb +185 -0
  314. data/lib/cyberweb/objectified_html_tags/p.rb +129 -0
  315. data/lib/cyberweb/objectified_html_tags/pre.rb +129 -0
  316. data/lib/cyberweb/objectified_html_tags/span.rb +92 -0
  317. data/lib/cyberweb/objectified_html_tags/table.rb +174 -0
  318. data/lib/cyberweb/objectified_html_tags/textarea.rb +173 -0
  319. data/lib/cyberweb/objectified_html_tags/title.rb +82 -0
  320. data/lib/cyberweb/objectified_html_tags/window.rb +79 -0
  321. data/lib/cyberweb/predefined_and_freeform_methods/README.md +1 -0
  322. data/lib/cyberweb/predefined_and_freeform_methods/frage.rb +45 -0
  323. data/lib/cyberweb/predefined_and_freeform_methods/freeform_methods.rb +93 -0
  324. data/lib/cyberweb/predefined_and_freeform_methods/hash_css_class_to_use.rb +55 -0
  325. data/lib/cyberweb/predefined_and_freeform_methods/hash_registered_extra_tags.rb +29 -0
  326. data/lib/cyberweb/predefined_and_freeform_methods/header.rb +81 -0
  327. data/lib/cyberweb/predefined_and_freeform_methods/predefined_methods.rb +413 -0
  328. data/lib/cyberweb/project/project.rb +85 -0
  329. data/lib/cyberweb/rack/README.md +1 -0
  330. data/lib/cyberweb/rack/request.rb +31 -0
  331. data/lib/cyberweb/requires/README.md +4 -0
  332. data/lib/cyberweb/requires/do_require_web_object_files.rb +9 -0
  333. data/lib/cyberweb/requires/remove_html.rb +9 -0
  334. data/lib/cyberweb/requires/require_cgi.rb +16 -0
  335. data/lib/cyberweb/requires/require_charts.rb +20 -0
  336. data/lib/cyberweb/requires/require_generators.rb +23 -0
  337. data/lib/cyberweb/requires/require_html_tags_files.rb +23 -0
  338. data/lib/cyberweb/requires/require_javascript_files.rb +23 -0
  339. data/lib/cyberweb/requires/require_kimurai.rb +13 -0
  340. data/lib/cyberweb/requires/require_objectified_html_tags_files.rb +23 -0
  341. data/lib/cyberweb/requires/require_sinatra.rb +7 -0
  342. data/lib/cyberweb/requires/require_the_constants.rb +26 -0
  343. data/lib/cyberweb/requires/require_the_cyberweb_project.rb +172 -0
  344. data/lib/cyberweb/requires/require_the_html_template.rb +7 -0
  345. data/lib/cyberweb/requires/require_the_toplevel_methods_files.rb +24 -0
  346. data/lib/cyberweb/requires/require_web_images.rb +7 -0
  347. data/lib/cyberweb/requires/require_web_object_files.rb +25 -0
  348. data/lib/cyberweb/requires/require_yaml.rb +11 -0
  349. data/lib/cyberweb/sinatra/README.md +11 -0
  350. data/lib/cyberweb/sinatra/base.rb +145 -0
  351. data/lib/cyberweb/sinatra/custom_extensions.rb +131 -0
  352. data/lib/cyberweb/standalone_classes/all_css_classes.rb +255 -0
  353. data/lib/cyberweb/standalone_classes/calculator.rb +127 -0
  354. data/lib/cyberweb/standalone_classes/correct_image_entries_in_html_file.rb +207 -0
  355. data/lib/cyberweb/standalone_classes/input_focus.rb +97 -0
  356. data/lib/cyberweb/standalone_classes/tag_prototype.rb +43 -0
  357. data/lib/cyberweb/standalone_classes/turn_html_into_cyberweb.rb +174 -0
  358. data/lib/cyberweb/svg/blue_rect.svg +12 -0
  359. data/lib/cyberweb/svg/butterfly.svg +15 -0
  360. data/lib/cyberweb/svg/chemical_molecule.svg +192 -0
  361. data/lib/cyberweb/svg/circles_on_background.svg +29 -0
  362. data/lib/cyberweb/svg/ellipse.svg +12 -0
  363. data/lib/cyberweb/svg/five_circles.svg +26 -0
  364. data/lib/cyberweb/svg/flag_germany.svg +10 -0
  365. data/lib/cyberweb/svg/gaussian_blur.svg +20 -0
  366. data/lib/cyberweb/svg/gradient_circle.svg +18 -0
  367. data/lib/cyberweb/svg/green_butterfly.svg +18 -0
  368. data/lib/cyberweb/svg/green_tilted_lines.svg +25 -0
  369. data/lib/cyberweb/svg/lion.svg +161 -0
  370. data/lib/cyberweb/svg/one_circle.svg +12 -0
  371. data/lib/cyberweb/svg/pie_chart.svg +130 -0
  372. data/lib/cyberweb/svg/svg.cgi +61 -0
  373. data/lib/cyberweb/svg/tetris.svg +487 -0
  374. data/lib/cyberweb/svg/three_circles.svg +18 -0
  375. data/lib/cyberweb/svg/tiger.svg +732 -0
  376. data/lib/cyberweb/svg/tilted_arcs.svg +74 -0
  377. data/lib/cyberweb/svg/transparent_rect.svg +12 -0
  378. data/lib/cyberweb/svg/yellow_fe_blending.svg +42 -0
  379. data/lib/cyberweb/toplevel_methods/a.rb +131 -0
  380. data/lib/cyberweb/toplevel_methods/anmerkung.rb +67 -0
  381. data/lib/cyberweb/toplevel_methods/audio.rb +59 -0
  382. data/lib/cyberweb/toplevel_methods/bold.rb +65 -0
  383. data/lib/cyberweb/toplevel_methods/cgi.rb +65 -0
  384. data/lib/cyberweb/toplevel_methods/charsets.rb +52 -0
  385. data/lib/cyberweb/toplevel_methods/clear.rb +30 -0
  386. data/lib/cyberweb/toplevel_methods/close.rb +62 -0
  387. data/lib/cyberweb/toplevel_methods/consider_serving_the_web_object.rb +41 -0
  388. data/lib/cyberweb/toplevel_methods/css.rb +732 -0
  389. data/lib/cyberweb/toplevel_methods/date.rb +71 -0
  390. data/lib/cyberweb/toplevel_methods/dictionary.rb +48 -0
  391. data/lib/cyberweb/toplevel_methods/disable.rb +49 -0
  392. data/lib/cyberweb/toplevel_methods/document.rb +56 -0
  393. data/lib/cyberweb/toplevel_methods/dot.rb +182 -0
  394. data/lib/cyberweb/toplevel_methods/download_webpage.rb +18 -0
  395. data/lib/cyberweb/toplevel_methods/edit_configuration_file.rb +26 -0
  396. data/lib/cyberweb/toplevel_methods/ee.rb +44 -0
  397. data/lib/cyberweb/toplevel_methods/env.rb +44 -0
  398. data/lib/cyberweb/toplevel_methods/escape_html.rb +54 -0
  399. data/lib/cyberweb/toplevel_methods/fields.rb +46 -0
  400. data/lib/cyberweb/toplevel_methods/filename.rb +33 -0
  401. data/lib/cyberweb/toplevel_methods/frames.rb +131 -0
  402. data/lib/cyberweb/toplevel_methods/glob.rb +30 -0
  403. data/lib/cyberweb/toplevel_methods/google.rb +35 -0
  404. data/lib/cyberweb/toplevel_methods/hardware_information.rb +90 -0
  405. data/lib/cyberweb/toplevel_methods/hfin.rb +56 -0
  406. data/lib/cyberweb/toplevel_methods/html_comment.rb +48 -0
  407. data/lib/cyberweb/toplevel_methods/html_mode.rb +39 -0
  408. data/lib/cyberweb/toplevel_methods/html_tables.rb +818 -0
  409. data/lib/cyberweb/toplevel_methods/input.rb +54 -0
  410. data/lib/cyberweb/toplevel_methods/jquery.rb +82 -0
  411. data/lib/cyberweb/toplevel_methods/last_modified.rb +39 -0
  412. data/lib/cyberweb/toplevel_methods/links.rb +426 -0
  413. data/lib/cyberweb/toplevel_methods/listing.rb +96 -0
  414. data/lib/cyberweb/toplevel_methods/localhost.rb +18 -0
  415. data/lib/cyberweb/toplevel_methods/log_directory.rb +84 -0
  416. data/lib/cyberweb/toplevel_methods/logging.rb +42 -0
  417. data/lib/cyberweb/toplevel_methods/logo.rb +30 -0
  418. data/lib/cyberweb/toplevel_methods/markdown.rb +112 -0
  419. data/lib/cyberweb/toplevel_methods/mathml.rb +130 -0
  420. data/lib/cyberweb/toplevel_methods/message_boxes.rb +140 -0
  421. data/lib/cyberweb/toplevel_methods/misc.rb +1398 -0
  422. data/lib/cyberweb/toplevel_methods/name_of_img_dir.rb +51 -0
  423. data/lib/cyberweb/toplevel_methods/padlem_and_marlem.rb +107 -0
  424. data/lib/cyberweb/toplevel_methods/params.rb +57 -0
  425. data/lib/cyberweb/toplevel_methods/path.rb +69 -0
  426. data/lib/cyberweb/toplevel_methods/pdf.rb +103 -0
  427. data/lib/cyberweb/toplevel_methods/process_content.rb +102 -0
  428. data/lib/cyberweb/toplevel_methods/progress.rb +42 -0
  429. data/lib/cyberweb/toplevel_methods/quote.rb +44 -0
  430. data/lib/cyberweb/toplevel_methods/random.rb +70 -0
  431. data/lib/cyberweb/toplevel_methods/rds.rb +35 -0
  432. data/lib/cyberweb/toplevel_methods/read_and_display.rb +284 -0
  433. data/lib/cyberweb/toplevel_methods/readlines.rb +31 -0
  434. data/lib/cyberweb/toplevel_methods/redirect.rb +29 -0
  435. data/lib/cyberweb/toplevel_methods/registered_ids.rb +178 -0
  436. data/lib/cyberweb/toplevel_methods/remove_html.rb +32 -0
  437. data/lib/cyberweb/toplevel_methods/remove_newlines.rb +28 -0
  438. data/lib/cyberweb/toplevel_methods/return_head_start.rb +33 -0
  439. data/lib/cyberweb/toplevel_methods/return_html_fin.rb +34 -0
  440. data/lib/cyberweb/toplevel_methods/return_html_header.rb +35 -0
  441. data/lib/cyberweb/toplevel_methods/return_html_start.rb +24 -0
  442. data/lib/cyberweb/toplevel_methods/return_html_to_head_start.rb +42 -0
  443. data/lib/cyberweb/toplevel_methods/return_meta_collection.rb +54 -0
  444. data/lib/cyberweb/toplevel_methods/return_pwd.rb +23 -0
  445. data/lib/cyberweb/toplevel_methods/return_strict_doctype.rb +51 -0
  446. data/lib/cyberweb/toplevel_methods/roebe.rb +43 -0
  447. data/lib/cyberweb/toplevel_methods/s2.rb +30 -0
  448. data/lib/cyberweb/toplevel_methods/sanitize_url.rb +57 -0
  449. data/lib/cyberweb/toplevel_methods/sbr.rb +170 -0
  450. data/lib/cyberweb/toplevel_methods/server_base_directory.rb +148 -0
  451. data/lib/cyberweb/toplevel_methods/show_and_display.rb +215 -0
  452. data/lib/cyberweb/toplevel_methods/show_configuration.rb +83 -0
  453. data/lib/cyberweb/toplevel_methods/sitemap.rb +111 -0
  454. data/lib/cyberweb/toplevel_methods/spacer.rb +119 -0
  455. data/lib/cyberweb/toplevel_methods/string_body_start.rb +65 -0
  456. data/lib/cyberweb/toplevel_methods/string_content.rb +35 -0
  457. data/lib/cyberweb/toplevel_methods/svg.rb +66 -0
  458. data/lib/cyberweb/toplevel_methods/tag.rb +237 -0
  459. data/lib/cyberweb/toplevel_methods/temp_directory.rb +73 -0
  460. data/lib/cyberweb/toplevel_methods/test_css.rb +24 -0
  461. data/lib/cyberweb/toplevel_methods/textile.rb +45 -0
  462. data/lib/cyberweb/toplevel_methods/title.rb +125 -0
  463. data/lib/cyberweb/toplevel_methods/umlaute.rb +90 -0
  464. data/lib/cyberweb/toplevel_methods/video.rb +352 -0
  465. data/lib/cyberweb/toplevel_methods/view_source.rb +50 -0
  466. data/lib/cyberweb/toplevel_methods/web_object.rb +42 -0
  467. data/lib/cyberweb/toplevel_methods/write_what_into.rb +27 -0
  468. data/lib/cyberweb/utility_scripts/README.md +4 -0
  469. data/lib/cyberweb/utility_scripts/create_coloured_tags.rb +172 -0
  470. data/lib/cyberweb/utility_scripts/download_balloon_css.rb +160 -0
  471. data/lib/cyberweb/utility_scripts/hyperlink_all_images_from.rb +148 -0
  472. data/lib/cyberweb/version/version.rb +25 -0
  473. data/lib/cyberweb/web_base/web_base.rb +28 -0
  474. data/lib/cyberweb/web_images/array_listing_all_project_images.rb +52 -0
  475. data/lib/cyberweb/web_images/map_symbol_to_image_location.rb +1661 -0
  476. data/lib/cyberweb/web_images/web_images.rb +270 -0
  477. data/lib/cyberweb/web_object/css.rb +627 -0
  478. data/lib/cyberweb/web_object/evaluate.rb +126 -0
  479. data/lib/cyberweb/web_object/favicon.rb +160 -0
  480. data/lib/cyberweb/web_object/html_related_tags.rb +320 -0
  481. data/lib/cyberweb/web_object/images.rb +693 -0
  482. data/lib/cyberweb/web_object/initialize.rb +51 -0
  483. data/lib/cyberweb/web_object/input_related_functionality.rb +414 -0
  484. data/lib/cyberweb/web_object/javascript.rb +427 -0
  485. data/lib/cyberweb/web_object/languages.rb +172 -0
  486. data/lib/cyberweb/web_object/links.rb +228 -0
  487. data/lib/cyberweb/web_object/misc.rb +5159 -0
  488. data/lib/cyberweb/web_object/params.rb +289 -0
  489. data/lib/cyberweb/web_object/reset.rb +192 -0
  490. data/lib/cyberweb/web_object/run.rb +44 -0
  491. data/lib/cyberweb/web_object/sinatra_related_functionality.rb +30 -0
  492. data/lib/cyberweb/web_object/sitemap.rb +176 -0
  493. data/lib/cyberweb/web_object/table.rb +378 -0
  494. data/lib/cyberweb/web_object/web_object.rb +126 -0
  495. data/lib/cyberweb/web_scraper/README.md +8 -0
  496. data/lib/cyberweb/web_scraper/scrape_this_url.rb +183 -0
  497. data/lib/cyberweb/webmin/biology_server.cgi +256 -0
  498. data/lib/cyberweb/webmin/calculator.cgi +52 -0
  499. data/lib/cyberweb/webmin/colour_chart.cgi +33 -0
  500. data/lib/cyberweb/webmin/comments.cgi +137 -0
  501. data/lib/cyberweb/webmin/comments_data +18 -0
  502. data/lib/cyberweb/webmin/constants.rb +46 -0
  503. data/lib/cyberweb/webmin/dictionary.cgi +39 -0
  504. data/lib/cyberweb/webmin/sys_info.cgi +26 -0
  505. data/lib/cyberweb/webmin/webforum.cgi +58 -0
  506. data/lib/cyberweb/webmin/webmin.cgi +679 -0
  507. data/lib/cyberweb/yaml/autogenerated_system_settings.yml +14 -0
  508. data/lib/cyberweb/yaml/custom_tags.yml +7 -0
  509. data/lib/cyberweb/yaml/debug.yml +1 -0
  510. data/lib/cyberweb/yaml/html5_global_attributes.yml +12 -0
  511. data/lib/cyberweb/yaml/html5_new_elements.yml +108 -0
  512. data/lib/cyberweb/yaml/html_tag_legend.yml +12 -0
  513. data/lib/cyberweb/yaml/http_status_codes.yml +38 -0
  514. data/lib/cyberweb/yaml/js_files_to_load.yml +28 -0
  515. data/lib/cyberweb/yaml/project_configuration.yml +229 -0
  516. data/lib/cyberweb/yaml/video_attributes.yml +35 -0
  517. data/lib/cyberweb/yaml/web_images.yml +306 -0
  518. data/lib/cyberweb.rb +5 -0
  519. data/test/README.md +5 -0
  520. data/test/complex_tests/all_tests_in_one_page.cgi +666 -0
  521. data/test/complex_tests/simple_sinatra_example_using_cyberweb/simple.rb +60 -0
  522. data/test/complex_tests/sinatra_or_cyberweb/sinatra_or_cyberweb.cgi +7 -0
  523. data/test/complex_tests/sinatra_or_cyberweb/sinatra_or_cyberweb.rb +23 -0
  524. data/test/complex_tests/sinatra_or_cyberweb/sinatra_or_cyberweb.sinatra +65 -0
  525. data/test/complex_tests/testing_frames.cgi +42 -0
  526. data/test/complex_tests/testing_objectified_html_tags.rb +82 -0
  527. data/test/complex_tests/testing_style_variants/README.md +2 -0
  528. data/test/complex_tests/testing_style_variants/show_coloured_boxes.cgi +58 -0
  529. data/test/complex_tests/testing_tables.cgi +67 -0
  530. data/test/complex_tests/testing_the_cyberweb_shell.rb +188 -0
  531. data/test/complex_tests/testing_web_object.rb +94 -0
  532. data/test/css/README.md +5 -0
  533. data/test/css/return_the_content_of_these_css_classes.rb +7 -0
  534. data/test/css/testing_css_effects.cgi +159 -0
  535. data/test/css/testing_css_masking.cgi +36 -0
  536. data/test/dummy.pdf +0 -0
  537. data/test/hello_world/hello_world.cgi +25 -0
  538. data/test/javascript/README.md +2 -0
  539. data/test/javascript/testing_cheerleader_javascript.cgi +0 -0
  540. data/test/javascript/testing_drag_and_drop_support.cgi +33 -0
  541. data/test/javascript/testing_on_click_change_opacity.cgi +26 -0
  542. data/test/javascript/testing_snowflakes.cgi +20 -0
  543. data/test/simple_tests/README.md +3 -0
  544. data/test/simple_tests/ad-hoc-test.cgi +55 -0
  545. data/test/simple_tests/commandline_tests.rb +70 -0
  546. data/test/simple_tests/display_this_file.cgi +11 -0
  547. data/test/simple_tests/simple_html_example.cgi +29 -0
  548. data/test/simple_tests/simple_status_page.cgi +52 -0
  549. data/test/simple_tests/string_s2_test.rb +11 -0
  550. data/test/simple_tests/test_simple_string_as_input.rb +12 -0
  551. data/test/simple_tests/testing_base64_images.cgi +26 -0
  552. data/test/simple_tests/testing_dragging_an_image.cgi +23 -0
  553. data/test/simple_tests/testing_editable_text.cgi +16 -0
  554. data/test/simple_tests/testing_email.cgi +31 -0
  555. data/test/simple_tests/testing_embedding_a_pdf_file.cgi +32 -0
  556. data/test/simple_tests/testing_google_charts.cgi +24 -0
  557. data/test/simple_tests/testing_html_forms.cgi +31 -0
  558. data/test/simple_tests/testing_html_template.rb +13 -0
  559. data/test/simple_tests/testing_popup_div.cgi +22 -0
  560. data/test/simple_tests/testing_return_dataset_without_any_comments.rb +11 -0
  561. data/test/simple_tests/testing_the_cap_box.cgi +20 -0
  562. data/test/simple_tests/testing_the_div_tag.cgi +21 -0
  563. data/test/simple_tests/testing_the_headers_tag.cgi +36 -0
  564. data/test/simple_tests/testing_the_html_colours.cgi +19 -0
  565. data/test/simple_tests/testing_the_info_box.cgi +19 -0
  566. data/test/simple_tests/testing_the_li_tag.cgi +24 -0
  567. data/test/simple_tests/testing_the_s2_method.rb +7 -0
  568. data/test/simple_tests/testing_the_select_tag.cgi +23 -0
  569. data/test/simple_tests/testing_the_span_tag.cgi +36 -0
  570. data/test/simple_tests/testing_web_images.rb +12 -0
  571. data/test/testing_html_tags/README.md +7 -0
  572. data/test/testing_html_tags/button_example.cgi +42 -0
  573. metadata +759 -0
data/doc/README.gen ADDED
@@ -0,0 +1,3231 @@
1
+ ADD_GOBOLINUX_AND_RUBY_HEADER
2
+ ADD_TIME_STAMP
3
+
4
+ <img src="https://i.imgur.com/GatV3S5.png" style="margin-left: 0.5em">
5
+ <img src="http://shevy.bplaced.net/cyberweb_theme.png" style="margin-left: 0.5em">
6
+
7
+ ## The History of the Cyberweb project
8
+
9
+ This project was created a very long time ago, in PHP - in the year
10
+ 2004 or so, give or take. (I used to think it was in 2002, but looking
11
+ at old notes, it was more likely started in early 2004.)
12
+
13
+ I was using custom functions to regulate serving web-related content
14
+ back then, written in PHP.
15
+
16
+ The original **class WebObject**, for example, was written a very long time
17
+ ago, perhaps in the year **2004** or something like this, when I
18
+ transitioned away from PHP into ruby. I took all the old PHP code
19
+ and adapted it at that point.
20
+
21
+ The Cyberweb-project was rewritten several times, so it may not be
22
+ very similar to the old code from ~almost 20 years ago. The important
23
+ core methods, though, may still be quite similar. For example, I
24
+ was using div() in PHP already, and I am using div() in ruby too.
25
+
26
+ Ruby allows for more functionality out of the box, though, so I
27
+ can do:
28
+
29
+ div {
30
+ }
31
+
32
+ In PHP this is not easily possible, so ruby is better in this regard -
33
+ more flexible.
34
+
35
+ During that transition phase, from **php** to **ruby**, the project
36
+ was renamed several times - first to **web_foundation**, then to
37
+ **cybersprawl**, then to **Cyberweb**, then to **web_object** and
38
+ then back to **Cyberweb** again. I think the name **Cyberweb**
39
+ is best among these alternatives. While **web_object** is the
40
+ more technically correct and accurate term, as everything related
41
+ to the www is handled via that object, I prefer the name
42
+ **Cyberweb** in general for the whole project - it sounds
43
+ futuristic. The name **WebObject** is a good name too, though,
44
+ as we attempt to describe a particular "web-page" as a
45
+ "web-object", basically.
46
+
47
+ **class WebObject** was originally the very main class I was
48
+ using in PHP to describe my local knowledge base, an "app" where
49
+ I kept useful information bits about linux, and ruby, and other
50
+ parts together. The code for this project in PHP was simpler, and
51
+ also uglier though, and less flexible. (Actually the name was
52
+ not even WebObject back then, but let's not make this too overly
53
+ complicated and convoluted; it's already a fairly messy history.)
54
+
55
+ When I switched to **ruby**, I rewrote all my PHP code in ruby,
56
+ as stated; and eventually put the web-specific parts into a project
57
+ called <b>web_foundation</b>, which was the actual **predecessor**
58
+ to <b>Cyberweb</b> (with cybersprawl being part of it, but mostly
59
+ the idea here for **cybersprawl** being a custom **webforum**;
60
+ lateron cybersprawl became an incomplete **webmin clone**, which
61
+ I still want to finish one day. The wish to have a web-forum
62
+ is still retained, though).
63
+
64
+ The original <b>Cyberweb project</b> was "officially" started on
65
+ **13.06.2012** (13th June in the year 2012) - that is, the name
66
+ was first used in the year **2012**. In 2020 it came to an end
67
+ and was replaced with the <b>WebObject</b> project, but in May
68
+ 2021 the original name was re-instated. Quite confusing!
69
+
70
+ The project called <b>html_tags</b> was created at about the same
71
+ time back then, in the year **2012**, in order to keep the code
72
+ base of the newly generated project somewhat cleaner and smaller.
73
+ **WebFoundation** was thus renamed to Cyberweb, but there still
74
+ was a directory called **foundation/**. Old gem releases of **cyberweb**
75
+ may still show that, back when I kept these old releases.
76
+
77
+ In **August 2018**, I removed the **foundation/** subdirectory and
78
+ integrated the code into other parts of the project instead.
79
+
80
+ The transition phase in **2012** happened to some extent because
81
+ I was still using ruby 1.8.x and had to make several changes to
82
+ the old web-foundation project, in order to have my code work on
83
+ **ruby 1.9.3** anyway.
84
+
85
+ The rewrite would allow me to change some design decisions I made earlier
86
+ on, which were not that ideal - in other words, to allow me to discard
87
+ some of the old code at the same time (which again happened in 2018,
88
+ when I cleaned up the cyberweb project, after many years of
89
+ "semi-activity" only).
90
+
91
+ The **rewrite** step worked for the most part, even though it took me
92
+ longer than expected. While the code base is still not "perfect", it is
93
+ quite ok and also to some extent documented this time - at the least much
94
+ better than it used to be in the old code before. I will continue to
95
+ improve the documentation slowly over time.
96
+
97
+ In my opinion, it is quite common to rewrite web-related projects in ruby
98
+ in general- see manveru's old **Ramaze** project, for instance, which
99
+ unfortunately was abandoned at a later time. (Innate was created prior
100
+ to that **→** https://github.com/Ramaze/innate.)
101
+
102
+ Essentially **cyberweb** integrates what I learned over the years, so
103
+ I built some sort of "framework" for the web. It is actually not
104
+ necessarily a framework only as such but more a tool-set project for
105
+ the www. There won't be a lot of idioms used such as could be seen
106
+ in rails - because the cyberweb project is way too simple to make use
107
+ of complicated idioms. You can even call it a dumb project, too, on
108
+ purpose. I do not like the proliferation of complication and complexity
109
+ that the modern web-era induced onto developers - just look at the
110
+ amount of JavaScript frameworks that emerge and disappear over the
111
+ years. Anyone still remember Mochikit? Or the era before Mochikit?
112
+
113
+ The **cyberweb project** has combined, and thus integrated, the
114
+ following **older components** that have existed at various
115
+ moments in time or may still exist:
116
+
117
+ - web foundation
118
+ - Ruby-CGI (a snapshot, including the excellent cgi-exceptions functionality)
119
+ - cybersprawl
120
+ - sinatra mapping
121
+
122
+ This may not be hugely important to know, but it explains a bit of
123
+ the historic origin for the cyberweb project.
124
+
125
+ ## Aim, Goals and Scope of the Cyberweb project
126
+
127
+ This subsection will detail some of the goals of the Cyberweb project.
128
+
129
+ Before describing the **cyberweb** project in more detail, please keep in
130
+ mind that the project is fairly incomplete, not even in an early beta stage;
131
+ and that it is presently catered to my own use cases, so it may not work for
132
+ you. Consider it more as a proof-of-concept project than something you
133
+ may want to use for production. Sinatra may be a much better choice for
134
+ the latter.
135
+
136
+ At any rate, let's next see for the aims and goals of the **web_object**
137
+ project.
138
+
139
+ The **Cyberweb** project is both a collection of web-related tools
140
+ (thus, **a toolset project**) and a web "framework". Both terms
141
+ will be defined next.
142
+
143
+ What is meant with a "set of web-related tools"? This means that there
144
+ will be code, written in ruby, that aims to solve problems related to
145
+ the **world wide web**, ranging from small to medium-sized issues.
146
+
147
+ This may also include formatters and linters for e. g. JavaScript in
148
+ principle, but it can also include file-generators or related to
149
+ managing files, directories, css files, javascript files, and so
150
+ forth. A **set of tools**.
151
+
152
+ The other part of the Cyberweb project is to act as a "framework",
153
+ that is - to provide code that can be used for higher abstractions
154
+ when creating **web-apps**.
155
+
156
+ Note that the Cyberweb project itself is not necessarily extremely
157
+ opinionated. Different strategies may be used, be it **MVC** (model,
158
+ view, controller), be it plain oldschool .cgi or be it modern
159
+ microservices and REST APIs as such, such as used in rack and
160
+ sinatra/padrino. All can be combined and mixed together - in theory.
161
+ In practice, Cyberweb is of course limited mostly by my own time
162
+ investment, so different parts of the project will be more
163
+ comprehensive (and better) than other parts. The bottom line is
164
+ that there is "**no single strategy to rule them all**", as far
165
+ as the cyberweb project is concerned.
166
+
167
+ It is true that the Cyberweb project is, in itself, very traditionally
168
+ focused on the .cgi centric ways to develop web-apps. In theory, a
169
+ .cgi page could also be thought of as a **WebApp**. Nothing prevents
170
+ this really, other than some old assumptions about CGI.
171
+
172
+ In the long run, expect the Cyberweb project to become more general and
173
+ hopefully more "modern" as well, as I work on improving the documentation
174
+ in the next step (no possibility to have more users without **high
175
+ quality documentation**).
176
+
177
+ Since June 2021 two new goals were added to this project:
178
+
179
+ - It will contain documentation in regards to useful CSS knowledge.
180
+ - It will contain documentation in regards to useful JavaScript knowledge.
181
+
182
+ There are two reasons for this. The more important reason was that I
183
+ wanted to bundle web-related stuff into one project, and just use
184
+ that project, rather than dilute this to many separate projects.
185
+
186
+ The second reason was that I have collected a lot of knowledge over
187
+ the years about CSS and JavaScript, and wanted to keep them
188
+ presented (and presentable) in a single project as well. This means
189
+ that there may be pure CSS, pure HTML and pure JavaScript
190
+ examples distributed within the Cyberweb project as well.
191
+
192
+ ## Features
193
+
194
+ For a more complete documentation of the above features, please check
195
+ out the file FEATURES.
196
+
197
+ - You can select various different default CSS templates. They will be
198
+ stored in the CSS/ directory by default. To use them, pass a symbol
199
+ to the method invocation for css_style=(). They are numbered in
200
+ succession, so template1, template2 etc..
201
+
202
+ Example for this on the main w object:
203
+
204
+ w.css_style = :template1
205
+
206
+ This will default to the template1.
207
+
208
+ Currently the way to add new templates is to expand the case menu.
209
+
210
+ ## CSS templates
211
+
212
+ CSS templates can be designated by assigning to a symbol, such as
213
+ this:
214
+
215
+ w.css_style = :template1
216
+
217
+ The templates are stored in the cascading_style_sheets/ subdirectory.
218
+
219
+ Other templates are :default and :code.
220
+
221
+ Note that it is currently (2021) unsure whether templates will be
222
+ expanded. They will probably be retained, but may have to be
223
+ reviewed again to determine whether they are sufficiently useful
224
+ or not.
225
+
226
+ ## Cyberweb.set_path_to_images
227
+
228
+ The method **Cyberweb.set_path_to_images()** can be used to set the
229
+ path to a global image directory, that is - a directory that holds all
230
+ images. On my home system this defaults to **/home/x/data/images/**.
231
+
232
+ I put almost all images into this directory, but there are exceptions
233
+ to this.
234
+
235
+ Note that this directory will only be of relevance if the configuration
236
+ options for web_object were set up to use such a directory in the
237
+ first place. Only image-related methods are affected by this
238
+ setting anyway.
239
+
240
+ ## Images
241
+
242
+ If an image is not existing, but used within the Cyberweb
243
+ framework, then a a red border and a red text will be
244
+ displayed around that (non-existing) image.
245
+
246
+ This way, the user is being encouraged to fix the problem at hand.
247
+
248
+ However had, it may also be annoying to see it if the user can NOT
249
+ fix/change this.
250
+
251
+ This is why the red warning or warnings in general, can be reduced
252
+ or disabled - have a look at the configuration file for this.
253
+
254
+ If warnings are set to verbose, then the web_object project will
255
+ display the above notification for images not found. If it is set
256
+ to normal or lower than that, the web_object project will not
257
+ display that warning.
258
+
259
+ ## Balloon.css
260
+
261
+ You can download the **balloon.css** file via class
262
+ **DownloadBalloonCss** (**Cyberweb::DownloadBalloonCss**).
263
+
264
+ This file resides at the location
265
+ <b>web_object/utility_scripts/download_balloon_css.rb</b>.
266
+
267
+ It presently (May 2018) does not do much other than download
268
+ that remote .css file.
269
+
270
+ I needed a small "pop-up" for displaying additional information
271
+ to some entries in a table, which is how I found **Balloon.css**.
272
+
273
+ ## Proper (default) order of arguments to many methods in the Cyberweb project
274
+
275
+ The Cyberweb project uses quite a few methods that have more than 4
276
+ or 5 parameters.
277
+
278
+ The typical order for these methods is the following:
279
+
280
+ (**1**) the content belonging to the tag at hand
281
+ (**2**) the css class that is to be used for that tag (defaults to class WebTag)
282
+ (**3**) the id to that HTML element (optional)
283
+ (**4**) the css style for that tag (optional)
284
+ (**5**) javascript code to that tag (optional)
285
+
286
+ ## Greek letters
287
+
288
+ The old greek letters are specified via shortcuts such as <b>&sigma;</b>
289
+ in HTML. The **&sigma;** variant would display the small sigma
290
+ character; the constant SIGMA_SMALL or just SIGMA will allow you to
291
+ refer to this constant within the Cyberweb project.
292
+
293
+ You can output a table with all available greek letters by issugin
294
+ the following command:
295
+
296
+ Cyberweb.show_greek_letters
297
+
298
+ ## SVG
299
+
300
+ If you wish to make use of SVG it is recommended to install the
301
+ **svg_paradise** project. Then, you can use it through Cyberweb
302
+ such as in the following case:
303
+
304
+ ee Cyberweb.circle
305
+
306
+ This will output a SVG circle. Do note that this can be customized;
307
+ simply have a look for the SVG Paradise project for more
308
+ documentation pertaining to this part.
309
+
310
+ ## Javascript-support in the Cyberweb project
311
+
312
+ Have a look at the subdirectory called **javascript/**.
313
+
314
+ If a new javascript-component is added, it should be registered
315
+ in one of the .rb files in said directory.
316
+
317
+ ## Commandline usage
318
+
319
+ A commandline program exists, at <b>bin/cyberweb</b>.
320
+
321
+ This file allows you to generate a new file-skeleton, such as
322
+ via:
323
+
324
+ cyberweb foo.cgi
325
+ cyberweb index.cgi
326
+
327
+ You can also get some feedback over what it can do, via
328
+ "cyberweb --help".
329
+
330
+ ## The interactive web_object-shell
331
+
332
+ There also exists an interactive **cyberweb-shell**, which may be
333
+ used to test out various things - but it is fairly unfinished, so I
334
+ do not recommend anyone to use it as of yet (2018).
335
+
336
+ The idea is to have this work as some kind of developer-console
337
+ where web-related activities can be tested.
338
+
339
+ ## HtmlTags
340
+
341
+ Since as of cyberweb version 0.0.5, a dependency exists on a
342
+ project called **html_tags**, which was created in order to
343
+ separate the generation of HTML tags out from the rest of
344
+ the framework.
345
+
346
+ The idea is to hold a full HTML page in a special object, the so
347
+ called "web_object", and to then .serve() said object when it is
348
+ required. Which essentially is done through a .cgi page.
349
+
350
+ Since as of **April 2019**, the old .cgi approach will be extended;
351
+ while .cgi will be always supported in the Cyberweb project, an
352
+ approach similar to **sinatra** will eventually be adopted as well.
353
+
354
+ ## Include the cyberweb project on a website
355
+
356
+ To include the cyberweb project on a website, in your .cgi script
357
+ for instance, do use this line:
358
+
359
+ require 'cyberweb/autoinclude'
360
+
361
+ You can then populate the @web_object object, which resides in the
362
+ main Cyberweb-namespace, and which is also aliased through a
363
+ convenience method called w(). If you autoinclude Cyberweb
364
+ then you can use the w() method directly.
365
+
366
+ This allows you to describe a webpage, such as by issuing the
367
+ following code:
368
+
369
+ w {
370
+ title 'My first homepage'
371
+ body_css 'mar1em'
372
+ h2 'Hello World!'
373
+ use_jquery
374
+ }
375
+
376
+ Note that this should happen on separate lines - the description
377
+ here for the gem does not replace newlines with the html <br> tag.
378
+
379
+ Inside **w {}** you can issue special instructions, such as use_jquery
380
+ or disable_webimages. The former allows us to use jquery, the latter
381
+ disables webimages. (Webimages are small icons that I find myself
382
+ to use a lot. If you wish to use these images, have a look at
383
+
384
+ http://shevegen.square7.ch/STD.tar.xz
385
+
386
+ )
387
+
388
+ ## Configuration - and editing the configuration file (which is a yaml file)
389
+
390
+ Keep in mind that you can modify a lot of the configuration that
391
+ the Cyberweb project uses, through the yaml files stored in the
392
+ <b>configuration/</b> subdirectory.
393
+
394
+ If you need to display the configuration settings via web-page,
395
+ you can always use the method .show_config(), on the main
396
+ Cyberweb, such as via either of the following code:
397
+
398
+ w.show_config
399
+ div('mars3em') { w.show_config }
400
+
401
+ You can also just show the configuration setting without depending
402
+ on the web-object, through this module-level method:
403
+
404
+ Cyberweb.show_configuration_settings
405
+
406
+ The main **configuration file**, a .yml file, can also be modified
407
+ through a commandline "interface", via:
408
+
409
+ cyberweb edit
410
+
411
+ This presently uses a hardcoded value (towards the editor
412
+ called **vim**).
413
+
414
+ You can also query the current configuration via appending **config?**
415
+ such as in:
416
+
417
+ http://localhost/DATA/personal/sitemap.cgi?config?
418
+
419
+ ## HTML Tables and the Cyberweb project
420
+
421
+ The method table() is the primary entry point for table-related
422
+ tags. The first three arguments are:
423
+
424
+ css class to use
425
+ ID of the table
426
+ css style to use
427
+
428
+ You can also, optionally, pass in a dataset to the table,
429
+ such as an Array, via a block argument.
430
+
431
+ The following example shows how to do that:
432
+
433
+ table('mars1em','test_table1','border:1px solid rand') { %w(
434
+ this is a test table1 with every individual
435
+ entry becoming populated into the table
436
+ )}
437
+
438
+ The part after the {} constitutes the Array that is passed into
439
+ the table.
440
+
441
+ By default this will use two td-elements, aka table data elements.
442
+ The third element goes on a new line, aka via a closing **tr**
443
+ tag (in HTML parlance).
444
+
445
+ Note that you can use variants of table() if you need a different
446
+ amount of **td** tags.
447
+
448
+ For example, **table4()** can be used to denote a table with
449
+ 4 elements per row:
450
+
451
+ table4('mars1em','test_table1','border:1px solid rand') { array_goes_here }
452
+
453
+ You can also set global CSS classes to class Table:
454
+
455
+ Table.set_css_class 'bblack5 pink_border3 marl2em mart1em'
456
+
457
+ For a longer explanation of that .set_css_class() functionality, have a
458
+ look at the link here at **HTML Tables and the Cyberweb project**.
459
+
460
+ Note that you do not have to supply any arguments to table() aside
461
+ from the dataset given into it as block - a simple Array will suffice:
462
+
463
+ table { pass_array_here }
464
+
465
+ You can also style each **td** element, such as by tagging them
466
+ with a block border:
467
+
468
+ Td.set_css_class 'bblack1'
469
+ table('mars2em') { %w(
470
+ This is just an example Array
471
+ )}
472
+ Td.set_css_class ''
473
+
474
+ The last line of code will again clear the default set to **Td**.
475
+
476
+ ## The name cyberweb
477
+
478
+ You may wonder why the name used to be **cyberweb**.
479
+
480
+ There is not a single good reason for this other than, firstly, I
481
+ thought it was related to the web - so I included web. And
482
+ cyber? Well, I like science fiction; and cyber sort of fits
483
+ to the www too, at the least to some parts.
484
+
485
+ The idea for a "social" web, from the point of view of the
486
+ older web-foundation project (the predecessor to the
487
+ cyberweb project), was to call this the "cybersprawl".
488
+ The name **cybersprawl** would indicate a **virtual
489
+ meet-up place for people**.
490
+
491
+ This may sound a bit confusing but it is sort of how the name
492
+ gradually evolved - and eventually became **cyberweb**,
493
+ before it was renamed to **web_object** in 2020. And at
494
+ a later time back to **cyberweb** - yup, I change
495
+ the project names way too quickly. But the name used to
496
+ by cyberweb in the past, so I am slowly getting used to
497
+ that name.
498
+
499
+ ## Creating input-buttons in a HTML-form field
500
+
501
+ <form>
502
+ <input type="button" class="BG_GRAYSTD bblack1" value="Default" name="foo" onClick="test1(this.form)">
503
+ </form>
504
+
505
+ <form>
506
+ <input class="BG_GRAYSTD bblack1" type="button" value="Default" name="foo" onClick="test1(this.form)">
507
+ </form>
508
+
509
+ ## HTML Entities
510
+
511
+ If you wish to remove HTML entities from a given input string
512
+ at hand, you can use **Cyberweb.escape_html()** or one of its
513
+ alias.
514
+
515
+ Example:
516
+
517
+ Cyberweb.escape_html('abc') # => 'abc'
518
+ x = '<p>this is (&nbsp;) a test</p><div> Ok -&amp; outcome will be </div>'; y = Cyberweb.html_entities(x) # => "&lt;p&gt;this is (&amp;nbsp;) a test&lt;/p&gt;&lt;div&gt; Ok -&amp;amp; outcome will be &lt;/div&gt;"
519
+
520
+ ## Specifying a monospace font to use
521
+
522
+ The Cyberweb has a method that allows you to use a monospace font.
523
+
524
+ Within your Cyberweb instance, such as:
525
+
526
+ w {
527
+ }
528
+
529
+ You can add any of the following two lines:
530
+
531
+ use_monospace_font
532
+ monospace_font
533
+
534
+ This will use a monospaced font. I needed this functionality because
535
+ I sometimes use the pre-tag, and display numbers in a table-fashion,
536
+ for where it may be useful to use a monospaced font, so that the
537
+ alignment of the text is easier.
538
+
539
+ ## Setting a title on a webobject
540
+
541
+ You can set a title on the default webobject via:
542
+
543
+ set_title()
544
+
545
+ You can omit this call, in which case we will default to
546
+ the filename of the page in question, such as for a
547
+ file named **foobar.cgi**, the corresponding title
548
+ would simply be "foobar".
549
+
550
+ You can also use markdown files if you want to. I personally
551
+ use a file such as **TITLE.md** or **TITEL.md**. The method
552
+ call will try to read in the file content, and then use
553
+ that as the title, **if the file exists**.
554
+
555
+ ## The default image directory
556
+
557
+ The default image directory is defined in default_image_directory.yml
558
+
559
+ At least the name of the image directory.
560
+
561
+ ## Viewing the source of a webpage
562
+
563
+ Use the view_source() method to add a javascript button,
564
+ to view the source of a page. The method view_source()
565
+ is defined in the file shared.rb.
566
+
567
+ ## Modify the input tag
568
+
569
+ You can modify the <input> tag within that via css by using:
570
+
571
+ input.view_css {}
572
+
573
+ ## HTML IDs
574
+
575
+ All HTML ids are registered into an array. To then show whether
576
+ you have duplicated IDs in a page, do this:
577
+
578
+ show_duplicated_ids()
579
+
580
+ Or in a more general way, use the #debug method, like so:
581
+
582
+ w.debug
583
+
584
+ This will report whether you have a duplicated ID or not.
585
+ When the page is served, we will also display a little error
586
+ message in case we have found duplicated IDs. This way we
587
+ can notify the developer that there is some mistake in his
588
+ page and we can correct this mistake then.
589
+
590
+ ## The table-tag
591
+
592
+ The tag table() now supports blocks. That means you can use arrays
593
+ in tables:
594
+
595
+ table { %w( one two three for ) }
596
+
597
+ Or styled with CSS:
598
+
599
+ table('s1em bblack1') { %w(one two three for) }
600
+
601
+ You can combine fieldset with table and a caption, by doing:
602
+
603
+ table_with_caption('title of caption goes in here')
604
+
605
+ ## Global CSS classes
606
+
607
+ In general, every HTML tag has **a representative ruby
608
+ class**, with the first character being upcased.
609
+
610
+ For example, the div tag can be accessed, in some ways,
611
+ through **class Div**. An example follows next.
612
+
613
+ Say that you wish to colourize all div tags on the
614
+ given webpage with the colour red. The following code
615
+ will do that:
616
+
617
+ Div.set_css_class 'red' # Now all divs are red.
618
+
619
+ This will still require a CSS class defined called .red,
620
+ which has the content **{ color: red; }**. However had,
621
+ in a future release, Cyberweb may do this automatically,
622
+ at the least for colours (we need to keep in mind that
623
+ code should not be ambiguous).
624
+
625
+ The point of the above code is to provide you with a
626
+ simple way to quickly style all HTML tags in some
627
+ way. You may not want to find this too overly useful,
628
+ but at the least the functionality exists for when
629
+ you **may** need this.
630
+
631
+ Do note that you can remove the above via:
632
+
633
+ Div.clear
634
+
635
+ again.
636
+
637
+ This works for **all** HTML tags by the way, for when
638
+ it makes sense for such a tag to have that possibility.
639
+
640
+ An alternative may be:
641
+
642
+ Cyberweb.clear :div
643
+
644
+ This would clear any predefined-css-class for any tag.
645
+ Both Div.clear and Cyberweb.clear :div are equivalent -
646
+ use whatever seems better or easier for you.
647
+
648
+ Let's give another example - say that you want to modify
649
+ the default CSS class for the html table tag:
650
+
651
+ Table.set_css_class 'bblack5 pink_border3 marl2em mart1em'
652
+ Cyberweb::Table.set_css_class 'bblack5 pink_border3 marl2em mart1em'
653
+
654
+ (The second variant is necessary if you did not do
655
+ **include Cyberweb** before.)
656
+
657
+ After this was done, you can always query the css class via:
658
+
659
+ Table.to_s
660
+
661
+ In fact, this is used as default argument to arguments in
662
+ method definitions (with the corresponding name of the
663
+ html tag).
664
+
665
+ Cyberweb also has some pre-defined tags, and CSS classes that
666
+ can be used across different projects.
667
+
668
+ One such method is **cmd()** - this originally stood for
669
+ "command", and was used to display commands that the user
670
+ could input into a terminal/shell, on Linux.
671
+
672
+ The method cmd() has a pre-defined CSS class that can be
673
+ queried like this:
674
+
675
+ Cyberweb.css_for_cmd? # => "marl1em BOLD"
676
+
677
+ These are two CSS classes. **marl1em** means **margin-left: 1em**,
678
+ and **BOLD** means, well, **font-style: bold**.
679
+
680
+ This query method exists primarily due to convenience. In November
681
+ 2019 I needed to query the old default, change it, then re-assign
682
+ it to the main CSS class in use there.
683
+
684
+ You can also designate another default, like by this way:
685
+
686
+ Cyberweb.css_for_cmd = 'marl1em steelblue BOLD'
687
+
688
+ ## Hiding / disabling scrollbars
689
+
690
+ You can use:
691
+
692
+ hide_scrollbars
693
+
694
+ in the **main web_object** to hide the scrollbar, by making use
695
+ of CSS. I recommend against this, because it may annoy some
696
+ users, but it was enabled because sometimes there may be use
697
+ cases to NOT have a scrollbar at all.
698
+
699
+ The idea was taken from:
700
+
701
+ https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp
702
+
703
+ ## Showing the source code of a particular file
704
+
705
+ By default every file that is part of the cyberweb project can
706
+ show its source to the visitor, by appending:
707
+
708
+ ?source
709
+ ?view_source
710
+
711
+ to the URL.
712
+
713
+ For example, on my home system I make use of this like so:
714
+
715
+ http://localhost/data/video/play_this_video_file.cgi?source
716
+
717
+ Evidently this is not always wanted and will, in the future,
718
+ have means to disable this (or selectively enable it in the
719
+ configuration file). But for the time being (January 2020)
720
+ this is the way how things work - after all, even with
721
+ criticism about this functionality, it **is** a feature
722
+ too.
723
+
724
+ ## HTML header tags
725
+
726
+ HTML has, by default, different header tags, starting with **h**.
727
+
728
+ For example we have:
729
+
730
+ <h1>This is h1</h1>
731
+ <h2>This is h2</h2>
732
+ <h3>This is h3</h3>
733
+ <h4>This is h4</h4>
734
+ <h5>This is h5</h5>
735
+ <h6>This is h6</h6>
736
+
737
+ The corresponding generator in Cyberweb is:
738
+
739
+ h1 'This is h1'
740
+ h2 'This is h2'
741
+ h3 'This is h3'
742
+ h4 'This is h4'
743
+ h5 'This is h5'
744
+ h6 'This is h6'
745
+
746
+ If you also wish to make the content displayed there as
747
+ the id="" setting, then you can use:
748
+
749
+ h1_id 'This is h1'
750
+ h2_id 'This is h2'
751
+ h3_id 'This is h3'
752
+ h4_id 'This is h4'
753
+ h5_id 'This is h5'
754
+ h6_id 'This is h6'
755
+
756
+ The **id** at hand will be the content, so this is more
757
+ useful for short header-entries, such as "Goals" or
758
+ "Aims" or "Introduction" and so forth. The latter
759
+ functionality purely exists due to convenience - I wanted
760
+ to quickly generate the default id entry for a sitemap.
761
+
762
+ ## JavaScript clock
763
+
764
+ If you wish to display a small JavaScript "clock" that just
765
+ shows the time, you could use this:
766
+
767
+ display_clock('pad1em') { :larger_font_size }
768
+
769
+ The block argument just increases the font-size a bit; it can
770
+ be omitted of course, as can all arguments, too:
771
+
772
+ display_clock
773
+
774
+ ## Redirecting to another page
775
+
776
+ You can combine BeautifulUrl, and Cyberweb, to redirect
777
+ to another page.
778
+
779
+ Example:
780
+
781
+ http://localhost/DATA/misc/sitemap.cgi?redirect_to=ruby_todo
782
+
783
+ This would redirect me to my local todo-file in ruby. In fact:
784
+ that was the primary reason why the code was added, so that I
785
+ can use the web-server as a pseudo file system.
786
+
787
+ Evidently not everyone may want this feature, so in the long
788
+ run this may have to be modified - but for now it will remain
789
+ as it is. It can be used to quickly "jump" to another page,
790
+ both a local page or a remote page.
791
+
792
+ ## Viewing the content of any file
793
+
794
+ You can view the content of any file via:
795
+
796
+ http://localhost/DATA/misc/sitemap.cgi?view_file=ruby_todo
797
+
798
+ This can be disabled since as of **May 2021, by setting the
799
+ **view_file: true** in the project configuration .yml file.
800
+ I recommend to do so, as you probably don't need this
801
+ functionality. I needed it for my local webserver, to
802
+ quickly test things, and view local files in the browser,
803
+ no matter where they reside (which is handled by another
804
+ gem, which is not published, as it is for internal use
805
+ only).
806
+
807
+ ## dropdown()
808
+
809
+ You can use the dropdown() method to use several &lt;select>
810
+ statements.
811
+
812
+ Examples:
813
+
814
+ dropdown( %w( a b c ) )
815
+ dropdown( %w( a b c ) ) {{ selected: 2 }}
816
+ dropdown( %w( a b c ) ) {{ selected: 3 }}
817
+
818
+ The latter variant will have the second entry selected as default;
819
+ we begin to count at 1 here, not 0.
820
+
821
+ ## Cyberweb.display_all_files_in_this_directory
822
+
823
+ The method **Cyberweb.display_all_files_in_this_directory()**
824
+ can be used to simply and quickly display the content of
825
+ all files in the given (target) directory.
826
+
827
+ Example:
828
+
829
+ Cyberweb.display_all_files_in_this_directory '/tmp'
830
+
831
+ I needed this functionality because I had many standalone
832
+ .py files holding matplotlib code and I needed to display
833
+ them, so this functionality was added in **May 2020**.
834
+
835
+ ## Register on-click events
836
+
837
+ If you want to register an on-click event and change the opacity value
838
+ of an element, you can use this method:
839
+
840
+ on_click_change_opacity '#drag_notepad','0.95'
841
+
842
+ The first argument is the ID of the target element, and the second value
843
+ is the opacity value - the lower that value is, the higher the opacity
844
+ (and thus, the highlighting).
845
+
846
+ Note that you can also combine this with a drag-action. For instance,
847
+ the symbol :drag_and_highlight means that we will combine both
848
+ actions here, thus allowing a drag-object action, and also a
849
+ on-click-highlighting action on the same object.
850
+
851
+ ## Body id
852
+
853
+ To set a body-id for the Cyberweb, you can use something like this:
854
+
855
+ body_id 'foobar'
856
+ set_body_id 'foobar'
857
+
858
+ This is equivalent to:
859
+
860
+ <body id="foobar">
861
+
862
+ Not a huge saving *per se*, but if you just want to keep a separate
863
+ entry for the id of the body, you can use this method on a
864
+ web_object instance.
865
+
866
+ ## Default CSS classes
867
+
868
+ The Cyberweb comes with some CSS classes pre-defined.
869
+
870
+ I am aware that not everyone may want this, but it is simpler
871
+ to bundle my css-classes into this project - both for my own
872
+ personal use case, but also because other people may see
873
+ how the project works. Furthermore, these CSS classes can
874
+ be quite convenient, allowing us to make use of shortcuts
875
+ to style elements on a given webpage.
876
+
877
+ ## Editable text
878
+
879
+ HTML5 allows the visitor to modify text on a webpage (although
880
+ not persistently).
881
+
882
+ The Cyberweb project also allows this. Example:
883
+
884
+ e('Type something here.') { :editable }
885
+
886
+ This would make a span-tag, following by a br-tag,
887
+ and the attribute that this is editable.
888
+
889
+ ## CSS helper code and how it relates to the Cyberweb project
890
+
891
+ This subsection attempts to detail how the **cyberweb** project
892
+ relates (and makes use of) **CSS**.
893
+
894
+ All my custom CSS rules are distributed in the subdirectory called
895
+ **cascading_style_sheets/**. You can find files such as **colours.css**
896
+ or **default.css** and so forth. Furthermore I have a local
897
+ directory at **/home/x/data/CSS/** which contains symlinks to the
898
+ subdirectory **cascading_style_sheets/**. This was done mostly
899
+ because it saves me some typing-work on the commandline.
900
+
901
+ **CSS** can, in principle, be accessed through the predefined global
902
+ object named **@css**.
903
+
904
+ This object can be accessed via "css" or via the helper method
905
+ called **css()**. (Remember that you can omit the () in ruby).
906
+
907
+ A specific usage example would look like this:
908
+
909
+ css.foobar
910
+
911
+ The idea here was that we could treat all the CSS code in any given
912
+ web-app as an object too, and manipulate it if needed.
913
+
914
+ Additionally, we would also be able to modify default CSS assignments
915
+ given to some methods, redefine them and so on.
916
+
917
+ Do note that since as of 2020, I am no longer as convinced that
918
+ this is really that useful. So consider this a bit of
919
+ **work-in-progress** rather than a finished solution that other
920
+ people should use.
921
+
922
+ For instance, to change the default for the HTML tag **h4**, the
923
+ following code could be used:
924
+
925
+ css.h4.custom_css = 'padl1em'
926
+
927
+ The idea here was to be able to re-define which custom CSS class is to
928
+ be used. (padl1em is my abbreviation for **padding-left: 1em**)
929
+
930
+ An alternative syntax exists as well - this is the better way, in my
931
+ opinion, and **should be used**:
932
+
933
+ Table.set_css_class 'bblack5 pink_border'
934
+ Div.set_css_class 'mar3em'
935
+
936
+ I personally like explicit setters like the above, but the following
937
+ variants are equivalent:
938
+
939
+ Table.css_class = 'bblack5 pink_border'
940
+ Div.css_class = 'mar3em'
941
+
942
+ ## CSS Basics
943
+
944
+ This short subsection just keeps some information about CSS, in the
945
+ event I forget stuff, or need to look it up quickly, or other people
946
+ may read something new.
947
+
948
+ A style sheet in CSS can be broken down into the following smaller
949
+ bits:
950
+
951
+ ➤ Style sheet
952
+ ➤ Rule
953
+ ➤ Selector
954
+ ➤ Declaration
955
+ ➤ Property
956
+ ➤ Value
957
+
958
+ When more than one selector appears in the same rule, they are said
959
+ to be <b>grouped</b>.
960
+
961
+ An example for grouping in CSS is shown next:
962
+
963
+ th, td { padding: 0 10px 0 0; }
964
+
965
+ You can space out the selectors onto different lines, such as via
966
+ this way:
967
+
968
+ th,
969
+ td {
970
+ padding: 0 10px 0 0;
971
+ }
972
+
973
+ Use whatever style you prefer.
974
+
975
+ HTML elements may treat CSS-width differently. The <table> element,
976
+ for instance, only expands horizontally to accommodate its data,
977
+ which is also called "shrink-to-fit". The <div> element, on the other
978
+ hand, expands horizontally as far as there is space, which is
979
+ called "expand-to-fit".
980
+
981
+ If you encounter a CSS rule with a <b>!important</b> classifier
982
+ then this rule can not be overruled. It became a fixed rule.
983
+
984
+ The hexadecimal notation #FFF is a short hand for #FFFFFF (which
985
+ is actually white).
986
+
987
+ RGB values in CSS may also be represented using percentages.
988
+
989
+ Example for this:
990
+
991
+ body {
992
+ background-color: rgb(50%, 50%, 50%);
993
+ }
994
+
995
+ A class-selector looks like this:
996
+
997
+ .foobar {
998
+ margin: 10px 0; # And similar comments
999
+ }
1000
+
1001
+ The **.** indicates that we want to use a class-selector definition.
1002
+
1003
+ The above class-selector is valid for every HTML tag that wants to
1004
+ use it. You can limit this and confine it to only some elements.
1005
+
1006
+ For example, to limited this only to div-tags, use:
1007
+
1008
+ div.foobar {
1009
+ }
1010
+
1011
+ Interestingly you can also chain class names together such as:
1012
+
1013
+ .foo.bar {
1014
+ background-image: url(foobar.jpg);
1015
+ }
1016
+
1017
+ This means that it will only apply to any element that
1018
+ has both foo and bar as classes.
1019
+
1020
+ ID selectors in CSS can be used like this:
1021
+
1022
+ <style type="text/css">
1023
+ #foobar {
1024
+ background-image: url(foobar.jpg);
1025
+ }
1026
+ </style>
1027
+ <div class="planet" id="foobar">
1028
+ <h2>Foobar</h2>
1029
+ </div>
1030
+
1031
+ The **universal selector** in CSS is an asterisk. When used
1032
+ alone, the **universal selector** tells the CSS interpreter to
1033
+ **apply the CSS rule to all elements in the document**.
1034
+
1035
+ An example showing this follows next:
1036
+
1037
+ * {
1038
+ font-family: Arial, Helvetica,sans-serif;
1039
+ }
1040
+
1041
+ In CSS, **descendant** refers to an element that is a
1042
+ child of another element.
1043
+
1044
+ To target an element based on its ancestor the CSS should be
1045
+ written in this way:
1046
+
1047
+ div.foobar h2 {
1048
+ font-size: 18px;
1049
+ margin-top: 0;
1050
+ }
1051
+
1052
+ CSS pseudo-classes are used to represent dynamic events, a change
1053
+ in state, or a more general condition present in the document
1054
+ that is not easily accomplished through other means. Unlike normal
1055
+ classes, pseudo-classes have a single colon before the
1056
+ pseudo-class property.
1057
+
1058
+ Some browsers will apply the :link pseudo class styles to all links.
1059
+ Therefore it may be prudent to define the same properties in :link
1060
+ and :visited, so that the correct styles are applied.
1061
+
1062
+ For keyboard-focus you can use the pseudo-element **:focus**:
1063
+
1064
+ a:focus {
1065
+ text-decoration: underline;
1066
+ }
1067
+
1068
+ ## Cyberweb.string_image()
1069
+
1070
+ The method **Cyberweb.string_image()** can be used to return
1071
+ a proper HTML img tag, as String. This can then be used to
1072
+ embed it into some website.
1073
+
1074
+ The input to this method will be an Array, since we use
1075
+ *args there. The first entry should be the URL to the
1076
+ image at hand - this can be a local URL or a remote URL.
1077
+
1078
+ A Hash can also be given. Such a Hash should have a key
1079
+ called **:url** to denote the image.
1080
+
1081
+ Note that the method **Cyberweb.string_image()** is quite
1082
+ long, in order to cover for different use cases. The
1083
+ document here will not detail all these options, but a
1084
+ few may be explained next:
1085
+
1086
+ :guess_id # This means that the ID will be "guessed" based on the filename at hand.
1087
+ :guess_draggable_id # This is as above, but will prepend the string 'drag_' before, to allow for dragging the image at hand.
1088
+
1089
+ Personally I use **:guess_draggable_id** usually, as it helps me
1090
+ remember what this is doing. :-)
1091
+
1092
+ To make all images draggable, use this API:
1093
+
1094
+ all_images_will_be_draggable
1095
+
1096
+ ## Future goals for the Cyberweb project
1097
+
1098
+ There are a tons of things I always wanted to add or have
1099
+ available in a web-toolkit - a simple webforum; a blog engine
1100
+ and system for managing the content therein; the possibility
1101
+ to easily scrape remote websites, with code that is simple
1102
+ to understand, write, use (via a web-interface) and maintain.
1103
+ And many more goals - in short, to use the browser as the
1104
+ main tool.
1105
+
1106
+ Inertia and laziness is one (or two) reason(s) why these goals have
1107
+ not yet been implemented, largely because I find myself facing
1108
+ non-web related issues more often than web-related issues.
1109
+ So naturally, more of my time goes into non-web related
1110
+ issues. Furthermore, I really dislike JavaScript - if only
1111
+ we could describe everything via Ruby instead ...
1112
+
1113
+ For the design of the Cyberweb project (and I am aware that
1114
+ a LOT of it could be improved here), I am wondering whether
1115
+ it would not be better to actually replace all of the
1116
+ dichotomy out there in regards to the www, with "**one language
1117
+ to rule them all**" as a solution. I don't even refer to ruby
1118
+ primarily as such, even though Cyberweb is evidently written
1119
+ in ruby - but what I mean is ... **consider the following** ...
1120
+
1121
+ Why do we have to write JavaScript?
1122
+ Why do we have to write CSS?
1123
+
1124
+ Why can't we let our computers actually generate the "logic"
1125
+ behind these programming languages or markup languages?
1126
+
1127
+ For example, take:
1128
+
1129
+ set_font 16
1130
+
1131
+ This could mean a (any) font with 16 pixels in size.
1132
+
1133
+ It's quite simple to use this from within Cyberweb:
1134
+
1135
+ w {
1136
+ set_font 16
1137
+ }
1138
+
1139
+ Done!
1140
+
1141
+ We could even get rid of the '_' there perhaps:
1142
+
1143
+ w {
1144
+ set font 16
1145
+ }
1146
+
1147
+ Don't mind the "set_font" name; we could easily use
1148
+ this (or allow several aliases):
1149
+
1150
+ w {
1151
+ fontsize 16
1152
+ }
1153
+
1154
+ Or:
1155
+
1156
+ w {
1157
+ font size 16
1158
+ }
1159
+
1160
+ (The **w** is a shortcut to tap into the web-object
1161
+ instance.)
1162
+
1163
+ The primary thing of note here is - why would we **HAVE**
1164
+ to use CSS in order to style a webpage? Why not use, in
1165
+ this case, Ruby? Or any other language for that matter?
1166
+ Ideally one language to describe all these disparate
1167
+ languages (**HTML/CSS/JavaScript**) and the logic found
1168
+ in them.
1169
+
1170
+ Based on this thinking, when you apply this on everything,
1171
+ including JavaScript, you actually should be able to
1172
+ write something that is simple and works - and have
1173
+ ruby interprete it correctly. Or perhaps another language,
1174
+ similar to how LLVM works or perhaps the WebAssembly
1175
+ project, to some extent.
1176
+
1177
+ So, for example:
1178
+
1179
+ on_mouse_click highlight_id('mouse_pic')
1180
+ on_mouse_click highlight_id(:mouse_pic)
1181
+
1182
+ Now, if you as the visitor are to click on this, say, a
1183
+ button or some other container element, you would highlight
1184
+ the element that has the **mouse_pic** id. This is quite
1185
+ easy to do via jquery as-is, but why even have to
1186
+ think about JavaScript at all?
1187
+
1188
+ I would like to have **a platform** where I can do simple
1189
+ manipulations, without having to worry about the
1190
+ underlying code implementation **AT ALL**.
1191
+
1192
+ So, this would constitute one **future goal** for web_object -
1193
+ to be able to do tasks, from Ruby, and have it applied
1194
+ to the whole **Cyberweb component**.
1195
+
1196
+ Note that WASM is in some ways a bit similar to this, in the
1197
+ sense that we become **less dependent** on JavaScript than
1198
+ before, since we can also use **other** languages. Of course
1199
+ this is still a far cry away from using just one format to
1200
+ describe everything, but still, it helps break up the monopoly
1201
+ of JavaScript, which is good that this happens. That way we
1202
+ aren't as imposed by the constraints that JavaScript puts
1203
+ onto us here anymore (in theory, at least).
1204
+
1205
+ ## Saving (storing) the content of the main web_object into a local file
1206
+
1207
+ You can save the main string into a file quickly, by using:
1208
+
1209
+ save
1210
+ # or
1211
+ web_object?.save
1212
+
1213
+ Note that this will save into the temp-directory. Your webserver
1214
+ needs to have access to it, as otherwise no file can be saved.
1215
+
1216
+ It may be simpler to use the last option, because of the main
1217
+ doc {} clause that is only finished after the w {} has completed.
1218
+
1219
+ That toplevel web_object? call taps into the main web-object.
1220
+
1221
+ ## Favicons
1222
+
1223
+ Favicons are **small images** that may be shown in the tab of
1224
+ the browser. I consider them potentially cute and even useful,
1225
+ as it may allow the user to quickly look for specific images
1226
+ through the browser-tabs.
1227
+
1228
+ According to this blog https://getkiss.org/blog/20191004a
1229
+ all among the major browsers will request a favicon, even
1230
+ if one has not been set. This evidently wastes a tiny
1231
+ bit of bandwith.
1232
+
1233
+ If you wish to avoid this then you can simply inline a
1234
+ favicon. The smallest "inline" favicon which
1235
+ which ensures zero HTTP requests is the following:
1236
+
1237
+ <link href=data:, rel=icon>
1238
+
1239
+ You can do so in Cyberweb too, as part of the
1240
+ **Cyberweb class**, via:
1241
+
1242
+ favicon :inline
1243
+ favicon :minimal
1244
+ favicon :none
1245
+
1246
+ Use any of these three variants and it will lead to the above
1247
+ minimal "inline" favicon. This is admittedly not too overly
1248
+ useful, but the functionality was added nonetheless simply as
1249
+ a proof-of-principle. And, who knows - perhaps the web_object
1250
+ project will one day also offer support for "minimal
1251
+ webpages".
1252
+
1253
+ ## rem units in CSS
1254
+
1255
+ In the past, the **em** unit was quite popular in .css files.
1256
+
1257
+ Since some years, such as 2011, **rem** units are increasingly
1258
+ more popular - see articles such as
1259
+ https://www.sitepoint.com/understanding-and-using-rem-units-in-css/.
1260
+
1261
+ I have not yet decided whether to use rem units or not, but
1262
+ I am aware of the differences. I may be too used toward **em**
1263
+ to transition into **rem**, and add more complexity that
1264
+ way - but for the time being (August 2020) nothing changes
1265
+ in this regard.
1266
+
1267
+ ## The td_row() method
1268
+
1269
+ The Cyberweb project has support for &lt;td> tags, via td() method
1270
+ calls.
1271
+
1272
+ Since inputting an Array of values padded with a td-tag is
1273
+ quite tedious, the method td_row() was added.
1274
+
1275
+ An example may be simplest to demonstrate this method:
1276
+
1277
+ td_row( %w( 256 128 64 32 16 8 4 2 1 ) )
1278
+
1279
+ This will generate valid td-tags for each of the given Array
1280
+ member, thus shortening the HTML code generated.
1281
+
1282
+ ## The WebImages components
1283
+
1284
+ **WebImages** are essentially just a small component of the
1285
+ Cyberweb project, available under the namespace
1286
+ **Cyberweb::WebImages**.
1287
+
1288
+ Since as of July 2020 the web_images component resides under
1289
+ the subdirectory at **web_object/images/**.
1290
+
1291
+ WebImages provide a way to map certain symbols, such as **:big_star**
1292
+ or **:rainbow_circle**, to **a corresponding image**.
1293
+
1294
+ To give another example for this: the symbol called **:alert** could
1295
+ be interpreted as **showing a small icon that is useful for
1296
+ notification towards the end user**. This is usually tied to a
1297
+ particular image, which is displayed on the webpage.
1298
+
1299
+ In the past, up until September 2020, these images were not
1300
+ distributed with the **web_object gem** for various reasons -
1301
+ one was that the **.gem** would become quite bigger. In
1302
+ September 2020 this approach was changed, and the WebImages
1303
+ are now also distributed as images. Some of these images were
1304
+ autogenerated via ruby code; others were "hand"-drawn in
1305
+ photoshop, kolourpaint or gimp, and others were re-used from
1306
+ permissive sources/licences. The licence for the images is
1307
+ different for the code: CC BY 4.0 (Attribution 4.0 International;
1308
+ see the following URL
1309
+ https://creativecommons.org/licenses/by/4.0/
1310
+ ).
1311
+
1312
+ Do note that even prior to September 2020, in **May 2019** I modified
1313
+ the prior assumption that no images are bundled within the
1314
+ web_object project slightly - some images were distributed within
1315
+ the **web_object project**, but not as an "actual" image; instead,
1316
+ they were (and still are) available as **base64-encoded
1317
+ Strings**. The following subsection describes how to make
1318
+ use of such base64-encoded Strings.
1319
+
1320
+ First, we have to **limit** the above statement - not all images will
1321
+ be distributed as base64-encoded Strings, only those that may be
1322
+ **somewhat useful** to lots of different people. Simple elements
1323
+ such as a dot, or an arrow-image - the latter could be used to
1324
+ indicate which hyperlinks could be clicked on a website, for
1325
+ instance. (You can also use the Unicode symbols in general,
1326
+ of course, which does not require any .png file or base64-encoded
1327
+ String. In some ways, Unicode has actually made it a lot easier
1328
+ to work on web-projects without needing to bundle specific images as such.)
1329
+
1330
+ Note that some websites claim that **Base64-encoded Strings** load up
1331
+ faster than e. g. loading up .png files. This may or may not be the
1332
+ case, but what we do know is that base64-encoded strings will be
1333
+ **somewhat larger** than the corresponding binary image. So I think
1334
+ this statement about a speed gain is really only true for smaller
1335
+ images at best - which is an advice that is repeated on the www in
1336
+ general, small is beautiful, and fast. So we will limit this approach
1337
+ mostly to **smaller images** in this context; this makes it a bit
1338
+ simpler to distribute the **web_object** gem as well.
1339
+
1340
+ If you want to see the available images, you can use this method to
1341
+ help you:
1342
+
1343
+ Cyberweb.display_the_registered_base64_images
1344
+
1345
+ In September 2020, this would tap onto this Array:
1346
+
1347
+ ["AUSRUFUNGSZEICHEN", "BLUEARROW", "BUBBLE", "CAT", "CAUTION",
1348
+ "CHEERING_PERSON", "CURSOR", "DUCKY", "DOT_01", "ELEPHANT",
1349
+ "HALLOWEEN", "HANGING_MONKEY", "LENS", "TU_WIEN_LOGO",
1350
+ "VOGEL"]
1351
+
1352
+ So, 15 images are so far made available as base64 string-encoded
1353
+ images.
1354
+
1355
+ Note that the images can be found under this directory:
1356
+
1357
+ web_object/images/real/
1358
+
1359
+ Unfortunately a major design constraint (aka a major bug) was
1360
+ discovered on 18.09.2020 (September 2020), leading to the
1361
+ reversion of this change. I may at a later time re-evaluate
1362
+ this; in the long run I really want to include these images
1363
+ too, by default. But since that change broke a lot of
1364
+ code in my own web-apps, I had to revert this for the time
1365
+ being. This will eventually be fixed, but it requires some
1366
+ larger rewrite, and I don't quite have the time commitment
1367
+ for this right now (it will include some architecture
1368
+ changes in the web_object library as well).
1369
+
1370
+ In June 2021 experimental support for arbitrarily converting
1371
+ image files to base64 strings was added to the Cyberweb
1372
+ project. This currently depends on imagemagick, so make
1373
+ sure to install it first. This is highly experimental, so
1374
+ do not yet use it. The idea is that we will simply convert
1375
+ any image to base64 if the user wants to do so.
1376
+
1377
+ The API currently looks like this:
1378
+
1379
+ img_base64 'STD/ZAUBERHUT.png'
1380
+
1381
+ This refers to my base directory for images; and then the
1382
+ path within that base directory.
1383
+
1384
+ This is currently only tested on my home system. At a later
1385
+ time I'll add support for any image-conversion, and most
1386
+ likely a cache system, to not have to decode all these
1387
+ images again and again and again. Instead, to just convert
1388
+ it once; right now Cyberweb always converts this, as that
1389
+ was easier to do in code.
1390
+
1391
+ You can also make this image draggable via:
1392
+
1393
+ draggable_img_base64(path_to_the_image_goes_in_here)
1394
+
1395
+ ## The Application Root
1396
+
1397
+ A typical web-related project needs to define and designate
1398
+ the **starting-point directory**. This is often called the
1399
+ "**application root**". The Cyberweb project will also refer
1400
+ to the base directory as the application root.
1401
+
1402
+ Presently Cyberweb uses a hardcoded approach mostly (sorry),
1403
+ but eventually it will transition into a more flexible
1404
+ approach.
1405
+
1406
+ ## Buttons
1407
+
1408
+ The following should work, in principle:
1409
+
1410
+ button {}
1411
+
1412
+ My long-term goal is to make this DSL work in web-applications
1413
+ as well as toolkits such as ruby-gtk.
1414
+
1415
+ ## How to vertically align any element via CSS
1416
+
1417
+ You can use:
1418
+
1419
+ display: flex
1420
+
1421
+ **display: flex** specifies a Flexbox layout for the element.
1422
+
1423
+ You can also use **align-items: center**, which would take
1424
+ care of the **vertical centering** in a container-element.
1425
+
1426
+ The CSS property **shape-outside** can be used to allow
1427
+ geometric shapes to be set, in order to define an area
1428
+ for text to flow around.
1429
+
1430
+ Example:
1431
+
1432
+ .shape {
1433
+ width: 500px;
1434
+ float: left;
1435
+ shape-outside: circle(50%);
1436
+ }
1437
+
1438
+ You do not need to use the flexbox, though. An older way is to define
1439
+ three div elements, such as by using these CSS classes:
1440
+
1441
+ .left {
1442
+ display: inline-block;
1443
+ width: 30%;
1444
+ height: auto;
1445
+ }
1446
+
1447
+ .middle {
1448
+ display: inline-block;
1449
+ width: 30%;
1450
+ height: auto;
1451
+ }
1452
+
1453
+ .right {
1454
+ display: inline-block;
1455
+ width: 30%;
1456
+ float: right;
1457
+ height: auto;
1458
+ }
1459
+
1460
+ Use the variant that more suits your way to think about things. I
1461
+ actually prefer the oldschool div-CSS approach and avoid flexbox
1462
+ altogether. Keep it simple! \o/
1463
+
1464
+ This is not equivalent to a grid, though, in particular if you
1465
+ want a layout such as 3x3. In that case I recommend to use a
1466
+ grid. Example for this can be seen here:
1467
+
1468
+ https://codepen.io/chris__sev/pen/bYmpxw
1469
+
1470
+ ## Working with Frames
1471
+
1472
+ You can use Frames.
1473
+
1474
+ This example shows how, in the main frame:
1475
+
1476
+ w.frame_left 'foo.cgi' # specify frame to the left
1477
+ w.frame_right 'bar.cgi' # specify frame to the right
1478
+ w.use_frames
1479
+ w.serve
1480
+
1481
+ ## Working with Grids in HTML/CSS
1482
+
1483
+ You can add padding between the grid containers using grid padding or
1484
+ row-gap and column-gap.
1485
+
1486
+ Examples:
1487
+
1488
+ gap
1489
+ row-gap
1490
+ column-gap
1491
+
1492
+ row-gap: 6px;
1493
+ column-gap: 6px;
1494
+
1495
+ ## Colours and the Colour chart in the Cyberweb project
1496
+
1497
+ If you wish to show a HTML colour chart, you can use
1498
+ the following method:
1499
+
1500
+ Cyberweb.show_html_colour_chart
1501
+
1502
+ If you want to return a random HTML colour, as a String, you
1503
+ can use this toplevel method:
1504
+
1505
+ Cyberweb.random_colour?
1506
+
1507
+ ## CSS colour gradient
1508
+
1509
+ You can "create" a colour gradient via:
1510
+
1511
+ colour_gradient_left_to_right(:steelblue, :darkgreen)
1512
+
1513
+ The third argument will be the name of the generated CSS class,
1514
+ defaulting to **.gradient1**.
1515
+
1516
+ You can then use this in a div-element like this:
1517
+
1518
+ add_to_css_class(
1519
+ colour_gradient_left_to_right(:steelblue, :darkgreen)
1520
+ )
1521
+
1522
+ # And then later:
1523
+ div('gradient1') {
1524
+ h4 'Hello'
1525
+ }
1526
+
1527
+ ## Show directories
1528
+
1529
+ If you wish to display directories from somewhere, use the method:
1530
+
1531
+ display_directories()
1532
+
1533
+ ## Predefined methods
1534
+
1535
+ - Some commonly used methods are predefined, such as:
1536
+
1537
+ question()
1538
+ answer()
1539
+ frage()
1540
+ antwort()
1541
+
1542
+ This is mostly because I use them quite often personally.
1543
+
1544
+ They are defined in:
1545
+
1546
+ $CYBERWEB/predefined_methods.rb
1547
+
1548
+ ## Disabling web images
1549
+
1550
+ You can disable the webimages component even in an URL by issuing:
1551
+
1552
+ ?disable_webimages
1553
+
1554
+ Of course you can also disable them through a configuration setting,
1555
+ in the configuration file - see the other command "**cyberweb edit**"
1556
+ how to edit that file. The idea is to allow several ways to achieve
1557
+ the same effect.
1558
+
1559
+ ## Modifying the configuration of the cyberweb project
1560
+
1561
+ The configuration is stored in a single yaml file. This file can be
1562
+ edited by issuing:
1563
+
1564
+ cyberweb edit
1565
+
1566
+ For a full listing of options, issue:
1567
+
1568
+ cyberweb --help
1569
+
1570
+ or
1571
+
1572
+ cyberweb HELP
1573
+
1574
+ ## The base directory
1575
+
1576
+ The base directory can be defined through the yaml file, with the
1577
+ entry called base_directory.
1578
+
1579
+ ## Standalone .cgi files
1580
+
1581
+ You can load standalone .cgi files, by supplying the path to the .cgi
1582
+ file in question.
1583
+
1584
+ Be careful however, we will use eval() to load that code.
1585
+
1586
+ Usage example for this:
1587
+
1588
+ load_cgi('bla.cgi')
1589
+
1590
+ or the alias:
1591
+
1592
+ run_cgi 'bla.cgi'
1593
+
1594
+ ## Support for markdown
1595
+
1596
+ You can use markdown formatting via the method **markdown()**.
1597
+
1598
+
1599
+ Example how to use markdown:
1600
+
1601
+ markdown(i = '/home/x/data/PC/MARKDOWN/example.md')
1602
+
1603
+ ## Tables with alternate backgrounds
1604
+
1605
+ You can use **tables with alternate background** such as by doing
1606
+ the following:
1607
+
1608
+ Table.alternate_backgrounds(%w( one two three four ))
1609
+
1610
+ The following partial screenshot shows how this may look like,
1611
+ via an additional black border, to indicate where the table
1612
+ begins and starts:
1613
+
1614
+ <img src="https://i.imgur.com/DeASwyg.png" style="margin-left: 2em">
1615
+
1616
+ The two classes are currently (**September 2021**) called
1617
+ **dark_background** and **light_background**, respectively.
1618
+ Never mind the name - if you want to style them differently
1619
+ then simply modify these classes in your web-page. Right
1620
+ now this is not trivial if you re-use the distributed .css
1621
+ files; at another moment in time the API may be changed to
1622
+ allow you to re-define the CSS class as-is.
1623
+
1624
+ ## Input fields with a different background colour
1625
+
1626
+ You can use input fields with a different background colour upon
1627
+ a mouse-focus event.
1628
+
1629
+ Examples for this would be:
1630
+
1631
+ input :text, 'Hello world!', :focus_with_salmon_background
1632
+ input :text, 'Hello World!', :focus_with_salmon_background, :select_on_click
1633
+
1634
+ ## Editing content on a webpage
1635
+
1636
+ You can make some content editable. This currently (**March 2017**)
1637
+ only works for the e() tag, which creates a span-tag.
1638
+
1639
+ The command for this is:
1640
+
1641
+ { :editable }
1642
+
1643
+ To do this, try:
1644
+
1645
+ p {
1646
+ e('This text should now be editable.') { :editable }
1647
+ }
1648
+
1649
+ ## Specify javascript files
1650
+
1651
+ You can specify a specific javascript file via:
1652
+
1653
+ w.javascript_file = '../../CODE/JS/FADER.js'
1654
+ w.javascript_file = :fader
1655
+
1656
+ As you can see, both a string version giving the full path, and a
1657
+ Symbol shortcut, will work - provided that the Symbol was registered.
1658
+
1659
+ I recommend to use the Symbol version for two reasons: first, it is
1660
+ less to type. Second, it is trivial to change the path lateron.
1661
+
1662
+ ## Configuration
1663
+
1664
+ All meaningful options that can be configured, can be configured
1665
+ via a yaml file. Settings such as the global font size and so on.
1666
+
1667
+ This is stored in the file **cyberweb_configuration.yml**.
1668
+
1669
+ ## Do simple counting via list()
1670
+
1671
+ Do simple counting via list().
1672
+
1673
+ list "one"
1674
+ list "two"
1675
+ list "three"
1676
+
1677
+ To reset it again, do:
1678
+
1679
+ clear_list
1680
+
1681
+ or:
1682
+
1683
+ reset_listing
1684
+
1685
+ To use a specific CSS style for these listings, do something like:
1686
+
1687
+ Cyberweb.listing_css = '<b class="red">'
1688
+
1689
+ ## Link in pages via link()
1690
+
1691
+ You can link in other pages via the method link().
1692
+
1693
+ This method also accepts '*', in which case we will
1694
+ try to use Dir.glob (or more accurately, Dir[])
1695
+
1696
+ Specific Usage Example:
1697
+
1698
+ link 'BIOCH*/BIOCHE*.cgi'
1699
+
1700
+ ## The licence of the Cyberweb project
1701
+
1702
+ Since as of **May 2021** the cyberweb project is using the MIT licence.
1703
+
1704
+ You can read the requirements for this licence here:
1705
+
1706
+ https://opensource.org/licenses/MIT
1707
+
1708
+ Before **May 2021**, cyberweb used the GPLv2 licence. The reason as
1709
+ to why the licence was changed was mostly because I consider the
1710
+ cyberweb project to be not extremely "important" in regards to
1711
+ mandating that the GPL-specific restrictions should apply. I
1712
+ ultimately don't quite care about the licence in regards to the
1713
+ cyberweb project. If others find the project useful then this is
1714
+ fine. If they want to contribute code, that's fine - and if they
1715
+ don't want to, that's fine as well, as far as the cyberweb
1716
+ project is concerned.
1717
+
1718
+ ## Simple JavaScript Calculator
1719
+
1720
+ Use:
1721
+
1722
+ add_simple_javascript_calculator
1723
+
1724
+ You may need to style the input-tag a bit.
1725
+
1726
+ See the following file for a working example:
1727
+
1728
+ cyberweb/examples/advanced/simple_calculator.cgi
1729
+
1730
+ ## Drag and drop support in general and drag-and-drop support via Dragula
1731
+
1732
+ Via the new attribute **draggable="true"** it is possible to drag any
1733
+ element in HTML. An image can simply contain set this attribute.
1734
+
1735
+ The JavaScript library **Dragula** is used, aside from jquery,
1736
+ for drag-and-drop support.
1737
+
1738
+ If you wish to make use of it, keep the dragula-related
1739
+ entry set to true in the file <b>project_configuration.yml</b>.
1740
+
1741
+ Example:
1742
+
1743
+ use_dragula: true
1744
+
1745
+ Keep in mind that the ID for a HTML tag has to have a certain format.
1746
+ For instance, using a '.' dot is not allowed as part of an ID; this
1747
+ is why cyberweb will automatically replace this via a '_' character
1748
+ instead.
1749
+
1750
+ ## Sinatra interface
1751
+
1752
+ The Cyberweb project is **a toolset project**, so there is also a class
1753
+ called **Cyberweb::Sinatra**. This can be used to quickly write a
1754
+ subclass for use as a web-page, based on sinatra.
1755
+
1756
+ To use this in your own code, do subclass from it such as via this
1757
+ variant:
1758
+
1759
+ require 'cyberweb/requires/require_sinatra.rb'
1760
+
1761
+ class Foo < Cyberweb::Sinatra
1762
+
1763
+ **@root_string** will carry the content (aka the **index**) of the main
1764
+ **/** route by default. A few other projects make use of class
1765
+ Cyberweb::Sinatra, such as the studium gem or the
1766
+ beautiful_url gem - see files such as
1767
+ **studium/lib/studium/www/sinatra_main_entry.rb**
1768
+ or
1769
+ **beautiful_url/lib/beautiful_url/www/app.rb**.
1770
+
1771
+ Since as of **June 2021** I am changing the old approach in regards to
1772
+ **.cgi** files. While I will retain support for .cgi files, I am
1773
+ also exploring offering the very same content via sinatra for some
1774
+ of the files - at the least in the roebe project, as a test-project
1775
+ for now. My idea here is that the Cyberweb project can already
1776
+ handle all HTML, CSS or JavaScript-related part that I may need.
1777
+ On Windows, using .cgi is somewhat annoying (but possible - I use
1778
+ lighttpd for this), whereas using sinatra is a lot simpler. So my
1779
+ idea is that I will slowly add and extend support for both .cgi and
1780
+ sinatra, and re-purpose the cyberweb project to achieve this. This
1781
+ currently lacks documentation, but eventually I'll add more
1782
+ documentation in how to solve this.
1783
+
1784
+ You can designate that Cyberweb::WebObject is serving a
1785
+ sinatra application right now via the following method
1786
+ invocation:
1787
+
1788
+ is_a_sinatra_application
1789
+
1790
+ And to query the state:
1791
+
1792
+ is_a_sinatra_application?
1793
+
1794
+ If you use a file extension such as **.sinatra** then this is
1795
+ automatically done. In fact that was the reason why I added
1796
+ this functionality in June 2021. The idea in the long run
1797
+ is to be able to do sinatra-specific calls that enable or
1798
+ disable certain things, in particular in regards to images,
1799
+ and have images work properly at the least on my home
1800
+ setup.
1801
+
1802
+ ## JQuery
1803
+
1804
+ The Cyberweb framework/toolset favours the use of jquery. Presently,
1805
+ since **May 2021**, the version that is to be used by default will be
1806
+ for jquery <b>3.6.0</b>. This may change at a later time.
1807
+
1808
+ In the event that it is changed and the documentation here is not
1809
+ updated, you can always rely on the following method call to yield
1810
+ the correct version of jquery to be used:
1811
+
1812
+ Cyberweb.jquery_version?
1813
+
1814
+ For example, the above method called would yield **3.6.0** in
1815
+ **May 2021**. Personally I always use the latest stable
1816
+ version of jquery.
1817
+
1818
+ You can also query the jquery-ui version in use, via:
1819
+
1820
+ Cyberweb.jquery_ui_version?
1821
+
1822
+ Again, this also has to be synced manually, via the
1823
+ .yml file called **project_configuration.yml**.
1824
+
1825
+ Since as of **May 2021**, the cyberweb will also bundle this
1826
+ corresponding version of jquery and jquery-ui into the
1827
+ **javascript_code/jquery/** subdirectory of the gem. This
1828
+ is solely done to simplify the use of jquery so that, for
1829
+ example, dragging an object becomes simpler and available
1830
+ by default, even if access to the www is unavailable at
1831
+ the current time.
1832
+
1833
+ You can also call this method on a **Cyberweb::WebObject**
1834
+ instance via the following method:
1835
+
1836
+ report_the_jquery_version_in_use
1837
+
1838
+ Both jquery-ui and jquery use the same licence as the Cyberweb
1839
+ project (MIT licence). See also this wikipedia entry if
1840
+ you want to read more about jquery and its history:
1841
+
1842
+ https://en.wikipedia.org/wiki/JQuery
1843
+
1844
+ To make a container **resizable** via the mouse, by using
1845
+ jquery, try this method:
1846
+
1847
+ jquery_resizable_via_the_mouse(id: :resizable_via_the_mouse)
1848
+
1849
+ As **id** you simply pass in the id of the HTML element at hand.
1850
+ In this case, the symbol called :resizable_via_the_mouse.
1851
+
1852
+ See also the file **JQUERY.md** for a more thorough reference.
1853
+
1854
+ Note that in **May 2021**, support for jquery is actually mildly
1855
+ deprecated. This is not set in stone and it does not mean that
1856
+ jquery support will be removed, as far as the cyberweb project
1857
+ is concerned; it is more that I want to see whether we have
1858
+ better or simpler alternatives, without being tied into jquery
1859
+ too closely.
1860
+
1861
+ The basic syntax for jquery, in javascript, goes like this:
1862
+
1863
+ $(selector).action()
1864
+
1865
+ The general rules for JQuery go along these lines, in JavaScript:
1866
+
1867
+ $(this).hide() # hides the current element.
1868
+ $("p").hide() # hides all <p> elements.
1869
+ $(".test").hide() # hides all elements with class="test".
1870
+ $("#test").hide() # hides the element with id="test".
1871
+
1872
+ ## draggable_image() and the HTML draggable attribute
1873
+
1874
+ HTML added the draggable global attribute. This can be
1875
+ either true or false. A value of true indicates that the
1876
+ element can be dragged.
1877
+
1878
+ So, for example, in HTML:
1879
+
1880
+ <img src="cat.png" draggable="true">
1881
+
1882
+ This should enable drag-support for that image.
1883
+
1884
+ The default value is **auto**, which means that drag behaviour
1885
+ will default to the given browser behaviour. Only text
1886
+ selections, images, and links can be dragged by default. For
1887
+ other elements, the event ondragstart must be set for
1888
+ drag and drop to work.
1889
+
1890
+ ## in_dir_image()
1891
+
1892
+ To quickly display an in-dir image, that is an image that resides
1893
+ within the current directory, you can try the following API:
1894
+
1895
+ in_dir_image 'foobar.png', 'marl3em bblack1'
1896
+
1897
+ ## Textarea in HTML
1898
+
1899
+ You can make a textarea HTML tag readonly via readonly.
1900
+
1901
+ Example for this:
1902
+
1903
+ <textarea readonly>
1904
+ Foobar.
1905
+ </textarea>
1906
+
1907
+ To prevent a textarea from being resized by the user, use a CSS rule such
1908
+ as:
1909
+
1910
+ textarea {
1911
+ resize: none;
1912
+ }
1913
+
1914
+ ## CSS first-line rule
1915
+
1916
+ The **first-line** rule can be used to style the first line in a given
1917
+ HTML tag (the specified selector), such as the p (paragraph).
1918
+
1919
+ Example:
1920
+
1921
+ p:first-line
1922
+ {
1923
+ color:#ff0000;
1924
+ font-size: 30em;
1925
+ font-variant:small-caps;
1926
+ }
1927
+
1928
+ The first line would then appear larger and in another colour.
1929
+
1930
+ Several properties can be modified within the :first-line
1931
+ rule, such as **font properties**, **color properties**,
1932
+ **background properties**, **word-spacing**, **letter-spacing**,
1933
+ **text-decoration**, **vertical-align**, **text-transform**,
1934
+ **line-height** or **clear**.
1935
+
1936
+ ## CSS text-transform properties
1937
+
1938
+ The three main variants are:
1939
+
1940
+ div.a { text-transform: uppercase; }
1941
+ div.b { text-transform: lowercase; }
1942
+ div.c { text-transform: capitalize; }
1943
+
1944
+ ## CSS, text-shadow support and drop-shadow support
1945
+
1946
+ If you want to have shadows added to a given text then the text-shadow
1947
+ CSS property may be useful. Be careful when using this, though, because
1948
+ it can make the text harder to read.
1949
+
1950
+ Let's look at an example for the h1 HTML tag:
1951
+
1952
+ h1 {text-shadow:2px 2px #FF0000;}
1953
+
1954
+ Syntax used here (and in general):
1955
+
1956
+ text-shadow: h-shadow, v-shadow, blur, color
1957
+ text-shadow: 2px 5px tomato;
1958
+
1959
+ Another example, for a CSS rule:
1960
+
1961
+ .red_text_shadow {
1962
+ text-shadow: red 0 -2px;
1963
+ }
1964
+
1965
+ Strangely enough you can also re-arrange the arguments a litte:
1966
+
1967
+ /* colour | offset-x | offset-y | blur-radius */
1968
+ text-shadow: #fc0 1px 0 10px;
1969
+
1970
+ /* offset-x | offset-y | blur-radius | colour */
1971
+ text-shadow: 1px 1px 2px black; # This is my preferred style.
1972
+
1973
+ I do not know why they went that route, but I recommend to just
1974
+ stick to one style, and avoid the other.
1975
+
1976
+ Note that text-shadow is not the only way you can use to modify
1977
+ text. drop-shadow is another example.
1978
+
1979
+ In CSS the rule would be like this:
1980
+
1981
+ drop-shadow(2px 4px 8px #585858);
1982
+
1983
+ In cyberweb, you can use this API:
1984
+
1985
+ generate_drop_shadow :red, :default, 'drop_shadow_red'
1986
+ div('drop_shadow_red') {
1987
+ h3 'This part should show a drop-shadow effect - but in red'
1988
+ }
1989
+
1990
+ This would yield the following text (shown as image):
1991
+
1992
+ <img src="https://i.imgur.com/lSDl3qt.png" style="margin-left:2em">
1993
+
1994
+ ## CSS letter-spacing property
1995
+
1996
+ <b>letter-spacing</b> can be used to decrease or increase the
1997
+ distance between texts within a given text.
1998
+
1999
+ Example:
2000
+
2001
+ <div style="letter-spacing: 5px"><h2>Hello world!</div>
2002
+
2003
+ ## CSS and the border-spacing property for HTML tables
2004
+
2005
+ You can style HTML tables via CSS, by making use of
2006
+ <b class="steelblue">border-spacing</b>.
2007
+
2008
+ Example:
2009
+
2010
+ border-spacing: 20pt
2011
+
2012
+ The values for border-spacing can be: <b>length|initial|inherit</b>.
2013
+
2014
+ ## IDs for use in HTML tags
2015
+
2016
+ An ID may occur only once on a given webpage.
2017
+
2018
+ ## CSS text-decoration
2019
+
2020
+ Via <b>text-decoration</b> you can modify text such as by
2021
+ underlining it or line-through the text.
2022
+
2023
+ Examples for this:
2024
+
2025
+ h1 {
2026
+ text-decoration: overline;
2027
+ }
2028
+ h2 {
2029
+ text-decoration: line-through;
2030
+ }
2031
+ h3 {
2032
+ text-decoration: underline;
2033
+ }
2034
+ h4 {
2035
+ text-decoration: underline overline;
2036
+ }
2037
+ h5 {
2038
+ text-decoration: underline overline dotted red;
2039
+ }
2040
+ h6 {
2041
+ text-decoration: underline overline wavy blue;
2042
+ }
2043
+
2044
+ As you can see from the last example, you can combine several
2045
+ values for the same modifier, e. g. both **underline** and
2046
+ **overline**.
2047
+
2048
+ The allowed values for text-decoration are:
2049
+
2050
+ inherit
2051
+ none
2052
+ underline
2053
+ overline
2054
+ line-through
2055
+ blink
2056
+
2057
+ ## HTML Frames
2058
+
2059
+ HTML frames are rarely used nowadays. Syntax-wise they may be defined
2060
+ like this:
2061
+
2062
+ <frameset rows="100,*,60"> <frame ...></frameset>
2063
+
2064
+ Two frames:
2065
+
2066
+ <frameset cols="200,*">'),'default'
2067
+ <frame src="contents_of_frame1.html">
2068
+ <frame src="contents_of_frame2.html">
2069
+ </frameset>
2070
+
2071
+ ## HTML accesskeys
2072
+
2073
+ You can use an accesskey in HTML like so:
2074
+
2075
+ <input type="button" value="Button (accesskey is b)" accesskey="b">
2076
+ <button accesskey="f">Foobar</button>
2077
+
2078
+ The attribute <b>accesskey</b> is allowed in the following tags:
2079
+
2080
+ input
2081
+ textarea
2082
+ label
2083
+ legend und button
2084
+
2085
+ ## CSS ::before and CSS ::after
2086
+
2087
+ Via <b>:before</b> it is possible to insert elements before another
2088
+ element. Even graphics can be inserted.
2089
+
2090
+ Let's look at a simple example:
2091
+
2092
+ p::before {
2093
+ content: "Read this: ";
2094
+ }
2095
+
2096
+ As you can see, the text that should be inserted comes after the
2097
+ **content:** part.
2098
+
2099
+ This can also be used to play audio files:
2100
+
2101
+ h1::before {
2102
+ content: url(beep.wav)
2103
+ }
2104
+
2105
+ Now a slightly more convoluted example:
2106
+
2107
+ h2::before {
2108
+ content: "";
2109
+ width: 10px;
2110
+ height: 10px;
2111
+ border-radius: 50%;
2112
+ background: hotpink;
2113
+ displEvolution_of_Metabolic_Pathways-2000.pdfay: inline-block;
2114
+ vertical-align: middle;
2115
+ margin-right: 10px;
2116
+ }
2117
+
2118
+ To make use of an image, you can use something like:
2119
+
2120
+ img:before {
2121
+ content:url(https://example.com/image.png);
2122
+ }
2123
+
2124
+ CSS2 used the **:before** notation, but this was changed to **:before**
2125
+ in CSS3. I was a bit surprised to see ::before, because I used to
2126
+ use :before only.
2127
+
2128
+ The same exists for appending text, called ::after.
2129
+
2130
+ Example:
2131
+
2132
+ p::after {
2133
+ content: "»";
2134
+ color: red;
2135
+ }
2136
+
2137
+ ## CSS input autofocus
2138
+
2139
+ You can modify <input> elements by setting the focus onto
2140
+ them the moment a page loads.
2141
+
2142
+ Example:
2143
+
2144
+ <form action="/action_page.php">
2145
+ <label for="fname">First name:</label>
2146
+ <input type="text" id="fname" name="fname" autofocus><br>
2147
+ <label for="lname">Last name:</label>
2148
+ <input type="text" id="lname" name="lname"><br><br>
2149
+ <input type="submit">
2150
+ </form>
2151
+
2152
+ This is a bit similar to ruby-gtk3, e. g. .do_focus or .set_focus(true).
2153
+
2154
+ ## CSS grouping and CSS selectors
2155
+
2156
+ CSS selectors, such as the typeselector, can be used to refer to
2157
+ specific HTML tags. This can be used to style these HTML tags
2158
+ via CSS rules.
2159
+
2160
+ The following example shows how to use a margin of 10 pixels for
2161
+ each p tag:
2162
+
2163
+ p { margin: 10 px; }
2164
+
2165
+ This is fairly convenient and elegant. It is also quite flexible
2166
+ in that you can group several selectors together, and apply
2167
+ the same CSS rules to each element listed therein.
2168
+
2169
+ You have to use a ',' as separator between the individual elements
2170
+ in order for this to work.
2171
+
2172
+ An example for this follows:
2173
+
2174
+ h1,h2,h3,h4,h5,h6
2175
+ {
2176
+ color: green;
2177
+ }
2178
+
2179
+ Now all **HTML headers** (h1 up to h6) will be displayed in
2180
+ a green colour.
2181
+
2182
+ This can be extended for particular tags that occur as part
2183
+ of other tags as well.
2184
+
2185
+ For example, in order to colourize all h2 headers that occur
2186
+ within the ID called #nav, use the following:
2187
+
2188
+ #nav h2 {
2189
+ color: tomato;
2190
+ }
2191
+
2192
+ In plain HTML this would be used via code like this:
2193
+
2194
+ <div id="nav">
2195
+ <h2>Hello world!</h2>
2196
+ </div>
2197
+
2198
+ This allows you to use conditional rules in CSS. Don't forget
2199
+ to use the correct ID; in this case #nav.
2200
+
2201
+ ## CSS box-shadow effects
2202
+
2203
+ How does <b>box-shadow</b> work in CSS?
2204
+
2205
+ The general syntax may look like this:
2206
+
2207
+ div {
2208
+ box-shadow: 10px 10px 5px #888888;
2209
+ }
2210
+ div('Black','box_shadow_one'){
2211
+ h3 'Hier die obige Box'
2212
+ }
2213
+
2214
+ See also: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
2215
+
2216
+ The allowed values to box-shadow are:
2217
+
2218
+ box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
2219
+
2220
+ <b>h-shadow</b> refers to a <b>horizontal shadow</b>, whereas
2221
+ <b>v-shadow</b> refers to a <b>vertical shadow</b>.
2222
+
2223
+ A <b>box-shadow Generator</b> can be used as shown on the following
2224
+ webpage:
2225
+
2226
+ http://www.cssmatic.com/box-shadow
2227
+
2228
+ ## Add a .js file, as-is
2229
+
2230
+ The following API can be used to ad-hoc add a .js javascript file:
2231
+
2232
+ link_in_javascript 'app.js'
2233
+
2234
+ ## CSS Cursors
2235
+
2236
+ To use a different cursor, set a CSS style rule such as:
2237
+
2238
+ cursor: pointer;
2239
+ cursor: auto;
2240
+
2241
+ Alternatively use a defined CSS class such as:
2242
+
2243
+ .crosshair { cursor: crosshair; }
2244
+
2245
+ And then in HTML:
2246
+
2247
+ <p class="crosshair">crosshair</p>
2248
+
2249
+ Valid cursors include:
2250
+
2251
+ auto
2252
+ crosshair
2253
+ default
2254
+ e-resize
2255
+ grab
2256
+ help
2257
+ move
2258
+ n-resize
2259
+ ne-resize
2260
+ nw-resize
2261
+ pointer
2262
+ progress
2263
+ s-resize
2264
+ se-resize
2265
+ sw-resize
2266
+ text
2267
+ w-resize
2268
+ wait
2269
+ not-allowed
2270
+ no-drop
2271
+
2272
+ ## Removing child elements in JavaScript
2273
+
2274
+ An element can be removed via JavaScript by issueing:
2275
+
2276
+ this.parentNode.removeChild(this)
2277
+
2278
+ ## Default parameters to functions in JavaScript
2279
+
2280
+ You can use default values to functions in JavaScript.
2281
+
2282
+ Example:
2283
+
2284
+ function multiply(a, b = 1) {
2285
+ return a * b;
2286
+ }
2287
+
2288
+ console.log(multiply(5, 2));
2289
+ console.log(multiply(5));
2290
+
2291
+ Alternatively you could also use || inside of the function
2292
+ body, to simulate default values.
2293
+
2294
+ It may then look like this inside of a function:
2295
+
2296
+ bar = bar || "Default Value";
2297
+
2298
+ ## Using language-specific files as content of a webpage
2299
+
2300
+ The typical way how I describe the main content of a web-page
2301
+ is via:
2302
+
2303
+ doc {
2304
+ }
2305
+
2306
+ This **doc** refers to document and is ultimately just a <div>
2307
+ tag. So I put my web-applications into a big <div> tag
2308
+ ultimately.
2309
+
2310
+ Since late 2020 I am also using language variants such as:
2311
+
2312
+ english {
2313
+ }
2314
+ # or
2315
+ german {
2316
+ }
2317
+
2318
+ To denote a webpage in german, or in english. Not as
2319
+ replacement for doc {}, but as the start point in
2320
+ general.
2321
+
2322
+ In June 2021 this was extended in that I added the method
2323
+ called:
2324
+
2325
+ doc_skeleton
2326
+
2327
+ The word <b>skeleton</b> refers to a separate file, the
2328
+ skeleton of the web-application.
2329
+
2330
+ Say that you have five called index.rb, index.cgi,
2331
+ index.sinatra, index_english.md and index.german.md.
2332
+
2333
+ This allows us to read in either the english or the german
2334
+ language.
2335
+
2336
+ To let the cyberweb project guess on its own, consider
2337
+ using a variant via the following Symbol:
2338
+
2339
+ doc_skeleton(:english_or_german)
2340
+
2341
+ This currently defaults to german. You can pass ?use_english
2342
+ or ?english to the .cgi page to overrule this and force
2343
+ the web-application to view the english content instead.
2344
+
2345
+ In order for this to work, the corresponding .md file must
2346
+ exist, e. g. **index_english.md** or **index_german.md**.
2347
+
2348
+ Note that this is currently (June 2021) quite experimental,
2349
+ but I wanted to add the feature that we can offer different
2350
+ languages. In the long run I may adapt this approach, to
2351
+ make it easier to use different languages on any given
2352
+ weba-application, but for now I only use this in the
2353
+ **roebe** gem. For example, luft.cfg under **roebe/www/luft/**
2354
+ will show this. It may not work on your home system,
2355
+ though, as it is catered to my home setup. But it shows
2356
+ how this could be done in theory. So, who knows - in the
2357
+ long run I may integrate this as a 'default' feature.
2358
+
2359
+ Note that **?use_german** will work as well, to force
2360
+ the **_german.md** file to be read.
2361
+
2362
+ ## Obtaining user input in JavaScript
2363
+
2364
+ The following code example shows how to obtain user input via JavScript:
2365
+
2366
+ var x, y;
2367
+ x = prompt("Gib mal eine Zahl ein","")
2368
+ y = prompt("Gib mir noch eine Zahl","")
2369
+ alert(Number(x)+Number(y)
2370
+
2371
+ So the primary way to obtain user through JavaScript goes via
2372
+ <b>window.prompt</b>. The second argument to that method
2373
+ specifies the default value of the input-field.
2374
+
2375
+ ## CSS border-style property
2376
+
2377
+ CSS gives you the possibility to style borders via different properties,
2378
+ through **border-style**.
2379
+
2380
+ Let's showcase some examples for this:
2381
+
2382
+ p.solid { border-style: solid;}
2383
+ p.dotted { border-style: dotted;}
2384
+ p.dashed { border-style: dashed;}
2385
+ p.double { border-style: double;}
2386
+ p.groove { border-style: groove;}
2387
+ p.ridge { border-style: ridge;}
2388
+ p.inset { border-style: inset;}
2389
+ p.outset { border-style: outset;}
2390
+ p.none { border-style: none;}
2391
+ p.hidden { border-style: hidden;}
2392
+ p.mix { border-style: dotted dashed solid double;}
2393
+
2394
+ Personally I like **solid** the most, followed by **dotted**, then **dashed**.
2395
+
2396
+ The other properties may be useful in some cases, e. g. when you
2397
+ wish to indicate some button-like element - but visually, I think
2398
+ the first three styles are by far the most appealing ones.
2399
+
2400
+ ## CSS first-letter
2401
+
2402
+ CSS allows us to modify the first-letter in, for example, a
2403
+ HTML paragraph. This is enabled via the so-called
2404
+ **:first-letter selector**.
2405
+
2406
+ In CSS rule this will look like this:
2407
+
2408
+ .fl:first-letter { font-size: 120%; }
2409
+
2410
+ The ':' is the important identifier.
2411
+
2412
+ Some time ago this was modified though. It is now required
2413
+ to use two ':' rather than one.
2414
+
2415
+ Example:
2416
+
2417
+ p::first-letter {
2418
+ font-size: 150%;
2419
+ color: steelblue;
2420
+ }
2421
+
2422
+ Take note that this is limited to block-level elements, so
2423
+ by default the span tag is unable to make use of this, unless
2424
+ it is turned into a block-level element as well.
2425
+
2426
+ ## CSS and Hovering
2427
+
2428
+ CSS allows us to make use of
2429
+ <b style="color: gold; padding: 3px; background-color:black">:hover</b>
2430
+ in order to have certain effects happen when the mouse cursor
2431
+ hovers over an element.
2432
+
2433
+ The general API respectively syntax for <b>CSS hover</b>
2434
+ goes like this:
2435
+
2436
+ .NAME_OF_ELEMENT:hover { background: COLOUR_HERE; }
2437
+
2438
+ .NAME_OF_ELEMENT:hover { background: COLOUR_HERE; }
2439
+ .test:hover { background: green; }
2440
+ .button:hover {opacity: 1;}
2441
+
2442
+ To then test this via cyberweb:
2443
+
2444
+ p('hover_test2 mart1px','') {
2445
+ ee sg(:pfeil_rechts,'marl1em marr6px')+
2446
+ 'Hier drüberfahren'
2447
+ }
2448
+
2449
+ To make all HTML links, aka the **a** tag, change the colour
2450
+ when the mouse hovers over them, the following CSS
2451
+ rule should work just fine:
2452
+
2453
+ a:hover {
2454
+ background-color: yellow;
2455
+ }
2456
+
2457
+ You can style several tags in one go, via:
2458
+
2459
+ p:hover, h1:hover, a:hover {
2460
+ background-color: lightblue;
2461
+ }
2462
+
2463
+ This also works inline.
2464
+
2465
+ ## Shortcomings of JavaScript
2466
+
2467
+ This subsection lists some shortcomings of JavaScript. This may be
2468
+ subject to change, as JavaScript changes as well. It is not a rant
2469
+ as such either - the focus will be on syntax.
2470
+
2471
+ - You can not use inline JavaScript if it contains the end
2472
+ part </script>, such as:
2473
+
2474
+ <script>
2475
+ function foobar() {
2476
+ console.log("</script>");
2477
+ }
2478
+ </script>
2479
+
2480
+ ## Including external .css files
2481
+
2482
+ The syntax for adding external (standalone) .css files is as shown in
2483
+ the following examples:
2484
+
2485
+ <link rel="stylesheet" type="text/css" href="name_of_the_css_file_goes_in_here.css">
2486
+ <link rel="stylesheet" type="text/css" href="base.css">
2487
+
2488
+ ## Embeddable Interfaces
2489
+
2490
+ Since as of June 2021 I am experimenting with **embeddable interfaces**
2491
+ in regards to web-related components - most importantly sinatra.
2492
+
2493
+ The basic idea here is that we can easily make available additional
2494
+ routes for other applications. Let's explain this by using an
2495
+ example.
2496
+
2497
+ The PdfParadise project defines a route such as **/view**. This
2498
+ entry will become **/pdf/view** if I want to use it within the
2499
+ Roebe::Controller - my master-class for controlling all the
2500
+ various web-APIs that I use locally.
2501
+
2502
+ To enable this functionality, I decided to settle for a module
2503
+ name called **EmbeddableInterface**. I am trying to use this
2504
+ consistently for my own projects. Different details may change,
2505
+ but ultimately this should be used when I want to extend
2506
+ functionality of the core controller.
2507
+
2508
+ This module then typically looks like this:
2509
+
2510
+ module EmbeddableInterface # === Wetter::EmbeddableInterface
2511
+
2512
+ begin
2513
+ require 'html_tags'
2514
+ include HtmlTags::BaseModule
2515
+ rescue LoadError; end
2516
+
2517
+ begin
2518
+ require 'cyberweb/sinatra/custom_extensions.rb'
2519
+ include Cyberweb::Sinatra::CustomExtensions
2520
+ rescue LoadError; end
2521
+
2522
+ # Some methods defined next
2523
+
2524
+ end
2525
+ def self.embeddable_interface
2526
+ object = Object.new
2527
+ object.extend(Wetter::EmbeddableInterface)
2528
+ return object
2529
+ end
2530
+
2531
+ That's the skeleton for it right now, roughly.
2532
+
2533
+ In the future this may be simplified, but for now this is
2534
+ the way it is.
2535
+
2536
+ You can use the following toplevel method for merging new routes into
2537
+ an application; again, for the time being, this is a bit hackish. It
2538
+ may take a while before this becomes officially endorsed.
2539
+
2540
+ The API is:
2541
+
2542
+ Cyberweb::Sinatra::CustomExtensions.merge_interface
2543
+
2544
+ Arguments should be:
2545
+
2546
+ Cyberweb::Sinatra::CustomExtensions.merge_interface(
2547
+ i, # Should be an Array of routes that are to be used.
2548
+ prepend_this_to_the_route = '/',
2549
+ namespace_to_use # For example, PdfParadise or Repackage.
2550
+ )
2551
+
2552
+ Some methods are assumed to exist within module EmbeddableInterface.
2553
+ This may be subject to change in the future, but for now simply
2554
+ look at the **repackage gem** to find out how this is done.
2555
+ Documentation is missing in this regard, but will be added over
2556
+ the next weeks slowly.
2557
+
2558
+ ## JavaScript variables
2559
+
2560
+ The variables in JavaScript are by default global. You can make
2561
+ them local if you attach the **var** keyword to them.
2562
+
2563
+ You can also define several variables in one go, via:
2564
+
2565
+ var message = "hi",
2566
+ found = false,
2567
+ age = 29;
2568
+
2569
+ The keyword **let** has the lowest scope, even less than when
2570
+ compared to **var**.
2571
+
2572
+ ## Including CSS into a webpage
2573
+
2574
+ If you want to include CSS into a webpage, use the following HTML tag:
2575
+
2576
+ <style type="text/css"></style>
2577
+
2578
+ ## Including external .js files into a HTML (web)page
2579
+
2580
+ The syntax for adding standalone .js files goes like this:
2581
+
2582
+ <script type="text/javascript" src="path/to/javascript/file.js"></script>
2583
+
2584
+ # or simpler:
2585
+
2586
+ <script src="path/to/javascript/file.js"></script>
2587
+
2588
+ ## CSS comments
2589
+
2590
+ If you want to use comments in a CSS file, use something like this:
2591
+
2592
+ /* This is a CSS comment. */
2593
+
2594
+ ## JavaScript comments
2595
+
2596
+ The simplest way to use comments in JavaScript, in my opinion, is
2597
+ via:
2598
+
2599
+ /* This is a comment */
2600
+
2601
+ ## JavaScript loops
2602
+
2603
+ To do a loop in "modern" JavaScript, try:
2604
+
2605
+ for (let i = 0; i < 5; ++i) {
2606
+ /* do stuff here */
2607
+ }
2608
+
2609
+ The index variable **i** will remain completely local to the
2610
+ block, and not appear outside of it.
2611
+
2612
+ ## CSS font-face property (in CSS3)
2613
+
2614
+ Via the <b>@font-face</b> property it is possible to make use of
2615
+ different (custom) fonts. This font can be loaded from
2616
+ a remote server, or it can be provided on the local system,
2617
+ thus a locally installed font on the user's computer.
2618
+
2619
+ An URL should be given as argument.
2620
+
2621
+ The syntax rules for this goes as follows:
2622
+
2623
+ (1) first give the name of the font
2624
+ (2) provide the path to the font
2625
+
2626
+ If you then wish to make use of that font you can declare
2627
+ this in CSS.
2628
+
2629
+ An example for this follows:
2630
+
2631
+ @font-face {
2632
+ font-family: myFirstFont;
2633
+ src: url("sansation_light.woff"); # Here you can provide the URL
2634
+ }
2635
+
2636
+ Another example:
2637
+
2638
+ @font-face {
2639
+ font-family: "Open Sans";
2640
+ src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
2641
+ url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
2642
+ }
2643
+
2644
+ ## Lazy loading of images
2645
+
2646
+ You can use **loading=lazy** to defer the loading of that image
2647
+ until the user scrolls to the image.
2648
+
2649
+ Example in HTML:
2650
+
2651
+ <img src='foobar.jpg' loading='lazy' alt='Alternative Text'>
2652
+
2653
+ ## JavaScript for-in and for-of loops:
2654
+
2655
+ Just examples for each:
2656
+
2657
+ for (const key in {a: 1, b: 2}) {
2658
+ console.log(key);
2659
+ }
2660
+ // a, b
2661
+
2662
+ for (const value of [1,2,3,4,5]) {
2663
+ console.log(value);
2664
+ }
2665
+ // 1, 2, 3, 4, 5
2666
+
2667
+ ## Data Types in JavaScript (ECMAScript)
2668
+
2669
+ There are six simple data types:
2670
+
2671
+ Undefined
2672
+ Null
2673
+ Boolean
2674
+ Number
2675
+ String
2676
+ Symbol
2677
+
2678
+ ## How to use the typeof() operator in JavaScript
2679
+
2680
+ The typeof operator is called like this:
2681
+
2682
+ let x = "some string";
2683
+ typeof(x) # "string"
2684
+ typeof(95) # "number"
2685
+
2686
+ Note that the () for typeof() could be omitted, as typeof is
2687
+ an operator and not a function - but it seems simpler to use
2688
+ the () just as it is used for other functions in JavaScript
2689
+ as well.
2690
+
2691
+ ## Use image-checkbox (on and off)
2692
+
2693
+ Examples:
2694
+
2695
+ show_image_checkbox :on, 'posab','top:10em;right:18%'
2696
+ show_image_checkbox :off, 'posab','top:10em;right:18%'
2697
+
2698
+ ## CSS zoom-on-hover effect
2699
+
2700
+ This can be done like this:
2701
+
2702
+ .images {
2703
+ display: flex;
2704
+ width: 100vw;
2705
+ juftify-content: center;
2706
+ align-items: center;
2707
+ }
2708
+
2709
+ img {
2710
+ width: 400px;
2711
+ }
2712
+
2713
+ img:hover {
2714
+ transform: scale(1.3);
2715
+ }
2716
+
2717
+ The important part is the **transform: scale** specification.
2718
+
2719
+ I typically put this into a special CSS class such as:
2720
+
2721
+ .enlarge_this_image_on_hover:hover {
2722
+ transform: scale(1.1);
2723
+ }
2724
+
2725
+ ## Valid values for CSS font-size:
2726
+
2727
+ xx-small
2728
+ x-small
2729
+ small
2730
+ smaller
2731
+ medium
2732
+ large
2733
+ x-large
2734
+ xx-large
2735
+ larger
2736
+
2737
+ ## Useful quotes when designing websites and web-apps
2738
+
2739
+ "When you are creating a website, the primary goal as a designer
2740
+ should be to get rid of the question marks users have when
2741
+ visiting that site."
2742
+
2743
+ "The most important thing a designer can do is to understand
2744
+ the basic principle of eliminating question marks that a user
2745
+ has when visiting a website. Keep things simple."
2746
+
2747
+ "If you can not make something self-evident, you should at the
2748
+ least make it self-explanatory."
2749
+
2750
+ "If a web page is going to be effective, it has to work most
2751
+ of its beautiful magic at a single glance."
2752
+
2753
+ "The average visitor rarely spends much time reading all
2754
+ content on a given web page, so focus on designing fewer
2755
+ elements that can be easily navigated, without too much
2756
+ distracting clutter."
2757
+
2758
+ "If your design forces a visitor to incur a small learning
2759
+ curve, make sure that the added value from this design
2760
+ change leads to it being worth that additional learning
2761
+ curve."
2762
+
2763
+ "Clarity trumps consistency."
2764
+
2765
+ "Each webpage should have a clear visual hierarchy."
2766
+
2767
+ "Components in a webpage that are related logically
2768
+ should also be related visually."
2769
+
2770
+ "In order to make a website 'scan-friendly', make good use of
2771
+ headings having a larger font size. The headings should
2772
+ indicate what a subsection is about."
2773
+
2774
+ "When using a heading, make them visually somewhat closer
2775
+ to the section they belong to, rather than equally spaced
2776
+ to the preceding paragraph."
2777
+
2778
+ "If you need the visitor to make a difficult choice, provide as
2779
+ much guidance as necessary - but not more. Be succinct here
2780
+ and provide only the smallest amount of information that
2781
+ will help the user."
2782
+
2783
+ "Omit needless words. Vigorous writing is concise."
2784
+
2785
+ "Try to make everything on a web-site self-explanatory or as
2786
+ close to it as possible."
2787
+
2788
+ "Navigation should ideally remain clear, simple, and consistent."
2789
+
2790
+ "It may be useful to consider using an identifier, such as a logo
2791
+ or an image, for the website, and display this e. g. on the
2792
+ upper left corner. This may help visitors identify where they
2793
+ are, in particular if they tend to use several tabs in their
2794
+ browser."
2795
+
2796
+ "If your website makes use of a menu-bar or navigation-bar,
2797
+ consider highlighting the current location that the user
2798
+ has or uses on that website."
2799
+
2800
+ "Ideally a website should convey the big picture, and make it
2801
+ clear what the site is about."
2802
+
2803
+ "If possible consider to use visual identifiers on the
2804
+ whole web-application at hand, to give visitors the
2805
+ right idea about this being a cohesive and integrated
2806
+ unit."
2807
+
2808
+ "Changing a website at a later time is not necessarily trivial.
2809
+ Some percentage of users that have grown accustomed to a
2810
+ layout will resist almost any kind of change, and even
2811
+ apparently simple changes often turn out to have
2812
+ far-reaching effects."
2813
+
2814
+ "Focus ruthlessly on fixing the most serious problems first."
2815
+
2816
+ ## Cyberweb::Header
2817
+
2818
+ Examples:
2819
+
2820
+ Cyberweb::Header.size = 'h3' # Set to a smaller header.
2821
+ Cyberweb::Header.reset
2822
+
2823
+ Not sure if this is still necessary in 2021; at a later time
2824
+ it will be decided whether to keep this or not. If it is kept
2825
+ then this subsection will be expanded.
2826
+
2827
+ ## Working with HTML form elements
2828
+
2829
+ Within a HTML form tag, the following tags are valid or have a
2830
+ special meaning:
2831
+
2832
+ button
2833
+ input
2834
+ select
2835
+ textarea
2836
+
2837
+ ## CSS ::before rule
2838
+
2839
+ You can add content via CSS like this:
2840
+
2841
+ .some_class::before {
2842
+ content: "Only today offer ";
2843
+ font-size: larger;
2844
+ color: red;
2845
+ }
2846
+
2847
+ <p class="some_class">Wood only € 4.95</p>
2848
+
2849
+ I don't think this is too overly useful when you can dynamically
2850
+ generate the web-app as-is, though.
2851
+
2852
+ ## Cyberweb::HtmlTemplate
2853
+
2854
+ class **Cyberweb::HtmlTemplate** can be used to fill it with HTML
2855
+ specific content. More documentation will be added here eventually;
2856
+ for now, let's just show a simple example how I tend to use this
2857
+ class:
2858
+
2859
+ Cyberweb::HtmlTemplate[
2860
+ title: 'Status',
2861
+ body: '<pre style="font-size:150%">'+
2862
+ ::EnvironmentInformation.return_the_most_important_info+
2863
+ '</pre>'
2864
+ ].to_s
2865
+
2866
+ It is possible since as of 18.06.2021 to pass CSS classes into this,
2867
+ via:
2868
+
2869
+ css_classes:
2870
+
2871
+ For example, passing 'darkblue' to that key means that the CSS
2872
+ class 'darkblue' will be available, which ultimately comes down
2873
+ to <b>color: darkblue</b>.
2874
+
2875
+ I needed this functionality to pull in only the CSS classes that
2876
+ I use on a particular page generated by class Cyberweb::HtmlTemplate.
2877
+
2878
+ Various additional entries are available. For example, if
2879
+ you want to modify the css-style in use for the body tag
2880
+ then you can use the following variant:
2881
+
2882
+ body_css_style: 'background-color:#DFD1FF'
2883
+
2884
+ In the long run the goal is to extend class HtmlTemplate in
2885
+ such a way that all html-generation used within the Cyberweb
2886
+ project can be handled by it.
2887
+
2888
+ ## Embed youtube videos and videos in general
2889
+
2890
+ You can embed youtube videos, thanks to the MultimediaParadise
2891
+ project, by issuing this:
2892
+
2893
+ youtube_embedder 'https://www.youtube.com/watch?v=7L6uEstbd9Y',250
2894
+
2895
+ The second argument tells us the width to use for this video.
2896
+
2897
+ More generally, to embed videos in HTML5, you can use code like this:
2898
+
2899
+ <video controls width="250">
2900
+ <source src="/media/cc0-videos/flower.webm" type="video/webm">
2901
+ <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
2902
+ </video>
2903
+
2904
+ ## How to work with form-elements
2905
+
2906
+ This subsection was added because I tend to forget how to work with
2907
+ &lt;form> elements in **HTML**.
2908
+
2909
+ **HTML** allows us to make use of &lt;form> elements.
2910
+
2911
+ Any such &lt;form> element is typically associated with an action,
2912
+ which is determined via **action=""**.
2913
+
2914
+ This may look like this:
2915
+
2916
+ <form action="/foobar.php">
2917
+ </form>
2918
+
2919
+ The attribute **action** determines the recipient, that is,
2920
+ the one who will receive the transmitted data from the
2921
+ &lt;form> element. In the example above, the file called
2922
+ **foobar.php**.
2923
+
2924
+ The attribute <b>method</b> determines **how** the data will
2925
+ be transmitted. If omitted then the <b>default</b> is
2926
+ **get**.
2927
+
2928
+ You can also send this to an email, such as via this:
2929
+
2930
+ <form action="mailto:foo@bar.org" method="post" enctype="text/plain">
2931
+
2932
+ Within any such given element, we can use &lt;input>, as in:
2933
+
2934
+ &lt;input type="text" id="first_name" name="first_name">
2935
+
2936
+ To use a web-form via **cyberweb**, try:
2937
+
2938
+ form('SELF', :post, 'mars2em') {
2939
+ }
2940
+
2941
+ ## simple_table2
2942
+
2943
+ Since as of **24 Aug 2011** we can also use the method
2944
+ **simple_table2()** which is stored in the file
2945
+ html_tables.rb.
2946
+
2947
+ Example for this:
2948
+
2949
+ simple_table2(ARRAY_ALL_LINKS)
2950
+
2951
+ This will simple make a 2 data-cell table, and accepts an Array
2952
+ as its input. Very easy way to make tables!
2953
+
2954
+ ## Sitemaps
2955
+
2956
+ A sitemap is a navigational tool, displaying to the user which links
2957
+ may exist on a given webpage.
2958
+
2959
+ If you want to use a sitemap via the Cyberweb project, do something
2960
+ like this here:
2961
+
2962
+ sitemap :h4, 'Schnelles Abnehmen'
2963
+ autogenerated_sitemap
2964
+
2965
+ If you also want to autogenerate a sitemap, as-is, then you can
2966
+ use the following method:
2967
+
2968
+ header_for_sitemap 'This is some generic header.'
2969
+
2970
+ ## Generating standalone webpages (.html files)
2971
+
2972
+ This subsection deals with the cyberweb project generating standalone
2973
+ .html files.
2974
+
2975
+ First, the general method to create a HTML dump is via:
2976
+
2977
+ .to_html
2978
+
2979
+ This is only possible on a WebObject instance. This alone will just
2980
+ return the HTML representation.
2981
+
2982
+ To store it into a local file use this method:
2983
+
2984
+ .create_standalone_html_page
2985
+
2986
+ This presently (**August 2021**) uses hardcoded file paths. In the
2987
+ future more flexibility will be added to the method, but for the
2988
+ time being it was only added to quickly do some ad-hoc testing.
2989
+
2990
+ ## Spinbuttons in HTML
2991
+
2992
+ Use something like:
2993
+
2994
+ <input type="number" value="1" min="1" max="999">
2995
+
2996
+ You may even style them via CSS like:
2997
+
2998
+ input[type=number]::-webkit-inner-spin-button {
2999
+ opacity: 0.3
3000
+ }
3001
+
3002
+ ## HTML-links
3003
+
3004
+ Since as of **19.02.2020** (19th February 2020), the
3005
+ **cyberweb project** now uses the **HtmlTags project** for
3006
+ generating **a href hyperlinks** (HTML hyperlinks).
3007
+
3008
+ While this led to some broken links on my home system, the code
3009
+ as well as the usage pattern for links is now more consistent,
3010
+ and simpler to use in the long run - I hope. Before that I used
3011
+ tons of different HTML-generating methods, all of which used
3012
+ different signatures. This was too confusing to maintain in
3013
+ the long run.
3014
+
3015
+ The typical API for use of such a HTML link may look like this:
3016
+
3017
+ a 'https://www.manualslib.de/manual/123/Gerät_xyz.html',
3018
+ content: 'Handbuch zum Gerät xyz',
3019
+ css_class: 'mars2em'
3020
+
3021
+ So essentially, you can describe the **HyperLink** as a **Hash**,
3022
+ where **content** is the content (the text you wish to display),
3023
+ **css_class** is the CSS class to use for that link, and so on
3024
+ and so forth.
3025
+
3026
+ For the actual CSS code, I recommend to group the a-related
3027
+ tags together, such as via:
3028
+
3029
+ a:link, a:visited, a:active { color: #3366FF; text-decoration: none; }
3030
+
3031
+ The hover-action should be styled separately:
3032
+
3033
+ a:hover { color: #006699; text-decoration: underline; }
3034
+
3035
+ To globally style all HTML hyperlinks, you can use CSS style such as
3036
+ the following:
3037
+
3038
+ <style>
3039
+ a {
3040
+ color: steelblue;
3041
+ }
3042
+ </style>
3043
+
3044
+ ## The br-tag
3045
+
3046
+ The br-tag can be used in HTML to add a linebreak.
3047
+
3048
+ You can style the height of the line break via CSS such as:
3049
+
3050
+ br {
3051
+ line-height: 30%;
3052
+ }
3053
+
3054
+ I needed this on a webpage to control the distance between
3055
+ individual HREF-links, and I did not want to use div-tags
3056
+ or p-tags as such. So using the <b>line-height</b> property
3057
+ was very useful.
3058
+
3059
+ ## Remote images versus local images
3060
+
3061
+ I use various www-related projects, including local webpages.
3062
+
3063
+ Some of these pages lateron became available for everyone,
3064
+ such as in the roebe gem, via the www/ subdirectory.
3065
+
3066
+ However had, images are normally not distributed for these
3067
+ webpages - it would inflate the gem size way too much.
3068
+
3069
+ This in turn means that a visitor does not see any image,
3070
+ when some of these images are important or helpful. This
3071
+ is not an ideal situation.
3072
+
3073
+ So, in September 2021 I decided to add a new API, called:
3074
+
3075
+ drag_local_image_or_remote_image()
3076
+ drag_local_image_or_remote_image('foo/bar.png')
3077
+ drag_local_image_or_remote_image('foo/bar.png','www.some_page.com/yo/foo/bar.png')
3078
+
3079
+ The idea here is to default to my local image, but to
3080
+ provide a second argument as well, containing a remote URL
3081
+ to an image that can be used as a substitute, in the event
3082
+ that there is no local image available (such as when other
3083
+ users look at a webpage distributed in the roebe gem).
3084
+
3085
+ I tested this in September 2021 and it works, so in the
3086
+ future I expect a few more images to be made available.
3087
+ But this is quite experimental as of now, and probably
3088
+ still not too hugely useful for other users. In the
3089
+ event you may have a need case to document such a web-page
3090
+ via images, you can modify these API calls and supply
3091
+ your own images.
3092
+
3093
+ If you do not need drag-and-drop support then simply use:
3094
+
3095
+ local_image_or_remote_image()
3096
+
3097
+ If **drag_local_image_or_remote_image()** is too long to type,
3098
+ use the alias called **dimg2**.
3099
+
3100
+ ## Objectified HTML Tags
3101
+
3102
+ Objectified HTML tags are something like this:
3103
+
3104
+ puts Cyberweb::ObjectifiedHtmlTags::Span.new('hey there') # => "<span>hey there</span>"
3105
+ puts Cyberweb::ObjectifiedHtmlTags::Span.new('hey there').align_to_the_left # => "<span style="text-align: left;">hey there</span>"
3106
+
3107
+ In other words we may treat HTML tags as strings that can be
3108
+ embedded. The idea for this has been inspired by ruby-gtk,
3109
+ such as:
3110
+
3111
+ widget1.add(widget2)
3112
+
3113
+ I needed to add a lot of OOP-centric methods to the cyberweb
3114
+ framework. Objectified HTML tags may solve this issue.
3115
+
3116
+ As of now in September 2021 this is, however had, experimental.
3117
+ In due time it will be evaluated whether we could enable these
3118
+ tags for use in a unified code base in the future. Stay tuned.
3119
+
3120
+ In late September 2021, the textarea-tag was added.
3121
+
3122
+ Example:
3123
+
3124
+ textarea = Cyberweb::ObjectifiedHtmlTags::Textarea.new('content')
3125
+ # You can also use this instead:
3126
+ # textarea = html_textarea
3127
+ textarea.class = 'rounded_border_6px bblack1 FS2em pad8px'
3128
+ textarea.id = 'ask_a_question'
3129
+ textarea.name = 'ask_a_question'
3130
+ textarea.rows = 6
3131
+ textarea.cols = 90
3132
+
3133
+ Again - this is all highly experimental, but in the long run all
3134
+ HTML tags will become objectified, as an additional option. You
3135
+ need to decide for yourself whether you want to use this or not;
3136
+ the one-line approach in regular HTML is probably shorter.
3137
+
3138
+ The following table, alphabetically sorted, shows the currently
3139
+ (**September 2021**) available objectified HTML tags as part of
3140
+ the cyberweb project. More may be added in the future.
3141
+
3142
+ Name of the HTML tag | Implementation Status | True HTML tag
3143
+ ---------------------|--------------------------|--------------
3144
+ a | added | yes
3145
+ abb3 | added | yes
3146
+ button | added | yes
3147
+ combobox | added | no
3148
+ div | added | yes
3149
+ embed | added | yes
3150
+ form | added | yes
3151
+ h1 | added | yes
3152
+ h2 | added | yes
3153
+ h3 | added | yes
3154
+ h4 | added | yes
3155
+ h5 | added | yes
3156
+ h6 | added | yes
3157
+ hbox | added | no
3158
+ img | added | yes
3159
+ p | added | yes
3160
+ pre | added | yes
3161
+ span | added | yes
3162
+ table | added | yes
3163
+ textarea | added | yes
3164
+ title | added | yes
3165
+ window | added | no
3166
+
3167
+ Note that some of the above, such as window, hbox or combobox, are
3168
+ not directly HTML tags. Nonetheless these were added, largely to
3169
+ improve compatibility with ruby-gtk3 and other toolkits that make
3170
+ use of a more object-centric nature in how to handle such entities.
3171
+ Some aliases may exist to "simulate" dealing with "real HTML tags".
3172
+
3173
+ Table is a bit special in that you can feed it an array, and it
3174
+ will generate the proper <td> entries and <tr> entries - so it
3175
+ is a bit of a "meta"-tag in this regard.
3176
+
3177
+ You can also do some ad-hoc trickery with this.
3178
+
3179
+ Example:
3180
+
3181
+ _ = html_image('../../images/foobar.jpg')
3182
+ _.css_class 'bblack3'
3183
+ _.on_mouse_over {{
3184
+
3185
+ upscale: '+50%',
3186
+ delay: 1.0 # in seconds
3187
+
3188
+ }}
3189
+ e _
3190
+
3191
+ This would embed the image called foobar.jpg into the current
3192
+ website, and add an upscale effect of +50% when the mouse hovers
3193
+ over it.
3194
+
3195
+ This is not yet ideal; I am experimenting. But in the long run
3196
+ I want to try to combine an OOP approach for the www with the
3197
+ old variant that cyberweb used in the last 15 years. It is a
3198
+ bit too verbose for my taste still, but eventually I should
3199
+ have ironed this out.
3200
+
3201
+ ## Useful Links
3202
+
3203
+ This subsection just keeps a few useful resources. This may
3204
+ become obsolete over time, so don't expect all links to
3205
+ work or be very useful. It's just a random collection
3206
+ really, last updated in **May 2021**.
3207
+
3208
+ https://catswhocode.com/css-tricks/
3209
+ https://validator.w3.org/
3210
+ https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Auswahllisten
3211
+ https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
3212
+ https://meiert.com/en/indices/css-properties/
3213
+ https://webdesignerwall.com/tutorials/advanced-css-menu
3214
+ http://www.ericmeyeroncss.com/projects/01/
3215
+ http://www.selfhtml5.org/html5-tag-systematik/
3216
+ https://hyperstack.org/
3217
+
3218
+ HTML Tutorial (HTML for beginners): https://html.com/
3219
+
3220
+ Self-HTML: https://selfhtml.org/
3221
+
3222
+ Fancy Scrollbars: http://www.n-son.com/scripts/jsScrolling/example2.html
3223
+
3224
+ For a quick list (a table) of available HTML tags, you may want to visit:
3225
+
3226
+ https://way2tutorial.com/html/tag/index.php
3227
+
3228
+ (Obviously there are many other resources available in this regard.
3229
+ I only wanted to list one, so the above link is somewhat random.)
3230
+
3231
+ ADD_CONTACT_INFORMATION