ogulg - Tumblr blog

[ogulg]

Layout

Today, we learn to design layout of the webpage. However, this article will also include history of layout development.

With manuscripts, all of the elements are drawing by hand, so the creator can design the layout directly as they create the work, perhaps with an advanced sketch as a guide.

With ancient woodblock printing, all elements of the page were carved directly into the wood, though later layout changs might need to be made if the printing was transferred onto a larger work, such as a large piece of fabric, potentially with multiple block impressions.

With the Renaissance invention of letterpress printing and cold-metal moveable type, typesetting was accomplished by physically combining characters using a composing stick into a galley and a long tray. Any images would be created by engraving.

The original document would be a hand-written manuscript; if the typesetting was performed by someone other than the layout artist, markup would be added to the manuscript with instructions as to typeface, font size, and so on. (Even after authors began to use typewriters in the 1860s, originals were still called "manuscripts" and the markup process was the same.)

After the first developmental stage of typesetting, a galley proof might be printed in order for proofreading to be performed, either to correct errors in the original, or to make sure that the typesetter had followed the manuscript properly, and correctly interpreted the markup. The final stage of the layout would be established in a "form" or "forme" using pieces of wood or metal ("furniture") to space out the text and images as desired, a frame known as a chase, and objects which lock down the frame known as quoins. This process is called imposition, and potentially includes arranging multiple pages to be printed on the same sheet of paper which will later be folded and possibly trimmed. An "imposition proof" (essentially a short run of the press) might be created to check the final placement.

The invention of hot metal typesetting in 1884 increased spped of the typesetting process by allowing workers to produce slugs—entire lines of text—using a keyboard. The slugs were the result of molten metal being poured into molds temporarily assembled by the typesetting machine. The layout process remained the same as with cold metal type, however: assembly into physical galleys.

After the development of digital media, Modern web pages are typically produced using HTML for content and general structure, cascading style sheets to control presentation details such as typography and spacing, and JavaScript for interactivity. Since these languages are all text-based, this work can be done in a text editor, or a special HTML editor which may have WYSIWYG features or other aids. Additional technologies such as Macromedia Flash may be used for multimedia content.

References

Page layout - Wikipedia

[ogulg]

Strutural Elements

Today, we learned to design elemnts to build better websites. There are elements:body, main, article,aside and footer.

Each of the design elements has special expressive qualities. Line, for example, is an intuitive, primeval convention for representing things; the simple linear imagery of young children’s drawings and prehistoric rock paintings is universally understood. The formal relationships of thick with thin lines, of broken with continuous, and of sinuous with jagged are forces of contrast and repetition in the design of many paintings in all periods of history. Variations in the painted contours of images also provide a direct method of describing the volume, weight, spatial position, light, and textural characteristics of things. 

In addition, buildings design the similar way with webpage. Structural system use in building construction, the particular method of assembling and constructing structural elements of a building so that they support and transmit applied loads safely to the ground without exceeding the allowable stresses in the members. Basic types of systems include bearing-wall, post-and-lintel, frame, membrane, and suspension. They fall into three major categories: low-rise, high-rise, and long-span. Systems for long-span buildings (column-free spaces of more than 100 feet, or 30 metres) include tension and compression systems (subject to bending) and funicular systems, which are shaped to experience either pure tension or pure compression. Bending structures comprise of the girder and two-way grids and slabs. Funicular structures combine cable structures, membrane structures, and vaults and domes.

To sum up, elements are the base of creating a structure. They are using in many buildings as same as websites.

References

rammed earth | building material | Britannica

Encyclopedia Britannica | Britannica

[ogulg]

Multimedia

Today, we used images to decorate our website. We learn also add videos or other interactive media elements.

Early websites had only text, and soon after, images. Web browser plug-ins were then used to add audio, video, and interactivity (such as for a rich Web application that mirrors the complexity of a desktop application like a word processor). Examples of such plug-ins are Microsoft Silverlight, Adobe Flash Player, Adobe Shockwave Player, and Java SE. HTML 5 includes provisions for audio and video without plugins. JavaScript is also built into most modern web browsers, and allows for website creators to send code to the web browser that instructs it how to interactively modify page content and communicate with the web server if needed. The browser's internal representation of the content is known as the Document Object Model (DOM).

