Web Authoring

@Linlin Sun

[webauthoringbloglinlinsun]

Website construction is an important project for businesses - Restaurants

In the Internet age, website construction seems to have become an important project for the construction and development of major companies. https://www.sitebuilderreport.com/inspiration/restaurant-websites

My partner and I recently opened a burger-based restaurant with a small selection of Asian food - "Bun And Bowl".

After 3 weeks of operation, we thought we should have a website of our own, the website is real It is very important that our website currently cooperates with other ordering companies - "www.bunandbowl.ie", and only one function is to provide guests with the restaurant's own "ordering" function in addition to platforms such as Just Eat and Deliveroo.

In the later stage, we will follow up and adjust the website to make a website that can reflect the style of the store and attract customers. Due to the effectiveness of the combination of the characteristics of the website itself and the company's development, I personally think:

The establishment of a website is conducive to enhancing the corporate brand image, and a well-designed website is a facade of the company. If the website is well designed, more users will be willing to visit and like to view it, which can improve the publicity effect of the enterprise while increasing the traffic of the website. The establishment of an enterprise's own website can not only bring new customers and new business to the enterprise but also greatly improve the performance of the enterprise immediately. Similar to the role of the enterprise website is to promote the company itself and its brand advertisements in newspapers and on TV.

Helping enterprises realize e-commerce functions Since the development of "Internet +" has been continuously promoted, the development of the e-commerce industry has continued to flourish. Now there are many pure e-commerce companies started, and achieved good results. At the same time, enterprises that used to be physical stores are now gradually developing online e-commerce. Through the organic combination of online and offline, the overall development of enterprises is driven. 3. Can introduce the company and display the company's products in a comprehensive and detailed manner. One of the most basic functions of the company's website is to be able to introduce the company and its products in a comprehensive and detailed manner. Through a beautiful website, carrying out promotional activities, and publicising corporate events through various platforms, the publicity effect may be greatly improved. Although it is impossible to cover all groups of people, it can basically let young people understand the company's product information.

Can keep close contact with customers. When people want to know what new products, new services, or changes in old products and services of a certain company, or even just want to know what news the company has, they will habitually enter the Company URL.

It is one of the most important functions of corporate websites to establish business contacts with potential customers. Now, large buyers from all over the world are mainly using the Internet to find new products and new suppliers. If our restaurants continue to use traditional marketing methods, including spray painting, banners, pictorials, etc., it will be time-consuming and laborious, and there will be no good publicity effect. And the best thing about website publicity is that the cost is low, it can be fissile publicity, and it can save a lot of marketing expenses.

[webauthoringbloglinlinsun]

How to set up the WordPress

Things you need to know before you start installing WordPress Before you start installing, there are a few more things you need to have and do.

In order to install WordPress you need a server, with PHP & MySQL.

You need to be able to access your website and its directories and software to start the installation. include:

Access to the web server (via SFTP or FTP)

A text editor

An SFTP client

Select a web browser

You need to download and install an SFTP client

For PC: FileZilla: https://filezilla-project.org/

WinSCP: https://winscp.net/eng/download.php

macOS: CyberDuck: https://cyberduc (I use CyberDuck) Install WordPress Step 1 - Extract the downloaded WordPress folder and upload it to your web server or local host. Step 2 − Open a browser and navigate to your WordPress file path, then you will see the first screen of the WordPress installer as shown in the image below. In our case the path is localhost. Choose your WordPress language and click Continue. Step 3 − In this step, you can review the information required by the database before proceeding with the WordPress installation. Step 4 − Here, you have to enter the information about the MySQL database as mentioned in the following screen.

Database Name – Enter the database name created for WordPress in the MySQL database.

Username - Enter the username for the MySQL database.

Password - Enter the password you set for the MySQL database.

Database Host - Write the hostname, by default it is localhost.

Table Prefix - Used to add a prefix in the database tables, which helps to run multiple sites on the same database. It takes the default value. After filling in all the information, click on the Submit button. Step 5 − WordPress checks the database settings and gives a confirmation screen as shown in the snapshot below. Click RUN the install

Step 6 − Enter the administrative information. Site Title − Enter the name of the website you want to create in WordPress. Username − Enter a username of your choice when logging into WordPress. Password twice - Enter a password twice to secure your website. Your E-mail - Enter your email address to help with password recovery or any updates. Privacy - Allow search engines to index this site when this checkbox is selected. After filling in all the information, click on the Install WordPress button.

[webauthoringbloglinlinsun]

WordPress

We Learned Something New This Week - WordPress

Advantages of Choosing WordPress

Free The WordPress CMS is open source, which means it is free for users to use freely. Although the CMS is free, it does not provide free web hosting or domain registration, so users still need to purchase these things to run the website, luckily we can use domain registration from Griffith college. Many website owners want more functionality from the most basic version of a CMS, often requiring the purchase of a paid plugin. I've heard from people around me that the amount of functionality you get for free from WordPress is small, even if you pay for it.

