cyberweb 0.4.174 → 0.5.225

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 (625) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1782 -405
  3. data/bin/cyberweb_sanitize +10 -0
  4. data/bin/download_webpage +7 -0
  5. data/bin/html_to_cyberweb_converter +7 -0
  6. data/cyberweb.gemspec +25 -25
  7. data/doc/README.gen +1745 -383
  8. data/doc/USAGE.md +16 -16
  9. data/doc/{AUTHORS.md → authors.md} +0 -0
  10. data/doc/configuration/configuration.md +3 -1
  11. data/doc/deprecations.md +13 -7
  12. data/doc/{DOCUMENTATION_FOR_CYBERSPRAWL.md → documentation_for_cybersprawl.md} +7 -4
  13. data/doc/future_design_goals.md +33 -0
  14. data/doc/html_characters.md +7 -7
  15. data/doc/{JQUERY.md → jquery/jquery.md} +20 -12
  16. data/doc/{MOUSE.md → mouse.md} +1 -9
  17. data/doc/{RENDER_WEB_BASE.md → render_web_base.md} +11 -4
  18. data/doc/todo/todo_for_the_cyberweb_project.md +791 -0
  19. data/examples/advanced/animated_css_example/animated_css_example.html +47 -0
  20. data/examples/advanced/animated_submarine/animated_submarine.html +511 -0
  21. data/examples/advanced/animated_windmill/animated_windmill.html +468 -0
  22. data/examples/advanced/delayed_update_of_the_body_via_javascript.cgi +8 -5
  23. data/examples/advanced/draw_circle/draw_circle.cgi +36 -0
  24. data/examples/advanced/drop_shadow_examples.cgi +37 -0
  25. data/examples/advanced/games/snake/food.png +0 -0
  26. data/examples/advanced/games/snake/ground.png +0 -0
  27. data/examples/advanced/games/snake/snake.cgi +28 -0
  28. data/examples/advanced/games/tetris/tetris.cgi +7 -0
  29. data/examples/advanced/games/tetris/tetris.rb +17 -0
  30. data/examples/advanced/games/tetris/tetris.sinatra +58 -0
  31. data/examples/advanced/games/tic-tac-toe/tic-tac-toe.cgi +123 -0
  32. data/examples/advanced/get_some_coffee/get_some_coffee.html +293 -0
  33. data/examples/advanced/glow_on_hover_example/glow_on_hover_example.cgi +27 -0
  34. data/examples/advanced/hybrid_experiment.cgi +34 -12
  35. data/examples/advanced/images/global_css_rules_for_the_images.cgi +32 -0
  36. data/examples/advanced/larger_image_on_mouse_over_example.cgi +2 -2
  37. data/examples/advanced/no_right_click.cgi +4 -3
  38. data/examples/advanced/{objectified_html_tags.cgi → objectified_html_tags/objectified_html_tags.cgi} +12 -3
  39. data/examples/advanced/objectified_html_tags/testing_objectified_html_tags_with_the_webobject.cgi +28 -0
  40. data/examples/advanced/random_glow_effects.cgi +34 -0
  41. data/examples/advanced/select_everything_example/select_everything_example.cgi +25 -0
  42. data/examples/advanced/simple_calculator.cgi +13 -21
  43. data/examples/advanced/simple_form_example.cgi +11 -11
  44. data/examples/advanced/traffic_light/traffic_light.html +163 -0
  45. data/examples/advanced/weather_animation/weather_animation.html +560 -0
  46. data/examples/css/animated_3D_cube_example/animated_3D_cube_example.html +265 -0
  47. data/examples/css/animated_bird_example/animated_bird_example.html +207 -0
  48. data/examples/css/animated_desk_example/animated_desk_example.html +120 -0
  49. data/examples/css/animated_dog_example/animated_dog_example.html +432 -0
  50. data/examples/css/animated_submit_button.html +190 -0
  51. data/examples/css/animated_text_colour_change/animated_text_colour_change.html +41 -0
  52. data/examples/css/blue_border.html +3 -1
  53. data/examples/css/border_image_example/border_image_example.html +40 -0
  54. data/examples/css/box_shadow/box_shadow_example.html +18 -0
  55. data/examples/css/christmas_snow_globe_animation.html +596 -0
  56. data/examples/css/css_border_spacing_example.html +5 -5
  57. data/examples/css/css_bubbles.html +3 -1
  58. data/examples/css/css_checkboxes_example/css_checkboxes_example.html +110 -0
  59. data/examples/css/css_drag_and_drop.html +1 -5
  60. data/examples/css/css_grid_feline_style/css_grid_feline_style.html +161 -0
  61. data/examples/css/css_neon_glow_effects.html +1 -1
  62. data/examples/css/css_rotate_these_words.html +83 -0
  63. data/examples/css/css_text_decoration_example.html +7 -7
  64. data/examples/css/css_thermometer/css_thermometer.html +91 -0
  65. data/examples/css/{css_tooltip.html → css_tooltip/css_tooltip.html} +8 -6
  66. data/examples/css/css_typewriter_example/css_typewriter_example.html +226 -0
  67. data/examples/css/cyberweb_animated_logo/cyberweb_animated_logo.html +179 -0
  68. data/examples/css/daily_coffee/daily_coffee.html +1110 -0
  69. data/examples/css/different_colour_on_selected_text/different_colour_on_selected_text.html +31 -0
  70. data/examples/css/differentially_glowing_text_example/differentially_glowing_text_example.html +82 -0
  71. data/examples/css/fade_in_and_fade_out_effect.html +2 -2
  72. data/examples/css/flying_birds_example/flying_birds_example.html +171 -0
  73. data/examples/css/folding_cards_example/folding_cards_example.html +624 -0
  74. data/examples/css/font_size_examples.html +7 -5
  75. data/examples/css/glowing_on_hover_animation/glowing_on_hover_animation.html +90 -0
  76. data/examples/css/grow_example.html +31 -0
  77. data/examples/css/happy_toaster_example/happy_toaster_example.html +830 -0
  78. data/examples/css/landing_on_mars_animation/landing_on_mars_animation.html +374 -0
  79. data/examples/css/letter_spacing_example.cgi +18 -14
  80. data/examples/css/lighthouse_example/lighthouse_example.html +1161 -0
  81. data/examples/css/{meter_example.html → meter_example/meter_example.html} +0 -0
  82. data/examples/css/motorcycle_on_the_go/motorcycle_on_the_go.html +227 -0
  83. data/examples/css/on_hover_glow_effect/on_hover_glow_effect.html +50 -0
  84. data/examples/css/on_mouse_button_pressed.html +6 -4
  85. data/examples/css/our_solar_system/our_solar_system.html +441 -0
  86. data/examples/css/outline/outline_versus_border_example.html +57 -0
  87. data/examples/css/polaroid_card_effect_example/polaroid_card_effect_example.html +130 -0
  88. data/examples/css/responsive_image_gallery/responsive_image_gallery.html +97 -0
  89. data/examples/css/rotating_DNA/rotating_DNA.html +626 -0
  90. data/examples/css/rotating_sphere_example/rotating_sphere_example.html +112 -0
  91. data/examples/css/scale_example.html +4 -5
  92. data/examples/css/shadow_example_in_CSS/shadow_example_in_CSS.cgi +62 -0
  93. data/examples/css/shaking_shapes_example.html +133 -0
  94. data/examples/css/simple_stars_example/simple_stars_example.html +27 -0
  95. data/examples/css/slide_checkbox_example/slide_checkbox_example.html +564 -0
  96. data/examples/css/speak_bubble_quote_example/speak_bubble_quote_example.html +109 -0
  97. data/examples/css/speedy_truck_example/speedy_truck_example.html +168 -0
  98. data/examples/css/{sticky_div_example.html → sticky_div_example/sticky_div_example.html} +0 -0
  99. data/examples/css/stitched_div.html +9 -0
  100. data/examples/css/sun_and_clouds_animation/sun_and_clouds_animation.html +292 -0
  101. data/examples/css/talking_candles_example/talking_candles_example.html +550 -0
  102. data/examples/css/text_decoration_underline_example/text_decoration_underline_example.html +62 -0
  103. data/examples/css/this_is_a_cat/this_is_a_cat.html +219 -0
  104. data/examples/css/three_dots_indicating_page_loading.html +65 -0
  105. data/examples/css/user_select_example/user_select_example.html +24 -0
  106. data/examples/css/walking_cat/walking_cat.html +128 -0
  107. data/examples/css/water_wave_text_animation_effect/water_wave_text_animation_effect.html +86 -0
  108. data/examples/csv/README.md +2 -1
  109. data/examples/flip_card_example/flip_card_example.html +10 -3
  110. data/examples/games/README.md +3 -0
  111. data/examples/games/snake/images/food.png +0 -0
  112. data/examples/games/snake/images/ground.png +0 -0
  113. data/examples/games/snake/snake.html +16 -0
  114. data/examples/games/snake/snake.js +117 -0
  115. data/examples/games/tetris/smaller_tetris_game.html +518 -0
  116. data/examples/games/tetris/tetris.html +461 -0
  117. data/examples/games/tic-tac-toe/index.js +125 -0
  118. data/examples/games/tic-tac-toe/style.css +79 -0
  119. data/examples/games/tic-tac-toe/tic-tac-toe.html +39 -0
  120. data/examples/html/MathML/001_show_a_simple_quadratic_equation.html +22 -0
  121. data/examples/html/MathML/002_simple_equation.html +7 -0
  122. data/examples/html/MathML/003_function_of_example.html +17 -0
  123. data/examples/html/MathML/README.md +2 -0
  124. data/examples/html/abbr_example.html +2 -5
  125. data/examples/html/accordion/README.md +1 -0
  126. data/examples/html/accordion/accordion.html +56 -0
  127. data/examples/html/base64_image_example.html +8 -5
  128. data/examples/html/buttons_example.html +133 -0
  129. data/examples/html/canvas_drawing_example.html +54 -0
  130. data/examples/html/colour_wheel.html +441 -442
  131. data/examples/html/column_width_example.html +2 -2
  132. data/examples/html/custom_cursor.html +8 -5
  133. data/examples/html/cyberweb_logo/README.md +2 -0
  134. data/examples/html/cyberweb_logo/cyberweb_logo.html +11 -0
  135. data/examples/html/draggable_paragraph.html +1 -2
  136. data/examples/html/email_popup_example/email_popup_example.html +175 -0
  137. data/examples/html/fieldset_example.html +3 -1
  138. data/examples/html/font_examples/README.md +1 -0
  139. data/examples/html/font_examples/chancery_text.html +19 -0
  140. data/examples/html/font_examples/fantasy_text.html +19 -0
  141. data/examples/html/font_examples/georgia_text.html +19 -0
  142. data/examples/html/font_size_example/font_size_example.html +85 -0
  143. data/examples/html/glyph_example.html +0 -1
  144. data/examples/html/grayscale_filter_example/grayscale_filter_example.html +15 -0
  145. data/examples/html/html_links_example.html +61 -0
  146. data/examples/html/html_slider/html_slider.html +39 -0
  147. data/examples/html/input_autofocus_example.html +11 -7
  148. data/examples/html/input_placeholder_example.html +15 -0
  149. data/examples/html/larger_image_on_mouse_over_example.html +1 -1
  150. data/examples/html/ordered_and_unordered_bulletsin.html +4 -2
  151. data/examples/html/play_video_example.html +3 -2
  152. data/examples/html/remote_image_example.html +8 -2
  153. data/examples/html/select_everything_on_mouse_click_event.html +38 -0
  154. data/examples/html/selected_text_appears_in_another_colour_example.html +34 -0
  155. data/examples/html/send_email_hyperlink/send_email_hyperlink.html +8 -0
  156. data/examples/html/simple_unordered_list.html +3 -0
  157. data/examples/html/spinner_example/spinner.html +79 -0
  158. data/examples/html/table_with_header_example.html +26 -13
  159. data/examples/html/test_mkv_codec/test_mkv_codec.html +11 -0
  160. data/examples/html/two_columns_flex_example.html +4 -1
  161. data/examples/{javascript → javascript_and_jquery}/README.md +0 -0
  162. data/examples/{javascript → javascript_and_jquery}/arrays/arrays_example_in_javascript.html +0 -0
  163. data/examples/javascript_and_jquery/autocomplete_on_an_input_field/autocomplete_on_an_input_field.html +295 -0
  164. data/examples/javascript_and_jquery/change_the_background_colour_dynamically/change_the_background_colour_dynamically.html +41 -0
  165. data/examples/{javascript → javascript_and_jquery}/delay_example/delay_example.html +0 -0
  166. data/examples/{javascript → javascript_and_jquery}/drag_support/drag_support.html +0 -0
  167. data/examples/javascript_and_jquery/jquery_bubbling_header/bubbling_header.html +109 -0
  168. data/examples/{javascript → javascript_and_jquery}/jquery_drag_and_drop/drag_and_drop_image_example.html +0 -0
  169. data/examples/javascript_and_jquery/jquery_showcase/README.md +6 -0
  170. data/examples/javascript_and_jquery/jquery_showcase/jquery_001.cgi +23 -0
  171. data/examples/javascript_and_jquery/jquery_showcase/jquery_002.cgi +34 -0
  172. data/examples/javascript_and_jquery/jquery_showcase/jquery_003.cgi +24 -0
  173. data/examples/javascript_and_jquery/jquery_showcase/jquery_004.cgi +34 -0
  174. data/examples/javascript_and_jquery/on_change_event/on_change_event.html +29 -0
  175. data/examples/javascript_and_jquery/on_click_colour_change/on_click_colour_change.html +31 -0
  176. data/examples/javascript_and_jquery/on_click_display_random_number/on_click_display_random_number.html +43 -0
  177. data/examples/{javascript → javascript_and_jquery}/on_click_event_hello_world/on_click_event_hello_world.html +0 -0
  178. data/examples/javascript_and_jquery/on_mouse_wheel_event/on_mouse_wheel_event.html +37 -0
  179. data/examples/javascript_and_jquery/read_the_content_of_a_local_file/read_the_content_of_a_local_file.html +35 -0
  180. data/examples/{javascript → javascript_and_jquery}/rgb_to_hex/rgb_to_hex.html +0 -0
  181. data/examples/{javascript → javascript_and_jquery}/screen_resolution/screen_resolution.html +2 -1
  182. data/examples/{javascript → javascript_and_jquery}/select_everything/select_everything.html +1 -1
  183. data/examples/javascript_and_jquery/vue/README.md +1 -0
  184. data/examples/javascript_and_jquery/vue/showcasing_vue.html +80 -0
  185. data/examples/{javascript → javascript_and_jquery}/write_into_a_file/write_into_a_file.html +0 -0
  186. data/examples/rack/example_with_html_template.rb +5 -4
  187. data/examples/rack/example_with_rack_and_cyberweb_showing_how_to_use_images.rb +3 -2
  188. data/examples/rack/hello_world_example_with_rack.rb +3 -2
  189. data/examples/rack/lobster.rb +7 -5
  190. data/examples/rack/rack_env.rb +3 -3
  191. data/examples/{show_greek_letters.rb → show_greek_letters/show_greek_letters.rb} +0 -0
  192. data/examples/simple/input_example_with_coloured_focus.cgi +32 -0
  193. data/examples/simple/input_type_examples.cgi +51 -0
  194. data/examples/simple/on_click_event_hello_world.cgi +5 -5
  195. data/examples/simple/rotate_these_words.cgi +90 -0
  196. data/examples/{example1.rb → simple/show_how_to_set_a_title.rb} +0 -0
  197. data/examples/simple/simple_gradient.cgi +57 -0
  198. data/images/cyberweb_favicon.png +0 -0
  199. data/images/cyberweb_logo.png +0 -0
  200. data/images/cyberweb_theme.png +0 -0
  201. data/lib/cyberweb/REST/README.md +7 -0
  202. data/lib/cyberweb/REST/base/accept_entry.rb +94 -0
  203. data/lib/cyberweb/REST/base/application.rb +37 -0
  204. data/lib/cyberweb/REST/base/bad_request.rb +10 -0
  205. data/lib/cyberweb/REST/base/base.rb +1131 -0
  206. data/lib/cyberweb/REST/base/common_logger.rb +35 -0
  207. data/lib/cyberweb/REST/base/delegator.rb +75 -0
  208. data/lib/cyberweb/REST/base/error.rb +8 -0
  209. data/lib/cyberweb/REST/base/extended_rack.rb +66 -0
  210. data/lib/cyberweb/REST/base/helpers/helpers.rb +473 -0
  211. data/lib/cyberweb/REST/base/helpers/stream.rb +75 -0
  212. data/lib/cyberweb/REST/base/mime_type_entry.rb +67 -0
  213. data/lib/cyberweb/{constants/file_constants.rb → REST/base/not_found.rb} +10 -5
  214. data/lib/cyberweb/REST/base/request.rb +145 -0
  215. data/lib/cyberweb/REST/base/response.rb +94 -0
  216. data/lib/cyberweb/REST/base/templates/templates.rb +208 -0
  217. data/lib/cyberweb/REST/base/wrapper.rb +28 -0
  218. data/lib/cyberweb/{constants/nl.rb → REST/constants.rb} +8 -9
  219. data/lib/cyberweb/REST/main.rb +109 -0
  220. data/lib/cyberweb/REST/show_exceptions.rb +396 -0
  221. data/lib/cyberweb/and_sinatra_base.rb +0 -0
  222. data/lib/cyberweb/autoinclude.rb +0 -0
  223. data/lib/cyberweb/autoinclude_webobject.rb +0 -0
  224. data/lib/cyberweb/base/base.rb +9 -2
  225. data/lib/cyberweb/base/colours.rb +8 -6
  226. data/lib/cyberweb/base/constants.rb +8 -0
  227. data/lib/cyberweb/base/misc.rb +140 -53
  228. data/lib/cyberweb/base/save_file.rb +3 -0
  229. data/lib/cyberweb/base_module/base_module.rb +79 -0
  230. data/lib/cyberweb/cascading_style_sheets/admonition.css +0 -0
  231. data/lib/cyberweb/cascading_style_sheets/balloon.css +0 -0
  232. data/lib/cyberweb/cascading_style_sheets/border.css +107 -41
  233. data/lib/cyberweb/cascading_style_sheets/code.css +0 -0
  234. data/lib/cyberweb/cascading_style_sheets/colours.css +46 -23
  235. data/lib/cyberweb/cascading_style_sheets/css_reset.css +59 -0
  236. data/lib/cyberweb/cascading_style_sheets/cursors.css +14 -0
  237. data/lib/cyberweb/cascading_style_sheets/custom/animated_bike.css +199 -0
  238. data/lib/cyberweb/cascading_style_sheets/default.css +171 -136
  239. data/lib/cyberweb/cascading_style_sheets/div.css +18 -4
  240. data/lib/cyberweb/cascading_style_sheets/drop_shadow.css +154 -0
  241. data/lib/cyberweb/cascading_style_sheets/error_404_css_class.css +26 -0
  242. data/lib/cyberweb/cascading_style_sheets/fonts.css +60 -39
  243. data/lib/cyberweb/cascading_style_sheets/glow_effects.css +69 -0
  244. data/lib/cyberweb/cascading_style_sheets/gradient_effects.css +5 -0
  245. data/lib/cyberweb/cascading_style_sheets/hover.css +4212 -0
  246. data/lib/cyberweb/cascading_style_sheets/links.css +8 -8
  247. data/lib/cyberweb/cascading_style_sheets/margin.css +195 -178
  248. data/lib/cyberweb/cascading_style_sheets/menu.css +0 -0
  249. data/lib/cyberweb/cascading_style_sheets/message_boxes.css +0 -0
  250. data/lib/cyberweb/cascading_style_sheets/misc.css +51 -11
  251. data/lib/cyberweb/cascading_style_sheets/popup.css +0 -0
  252. data/lib/cyberweb/cascading_style_sheets/rpg.css +0 -0
  253. data/lib/cyberweb/cascading_style_sheets/ruby_regexes.css +12 -0
  254. data/lib/cyberweb/cascading_style_sheets/shapes.css +59 -0
  255. data/lib/cyberweb/cascading_style_sheets/template2.css +0 -0
  256. data/lib/cyberweb/cascading_style_sheets/text_shadow.css +21 -0
  257. data/lib/cyberweb/cascading_style_sheets/tooltip.css +0 -0
  258. data/lib/cyberweb/cgi/constants.rb +1 -2
  259. data/lib/cyberweb/cgi/exceptions.rb +1 -1
  260. data/lib/cyberweb/coloured_tags/coloured_tags.rb +1 -1
  261. data/lib/cyberweb/colours/colour_chart.rb +10 -56
  262. data/lib/cyberweb/colours/colours.rb +149 -4
  263. data/lib/cyberweb/commandline/commandline_interface.rb +13 -8
  264. data/lib/cyberweb/configuration/load_the_configuration_file.rb +1 -1
  265. data/lib/cyberweb/constants/constants.rb +592 -2
  266. data/lib/cyberweb/controller/{webobject_controller.rb → controller.rb} +1 -1
  267. data/lib/cyberweb/css_manager/css_manager.rb +237 -0
  268. data/lib/cyberweb/databases/sqlite.rb +56 -0
  269. data/lib/cyberweb/debug/debug.rb +1 -1
  270. data/lib/cyberweb/encoding/encoding.rb +11 -0
  271. data/lib/cyberweb/erb/test.rhtml +0 -0
  272. data/lib/cyberweb/erb/test_template.erb +0 -0
  273. data/lib/cyberweb/evaluate_from_the_same_named_file_then_serve.rb +1 -1
  274. data/lib/cyberweb/favicon/favicon.rb +8 -7
  275. data/lib/cyberweb/forum/README.md +4 -0
  276. data/lib/cyberweb/foto_gallery/foto_gallery.rb +158 -0
  277. data/lib/cyberweb/generator/README.md +2 -2
  278. data/lib/cyberweb/generator/cgi.rb +22 -9
  279. data/lib/cyberweb/generator/static_webpage.rb +22 -12
  280. data/lib/cyberweb/html_tags/README.md +3 -3
  281. data/lib/cyberweb/html_tags/button.rb +10 -2
  282. data/lib/cyberweb/html_tags/h2.rb +6 -4
  283. data/lib/cyberweb/html_tags/html_tags.rb +17 -1
  284. data/lib/cyberweb/html_tags/input.rb +10 -5
  285. data/lib/cyberweb/html_tags/legend.rb +1 -1
  286. data/lib/cyberweb/html_tags/span.rb +10 -2
  287. data/lib/cyberweb/html_tags/table.rb +30 -19
  288. data/lib/cyberweb/html_template/html_template.rb +248 -85
  289. data/lib/cyberweb/images/embed_this_image.rb +3 -1
  290. data/lib/cyberweb/images/images.rb +2 -2
  291. data/lib/cyberweb/images/is_image.rb +2 -1
  292. data/lib/cyberweb/images/path_to_images.rb +2 -1
  293. data/lib/cyberweb/images/remove_this_substring_from_all_images.rb +1 -1
  294. data/lib/cyberweb/images/standalone_drag_and_drop_this_image.rb +3 -3
  295. data/lib/cyberweb/images/string_image.rb +6 -3
  296. data/lib/cyberweb/images_base64_encoded/404_ERROR.png.md +1 -0
  297. data/lib/cyberweb/images_base64_encoded/AUSRUFUNGSZEICHEN.png.md +0 -0
  298. data/lib/cyberweb/images_base64_encoded/BLUEARROW.png.md +0 -0
  299. data/lib/cyberweb/images_base64_encoded/BUBBLE.png.md +0 -0
  300. data/lib/cyberweb/images_base64_encoded/CAT.png.md +0 -0
  301. data/lib/cyberweb/images_base64_encoded/CAUTION.png.md +0 -0
  302. data/lib/cyberweb/images_base64_encoded/CHEERING_PERSON.png.md +0 -0
  303. data/lib/cyberweb/images_base64_encoded/CURSOR.png.md +0 -0
  304. data/lib/cyberweb/images_base64_encoded/DOT_01.png.md +0 -0
  305. data/lib/cyberweb/images_base64_encoded/DUCKY.png.md +0 -0
  306. data/lib/cyberweb/images_base64_encoded/ELEPHANT.png.md +0 -0
  307. data/lib/cyberweb/images_base64_encoded/HALLOWEEN.png.md +0 -0
  308. data/lib/cyberweb/images_base64_encoded/HANGING_MONKEY.png.md +0 -0
  309. data/lib/cyberweb/images_base64_encoded/LENS.png.md +0 -0
  310. data/lib/cyberweb/images_base64_encoded/README.md +0 -0
  311. data/lib/cyberweb/images_base64_encoded/SIX_SIDED_DICE.png.md +1 -0
  312. data/lib/cyberweb/images_base64_encoded/TU_WIEN_LOGO.png.md +0 -0
  313. data/lib/cyberweb/images_base64_encoded/VOGEL.png.md +0 -0
  314. data/lib/cyberweb/javascript/drag_and_drop.rb +17 -14
  315. data/lib/cyberweb/javascript/javascript.rb +79 -34
  316. data/lib/cyberweb/javascript/javascript_clock.rb +50 -14
  317. data/lib/cyberweb/javascript/javascript_helper/javascript_helper.rb +59 -0
  318. data/lib/cyberweb/javascript/jquery.rb +9 -5
  319. data/lib/cyberweb/javascript/on_click_change_opacity.rb +5 -1
  320. data/lib/cyberweb/javascript/on_click_hide.rb +2 -0
  321. data/lib/cyberweb/javascript/popup.rb +5 -2
  322. data/lib/cyberweb/javascript/resize.rb +4 -1
  323. data/lib/cyberweb/javascript_code/README.md +1 -1
  324. data/lib/cyberweb/javascript_code/custom_functions.js +51 -25
  325. data/lib/cyberweb/javascript_code/disable_right_click.js +5 -0
  326. data/lib/cyberweb/javascript_code/games/snake.js +113 -0
  327. data/lib/cyberweb/javascript_code/games/tetris.js +491 -0
  328. data/lib/cyberweb/javascript_code/games/tic-tac-toe.js +125 -0
  329. data/lib/cyberweb/javascript_code/html_colours.js +161 -0
  330. data/lib/cyberweb/javascript_code/jquery/jquery-3.6.1.js +10909 -0
  331. data/lib/cyberweb/javascript_code/select_everything_on_mouse_click_event.js +23 -0
  332. data/lib/cyberweb/javascript_code/simple_calculator.js +3 -3
  333. data/lib/cyberweb/javascript_code/simulate_a_dice.js +20 -0
  334. data/lib/cyberweb/javascript_code/sleep.js +3 -0
  335. data/lib/cyberweb/mouse/mouse.rb +4 -1
  336. data/lib/cyberweb/objectified/html_tags/README.md +13 -0
  337. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/a.rb +17 -35
  338. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/abbr.rb +18 -9
  339. data/lib/cyberweb/objectified/html_tags/base.rb +960 -0
  340. data/lib/cyberweb/objectified/html_tags/blockquote.rb +106 -0
  341. data/lib/cyberweb/{objectified_html_tags/span.rb → objectified/html_tags/body.rb} +25 -20
  342. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/button.rb +26 -34
  343. data/lib/cyberweb/objectified/html_tags/canvas.rb +202 -0
  344. data/lib/cyberweb/objectified/html_tags/cite.rb +103 -0
  345. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/combobox.rb +26 -34
  346. data/lib/cyberweb/objectified/html_tags/div.rb +155 -0
  347. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/embed.rb +18 -33
  348. data/lib/cyberweb/objectified/html_tags/fieldset.rb +107 -0
  349. data/lib/cyberweb/objectified/html_tags/figure.rb +152 -0
  350. data/lib/cyberweb/objectified/html_tags/form.rb +155 -0
  351. data/lib/cyberweb/objectified/html_tags/h1.rb +176 -0
  352. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/h2.rb +32 -40
  353. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/h3.rb +30 -42
  354. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/h4.rb +30 -42
  355. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/h5.rb +31 -40
  356. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/h6.rb +31 -41
  357. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/hbox.rb +12 -10
  358. data/lib/cyberweb/objectified/html_tags/head.rb +126 -0
  359. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/img.rb +47 -32
  360. data/lib/cyberweb/objectified/html_tags/include_objectified_html_tags.rb +49 -0
  361. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/input.rb +50 -51
  362. data/lib/cyberweb/objectified/html_tags/map.rb +107 -0
  363. data/lib/cyberweb/{objectified_html_tags/div.rb → objectified/html_tags/meta.rb} +36 -47
  364. data/lib/cyberweb/{objectified_html_tags/h1.rb → objectified/html_tags/object.rb} +34 -42
  365. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/p.rb +17 -32
  366. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/pre.rb +28 -34
  367. data/lib/cyberweb/{objectified_html_tags/table.rb → objectified/html_tags/progress.rb} +99 -94
  368. data/lib/cyberweb/objectified/html_tags/span.rb +103 -0
  369. data/lib/cyberweb/objectified/html_tags/table.rb +257 -0
  370. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/textarea.rb +25 -36
  371. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/title.rb +11 -17
  372. data/lib/cyberweb/{objectified_html_tags/form.rb → objectified/html_tags/ul.rb} +45 -42
  373. data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/window.rb +15 -10
  374. data/lib/cyberweb/objectified/mask/README.md +8 -0
  375. data/lib/cyberweb/objectified/mask/compatibility_to_html_tags.rb +40 -0
  376. data/lib/cyberweb/objectified/mask/mask.rb +490 -0
  377. data/lib/cyberweb/objectified/web_object/README.md +4 -0
  378. data/lib/cyberweb/objectified/web_object/web_object.rb +119 -0
  379. data/lib/cyberweb/predefined_and_freeform_methods/frage.rb +4 -2
  380. data/lib/cyberweb/predefined_and_freeform_methods/freeform_methods.rb +30 -19
  381. data/lib/cyberweb/predefined_and_freeform_methods/hash_registered_extra_tags.rb +6 -0
  382. data/lib/cyberweb/predefined_and_freeform_methods/header.rb +2 -0
  383. data/lib/cyberweb/predefined_and_freeform_methods/predefined_methods.rb +10 -175
  384. data/lib/cyberweb/project/project.rb +9 -4
  385. data/lib/cyberweb/rack/request.rb +11 -11
  386. data/lib/cyberweb/raw_images/404.png +0 -0
  387. data/lib/cyberweb/raw_images/500.png +0 -0
  388. data/lib/cyberweb/raw_images/README.md +2 -0
  389. data/lib/cyberweb/raw_images/a_dice.png +0 -0
  390. data/lib/cyberweb/raw_images/food.png +0 -0
  391. data/lib/cyberweb/raw_images/ground.png +0 -0
  392. data/lib/cyberweb/requires/require_generators.rb +1 -1
  393. data/lib/cyberweb/requires/require_html_tags_files.rb +1 -1
  394. data/lib/cyberweb/requires/require_javascript_files.rb +1 -1
  395. data/lib/cyberweb/requires/require_objectified_html_tags_files.rb +29 -3
  396. data/lib/cyberweb/requires/require_the_constants.rb +3 -1
  397. data/lib/cyberweb/requires/require_the_cyberweb_project.rb +12 -31
  398. data/lib/cyberweb/requires/require_the_toplevel_methods_files.rb +1 -1
  399. data/lib/cyberweb/requires/require_web_object_files.rb +1 -1
  400. data/lib/cyberweb/requires/require_yaml.rb +3 -3
  401. data/lib/cyberweb/rest +1 -0
  402. data/lib/cyberweb/route_handler/class_based_test.rb +43 -0
  403. data/lib/cyberweb/route_handler/module/misc.rb +108 -0
  404. data/lib/cyberweb/route_handler/module/route_handler_module.rb +215 -0
  405. data/lib/cyberweb/route_handler/module/verbs.rb +53 -0
  406. data/lib/cyberweb/route_handler/route_handler.rb +56 -0
  407. data/lib/cyberweb/route_handler/test.rb +43 -0
  408. data/lib/cyberweb/{constants/array_predefined_constants.rb → sinatra/base/set_use_this_port.rb} +16 -9
  409. data/lib/cyberweb/sinatra/base/use_this_port.rb +40 -0
  410. data/lib/cyberweb/sinatra/base.rb +51 -36
  411. data/lib/cyberweb/sinatra/custom_extensions.rb +39 -14
  412. data/lib/cyberweb/standalone_classes/all_css_classes.rb +1 -1
  413. data/lib/cyberweb/standalone_classes/calculator.rb +7 -1
  414. data/lib/cyberweb/standalone_classes/correct_image_entries_in_html_file.rb +12 -7
  415. data/lib/cyberweb/standalone_classes/turn_html_into_cyberweb.rb +13 -11
  416. data/lib/cyberweb/svg/standalone/README.md +2 -0
  417. data/lib/cyberweb/svg/standalone/amusement_park.svg +738 -0
  418. data/lib/cyberweb/svg/svg.cgi +2 -3
  419. data/lib/cyberweb/toplevel_methods/a.rb +2 -1
  420. data/lib/cyberweb/toplevel_methods/anmerkung.rb +3 -0
  421. data/lib/cyberweb/toplevel_methods/audio.rb +1 -1
  422. data/lib/cyberweb/toplevel_methods/bold.rb +9 -3
  423. data/lib/cyberweb/toplevel_methods/charsets.rb +17 -13
  424. data/lib/cyberweb/toplevel_methods/consider_serving_the_web_object.rb +3 -3
  425. data/lib/cyberweb/toplevel_methods/css.rb +719 -25
  426. data/lib/cyberweb/{csv → toplevel_methods}/csv.rb +5 -3
  427. data/lib/cyberweb/{constants/roebe.rb → toplevel_methods/custom_error_page.rb} +10 -10
  428. data/lib/cyberweb/toplevel_methods/{date.rb → date_and_time.rb} +23 -10
  429. data/lib/cyberweb/toplevel_methods/disable.rb +7 -3
  430. data/lib/cyberweb/toplevel_methods/dot.rb +2 -2
  431. data/lib/cyberweb/toplevel_methods/download_webpage.rb +41 -3
  432. data/lib/cyberweb/toplevel_methods/edit_configuration_file.rb +1 -1
  433. data/lib/cyberweb/toplevel_methods/fields.rb +2 -0
  434. data/lib/cyberweb/toplevel_methods/filename.rb +3 -1
  435. data/lib/cyberweb/toplevel_methods/frames.rb +0 -2
  436. data/lib/cyberweb/toplevel_methods/google.rb +52 -0
  437. data/lib/cyberweb/{html_codes → toplevel_methods}/greek_letters.rb +22 -1
  438. data/lib/cyberweb/toplevel_methods/hardware_information.rb +2 -1
  439. data/lib/cyberweb/{help → toplevel_methods}/help.rb +3 -2
  440. data/lib/cyberweb/toplevel_methods/html_comment.rb +2 -2
  441. data/lib/cyberweb/toplevel_methods/html_tables.rb +401 -266
  442. data/lib/cyberweb/toplevel_methods/internal_hash.rb +173 -0
  443. data/lib/cyberweb/{io → toplevel_methods}/io.rb +1 -1
  444. data/lib/cyberweb/toplevel_methods/javascript.rb +42 -0
  445. data/lib/cyberweb/toplevel_methods/jquery.rb +8 -0
  446. data/lib/cyberweb/toplevel_methods/last_modified.rb +4 -0
  447. data/lib/cyberweb/toplevel_methods/links.rb +23 -7
  448. data/lib/cyberweb/toplevel_methods/listing.rb +2 -1
  449. data/lib/cyberweb/toplevel_methods/localhost.rb +3 -0
  450. data/lib/cyberweb/toplevel_methods/markdown.rb +3 -2
  451. data/lib/cyberweb/toplevel_methods/mathml.rb +5 -3
  452. data/lib/cyberweb/toplevel_methods/message_boxes.rb +6 -2
  453. data/lib/cyberweb/toplevel_methods/misc.rb +531 -79
  454. data/lib/cyberweb/toplevel_methods/padlem_and_marlem.rb +3 -0
  455. data/lib/cyberweb/toplevel_methods/path.rb +6 -1
  456. data/lib/cyberweb/toplevel_methods/pdf.rb +1 -1
  457. data/lib/cyberweb/toplevel_methods/process_content.rb +4 -7
  458. data/lib/cyberweb/toplevel_methods/progress.rb +6 -2
  459. data/lib/cyberweb/toplevel_methods/quote.rb +7 -1
  460. data/lib/cyberweb/toplevel_methods/random.rb +4 -1
  461. data/lib/cyberweb/toplevel_methods/rds.rb +14 -6
  462. data/lib/cyberweb/toplevel_methods/read_and_display.rb +3 -2
  463. data/lib/cyberweb/toplevel_methods/return_head_start.rb +1 -1
  464. data/lib/cyberweb/toplevel_methods/return_html_fin.rb +6 -3
  465. data/lib/cyberweb/toplevel_methods/return_html_header.rb +8 -3
  466. data/lib/cyberweb/toplevel_methods/return_html_start.rb +7 -2
  467. data/lib/cyberweb/toplevel_methods/return_meta_collection.rb +15 -4
  468. data/lib/cyberweb/toplevel_methods/return_pwd.rb +4 -0
  469. data/lib/cyberweb/toplevel_methods/return_strict_doctype.rb +8 -7
  470. data/lib/cyberweb/toplevel_methods/roebe.rb +6 -0
  471. data/lib/cyberweb/toplevel_methods/s2.rb +3 -1
  472. data/lib/cyberweb/toplevel_methods/sanitize_url.rb +7 -5
  473. data/lib/cyberweb/toplevel_methods/sbr.rb +7 -7
  474. data/lib/cyberweb/toplevel_methods/server_base_directory.rb +7 -3
  475. data/lib/cyberweb/toplevel_methods/show_and_display.rb +15 -15
  476. data/lib/cyberweb/toplevel_methods/show_configuration.rb +2 -2
  477. data/lib/cyberweb/toplevel_methods/spacer.rb +5 -2
  478. data/lib/cyberweb/toplevel_methods/svg.rb +62 -4
  479. data/lib/cyberweb/toplevel_methods/tag.rb +8 -2
  480. data/lib/cyberweb/toplevel_methods/temp_directory.rb +2 -2
  481. data/lib/cyberweb/toplevel_methods/textile.rb +2 -2
  482. data/lib/cyberweb/toplevel_methods/title.rb +14 -2
  483. data/lib/cyberweb/toplevel_methods/video.rb +3 -4
  484. data/lib/cyberweb/toplevel_methods/write_what_into.rb +2 -0
  485. data/lib/cyberweb/utility_scripts/README.md +3 -4
  486. data/lib/cyberweb/utility_scripts/autogenerate_drop_shadow_rules/autogenerate_drop_shadow_rules.rb +71 -0
  487. data/lib/cyberweb/utility_scripts/create_standalone_html_page.rb +223 -0
  488. data/lib/cyberweb/utility_scripts/download_all_images_from_this_website.rb +143 -0
  489. data/lib/cyberweb/utility_scripts/download_balloon_css.rb +1 -1
  490. data/lib/cyberweb/utility_scripts/fix_incorrect_links_to_locally_existing_images_in_this_file.rb +142 -0
  491. data/lib/cyberweb/utility_scripts/html_to_cyberweb_converter.rb +235 -0
  492. data/lib/cyberweb/utility_scripts/images_to_html/images_to_html.rb +878 -0
  493. data/lib/cyberweb/utility_scripts/images_to_html/misc.rb +62 -0
  494. data/lib/cyberweb/utility_scripts/new_tags.rb +105 -0
  495. data/lib/cyberweb/utility_scripts/simple_index/README.md +9 -0
  496. data/lib/cyberweb/utility_scripts/simple_index/simple_index.rb +149 -0
  497. data/lib/cyberweb/version/version.rb +2 -2
  498. data/lib/cyberweb/vue/README.md +2 -0
  499. data/lib/cyberweb/vue/vue.rb +91 -0
  500. data/lib/cyberweb/web_images/array_listing_all_project_images.rb +1 -1
  501. data/lib/cyberweb/web_images/map_symbol_to_image_location.rb +60 -4
  502. data/lib/cyberweb/web_images/web_images.rb +37 -20
  503. data/lib/cyberweb/{constants/array_images.rb → web_object/display_output_and_report.rb} +11 -10
  504. data/lib/cyberweb/web_object/english.rb +55 -0
  505. data/lib/cyberweb/web_object/favicon.rb +103 -22
  506. data/lib/cyberweb/web_object/html_tags.rb +1433 -0
  507. data/lib/cyberweb/web_object/images.rb +428 -398
  508. data/lib/cyberweb/web_object/{javascript.rb → javascript_and_jquery.rb} +174 -276
  509. data/lib/cyberweb/web_object/{links.rb → link.rb} +185 -83
  510. data/lib/cyberweb/web_object/misc.rb +3934 -3928
  511. data/lib/cyberweb/web_object/reset.rb +153 -67
  512. data/lib/cyberweb/web_object/run.rb +1 -1
  513. data/lib/cyberweb/web_object/web_object.rb +3690 -49
  514. data/lib/cyberweb/web_scraper/scrape_this_url.rb +4 -2
  515. data/lib/cyberweb/webmin/biology_server.cgi +14 -15
  516. data/lib/cyberweb/webmin/calculator.cgi +2 -2
  517. data/lib/cyberweb/webmin/colour_chart.cgi +4 -5
  518. data/lib/cyberweb/webmin/comments.cgi +8 -7
  519. data/lib/cyberweb/webmin/comments_data +0 -0
  520. data/lib/cyberweb/webmin/constants.rb +1 -2
  521. data/lib/cyberweb/webmin/dictionary.cgi +3 -4
  522. data/lib/cyberweb/webmin/sys_info.cgi +1 -2
  523. data/lib/cyberweb/webmin/webforum.cgi +1 -2
  524. data/lib/cyberweb/webmin/webmin.cgi +2 -3
  525. data/lib/cyberweb/yaml/autogenerated_system_settings.yml +10 -10
  526. data/lib/cyberweb/yaml/custom_tags.yml +1 -1
  527. data/lib/cyberweb/yaml/html5_global_attributes.yml +5 -1
  528. data/lib/cyberweb/yaml/html_tag_legend.yml +2 -0
  529. data/lib/cyberweb/yaml/http_status_codes.yml +4 -1
  530. data/lib/cyberweb/yaml/load_these_yaml_files_by_default.yml +29 -0
  531. data/lib/cyberweb/yaml/project_configuration.yml +42 -31
  532. data/lib/cyberweb/yaml/video_attributes.yml +2 -0
  533. data/lib/cyberweb/yaml/web_images.yml +1 -1
  534. data/test/REST/simple.rb +7 -0
  535. data/test/complex_tests/simple_sinatra_example_using_cyberweb/simple.rb +1 -1
  536. data/test/complex_tests/sinatra_or_cyberweb/sinatra_or_cyberweb.cgi +1 -1
  537. data/test/complex_tests/sinatra_or_cyberweb/sinatra_or_cyberweb.rb +4 -4
  538. data/test/complex_tests/sinatra_or_cyberweb/sinatra_or_cyberweb.sinatra +1 -2
  539. data/test/complex_tests/testing_frames.cgi +3 -5
  540. data/test/complex_tests/testing_objectified_html_tags/testing_objectified_html_tags.html +28 -0
  541. data/test/complex_tests/testing_objectified_html_tags/testing_objectified_html_tags.rb +175 -0
  542. data/test/complex_tests/testing_style_variants/show_coloured_boxes.cgi +11 -7
  543. data/test/complex_tests/testing_tables.cgi +3 -3
  544. data/test/complex_tests/testing_the_cyberweb_shell.rb +2 -0
  545. data/test/complex_tests/testing_web_object.rb +5 -2
  546. data/test/css/README.md +4 -3
  547. data/test/css/return_the_content_of_these_css_classes.rb +5 -1
  548. data/test/css/test_hover_css/test_hover_css.cgi +59 -0
  549. data/test/css/test_ordered_list/test_ordered_list.cgi +31 -0
  550. data/test/css/testing_css_effects.cgi +3 -4
  551. data/test/css/testing_css_masking.cgi +3 -4
  552. data/test/hello_world/hello_world.cgi +6 -4
  553. data/test/html_template/html_template.rb +15 -0
  554. data/test/javascript/testing_custom_functions.js +24 -0
  555. data/test/javascript/testing_drag_and_drop_support.cgi +1 -1
  556. data/test/javascript/testing_on_click_change_opacity.cgi +4 -5
  557. data/test/javascript/testing_snowflakes.cgi +2 -2
  558. data/test/simple_tests/ad-hoc-test.cgi +5 -2
  559. data/test/simple_tests/cgi/hello_world_with_cyberweb.cgi +14 -0
  560. data/test/simple_tests/commandline_tests.rb +21 -15
  561. data/test/simple_tests/display_this_file.cgi +2 -2
  562. data/test/simple_tests/simple_html_example.cgi +2 -1
  563. data/test/simple_tests/simple_html_test_page/simple_html_test_page.html +20 -0
  564. data/test/simple_tests/simple_status_page.cgi +2 -2
  565. data/test/simple_tests/string_s2_test.rb +5 -0
  566. data/test/simple_tests/test_simple_string_as_input.rb +3 -1
  567. data/test/simple_tests/testing_base64_images.cgi +3 -4
  568. data/test/simple_tests/testing_checkboxes.cgi +22 -0
  569. data/test/simple_tests/testing_dragging_an_image.cgi +5 -6
  570. data/test/simple_tests/testing_editable_text.cgi +2 -3
  571. data/test/simple_tests/testing_email.cgi +6 -7
  572. data/test/simple_tests/testing_embedding_a_pdf_file.cgi +5 -5
  573. data/test/simple_tests/testing_google_charts.cgi +3 -3
  574. data/test/simple_tests/testing_html_forms.cgi +3 -3
  575. data/test/simple_tests/testing_html_template.rb +2 -0
  576. data/test/simple_tests/testing_popup_div.cgi +2 -3
  577. data/test/simple_tests/testing_return_dataset_without_any_comments.rb +3 -1
  578. data/test/simple_tests/testing_the_cap_box.cgi +3 -4
  579. data/test/simple_tests/testing_the_div_tag.cgi +3 -4
  580. data/test/simple_tests/testing_the_headers_tag.cgi +3 -4
  581. data/test/simple_tests/testing_the_html_colours.cgi +2 -3
  582. data/test/simple_tests/testing_the_info_box.cgi +2 -3
  583. data/test/simple_tests/testing_the_li_tag.cgi +2 -1
  584. data/test/simple_tests/testing_the_s2_method.rb +6 -1
  585. data/test/simple_tests/testing_the_select_tag.cgi +16 -8
  586. data/test/simple_tests/testing_the_span_tag.cgi +2 -3
  587. data/test/simple_tests/testing_web_images.rb +4 -2
  588. data/test/testing_html_tags/button_example.cgi +6 -7
  589. metadata +345 -151
  590. data/doc/CONVENTIONS.md +0 -7
  591. data/doc/CYBERWEB_TUTORIAL.cgi +0 -43
  592. data/doc/FUTURE_DESIGN_GOAL_CONSIDERATIONS.md +0 -13
  593. data/doc/todo/TODO_FOR_THE_CYBERWEB_PROJECT.md +0 -1089
  594. data/examples/css/shadow_example_in_CSS.cgi +0 -30
  595. data/lib/cyberweb/charts/README.md +0 -2
  596. data/lib/cyberweb/charts/google_charts.rb +0 -51
  597. data/lib/cyberweb/colours/random_colour.rb +0 -28
  598. data/lib/cyberweb/colours/sanitize_for_colours.rb +0 -95
  599. data/lib/cyberweb/constants/array_local_css_files.rb +0 -35
  600. data/lib/cyberweb/constants/configuration_file.rb +0 -33
  601. data/lib/cyberweb/constants/http_status_codes.rb +0 -42
  602. data/lib/cyberweb/constants/project_constants.rb +0 -99
  603. data/lib/cyberweb/constants/standalone_constants.rb +0 -309
  604. data/lib/cyberweb/csv/README.md +0 -2
  605. data/lib/cyberweb/generator/webpage_for_images.rb +0 -553
  606. data/lib/cyberweb/html_codes/README.md +0 -15
  607. data/lib/cyberweb/images/real/README.md +0 -6
  608. data/lib/cyberweb/io/README.md +0 -1
  609. data/lib/cyberweb/javascript/scroll.rb +0 -17
  610. data/lib/cyberweb/objectified_html_tags/README.md +0 -8
  611. data/lib/cyberweb/objectified_html_tags/base.rb +0 -376
  612. data/lib/cyberweb/predefined_and_freeform_methods/hash_css_class_to_use.rb +0 -55
  613. data/lib/cyberweb/requires/require_charts.rb +0 -20
  614. data/lib/cyberweb/web_object/css.rb +0 -627
  615. data/lib/cyberweb/web_object/evaluate.rb +0 -126
  616. data/lib/cyberweb/web_object/html_related_tags.rb +0 -320
  617. data/lib/cyberweb/web_object/initialize.rb +0 -51
  618. data/lib/cyberweb/web_object/input_related_functionality.rb +0 -414
  619. data/lib/cyberweb/web_object/languages.rb +0 -172
  620. data/lib/cyberweb/web_object/params.rb +0 -289
  621. data/lib/cyberweb/web_object/sinatra_related_functionality.rb +0 -30
  622. data/lib/cyberweb/web_object/sitemap.rb +0 -176
  623. data/lib/cyberweb/web_object/table.rb +0 -378
  624. data/test/complex_tests/testing_objectified_html_tags.rb +0 -82
  625. data/test/javascript/testing_cheerleader_javascript.cgi +0 -0