WebGL (Web Graphics Library) is a modern JavaScript API for rendering interactive 3D graphics without the use of plug-ins. It allows interactive content such as 3D animations, visualizations and video explainers to presented users in the most intuitive way.

A 2010-era trend in websites called "responsive design" has given the best viewing experience as it provides a device-based layout for users. These websites change their layout according to the device or mobile platform, thus giving a rich user experience.

To sum up, we may use multimedia tools to decorate our websites to enhance the quality of the page. Also it could be designed with the customer's expectations.

References

Website - Wikipedia

[ogulg]

Designing a Website

We have two assignments to design websites. One with HTML and CSS codes and the another one is Wordpress.

The website design seperates into two groups. One is Static website and the other one is Dynamic website.

A static website is one that has Web pages stored on the server in the format that is sent to a client Web browser. It is primarily coded in Hypertext Markup Language (HTML); Cascading Style Sheets (CSS) are used to control appearance beyond basic HTML. Images are commonly used to create the desired appearance and as part of the main content. Audio or video might also be considered "static" content if it plays automatically or is generally non-interactive. This type of website usually displays the same information to all visitors. Similar to handing out a printed brochure to customers or clients, a static website will generally provide consistent, standard information for an extended period of time. Although the website owner may make updates periodically, it is a manual process to edit the text, photos, and other content and may require basic website design skills and software. Simple forms or marketing examples of websites, such as a classic website, a five-page website or a brochure website are often static websites, because they present pre-defined, static information to the user. This may include information about a company and its products and services through text, photos, animations, audio/video, and navigation menus.

Static websites may still use server side includes (SSI) as an editing convenience, such as sharing a common menu bar across many pages. As the site's behavior to the reader is still static, this is not considered a dynamic site.

A dynamic website is one that changes or customizes itself frequently and automatically. Server-side dynamic pages are generated "on the fly" by computer code that produces the HTML (CSS are responsible for appearance and thus, are static files). There are a wide range of software systems, such as CGI, Java Servlets and Java Server Pages (JSP), Active Server Pages and ColdFusion (CFML) that are available to generate dynamic Web systems and dynamic sites. Various Web application frameworks and Web template systems are available for general-use programming languages like Perl, PHP, Python and Ruby to make it faster and easier to create complex dynamic websites.

A site can display the current state of a dialogue between users, monitor a changing situation, or provide information in some way personalized to the requirements of the individual user. For example, when the front page of a news site is requested, the code running on the webserver might combine stored HTML fragments with news stories retrieved from a database or another website via RSS to produce a page that includes the latest information. Dynamic sites can be interactive by using HTML forms, storing and reading back browser cookies, or by creating a series of pages that reflect the previous history of clicks. Another example of dynamic content is when a retail website with a database of media products allows a user to input a search request, e.g. for the keyword Beatles. In response, the content of the Web page will spontaneously change the way it looked before, and will then display a list of Beatles products like CDs, DVDs, and books. Dynamic HTML uses JavaScript code to instruct the Web browser how to interactively modify the page contents. One way to simulate a certain type of dynamic website while avoiding the performance loss of initiating the dynamic engine on a per-user or per-connection basis is to periodically automatically regenerate a large series of static pages.

Reference

Website - Wikipedia

[ogulg]

hierachy of color, color contrast, brightness, shape contrast, monotones, dynamic coloring, a simultaneous contrast with red and blue colors. The image also presents dynamic and action coloring

Brightness maintains at the middle of the image Therefore contrast is nesting on th upper right side.The shading is focussing on the character's faces. Light comes from  top to bottom.Thefore shading starts with top side and continues at the lower side of the image

Some images color vibrations illustrates as black

[ogulg]

Wordpress