Suitable for beginners. The interface is intuitive. Users don't have to use the page's code directly to make updates. When you want to add new features and functionality to your website, finding and adding the right WordPress plugins is easy, and most are designed to be easy for beginners to use. When using WordPress, users can copy and paste content from Word while maintaining its integrity, which adds to the convenience of everyday use.

Provide many resources and support. This large user community offers a wealth of resources to help users learn how to get the most out of WordPress. WordPress offers an educational library to help users learn the basics, but the WordPress community goes far beyond that in providing supplemental resources. There are also massive support forums where users can search for all the questions people have had in the past about using WordPress.

[webauthoringbloglinlinsun]

What is WordPress?

Learned from the classroom, WordPress is a popular content management system built using PHP and MySQL, WordPress is a blogging platform developed using the PHP language, originally related to blogging, and now used for news sites, e-commerce sites, forums, galleries, commercial websites, etc. Users can build their own websites on servers that support PHP and MySQL databases. WordPress can also be used as a content management system (CMS). WordPress is a free and open source project licensed under the GNU General Public License. WordPress 4.1 was released on 23/12/2014, codenamed "Dinah". WordPress is considered the official successor to b2/cafelog, the blogging platform developed by Michel Valdrighi. The name "WordPress" was the brainchild of Christine Selleck, a friend of lead developer Matt Mullenweg. WordPress has powerful functions, numerous plug-ins, and easy to expand functions. It is very convenient to install and use. WordPress is a personal blogging system and gradually evolved into a content management system software. It is developed using PHP language and MySQL database. Users can use their own blogs on servers that support PHP and MySQL databases. WordPress has many free templates developed by third parties, and the installation method is simple and easy to use. But making your own templates requires some expertise. For example, you need to know at least the HTML code, CSS, PHP, etc. of an application under the Standard Common Markup Language. The point is that WordPress officially supports the Chinese version, and there are also third-party Chinese language packs developed by enthusiasts, such as the wopus Chinese language pack. WordPress has thousands of various plugins and countless theme template styles.

[webauthoringbloglinlinsun]

PyGame

Video games are something that many people love and even obsess over. There are many people around me who play games every day, including myself. Sometimes I also like to play games. Especially for programmers, developing games is the first motivation for many people to learn programming.

Game development is also a great way to learn programming. Various additions and changes to the code will have instant visual feedback, making your learning process less boring. However, there is a certain difference between game development and the program development model encountered by general programming beginners, and it may be very uncomfortable to get started. I found that most of the game development tutorials on the Internet start with the development details of a certain language or engine, without a general introduction. The principle of video games is actually the same as that of movies. They all use people's "persistence of vision" and "emergence of movement" to make the originally discrete still images look like continuous dynamic effects. The games we usually play are actually played one after another in a row. Playing speed, we often get stuck when playing games. At this time, we will hear from our friends what your frame rate is. At this time, your computer configuration cannot keep up with the requirements of the game, and the running frame rate is very low.

For games, there needs to be an uninterrupted execution loop that continuously generates images and displays them on the screen. In pyGame, you can clearly see "while true"/"while running", all kinds of reading and writing, calculation, processing, rendering in the main loop… constitute each frame of the game. Taking frequency as an example, what does the game need to process in one frame? I searched the web for some answers:

User input: keyboard keys, mouse clicks and movements, speech, etc.

2. Collision detection: collide with characters, pick up items, etc.

3. Behaviour of computer characters (NPCs).

4. Update the data to determine the score and victory of the game.

5. Environmental effects such as character movements, explosion effects, trees and water surfaces.

6. Render scene pictures, including lighting effects, etc. This series of actions requires a lot of CPU and GPU calculations. The speed of calculation determines the time-consuming of one frame of the game. Usually the most time-consuming operations are real-time animation calculations and lighting rendering. So when playing games, you can improve it by reducing the picture effect and so on Just like when I was in university in China, I also majored in design. The school recommends that students buy laptops with large memory and better graphics cards, so that they can run photoshop and other large design software at the same time.

[webauthoringbloglinlinsun]

Web design

Web UI design (Web UI design, WUI design, WUI) is to plan the functions of the website according to the information (including products, services, ideas, and culture) that the enterprise wants to convey to the viewers, and then to beautify the page design. Exquisite web pages are one of the external publicity materials of enterprises, and their design is very important to enhance the Internet brand image of enterprises.

Web design generally falls into three categories: functional web design, graphic web design, and informational web design. The purpose of designing web pages is different, and different web page planning and design schemes should be selected.

A website is composed of several web pages, and a web page is the interface for users to access the website.

