document/TranslateProject
2
0
Fork 0
mirror of https://github.com/LCTT/TranslateProject.git synced 2025-03-21 02:10:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'LCTT/master'

Browse Source
This commit is contained in:
Xingyu.Wang 2018-11-29 21:39:11 +08:00
commit eeb2d77d87
6 changed files with 1030 additions and 691 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
published/20180409 5 steps to building a cloud that meets your users- needs.md Normal file
View File

@ -0,0 +1,101 @@
构建满足用户需求的云环境的五个步骤
======
> 在投入时间和资金开发你的云环境之前，确认什么是你的用户所需要的。
![](https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/rh_003601_05_mech_osyearbook2016_cloud_cc.png?itok=XSV7yR9e)
无论你如何定义，云就是你的用户展现其在组织中的价值的另一个工具。当谈论新的范例或者技术（云是两者兼有）的时候很容易被它的新特性所分心。由一系列无止境的问题引发的对话能够很快的被发展为功能愿景清单，所有下面的这些都是你可能已经考虑到的：
* 是公有云、私有云还是混合云？
* 会使用虚拟机还是容器，或者是两者？
* 会提供自助服务吗？
* 从开发到生产是完全自动的，还是它将需要手动操作？
* 我们能以多块的速度做到？
* 关于某某工具？
这样的清单还可以列举很多。
当开始 IT 现代化，或者数字转型，无论你是如何称呼的，通常方法是开始回答更高管理层的一些高层次问题，这种方法的结果是可以预想到的：失败。经过大范围的调研并且花费了数月的时间（如果不是几年的话）部署了这个最炫的新技术，而这个新的云技术却从未被使用过，而且陷入了荒废，直到它最终被丢弃或者遗忘在数据中心的一角和预算之中。
这是因为无论你交付的是什么工具，都不是用户所想要或者需要的。更加糟糕的是，它可能是一个单一的工具，而用户真正需要的是一系列工具 —— 能够随着时间推移，更换升级为更新的、更漂亮的工具，以更好地满足其需求。
### 专注于重要的事情
问题在于关注，传统上一直是关注于工具。但工具并不是要增加到组织价值中的东西；终端用户利用它做什么才是目的。你需要将你的注意力从创建云（例如技术和工具）转移到你的人员和用户身上。
事实上，除了使用工具的用户（而不是工具本身）是驱动价值的因素之外，聚焦注意力在用户身上也是有其它原因的。工具是给用户使用去解决他们的问题并允许他们创造价值的，所以这就导致了如果那些工具不能满足那些用户的需求，那么那些工具将不会被使用。如果你交付给你的用户的工具并不是他们喜欢的，他们将不会使用，这就是人类的人性行为。
数十年来，IT 产业只为用户提供一种解决方案，因为仅有一个或两个选择，用户是没有权力去改变的。现在情况已经不同了。我们现在生活在一个技术选择的世界中。不给用户一个选择的机会的情况将不会被接受的；他们在个人的科技生活中有选择，同时希望在工作中也有选择。现在的用户都是受过教育的并且知道将会有比你所提供的更好选择。
因此，在物理上的最安全的地点之外，没有能够阻止他们只做他们自己想要的东西的方法，我们称之为“影子 IT”。如果你的组织有如此严格的安全策略和承诺策略而不允许影子 IT，许多员工将会感到灰心丧气并且会离职去其他能提供更好机会的公司。
基于以上所有的原因，你必须牢记要首先和你的最终用户设计你的昂贵又费时的云项目。
### 创建满足用户需求的云五个步骤的过程
既然我们已经知道了为什么，接下来我们来讨论一下怎么做。你如何去为终端用户创建一个云？你怎样重新将你的注意力从技术转移到使用技术的用户身上？
根据以往的经验，我们知道最好的方法中包含两件重要的事情：从你的用户中得到及时的反馈，在创建中和用户进行更多的互动。
你的云环境将继续随着你的组织不断发展。下面的五个步骤将会帮助你创建满足用户需求的云环境。
#### 1、识别谁将是你的用户
在你开始询问用户问题之前，你首先必须识别谁将是你的新的云环境的用户。他们可能包括将在云上创建开发应用的开发者；也可能是运营、维护或者或者创建该云的运维团队；还可能是保护你的组织的安全团队。在第一次迭代时，将你的用户数量缩小至人数较少的小组防止你被大量的反馈所淹没，让你识别的每个小组指派两个代表（一个主要的一个辅助的）。这将使你的第一次交付在规模和时间上都很小。
#### 2、和你的用户面对面的交谈来收获有价值的输入。
获得反馈的最佳途径是和用户直接交谈。群发的邮件会自行挑选出受访者——如果你能收到回复的话。小组讨论会很有帮助的，但是当人们有个私密的、专注的对话者时，他们会比较的坦诚。
和你的第一批用户安排个面对面的个人的会谈，并且向他们询问以下的问题：
* 为了完成你的任务，你需要什么？
* 为了完成你的任务，你想要什么？
* 你现在最头疼的技术痛点是什么？
* 你现在最头疼的政策或者流程痛点是哪个？
* 关于解决你的需求、希望或痛点，你有什么建议？
这些问题只是指导性的，并不一定适合每个组织。你不应该只询问这些问题，他们应该导向更深层次的讨论。确保告诉用户他们任何所说的和被问的都被视作反馈，所有的反馈都是有帮助的，无论是消极的还是积极的。这些对话将会帮助你设置你的开发优先级。
收集这种个性化的反馈是保持初始用户群较小的另一个原因：这将会花费你大量的时间来和每个用户交流，但是我们已经发现这是相当值得付出的投入。
#### 3、设计并交付你的解决方案的第一个版本
一旦你收到初始用户的反馈，就是时候开始去设计并交付一部分的功能了。我们不推荐尝试一次性交付整个解决方案。设计和交付的时期要短；这可以避免你花费一年的时间去构建一个你*认为*正确的解决方案，而只会让你的用户拒绝它，因为对他们来说毫无用处。创建你的云所需要的工具取决于你的组织和它的特殊需求。只需确保你的解决方案是建立在用户的反馈的基础上的，你将功能小块化的交付并且要经常的去征求用户的反馈。
#### 4、询问用户对第一个版本的反馈
太棒了，现在你已经设计并向你的用户交付了你的炫酷的新的云环境的第一个版本！你并不是花费一整年去完成它而是将它处理成小的模块。为什么将其分为小的模块如此重要呢？因为你要回到你的用户组并且向他们收集关于你的设计和交付的功能。他们喜欢什么？不喜欢什么？你正确的处理了他们所关注的吗？是技术功能上很厉害，但系统进程或者策略方面仍然欠缺吗？
再重申一次，你要问的问题取决于你的组织；这里的关键是继续前一个阶段的讨论。毕竟你正在为用户创建云环境，所以确保它对用户来说是有用的并且能够有效利用每个人的时间。
#### 5、回到第一步。
这是一个迭代的过程。你的首次交付应该是快速而小规模的，而且以后的迭代也应该是这样的。不要期待仅仅按照这个流程完成了一次、两次甚至是三次就能完成。一旦你持续的迭代，你将会吸引更多的用户从而能够在这个过程中得到更好的回报。你将会从用户那里得到更多的支持。你能够迭代的更迅速并且更可靠。到最后，你将会通过改变你的流程来满足用户的需求。
用户是这个过程中最重要的一部分，但迭代是第二重要的因为它让你能够回到用户中进行持续沟通从而得到更多有用的信息。在每个阶段，记录哪些是有效的哪些没有起到应有的效果。要自省，要对自己诚实。我们所花费的时间提供了最有价值的了吗？如果不是，在下一个阶段尝试些不同的。在每次循环中不要花费太多时间的最重要的部分是，如果某部分在这次不起作用，你能够很容易的在下一次中调整它，直到你找到能够在你组织中起作用的方法。
### 这仅仅是开始
通过许多客户约见，从他们那里收集反馈，以及在这个领域的同行的经验，我们一次次的发现在创建云的时候最重要事就是和你的用户交谈。这似乎是很明显的，但很让人惊讶的是很多组织却偏离了这个方向去花费数月或者数年的时间去创建，然后最终发现它对终端用户甚至一点用处都没有。
现在你已经知道为什么你需要将你的注意力集中到终端用户身上并且在中心节点和用户一起的互动创建云。剩下的是我们所喜欢的部分，你自己去做的部分。
这篇文章是基于一篇作者在 [Red Hat Summit 2018][3] 上发表的文章“[为终端用户设计混合云，要么失败]”。
--------------------------------------------------------------------------------
via: https://opensource.com/article/18/4/5-steps-building-your-cloud-correctly
作者：[Cameron Wyatt][a], [Ian Teksbury][1]
选题：[lujun9972](https://github.com/lujun9972)
译者：[FelixYFZ](https://github.com/FelixYFZ)
校对：[wxy](https://github.com/wxy)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]:https://opensource.com/users/cameronmwyatt
[1]:https://opensource.com/users/itewk
[2]:https://agenda.summit.redhat.com/SessionDetail.aspx?id=154225
[3]:https://www.redhat.com/en/summit/2018

1
sources/talk/20180128 Getting Linux Jobs.md
View File

@ -1,3 +1,4 @@
translating by ryze-borgia
Getting Linux Jobs
======

559
sources/tech/20180131 For your first HTML code lets help Batman write a love letter.md
View File

@ -1,559 +0,0 @@
Translating by MjSeven
For your first HTML code, let’s help Batman write a love letter
============================================================
![](https://cdn-images-1.medium.com/max/1000/1*kZxbQJTdb4jn_frfqpRg9g.jpeg)
[Image Credit][1]
One fine night, your stomach refuses to digest the large Pizza you had at dinner, and you have to rush to the bathroom in the middle of your sleep.
In the bathroom, while wondering why this is happening to you, you hear a heavy voice from the vent: “Hey, I am Batman.”
What would you do?
Before you panic and stand up in middle of the critical process, Batman says, “I need your help. I am a super geek, but I don’t know HTML. I need to write my love letter in HTML — would you do it for me?”
Who could refuse a request from Batman, right? Let’s write Batman’s love letter in HTML.
### Your first HTML file
An HTML webpage is like other files on your computer. As a .doc file opens in MS Word, a .jpg file opens in Image Viewer, and a .html file opens in your Browser.
So, let’s create a .html file. You can do this in Notepad, or any other basic editor, but I would recommend using VS Code instead. [Download and install VS Code here][2]. It’s free, and the only Microsoft Product I love.
Create a directory in your system and name it “HTML Practice” (without quotes). Inside this directory, create one more directory called “Batman’s Love Letter” (without quotes). This will be our project root directory. That means that all our files related to this project will live here.
Open VS Code and press ctrl+n to create a new file and ctrl+s to save the file. Navigate to the “Batman’s Love Letter” folder and name the file “loveletter.html” and click save.
Now, if you open this file by double-clicking it from your file explorer, it will open in your default browser. I recommend using Firefox for web development, but Chrome is fine too.
Let’s relate this process to something we are already familiar with. Remember the first time you got your hands on a computer? The first thing I did was open MS Paint and draw something. You draw something in Paint and save it as an image and then you can view that image in Image Viewer. Then if you want to edit that image again, you re-open it in Paint, edit it, and save it.
Our current process is quite similar. As we use Paint to create and edit images, we use VS Code to create and edit our HTML files. And as we use Image Viewer to view the images, we use the Browser to view our HTML pages.
### Your first Paragraph in HTML
We have our blank HTML file, so here’s the first paragraph Batman wants to write in his love letter
“After all the battles we fought together, after all the difficult times we saw together, and after all the good and bad moments we’ve been through, I think it’s time I let you know how I feel about you.”
Copy the paragraph in your loveletter.html in VS Code. Enable word wrap by clicking View -> Toggle Word Wrap (alt+z).
Save and open the file in your browser. If it’s already open, click refresh on your browser.
Voila! That’s your first webpage!
Our first paragraph is ready, but this is not the recommended way of writing a paragraph in HTML. We have a specific way to let the browser know that a text is a paragraph.
If you wrap the text with `<p>` and `</p>`, then the browser will know that the text inside the `<p>` and `</p>` is a paragraph. Let’s do this:
```
<p>After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.</p>
```
By writing the paragraph inside `<p>` and `</p>` you created an HTML element. A web page is collection of HTML elements.
Let’s get some of the terminologies out of the way first: `<p>` is the opening tag, `</p>` is the closing tag, and “p” is the tag name. The text inside the opening and closing tag of an element is that element’s content.
### The “style” attribute
You will see that the text covers the entire width of the screen.
We don’t want that. No one want’s to read such long lines. Let’s give a width of, say, 550px to our paragraph.
We can do that by using the element’s “style” attribute. You can define an element’s style (for example, width in our case), inside its style attribute. The following line will create an empty style attribute on a “p” element:
```
<p style="">...</p>
```
You see that empty `""`? That’s where we will define the looks of the element. Right now we want to set the width to 550px. Let’s do that:
```
<p style="width:550px;">
After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
We set the “width” property to 550px separated by a colon “:” and ended by a semicolon “;”.
Also, notice how we put the `<p>` and `</p>` in separate lines and the text content indented with one tab. Styling your code like this makes it more readable.
### Lists in HTML
Next, Batman wants to list some of the virtues of the person that he admires, like this:
“ You complete my darkness with your light. I love:
- the way you see good in the worst things
- the way you handle emotionally difficult situations
- the way you look at Justice
I have learned a lot from you. You have occupied a special place in my heart over time.”
This looks simple.
Let’s go ahead and copy the required text below the `</p>:`
```
<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love:
- the way you see good in the worse
- the way you handle emotionally difficult situations
- the way you look at Justice
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
```
Save and refresh your browser.
![](https://cdn-images-1.medium.com/max/1000/1*M0Ae5ZpRTucNyucfaaz4uw.jpeg)
Woah! What happened here, where is our list?
If you look closely, you will observe that line breaks are not displayed. We wrote the list items in new lines in our code, but those are displayed in a single line in the browser.
If you want to insert a line break in HTML (newline) you have to mention it using `<br>`. Let’s use `<br>` and see how it looks:
```
<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love: <br>
- the way you see good in the worse <br>
- the way you handle emotionally difficult situations <br>
- the way you look at Justice <br>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
```
Save and refresh:
![](https://cdn-images-1.medium.com/max/1000/1*Mj4Sr_jUliidxFpEtu0pXw.jpeg)
Okay, now it looks the way we want it to.
Also, notice that we didn’t write a `</br>`. Some tags don’t need a closing tag, (and they’re called self-closing tags).
One more thing: we didn’t use a `<br>` between the two paragraphs, but still the second paragraph starts from a new line. That’s because the “p” element automatically inserts a line break.
We wrote our list using plain text, but there are two tags we can use for this same purpose: `<ul>` and `<li>`.
To get the naming out of the way: ul stands for Unordered List, and li stands for List Item. Let’s use these to display our list:
```
<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<p style="width:550px;">
You complete my darkness with your light. I love:
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
```
Before copying the code, notice the differences we made:
* We removed all the `<br>`, since each `<li>` automatically displays in new line
* We wrapped the individual list items between `<li>` and `</li>`.
* We wrapped the collection of all the list items between the `<ul>` and `</ul>`
* We didn’t define the width of the “ul” element as we were doing with the “p” element. This is because “ul” is a child of “p” and “p” is already constrained to 550px, so “ul” won’t go beyond that.
Let’s save the file and refresh the browser to see the results:
![](https://cdn-images-1.medium.com/max/1000/1*aPlMpYVZESPwgUO3Iv-qCA.jpeg)
You will instantly notice that we get bullet points displayed before each list item. We don’t need to write that “-” before each list item now.
On careful inspection, you will notice that the last line goes beyond 550px width. Why is that? Because a “ul” element is not allowed inside a “p” element in HTML. Let’s put the first and last lines in separate “p” elements:
```
<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<p style="width:550px;">
You complete my darkness with your light. I love:
</p>
```
```
<ul style="width:550px;">
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
```
```
<p style="width:550px;">
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
```
Save and reload.
Notice that this time we defined the width of the “ul” element also. That’s because we have now moved our “ul” element out of the “p” element.
Defining the width of all the elements of our letter can become cumbersome. We have a specific element for this purpose: the “div” element. A “div” element is a generic container which is used to group content so it can be easily styled.
Let’s wrap our entire letter with a div element and give width:550px to that div element:
```
<div style="width:550px;">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>
```
Great. Our code looks much cleaner now.
### Headings in HTML
Batman is quite happy looking at the results so far, and he wants a heading on the letter. He wants to make the heading: “Bat Letter”. Of course, you saw this name coming already, didn’t you? :D
You can add heading using ht, h2, h3, h4, h5, and h6 tags, h1 is the biggest and main heading and h6 the smallest one.
![](https://cdn-images-1.medium.com/max/1000/1*Ud-NzfT-SrMgur1WX4LCkQ.jpeg)
Let’s make the main heading using h1 and a subheading before second paragraph:
```
<div style="width:550px;">
<h1>Bat Letter</h1>
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>
```
Save, and reload.
![](https://cdn-images-1.medium.com/max/1000/1*rzyIl-gHug3nQChqfscU3w.jpeg)
### Images in HTML
Our letter is not complete yet, but before proceeding, one big thing is missing — a Bat logo. Have you ever seen anything Batman owns that doesn’t have a Bat logo?
Nope.
So, let’s add a Bat logo to our letter.
Including an image in HTML is like including an image in a Word file. In MS Word you go to menu -> insert -> image -> then navigate to the location of the image -> select the image -> click on insert.
In HTML, instead of clicking on the menu, we use `<img>` tag to let the browser know that we need to load an image. We write the location and name of the file inside the “src” attribute. If the image is in the project root directory, we can simply write the name of the image file in the src attribute.
Before we dive into coding this, download this Bat logo from [here][3]. You might want to crop the extra white space in the image. Copy the image in your project root directory and rename it “bat-logo.jpeg”.
```
<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>
```
We included the img tag on line 3\. This tag is also a self-closing tag, so we don’t need to write `</img>`. In the src attribute, we give the name of the image file. This name should be exactly same as your image’s name, including the extension (.jpeg) and its case.
Save and refresh to see the result.
![](https://cdn-images-1.medium.com/max/1000/1*uMNWAISOACJlzDOONcrGXw.jpeg)
Damn! What just happened?
When you include an image using the img tag, by default the image will be displayed in its original resolution. In our case, the image is much wider than 550px. Let’s define its width using the style attribute:
```
<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>
```
You will notice that this time we defined width with “%” instead of “px”. When we define a width in “%” it will occupy that % of the parent element’s width. So, 100% of 550px will give us 550px.
Save and refresh to see the results.
![](https://cdn-images-1.medium.com/max/1000/1*5c0ngx3BFVlyyP6UNtfYyg.jpeg)
Fantastic! This brings a timid smile to Batman’s face :)
### Bold and Italic in HTML
Now Batman wants to confess his love in the last few paragraphs. He has this text for you to write in HTML:
“I have a confession to make
It feels like my chest  _does_  have a heart. You make my heart beat. Your smile brings a smile to my face, your pain brings pain to my heart.
I don’t show my emotions, but I think this man behind the mask is falling for you.”
While reading this you ask Batman, “Wait, who is this for?” and Batman replies:
“It’s for Superman.”
![](https://cdn-images-1.medium.com/max/1000/1*UNDvfIZQJ1Q_goHc-F-IPA.jpeg)
You: Oh! I was going to guess Wonder Woman.
Batman: No, it’s Sups, please write “I love you Superman” at the end.
Fine, let’s do it then:
```
<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p>I love you Superman.</p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
```
The letter is almost done, and Batman wants just two more changes. Batman wants the word “does” in the first sentence of the confession paragraph to be italic, and the sentence “I love you Superman” to be in bold.
We use `<em>` and `<strong>` to display text in italic and bold. Let’s update these changes:
```
<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
```
![](https://cdn-images-1.medium.com/max/1000/1*6hZdQJglbHUcEEHzouk2eA.jpeg)
### Styling in HTML
There are three ways you can style or define the look of an HTML element:
* Inline styling: We write styles using “style” attribute of the elements. This is what we have done up until now. This is not a good practice.
* Embedded styling: We write all the styles within a “style” element wrapped by <style> and </style>.
* Linked stylesheet: We write styles of all the elements in a separate file with .css extension. This file is called Stylesheet.
Let’s have a look at how we defined the inline style of the “div” until now:
```
<div style="width:550px;">
```
We can write this same style inside `<style>` and `</style>` like this:
```
div{
width:550px;
}
```
In embedded styling, the styles we write are separate from the elements. So we need a way to relate the element and its style. The first word “div” does exactly that. It lets the browser know that whatever style is inside the curly braces `{…}` belongs to the “div” element. Since this phrase determines which element to apply the style to, it’s called a selector.
The way we write style remains same: property(width) and value(550px) separated by a colon(:) and ended by a semicolon(;).
Let’s remove inline style from our “div” and “img” element and write it inside the `<style>` element:
```
<style>
div{
width:550px;
}
img{
width:100%;
}
</style>
```
```
<div>
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
```
Save and refresh, and the result should remain the same.
There is one big problem though — what if there is more than one “div” and “img” element in our HTML file? The styles that we defined for div and img inside the “style” element will apply to every div and img on the page.
If you add another div in your code in the future, then that div will also become 550px wide. We don’t want that.
We want to apply our styles to the specific div and img that we are using right now. To do this, we need to give our div and img element unique ids. Here’s how you can give an id to an element using its “id” attribute:
```
<div id="letter-container">
```
and here’s how to use th

108
translated/talk/20180409 5 steps to building a cloud that meets your users- needs.md
View File

@ -1,108 +0,0 @@
构建满足客户需求的一套云环境的5个步骤
======
![](https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/rh_003601_05_mech_osyearbook2016_cloud_cc.png?itok=XSV7yR9e)
这篇文是和[Ian Teksbury][1]共同完成的。
无论你如何定义，云就是你的用户展现组织价值的另一个工具。当谈论新的范例或者技术的时候是很容易被，(云是两者兼有)它的新特性所分心。由一系列无止境的问题引发的对话能够很快的被发展为功能愿景清单，所有的这些都是你可能已经考虑到的。
* 是公有云，私有云还是混合云？
* 将会使用虚拟机还是容器，或者是两者？
* 将会提供自助服务吗？
* 将会完全自动的从开发转移到生产，还是它将需要手动操作？
* 我们能以多块的速度创建？
* 关于工具X,Y,还有Z？
这样的清单还可以列举很多。
开始现代化，或者数字转型，无论你是如何称呼的，通常方法是开始回答高级管理层的一些高层次问题，这种方法的结果是可以预想到的：失败。经过大范围的调研并且花费了数月的时间，如果不是几年，部署这个最炫的新技术，新的云技术从未被使用过而且陷入了荒废直到它最终被丢弃或者遗忘在数据中心的一角和预算中。
因为无论你交付的是什么工具都不是用户所想要或者需要的。更加糟糕的是，当用户真正需要的是一个单独的工具时，一系列其他的工具就会被用户抛弃因为新的,闪光的
升级的工具能够更好的满足他们的需求。
### 议题聚焦
问题是关注，传统一直是关注工具。但工具并不是要增加到组织价值中的东西；终端用户利用它做什么。你需要将你的注意力从创建云(列入技术和工具)转移到你的人员和用户身上。
事实上，使用工具的用户(而不是工具本身)是驱动价值的因素，聚焦注意力在用户身上也是由其他原因的。工具是给用户使用去解决他们的问题并允许他们创造价值的，
所有这就导致了如果那些工具不能满足那些用户的需求，那么那些工具将不会被使用。如果你交付给你的用户的工具并不是他们喜欢的，他们将不会使用，这就是人类的
人性行为。
数十年来，IT产业只为用户提供一种解决方案，因为仅有一个或两个选项，用户是没有权力去改变的。现在情况已经不同了。我们现在生活在一个技术选择的世界中。
不给用户一个选择的机会的情况将不会被接受的；他们在个人的科技生活中有选择，同时希望在工作中也有选择。现在的用户都是受过教育的并且知道将会有比你提供的机会更好的选择。
因此，在物理上的最安全的地点之外，没有能够阻止他们只做他们自己想要的东西的方法，我们称之为“影子IT。”如果你的组织由如此严格的安全策略和承诺策略，许多员工将会感到灰心丧气并且会离职去其他能提供更好机会的公司。
基于以上所有的原因，你必须牢记要首先和你的终端用户设计你的昂贵又费时的云项目。
### 创建满足用户需求的云五个步骤的过程
既然我们已经知道了为什么，接下来我们来讨论一下怎么做。你如何去为终端用户创建一个云？你怎样重新将你的注意力从技术转移到使用技术的用户身上？
根据以往的经验，我们知道最好的方法中包含两件重要的事情：从你的用户中得到及时的反馈，创建中和用户进行更多的互动。
你的云环境将继续随着你的组织不段发展。下面的五个步骤将会帮助你创建满足用户需求的云环境。
### 1\. 识别谁将是你的用户
在你开始询问用户问题之前，你首先必须识别谁将是你的新的云环境的用户。他们可能包括将在云上创建开发应用的开发者。也可能是运营，维护或者或者创建云的运维团队；还可能是保护组织的安全团队。在第一次迭代时，将你的用户数量缩小至人数较少的小组防止你被大量的反馈所淹没，让你识别的每个小组指派两个代表(一个主要的一个辅助的)。这将使你的第一次交付在大小和时间上都很小。
#### 2\. 和你的用户面对面的交谈来收获有价值的输入。
The best way to get users' feedback is through direct communication. Mass emails asking for input will self-select respondents—if you even get a response. Group discussions can be helpful, but people tend to be more candid when they have a private, attentive audience.
获得反馈的最佳途径是和用户直接交谈。如果你收到回复，大量的邮件要求你输入信息，你会选择自动回复。小组讨论会很有帮助的，但是当人们有私密的，吸引人注意的观众，他们会比较的坦诚。
和你的第一批用户安排面对面的个人的会谈并且向他们询问以下的问题：
* 为了完成你的任务，你需要什么？
* 为了完成你的任务，你想要什么？
* 你现在最头疼的技术点是什么？
* 你现在最头疼的政策或者程序是哪个？
* 为了满足你的需求你有什么想法，欲望还是疼痛？
这些问题只是指导性的并不一定适合每个组。你不应该只询问这些问题，他们应该导向更深层次的讨论。确保告诉用户任何所说的和被问的都会被反馈的。所有的反馈都是有帮助的，无论是消极的还是积极的。这些对话将会帮助你设置你的开发优先级。
收集这种个性化的反馈是保持初始用户群较小的另一个原因：将会花费你大量的时间来和每个用户交流，但是我们已经发现这是相当值得付出的投入。
#### 3\. 设计并交付你的解决方案的第一个版本
一旦你收到初始用户的反馈，就是时候开始去设计并交付一部分的功能了。我们不推荐尝试一次性交付整个解决方案。设计和交付的时期要短；这是为了避免犯一个需要你花费一年的时间去寻找解决方案的错误，只会让你的用户拒绝它，因为对他们来说毫无用处。创建你的云所需要的工具取决于你的组织和它的特殊需求。只需确保你的解决方案是建立在用户的反馈的基础上的，你将功能小块化的交付并且要经常的去征求用户的反馈。
#### 4\. 询问用户对第一个版本的反馈
太棒了，现在你已经设计并向你的用户交付了你的炫酷的新的云环境的第一个版本！你并不是花费一整年去完成它而是将它处理成小的模块。为什么将其分为小的模块如此重要呢？因为你要回归你的用户并且向他们收集关于你的设计和交付的功能。他们喜欢什么？不喜欢什么?你正确的处理了他们所关注的吗？是技术功能上很厉害，但系统进程或者策略方面仍然欠缺？
再重申一次，你要问的问题取决于你的组织；这里的关键是继续前一个阶段的讨论。毕竟你正在为用户创建云环境，所以确保它对用户来说是有用的并且能够有效利用每个人的时间。
#### 5\. 回到第一步。
这是一个互动的过程。你的第一次交付应该是快速而小规模的，而且以后的迭代也应该是这样的。不要期待仅仅按照这个流程完成了一次，两次即使是三次就能完成。
一旦你持续的迭代，你将会吸引更多的用户从而能够在这个过程中得到更好的回报。你将会从用户那里得到更多的支持。你能狗迭代的更迅速并且更可靠。到最后，你
将会通过改变你的进程来满足用户的需求。
用户是这个过程中最重要的一部分，但迭代是第二重要的因为它让你能够回到用户中进行持续沟通从而得到更多有用的信息。在每个阶段，记录那些是有效的哪些没有起到应有的效果。要自省，要对自己诚实。我们所花费的时间提供了最有价值的了吗？如果不是，在下一个阶段尝试些不同的。在每次循环中不要花费太多时间的重要部分是，如果某部分在这次不起作用，你能够很容易的在写一次中调整它，知道你找到能够在你组织中起作用的方法。
### 这仅仅是开始
通过许多客户的约定，从他们那里收集反馈，以及在这个领域的同行的经验，我们一次次的发现在你创建云的时候最重要事就是和你的用户交谈。这看起来是很明显的，
但很让人惊讶的是很多组织却偏离了这个方向去花费数月或者数年的时间去创建，然后最终发现它对终端用户甚至一点用处都没有。
现在你已经知道为什么你需要将你的注意力集中到终端用户身上并且在中心节点和用户有一个一起创建云的互动过程。剩下的是我们所喜欢的部分，你出去做的部分。
这篇文章是基于"[为终端用户设计混合云或者失败]，"一篇作者将在[Red Hat Summit 2018][3]上发表的文章，并且将于5月8日至10日在旧金山举行
[在5月7号前注册][3]将会节省US$500。在支付页面使用折扣码**OPEN18**将会享受到折扣。
--------------------------------------------------------------------------------
via: https://opensource.com/article/18/4/5-steps-building-your-cloud-correctly
作者：[Cameron Wyatt][a]
译者：[FelixYFZ](https://github.com/FelixYFZ)
校对：[校对者ID](https://github.com/校对者ID)
选题：[lujun9972](https://github.com/lujun9972)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]:https://opensource.com/users/cameronmwyatt
[1]:https://opensource.com/users/itewk
[2]:https://agenda.summit.redhat.com/SessionDetail.aspx?id=154225
[3]:https://www.redhat.com/en/summit/2018

905
translated/tech/20180131 For your first HTML code lets help Batman write a love letter.md Normal file
View File

@ -0,0 +1,905 @@
对于你的第一行 HTML 代码，让我们来帮助蝙蝠侠写一封情书
======
![](https://cdn-images-1.medium.com/max/1000/1*kZxbQJTdb4jn_frfqpRg9g.jpeg)
[Image Credit][1]
在一个美好的夜晚，你的肚子拒绝消化你在晚餐吃的大块披萨，所以你不得不在睡梦中冲进洗手间。
在浴室里，当你在思考为什么会发生这种情况时，你听到一个来自通风口的低沉声音：“嘿，我是蝙蝠侠。”
这时，你会怎么做呢？
在你恐慌并处于关键节点之前，蝙蝠侠说：“我需要你的帮助。我是一个超级极客，但我不懂 HTML。我需要用 HTML 写一封情书，你愿意帮助我吗？”
谁会拒绝蝙蝠侠的请求呢，对吧？所以让我们用 HTML 来写一封蝙蝠侠的情书。
### 你的第一个 HTML 文件
HTML 网页与你电脑上的其它文件一样。就同一个 .doc 文件以 MS Word 打开，.jpg 文件在图像查看器中打开一样，一个 .html 文件在浏览器中打开。
那么，让我们来创建一个 .html 文件。你可以在 Notepad 或其它任何编辑器中完成此任务，但我建议使用 VS Code。[在这里下载并安装 VS Code][2]。它是免费的，也是我唯一喜欢的微软产品。
在系统中创建一个目录，将其命名为 “HTML Practice”（不带引号）。在这个目录中，再创建一个名为 “Batman’s Love Letter”（不带引号）的目录，这将是我们的项目根目录。这意味着我们所有与这个项目相关的文件都会在这里。
打开 VS Code，按下 ctrl+n 创建一个新文件，按下 ctrl+s 保存文件。切换到 “Batman’s Love Letter” 文件夹并将其命名为 “loveletter.html”，然后单击保存。
现在，如果你在文件资源管理器中双击它，它将在你的默认浏览器中打开。我建议使用 Firefox 来进行 web 开发，但 Chrome 也可以。
让我们将这个过程与我们已经熟悉的东西联系起来。还记得你第一次拿到电脑吗？我做的第一件事是打开 MS Paint 并绘制一些东西。你在 Paint 中绘制一些东西并将其另存为图像，然后你可以在图像查看器中查看该图像。之后，如果要再次编辑该图像，你在 Paint 中重新打开它，编辑并保存它。
我们目前的流程非常相似。正如我们使用 Paint 创建和编辑图像一样，我们使用 VS Code 来创建和编辑 HTML 文件。就像我们使用图像查看器查看图像一样，我们使用浏览器来查看我们的 HTML 页面。
### HTML 中的段落
我们有一个空的 HTML 文件，以下是蝙蝠侠想在他的情书中写的第一段。
“After all the battles we fought together, after all the difficult times we saw together, and after all the good and bad moments we’ve been through, I think it’s time I let you know how I feel about you.”
复制这些到 VS Code 中的 loveletter.html。单击 View -> Toggle Word Wrap (alt+z) 自动换行。
保存并在浏览器中打开它。如果它已经打开，单击浏览器中的刷新按钮。
瞧！那是你的第一个网页！
我们的第一段已准备就绪，但这不是在 HTML 中编写段落的推荐方法。我们有一种特定的方法让浏览器知道一个文本是一个段落。
如果你用 `<p>` 和 `</p>` 来包裹文本，那么浏览器将识别 `<p>` 和 `</p>` 中的文本是一个段落。我们这样做：
```
<p>After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.</p>
```
通过在 `<p>` 和 `</p>`中编写段落，你创建了一个 HTML 元素。一个网页就是 HTML 元素的集合。
让我们首先来认识一些术语：`<p>` 是开始标签，`</p>` 是结束标签，“p” 是标签名称。元素开始和结束标签之间的文本是元素的内容。
### “style” 属性
在上面，你将看到文本覆盖屏幕的整个宽度。
我们不希望这样。没有人想要阅读这么长的行。让我们设定段落宽度为 550px。
我们可以通过使用元素的 “style” 属性来实现。你可以在其 style 属性中定义元素的样式（例如，在我们的示例中为宽度）。以下行将在 “p” 元素上创建一个空样式属性：
```
<p style="">...</p>
```
你看到那个空的 `""` 了吗？这就是我们定义元素外观的地方。现在我们要将宽度设置为 550px。我们这样做：
```
<p style="width:550px;">
After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
我们将 “width” 属性设置为 550px，用冒号 “:” 分隔，以分号 “;” 结束。
另外，注意我们如何将 `<p>` 和 `</p>` 放在单独的行中，文本内容用一个 tab 缩进。像这样设置代码使其更具可读性。
### HTML 中的列表
接下来，蝙蝠侠希望列出他所钦佩的人的一些优点，例如：
“ You complete my darkness with your light. I love:
- the way you see good in the worst things
- the way you handle emotionally difficult situations
- the way you look at Justice
I have learned a lot from you. You have occupied a special place in my heart over time.”
这看起来很简单。
让我们继续，在 `</p>:` 下面复制所需的文本：
```
<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love:
- the way you see good in the worse
- the way you handle emotionally difficult situations
- the way you look at Justice
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
```
保存并刷新浏览器。
![](https://cdn-images-1.medium.com/max/1000/1*M0Ae5ZpRTucNyucfaaz4uw.jpeg)
哇！这里发生了什么，我们的列表在哪里？
如果你仔细观察，你会发现没有显示换行符。在代码中我们在新的一行中编写列表项，但这些项在浏览器中显示在一行中。
如果你想在 HTML（新行）中插入换行符，你必须使用 `<br>`。让我们来使用 `<br>`，看看它长什么样：
```
<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love: <br>
- the way you see good in the worse <br>
- the way you handle emotionally difficult situations <br>
- the way you look at Justice <br>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
```
保存并刷新：
![](https://cdn-images-1.medium.com/max/1000/1*Mj4Sr_jUliidxFpEtu0pXw.jpeg)
好的，现在它看起来就像我们想要的那样！
另外，注意我们没有写一个 `</br>`。有些标签不需要结束标签（它们被称为自闭合标签）。
还有一件事：我们没有在两个段落之间使用 `<br>`，但第二个段落仍然是从一个新行开始，这是因为 “p” 元素会自动插入换行符。
我们使用纯文本编写列表，但是有两个标签可以供我们使用来达到相同的目的：`<ul>` and `<li>`。
为了得到命名（to 校正：这里不太理解）：ul 代表无序列表，li 代表列表项目。让我们使用它们来展示我们的列表：
```
<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<p style="width:550px;">
You complete my darkness with your light. I love:
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
```
在复制代码之前，注意差异部分：
* 我们删除了所有的 `<br>`，因为每个 `<li>` 会自动显示在新行中
* 我们将每个列表项包含在 `<li>` 和 `</li>` 之间
* 我们将所有列表项的集合包裹在 `<ul>` 和 `</ul>` 之间
* 我们没有像 “p” 元素那样定义 “ul” 元素的宽度。这是因为 “ul” 是 “p” 的子节点，“p” 已经被约束到 550px，所以 “ul” 不会超出这个范围。
让我们保存文件并刷新浏览器以查看结果：
![](https://cdn-images-1.medium.com/max/1000/1*aPlMpYVZESPwgUO3Iv-qCA.jpeg)
你会立即注意到在每个列表项之前显示了重点标志。我们现在不需要在每个列表项之前写 “-”。
经过仔细检查，你会注意到最后一行超出 550px 宽度。这是为什么？因为 HTML 不允许 “ul” 元素出现在 "p" 元素中。让我们将第一行和最后一行放在单独的 “p” 元素中：
```
<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<p style="width:550px;">
You complete my darkness with your light. I love:
</p>
```
```
<ul style="width:550px;">
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
```
```
<p style="width:550px;">
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
```
保存并刷新。
注意，这次我们还定义了 “ul” 元素的宽度。那是因为我们现在已经将 “ul” 元素放在了 “p” 元素之外。
定义情书中所有元素的宽度会变得很麻烦。我们有一个特定的元素用于此目的：“div” 元素。一个 “div” 元素就是一个通用容器，用于对内容进行分组，以便轻松设置样式。
让我们用 div 元素包装整个情书，并为其赋予宽度：550px
```
<div style="width:550px;">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>
```
棒极了，我们的代码现在看起来简洁多了。
### HTML 中的标题
到目前为止，蝙蝠侠对结果很高兴，他希望在情书上标题。他想写一个标题： “Bat Letter”。当然，你已经看到这个名字了，不是吗？:D
你可以使用 ht, h2, h3, h4, h5 和 h6 标签来添加标题，h1 是最大的标题和最主要的标题，h6 是最小的标题。
![](https://cdn-images-1.medium.com/max/1000/1*Ud-NzfT-SrMgur1WX4LCkQ.jpeg)
让我们在第二段之前使用 h1 做主标题和一个副标题：
```
<div style="width:550px;">
<h1>Bat Letter</h1>
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>
```
保存，刷新。
![](https://cdn-images-1.medium.com/max/1000/1*rzyIl-gHug3nQChqfscU3w.jpeg)
### HTML 中的图像
我们的情书尚未完成，但在继续之前，缺少一件大事：蝙蝠侠标志。你见过是蝙蝠侠的东西但没有蝙蝠侠的标志吗？
并没有。
所以，让我们在情书中添加一个蝙蝠侠标志。
在 HTML 中包含图像就像在一个 Word 文件中包含图像一样。在 MS Word 中，你到 菜单 -> 插入 -> 图像 -> 然后导航到图像位置为止 -> 选择图像 -> 单击插入。
在 HTML 中，我们使用 `<img>` 标签让浏览器知道我们需要加载的图像，而不是单击菜单。我们在 “src” 属性中写入文件的位置和名称。如果图像在项目根目录中，我们可以简单地在 src 属性中写入图像文件的名称。
在我们深入编码之前，从[这里][3]下载蝙蝠侠标志。你可能希望裁剪图像中的额外空白区域。复制项目根目录中的图像并将其重命名为 “bat-logo.jpeg”。
```
<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>
```
我们在第 3 行包含了 img 标签。这个标签也是一个自闭合的标签，所以我们不需要写 `</img>`。在 src 属性中，我们给出了图像文件的名称。这个名称应与图像名称完全相同，包括扩展名（.jpeg）及其大小写。
保存并刷新，查看结果。
![](https://cdn-images-1.medium.com/max/1000/1*uMNWAISOACJlzDOONcrGXw.jpeg)
该死的！刚刚发生了什么？
当使用 img 标签包含图像时，默认情况下，图像将以其原始分辨率显示。在我们的例子中，图像比 550px 宽得多。让我们使用 style 属性定义它的宽度：
```
<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>
```
你会注意到，这次我们定义宽度使用了 “%” 而不是 “px”。当我们在 “%” 中定义宽度时，它将占据父元素宽度的百分比。因此，100% 的 550px 将为我们提供 550px。
保存并刷新，查看结果。
![](https://cdn-images-1.medium.com/max/1000/1*5c0ngx3BFVlyyP6UNtfYyg.jpeg)
太棒了！这给蝙蝠侠的脸带来了胆怯的微笑 :)。（to 校正：这里什么意思）
### HTML 中的粗体和斜体
现在蝙蝠侠想在最后几段中承认他的爱。他有以下文本供你用 HTML 编写：
“I have a confession to make
It feels like my chest _does_ have a heart. You make my heart beat. Your smile brings a smile to my face, your pain brings pain to my heart.
I don’t show my emotions, but I think this man behind the mask is falling for you.”
当阅读到这里时，你会问蝙蝠侠：“等等，这是给谁的？”蝙蝠侠说：
“这是给超人的。”
![](https://cdn-images-1.medium.com/max/1000/1*UNDvfIZQJ1Q_goHc-F-IPA.jpeg)
你说：哦！我还以为是给神奇女侠的呢。
蝙蝠侠说：不，这是给超人的，请在最后写上“I love you Superman.”。
好的，我们来写：
```
<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p>I love you Superman.</p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
```
这封信差不多完成了，蝙蝠侠另外想再做两次改变。蝙蝠侠希望在最后段落的第一句中的 “does” 一词是斜体，而 “I love you Superman” 这句话是粗体的。
我们使用 `<em>` 和 `<strong>` 以斜体和粗体显示文本。让我们来更新这些更改：
```
<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
```
![](https://cdn-images-1.medium.com/max/1000/1*6hZdQJglbHUcEEHzouk2eA.jpeg)
### HTML 中的样式
你可以通过三种方式设置样式或定义 HTML 元素的外观：
* 内联样式：我们使用元素的 “style” 属性来编写样式。这是我们迄今为止使用的，但这不是一个好的实践。
* 嵌入式样式：我们在由 <style> 和 </style> 包裹的 “style” 元素中编写所有样式。
* 链接样式表：我们在具有 .css 扩展名的单独文件中编写所有元素的样式。此文件称为样式表。
让我们来看看如何定义 “div” 的内联样式：
```
<div style="width:550px;">
```
我们可以在 `<style>` 和 `</style>` 里面写同样的样式：
```
div{
width:550px;
}
```
在嵌入式样式中，我们编写的样式是与元素分开的。所以我们需要一种方法来关联元素及其样式。第一个单词 “div” 就做了这样的活。它让浏览器知道花括号 `{...}` 里面的所有样式都属于 “div” 元素。由于这种语法确定要应用样式的元素，因此它称为一个选择器。
我们编写样式的方式保持不变：属性（宽度）和值（550px）用冒号（:）分隔，以分号（;）结束。
让我们从 “div” 和 “img” 元素中删除内联样式，将其写入 `<style>` 元素：
```
<style>
div{
width:550px;
}
img{
width:100%;
}
</style>
```
```
<div>
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
```
保存并刷新，结果应保持不变。
但是有一个大问题，如果我们的 HTML 文件中有多个 “div” 和 “img” 元素该怎么办？这样我们在 “style” 元素中为 div 和 img 定义的样式就会应用于页面上的每个 div 和 img。
如果你在以后的代码中添加另一个 div，那么该 div 也将变为 550px 宽。我们并不希望这样。
我们想要将我们的样式应用于现在正在使用的特定 div 和 img。为此，我们需要为 div 和 img 元素提供唯一的 id。以下是使用 “id” 属性为元素赋予 id 的方法：
```
<div id="letter-container">
```
以下是如何在嵌入式样式中将此 id 用作选择器：
```
#letter-container{
...
}
```
注意 “#” 符号。它表示它是一个 id，{...} 中的样式应该只应用于具有该特定 id 的元素。
让我们来应用它：
```
<style>
#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}
</style>
```
```
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
```
```
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
```
HTML 已经准备好了嵌入式样式。
但是，你可以看到，随着我们包含越来越多的样式，<style></style> 将变得很大。这可能很快会混乱我们的主 HTML 文件。
因此，让我们更进一步，通过将 style 标签内的内容复制到一个新文件来使用链接样式。
在项目根目录中创建一个新文件，将其另存为 style.css:
```
#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}
```
我们不需要在 CSS 文件中写 `<style>` 和 `</style>`。
我们需要使用 HTML 文件中的 `<link>` 标签来将新创建的 CSS 文件链接到 HTML 文件。以下是我们如何做到这一点：
```
<link rel="stylesheet" type="text/css" href="style.css">
```
我们使用 link 元素在 HTML 文档中包含外部资源，它主要用于链接样式表。我们使用的三个属性是：
* rel：关系。链接文件与文档的关系。具有 .css 扩展名的文件称为样式表，因此我们保留 rel=“stylesheet”。
* type：链接文件的类型；对于一个 CSS 文件来说它是 “text/css”。
* href：超文本参考。链接文件的位置。
link 元素的结尾没有 </link>。因此，<link> 也是一个自闭合的标签。
```
<link rel="gf" type="cute" href="girl.next.door">
```
如果只是得到一个女朋友，那么很容易：D
可惜没有那么简单，让我们继续前进。
这是我们 loveletter.html 的内容：
```
<link rel="stylesheet" type="text/css" href="style.css">
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
```
style.css 内容：
```
#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}
```
保存文件并刷新，浏览器中的输出应保持不变。
### 一些手续
我们的情书已经准备好给蝙蝠侠，但还有一些正式的片段。
与其他任何编程语言一样，HTML 自出生以来（1990 年）经历过许多版本，当前版本是 HTML5。
那么，浏览器如何知道你使用哪个版本的 HTML 来编写页面呢？要告诉浏览器你正在使用 HTML5，你需要在页面顶部包含 `<!DOCTYPE html>`。对于旧版本的 HTML，这行不同，但你不需要了解它们，因为我们不再使用它们了。
此外，在之前的 HTML 版本中，我们曾经将整个文档封装在 `<html></html>` 标签内。整个文件分为两个主要部分：Head 在 `<head></head>` 里面，Body 在 `<body></body>` 里面。这在 HTML5 中不是必须的，但由于兼容性原因，我们仍然这样做。让我们用 `<Doctype>`, `<html>`, `<head>` 和 `<body>` 更新我们的代码：
```
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
</body>
</html>
```
主要内容在 `<body>` 里面，元信息在 `<head>` 里面。所以我们把 div 保存在 `<body>` 里面并加载 `<head>` 里面的样式表。
保存并刷新，你的 HTML 页面应显示与之前相同的内容。
### HTML 的标题
我发誓，这是最后一次改变。
你可能已经注意到选项卡的标题正在显示 HTML 文件的路径：
![](https://cdn-images-1.medium.com/max/1000/1*PASKm4ji29hbcZXVSP8afg.jpeg)
我们可以使用 `<title>` 标签来定义 HTML 文件的标题。标题标签也像链接标签一样在 head 内部。让我们我们在标题中加上 “Bat Letter”：
```
<!DOCTYPE html>
<html>
<head>
<title>Bat Letter</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
</body>
</html>
```
保存并刷新，你将看到在选项卡上显示的是 “Bat Letter” 而不是文件路径。
蝙蝠侠的情书现在已经完成。
恭喜！你用 HTML 制作了蝙蝠侠的情书。
![](https://cdn-images-1.medium.com/max/1000/1*qC8qtrYtxAB6cJfm9aVOOQ.jpeg)
### 我们学到了什么
我们学习了以下新概念：
* 一个 HTML 文档的结构
* 在 HTML 中如何写元素（\<p>\</p>）
* 如何使用 style 属性在元素内编写样式（这称为内联样式，尽可能避免这种情况）
* 如何在 <style>...</style> 中编写元素的样式（这称为嵌入式样式）
* 在 HTML 中如何使用 <link> 在单独的文件中编写样式并链接它（这称为链接样式表）
* 什么是标签名称，属性，开始标签和结束标签
* 如何使用 id 属性为一个元素赋予 id
* CSS 中的标签选择器和 id 选择器
我们学习了以下 HTML 标签：
* \<p>：用于段落
* \<br>：用于换行
* \<ul>, \<li>：显示列表
* \<div>：用于分组我们信件的元素
* \<h1>, \<h2>：用于标题和子标题
* \<img>：用于插入图像
* \<strong>, \<em>：用于粗体和斜体文字样式
* \<style>：用于嵌入式样式
* \<link>：用于包含外部样式表
* \<html>：用于包裹整个 HTML 文档
* \<!DOCTYPE html>：让浏览器知道我们正在使用 HTML5
* \<head>：包裹元信息，如 \<link> 和 \<title>
* \<body>：用于实际显示的 HTML 页面的主体
* \<title>：用于 HTML 页面的标题
我们学习了以下 CSS 属性：
* width：用于定义元素的宽度
* CSS 单位：“px” 和 “%”
朋友们，这就是今天的全部了，下一个教程中见。
***
想通过有趣且引人入胜的教程学习 Web 开发？
[点击这里获取每周新的 Web 开发教程][4]
--------------------------------------------------------------------------------
作者简介:
开发者 + 作者 | supersarkar.com | twitter.com/supersarkar
-------------
via: https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b
作者：[Kunal Sarkar][a]
译者：[MjSeven](https://github.com/MjSeven)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]:https://medium.freecodecamp.org/@supersarkar
[1]:https://www.pexels.com/photo/batman-black-and-white-logo-93596/
[2]:https://code.visualstudio.com/
[3]:https://www.pexels.com/photo/batman-black-and-white-logo-93596/
[4]:http://supersarkar.com/

47
translated/tech/20180816 An introduction to the Django Python web app framework.md
View File

@ -3,17 +3,17 @@ Python Web 应用程序 Django 框架简介
![](https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/web-spider-frame-framework.png?itok=Rl2AG2Dc)
在本系列（由四部分组成）的前三篇文章中，我们讨论了 [Pyramid][1], [Flask][2] 和 [Tornado][3] 这 3 个 Web 框架。我们已经构建了三次相同的应用程序，最终我们遇到了 [Django][4]。总的来说，Django 是目前 Python 开发人员使用的主要 Web 框架，并且不难看出原因。它擅长隐藏大量的配置逻辑，让你专注于能过够快速构建大型应用程序。
在本系列（由四部分组成）的前三篇文章中，我们讨论了 [Pyramid][1], [Flask][2] 和 [Tornado][3] 这 3 个 Web 框架。我们已经构建了三次相同的应用程序，最终我们遇到了 [Django][4]。总的来说，Django 是目前 Python 开发人员使用的主要 Web 框架，并且不难看出原因。它擅长隐藏大量的配置逻辑，让你专注于能够快速构建大型应用程序。
也就是说，当涉及到小型项目时，比如我们的待办事项列表应用程序，Django 可能有点像用消防水管来进行水枪大战。让我们来看看它们是如何结合在一起的。
### 关于 Django
Django 将自己定位为“一个高级的 Python Web 框架，它鼓励快速开发和干净，实用的设计。它由经验丰富的开发人员构建，解决了 Web 开发的很多麻烦，因此你可以专注于编写应用程序而无需重新发明轮子”。它真的做到了！这个庞大的 Web 框架附带了非常多的工具，通常在开发过程中，如何将所有内容组合在一起协同工作可能是个谜。
Django 将自己定位为“一个鼓励快速开发、整洁、实用的设计、高级的 Python Web 框架。它由经验丰富的开发人员构建，解决了 Web 开发的很多麻烦，因此你可以专注于编写应用程序而无需重新发明轮子”。它真的做到了！这个庞大的 Web 框架附带了非常多的工具，以至于在开发过程中，如何将所有内容组合在一起协同工作可能是个谜。
除了框架本身很大，Django 社区也是非常庞大的。事实上，它非常庞大和活跃，以至于有[一个网站][5]致力于为人们收集第三方包，这些第三方包可集成进 Django 来做一大堆事情。包括从身份验证和授权到完全基于 Django 的内容管理系统，电子商务附加组件以及与 Stripe（译注：美版“支付宝”）集成的所有内容。关于不要重新发明轮子：如果你想用 Django 完成一些事情，有人可能已经做过了，你只需将它集成进你的项目就行。
除了框架本身很大，Django 社区也是非常庞大的。事实上，它非常庞大和活跃，以至于有[一个网站][5]致力于为人们收集第三方包，这些第三方包可集成进 Django 来做一大堆事情。包括从身份验证和授权到完全基于 Django 的内容管理系统，电子商务附加组件以及与 Stripe（译注：美版“支付宝”）集成的所有内容。至于不要重新发明轮子：如果你想用 Django 完成一些事情，有人可能已经做过了，你只需将它集成进你的项目就行。
为此，我们希望使用 Django 构建 REST API，因此我们将利用流行的 [Django REST framework][6]。它的工作是将 Django 框架（Django 使用自己的模板引擎构建 HTML 页面）转换为专门用于有效地处理 REST 交互的系统。让我们开始吧。
为此，我们希望使用 Django 构建 REST API，因此我们将使用流行的 [Django REST framework][6]。它的工作是将 Django 框架（Django 使用自己的模板引擎构建 HTML 页面）转换为专门用于有效地处理 REST 交互的系统。让我们开始吧。
### Django 启动和配置
@ -52,13 +52,13 @@ manage.py   django_todo
```
`manage.py` 是一个可执行命令行 Python 文件，它最终成为 `django-admin` 的装饰器（to 校正：这里装饰器只是一个语义上的称呼，与 Python 的装饰器不同）。因此，它的工作与 `django-admin` 是一样的：帮助我们管理项目。因此得名 `manage.py`。
`manage.py` 是一个可执行命令行 Python 文件，它最终成为 `django-admin` 的封装。因此，它的工作与 `django-admin` 是一样的：帮助我们管理项目。因此得名 `manage.py`。
它在 `django_todo` 目录里创建了一个新目录 `django_todo`，其代表了我们项目的配置根目录。现在让我们深入研究一下。
### 配置 Django
可以将 `django_todo` 目录称为“配置根”，我们的意思是这个目录包含了通常配置 Django 项目所需的文件。几乎所有这个目录之外的内容都只关注与项目模型，视图，路由等相关的“业务逻辑”。所有连接项目的点都将在这里出现。
可以将 `django_todo` 目录称为“配置根目录”，我们的意思是这个目录包含了通常配置 Django 项目所需的文件。几乎所有这个目录之外的内容都只关注与项目模型，视图，路由等相关的“业务逻辑”。所有连接项目的点都将在这里出现。
在 `django_todo` 目录中调用 `ls` 会显示以下四个文件：
```
@ -88,7 +88,7 @@ __init__.py settings.py urls.py     wsgi.py
* `DEBUG` 告诉 Django 是以开发模式还是生产模式运行项目。这是一个非常关键的区别。
* 在开发模式下，当弹出一个错误时，Django 将显示导致错误的完整堆栈跟踪，以及运行项目所涉及的所有设置和配置。如果在生产环境中将 `DEBUG` 设置为 `True`，这可能是一个巨大的安全问题。
* 在开发模式下，当弹出一个错误时，Django 将显示导致错误的完整堆栈跟踪，以及运行项目所涉及的所有设置和配置。如果在生产环境中将 `DEBUG` 设置为 `True`，这可能成为一个巨大的安全问题。
* 在生产模式下，当出现问题时，Django 会显示一个简单的错误页面，即除错误代码外不提供任何信息。
@ -121,11 +121,11 @@ __init__.py settings.py urls.py     wsgi.py
* `TIME_ZONE` 是我们 Django 项目后中自动生成的时间戳的时区。我强调坚持使用 UTC 并在其它地方执行任何特定于时区的处理，而不是尝试重新配置此设置。正如[这篇文章][12] 所述，UTC 是所有时区的共同点，因为不需要担心偏移。如果偏移很重要，我们可以根据需要使用与 UTC 的适当偏移来计算它们。
* `USE_I18N` 将让 Django 使用自己的翻译服务来为前端翻译字符串。I18N = 国际化（“i” 和 “n” 之间的 18 个字符）。
* `USE_I18N` 将让 Django 使用自己的翻译服务来为前端翻译字符串。I18N = 国际化（internationalization，“i” 和 “n” 之间共 18 个字符）。
* `USE_L10N` (L10N = 本地化[在 "l" 和 "n" 之间有 10 个字符]) 如果设置为 `True`，那么将使用数据的公共本地格式。一个很好的例子是日期：在美国它是 MM-DD-YYYY。在欧洲，日期往往写成 DD-MM-YYYY。
* `USE_L10N` (L10N = 本地化[localization，在 "l" 和 "n" 之间共 10 个字符]) 如果设置为 `True`，那么将使用数据的公共本地格式。一个很好的例子是日期：在美国它是 MM-DD-YYYY。在欧洲，日期往往写成 DD-MM-YYYY。
* `STATIC_URL` 是用于提供静态文件的大量设置的一部分。我们将构建一个 REST API，因此我们不需要担心静态文件。通常，这会为每个静态文件的域名设置根路径。所以，如果我们有一个徽标图像，那就是 `http://<domainname>/<STATIC_URL>/logo.gif`。
* `STATIC_URL` 是用于提供静态文件的大量设置的一部分。我们将构建一个 REST API，因此我们不需要担心静态文件。通常，这会为每个静态文件的域名设置根路径。所以，如果我们有一个 Logo 图像，那就是 `http://<domainname>/<STATIC_URL>/logo.gif`。
默认情况下，这些设置已准备就绪。我们必须改变的一个选项是 `DATABASES` 设置。首先，我们创建将要使用的数据库：
```
@ -169,7 +169,7 @@ DATABASES = {
```
在继续之前，请确保设置环境变量或 Django 不起作用（to 校正：这里不清楚原文的意思，什么叫 django 不起作用）。此外，我们需要在此环境中安装 `psycopg2`，以便我们可以与数据库通信。
在继续之前，请确保设置环境变量，否则 Django 将不起作用。此外，我们需要在此环境中安装 `psycopg2`，以便我们可以与数据库通信。
### Django 路由和视图
@ -313,17 +313,17 @@ Django REST Framework 希望我们在使用浏览器浏览时拥有一个人性
现在让我们来创建数据模型吧。
Django 项目的整个基础架构都是围绕数据模型构建的，它是这样编写的，因此每个数据模型够可以拥有自己的小天地，拥有自己的视图，自己与其资源相关的 URL 集合，甚至是自己的测试（如果我们需要（to 校正：这里？？？））。
Django 项目的整个基础架构都是围绕数据模型构建的，它是这样编写的，因此每个数据模型够可以拥有自己的小天地，拥有自己的视图，自己与其资源相关的 URL 集合，甚至是自己的测试（如果我们如此想要）。
如果我们想构建一个简单的 Django 项目，我们可以通过在 `django_todo` 目录中编写我们自己的 `models.py` 文件并将其导入我们的视图来避免这种情况。但是，我们试图以“正确”的方式编写 Django 项目，因此我们应该尽可能地将模型分成 Django 方式的包（to 校正：这里 Django Way™ 有点懵）。
如果我们想构建一个简单的 Django 项目，我们可以通过在 `django_todo` 目录中编写我们自己的 `models.py` 文件并将其导入我们的视图来避免这种情况。但是，我们试图以“正确”的方式编写 Django 项目，因此我们应该尽可能地将模型拆分成符合 Django Way™（Django 风格）的包。
Django Way 涉及创建所谓的 Django “apps”，它本身并不是单独的应用程序，它们没有自己的设置和诸如此类的东西（虽然它们也可以）。但是，它们可以拥有一个人们可能认为属于独立应用程序的东西：
* 一组自包含的 URL
* 一组自包含的 HTML 模板（如果我们想要提供 HTML）
* 一组自建的 URL
* 一组自建的 HTML 模板（如果我们想要提供 HTML）
* 一个或多个数据模型
* 一套自包含的视图
* 一套自包含的测试
* 一套自建的视图
* 一套自建的测试
它们是独立的，因此可以像独立应用程序一样轻松共享。实际上，Django REST Framework 是 Django app 的一个例子。它包含自己的视图和 HTML 模板，用于提供我们的 JSON。我们只是利用这个 Django app 将我们的项目变成一个全面的 RESTful API 而不用那么麻烦。
@ -353,11 +353,11 @@ __init__.py admin.py    apps.py     migrations  models.py   tests.py    
* `__init__.py` 是空文件。它之所以存在是因为此目录可看作是模型，视图等的有效导入路径。
* `admin.py` 不是空文件。它用于在 Django admin 中格式化（to 校正：格式化可能欠妥）这个应用程序的模型，我们在本文中没有涉及到它。
* `admin.py` 不是空文件。它用于在 Django admin 中规范化这个应用程序的模型，我们在本文中没有涉及到它。
* `apps.py` 这里基本不起作用。它有助于格式化 Django admin 的模型。
* `apps.py` 这里基本不起作用。它有助于规范化 Django admin 的模型。
* `migrations` 是一个包含我们数据模型快照的目录。它用于更新数据库。这是内置数据库管理的少数几个框架之一，其中一部分允许我们更新数据库，而不必拆除它并重建它以更改模式。
* `migrations` 是一个包含我们数据模型快照的目录。它用于更新数据库。这是内置数据库管理的少数几个框架之一，其中一部分允许我们更新数据库，而不必拆除它并重建它以更改 Schema。
* `models.py` 是数据模型所在。
@ -661,8 +661,7 @@ Please select a fix:
  2. 将一个默认值添加到 `Task` 对象的 `owner` 字段
  3. 允许任务为 `owner` 字段设置 `NULL` 值
方案 2 在这里没有多大意义。我们建议，任何创建的 `Task`，默认情况下都会对应到某个默认所有者，尽管不一定存在。（to 校正：后面这句发意义在哪里？既然它已经说了方案 2 没有意义）
方案 2 在这里没有多大意义。我们建议，默认情况下，任何创建的 `Task`都会对应到某个默认所有者，尽管默认所有者不一定存在。
方案 1 要求我们销毁和重建我们的迁移，而我们应该把它们留下。
让我们考虑选项 3。在这种情况下，如果我们允许 `Task` 表为所有者提供空值，它不会很糟糕。从这一点开始创建的任何任务都必然拥有一个所有者。如果你的数据库表不是一个可重新架构的情况下，请删除迁移，删除表并重建迁移。
@ -1180,7 +1179,7 @@ Django 作为一个框架是高度可定制的，每个人都有自己的方式
Django 旨在处理多种模型，这些模型涵盖了不同的项目领域，但它们可能有一些共同点。这个项目是一个小型的双模型项目，有一些路由。如果我们要构建更多，我们只有七条路由，但仍然是相同的两个模型。这还不足以证明一个完整的 Django 项目。
如果我们期望这个项目能够扩展，那将是一个很好的选择。这不是其中一个项目。这是选择一个点燃蜡烛的火焰喷射器。这是绝对的矫枉过正。（to 校正：这里有点迷糊）
如果我们期望这个项目能够拓展，那么将会是一个很好的选择。如果不是其中一个项目，这就是使用火焰喷射器来点燃蜡烛，绝对是矫枉过正了。
尽管如此，Web 框架仍然是一个 Web 框架，无论你使用哪个框架。它都可以接收请求并做出任何响应，因此你可以按照自己的意愿进行操作。只需要注意你选择的框架所带来的开销。
@ -1194,7 +1193,7 @@ via: https://opensource.com/article/18/8/django-framework
作者：[Nicholas Hunt-Walker][a]
选题：[lujun9972](https://github.com/lujun9972)
译者：[MjSeven](https://github.com/MjSeven)
校对：[校对者ID](https://github.com/校对者ID)
校对：[Bestony](https://github.com/bestony)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出