Today we learned wordpress to create a webpage . We learned tools to change and organize the pages layout, themes and PluginsWe learn to design webpage with Word press. We used theme colors to change the background.

We learn to design webpage with Word press. We used theme colors to change the background. We designed the layout with our perspective. We put navbar with 4 elements.I used elementor plugin to design my Wordpress web page.Homepage related with welcome. Also I put icon at the beginning. Then I add images of famous players. We put 4 plugins to combine pages into the homepage. I created first page about me. I included picture and write a welcome in the homepage Another one is latest news my last 5 blog posts. I chose purple and blue header and red and gray colored footer representing for my preference. Last one is related with design of the page. I had had hard time to design text because I couldn't make margin changes. Also I couldn't create aside navbar right side of the page bause it doesn't fit in the text box. I couldn't reorganize it because it breaks the text size when I put another navbar in the text area. It was very easy to create navigation in the top and foooter at the bottom. It was the same designing article headings with the coding. Also wordpress has various options with various plusgins. These plugins include many  font family like arsenal, armata etc.. The header and footer design is much easier to make coloring and background coloring than coding The header and footer design is much easier to make coloring and background coloring than coding. I used motions in the advance options of style. I applied motions of zoom in down to Latest post and Blog areas However, we can't create freeze bars or hamburger menus like coding. I didn’t use background coloring However, we can't create freeze bars or hamburger menus with coding. I didn't use background coloring because it was hard to coloring both text and background in the text box.

WordPress, content management system (CMS) developed in 2003 by American blogger Matt Mullenweg and British blogger Mike Little. WordPress is most often used to create blogs, but the program is sufficiently flexible that it can be used to create and design any sort of website. It is also an open-source product, so users can modify it for their own purposes. WordPress was the successor to the blogging tool b2/cafelog, which was developed in 2001 by French programmer Michel Valdrighi.

WordPress (WP or WordPress.org) is a free to use app and open-source content management system (CMS) script in hypertext preprocessor language and connect with a MySQL or MariaDB database with applicable HTTPS. Elements define as a plugin architecture and a template system, referred to within WordPress as "Themes". WordPress was originally created as a blog writing  system but has transformed into support other web content categories more old style mailing lists and Internet fora, media galleries, subscription sites, learning management systems (LMS) and online stores. One of the most popular content management system solutions in use, WordPress is chosen by 42.8% of the top 10 million websites as of October 2021.

WordPress clients and developers may install and change among many different themes. Themes accept users to change the look and functionality of a WordPress website without altering the root code or parent content. Every WordPress website requires at least one theme to be present. Themes may be directly installed accessing the WordPress "Appearance" administration tool in the dashboard, or theme folders may be added directly into the themes library. WordPress themes are categorized into two categories: free usage and premium. Many free themes are listed in the WordPress theme directory (also known as the repository), and premium themes are available for purchase from marketplaces and individual WordPress developers. WordPress users may also organize and design their own custom themes.

Phone apps for WordPress exist for WebOS, Android, iOS, Windows Phone, and BlackBerry. These applications, designed by Automattic, show tooblbar such as adding new blog posts and pages, commenting, moderating comments, replying to comments in addition to the ability to view the stats. WordPress also features integrated link management, a search engine–friendly, clean permalink structure; the ability to assign multiple categories to posts; and support for tagging of posts. Automatic filters are also composing of, providing standardized formatting and styling of text in blog wiritngs (for example, converting regular quotes to smart quotes). WordPress also supports the Trackback and Pingback standards for displaying links to other sites that have themselves linked to a post or an article. WordPress posts can be edited in HTML, using the visual editor, or using one of a number of plugins that allow for a variety of customized editing features. Prior to version 3, WordPress supported one blog per installation, although multiple concurrent copies may be run from different directories if calibrate to use separate database tables. WordPress Multisites (previously referred to as WordPress Multi-User, WordPress MU, or WPMU) was a fork of WordPress created to use multiple blogs to exist within one installation but is able to be administered by a centralized maintainer. WordPress MU makes it possible for those with websites to host their own blogging communities, as well as control and moderate all the blogs from a single dashboard. WordPress MU adds eight new data tables for each blog.