Personally, what attracts me to a good website page is the layout first, and then the color. Web design, as a visual language, pays special attention to layout and typography. Layout design expresses harmony and beauty through the spatial combination of words and graphics. Color is one of the elements of artistic expression. In web design, designers combine and match different colors according to the principles of harmony, balance, and emphasis to form exquisite web pages. According to the influence of color on human psychology, use it reasonably.

In addition to layout and color, form content, three-dimensional space composition, virtual reality, multimedia, ease of use, clear positioning, etc. are also particularly important. The main thing to pay attention to is the comfort level of the customers while browsing the web.

My current progress is to learn the basic use of Flexbox and Grid, and solve the coordination problem when zooming the screen. I didn't expect to be able to do this step as I wished, and I am very happy. Learning to use HTML and CSS is only the most basic part of developing a website, we need to work harder.

[webauthoringbloglinlinsun]

VR

Recently, I found that VR equipment and its application scenarios are getting closer and closer to our lives. This year, I also bought VR equipment. If we add other auxiliary equipment, we can also enter the world of the metaverse and do In addition to almost anything that can be done in the real world, VR can also be used for live broadcasts, film and television, advertising, social networking and other fields.

What is a VR? Virtual reality, also known as virtual environment, was proposed by Jaron Lanier, the founder of the American VPL company, in the early 1980s. This kind of virtual world uses computer simulation to generate a virtual world of three-dimensional space, providing users with the simulation of vision and other senses, making people feel as if they are in the real world, and can observe things in three-dimensional space instantly and without restrictions. wow, you might be surprised, and so did I. It turns out that virtual reality has been proposed in the 1980s in the last word. But the conditions at the time were limited, and you had no way to imagine how dizzying the experience would be if the screen resolution was not good and the viewing angle could not be 360 ​​degrees or even less than 100 degrees.

Nowadays, when I move the position in the game, I can't feel that the virtual environment is fake at all. The computer can immediately perform complex calculations and transmit the accurate three-dimensional world image back to produce a sense of presence. The swing of your head action corresponds to a different picture. For example, if you turn your head to the left, the picture will be displayed to the left immediately. In VR, you can experience perspectives and experiences other than people. For example, you may be a bird, then the angle of the sky you see is different from that of people. You can be a fish and see every corner of the ocean floor.

The picture is holographic and three-dimensional, which is completely different from the two-dimensional plane and 3D display. You can simply understand it as "holographic". The technology integrates the latest development achievements of computer graphics, computer simulation, artificial intelligence, sensing, display and network parallel processing technology, and is a high-tech simulation system assisted by computer technology. You can imagine everyone being amazed by this technology when they put on VR glasses for the first time. Of course, it's not just what you see. When you wear a Bluetooth handle or bracelet, you wave your hand, and the corresponding VR helmet will also sense the corresponding action.

[webauthoringbloglinlinsun]

FlexBox

This week we learned about FlexBox. FlexBox ("flexible layout") is a set of properties provided by CSS for layout. This set of properties includes a set of properties for the container (flex container) and for its direct children (flex item, flex item). Two types of properties. FlexBox can control the following aspects of flex items:

Size: Based on the content and available space

Flow direction: horizontal or vertical, forward or reverse

Alignment and distribution of the two axes

Order, which can override the order in the source code

