tmaclucien

[tmaclucien]

Hi folks,

Today, I am gonna share some mistakes when I did the Responsive-CSS Worksheet. The biggest problem I met is the “header” area when I shrank the width of the web page. 

When I narrow down the page below 690px, the outline codes are shown below::

@media only screen and (max-width: 690px){

       #masthead nav ul{               display: flex;              flex-direction: column;              }

      #masthead nav li{              border-bottom: 1px solid #FFFFFF;             padding: 10px;             }

      #masthead {               text-align: center;           }

If I use flexbox, flex-direction, and border properties, I find two problems:

1. The border cannot stretch to the whole page side;

2. There is one more border below the Contact link;

like this:

To fix the first problem, we need to add padding in the header:

#masthead {              text-align: center;

            padding: 0;          }

To fix the second big problem, we need to change the flexbox to the grid.

           #masthead nav ul{                display: grid;                grid-template-columns: 1fr;               grid-gap: 1px;          }

             #masthead nav{             background-color: white;            padding-bottom:5px;           }

           #masthead ul li{               padding: 12px;               background-color: #444554;  

          }

In other words, I did not use border properties. Actually, I set the background color in the navigation area as white, which could be viewed as borders by using the grid-gap property. Meanwhile, I also need to set the background color in the link blocks of grey to create the white borders.

[tmaclucien]

Recently, we are going to discover a new web area: server-side web development. It reminds me of my elective course: server-side web development and database, which was a nightmare for me last semester. Because I did not know any computer languages before and it was really difficult for a web starter who started learning the server-side language firstly.

Basically, the computer languages used in clientside are HTML/CSS/JavaScript.

While PHP/ Python/ Java are the normal server-side scripting languages. But PHP is the most popular one, which I learned last semester. And I also use MySQL, which is a popular open-source relational database management system.

In MySQL, you can use SQL language to insert information to the tables you have created. And then use PHP language to create home page, login page...

But how PHP and MySQL work?

For example, if users click the login button, his username will be transferred into the server and the server will check the database if there is a same name. If yes, then check the password again. If the username and passport are correct, users then are allowed to access to the main page. If not, the login page will remind users that the usernames do not exist. 

And the following is my login page from last semester.

<?php  session_start(); // If user click login button, those information from html form will be assigned to variables//   if (isset($_POST['login'])) {    include_once("connect.php");

   $username = strip_tags($_POST['username']);    $password = strip_tags($_POST['password']);

   $username = stripslashes($username);    $password = stripslashes($password);

   $username = mysqli_real_escape_string($db, $username);    $password = mysqli_real_escape_string($db, $password);

   $password = md5($password);

//Draw all data from table "Blogging" if the username wrote by user is the same with database and assign them to a variable//    $sql = "SELECT * FROM user WHERE username = '$username' LIMIT 1";    $query = mysqli_query($db, $sql);    $row = mysqli_fetch_array($query);    $ID = $row['ID'];    $db_password = $row['password'];    $admin= $row['admin']; // If user type the right login information, they can access to home page, otherwise there will be a warning to inform user that they type the incorrect information//    if ($password == $db_password) {       $_SESSION['username'] = $username;       $_SESSION['ID'] = $ID;       if ($admin == 1) {       $_SESSION['admin'] = 1;       }       header("Location: index.php");    }  else {         echo "You didn't enter the correct detalis!";       }

 }

?>

<!DOCTYPE html> <html> <head> <title>Login</title> </head> <body background="bg.jpg"> <link rel="stylesheet" type="text/css"href="style.css">

<div class='Loginbox'> <div align="center">

<!-- The Title of Login Page --> <h1>Hello Griffith</h1> </div>

<div align="center"> <br>     <form action="login.php" method="post" enctype="multipart/form-data">      Username: <input type="text"  name="username" autofocus/>      <br><br>      Password: <input type="password"  name="password" />      <br><br>      <input type="submit" name="login" value="Login" />      <br>      <?php      echo "No Accounts? <a href = 'register.php'>Register</a>";      ?> </form> </div> </div>

</body> </html>

[tmaclucien]

Hi everyone,