It has updates of the release of WordPress 3, WordPress MU has merged with WordPress.

References

WordPress - Wikipedia

Encyclopedia Britannica | Britannica

OGUL GOKCE – HOME (griffith.ie)

[ogulg]

Grid

This week, we learned to put grid position items between lines. Grid in electron tube and electrode that has starting for controlling the flow of electron atoms or ions through it. Grid is placing between the cathode and the anode. A screen grid usually maintained at a fixed potential to safe switch that placed between control grid and a n anode. It reduces electric influence of  the anode on the control grid. A suppressor gird is positioned between two positive electrodes. It protects the screen grid and the anode by decreasing flow of secondary electrons from one to another.

Smart grid is a safe, remodify and electronically controllable system. It delivers electric power that operates in accord with a traditional power grid. Although many of its components had been advanced in 21st century, During the early 21st century, as of 2016 no smart grid was yet fully functional. It identifies the possibilities and future developments of the smart grid technologies.

To sum up, grids position one item to another place. It has many applications in real life as well as coding. It is generally using in electricity and other electric based areas transform power one place to another through strong protected grid lines.

References

grid | electronics | Britannica

smart grid | power network | Britannica

[ogulg]

Container

Today, I learned to make flexboxes and move it as axes in css. It needs a class id as container.

Container has been invented to move massive products to one place to another with highest protection.containerization, method of transporting freight by placing it in large containers. Containerization is an important cargo-moving technique developed in the 20th century. Road-and-rail containers, sealed boxes of standard sizes, were used early in the century; but it was not until the 1960s that containerization became a major element in ocean shipping, made possible by new ships specifically designed for container carrying.

There is a container ship which combines all kinds of materials under large sized container. They can carry materials easily with a protective casket. Container ships can design with various purposes. Big fluid materials can be transported by oil tanker containers. The whole ship is built as a container for distributing fluid protect. They contain special chemicals to protect fluid from air and combustible gases. Another one is trash transport ship. It can carry 15-30 tons. It has a mechanism of coverage which prevents combustion of methane gases. The largest container ship can carry 30 500 kg and 244 metres.

To sum up, container as in web design absorb inside to use as a function. This function can change depending on the application both real life and web authoring

References

containerization | transport | Britannica

Twenty-foot equivalent unit - Wikipedia

[ogulg]

Coloring

This week I have done coloring in css format. I applied various kinds of colors into the html code.

Colors have been very important in our lives. Humans first used colors to make cave drawings. This activity created science of colors(colorimetry or chromatics). Perception of color derive from varying spectral sensitivity of different types of cone cells in the retina. Colors may be defined and quantified the image by the degree of which stimulate these cells. Aristotle claimed that color comes from the nature and natural light. It wasn't discovered until Newton that the light define as the source of color sensation. Edward Newton Turner created cinematography invented two or more colors in cinema. A color wheel term is added after the development of coloring pictures. It contains a circular swatch of color hues that indicates the relationship between friends.[1]

Several ancient cultures including Egyptians and Chinese practiced chromotherapy or color to use healing effect. There are five types of color generally using for the treatment. Red is stimulating the body and the mind and increase blood circulation Yellow is thought to stimulate the nerves and purify. Orange is used to heal the lungs and grows up energy levels Blue is using to treat illnesses and pain. Indigo shades are thought to relieve skin problems. These techniques are more profoundly using in sales and marketing sector to increase customer attentions and desires. For instance, the car sector uses metallic white and black colors to capture their customer. One of the new modern color invented. It is night blue color.[2]

To sum up, colors are very important in the modern world. They define the popularity of a product in many sectors. Also it is related with image and presentation of a company. Companies challenge to create unique and best suited colors for their product against their competitors.

[1]Color - Wikipedia

[2] Color Psychology: Does It Affect How You Feel? (verywellmind.com)

[ogulg]

Inheritance