By default, a flex container has two axes: the main axis and the cross axis. Flex items are arranged along the main axis by default. FlexBox layouts largely solve inline blocks, floats (haven't learned yet), and various problems and drawbacks of table layouts. Today, with the improvement of Flex layout compatibility in various browsers, it should be the mainstream layout scheme for both PC and mobile pages.

Flex-direction This property specifies the direction in which the main axis runs, i.e. in which direction the flexbox child axes are located. By default, this is set to row, which causes them to line up in the direction the browser's default language works - left to right. If we change the flex-direction to column, our items are now shown in the image below.

Flex-Wrap The problem occurs when you have a fixed width or height in the layout, the flex-box "child" overflows the container, breaking the layout. At this time, use flex-wrap to control, so that the "child" adjusts with the size of the page.

Flex-Flow

flex-direction and flex-wrap exist in a simplified form: flex-flow. For example, you could write flex-direction: row; flex-wrap: wrap; or flex-flow: row wrap;

[webauthoringbloglinlinsun]

Microsoft MakeCode-Minecraft

Microsoft MakeCode: Free Minecraft Programming Learning Tool： I found out that a lot of kids are editing their own code in Minecraft, I found it funny and looked it up online. Microsoft's MakeCode provides children of different levels with programming tools and learning tutorials based on interesting projects, block editors and text editors, step-by-step instructions, etc., suitable for children's programming learning in various ways. The feature of MakeCode is to combine other games, toys or development tools to realize programming learning. The connected tools include a micro: bit, Minecraft, LEGO Education EV3, Cue, Grove Zero, etc.

https://makecode.microbit.org/68118-14844-59304-39067 micro: bit The Micro: bit is a small programmable computer with an LED screen, two buttons, a light sensor, Bluetooth antenna, an accelerometer, a compass, and more.

Minecraft Minecraft is a place-and-break block game where players can create everything with their imagination and is one of the most popular games among children today. LEGO MINDSTORMS Education EV3 LEGO EV3 is equipped with different programmable sensors and motors, so students can build a variety of robots to navigate mazes, arrange colours, or act as musical instruments!

MakeCode provides a code editor, and younger children can use this programming interface; it also supports text editing, so that you can write programming languages ​​like real programmers. It is recommended that you are over 12 years old or a programming beginner, and have a certain computer use Experienced people learn with this interface. MakeCode provides an interactive simulator required for programming learning, providing instant feedback on program operation, and making code testing and debugging easy. Today's education uses children's interests to learn so that children can learn without pressure. Contacting the weightlifting of programming let me think that learning programming is a good skill,

[webauthoringbloglinlinsun]

If you want to be an advanced hacker, you must first be a good programmer

The term "hacker" was first used to refer to people who researched how to hack phone systems, also known as "phreaks." In terms of computer software, a "hacker" is a group of people who are particularly interested in and have an in-depth understanding of the inner workings of computers and computer networks.

From childhood to adulthood, the word hacker is most exposed in the scene in the movie "computer was hacked". When it comes to hackers, the first thing that comes to mind in many people's minds is "computer crime" and "virus". But in life, sometimes we see the word "hacker" in the news on our phones. When researching it, I found that many hackers don't do bad things. There are also three types of hackers, namely white hats, black hats and grey hats.

"Hacker" generally refers to someone who has a high level of understanding of design, programming, and computer science, who can create helpful software without thinking too long, who loves and enjoys programming and who becomes better and better at programming. Everyone has a heart that likes challenges.

No matter which country you are in, learning code is conducted in English, 70% of the world's websites are in English, and many resources are written in English, so learning code editing in English is also one of the foundations. Operating system/network, highly skilled in programming languages, must be proficient in low-level languages ​​such as assembly language, C, Python, Ruby, and databases.

When I see the word "hacker", I feel that these people are very good, and can use code perfectly to accomplish many things, and it is a profession that I will never touch because they are so professional.

[webauthoringbloglinlinsun]

Differences between HTML and CSS

Web authoring is the process of using HTML, CSS, JavaScript, and various derived technologies, frameworks, and creating front-end interfaces to present to users. After class this week, we started to learn a new module - CSS. When I hear the word CSS, the first impression is hard. The research concluded that:

HTML is a static web page, the document itself has only the page structure and can display the page content. The hallmark of HTML is that it is one of the easiest languages ​​to design and code websites, and the language is not case-sensitive. Example: Both and are acceptable, HTML is not specific to any operating system like Android or iOS in order for the language to be usable on any platform; instead, HTML runs on almost all operating systems.

(https://medium.com/@ankurdhamija83/understanding-the-concept-of-css-web-development-basics-bc7e864b864f)

CSS is a cascading style sheet. By setting the corresponding style attributes, you can modify the display, position and other styles of each element in the HTML document; such as modifying the colour, font, font size, width, height, position, background, etc. CSS is essential to website design because it helps separate design from content. This helps improve readability, programming flexibility, and accessibility.

Important！

When we finish editing the HTML file, we need to link the CSS file externally to help the HTML do other work. At this time, we must remember to add the <link> element to the HTML: <link rel="stylesheet" href="style.css">, which links to a file called "style.css" in the same folder as the HTML file. The <link> tag is placed inside the <head> element.

[webauthoringbloglinlinsun]

What is a Web Page?

Web pages are actually files placed on a server. When we browse the web, this file will be downloaded to our local computer, and then parsed by the browser, presenting various beautiful interfaces, such as tables, pictures, titles, lists, etc. The core elements of a web page are text files written in hypertext markup language that describe the content of the web page and include references to other web resources. A web page is a structured document consisting mainly of hypertext, text with hyperlinks. Hyperlinks point users to other web resources, mainly other web pages, and to different parts of the same web page.

We can open the web file and view all its contents using a text editor such as Notepad, Atom, Sublime Text, etc. as follows:

This is the HTML code, we can see a lot of special tags surrounded by <>, called HTML tags, the browser renders various interfaces and effects by recognizing these HTML tags.

Each HTML tag has a different meaning, for example:

<html> can be thought of as a shell.

<head> is used to set some web page parameters.

<title> is used to set the title of the current web page, which will be displayed in the title bar of the browser.

<body> represents the body content of the web page.

<p> is used to denote a paragraph.

<a> is used to represent a hyperlink, which can jump to other web pages after the mouse clicks.

<ul> is used to represent a list, where each <li> is a sub-tag representing a list item.