This video basically addresses my confusion about the difference between Grid and Flexbox. Hopefully, it also will be useful for you.

.Additionally, I also learned some new things from this video:

1. .class > div: nth-child(odd){

background-color: #827F7F;

}

This will set other divs with the different shade of grey, which will help divide the content area,

2. align-self: start/ center/ end/ stretch.

Basically, align-self is basically used to adjust a specific grid and the default value of align-self is stretch, which will make the sidebar area stretch through the whole content area. 

However, I fix the width of the sidebar with start value, which will depend on the content length.

3. justify-items/align-items: start/center/end/stretch..

These two properties are both used to adjust the position of all grids. justify-items is basically used to adjust the horizontal positions and align-items is used to adjust the vertical positions.

[tmaclucien]

Recently, I studied a new CSS element called Grid, but I am actually confused between Flexbox and Grid, which could be both regarded as a method to design the website layout. I guess Grid element may be more useful and advanced than Flexbox? Cause from the picture above, we could see that Flexbox is a one-dimensional element that could arrange either a single row or a single column , but Grid is a two-dimensional element that could arrange multiple rows and columns.

So I guess, we normally create a container applied with the Grid element to design the whole website layout (header, main body, sidebar, footer, etc). And when we need to design a specific area (eg, sidebar),  we could use the Flexbox element.

[tmaclucien]

  Are your website or mobile application ready for the foldable-screen phone?

Recently, Huawei’s latest foldable mobile phone: Mate X is becoming the focus in the global market in 2019, indicating the coming era of mobile folding. And as a web designer, it reminds me of a question, which is how could I make my website looks the same in different states. Because the outline of the site may change when users fold their phones.

The biggest design difference between Mate X and the previous smartphone is that it has two separated screens: a 6.6-inches main screen with the 2480*1148 pixel resolution, which people will use most often, and a 6.38-inches rear screen with the 2480*892 pixel resolution. That means when unfolding the device, people will get an 8-inches OLED tablet screen with the 2480*2200 pixel resolution. No boundaries screen design or edge-to-edge design will give users a wider view, enhancing the experience in browsing news, handling files, playing games or watching videos.

According to the official introduction, split screen mode can achieve multitask goals. For example, users can drag an image to their email or write a memo while searching on the browser. That means it will help users dramatically improve their working efficiency.