I wrote the code of css in this week. It inherited the previous codes that was written in previous code(HTML). Except the root elements won't be compised of inheritance.Inheritance defines as belongings of individuals' unless these properties owned by a goevernment or non-governmental organizations.

In the first evidence of inheritance, mummy tombs have explored as evidence of wealth in Egypt. Another way of distributing wealth was found in pre Columbian-Mexico. Indians distribute dead man's wealth to close realtives or friends.

Furthermore, inheritance defines as common good in Marxist ideology. Theferore, it doesn't include the concept of inheritance. The land is a common good. It belongs to the public. When a person is dead, the land will be rearranged by the government. Also inheritance are an issue of taxation by many governments. They apply inheritance law and deciding which part is included in government revenue because inheritance accepted as an new wealth source among many laws and societies' from their close relatives.

The opposing view explains that inheritance encourages economic prosperity without work. It also regards as economic source of inequality. It breaks the cycle of long-term economic activity. The product cycle needs to be done with the establishment of factories by new entrepreneurs. However, inheritance brings recession by old companies' continuation. This situation prevents the new establishment of companies and new technologies at the same time.

To sum up, inharitance in coding is effective and much faster for programming. Inheritance may bring prosperity to relatives or friends. However, it may prevent new developments in economic activities, science and technology because it creates limitation indireclty by continuation of old institutions. These old forms of institutions will reduce individual freedom and entrepreneurship among societies for future generations.

References:

inheritance | Definition, History, Issues, & Facts | Britannica

Inheritance - Wikipedia

[ogulg]

Web Authoring Assignment

My first asssignment is creating a web page. All webpages are derived from the same source code of HTML. Today's class, I learned to insert images,gifs and hyperlink image to a web page.

Webpages design for practical uses. Main page of a website reflects important daily news. News need to be unbiased and true for benefit of societies.However, fake news create social malfunctions. Important parts of social life is stagnating. After the covid virus, many scolial media publishes unproven and unsupported news about covid vaccines and its affects. Fake news carries out like diesease. It spreads disorientaion of life and social separation. For instance, covide vaccine effects had been argued from many parts of the society. Many scientist rejects to do vaccination because of minimum risk side effects.

Another effect of fake news is psychological deterioriation of society. During covid pandemic, many media instutions publish a propaganda of self isolation. It caused separtion with social interaction. It appears seperation of many families. The commercials create addiction over hygene materials such as hand sanitizers. These news also imposing social distancing. Many bussiness owners opposed this news as many were closed the doors because of social distancing. Especially, entertainment sector such as cinemas and restaurants took heavy damage from these news. Some are survived by changing thier services to take away. They collaborated the government and many media institutions for clean and healthy image.

Furthermore, ıt creates addiciton over digital media tools. One of the most developed one during covid is online streaming platforms. Most popular example is Netflix. It gained huge popularity by showing old and modern tv series and movies.

To sum up, fake news may cause many harm to society. It disturbs social psychology and functioning. It creates addiction towards digital media and social isolation. It is harmful for people to believe fake news as it creates psyhcial and social disorientation. The only beneficial side of fake news is that they developed online ordering services such as Just Eat Takeaway.

References:https://www.researchgate.net/publication/363383451_Who_falls_for_fake_news_Psychological_and_clinical_profiling_evidence_of_fake_news_consumers

[ogulg]

Robotic Technologies

Robotic Technologies increase human comfort. These Technologies use to make human life much easier. Humans couldn’t do certain things but with robotic Technologies robots can accomplish harder tasks without any inputting commands. For instance, volvo cars AI can manage to create shortcuts and clear paths for driver to go certain place much easier

Another topic is that some genes can be edited against some diseases. For example, honeybee disease can be eliminated by gene modifications. There are some ethical issues. Optimizing baby genes can be efficient because the baby can be strong against viruses and have more lifespan. Also laser technologies are utilizing in healthcare systems. These systems can identify malevolous diseases and replace harmed organs. For instance, these technologies start using transplants of organs since 1990s. After the first heart transplant, many technologies developed in surgery. One of them is laser cut technologies are using to make more careful organ transplants of any part of the human body. The cuts around the body can be healing faster because the lasers are regulated the precise location of the operation area and applying reduced damage to the human tissue.