data/README.md CHANGED
@@ -1,51 +1,54 @@
1
- [![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](https://www.gobolinux.org/)
2
- [![forthebadge](http://forthebadge.com/images/badges/made-with-ruby.svg)](https://www.ruby-lang.org/en/)
1
+ [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://www.gobolinux.org/)
2
+ [![forthebadge](https://forthebadge.com/images/badges/made-with-ruby.svg)](https://www.ruby-lang.org/en/)
3
3
  [![Gem Version](https://badge.fury.io/rb/cyberweb.svg)](https://badge.fury.io/rb/cyberweb)
4
4
 
5
- This gem was <b>last updated</b> on the <span style="color: darkblue; font-weight: bold">14.10.2021</span> (dd.mm.yyyy notation), at <span style="color: steelblue; font-weight: bold">01:25:01</span> o'clock.
5
+ This gem was <b>last updated</b> on the <span style="color: darkblue; font-weight: bold">17.10.2022</span> (dd.mm.yyyy notation), at <span style="color: steelblue; font-weight: bold">17:36:14</span> o'clock.
6
6
 
7
- <img src="https://i.imgur.com/GatV3S5.png" style="margin-left: 0.5em">
8
- <img src="http://shevy.bplaced.net/cyberweb_theme.png" style="margin-left: 0.5em">
7
+ <img src="https://i.imgur.com/aNpDmmz.png" style="margin-left: 1.2em">
9
8
 
10
- ## The History of the Cyberweb project
9
+ ## The (slightly convoluted) History of the Cyberweb project
11
10
 
12
- This project was created a very long time ago, in PHP - in the year
13
- 2004 or so, give or take. (I used to think it was in 2002, but looking
14
- at old notes, it was more likely started in early 2004.)
11
+ The cyberweb project was created a very long time ago, written in PHP, in the
12
+ year **2004** or so, give or take.
15
13
 
16
- I was using custom functions to regulate serving web-related content
17
- back then, written in PHP.
14
+ I was combining **custom functions** to control how to serve web-related
15
+ content back then.
18
16
 
19
- The original **class WebObject**, for example, was written a very long time
20
- ago, perhaps in the year **2004** or something like this, when I
21
- transitioned away from PHP into ruby. I took all the old PHP code
22
- and adapted it at that point.
17
+ The original **class WebObject**, for instance, was written a very long time
18
+ ago, perhaps in the year **2004** already or early **2005** - something like
19
+ that, in PHP. When I eventually abandoned PHP I rewrote the parts I was
20
+ using in PHP in ruby. The functionality that was initially part of cyberweb
21
+ thus originated from a **legacy use case**. The original use case for
22
+ **class WebObject** was to describe a web-object, similar to a .html
23
+ file, but dynamic and adaptable in nature. A **.html page** can be
24
+ generated from an instance of class WebObject, for instance.
23
25
 
24
- The Cyberweb-project was rewritten several times, so it may not be
25
- very similar to the old code from ~almost 20 years ago. The important
26
- core methods, though, may still be quite similar. For example, I
27
- was using div() in PHP already, and I am using div() in ruby too.
26
+ The Cyberweb-project was rewritten several times over the next ~15 years
27
+ or so. Today it is not quite so similar to the old code base in PHP
28
+ anymore. The important core methods, though, are still somewhat similar.
29
+ For example, I was using div() in PHP already, and I am using div() in
30
+ ruby too.
28
31
 
29
- Ruby allows for more functionality out of the box, though, so I
30
- can do:
32
+ Ruby allows for more functionality out of the box, though, so I can do
33
+ the following:
31
34
 
32
35
  div {
33
36
  }
34
37
 
35
- In PHP this is not easily possible, so ruby is better in this regard -
36
- more flexible.
38
+ In PHP this is not easily possible, because the syntax is more rigid,
39
+ so ruby is better in this regard - more flexibility in this regard.
37
40
 
38
- During that transition phase, from **php** to **ruby**, the project
41
+ During that **transition phase**, from **php** to **ruby**, the project
39
42
  was renamed several times - first to **web_foundation**, then to
40
43
  **cybersprawl**, then to **Cyberweb**, then to **web_object** and
41
44
  then back to **Cyberweb** again. I think the name **Cyberweb**
42
45
  is best among these alternatives. While **web_object** is the
43
46
  more technically correct and accurate term, as everything related
44
- to the www is handled via that object, I prefer the name
45
- **Cyberweb** in general for the whole project - it sounds
46
- futuristic. The name **WebObject** is a good name too, though,
47
- as we attempt to describe a particular "web-page" as a
48
- "web-object", basically.
47
+ to the www is handled via that object (or such objects), I prefer the
48
+ name **Cyberweb** in general for the whole project - it sounds
49
+ rather futuristic. The name **WebObject** is a good name too,
50
+ though, as we attempt to describe a particular "web-page" as a
51
+ "web-object", with specific functionality, basically.
49
52
 
50
53
  **class WebObject** was originally the very main class I was
51
54
  using in PHP to describe my local knowledge base, an "app" where
@@ -68,27 +71,31 @@ The original <b>Cyberweb project</b> was "officially" started on
68
71
  **13.06.2012** (13th June in the year 2012) - that is, the name
69
72
  was first used in the year **2012**. In 2020 it came to an end
70
73
  and was replaced with the <b>WebObject</b> project, but in May
71
- 2021 the original name was re-instated. Quite confusing!
74
+ 2021 the original name was reinstated. Messy history for the
75
+ win! \o/
72
76
 
73
77
  The project called <b>html_tags</b> was created at about the same
74
78
  time back then, in the year **2012**, in order to keep the code
75
79
  base of the newly generated project somewhat cleaner and smaller.
76
- **WebFoundation** was thus renamed to Cyberweb, but there still
77
- was a directory called **foundation/**. Old gem releases of **cyberweb**
78
- may still show that, back when I kept these old releases.
79
-
80
- In **August 2018**, I removed the **foundation/** subdirectory and
81
- integrated the code into other parts of the project instead.
80
+ **WebFoundation** was thus renamed to Cyberweb - the original
81
+ directory that kept the code there was put under the directory
82
+ called **foundation/**. Old gem releases of **cyberweb**
83
+ may still show that, back when I kept these old releases
84
+ on rubygems.org.
85
+
86
+ In **August 2018**, the **foundation/** subdirectory was removed
87
+ and the code residing therein put into other parts of the project
88
+ instead.
82
89
 
83
90
  The transition phase in **2012** happened to some extent because
84
91
  I was still using ruby 1.8.x and had to make several changes to
85
92
  the old web-foundation project, in order to have my code work on
86
93
  **ruby 1.9.3** anyway.
87
94
 
88
- The rewrite would allow me to change some design decisions I made earlier
89
- on, which were not that ideal - in other words, to allow me to discard
90
- some of the old code at the same time (which again happened in 2018,
91
- when I cleaned up the cyberweb project, after many years of
95
+ The **rewrite*+ would allow me to change some design decisions I made
96
+ earlier on, which were not that ideal - in other words, to allow me to
97
+ discard some of the old code at the same time (which again happened in
98
+ 2018, when I cleaned up the cyberweb project, after many years of
92
99
  "semi-activity" only).
93
100
 
94
101
  The **rewrite** step worked for the most part, even though it took me
@@ -125,6 +132,15 @@ moments in time or may still exist:
125
132
  This may not be hugely important to know, but it explains a bit of
126
133
  the historic origin for the cyberweb project.
127
134
 
135
+ ## Cyberweb.localhost?
136
+
137
+ Cyberweb.localhost? will simply return the String 'http://localhost'.
138
+
139
+ This is only useful if you want to quickly test something on your
140
+ own localhost (local webserver). I had to build "local" URLs and
141
+ did not want to preface manually via 'http://', so it was easier
142
+ to use a simpler method instead.
143
+
128
144
  ## Aim, Goals and Scope of the Cyberweb project
129
145
 
130
146
  This subsection will detail some of the goals of the Cyberweb project.
@@ -230,16 +246,24 @@ or not.
230
246
 
231
247
  The method **Cyberweb.set_path_to_images()** can be used to set the
232
248
  path to a global image directory, that is - a directory that holds all
233
- images. On my home system this defaults to **/home/x/data/images/**.
234
-
235
- I put almost all images into this directory, but there are exceptions
236
- to this.
237
-
238
- Note that this directory will only be of relevance if the configuration
239
- options for web_object were set up to use such a directory in the
240
- first place. Only image-related methods are affected by this
249
+ images. On my home system this defaults to **/home/x/data/images/**,
250
+ so if you find any references to that directory in any of my projects
251
+ then this is the reason as to why, since it is the default on my
252
+ home setup.
253
+
254
+ I put almost all images into this directory as-is, but there are
255
+ a few exceptions to this as well. The important thing is that the
256
+ cyberweb project has to **remain flexible**.
257
+
258
+ Note that this directory will only be of relevance **if** the configuration
259
+ options for the cyberweb project were set up to use such a directory in
260
+ the first place. Only **image-related methods** are affected by this
241
261
  setting anyway.
242
262
 
263
+ Note that **Cyberweb.set_path()** is a shorter alias to this method;
264
+ may be useful in IRB. Otherwise I recommend to use the longer
265
+ method name instead, as it is more explicit.
266
+
243
267
  ## Images
244
268
 
245
269
  If an image is not existing, but used within the Cyberweb
@@ -259,20 +283,6 @@ display the above notification for images not found. If it is set
259
283
  to normal or lower than that, the web_object project will not
260
284
  display that warning.
261
285
 
262
- ## Balloon.css
263
-
264
- You can download the **balloon.css** file via class
265
- **DownloadBalloonCss** (**Cyberweb::DownloadBalloonCss**).
266
-
267
- This file resides at the location
268
- <b>web_object/utility_scripts/download_balloon_css.rb</b>.
269
-
270
- It presently (May 2018) does not do much other than download
271
- that remote .css file.
272
-
273
- I needed a small "pop-up" for displaying additional information
274
- to some entries in a table, which is how I found **Balloon.css**.
275
-
276
286
  ## Proper (default) order of arguments to many methods in the Cyberweb project
277
287
 
278
288
  The Cyberweb project uses quite a few methods that have more than 4
@@ -417,7 +427,7 @@ called **vim**).
417
427
  You can also query the current configuration via appending **config?**
418
428
  such as in:
419
429
 
420
- http://localhost/DATA/personal/sitemap.cgi?config?
430
+ http://localhost/data/personal/sitemap.cgi?config?
421
431
 
422
432
  ## HTML Tables and the Cyberweb project
423
433
 
@@ -498,16 +508,6 @@ a later time back to **cyberweb** - yup, I change
498
508
  the project names way too quickly. But the name used to
499
509
  by cyberweb in the past, so I am slowly getting used to
500
510
  that name.
501
-
502
- ## Creating input-buttons in a HTML-form field
503
-
504
- <form>
505
- <input type="button" class="BG_GRAYSTD bblack1" value="Default" name="foo" onClick="test1(this.form)">
506
- </form>
507
-
508
- <form>
509
- <input class="BG_GRAYSTD bblack1" type="button" value="Default" name="foo" onClick="test1(this.form)">
510
- </form>
511
511
 
512
512
  ## HTML Entities
513
513
 
@@ -563,41 +563,31 @@ At least the name of the image directory.
563
563
 
564
564
  ## Viewing the source of a webpage
565
565
 
566
- Use the view_source() method to add a javascript button,
566
+ Use the **view_source()** method to add a javascript button,
567
567
  to view the source of a page. The method view_source()
568
- is defined in the file shared.rb.
568
+ is defined in the file
569
+ **cyberweb/web_object/misc.rb:**.
569
570
 
570
- ## Modify the input tag
571
+ You can, of course, combine this with other code elements. For
572
+ instance, if you want to embed the view-source button into
573
+ a div, and style it, then consider the following:
571
574
 
572
- You can modify the <input> tag within that via css by using:
575
+ div('BG_Black white','div_view_source') { view_source }
573
576
 
574
- input.view_css {}
575
-
576
- ## HTML IDs
577
-
578
- All HTML ids are registered into an array. To then show whether
579
- you have duplicated IDs in a page, do this:
580
-
581
- show_duplicated_ids()
582
-
583
- Or in a more general way, use the #debug method, like so:
584
-
585
- w.debug
586
-
587
- This will report whether you have a duplicated ID or not.
588
- When the page is served, we will also display a little error
589
- message in case we have found duplicated IDs. This way we
590
- can notify the developer that there is some mistake in his
591
- page and we can correct this mistake then.
577
+ This will create a div-tag with black background and white
578
+ font colour, and the id of that div will be **div_view_source**.
579
+ Inside that div-tag the view-source button can be found.
592
580
 
593
581
  ## The table-tag
594
582
 
595
- The tag table() now supports blocks. That means you can use arrays
596
- in tables:
583
+ The tag that is generated via table() will create a HTML
584
+ table. It also supports blocks. That means you can use
585
+ arrays in tables as input, such as shown in the following
586
+ example:
597
587
 
598
588
  table { %w( one two three for ) }
599
589
 
600
- Or styled with CSS:
590
+ Or, styled with CSS:
601
591
 
602
592
  table('s1em bblack1') { %w(one two three for) }
603
593
 
@@ -781,7 +771,7 @@ to another page.
781
771
 
782
772
  Example:
783
773
 
784
- http://localhost/DATA/misc/sitemap.cgi?redirect_to=ruby_todo
774
+ http://localhost/data/misc/sitemap.cgi?redirect_to=ruby_todo
785
775
 
786
776
  This would redirect me to my local todo-file in ruby. In fact:
787
777
  that was the primary reason why the code was added, so that I
@@ -792,14 +782,23 @@ run this may have to be modified - but for now it will remain
792
782
  as it is. It can be used to quickly "jump" to another page,
793
783
  both a local page or a remote page.
794
784
 
785
+ If you want to do so via the meta-tag, consider using the
786
+ following method:
787
+
788
+ Cyberweb.return_meta_redirect 'foobar.de'
789
+
790
+ This would yield the following string:
791
+
792
+ <meta http-equiv="Refresh" content="1; URL="foobar.de">
793
+
795
794
  ## Viewing the content of any file
796
795
 
797
796
  You can view the content of any file via:
798
797
 
799
- http://localhost/DATA/misc/sitemap.cgi?view_file=ruby_todo
798
+ http://localhost/data/personal/sitemap/sitemap.cgi?view_file=ruby_todo
800
799
 
801
- This can be disabled since as of **May 2021, by setting the
802
- **view_file: true** in the project configuration .yml file.
800
+ This can be disabled since as of <b>May 2021</b>, by setting the
801
+ <b>view_file: true</b> in the project configuration .yml file.
803
802
  I recommend to do so, as you probably don't need this
804
803
  functionality. I needed it for my local webserver, to
805
804
  quickly test things, and view local files in the browser,
@@ -809,17 +808,31 @@ only).
809
808
 
810
809
  ## dropdown()
811
810
 
812
- You can use the dropdown() method to use several &lt;select>
813
- statements.
811
+ You can use the **dropdown()** method to use several &lt;select>
812
+ statements, if you use class **Cyberweb::WebObject**.
814
813
 
815
- Examples:
814
+ Specific usage examples:
816
815
 
817
816
  dropdown( %w( a b c ) )
818
817
  dropdown( %w( a b c ) ) {{ selected: 2 }}
819
818
  dropdown( %w( a b c ) ) {{ selected: 3 }}
820
819
 
821
- The latter variant will have the second entry selected as default;
822
- we begin to count at 1 here, not 0.
820
+ The **middle variant** will have the second entry selected as default;
821
+ the **last variant** will have the third entry selected as default.
822
+
823
+ Note that for the purpose of dropdown() we will begin to count
824
+ at 1 rather than 0. So 1 refers to **the first entry**. Furthermore
825
+ if the number given to **selected:** is too high then it will be
826
+ automatically reduced to the last entry of that Array - this should
827
+ simplify using the method a little bit.
828
+
829
+ For a working example of the method have a look at the file
830
+ **testing_the_select_tag.cgi**.
831
+
832
+ Here is also a small screenshot with a bit of CSS styling to
833
+ show how this looks:
834
+
835
+ <img src="https://i.imgur.com/Lqk6rKo.png" style="margin-left: 2em">
823
836
 
824
837
  ## Cyberweb.display_all_files_in_this_directory
825
838
 
@@ -879,7 +892,7 @@ to style elements on a given webpage.
879
892
 
880
893
  ## Editable text
881
894
 
882
- HTML5 allows the visitor to modify text on a webpage (although
895
+ **HTML5** allows the visitor to modify text on a webpage (although
883
896
  not persistently).
884
897
 
885
898
  The Cyberweb project also allows this. Example:
@@ -887,7 +900,38 @@ The Cyberweb project also allows this. Example:
887
900
  e('Type something here.') { :editable }
888
901
 
889
902
  This would make a span-tag, following by a br-tag,
890
- and the attribute that this is editable.
903
+ and the attribute that this is editable. You can
904
+ select some text and then just type as-is - and
905
+ thus modify the text.
906
+
907
+ ## Bold text in CSS
908
+
909
+ Normal text usually equates to a font-weight value of
910
+ <b>400</b> whereas bold text equals to a value of
911
+ <b>700</b>.
912
+
913
+ ## Caret cursor in CSS
914
+
915
+ You can style the colour of the cursor that appears in an
916
+ input-field.
917
+
918
+ Example for this:
919
+
920
+ .input_field {
921
+ caret-color: tomato;
922
+ font-weight: bold;
923
+ font-size: 30px;
924
+ }
925
+
926
+ If you need a specific example, have a look at the following file:
927
+
928
+ **cyberweb/examples/css/caret_colour_example.html**
929
+
930
+ This may then look like this:
931
+
932
+ <img src="https://i.imgur.com/dg0a9gd.png" style="margin-left: 2em">
933
+
934
+ The relevant part is the red cursor in the ~middle in that input field.
891
935
 
892
936
  ## CSS helper code and how it relates to the Cyberweb project
893
937
 
@@ -982,7 +1026,9 @@ hand, expands horizontally as far as there is space, which is
982
1026
  called "expand-to-fit".
983
1027
 
984
1028
  If you encounter a CSS rule with a <b>!important</b> classifier
985
- then this rule can not be overruled. It became a fixed rule.
1029
+ then this rule can not be overruled. It became a fixed rule. See
1030
+ elsewhere in this document in regards to more information about
1031
+ this.
986
1032
 
987
1033
  The hexadecimal notation #FFF is a short hand for #FFFFFF (which
988
1034
  is actually white).
@@ -1408,12 +1454,25 @@ approach.
1408
1454
 
1409
1455
  ## Buttons
1410
1456
 
1457
+ **Buttons** are user-elements that can be **clicked**.
1458
+
1411
1459
  The following should work, in principle:
1412
1460
 
1413
1461
  button {}
1414
1462
 
1415
- My long-term goal is to make this DSL work in web-applications
1416
- as well as toolkits such as ruby-gtk.
1463
+ My long-term goal in regards to the above is to make this DSL
1464
+ work in web-applications as well as in 'traditional' toolkits,
1465
+ such as the ruby bindings to **GTK** (ruby-gtk).
1466
+
1467
+ A box-shadow effect applied to a button may yield to a
1468
+ **depth effect** for that button.
1469
+
1470
+ An example for this follows:
1471
+
1472
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
1473
+
1474
+ See also the file at **cyberweb/examples/html/buttons_example.html**
1475
+ to see differently styled buttons in action.
1417
1476
 
1418
1477
  ## How to vertically align any element via CSS
1419
1478
 
@@ -1483,10 +1542,11 @@ This example shows how, in the main frame:
1483
1542
 
1484
1543
  ## Working with Grids in HTML/CSS
1485
1544
 
1486
- You can add padding between the grid containers using grid padding or
1487
- row-gap and column-gap.
1545
+ You can add **padding** between the grid containers using grid padding
1546
+ or row-gap and column-gap. This is a general CSS feature implemented
1547
+ for Grids specifically.
1488
1548
 
1489
- Examples:
1549
+ Examples for that, in particular the two last lines:
1490
1550
 
1491
1551
  gap
1492
1552
  row-gap
@@ -1623,16 +1683,6 @@ then simply modify these classes in your web-page. Right
1623
1683
  now this is not trivial if you re-use the distributed .css
1624
1684
  files; at another moment in time the API may be changed to
1625
1685
  allow you to re-define the CSS class as-is.
1626
-
1627
- ## Input fields with a different background colour
1628
-
1629
- You can use input fields with a different background colour upon
1630
- a mouse-focus event.
1631
-
1632
- Examples for this would be:
1633
-
1634
- input :text, 'Hello world!', :focus_with_salmon_background
1635
- input :text, 'Hello World!', :focus_with_salmon_background, :select_on_click
1636
1686
 
1637
1687
  ## Editing content on a webpage
1638
1688
 
@@ -1689,6 +1739,20 @@ To use a specific CSS style for these listings, do something like:
1689
1739
 
1690
1740
  Cyberweb.listing_css = '<b class="red">'
1691
1741
 
1742
+ You can also make use of ordered lists, via:
1743
+
1744
+ ordered_list %w( cat dog parrot deer horse )
1745
+
1746
+ This would yield exactly this String (if you use Cyberweb::WebObject):
1747
+
1748
+ <ol>
1749
+ <li>cat</li>
1750
+ <li>dog</li>
1751
+ <li>parrot</li>
1752
+ <li>deer</li>
1753
+ <li>horse</li>
1754
+ </ol>
1755
+
1692
1756
  ## Link in pages via link()
1693
1757
 
1694
1758
  You can link in other pages via the method link().
@@ -1801,76 +1865,6 @@ is to be able to do sinatra-specific calls that enable or
1801
1865
  disable certain things, in particular in regards to images,
1802
1866
  and have images work properly at the least on my home
1803
1867
  setup.
1804
-
1805
- ## JQuery
1806
-
1807
- The Cyberweb framework/toolset favours the use of jquery. Presently,
1808
- since **May 2021**, the version that is to be used by default will be
1809
- for jquery <b>3.6.0</b>. This may change at a later time.
1810
-
1811
- In the event that it is changed and the documentation here is not
1812
- updated, you can always rely on the following method call to yield
1813
- the correct version of jquery to be used:
1814
-
1815
- Cyberweb.jquery_version?
1816
-
1817
- For example, the above method called would yield **3.6.0** in
1818
- **May 2021**. Personally I always use the latest stable
1819
- version of jquery.
1820
-
1821
- You can also query the jquery-ui version in use, via:
1822
-
1823
- Cyberweb.jquery_ui_version?
1824
-
1825
- Again, this also has to be synced manually, via the
1826
- .yml file called **project_configuration.yml**.
1827
-
1828
- Since as of **May 2021**, the cyberweb will also bundle this
1829
- corresponding version of jquery and jquery-ui into the
1830
- **javascript_code/jquery/** subdirectory of the gem. This
1831
- is solely done to simplify the use of jquery so that, for
1832
- example, dragging an object becomes simpler and available
1833
- by default, even if access to the www is unavailable at
1834
- the current time.
1835
-
1836
- You can also call this method on a **Cyberweb::WebObject**
1837
- instance via the following method:
1838
-
1839
- report_the_jquery_version_in_use
1840
-
1841
- Both jquery-ui and jquery use the same licence as the Cyberweb
1842
- project (MIT licence). See also this wikipedia entry if
1843
- you want to read more about jquery and its history:
1844
-
1845
- https://en.wikipedia.org/wiki/JQuery
1846
-
1847
- To make a container **resizable** via the mouse, by using
1848
- jquery, try this method:
1849
-
1850
- jquery_resizable_via_the_mouse(id: :resizable_via_the_mouse)
1851
-
1852
- As **id** you simply pass in the id of the HTML element at hand.
1853
- In this case, the symbol called :resizable_via_the_mouse.
1854
-
1855
- See also the file **JQUERY.md** for a more thorough reference.
1856
-
1857
- Note that in **May 2021**, support for jquery is actually mildly
1858
- deprecated. This is not set in stone and it does not mean that
1859
- jquery support will be removed, as far as the cyberweb project
1860
- is concerned; it is more that I want to see whether we have
1861
- better or simpler alternatives, without being tied into jquery
1862
- too closely.
1863
-
1864
- The basic syntax for jquery, in javascript, goes like this:
1865
-
1866
- $(selector).action()
1867
-
1868
- The general rules for JQuery go along these lines, in JavaScript:
1869
-
1870
- $(this).hide() # hides the current element.
1871
- $("p").hide() # hides all <p> elements.
1872
- $(".test").hide() # hides all elements with class="test".
1873
- $("#test").hide() # hides the element with id="test".
1874
1868
 
1875
1869
  ## draggable_image() and the HTML draggable attribute
1876
1870
 
@@ -1897,11 +1891,23 @@ within the current directory, you can try the following API:
1897
1891
 
1898
1892
  in_dir_image 'foobar.png', 'marl3em bblack1'
1899
1893
 
1894
+ ## Generate system settings
1895
+
1896
+ If you want to store the system settings in a file, you may be
1897
+ able to use this:
1898
+
1899
+ cyberweb --systemsettings
1900
+
1901
+ Normal users of cyberweb won't need this functionality. I only
1902
+ wanted to have this available as a separate instruction, to
1903
+ simplify updating the cyberweb project.
1904
+
1900
1905
  ## Textarea in HTML
1901
1906
 
1902
- You can make a textarea HTML tag readonly via readonly.
1907
+ You can make a textarea HTML tag readonly via **readonly**,
1908
+ as an additional attribute to the textarea-tag.
1903
1909
 
1904
- Example for this:
1910
+ Specific example for this:
1905
1911
 
1906
1912
  <textarea readonly>
1907
1913
  Foobar.
@@ -1914,6 +1920,9 @@ as:
1914
1920
  resize: none;
1915
1921
  }
1916
1922
 
1923
+ The example **cyberweb/examples/html/readonly_textarea_example.html**
1924
+ demonstrates this.
1925
+
1917
1926
  ## CSS first-line rule
1918
1927
 
1919
1928
  The **first-line** rule can be used to style the first line in a given
@@ -1930,7 +1939,18 @@ Example:
1930
1939
 
1931
1940
  The first line would then appear larger and in another colour.
1932
1941
 
1933
- Several properties can be modified within the :first-line
1942
+ Another example:
1943
+
1944
+ .foobar:first-line{
1945
+ font-size: 40px;
1946
+ line-height: 50px;
1947
+ font-weight: bold;
1948
+ color: #662929;
1949
+ }
1950
+
1951
+ In some ways this is similar to using a h-tag such as h1 or h2.
1952
+
1953
+ Several properties can be modified within the <b>:first-line</b>
1934
1954
  rule, such as **font properties**, **color properties**,
1935
1955
  **background properties**, **word-spacing**, **letter-spacing**,
1936
1956
  **text-decoration**, **vertical-align**, **text-transform**,
@@ -1944,56 +1964,6 @@ The three main variants are:
1944
1964
  div.b { text-transform: lowercase; }
1945
1965
  div.c { text-transform: capitalize; }
1946
1966
 
1947
- ## CSS, text-shadow support and drop-shadow support
1948
-
1949
- If you want to have shadows added to a given text then the text-shadow
1950
- CSS property may be useful. Be careful when using this, though, because
1951
- it can make the text harder to read.
1952
-
1953
- Let's look at an example for the h1 HTML tag:
1954
-
1955
- h1 {text-shadow:2px 2px #FF0000;}
1956
-
1957
- Syntax used here (and in general):
1958
-
1959
- text-shadow: h-shadow, v-shadow, blur, color
1960
- text-shadow: 2px 5px tomato;
1961
-
1962
- Another example, for a CSS rule:
1963
-
1964
- .red_text_shadow {
1965
- text-shadow: red 0 -2px;
1966
- }
1967
-
1968
- Strangely enough you can also re-arrange the arguments a litte:
1969
-
1970
- /* colour | offset-x | offset-y | blur-radius */
1971
- text-shadow: #fc0 1px 0 10px;
1972
-
1973
- /* offset-x | offset-y | blur-radius | colour */
1974
- text-shadow: 1px 1px 2px black; # This is my preferred style.
1975
-
1976
- I do not know why they went that route, but I recommend to just
1977
- stick to one style, and avoid the other.
1978
-
1979
- Note that text-shadow is not the only way you can use to modify
1980
- text. drop-shadow is another example.
1981
-
1982
- In CSS the rule would be like this:
1983
-
1984
- drop-shadow(2px 4px 8px #585858);
1985
-
1986
- In cyberweb, you can use this API:
1987
-
1988
- generate_drop_shadow :red, :default, 'drop_shadow_red'
1989
- div('drop_shadow_red') {
1990
- h3 'This part should show a drop-shadow effect - but in red'
1991
- }
1992
-
1993
- This would yield the following text (shown as image):
1994
-
1995
- <img src="https://i.imgur.com/lSDl3qt.png" style="margin-left:2em">
1996
-
1997
1967
  ## CSS letter-spacing property
1998
1968
 
1999
1969
  <b>letter-spacing</b> can be used to decrease or increase the
@@ -2083,7 +2053,8 @@ The attribute <b>accesskey</b> is allowed in the following tags:
2083
2053
  input
2084
2054
  textarea
2085
2055
  label
2086
- legend und button
2056
+ legend
2057
+ button
2087
2058
 
2088
2059
  ## CSS ::before and CSS ::after
2089
2060
 
@@ -2140,9 +2111,9 @@ Example:
2140
2111
  ## CSS input autofocus
2141
2112
 
2142
2113
  You can modify <input> elements by setting the focus onto
2143
- them the moment a page loads.
2114
+ them the moment a page loads, via **autofocus**.
2144
2115
 
2145
- Example:
2116
+ Example for this:
2146
2117
 
2147
2118
  <form action="/action_page.php">
2148
2119
  <label for="fname">First name:</label>
@@ -2152,7 +2123,7 @@ Example:
2152
2123
  <input type="submit">
2153
2124
  </form>
2154
2125
 
2155
- This is a bit similar to ruby-gtk3, e. g. .do_focus or .set_focus(true).
2126
+ This is a bit similar to ruby-gtk3, e. g. .do_focus or **.set_focus(true)**.
2156
2127
 
2157
2128
  ## CSS grouping and CSS selectors
2158
2129
 
@@ -2400,6 +2371,29 @@ The other properties may be useful in some cases, e. g. when you
2400
2371
  wish to indicate some button-like element - but visually, I think
2401
2372
  the first three styles are by far the most appealing ones.
2402
2373
 
2374
+ ## Styling a row of a table and styling a table in general
2375
+
2376
+ You can use CSS rules such as this:
2377
+
2378
+ tr {
2379
+ background: wheat;
2380
+ }
2381
+ tr.even {
2382
+ background: none;
2383
+ }
2384
+
2385
+ This can be used to use a different colour for each even
2386
+ row. You still have to use the CSS class called **even**
2387
+ in this case manually, though. (There may be other solutions
2388
+ but for now this is simply documented here as-is - perhaps
2389
+ in the future this may become more flexible.)
2390
+
2391
+ This may look like this:
2392
+
2393
+ <img src="https://i.imgur.com/PGefpZb.png" style="margin-left: 3em">
2394
+
2395
+ See also the file at **cyberweb/examples/html/table_with_header_example.html**.
2396
+
2403
2397
  ## CSS first-letter
2404
2398
 
2405
2399
  CSS allows us to modify the first-letter in, for example, a
@@ -2480,6 +2474,31 @@ part </script>, such as:
2480
2474
  }
2481
2475
  </script>
2482
2476
 
2477
+ ## The CSS !important rule
2478
+
2479
+ Let's start with a syntax example.
2480
+
2481
+ Consider the following CSS rule for the **body** tag:
2482
+
2483
+ body {
2484
+ background: steelblue !important;
2485
+ }
2486
+
2487
+ This will set the background colour of the whole body of
2488
+ the page to the colour **steelblue**.
2489
+
2490
+ It is important to use that very syntax, e. g. to close
2491
+ the CSS rule at hand via **!important;**. Otherwise it
2492
+ may not work properly.
2493
+
2494
+ Once such an **!important** rule applies then it takes
2495
+ precedence over every other rule, including the
2496
+ **style** attribute. Later set **!important** rules
2497
+ can override earlier set **!important** rules, though.
2498
+
2499
+ Use this with caution, though, as it really overrides
2500
+ any other settings, including user-defined settings.
2501
+
2483
2502
  ## Including external .css files
2484
2503
 
2485
2504
  The syntax for adding external (standalone) .css files is as shown in
@@ -2691,13 +2710,6 @@ an operator and not a function - but it seems simpler to use
2691
2710
  the () just as it is used for other functions in JavaScript
2692
2711
  as well.
2693
2712
 
2694
- ## Use image-checkbox (on and off)
2695
-
2696
- Examples:
2697
-
2698
- show_image_checkbox :on, 'posab','top:10em;right:18%'
2699
- show_image_checkbox :off, 'posab','top:10em;right:18%'
2700
-
2701
2713
  ## CSS zoom-on-hover effect
2702
2714
 
2703
2715
  This can be done like this:
@@ -2725,6 +2737,20 @@ I typically put this into a special CSS class such as:
2725
2737
  transform: scale(1.1);
2726
2738
  }
2727
2739
 
2740
+ And then, for instance, for a generate **image** tag:
2741
+
2742
+ img(:document, 'enlarge_this_image_on_hover')
2743
+ # or this example for a draggable image:
2744
+ dimg 'BOX.png', 'VAM enlarge_this_image_on_hover'
2745
+
2746
+ The small drawback (or advantage, depending on your point of view)
2747
+ is that the CSS rule has to be specified as-is.
2748
+
2749
+ In theory we could also autogenerate the CSS rule and use an
2750
+ API such as **img(:document) {{ enlarge_this_image_on_hover: '25%' }}**
2751
+ instead, but for now I'll leave it with the above CSS-based approach.
2752
+ It's quite simple really.
2753
+
2728
2754
  ## Valid values for CSS font-size:
2729
2755
 
2730
2756
  xx-small
@@ -2737,95 +2763,16 @@ I typically put this into a special CSS class such as:
2737
2763
  xx-large
2738
2764
  larger
2739
2765
 
2740
- ## Useful quotes when designing websites and web-apps
2741
-
2742
- "When you are creating a website, the primary goal as a designer
2743
- should be to get rid of the question marks users have when
2744
- visiting that site."
2766
+ ## Cyberweb::Header
2745
2767
 
2746
- "The most important thing a designer can do is to understand
2747
- the basic principle of eliminating question marks that a user
2748
- has when visiting a website. Keep things simple."
2768
+ Examples:
2749
2769
 
2750
- "If you can not make something self-evident, you should at the
2751
- least make it self-explanatory."
2770
+ Cyberweb::Header.size = 'h3' # Set to a smaller header.
2771
+ Cyberweb::Header.reset
2752
2772
 
2753
- "If a web page is going to be effective, it has to work most
2754
- of its beautiful magic at a single glance."
2755
-
2756
- "The average visitor rarely spends much time reading all
2757
- content on a given web page, so focus on designing fewer
2758
- elements that can be easily navigated, without too much
2759
- distracting clutter."
2760
-
2761
- "If your design forces a visitor to incur a small learning
2762
- curve, make sure that the added value from this design
2763
- change leads to it being worth that additional learning
2764
- curve."
2765
-
2766
- "Clarity trumps consistency."
2767
-
2768
- "Each webpage should have a clear visual hierarchy."
2769
-
2770
- "Components in a webpage that are related logically
2771
- should also be related visually."
2772
-
2773
- "In order to make a website 'scan-friendly', make good use of
2774
- headings having a larger font size. The headings should
2775
- indicate what a subsection is about."
2776
-
2777
- "When using a heading, make them visually somewhat closer
2778
- to the section they belong to, rather than equally spaced
2779
- to the preceding paragraph."
2780
-
2781
- "If you need the visitor to make a difficult choice, provide as
2782
- much guidance as necessary - but not more. Be succinct here
2783
- and provide only the smallest amount of information that
2784
- will help the user."
2785
-
2786
- "Omit needless words. Vigorous writing is concise."
2787
-
2788
- "Try to make everything on a web-site self-explanatory or as
2789
- close to it as possible."
2790
-
2791
- "Navigation should ideally remain clear, simple, and consistent."
2792
-
2793
- "It may be useful to consider using an identifier, such as a logo
2794
- or an image, for the website, and display this e. g. on the
2795
- upper left corner. This may help visitors identify where they
2796
- are, in particular if they tend to use several tabs in their
2797
- browser."
2798
-
2799
- "If your website makes use of a menu-bar or navigation-bar,
2800
- consider highlighting the current location that the user
2801
- has or uses on that website."
2802
-
2803
- "Ideally a website should convey the big picture, and make it
2804
- clear what the site is about."
2805
-
2806
- "If possible consider to use visual identifiers on the
2807
- whole web-application at hand, to give visitors the
2808
- right idea about this being a cohesive and integrated
2809
- unit."
2810
-
2811
- "Changing a website at a later time is not necessarily trivial.
2812
- Some percentage of users that have grown accustomed to a
2813
- layout will resist almost any kind of change, and even
2814
- apparently simple changes often turn out to have
2815
- far-reaching effects."
2816
-
2817
- "Focus ruthlessly on fixing the most serious problems first."
2818
-
2819
- ## Cyberweb::Header
2820
-
2821
- Examples:
2822
-
2823
- Cyberweb::Header.size = 'h3' # Set to a smaller header.
2824
- Cyberweb::Header.reset
2825
-
2826
- Not sure if this is still necessary in 2021; at a later time
2827
- it will be decided whether to keep this or not. If it is kept
2828
- then this subsection will be expanded.
2773
+ Not sure if this is still necessary in 2021; at a later time
2774
+ it will be decided whether to keep this or not. If it is kept
2775
+ then this subsection will be expanded.
2829
2776
 
2830
2777
  ## Working with HTML form elements
2831
2778
 
@@ -2855,9 +2802,11 @@ generate the web-app as-is, though.
2855
2802
  ## Cyberweb::HtmlTemplate
2856
2803
 
2857
2804
  class **Cyberweb::HtmlTemplate** can be used to fill it with HTML
2858
- specific content. More documentation will be added here eventually;
2859
- for now, let's just show a simple example how I tend to use this
2860
- class:
2805
+ specific content.
2806
+
2807
+ Let's show a specific example how this may be used:
2808
+
2809
+ require 'cyberweb/requires/require_the_html_template.rb' # This is the recommended way to require class HtmlTemplate.
2861
2810
 
2862
2811
  Cyberweb::HtmlTemplate[
2863
2812
  title: 'Status',
@@ -2866,27 +2815,65 @@ class:
2866
2815
  '</pre>'
2867
2816
  ].to_s
2868
2817
 
2869
- It is possible since as of 18.06.2021 to pass CSS classes into this,
2870
- via:
2818
+ This would represent a "full" HTML page, as a String.
2819
+
2820
+ It is possible, since as of **18.06.2021**, to pass **CSS classes**
2821
+ into this, via:
2871
2822
 
2872
2823
  css_classes:
2873
2824
 
2874
2825
  For example, passing 'darkblue' to that key means that the CSS
2875
- class 'darkblue' will be available, which ultimately comes down
2876
- to <b>color: darkblue</b>.
2826
+ class 'darkblue' will be made available, which ultimately comes
2827
+ down to <b>color: darkblue</b>.
2877
2828
 
2878
- I needed this functionality to pull in only the CSS classes that
2879
- I use on a particular page generated by class Cyberweb::HtmlTemplate.
2829
+ I needed this functionality to pull in only the CSS classes
2830
+ that I use on a particular page generated by class
2831
+ Cyberweb::HtmlTemplate.
2880
2832
 
2881
2833
  Various additional entries are available. For example, if
2882
2834
  you want to modify the css-style in use for the body tag
2883
- then you can use the following variant:
2835
+ then you can simply use the following variant:
2884
2836
 
2885
2837
  body_css_style: 'background-color:#DFD1FF'
2886
2838
 
2887
- In the long run the goal is to extend class HtmlTemplate in
2888
- such a way that all html-generation used within the Cyberweb
2889
- project can be handled by it.
2839
+ In the long run the goal here is to extend class HtmlTemplate
2840
+ in such a way that all html-generation used within the
2841
+ Cyberweb project can be handled by it.
2842
+
2843
+ You can also pass ad-hoc CSS style into it. Example:
2844
+
2845
+ Cyberweb::HtmlTemplate[
2846
+ body: _, # The content of <body> goes in here.
2847
+ css_style: '
2848
+ img {
2849
+ border: 8px solid #black;
2850
+ padding: 2px;
2851
+ }
2852
+ ' # and ^^^ there you can put your CSS rules into class HtmlTemplate
2853
+ ].to_s
2854
+
2855
+ You can also pass in some ad-hoc javascript code via:
2856
+
2857
+ javascript_code:
2858
+
2859
+ All this does is add the proper &lbrack;script> tag to it.
2860
+
2861
+ You can also specifically add jquery support for the HtmlTemplate.
2862
+ The following example shows how this can be done:
2863
+
2864
+ html_template = Cyberweb::HtmlTemplate[
2865
+ title: 'This is a test-page,
2866
+ body: HtmlTags.p('Another test.','','','font-size:1.8em'),
2867
+ use_jquery: true
2868
+ ].to_s
2869
+
2870
+ puts html_template
2871
+
2872
+ Typing <b>Cyberweb::HtmlTemplate[]</b> is quite cumbersome, though. Since
2873
+ as of October 2022 a simpler toplevel API is available:
2874
+
2875
+ Cyberweb.html_template
2876
+ Cyberweb.html_template(body_content) # The String you pass here will be the body of the HTML page.
2890
2877
 
2891
2878
  ## Embed youtube videos and videos in general
2892
2879
 
@@ -2970,6 +2957,13 @@ use the following method:
2970
2957
 
2971
2958
  header_for_sitemap 'This is some generic header.'
2972
2959
 
2960
+ You can also use an Array for a special method:
2961
+
2962
+ sitemap_array('Hratie','Tulis','Kuulk')
2963
+
2964
+ This will be treated as an Array of headers to be used for the
2965
+ sitemap that will be generated.
2966
+
2973
2967
  ## Generating standalone webpages (.html files)
2974
2968
 
2975
2969
  This subsection deals with the cyberweb project generating standalone
@@ -3044,6 +3038,10 @@ the following:
3044
3038
  }
3045
3039
  </style>
3046
3040
 
3041
+ Remember that you can also use a title for a href tag. Example:
3042
+
3043
+ <a href="http://foobar.de/" class="slateblue" title="Some Superlong Title here">
3044
+
3047
3045
  ## The br-tag
3048
3046
 
3049
3047
  The br-tag can be used in HTML to add a linebreak.
@@ -3100,16 +3098,128 @@ If you do not need drag-and-drop support then simply use:
3100
3098
  If **drag_local_image_or_remote_image()** is too long to type,
3101
3099
  use the alias called **dimg2**.
3102
3100
 
3101
+ To quickly embed a remote image, you can use the following
3102
+ API:
3103
+
3104
+ embed_remote_image
3105
+ embed_remote_image 'https://foobar.com/cat.jpg'
3106
+ embed_remote_image 'https://foobar.com/cat.jpg','mar1em mars2em' # This here passes CSS classes to the image at hand.
3107
+
3108
+ ## Cyberweb.convert_back_german_umlauts
3109
+
3110
+ This method can be used to 'convert back' german umlauts, when the
3111
+ encoding failed somewhere, such as converting '%d6' into 'Ö'. It is
3112
+ mostly an ad-hoc method that most users of the project will not need,
3113
+ but sometimes there may be a use case to make use of that method,
3114
+ such as when one uses open-uri to download a remote website into a
3115
+ local file, if said remote website contains german umlauts.
3116
+
3117
+ In fact this was precisely the reason why that method was added.
3118
+
3119
+ ## Setting the date-of-creation for a web-app based on WebObject
3120
+
3121
+ Since as of **October 2021** you can use:
3122
+
3123
+ created_when '20.08.2021'
3124
+
3125
+ To **indicate when the webpage at hand has been created**. This will then
3126
+ add a meta-element to the page, which is roughly equivalent to:
3127
+
3128
+ <meta name="DCTERMS.created" scheme="DCTERMS.ISO8601" content="2010-03-17T13:31:50"/>
3129
+
3130
+ I am not sure whether this is super-useful or not, but I wanted
3131
+ to add a method that keeps track of the creation-time of
3132
+ web-apps based on web_object, which is the main reason why
3133
+ this functionality was added. At the least it helps me remember
3134
+ when a web-app was created.
3135
+
3136
+ ## autogenerated_system_settings.yml
3137
+
3138
+ The file <b>cyberweb/yaml/autogenerated_system_settings.yml</b> is created
3139
+ via the external file **roebe/classes/generate_system_values.rb**.
3140
+
3141
+ This file will contain entries such as:
3142
+
3143
+ SYSLIB_DIR: "/usr/lib/"
3144
+
3145
+ This was needed because in some environments these directories are
3146
+ not defined, yet there are examples where the cyberweb project
3147
+ may need to know these paths. Thus, the hardcoded values are
3148
+ stored in that .yml file. You will probably never need the .rb
3149
+ file or the .yml file, but it is here documented to explain why
3150
+ it exists.
3151
+
3152
+ ## Column width in CSS
3153
+
3154
+ You can specify a column width via **column-width: 250px;**.
3155
+
3156
+ The following screenshot shows this:
3157
+
3158
+ <img src="https://i.imgur.com/485E80P.png" style="margin-left: 2em">
3159
+
3160
+ ## The meter tag in HTML
3161
+
3162
+ HTML allows us to use a **meter** tag.
3163
+
3164
+ Example in HTML:
3165
+
3166
+ <label for="value1">Low</label>
3167
+ <meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter>
3168
+
3169
+ This would eventually yield a page that may look like this:
3170
+
3171
+ <img src="https://i.imgur.com/7f1ICEY.png" style="margin-left: 2em">
3172
+
3173
+ This is documented here in the event that we may need this one day.
3174
+
3175
+ ## Unicode and Encoding
3176
+
3177
+ This subsection is currently a stub - in the future it may be expanded
3178
+ to contain more useful information.
3179
+
3180
+ On the world wide web you can sometimes see greek symbols displayed
3181
+ on a homepage. This often makes use of the &quot;math> tag.
3182
+
3183
+ Preliminary support for this was added to the cyberweb project in
3184
+ October 2021. This is incomplete right now but hopefully will become
3185
+ more inclusive in the future.
3186
+
3187
+ Following next is just one example to add (display) the greek
3188
+ symbol **omega** on the webpage at hand:
3189
+
3190
+ add_omega_symbol_semantics
3191
+
3192
+ ## Sanitizing .html files
3193
+
3194
+ Sometimes a .html file is "compressed", aka newlines are removed.
3195
+ Everything is then on a single line.
3196
+
3197
+ Some editors struggle with this; and it is quite ugly.
3198
+
3199
+ Thus, an ad-hoc method was added to Cyberweb.
3200
+
3201
+ Its API is:
3202
+
3203
+ Cyberweb.sanitize_this_string_by_adding_a_newline_after_every_closing_HTML_tag
3204
+ Cyberweb.sanitize_this_string_by_adding_a_newline_after_every_closing_HTML_tag('/Depot/j/foobar.html')
3205
+
3206
+ Pass a local .html file to the method; alternatively a String should do
3207
+ well. Every closing > html tag found will be turned into ">\n" instead.
3208
+ Thus, you get a nicely split .html page. (Ideally we should use a more
3209
+ sophisticated regex, but I really added this just as a throw-away
3210
+ action, to sanitize a mangled .html page.)
3211
+
3212
+ This can also be called **de-minify-script**.
3213
+
3103
3214
  ## Objectified HTML Tags
3104
3215
 
3105
- Objectified HTML tags are something like this:
3216
+ **Objectified HTML tags** are something like this:
3106
3217
 
3107
- puts Cyberweb::ObjectifiedHtmlTags::Span.new('hey there') # => "<span>hey there</span>"
3108
- puts Cyberweb::ObjectifiedHtmlTags::Span.new('hey there').align_to_the_left # => "<span style="text-align: left;">hey there</span>"
3218
+ puts Cyberweb::Objectified::HtmlTags::Span.new('hey there') # => "<span>hey there</span>"
3219
+ puts Cyberweb::Objectified::HtmlTags::Span.new('hey there').align_to_the_left # => "<span style="text-align: left;">hey there</span>"
3109
3220
 
3110
- In other words we may treat HTML tags as strings that can be
3111
- embedded. The idea for this has been inspired by ruby-gtk,
3112
- such as:
3221
+ In other words we may treat HTML tags as strings that can be embedded.
3222
+ The idea for this has been inspired by **ruby-gtk**, such as:
3113
3223
 
3114
3224
  widget1.add(widget2)
3115
3225
 
@@ -3124,7 +3234,7 @@ In late September 2021, the textarea-tag was added.
3124
3234
 
3125
3235
  Example:
3126
3236
 
3127
- textarea = Cyberweb::ObjectifiedHtmlTags::Textarea.new('content')
3237
+ textarea = Cyberweb::Objectified::HtmlTags::Textarea.new('content')
3128
3238
  # You can also use this instead:
3129
3239
  # textarea = html_textarea
3130
3240
  textarea.class = 'rounded_border_6px bblack1 FS2em pad8px'
@@ -3138,19 +3248,27 @@ HTML tags will become objectified, as an additional option. You
3138
3248
  need to decide for yourself whether you want to use this or not;
3139
3249
  the one-line approach in regular HTML is probably shorter.
3140
3250
 
3141
- The following table, alphabetically sorted, shows the currently
3142
- (**September 2021**) available objectified HTML tags as part of
3143
- the cyberweb project. More may be added in the future.
3251
+ The following table, sorted alphabetically, shows the currently
3252
+ (<b>February 2022</b>) available objectified HTML tags as part
3253
+ of the cyberweb project. More may be added in the future.
3144
3254
 
3145
3255
  Name of the HTML tag | Implementation Status | True HTML tag
3146
3256
  ---------------------|--------------------------|--------------
3147
3257
  a | added | yes
3148
- abb3 | added | yes
3258
+ abbr | added | yes
3259
+ blockquote | added | yes
3260
+ body | added | yes
3149
3261
  button | added | yes
3262
+ canvas | added | yes
3263
+ cite | added | yes
3150
3264
  combobox | added | no
3265
+ details | not yet added | yes
3151
3266
  div | added | yes
3152
3267
  embed | added | yes
3268
+ fieldset | added | yes
3269
+ figure | added | yes
3153
3270
  form | added | yes
3271
+ head | added | yes
3154
3272
  h1 | added | yes
3155
3273
  h2 | added | yes
3156
3274
  h3 | added | yes
@@ -3159,8 +3277,12 @@ Name of the HTML tag | Implementation Status | True HTML tag
3159
3277
  h6 | added | yes
3160
3278
  hbox | added | no
3161
3279
  img | added | yes
3280
+ map | added | yes
3281
+ meta | added | yes
3282
+ object | added | yes
3162
3283
  p | added | yes
3163
3284
  pre | added | yes
3285
+ progress | added | yes
3164
3286
  span | added | yes
3165
3287
  table | added | yes
3166
3288
  textarea | added | yes
@@ -3200,29 +3322,1269 @@ I want to try to combine an OOP approach for the www with the
3200
3322
  old variant that cyberweb used in the last 15 years. It is a
3201
3323
  bit too verbose for my taste still, but eventually I should
3202
3324
  have ironed this out.
3325
+
3326
+ Let's have a look how we could use an objectified table.
3327
+
3328
+ Raw example:
3329
+
3330
+ alias e puts
3331
+ table = Cyberweb::Objectified::HtmlTags::Table.new(
3332
+ [
3333
+ [1,2,3,4,5,6,7,8,9],
3334
+ [1,2,3,4,5,6,7,8,9],
3335
+ [1,2,3,4,5,6,7,8,9],
3336
+ [1,2,3,4,5,6,7,8,9],
3337
+ [1,2,3,4,5,6,7,8,9]
3338
+ ]
3339
+ )
3340
+ table.id = 'hover_transition'
3341
+ table.css_class = 'rounded_border_8px wid100 bblack2'
3342
+ table.css_style = 'font-size: 3.5em'
3343
+ # We can even add headers:
3344
+ table.headers = %w( Month Savings )
3345
+ e table # And output it here.
3346
+
3347
+ The above code will generate:
3348
+
3349
+ <table class="rounded_border_8px wid100 bblack2" id="hover_transition" style="font-size: 3.5em">
3350
+ <tr>
3351
+ <th>Month</th>
3352
+ <th>Savings</th>
3353
+ </tr>
3354
+ <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
3355
+ <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
3356
+ <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
3357
+ <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
3358
+ <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
3359
+ </table>
3360
+
3361
+ You could then either embed this into HTML, or simply use it from a
3362
+ ruby file - be it sinatra, a .cgi file or anything else.
3363
+
3364
+ In the long run I plan to add a lot more methods to these objectified
3365
+ HTML tags, if these are useful. The idea is that we can treat web-pages
3366
+ as distinct objects, with convenience features that make creating such
3367
+ objects simpler.
3368
+
3369
+ It is also planned to eventually replace the more complicated "legacy"
3370
+ code in the WebObject or toplevel-namespace of Cyberweb to make more
3371
+ use of such objectified HTML tags - in particular for the more advanced
3372
+ use cases.
3373
+
3374
+ You can use some custom javascript code too.
3375
+
3376
+ For example, if you want to have a div where the user can select
3377
+ the whole content of said div-tag on a left-mouse-button-click
3378
+ event, consider using code such as the following:
3379
+
3380
+ div = Cyberweb::Objectified::HtmlTags::Div.new('<h2>Hello world!</h2>')
3381
+ div.id = 'test_div'
3382
+ div.on_clicked { :select_everything }
3383
+
3384
+ Note that this requires an ID. See the file
3385
+ **select_everything_example.cgi** for a variant that works on
3386
+ my home setup.
3387
+
3388
+ You may also use some shortcuts here and there. For example, if you
3389
+ look at the above last line, the **div.on_clicked { :select_everything }**
3390
+ variant, then you could also simplify this a bit towards:
3391
+
3392
+ div.on_click_select
3393
+ div.on_clicked_select # Or this variant.
3394
+
3395
+ This is literally the same as the variant above, but you can use fewer
3396
+ characters to do the same. Sometimes less is more - but always think
3397
+ about whether you want to prefer the more succint variant; sometimes
3398
+ the longer variant is more readable, in particular when you come
3399
+ back to a project many months lateron. Note that right now, in
3400
+ October 2021, only some javascript-driven actions are added. This
3401
+ will be slowly extended, and then documented here as well.
3402
+
3403
+ You can respond to on-mouse-hover events via JavaScript too.
3404
+
3405
+ Consider the following div variable, assigned to an objectified
3406
+ HTML tag, as outlined above.
3407
+
3408
+ Now you use:
3409
+
3410
+ div.css_class = 'BG_Black white'
3411
+ div.on_mouse_hover {{ bg: :orange }}
3412
+
3413
+ This would make the background of that div tag black (as specified
3414
+ by the CSS rule called **BG_Black**, which is distributed in the
3415
+ cyberweb project), and then, on a mouse-hover event over that
3416
+ div change the background of the whole div to **orange**. When the
3417
+ user moves the mouse cursor away the old colour is reinstated
3418
+ again.
3203
3419
 
3204
- ## Useful Links
3420
+ Some of the functionality of the **Objectified::HtmlTags** is tested via
3421
+ the file **cyberweb/test/complex_tests/testing_objectified_html_tags.rb**.
3205
3422
 
3206
- This subsection just keeps a few useful resources. This may
3207
- become obsolete over time, so don't expect all links to
3208
- work or be very useful. It's just a random collection
3209
- really, last updated in **May 2021**.
3423
+ Support for the **canvas** tag was added in **October 2021**. The
3424
+ **canvas** tag allows us to draw arbitrary objects onto the
3425
+ browser.
3210
3426
 
3211
- https://catswhocode.com/css-tricks/
3212
- https://validator.w3.org/
3213
- https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Auswahllisten
3214
- https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
3215
- https://meiert.com/en/indices/css-properties/
3216
- https://webdesignerwall.com/tutorials/advanced-css-menu
3217
- http://www.ericmeyeroncss.com/projects/01/
3218
- http://www.selfhtml5.org/html5-tag-systematik/
3219
- https://hyperstack.org/
3427
+ Note that you can mix Cyberweb::WebObject with objectified-html-tags.
3428
+
3429
+ For instance:
3430
+
3431
+ entry_for_the_name_of_the_card = html_input
3432
+ entry_for_the_name_of_the_card.css_class = 'bblack2 pad8px'
3433
+
3434
+ table2('mars1em','','',
3435
+ 'Name of the card: ',entry_for_the_name_of_the_card.string?
3436
+ )
3437
+
3438
+ This would put an input-tag into the second entry at the table.
3439
+
3440
+ The next example shows how to add a button that, on mouse hover
3441
+ event, **changes its colour to lightblue**:
3442
+
3443
+ button = html_button
3444
+ button.text = 'Save'
3445
+ button.css_class('larger bblack2 pad4px marl6em mart1em pad5px s1em')
3446
+ button.on_hover_colour(:lightblue) # This currently does not work for all HTML colours, but it works for :lightblue.
3447
+ addnl(button.to_s) # This line is currently needed if you use WebObject; in the future we may be able to skip having to do this.
3448
+
3449
+ In November 2021 I am still experimenting.
3450
+
3451
+ Consider the following ruby code for the objectified HTML tag:
3452
+
3453
+ _ = html_h1('Batterien')
3454
+ _.css_class 'martb1px hover_pulse_grow'
3455
+ _.append_css_manager('css_rule_for_hover_pulse_grow(8)')
3456
+ ee _.result?
3457
+
3458
+ Alternatively this slightly shorter variant:
3459
+
3460
+ _ = Cyberweb.oop_h1('Batterien', 'martb1px hover_pulse_grow')
3461
+ _.append_css_manager('css_rule_for_hover_pulse_grow(8)')
3462
+ ee _.result?
3463
+
3464
+ This will add a HTML h1 tag, with some special CSS that allows
3465
+ for pulsing growth. The number 8 means 8 iterations, so 4
3466
+ times growing up (because every step, forward and reverse,
3467
+ counts as +1).
3468
+
3469
+ I am not yet very happy with the above. It's still too verbose
3470
+ for my taste - but the good thing is that we actually
3471
+ auto-generate CSS here. That way we do not have to carry
3472
+ specific .css files - we simply autogenerate them anew.
3473
+
3474
+ ## Objectified HTML Tags versus the default class-based HTML Tags
3475
+
3476
+ You may have noticed that there are two groups of classes that are
3477
+ similarly named.
3478
+
3479
+ For example:
3480
+
3481
+ Cyberweb::Table
3482
+
3483
+ versus
3484
+
3485
+ Cyberweb::Objectified::HtmlTags::Table
3486
+
3487
+ The first variant is older; at this point it is almost 10 years
3488
+ old. The latter variant is newish, about 1 year old or even
3489
+ less than that (as of October 2021).
3490
+
3491
+ So, which variant to use?
3492
+
3493
+ Well, right now the behaviour is not identical, and they have
3494
+ different use cases. Perhaps in the future I may unify towards
3495
+ objectified HTML tags, but for now the two will have to co-exist.
3496
+
3497
+ Whenever possible I will update the older variant, e. g.
3498
+ **Cyberweb::Table**, to tap into functionality that is
3499
+ made directly available within **Cyberweb::Objectified::HtmlTags::Table**,
3500
+ to give an example.
3501
+
3502
+ So, perhaps in the long run, all unique functionality that is currently
3503
+ made available by Cyberweb::Table and similarly named classes, may
3504
+ be found under the objectified HTML tags. The latter is more robust,
3505
+ IMO, and has more flexible use cases.
3506
+
3507
+ ## Placeholder text
3508
+
3509
+ Placeholder text can be assigned to a textarea HTML tag. Let's first
3510
+ show the raw HTML code for this, mixed in with a bit of CSS:
3511
+
3512
+ Describe the physical attributes of your character next:<br><br>
3513
+ <textarea rows="4" cols="50" style="margin: 1em" placeholder="Describe your character here ..."></textarea>
3514
+
3515
+ This would yield the following result in the browser:
3516
+
3517
+ <img src="https://i.imgur.com/WqVL83L.png" style="margin: 1em; margin-left: 3em">
3518
+
3519
+ You can use the **input** tag to designate a placeholder text to use.
3520
+
3521
+ Only two HTML attributes can receive the **placeholder attribute**.
3522
+ These are:
3523
+
3524
+ <input>
3525
+ <textarea>
3526
+
3527
+ An example for this follows for the input tag:
3528
+
3529
+ <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
3530
+
3531
+ And for the textarea tag as well:
3532
+
3533
+ <textarea placeholder="Describe your complaint here ..."></textarea>
3534
+
3535
+ See also the distributed example file at **cyberweb/examples/input_placeholder_example.html*.
3536
+
3537
+ It is possible to style the placerholder-text via CSS.
3538
+
3539
+ For instance, if you would like to use the color **steelblue* then
3540
+ use the following CSS rule:
3541
+
3542
+ ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
3543
+ color: red;
3544
+ opacity: 1; /* Firefox */
3545
+ }
3546
+
3547
+ ## CSS rules in general
3548
+
3549
+ This subsection contains a few explanations to CSS rules in general.
3550
+
3551
+ Inheritance: after a property has been applied to a particular
3552
+ element, its children retain those property values as well. That
3553
+ way you can consistently style these elements via the same CSS
3554
+ rules.
3555
+
3556
+ Normally when a CSS value is changed, the change is instant. This
3557
+ can be avoided by the **transition** property, which allows us
3558
+ to animate from the old state to a new state.
3559
+
3560
+ ## Remote images at imgur
3561
+
3562
+ I have some local .cgi files that request images stored in a path
3563
+ that is not accessible by the local webserver. Sometimes I can
3564
+ put it into WebImages and use it, such as via Base64 encoding -
3565
+ but sometimes I just want to be able to link to it via an
3566
+ **img** tag. So in these cases I am fine linking in to remote
3567
+ images.
3568
+
3569
+ As I may forget which image is available, here comes a listing -
3570
+ this may be extended over time:
3571
+
3572
+ <img src="https://i.imgur.com/EbiyEtQ.png">
3573
+ <img src="https://i.imgur.com/HnjTJj4.png">
3574
+
3575
+ ## Downloading a remote webpage
3576
+
3577
+ You can use <b>Cyberweb.download_webpage()</b> to download a remote
3578
+ webpage.
3579
+
3580
+ This isn't hugely sophisticated - it just performs URI.open().read
3581
+ and then dumps that string into a local file. The file **bin/download_webpage**
3582
+ is representing that functionality from the commandline.
3583
+
3584
+ Usage example from within Ruby code:
3585
+
3586
+ Cyberweb.download_webpage('https://en.wikipedia.org/wiki/Tom_and_Jerry')
3587
+
3588
+ ## Tooltip example via CSS
3589
+
3590
+ A tooltip is often used to specify extra information about something when
3591
+ the user moves the mouse pointer over an element.
3592
+
3593
+ Have a look at the file at <b>cyberweb/examples/css/css_tooltip.html</b>.
3594
+
3595
+ This shows a simple CSS tooltip. Adjust the style, colours, width
3596
+ according to your own preferences.
3597
+
3598
+ ## hr_stars
3599
+
3600
+ You can use the method call **hr_stars** to display three stars
3601
+ aligned one to another.
3602
+
3603
+ This may look as the following image shows:
3604
+
3605
+ <img src="https://i.imgur.com/moDx2f1.png" style="margin-left: 2em">
3606
+
3607
+ ## cmd1, cmd2, cmd3
3608
+
3609
+ The three methods called **cmd1**, **cmd2**, **cmd3**, can be used to
3610
+ show commands that the user can input. The **1**, **2** or **3** part
3611
+ refers to the indent-level, so the number **3** means **3x the
3612
+ basic indent level**.
3613
+
3614
+ Note that **cmd** is an alias to **cmd1**.
3615
+
3616
+ In the last ten years or so, the code for this was stored under the
3617
+ module PredefinedMethods, but in December 2021 this was changed and
3618
+ became part of **internal_hash.rb**. The latter shall slowly replace
3619
+ all other toplevel-instance variables for the Cyberweb project.
3620
+ The net gain will be that the new code is easier to maintain.
3621
+
3622
+ What is the use case for cmd1 or cmd2 or cmd3?
3623
+
3624
+ See the following examples for this:
3625
+
3626
+ e 'Input these instructions:'
3627
+ br
3628
+ cmd1 'ls -la'
3629
+ cmd2 'cd /tmp'
3630
+ # and so forth
3631
+
3632
+ Note that you can also customize the toplevel CSS for cmd1, cmd2
3633
+ and cmd3. The following example shows how to add the steelblue
3634
+ colour to these:
3635
+
3636
+ append_to_cmd1 'steelblue'
3637
+ append_to_cmd2 'steelblue'
3638
+ append_to_cmd3 'steelblue'
3639
+
3640
+ ## Cyberweb::RouteHandlerModule
3641
+
3642
+ This module shall eventually replace sinatra for my own needs.
3643
+ I will not port all of sinatra's functionality, but I want
3644
+ to be able to use the **core** functionality for my own
3645
+ custom web-related needs.
3646
+
3647
+ To use puma, use:
3648
+
3649
+ Cyberweb.puma
3650
+
3651
+ And for webrick, use:
3652
+
3653
+ Cyberweb.webrick
3654
+
3655
+ These methods were added mostly for convenience. If you are
3656
+ curious have a look at the code to find out which is the
3657
+ 'real' method.
3658
+
3659
+ ## Rebuilding Sinatra
3660
+
3661
+ Sinatra is a small webframework, built on top of Rack. It provides
3662
+ a useful DSL for specifying what the given application should
3663
+ respond to, and what it will send back.
3664
+
3665
+ The DSL can be as simple as this:
3666
+
3667
+ get "/hello" do
3668
+ [200, {}, "Hello from Sinatra!"]
3669
+ end
3670
+
3671
+ post "/hello" do
3672
+ [200, {}, "Hello from a post-Sinatra world!"]
3673
+ end
3674
+
3675
+ The **get()** method must take a path (which is the first
3676
+ argument) and an associated handler block - which is the
3677
+ part within the **do/end** clause.
3678
+
3679
+ A very simple definition may be the following variant:
3680
+
3681
+ def get(path, &handler)
3682
+ route("GET", path, &handler)
3683
+ end
3684
+
3685
+ def route(verb, path, &handler)
3686
+ @routes[verb] ||= {}
3687
+ @routes[verb][path] = handler
3688
+ end
3689
+
3690
+ So, in other words: we will append new verb-entries to
3691
+ the main hash called **@routes**.
3692
+
3693
+ This can then be used like this:
3694
+
3695
+ route_handler.get "/hello" do
3696
+ [200, {}, ["Hello world!"]]
3697
+ end
3698
+
3699
+ puts route_handler.routes
3700
+
3701
+ The next method that has to be defined, if we want to
3702
+ support Rack, is .call(), such as:
3703
+
3704
+ def call(env)
3705
+ end
3706
+
3707
+ ## Hover.css
3708
+
3709
+ Since as of **November 2021** the cyberweb project makes use
3710
+ of **Hover.css** (licence: **MIT**):
3711
+
3712
+ http://ianlunn.github.io/Hover/
3713
+
3714
+ The .css is distributed as-is. Note that some names were changed,
3715
+ though, to make it more 'logical'.
3716
+
3717
+ ## Web-safe fonts
3718
+
3719
+ The following list is assumed to contain web-safe fonts, for
3720
+ use in HTML pages (via CSS):
3721
+
3722
+ Arial (sans-serif)
3723
+ Verdana (sans-serif)
3724
+ Helvetica (sans-serif)
3725
+ Tahoma (sans-serif)
3726
+ Trebuchet MS (sans-serif)
3727
+ Times New Roman (serif)
3728
+ Georgia (serif)
3729
+ Garamond (serif)
3730
+ Courier New (monospace)
3731
+ Brush Script MT (cursive)
3732
+
3733
+ Note that the names of CSS fonts in general are case insensitive.
3734
+ Thus you can lowercase them too, if you would like to.
3735
+
3736
+ You can also use **generic fonts**. Five are available by default,
3737
+ being: <b>serif, sans-serif, cursive, fantasy and monospace</b>.
3738
+ Serif resembles Times New Roman, sans-serif resembles <b>Arial</b>.
3739
+
3740
+ Most text on the Web is displayed with a **sans-serif** font family.
3741
+
3742
+ ## Balloon.css
3743
+
3744
+ You can download the **balloon.css** file via class
3745
+ **DownloadBalloonCss** (**Cyberweb::DownloadBalloonCss**).
3746
+
3747
+ This file resides at the location
3748
+ <b>web_object/utility_scripts/download_balloon_css.rb</b>.
3749
+
3750
+ It presently (May 2018) does not do much other than download
3751
+ that remote .css file.
3752
+
3753
+ I needed a small "pop-up" for displaying additional information
3754
+ to some entries in a table, which is how I found **Balloon.css**.
3755
+
3756
+ ## Grayscale filtering on an image
3757
+
3758
+ **CSS** allows us to "remove" colours in an image. I call this
3759
+ the **grayscale filter**.
3760
+
3761
+ Cyberweb comes with a default CSS class that may be of help
3762
+ here - simply attach the CSS class **grayscale** to the
3763
+ image at hand if you want it to "lose" colours (for display
3764
+ purposes only; of course nothing is lost in the image as
3765
+ such, only the display of said image is modified via CSS).
3766
+
3767
+ ## The progress bar in HTML5
3768
+
3769
+ You can use a progressbar to indicate progress based on
3770
+ percentage values. This is described here in detail:
3771
+
3772
+ https://css-tricks.com/html5-progress-element/
3773
+
3774
+ In cyberweb you can use:
3775
+
3776
+ progress
3777
+ progress('35 / 100') # 35%
3778
+
3779
+ At a later time we may add some javascript to indicate
3780
+ a counter-progress. Right now (as of February 2022)
3781
+ this is not possible though, so this part has to come
3782
+ at a later time.
3783
+
3784
+ ## Converting from a .html page to a cyberweb-object
3785
+
3786
+ The file **bin/html_to_cyberweb_converter** can be used
3787
+ to convert some .html files into cyberweb-objects. This
3788
+ class has been created in February 2022, but it does not
3789
+ yet work very well. In the future this may change.
3790
+
3791
+ The idea is that we can grab any .html page, re-build
3792
+ its logic into cyberweb, and allow you to modify this
3793
+ in any way, shape or form. The long-term goal is to
3794
+ adjust any .html page to any different format, in
3795
+ any way, shape or form. It would allow users a
3796
+ higher level of abstraction to deal with a HTML
3797
+ page. For instance, you can re-style the CSS classes
3798
+ in use as-is.
3799
+
3800
+ (Note that presently, as of 2022, class WebObject is
3801
+ actually not used; HtmlTemplate is used instead. The
3802
+ reason is because WebObject is too big and not flexible
3803
+ enough right now. In the future this may be resolved,
3804
+ but for now, class HtmlTemplate will generate the
3805
+ new .html file.)
3806
+
3807
+ ## autoextend
3808
+
3809
+ If you make use of Cyberweb::WebObject then you may be able
3810
+ to describe a webpage as an "object". Various methods will
3811
+ be made available at that point.
3812
+
3813
+ The API may include a sort of DSL like this:
3814
+
3815
+ english('Title goes here') {
3816
+ }
3817
+
3818
+ This kind of means that the webpage at hand will be using
3819
+ **english** as its primary language. And the first argument
3820
+ will become the title of that webpage. (Note that presently
3821
+ only english() and german() are available. It's not making
3822
+ any real difference, but perhaps I should add alias-names
3823
+ for other languages as well. Not so many users of this
3824
+ project aside from english as the primary language in use,
3825
+ though.)
3826
+
3827
+ Various other methods part of WebObject exist that help
3828
+ here, one of which is **autoextend**. This method is also
3829
+ aliased onto **enable_namespace**.
3830
+
3831
+ That method will include various other modules. One module that
3832
+ was somewhat recently (March 2022) added was
3833
+ <b>Cyberweb::Objectified::Mask</b>. This module will pull
3834
+ in HTML-tag support. So, for instance, **oop_h1()** can then
3835
+ be used as a method, which will refer to using h1 as the HTML
3836
+ tag. These objectified (OOP) HTML tags are described in
3837
+ more detail in other subsections of this document (**README.md**).
3838
+
3839
+ Including the namespace for <b>Cyberweb::Objectified::Mask</b> is
3840
+ done mostly for convenience, so that the user does not have to
3841
+ manually include this module.
3842
+
3843
+ ## Drawing a coloured circle via CSS
3844
+
3845
+ You can draw a circle via CSS.
3846
+
3847
+ Let's first show the CSS rules for this:
3848
+
3849
+ div.circle {
3850
+ width: 300px;
3851
+ height: 300px;
3852
+ background: #2762e9;
3853
+ border-radius: 50%;
3854
+ }
3855
+
3856
+ Next you can use HTML to draw the circle:
3857
+
3858
+ <div class="circle"></div>
3859
+
3860
+ That's it.
3861
+
3862
+ I found this to be simple and potentially useful, so I added
3863
+ an API to the cyberweb project to support this.
3864
+
3865
+ The API goes like this:
3866
+
3867
+ Cyberweb.draw_circle()
3868
+ Cyberweb.draw_circle(width: 200)
3869
+ Cyberweb.draw_circle(width: 200, height: 500)
3870
+ Cyberweb.draw_circle(width: 200, height: 500, background_color: :steelblue)
3871
+ Cyberweb.draw_circle(width: 200, height: 500, background_color: :steelblue, border_radius: '30%')
3872
+
3873
+ Pass a Hash to the method. Note that this will return the CSS rule
3874
+ as-is, as well as return the div-tag String. Cyberweb::BaseModule
3875
+ will directly embed this if you use <b>draw_circle()</b>.
3876
+
3877
+ Here is a partial screenshot showing three such examples; only the
3878
+ second example has a border-radius of 50%. See also the example
3879
+ <b>cyberweb/examples/advanced/draw_circle/draw_circle.cgi</b>.
3880
+
3881
+ <img src="https://i.imgur.com/k5wFnwn.png" style="margin: 1em">
3882
+
3883
+ ## JQuery
3884
+
3885
+ The Cyberweb framework/toolset favours the use of jquery. Presently,
3886
+ since **May 2021**, the version that is to be used by default will be
3887
+ for jquery <b>3.6.0</b>. This may change at a later time.
3888
+
3889
+ In the event that it is changed and the documentation here is not
3890
+ updated, you can always rely on the following method call to yield
3891
+ the correct version of jquery to be used:
3892
+
3893
+ Cyberweb.jquery_version?
3894
+
3895
+ For example, the above method called would yield **3.6.0** in
3896
+ **May 2021**. Personally I always use the latest stable
3897
+ version of jquery when possible.
3898
+
3899
+ You can also query the **jquery-ui version in use**, via:
3900
+
3901
+ Cyberweb.jquery_ui_version?
3902
+
3903
+ Again, this also has to be synced manually, via the
3904
+ .yml file called **project_configuration.yml**.
3905
+
3906
+ Since as of **May 2021**, the cyberweb will also bundle this
3907
+ corresponding version of jquery and jquery-ui into the
3908
+ **javascript_code/jquery/** subdirectory of the gem. This
3909
+ is solely done to simplify the use of jquery so that, for
3910
+ example, dragging an object becomes simpler and available
3911
+ by default, even if access to the www is unavailable at
3912
+ the current time.
3913
+
3914
+ You can also call this method on a **Cyberweb::WebObject**
3915
+ instance via the following method:
3916
+
3917
+ report_the_jquery_version_in_use
3918
+
3919
+ Both jquery-ui and jquery use the same licence as the Cyberweb
3920
+ project (MIT licence). See also this wikipedia entry if
3921
+ you want to read more about jquery and its history:
3922
+
3923
+ https://en.wikipedia.org/wiki/JQuery
3924
+
3925
+ To make a container **resizable** via the mouse, by using
3926
+ jquery, try this method:
3927
+
3928
+ jquery_resizable_via_the_mouse(id: :resizable_via_the_mouse)
3929
+
3930
+ As **id** you simply pass in the id of the HTML element at hand.
3931
+ In this case, the symbol called :resizable_via_the_mouse.
3932
+
3933
+ See also the file **JQUERY.md** for a more thorough reference.
3934
+
3935
+ Note that in **May 2021**, support for jquery is actually mildly
3936
+ deprecated. This is not set in stone and it does not mean that
3937
+ jquery support will be removed, as far as the cyberweb project
3938
+ is concerned; it is more that I want to see whether we have
3939
+ better or simpler alternatives, without being tied into jquery
3940
+ too closely.
3941
+
3942
+ The basic syntax for jquery, in javascript, goes like this:
3943
+
3944
+ $(selector).action()
3945
+
3946
+ The general rules for JQuery go along these lines, in JavaScript:
3947
+
3948
+ $(this).hide() # hides the current element.
3949
+ $("p").hide() # hides all <p> elements.
3950
+ $(".test").hide() # hides all elements with class="test".
3951
+ $("#test").hide() # hides the element with id="test".
3952
+
3953
+ Some of this is a bit cumbersome to type and use, so the Cyberweb
3954
+ project simplifies some of it.
3955
+
3956
+ For instance, rather than type out the document_ready
3957
+ functionality via $<b>(document).ready(function(){}</b>
3958
+ you can simplify this via the following method:
3959
+
3960
+ document_ready() # No arguments in this case, which is rather pointless.
3961
+ document_ready('$("h1").css("color", "lightgreen");') # ← Real usage example here.
3962
+
3963
+ This may not appear to be of a huge help, but it gets rid of a bit
3964
+ of boilerplate code, which I think is useful in its own right.
3965
+ Future changes may even simplify this further, but for now
3966
+ <b>let's keep it simple</b>.
3967
+
3968
+ ## Working with HTML forms, including creating input-buttons in such a form field
3969
+
3970
+ <form>
3971
+ <input type="button" class="BG_GRAYSTD bblack1" value="Default" name="foo" onClick="test1(this.form)">
3972
+ </form>
3973
+
3974
+ <form>
3975
+ <input class="BG_GRAYSTD bblack1" type="button" value="Default" name="foo" onClick="test1(this.form)">
3976
+ </form>
3977
+
3978
+ You can style &lsaquo;input> fields with a different background colour
3979
+ upon a mouse-focus event.
3980
+
3981
+ Examples for this would be:
3982
+
3983
+ input :text, 'Hello world!', :focus_with_salmon_background
3984
+ input :text, 'Hello World!', :focus_with_salmon_background, :select_on_click
3985
+
3986
+ View the file at **cyberweb/examples/simple/input_example_with_coloured_focus.cgi**
3987
+ to see this work in action.
3988
+
3989
+ You can modify the &lsaquo;input> tag within that via css by using:
3990
+
3991
+ input.view_css {}
3992
+
3993
+ Note that &lsaquo;input type="text"> only works for a single line of
3994
+ user input. If you would like to have the user work via multiple
3995
+ lines then you have to use the &lsaquo;textarea> tag instead.
3996
+ There may be work-arounds, such as giving the text-input the
3997
+ <b>word-break: break-word;</b> attribute, but this may not work
3998
+ on every browser.
3999
+
4000
+ Some shortcuts exist within the Cyberweb project. For instance,
4001
+ rather than do:
4002
+
4003
+ input :checkbox
4004
+
4005
+ You can do:
4006
+
4007
+ input_checkbox
4008
+
4009
+ Same with submit and other variants:
4010
+
4011
+ input_submit
4012
+ input_radio
4013
+
4014
+ This may not be a huge improvement, but I wanted to offer
4015
+ it in the event that some users like to avoid using the
4016
+ <b>:</b> for the symbol.
4017
+
4018
+ Combining a label and input-text is possible via Cyberweb
4019
+ too. Examples:
4020
+
4021
+ label_and_input_text :foobar
4022
+ label_and_input_text id: :foobar
4023
+ label_and_input_text id: :foobar, :br
4024
+ label_and_input_text id: :foobar, :linebreak
4025
+ label_and_input_text id: :foobar, :middle_break
4026
+ label_and_input_text :fname, 'First name:'
4027
+
4028
+ The last variant is essentially the same as this in HTML:
4029
+
4030
+ <label for="fname">First name:</label><br>
4031
+ <input type="text" id="fname" name="fname"><br>
4032
+
4033
+ If you have a need or use case to use a checked checkbox
4034
+ then you can use a variant such as this:
4035
+
4036
+ checked_checkbox name: 'valid_ninja'
4037
+
4038
+ It may be important to specify the name parameter, as
4039
+ shown above; otherwise it can be omitted.
4040
+
4041
+ This checked checkbox looks about like this:
4042
+
4043
+ <img src="https://i.imgur.com/Fn0GasM.png" style="margin: 1em">
4044
+
4045
+ ## Use image-checkbox (on and off)
4046
+
4047
+ Examples:
4048
+
4049
+ show_image_checkbox :on, 'posab','top:10em;right:18%'
4050
+ show_image_checkbox :off, 'posab','top:10em;right:18%'
4051
+
4052
+ ## The CSS class called select_everything
4053
+
4054
+ This document already mentioned how to use JavaScript to select
4055
+ everything.
4056
+
4057
+ Interestingly it is possible to achieve the same nowadays, without
4058
+ JavaScript - by making use of *CSS**.
4059
+
4060
+ Cyberweb integrates this via the CSS class called <b>.select_everything</b>.
4061
+
4062
+ Simply add it to any tag and when the user clicks on it via his or her
4063
+ mouse, then all content is selected. On Linux this will also assign
4064
+ to the xorg-buffer, so you can use a one-left mouse-button click,
4065
+ and then use the middle-mouse button to paste it onto the commandline.
4066
+ Very convenient! \o/
4067
+
4068
+ ## CSS tables versus original HTML tables versus flexbox and grid layouts
4069
+
4070
+ There are various possibilities to lay out HTML containers on a webpage.
4071
+ The simplest one is the old HTML table. This one worked really well.
4072
+
4073
+ Lateron we had support via simple div-tags, as well as the float element.
4074
+ Then came grid layouts and flexbox.
4075
+
4076
+ Which variant to use?
4077
+
4078
+ Well - I have consistently had problems with both grid layouts as well
4079
+ as flexbox. HTML tables, on the other hand, work really well, and so
4080
+ do CSS tables. I have no idea why, but for me CSS tables seem to be
4081
+ the best variant. Flexbox and grid lead to increased complexity,
4082
+ and always created issues for me, so I mildly deprecated using it
4083
+ instead; perhaps one day they will become simpler, but for now I
4084
+ will stick to CSS tables.
4085
+
4086
+ How to use a CSS table? Make use of <b>display: table;</b> as
4087
+ well as <b>display: table-row</b>. That way you can kind of
4088
+ **simulate** tables.
4089
+
4090
+ The following CSS rules show this:
4091
+
4092
+ .grid {
4093
+ display: table;
4094
+ border-spacing: 5px
4095
+ }
4096
+ .row {
4097
+ display: table-row
4098
+ }
4099
+ .cell {
4100
+ width: 50px;
4101
+ height: 50px;
4102
+ background: grey;
4103
+ display: table-cell;
4104
+ }
4105
+ .row div:last-child {
4106
+ background: red
4107
+ }
4108
+
4109
+ If you need to set a maximum width then the following may
4110
+ work:
4111
+
4112
+ <table style="width: 90%; table-layout: fixed">
4113
+
4114
+
4115
+ ## class Cyberweb::ImagesToHtml
4116
+
4117
+ This inconspicuously small class can take a directory (as input),
4118
+ determine all images that can be found in said directory (such as .jpg,
4119
+ .png, .gif files and so forth), and then create a **.html** page that
4120
+ has entries to each of these images, thus displaying them, via the
4121
+ img-HTML tag.
4122
+
4123
+ The class supports **jquery drag** operations on every image, so that the
4124
+ user can move these images via the mouse cursor, just for a better
4125
+ visual effect, and the ability to reposition the images.
4126
+
4127
+ The <b>reason</b> why this class was written was to quickly display images
4128
+ that you have made available locally. I did not want to use an image
4129
+ viewer when I could just view this in a .html page as-is.
4130
+
4131
+ In **March 2022** the **--videos** option was added. This is used to,
4132
+ rather than gather images, gather videos. That way you can have a
4133
+ local collection of video files and have them show up in the .html
4134
+ page, in your browser. Note that actual playback tends to be limited
4135
+ to .mp4 files - I could not get older .avi files to work, for instance.
4136
+ No idea if it is possible to do so or not, so preferentially try to
4137
+ make use of .mp4 files here.
4138
+
4139
+ In <b>May 2022</b> another option was added, called -html-table. This
4140
+ will arrange the images in a HTML table layout, by default 3 images
4141
+ per row. You can use more or fewers rows though. For instance,
4142
+ to use 4 rows make use of:
4143
+
4144
+ images_to_html --table=4 # For 4 rows.
4145
+
4146
+ I tend to prefer 3 or 2 images per row, though. 2 images for smaller
4147
+ monitors; 3 images is the best, in my opinion. 4 images tends to be
4148
+ cluttered, and more than 4 is, in my opinion. not really advisable.
4149
+
4150
+ ## Working with local files in HTML - input type="file"
4151
+
4152
+ You can use:
4153
+
4154
+ <input type="file">
4155
+
4156
+ To give the user a way to handle local files conveniently.
4157
+
4158
+ You can limit the file types handled by this input tag via:
4159
+
4160
+ accept="image/png, image/jpeg"
4161
+ <input type="file" accept="image/png, image/jpeg">
4162
+
4163
+ ## CSS, text-shadow support and drop-shadow support
4164
+
4165
+ The CSS text-shadow can be used to simulate an engraved text.
4166
+
4167
+ If you want to have <b>shadows</b> added to a given text then
4168
+ the text-shadow CSS property may be useful. Be careful when using
4169
+ this, though, because <b>it can make the text harder to read</b> -
4170
+ so perhaps <b>use it only for some headers or larger text</b>
4171
+ rather than for all text content.
4172
+
4173
+ At any rate, let us next look at a simple example for the
4174
+ <b>h1 HTML tag</b>, how it can be styled via the text-shadow
4175
+ CSS rule:
4176
+
4177
+ h1 {
4178
+ text-shadow: 2px 2px #FF0000;
4179
+ }
4180
+
4181
+ The <b>syntax</b> used here (and in general) is as follows:
4182
+
4183
+ text-shadow: h-shadow, v-shadow, blur-radius, color
4184
+ text-shadow: 1px 1px 2px black;
4185
+ text-shadow: 2px 5px tomato; /* Note that you can also omit values, as seen here on this line. */
4186
+
4187
+ Another example, for a CSS rule:
4188
+
4189
+ .red_text_shadow {
4190
+ text-shadow: red 0 -2px;
4191
+ }
4192
+
4193
+ Strangely enough you can also re-arrange the arguments a litte bit:
4194
+
4195
+ /* colour | offset-x | offset-y | blur-radius */
4196
+ text-shadow: #fc0 1px 0 10px;
4197
+
4198
+ /* offset-x | offset-y | blur-radius | colour */
4199
+ text-shadow: 1px 1px 2px black; # This is my preferred style.
4200
+
4201
+ I do not know why they went that route, but I recommend to just
4202
+ stick to one style, and avoid the other. Seems easier to remember
4203
+ when one can be consistent about the arguments.
4204
+
4205
+ Note that <b>text-shadow</b> is not the only way you can use to modify
4206
+ text. <b>drop-shadow</b> is another CSS property that can be
4207
+ used in this regard.
4208
+
4209
+ In CSS the rule for <b>drop-shadow</b> would be as follows:
4210
+
4211
+ drop-shadow(2px 4px 8px #585858);
4212
+
4213
+ More specifically what these **four values** mean:
4214
+
4215
+ drop-shadow(offset-x offset-y blur-radius color)
4216
+
4217
+ If you make use of the **cyberweb** project then you
4218
+ can use the following API:
4219
+
4220
+ generate_drop_shadow :red, :default, 'drop_shadow_red'
4221
+ div('drop_shadow_red') {
4222
+ h3 'This part should show a drop-shadow effect - but in red'
4223
+ }
4224
+
4225
+ This would yield the following text (shown as <b>image</b>,
4226
+ for convenience):
4227
+
4228
+ <img src="https://i.imgur.com/lSDl3qt.png" style="margin-left:2em">
4229
+
4230
+ Let's look at another example:
4231
+
4232
+ generate_drop_shadow :darkblue,
4233
+ '4px 2px 4px',
4234
+ 'drop_shadow_lightblue'
4235
+ div('drop_shadow_darkblue pad0px mar0px') {
4236
+ h2 dot(105, 'marr12px')+
4237
+ 'Fancy Text',
4238
+ 'ud mart5px'
4239
+ }
4240
+
4241
+ This would yield the following text (shown as image):
4242
+
4243
+ <img src="https://i.imgur.com/Ufs2IHl.png" style="margin-left:2em">
4244
+
4245
+ You can also use the internal CSS class called **shadow_div_without_restrictions**.
4246
+
4247
+ Give it a try on a div-element, such as via:
4248
+
4249
+ div('shadow_div_without_restrictions') {
4250
+ h2 'Hello world!'
4251
+ }
4252
+
4253
+ See also the file at
4254
+ <b>cyberweb/examples/css/shadow_example_in_CSS/shadow_example_in_CSS.cgi</b>.
4255
+
4256
+ A similar effect is shown by the following image:
4257
+
4258
+ <img src="https://i.imgur.com/96wV0Vm.png" style="margin: 1em; margin-left: 4em">
4259
+
4260
+ The important thing to look at is the border-area around the central
4261
+ div-container. You can see that it is surrounded via a border; that
4262
+ is what the CSS class <b>shadow_div1</b> is achieving.
4263
+
4264
+ Since as of <b>November 2021</b> you can also use objectified-html-tags.
4265
+ The drawback is that it is currently a bit verbose.
4266
+
4267
+ Example:
4268
+
4269
+ _ = Cyberweb.oop_h1('Batterien', 'martb1px')
4270
+ css_manager = Cyberweb::CssManager.new
4271
+ css_manager.css_rule_for_drop_shadow(:lightgreen) # Generate the CSS rule here.
4272
+ _.css_class 'martb1px drop_shadow_lightgreen' # Use the CSS rule - note the last part.
4273
+ _.css_manager 'css_rule_for_drop_shadow(:lightgreen)'
4274
+ _.add_to_pre_content css_manager.result_as_CSS_style?
4275
+
4276
+ Or simpler:
4277
+
4278
+ _ = Cyberweb.oop_h1('Batterien', 'martb1px')
4279
+ _.css_class 'martb1px drop_shadow_lightgreen'
4280
+ _.css_manager 'css_rule_for_drop_shadow(:lightgreen)'
4281
+ _.add_to_pre_content(
4282
+ Cyberweb.css_manager { css_rule_for_drop_shadow(:lightgreen) }.css_style?
4283
+ )
4284
+
4285
+ Unfortunately the second example (aka the one right above ^^^) does not
4286
+ work yet. I am not entirely certain how to enable this - ruby's
4287
+ meta-patterns begin to confuse me.
4288
+
4289
+ Since my brain is too feeble, I actually wrote a class instead
4290
+ that will autogenerate some CSS rules that can be used.
4291
+
4292
+ These CSS rules are stored in the file called **drop_shadow.css**
4293
+ and work without needing any meta-pattern or autogenerator.
4294
+
4295
+ To use these in your own scripts, do something like this:
4296
+
4297
+ p('drop_shadow_chartreuse') { ee 'Hello world!' }
4298
+ p('drop_shadow_chocolate') { ee 'Hello world!' }
4299
+ p('drop_shadow_coral') { ee 'Hello world!' }
4300
+ p('drop_shadow_cornflowerblue') { ee 'Hello world!' }
4301
+ p('drop_shadow_cornsilk') { ee 'Hello world!' }
4302
+ p('drop_shadow_cyan') { ee 'Hello world!' }
4303
+ p('drop_shadow_darkblue') { ee 'Hello world!' }
4304
+ p('drop_shadow_darkcyan') { ee 'Hello world!' }
4305
+ p('drop_shadow_darkgoldenrod') { ee 'Hello world!' }
4306
+
4307
+ This is currently hardcoded to 5px. At some point this default
4308
+ may change, but for now I think 5px is a good compromise.
4309
+
4310
+ The actual CSS rule will look like this:
4311
+
4312
+ .drop_shadow_cornflowerblue { filter: drop-shadow(5px 5px 5px cornflowerblue); }
4313
+
4314
+ This is possible for all registered HTML colours.
4315
+
4316
+ Have a look at the file <b>cyberweb/examples/advanced/advanced/drop_shadow_examples.cgi</b>
4317
+ to see how this may look like.
4318
+
4319
+ ## HTML IDs
4320
+
4321
+ Each <b>HTML tag</b> may have an id entry. The id entry, in HTML, is typically
4322
+ defined like this:
4323
+
4324
+ id="some_value" # A generic example.
4325
+ &lt;div id="some_div">&lt;h2>Hello world!&lt;/h2>&lt;/div> # A better example.
4326
+
4327
+ Which values are permissive here?
4328
+
4329
+ For HTML4 ID tokens must begin with a letter
4330
+ (which is [A-Za-z]) and <b>may</b> be followed by
4331
+ any number of letters, digits ([0-9]), hyphens
4332
+ ("-"), underscores ("_"), colons (":"), and
4333
+ periods (".").
4334
+
4335
+ In August 2022 I confirmed this, via the following ID:
4336
+
4337
+ date_01.09.2022
4338
+
4339
+ So you can even use '.' characters. I note this down here
4340
+ as I tend to forget things - so this documentation here is
4341
+ a reference for me as well as for others.
4342
+
4343
+ As far as the cyberweb project is concerned, all <b>HTML
4344
+ ids</b> are registered into an array (if you use
4345
+ Cyberweb::WebObject). To then show whether you have
4346
+ duplicated IDs in a page, do use the following method:
4347
+
4348
+ show_duplicated_ids()
4349
+
4350
+ Or in a more general way, use the #debug method, like so:
4351
+
4352
+ w.debug
4353
+
4354
+ This will report whether you have a duplicated ID or not.
4355
+
4356
+ When the page is served, we will also display a little error
4357
+ message in case we have found duplicated IDs. This way we
4358
+ can notify the developer that there is some mistake in his
4359
+ page and we can correct this mistake then.
4360
+
4361
+ Have a look at the corresponding source code to see how
4362
+ this is actually implemented.
4363
+
4364
+ ## .show_this_local_directory()
4365
+
4366
+ The method <b>.show_this_local_directory()</b> can be used
4367
+ to show content of a local directory. It is available for
4368
+ <b>class Cyberweb::WebObject</b>.
4369
+
4370
+ I plan to extend this in the coming weeks and months. The
4371
+ key idea is that we can use this in .cgi scripts and
4372
+ sinatra to show the content of different directories.
4373
+
4374
+ ## The <mark> tag
4375
+
4376
+ You can highlight text in HTML via:
4377
+
4378
+ <p>Foo<mark>bar</mark></p>
4379
+
4380
+ ## Lazy loading of HTML elements, such as the img tag
4381
+
4382
+ You can use:
4383
+
4384
+ loading=lazy
4385
+
4386
+ To load images at a later time - that is when the user
4387
+ scrolls to such an image, hence the term "<b>lazy
4388
+ loading</b>" for this functionality.
4389
+
4390
+ Let's have a look how this looks in raw HTML:
4391
+
4392
+ <img src="foobar.jpg" loading="lazy" alt="Alternative Text">
4393
+
4394
+ So all you have to do is add the part <b>loading="lazy"</b> to
4395
+ the image tag (img) at hand.
4396
+
4397
+ The Cyberweb project supports this in both the traditional way, as
4398
+ well as the OOP variant offered by cyberweb.
4399
+
4400
+ The examples for this are:
4401
+
4402
+ img 'foobar.jpg', loading: lazy
4403
+ img('foobar.jpg') { :lazy }
4404
+
4405
+ If you want to use it via the OOP variant:
4406
+
4407
+ _ = oop_image('foobar.jpg')
4408
+ _.lazy_loading # or _.lazy
4409
+ puts _ # => <img src="foobar.jpg" loading="lazy">
4410
+
4411
+ As you can see, the OOP variant of cyberweb allows us to assemble
4412
+ the desired HTML tag as-is. It may seem quite verbose, but
4413
+ remember that you also get a lot of flexibility that way.
4414
+
4415
+ ## The method images_css() in class Cyberweb::WebObject
4416
+
4417
+ Sometimes you have several images and may want to apply the
4418
+ same CSS rules to all of them.
4419
+
4420
+ For instance, I use the CSS class <b>bblack1</b> which is
4421
+ equivalent to:
4422
+
4423
+ border: 1px solid black;
4424
+
4425
+ So, if I want to apply the bblack1 CSS rule to all images
4426
+ in a WebObject, I do this:
4427
+
4428
+ images_css 'bblack1'
4429
+
4430
+ Past that point all images on that particular web-object
4431
+ will have a 1px black border.
4432
+
4433
+ See the example file at
4434
+ <b>cyberweb/examples/advanced/images/global_css_rules_for_the_images.cgi</b>
4435
+ for a demo in this regard. (Not all images work; some of them
4436
+ are only available on my home system, but the other images
4437
+ should work.)
4438
+
4439
+ ## links.md
4440
+
4441
+ If a file called <b>links.md</b> exists in the current working directory
4442
+ then a .cgi or sinatra application powered by cyberweb will read in the
4443
+ content of this file. Then it will display each entry in that file
4444
+ as a HTML hyperlink. I needed this functionality so that I can dynamically
4445
+ modify links displayed on a webpage, for another user of the cyberweb
4446
+ gem. So this functionality may not be hugely important for most users,
4447
+ but in case you need it, it is available.
4448
+
4449
+ ## CSS Animations
4450
+
4451
+ CSS Animations are defined by keyframes.
4452
+
4453
+ Typically two transitions use used here:
4454
+
4455
+ - The keyframe for the starting value.
4456
+ - The keyframe for the ending value.
4457
+
4458
+ The general syntax goes like this:
4459
+
4460
+ @keyframes name_here {
4461
+ }
4462
+
4463
+ ## Useful quotes when designing websites and web-apps
4464
+
4465
+ The following subsection collects a few <b>interesting statements</b> -
4466
+ kind of "<i>the poor man's wisdom</i>" when it comes to web-development
4467
+ and software engineering in general. Do not take any of these
4468
+ at face-value 1:1 but feel free to use any of them them as a
4469
+ starting point for **gaining new insights**.
4470
+
4471
+ "Any <b>good-enough</b> decision that can be made right now is
4472
+ still better than any 'perfect' decision that may come in
4473
+ way too late."
4474
+
4475
+ "When you are creating a website, the primary goal as a designer
4476
+ should be to get rid of the question marks users have when
4477
+ visiting that site."
4478
+
4479
+ "The most important thing a designer can do is to understand
4480
+ the basic principle of eliminating question marks that a user
4481
+ has when visiting a website. Keep things simple."
4482
+
4483
+ "If you can not make something self-evident, you should at the
4484
+ least make it self-explanatory."
4485
+
4486
+ "If a web page is going to be effective, it has to work most
4487
+ of its beautiful magic at a single glance."
4488
+
4489
+ "The average visitor rarely spends much time reading all
4490
+ content on a given web page, so focus on designing fewer
4491
+ elements that can be easily navigated, without too much
4492
+ distracting clutter."
4493
+
4494
+ "If your design forces a visitor to incur a small learning
4495
+ curve, make sure that the added value from this design
4496
+ change leads to it being worth that additional learning
4497
+ curve."
4498
+
4499
+ "Clarity trumps consistency."
4500
+
4501
+ "Each webpage should have a clear visual hierarchy."
4502
+
4503
+ "Components in a webpage that are related logically
4504
+ should also be related visually."
4505
+
4506
+ "In order to make a website 'scan-friendly', make good use of
4507
+ headings having a larger font size. The headings should
4508
+ indicate what a subsection is about."
4509
+
4510
+ "When using a heading, make them visually somewhat closer
4511
+ to the section they belong to, rather than equally spaced
4512
+ to the preceding paragraph."
4513
+
4514
+ "If you need the visitor to make a difficult choice, provide as
4515
+ much guidance as necessary - but not more. Be succinct here
4516
+ and provide only the smallest amount of information that
4517
+ will help the user."
4518
+
4519
+ "Omit needless words. Vigorous writing is concise."
4520
+
4521
+ "Try to make everything on a web-site self-explanatory or as
4522
+ close to it as possible."
4523
+
4524
+ "Navigation should ideally remain clear, simple, and consistent."
4525
+
4526
+ "It may be useful to consider using an identifier, such as a logo
4527
+ or an image, for the website, and display this e. g. on the
4528
+ upper left corner. This may help visitors identify where they
4529
+ are, in particular if they tend to use several tabs in their
4530
+ browser."
4531
+
4532
+ "If your website makes use of a menu-bar or navigation-bar,
4533
+ consider highlighting the current location that the user
4534
+ has or uses on that website."
4535
+
4536
+ "Ideally a website should convey the big picture, and make it
4537
+ clear what the site is about."
4538
+
4539
+ "If possible consider to use visual identifiers on the
4540
+ whole web-application at hand, to give visitors the
4541
+ right idea about this being a cohesive and integrated
4542
+ unit."
4543
+
4544
+ "Changing a website at a later time is not necessarily trivial.
4545
+ Some percentage of users that have grown accustomed to a
4546
+ layout will resist almost any kind of change, and even
4547
+ apparently simple changes often turn out to have
4548
+ far-reaching effects."
4549
+
4550
+ "Focus ruthlessly on fixing the most serious problems first."
4551
+
4552
+ "Make the best decision you can with the information you have."
4553
+
4554
+ ## Useful Links
4555
+
4556
+ This subsection just keeps a few useful resources. This may become
4557
+ obsolete over time, so don't expect all links to work or be very
4558
+ useful. It's just a random collection really, last updated in
4559
+ **May 2021**.
4560
+
4561
+ [https://validator.w3.org/](https://validator.w3.org/)
4562
+
4563
+ [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Auswahllisten](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Auswahllisten)
4564
+
4565
+ https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
4566
+
4567
+ https://meiert.com/en/indices/css-properties/
4568
+
4569
+ https://webdesignerwall.com/tutorials/advanced-css-menu
4570
+
4571
+ http://www.ericmeyeroncss.com/projects/01/
4572
+
4573
+ http://www.selfhtml5.org/html5-tag-systematik/
4574
+
4575
+ https://hyperstack.org/
4576
+
4577
+ Fancy CSS Tricks and Hints:
4578
+
4579
+ CSS-text effects: https://dev.to/gscode/10-cool-css-text-effects-3elk
4580
+
4581
+ Various CSS Tricks: https://catswhocode.com/css-tricks/
3220
4582
 
3221
- HTML Tutorial (HTML for beginners): https://html.com/
4583
+ HTML Tutorial (HTML for beginners): [HTML Tutorial (HTML for beginners)](https://html.com/)
3222
4584
 
3223
- Self-HTML: https://selfhtml.org/
4585
+ Self-HTML: [Self-HTML](https://selfhtml.org/)
3224
4586
 
3225
- Fancy Scrollbars: http://www.n-son.com/scripts/jsScrolling/example2.html
4587
+ Fancy Scrollbars: [Fancy Scrollbars](http://www.n-son.com/scripts/jsScrolling/example2.html)
3226
4588
 
3227
4589
  For a quick list (a table) of available HTML tags, you may want to visit:
3228
4590
 
@@ -3232,28 +4594,43 @@ https://way2tutorial.com/html/tag/index.php
3232
4594
  I only wanted to list one, so the above link is somewhat random.)
3233
4595
 
3234
4596
 
3235
- ## Contact information
4597
+ ## Contact information and mandatory 2FA coming up in 2022
3236
4598
 
3237
- If your creative mind has ideas and specific suggestions to make this
3238
- gem more useful in general, feel free to drop me an email at any
3239
- time, via:
4599
+ If your creative mind has ideas and specific suggestions to make this gem
4600
+ more useful in general, feel free to drop me an email at any time, via:
3240
4601
 
3241
4602
  shevy@inbox.lt
3242
4603
 
3243
4604
  Before that email I used an email account at Google gmail, but in **2021** I
3244
- decided to slowly abandon gmail for various reasons. In part this is because
3245
- the UI annoys me (on non-chrome browser loading takes too long), but also
3246
- because of Google's attempt to establish mass surveillance via its
3247
- federated cohorts sniffing (FLoC). I do not know what happened at Google,
3248
- but enough is enough - there is only so much you can take while supporting
3249
- greed. When it comes to data mining done by private groups, ultimately
3250
- the user became the product.
3251
-
3252
- Do keep in mind that responding to emails may take some time,
3253
- depending on the amount of work I may have at that moment, due
3254
- to reallife time constraints. I will, however had, read feedback
3255
- eventually. Patches and code changes are welcome too, of course,
3256
- as long as they are in the spirit of the project at hand, e. g.
3257
- fitting to the general theme. For this I may make use of github
3258
- as a discussion site, but this has a low priority right now.
4605
+ decided to slowly abandon gmail for various reasons. In order to limit this
4606
+ explanation here, allow me to just briefly state that I do not feel as if I
4607
+ want to promote any Google service anymore, for various reasons.
4608
+
4609
+ Do keep in mind that responding to emails may take some time, depending on
4610
+ the amount of work I may have at that moment.
4611
+
4612
+ In 2022 rubygems.org decided to make 2FA mandatory for every gem owner:
4613
+ see https://blog.rubygems.org/2022/06/13/making-packages-more-secure.html
4614
+
4615
+ As I can not use 2FA, for reasons I will skip explaining here (see
4616
+ various github issue discussions in the past), this effectively means that
4617
+ Betty Li and others who run the show at rubygems.org will perma-ban me
4618
+ from using rubygems as a developer.
4619
+
4620
+ As I disagree with that decision completely, this will mean that all my
4621
+ gems will be removed from rubygems.org prior to that sunset date, e. g.
4622
+ before they permanently lock me out from the code that I used
4623
+ to maintain. It is pointless to want to discuss this with them anymore -
4624
+ they have made up their minds and decided that you can only use
4625
+ the code if 2FA is in place, even though the code itself works just
4626
+ fine. If you don't use 2FA you are effectively locked out from your
4627
+ own code; I consider this a malicious attack. See also how they limited
4628
+ discussions to people with mandatory 2FA on the ruby-bugtracker, thus
4629
+ banning everyone permanently without 2FA:
4630
+
4631
+ https://bugs.ruby-lang.org/issues/18800
4632
+
4633
+ Guess it may indeed be time to finally abandon ruby - not because
4634
+ ruby is a bad language, but there are people now in charge who
4635
+ really should not be part of ruby in the first place.
3259
4636