However, all these features may create a huge challenge for web designers. As a web designer, you should ensure that your website mobile experience can optimize the foldable screen. Because a foldable phone may have 4 possible view experience:  the regular screen in portrait and landscape, and the foldable screen in portrait and landscape. The biggest challenge is you need to ensure the website should look good in all resolutions (see https://webbuildersgroup.com/blog/is-your-website-ready-for-foldable-phones/).

And except for web designers, it is also a big challenge for mobile application designers as well. Because if they do not support different screen sizes, such apps risk will become the also-rans when these devices are in ‘tablet’ mode, overtaken by optimized competitors (see https://insights.dice.com/2019/01/17/folding-smartphone-developers/ ).

But could these questions be solved by HTML/CSS/JavaScript? I do not know， but I believe that must be an interesting challenge for designers!!

[tmaclucien]

Keeping running could help me forget loneliness and homesick.

Always tell myself do not forget to enjoy loneliness and enjoy life!

So, Happy Halloween day!

[tmaclucien]

Food Delivery in China - Life Just Got Easier // This is China

Hi guys, This video is mainly about the food delivery experience shared by a foreigner living in China who used the biggest delivery app “Meituan”. And from this video, we see that customers could not only order hot dishes or fast food from restaurants on this app, but also they can order commodities from supermarkets or groceries, such as vegetables, fruits and drinks. And when you finish your order, there will be 3 ways to pay for them. One way is using the bank card, which is similar to the “JustEat”. And the other two ways are automatically connected with “Ali Pay” and “Wechat Pay” applications. But most Chinese people prefer using the latter two ways, because it’s extremely convenient.

And I will also put a link below about an Irish guy’s ordering experience who lives in China as well.

https://www.youtube.com/watch?v=f0oxoqKOk1I

[tmaclucien]

Hi guys,

Today, I’m gonna talk about the development of mobile apps in China.

Actually, the first image that the development of Chinese mobile apps given to the world has always been imitating the world’s mobile apps, such as Facebook, Twitter, etc. When I mentioned Wechat to my foreigner classmates, they normally said:” Is that Chinese version of Facebook?” And one of my classmates from Turkey said to me” Chinese people always know plagiarism, lack of innovations”.

“What the fuck”...

However, I really wanna say that the rapid development of digital media technologies has been driving disruptive innovation progress in the Chinese market, emerging many Chinese original mobile applications.

For example, Wechat is actually a kind of all-in-one messaging app, which also provides games, online shopping, and financial services. Users can get almost everything they need in their daily life. More specifically, Chinese people could use Wechat code scanning payment for most business or entertainment activities. That means you can pay for transportation or off-line shopping with Wechat. And you can also pay for the water and electronic bills. All of them lead to its classification as a “Super App”. To some extent, Wechat offers far more than any of the western messaging apps. And the most creative function is the Wechat mini-programs which contain ten million third-party apps, where you can play games, do personal business and etc.

Another example I would like to mention is TikTok, which is famous as “DouYin” in China. TikTok is a kind of short-video platform, which has been making some huge waves in 2018. It should be noted that TikTok is one of the first Chinese social media apps to obtain popularity abroad. It attracts users to create their own personal videos on the platform and it provides a platform for those creative users to show their talent and then get a lot of fans.

Generally speaking, Chinese social media technologies are gradually leading the innovations from the perspective of the world, not plagiarism anymore!!

[tmaclucien]

This graphic image I took from the web is a kind of typography design. Personally, I really like this kind of simplicity image, only composed of simple words. Because a good graphic image with little words could even convey much information and also could leave a deep impression.  “SAY”& ”YES” are well aligned and the grey color creates a nice Contrast and Hierarchy as well.

Importantly, even though these are completely two words, it also creates Similarity by placing the words upside down.

[tmaclucien]

                       “Phone Call” VS “JustEat”?

                                                    or

  “Traditional Media Tech” VS “New Media Tech”?

Before starting my discussion, I wanna tell u the reason why I’d like to talk about this topic.  Actually, I was inspired by my working experience this Friday when something bad happened. This was really a black Friday for me. Cuz I am working in HX46 Cafe in Harold’s Cross road and it serves with not only coffee but also hot dishes, which means I need to take orders from Just Eat. And that day, a new delivery staff in my cafe shop made so many mistakes when he was delivering food. Because he was not familiar with the address and made the wrong deliveries.  The only way he could check the address is the sticky notes stapled on the bag, which printed from the Just Eat machine. And when he didn’t know where the address was, he needed to check in Google map and it was a kind of wasting time. And sometimes he cannot find the specific address on Google map. Hence, He got big trouble on this Friday. And many customers called in the restaurant complaining to me, like “Where is my food? It’s over one hour! How long it will be? And I’m really disappointed!!”.

By the way, I was confused at that time. Cuz, I didn’t know why they didn’t call the delivery staff directly to know where are their food. Maybe they cannot see drivers' phone numbers on the app? privacy?

And another thing amazing me is that most of the deliveries are from telephone bookings, rather than JustEat service in this high-tech based environment. Many people prefer to call in to choose their food in Ireland. I need to record their address, names and phone numbers on the computer. However, phone calls are completely replaced by mobile apps, especially in food delivery services in China. In other words, these new digital technologies are threatening the long-term survival of traditional media technologies, with all at the touch of screens or buttons.   

Whatever, It also reminded me of another deliver food app “MeiTuan” from China. Maybe so many people from western hold a view that there are lots of mobile apps in China imitating or copying from western countries, such as WeChat(Facebook/Whatsapp) and even MeiTuan (Just Eat/Uber Eat). However, I would like to say China is approaching or even going ahead western countries in the field of digital media such as mobile app design. Take “MeiTTuan” as an example, as a delivery staff, u could accurately position the customers. But the most important digital design is that customers and delivery staff will get a real-time view of the distance between them and arriving time on the app. If they find delivery staffs got the wrong direction, they could call them on the app in advance.

When u have no idea about what u are going to eat and would like to review some comments from others, u only can see the words from customers on the JustEat app, but no pictures. However, pictures are actually more powerful than words. You can see not only comments but also cuisine pictures on the MeiTuan app, which will help people make decisions. 

In one word, I prefer the convenience of modern digital media technologies rather than traditional ones. 

[tmaclucien]

Hi there,

Today I’m gonna tell u guys about the Semantic Elements in HTML. Those elements include: Header/Nav/Section/Article/Aside/Footer. 

A semantic element actually is a kind of element with a specific meaning, which is clearly described to the web browser and also the developer. 

For example, the <header> element represents a container for introductory content or navigational aids. We can have several <header> elements in one document (eg. index.html). But <header> always go inside the body element, not inside the head element. The following worksheet example defines headers for articles:

The <nav> elements represent a set of navigation links. However, it should be noted that not all of links must be inside the <nav> element. Actually, it is a kind of major navigation block, such as the main menu or a table of contents.

The <section> element usually has its own heading. It should be noted that a home page could have several <section> for its introduction, content or contact info.

And the <article> element is a container for any sections of a page. It should be noted that <article> could have <header>, which is shown above. But <header> cannot have <article>. The <article> element could be used as forum post/ blog post/newspaper article, etc.

The <aside> element represents the content related to the main content of the page. It also could be called “sidebar”. 

The <footer> element is particularly used to contain info, such as the author, copyright, contact information, etc. It usually lies at the bottom of a page or a section.

[tmaclucien]

https://youtu.be/W4xDenSvJYs. This is a link to see the video of the 70th anniversary.of the founding of the People’s Republic of China.

Today is not only the national day in China but also a very important moment for all Chinese people who gather together at Tian’anmen Square in Beijing to celebrate the 70th anniversary of the founding of the People’s  Republic of China.

 President Xi Jinping who is also general secretary of the Communist Party of China Central Committee and Chairman of the Central Military Commission delivered a speech at a grand rally at Tian’anmen Square. 

He said,” Right at this moment, Chinese people of all ethnic groups and all the sons and daughters of the Chinese nation at home and abroad take pride in and give our best wishes to our great motherland with great joy.” 

As a Chinese, I am really proud of my motherland which is growing stronger over the past few decades. The founding of the People’s Republic of China completely changes the condition of being poor and week. And no force can shake the status of China, especially for those nations who are against China. Even the United States can never stop the Chinese people and nation from marching forward. For example, Huawei’s 5G plan will not be affected by the US ban and also others will definitely not be able to catch up with Huawei in 5G technologies for a few years. Even though the US does not stop interfering in Chinese domestic affairs, especially for Hong Kong issue, we always uphold the principles of “ one country, two systems”.

Over the past 30 years, Chinese people witnessed that we have made great achievements through concerted efforts and arduous struggle, which amaze the whole world. Not only for the remarkable economic growth but also for the military power, which is shown in the celebration of the 70th anniversary.

Importantly, I would like to say that I will remain true to our original aspiration and keep our mission firmly in mind and Happy national day. 

I heart China!!

[tmaclucien]

(通过 Robots, Artificial Life and Technology Imagined by the Ancients with Adrienne Mayor)

Hi there,

This blog “https://www.bridgingthegaps.ie” was created by Mr.Waseem Akhtar for those people who feel an urge to know more about curious things. Those original discussions among researchers and explorers will help you figure out answers for those existing questions and also will help you find a new direction and new questions.

From this website, I listened to the conversation between Mr.Waseem Akhtar and Ms.Adrienne Mayor who generally investigates natural knowledge contained in pre-scientific myths and traditions about the topic:” Robots, Artificial Life and Technology Imagined by the Ancients”.  Her latest book “ Gods and Robots” is mainly about how the ancients imagined robot and other forms of artificial life and even invented the real automatic machine in Greek, Roman, and China. And also reveal how some of today’s most advanced innovations in robots and AI were foreshadowed in ancient myth and how imagination drives the science.

For example, there is an ancient story mentioned in this podcast about how a father and his son escaped from a prison. They used their imagination to create a pair of wings, borrowing natural power just like a bird. Additionally, the self-driving car was imagined by Greece mythology and this ancient myth came true today.

In this conversation, Ms.Adrienne also explained some questions from Mr.Waseem Akhtar. Such as “ How to understand the term ’historian of human curiosity’?”. It is generally based on careful observation and speculation about puzzling. When ancient people came across something that was inexplicable in nature, they tried their best to come up with rational explanation through overlook.

By discovering questions and answers from this conversation, it also drives my curiosity. When reviewing those myths happened in the past, most of ancient imagination came true today. If AI(Artificial Intelligence) which is making great progress in recent years became more intelligent than human beings, would they replace us as what they did in the movie? And how to control AI that not to be used to harm or kill human beings as terminators? If they kill human beings, who should be responsible for? AI maker or AI?

Hopefully, this blog will drive your curiosity and if u are interested in this topic, I am expecting u to bring more questions and discover together!

[tmaclucien]

(通过 Robots, Artificial Life and Technology Imagined by the Ancients with Adrienne Mayor)

Hi there,

This blog “https://www.bridgingthegaps.ie” was created by Mr.Waseem Akhtar for those people who feel an urge to know more about curious things. Those original discussions among researchers and explorers will help you figure out answers for those existing questions and also will help you find a new direction and new questions.

From this website, I listened to the conversation between Mr.Waseem Akhtar and Ms.Adrienne Mayor who generally investigates natural knowledge contained in pre-scientific myths and traditions about the topic:” Robots, Artificial Life and Technology Imagined by the Ancients”.  Her latest book “ Gods and Robots” is mainly about how the ancients imagined robot and other forms of artificial life and even invented the real automatic machine in Greek, Roman, and China. And also reveal how some of today’s most advanced innovations in robots and AI were foreshadowed in ancient myth and how imagination drives the science.

For example, there is an ancient story mentioned in this podcast about how a father and his son escaped from a prison. They used their imagination to create a pair of wings, borrowing natural power just like a bird. Additionally, the self-driving car was imagined by Greece mythology and this ancient myth came true today.

In this conversation, Ms.Adrienne also explained some questions from Mr.Waseem Akhtar. Such as “ How to understand the term ’historian of human curiosity’?”. It is generally based on careful observation and speculation about puzzling. When ancient people came across something that was inexplicable in nature, they tried their best to come up with rational explanation through overlook.

By discovering questions and answers from this conversation, it also drives my curiosity. When reviewing those myths happened in the past, most of ancient imagination came true today. If AI(Artificial Intelligence) which is making great progress in recent years became more intelligent than human beings, would they replace us as what they did in the movie? And how to control AI that not to be used to harm or kill human beings as terminators? If they kill human beings, who should be responsible for? AI maker or AI?

Hopefully, this blog will drive your curiosity and if u are interested in this topic, I am expecting u to bring more questions and discover together!

[tmaclucien]

After finishing the first class of Web Authoring, I got a basic understanding of HTML. Several things are listed below.

The basic  construction of a HTML page is:

        <! DOCTYPE html>         <html>         <head>                  <title> </title>         </head>           <body>         </body>           </html>

It should be noted that 

(1) everything we want to put on the web page should be inside in <html></html>. (2)Those codes we put inside <head></head> is just only about the information of the web page, which means they are not going to be displayed on the page and we cannot see it. <3>If we want to make some comments to HTML codes, we can use:                               <!-- this is a comment--> <4> We often use “Tab” on the keyboards to separate words or make space between words. And also could use the space key. But whatever you use, and how much space you put between words, HTML just display one space between them. <5>Generally, we just have one h1 with more h2, h3... <6> <br> is a kind of void tag or could be called “self-closing” tag, which means they do not need to come with end tag “</br>” when you use <br>. And It should be noted that <br> is used to break line. <7>If you want to make words looks like Bold, we only could use the <strong> xxx </strong>. However, If we want to make words Italic, we can use both <em> xxx </em> and <i>xxx </i>.

<8> The <blockquote> element is used for longer quotes that take up a paragraph.

So, if u are beginners just like me, let’s discuss and make progress together !!

[tmaclucien]

Hi there,  my first blog is coming soon !!