As professor Martin Rees mentions that these robots are cheaper for practical purposes. Some under earth explorations or space explorations can be done much easier than sending humans to do the explorations. Like Elon Musk research, private funders can send robots to explore Mars atmosphere. If an individual was sent, he/she needed more expensive gear to survive the new atmospheric conditions.

On the opposite side of robot technology is that they can learn information much faster than human intelligence. AI can control many electrical devices through electromagnetic waves which creates problems of human daily lives. It can create problems of many miscalculations and unwanted results of many projects when robots are taking control of machines. Furthermore, other bad side of this technology is that some viruses effect can be more lethal. The most popular example is corona virus pandemic. It is identified as laboratory programmed virus. It killed millions which is more than expected. The important lesson learned from this experience is that preparedness needed for those kinds of crisis situations. Many governments don’t want to invest unnecessarily against minimum risk areas but after the pandemic preparedness of risky situations gain huge importance like building more hospital care facilities and areas like catastrophes damage reduction projects (floods and hurricanes).

To sum up, AI can be beneficial for human daily lives. Robotic technologies can create peaceful and prosper environment for human lives. They increase comfort of the individuals by doing tasks quickly and properly. However, if robotic technologies cannot use cautiously, they will create malfunctions of electronic devices or by taking control of electronic devices robots may try to destroy human life.

References: https://soundcloud.com/bridging-the-gaps/the-end-of-astronauts-robotic-space-exploration-and-our-future-on-earth-beyond-with-martin-rees?si=595afb09812e4a40a5bbc5f0bb395e82&utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing

[ogulg]

[ogulg]

Internet Security and Free Will on Social Media

Corrupt data exist in the information world which is coexist with valuable data. This problem is one of the most popular problem in our technological world.Some people use technology for good purposes. They create scientific innovations like medicine for finding cures to diseases. Others use for misleading people or manupulating to their ideas’ for their own benefits. I selected Dr Alfred Mele Free Will talk and professor David Hand's Dark Data for my topic. These two researches relate with my article about internet security and freedom on social media.

Hence, collecting pure information, as profeessor Dark Data writier David Hand claims that people can be maniplulated with false information by media tools. One of the most common tool of media is twitter news. People try to learn proper knowldge through online media in opposed to common media like tv and newspaper. However, they are feeded by big bussiness owners' manipulative ideas or govenmential influence to control the masses for uniting the power. Some others use the technology for personal benefits. For instance, Lazarus(korean) hacked American Crypto stock market. They stole millons of dollars coins in American investors accounts. Even if some people like newspaper columnist try to englihten the society with the true information, that information would be blocked or interfered by rich and powerful elites for their benefits. Most people think that they decide certain aspects in social media by their free will. However, researchers like Dr Alfred Mele Free Will research suggests that even a miligram of tendecy shown by someone, it won't be counted as free will. Social media has many manipulative tools that exploits individuals' desires.For increasing online market benefits,programming technology develop much faster than others. Many data analytics and collection programs developed through time. They most commonlly used in social media platform called Facebook. These programs target users' interests and create a pathway to increase consumer behavior tendency. These manipulative programs can also mislead ideologies by sniffing and transforming. Most famous example is that Republican Party bought 10000 Facebook accounts to increase their support. It actually had more impact than expected with gaining 1 million users. Social media commercials appear after a person surf something online. For instance, after two people talk about buying cars on facebook, both individuals will get second-hand car commercials from their side page.

To sum up, data can be useful to illuminate frauds and scandals of any authorities. It can enforce high status indivduals to use their power for the societies' benefit.  As such, one of the most important example of this incident is Wikileaks. This incident shows that governments' leaders power need to be controlled by independent media.

References: https://soundcloud.com/bridging-the-gaps/free-will-philosophy-and-neuroscience-alfred-mele

https://soundcloud.com/bridging-the-gaps/dark-data-with-david-hand