//imágenes
149 | 47 |
48 |
49 | 50 | # Section I - How to create a professional profile? 51 | 52 |
53 |
54 | 55 | ## 01 - Why is it important to work on our professional profile? 56 | 57 | Topics of this course: 58 | 59 | + Why is it important to work on your professional profile. 60 | + How to create your CV 61 | + Perform in job interviews 62 | + Crete content for your workplace 63 | + Create content for your social networks 64 | 65 | > ..."I recommend to you to pay special attention to the vocabulary that you are going to learn in this course and then adapt it to your own personal needs."... 66 | 67 | **What are you going to learn in this course?** 68 | 69 | We are going to be working on: 70 | 71 | + Your professional profile 72 | + How to communicate in your workplace 73 | + How to deal with the tech world industry (you are going to be lerning a lot of vocabulary about the tech world industry. + How to create content for your personal uses. 74 | 75 | _Why is it important to work on our professional profile?_ 76 | 77 | There are different reazons for this: 78 | 79 | + if you work in your proffesional profile you may have a better job; 80 | + you maybe offered better salaries; 81 | + you can create a position and recognition from your colleges in your industry. 82 | 83 | _How can you improve your profile?_ 84 | 85 | + Writting a good and descriptive professional profile; 86 | + Creating a new or updationg your CV; 87 | + Preparing yourself for an interview; 88 | + Being able to communicate in your workplace: emails, reports, presentations, etc; 89 | + Create content for your social networs; 90 | + Creating a professional portfolio; 91 | + Participating in events. 92 | 93 | 94 | ### [Volver al índice](#title) 95 | 96 | 97 |
98 |
99 |
100 | 101 | ## 02 - Glossary - How to create a professional profile? 102 | 103 | **Analysis:** Detailed examination of something 104 | 105 | **Bachelor degree:** Is an undergraduate degree awarded by universities 106 | 107 | **Backend developer:** A programmer who creates the backend of a website, software or information system 108 | 109 | **Business:** A commercial activity 110 | 111 | **Careers:** An occupation undertaken for a significant period of time 112 | 113 | **CEO - Chief executive officer:** The highest ranking person in a company or other institution 114 | 115 | **Cheerful:** Happy and optimistic 116 | 117 | **City of residence:** The city where a person lives 118 | 119 | **Collaborate:** To work jointly with someone 120 | 121 | **Colleagues:** A person with whom you work 122 | 123 | **Communications:** The act of exchanging information 124 | 125 | **Company:** A commercial business 126 | 127 | **Confident:** Feeling or believing trust in oneself 128 | 129 | **Content marketing:** A type of marketing which is focused on creating content to attract clients 130 | 131 | **Copy-writing:** Act of writing text for advertising purposes 132 | 133 | **Curriculum Vitae - CV:** A brief account of a person’s, qualifications, and previous occupations 134 | 135 | **Curious:** Eager to know and learn things 136 | 137 | **CTO - Chief technology officer:** The person in charge of technology operations within a company 138 | 139 | **Descriptive:** A detailed characterization of something 140 | 141 | **Design:** A plan or drawing that shows the functionalities of something 142 | 143 | **Designer:** A person who plans the functionalities of something 144 | 145 | **Determined:** Having a firm decision or thought about something 146 | 147 | **Draw:** Produce a diagram of a person, an animal or an object 148 | 149 | **Entrepreneur:** A person who owns a business or company 150 | 151 | **Experience:** The events a person has lived and that has left impression 152 | 153 | **Event:** A thing that happens or takes place 154 | 155 | **Feedback:** Information about the performance of a person in a given task 156 | 157 | **Fields:** A particular branch of study 158 | 159 | **Frontend developer:** A developer who creates websites or web applications with which the user can interact directly 160 | 161 | **Goal-oriented:** Focused on achieving one objective only 162 | 163 | **Graduate education:** Degrees obtained after the bachelor education 164 | 165 | **Growth:** Something that has grown over time 166 | 167 | **Growth team:** The team that is in charge of expanding the value of a company 168 | 169 | **Job:** A paid position of regular employment 170 | 171 | **Junior:** Low or lower in rank and status 172 | 173 | **Illustrator:** A person who draws and creates pictures 174 | 175 | **Improve:** To make or become better 176 | 177 | **Interview:** A meeting of people face to face 178 | 179 | **Leader:** A person who commands a group 180 | 181 | **Logic:** Reasoning conducted according to strict parameters of validity 182 | 183 | **Marketing professional:** A person who is in charge of running marketing campaigns 184 | 185 | **Master’s degree:** A degree awarded by university upon the completion of a course of study demonstrating master knowledge of a field 186 | 187 | **Portfolio:** A folder which contains samples of work, like drawings, projects and outcomes 188 | 189 | **Position:** The role that a person assumes in a company 190 | 191 | **Product areas:** The area in charge of developing a product 192 | 193 | **Proactive:** Controlling the situation and proposing new solutions 194 | 195 | **Professional profile:** A short description of a person in their professional dimension 196 | 197 | **Programmer:** A person who writes computer programs 198 | 199 | **Project:** An enterprise that is planned to achieve a goal 200 | 201 | **Project Manager:** The person in charge of a project 202 | 203 | **Organize:** Arrange something systematically 204 | 205 | **Outgoing:** Friendly and sociable 206 | 207 | **Outstanding:** Exceptionally good 208 | 209 | **Recognition:** The acknowledgement of a person within a given field 210 | 211 | **Research:** The systematic study of a field 212 | 213 | **Sales:** The exchange of commodities for money 214 | 215 | **Sensitive:** Highly responsive or susceptible 216 | 217 | **Senior:** With high or higher rank 218 | 219 | **Skill:** The ability to do something 220 | 221 | **Speciality:** A subject of study or line of work 222 | 223 | **Social networks:** A network of social interactions. A website dedicated to social interactions 224 | 225 | **Social relationships:** Any relation between two individuals 226 | 227 | **Sociable:** Willing to talk, interact with others and engage in social activities 228 | 229 | **Software:** Programs used by a computer 230 | 231 | **Start-up:** A newly established business 232 | 233 | **Strategy:** A plan to achieve a specific goal 234 | 235 | **Strengths:** The things a person considers his or her qualities 236 | 237 | **Stress:** The state of mental tension 238 | 239 | **Support professional:** A professional in charge of assisting customers 240 | 241 | **Talent:** Natural aptitude or skill 242 | 243 | **Task:** An activity to be done 244 | 245 | **Teamwork:** The action of a group, especially when is effective 246 | 247 | **Tech-world:** Industry of technology 248 | 249 | **UI designer:** The person in charge of designing the interface for the user 250 | 251 | **Update:** Bring something to a new version 252 | 253 | **UX designer:** The person in charge of designing the user experience 254 | 255 | **Visualize:** Form a mental image of a person, an object or an event 256 | 257 | **Wardrobe:** A person’s entire collection of clothes 258 | 259 | **Weaknesses:** The things that a person considers he or she needs to work on 260 | 261 | **Webinars:** A seminar conducted over the internet 262 | 263 | **Workflows:** A sequence of processes to complete a specific task 264 | 265 | **Workplace:** The physical place in which a person performs his or her work 266 | 267 | 268 | ### [Volver al índice](#title) 269 | 270 |
271 |
272 |
273 | 274 | ## 03 - Using specific vocabulary for careers in IT 275 | 276 | Hi again, 277 | As I told you we are going to be working in your professional profile. 278 | To do this, we need to know what types of careers are there in the tech world. 279 | 280 | There are many different careers in the tech world. If you don't know what you want to do yet, you can answer the following questions to have an idea or a hint about what is it that you want to do. 281 | 282 | So answer the following questions: 283 | 284 | + Do you like numbers and logic? 285 | + Do you like sales, communications and strategy? 286 | + Do you like to draw and design? 287 | + Do you like business and social relationships? 288 | + Do you like projects? 289 | 290 | Take a minute to answer this questions. You can leave your answers in the discussion board and then we will all revise them together. 291 | 292 | Now, if you like logics and numbers probably you can be a _Programmer_ and work in computer science. 293 | If you like sales, communications and strategy you can be a _Marketing Professional_ and work in the _Growth Team_. 294 | If you like to draw and you have a talent for it, you can work in _Design_ or in a _Product Team_. 295 | Also if you like business and social relationships you can be an _Entrepreneur_ and create your own _Start-Up_. 296 | Also if you like projects you can be a _Project Manager_ and work in project areas. 297 | 298 | There are different job positions in the tech world. 299 | Here I present you a list of the most commun job positions you can find. 300 | 301 | Some of there are: 302 | 303 | + Designer 304 | + Marketing professional 305 | + Growth expert 306 | + Communications leader 307 | + Programmer / Dev / Coder (Junior/Senior) 308 | + CEO - Chief Executive Officer 309 | + CTO - Chief Technology Officer 310 | + Frontend programmer 311 | + Backend programmer 312 | + UX/UI designer 313 | + Support expert 314 | + Business developer 315 | + Product Manager 316 | + Project Manager 317 | + Illustrator 318 | + Support Professional 319 | 320 | Here at Platzi we have all this job positions. I just picked some special profiles so you can have an idea of who they are and what they do at Platzi. 321 | 322 | The first one is Juan Pablo Rojas. He is the leader of Growth and he specialises in Marketing. 323 | Leonidas Esteban, most of you know him. He is a Frontend developer and he works here in our team. 324 | Tyfis is in charge of communications, so she can be a communications leader. 325 | You know Fredy. Fredy is our CEO. 326 | And Christian is our COO, Cheaf Operations Oficer. 327 | Also we have Sergio Safra who is in charge of Developing Businesses or Buss Dev. 328 | 329 | So here you have some of the job positions and profiles that we have here at Platzi, so think about your own position and what is it that you want to achieve in your professional life. 330 | 331 | To do this I ask you to answer the following questions. 332 | 333 | + What fields do you like? 334 | + What is your position in this moment? 335 | + What do you want to be in the future? 336 | 337 | I am going to give you my example so you can have a model and then answer in the discussion board. 338 | 339 | > I like education, marketing and sales. In this moment I am an education analyst at Platzi. In the future I want to have a job in business education. 340 | 341 | So, think about yourself and answer the questions in the discussion board. 342 | 343 | Ok! So, remember, your task is to answer the questions that I'll post here. 344 | First: 345 | + What fields do you like? 346 | 347 | Second: 348 | + What is your position at the moment? 349 | 350 | And third: 351 | + What is it that you want to be in the future? 352 | 353 | Use the model that I posted here with my own answers. This you are going to find in the files section here. 354 | And then you can answer your questions in the discussion board. 355 | Remember that everyone is going to see your answers and I personally will be checking your answers to see if they're correct. 356 | 357 | In the next video I am going to tell you how to create your professional profile. 358 | So, I'll see you there. 359 | 360 | 361 |
362 |
363 |
364 | 365 | ## 04 - How to create a successful profile? 366 | 367 | In this video we are going to learn how to create your professional profile. But to do that you need to realize or identify what are your skills and abilities, what are the things that you can or can't do. 368 | 369 | For this I have created three maps. In this map you have the things that you _**can do**_, the things that you _**like to do**_ and the things that you are _**very good at**_. 370 | This information will help you create your professional profile and you will see how. 371 | 372 | In my personal case, what are the things that I can do. 373 | Well, 374 | 375 | I can: 376 | 377 | + teach 378 | + write 379 | + create content 380 | + and many others 381 | 382 | But this things are not necessarily the things that I like to do, maybe there are other things that I like to do. And this ones are, for example. 383 | 384 | I like to: 385 | 386 | + participate in events 387 | + research 388 | + work with students or 389 | + work with teams 390 | 391 | Probably I'd like these things, but it doesn't really mean that I'm very good at those things. 392 | So, for these I decided to include this one too. 393 | 394 | What are the things that I'm very good at?: 395 | 396 | + writing 397 | + teaching 398 | + creating content 399 | 400 | With this information I am going to be able to create my professional profile. 401 | This is what is going to gide me through my professional description. 402 | 403 | And this is what you have to do right now; sit down and in a peace of paper write: 404 | 405 | + the things that you can do; 406 | + the things that you like to do; 407 | + the things that you are very good at; 408 | 409 | And in the second part of this video I am going to show you how to use this information and put it in your real professional profile. 410 | 411 | > ### Task 412 | 413 | + can do; 414 | 415 | - frontend development 416 | - wordpress sites from scratch 417 | - find and solve errors 418 | 419 | + the things that you like to do; 420 | 421 | - always learn 422 | - logic 423 | - game programming 424 | - AI 425 | 426 | + the things that you are very good at; 427 | 428 | - project managing 429 | - find and solve errors 430 | 431 | 432 | 433 | Now that you know the things that you can do, that you like and that you are very good at, you can start working on your professional profile. 434 | Remember that a professional profile is a very short paragraph that describes you as a professional and also as a person. 435 | 436 | Here we are going to start by describing you as a professional, so we have some examples: 437 | 438 | + Experienced UX designer 439 | + Junior frontend programmer/ developer 440 | + Senior backend developer/ programmer 441 | + Growth and marketing expert 442 | + Communications leader 443 | 444 | And with the vocabulary that we learned in the previous videos you can start thinking about your job position and how to describe it. 445 | 446 | In my personal case I am going to be 'an experienced education expert and instructional designer'. 447 | 448 | But that is not enough, you need to describe more, give more details. 449 | So here we are complementing that part with more information. 450 | 451 | + Experienced UX designer with deep knoledge on user research and analysis 452 | + Junior forntend developer with experience in Angular 453 | + Senior backend developer with extensive experience in Python and Django 454 | + Growth and marketing expert with experience in creation of inbound and outbound campaigns 455 | + Communications leader with experience in copy-writing and content marketing strategies 456 | 457 | So, think about yourself, describe yourself in the position that you are right now and also think about your experience, what is it that you know how to do very well. 458 | 459 | Here we have some examples of adjectives that can help you describe your personality, but remember that there are many others that you can find in the files system. 460 | 461 | We have: 462 | 463 | + Outgoing 464 | + Curious 465 | + Proactive 466 | + Sociable 467 | + Goal-Oriented 468 | + Cheerful 469 | + and many many others... 470 | 471 | So with this adjectives you can continue complementing your professional profile. 472 | So, here I show you my professional profile description: 473 | 474 | > Experienced education expert and instructional designer with over 10 years of work in curriculum and pedagogical material design. Outgoing, determined and goal-oriented, very good at working and collaborating with people. 475 | 476 | In the last part you can recycle the vocabulary that you listed when we did the maps, remember? 477 | 478 | After that you are going to include your academic achievements. It's important to include them because many employeers are looking for that information. So, at the end of your description you just include the title that you got. 479 | 480 | So, again: 481 | 482 | > Experienced education expert and instructional designer with over 10 years of work in curriculum and pedagogical material design. Outgoing, determined and goal-oriented, very good at working and collaborating with people. Has a Master's Degree in Foreign Language Teaching. 483 | 484 | If you have more or if you have less, it doesn't matter but is important that you include this information. 485 | 486 | Now it's your turn. You are going to write your own professional profile using this as a model for yourself as an example for yourself and recycling all the vocabulary that we have been using througout this lessons. 487 | 488 | Leave your professional profile in the discussion board and we all check it so you can identify what mistakes you have and how you can best correct them. 489 | 490 | This is just the begining of creating your professional profile. 491 | In the next video I will teach you how to create your CV and how to address the most important things that employeers want to see there. 492 | 493 | ## Task 494 | 495 | > Junior frontend developer with over 5 years of work in wordpress creating and administering sites and 1 year experience with javascript. Goal-oriented, determined and curious, very good at error solving and testing apps. 496 | 497 | 498 | ### [Volver al índice](#title) 499 | 500 |
501 |
502 |
503 | 504 | ## 05 - Creating your curriculum vitae 505 | 506 | All right, we already have our professional profile created. 507 | So, here we are going to learn how to create our curriculum vitae. 508 | 509 | There are many styles and designs for CVs. You can select the one that you like the most and that adjust better to your style. 510 | 511 | Here we have one example. 512 | This one is from Chris Walker, he is a photographer, and if you see here he doesn't have a description, but in many others we use this description to give a general overview of who we are as a professionals. 513 | 514 | We have a profile, we have education, skills, software, experience and general achievements. 515 | 516 | Here we have another one, that is Cesar Hernandez, he is a sales representative. And here as you can see, he has a very short description of himself. Then he uses education, skills, interests, work experience and some references for the possible employers to get some information about him. 517 | 518 | The first thing that you need to focus on is your _**experience**_. 519 | In here I show you two examples of the ones that I use in my personal CV. 520 | 521 | The first one is a very short and concise example from my experience at Platzi. 522 | 523 | ```Platzi``` is the company and ```Educational Analyst``` is my job position. 524 | Here I wrote some of the tasks that I develop at Platzi. 525 | 526 | The first one; ```Curriculum Design```. 527 | The second one; ```Create Courses Syllabus```. 528 | And also; ```I worked on designing courses```. 529 | 530 | So, as you can see this type of description is very adaptable to this type of CV which is very short and concise. 531 | 532 | On the second example you are going to find that is more descriptive. 533 | 534 | I also write the company; ```Universidad del Rosario```. 535 | The position, ```Associated Professor```. 536 | And then some of the tasks that I developed. 537 | 538 | As you can see, this are longer sentences, which are more descriptive of the tasks that I developed. 539 | You can use either one, but the important thing is that they adapt to this style that you are using. 540 | 541 | After this, you are going to need to put your personal information. 542 | 543 | ```City of Residence```, in my case, Bogota, Colombia. 544 | your ```Telephone number```, this is of course not a real telephone number. 545 | Then your ```facebook account```. Remember that a lot of employers check your social media to check that you are not a psyco. 546 | ```Twitter```, and of course, your 547 | ```LinkedIn profile```. 548 | 549 | After that, you can include your education. 550 | In english is very common to use short names for the programs that you coursed. 551 | 552 | So the first one is Bachelor, BA stands for Bachelor. In this case ```Bachelor in teaching english as a foreign language```. 553 | Then the institution and then when you finished it. 554 | Then MA stands for ```Masters Degree. Masters Degree in foreign Language```. 555 | Again the ```institution``` and the ```year```. 556 | And againg MA in whatever field that is that you are studiying. 557 | 558 | It is important to include ```software```. 559 | Most companies are pending on how capable you are to use different types of software. 560 | Here I put some of the ones that I know how to use and that mayght be useful for the position that I am performing in. 561 | 562 | ```In Design and Development:``` 563 | ```Illustrator, Sketch, Adobe XD, Sublime, Atom``` 564 | 565 | ```Marketing and Business:``` 566 | ```Google Analytics, Google Adwords, Facebook Ads``` 567 | 568 | ```Project Manajement:``` 569 | ```Slack, Dropbox, Google Suit, Telegram, Timely``` 570 | 571 | Aditionally you need to include your ```skills```. 572 | Why is it important to describe your skills? 573 | 574 | Employeers are going to look for particular things that you can do. In my case I have ```hi skills in teaching```, also in ```participating conferences and events```, in ```curricular design```, project managmement, digital marketing, inbound and outbound, is not as much as the others but I still have this skills; and finally ```writting```. 575 | 576 | So think about your skills and assign a score for each one of the skills. 577 | For instance if you are very good at designing you can have five stars or five pluses in your designing skill. 578 | 579 | So, make a list of your skills and then score them to see how good you are in this skills. 580 | 581 | Now is your turn to start creating your own CV. 582 | So, in this moment, use all the information that you wrote about yourself and create this curriculum vitae. You can share in the discussion board your image of your curriculum vitae and remember that at this point you can start working on your professional portfolio. 583 | Professional portfolios are made of all the projects that you have created, so this ones show everyone everything that you can do and your skills. 584 | 585 | So, in the next video I'm going to start showing you how to prepare yourself for a job interview. 586 | 587 | 588 | ### [Volver al índice](#title) 589 | 590 |
591 |
592 |
593 | 594 | ## 06 - Preparing yourself for a job interview 595 | 596 | Hello again. 597 | In the last video, we created your CV. Now it's time to start preparing for a job interview. 598 | And it's true that sometimes interviews can be a little scary and intimidating. But if you prepare yourself you are going to find this task a lot more easier. 599 | 600 | This video has a listening exercise, so be prepared to take notes and answer some questions. 601 | 602 | For the first part you need to be aware of your strengths and your weaknesses. 603 | Also you need to prepare your wardrobe and you need to visualize yourself in the job interview. 604 | 605 | So, the first thing that we are going to do is to create the list of strengths and weaknesses. 606 | 607 | In my personal case, my ```strengths``` are: 608 | 609 | + **Teamwork** 610 | + **Sociable** 611 | + **Organized** 612 | + **Goal-oriented** 613 | + **Creative** 614 | 615 | And my ```weaknesses``` are: 616 | 617 | + **Details** 618 | + **Too many tasks** 619 | + **Sensitive** 620 | 621 | But is necessary for us to explain in more detail what this means. 622 | So, prepare for the listening exercises. 623 | 624 | So, here are the instructions for this listening exercise. 625 | 626 | First, you need to: 627 | 628 | + Listen and take notes 629 | + Read and compare it with your notes 630 | 631 | There are two parts in this listening exercise. The first one is concentrated on strengths and the second one on weaknesses. 632 | 633 | ## Strength Exercise: 634 | 635 | My notes: 636 | 637 | > I think one of my strengths is that I am very good at teamwork. I can help people be organized, I support my team and I make sure everyone does their its task. 638 | 639 | > I think one of my strengths is that I am very sociable. I get along with people and they feel confortable with me. 640 | 641 | > I consider that I am very organized. I know the tasks that are pending, I organize my days with my tasks in mind. I try to keep lists of the things I need to do. 642 | 643 | Here you have the text for the listening exercise. Compare it to the notes that you took. 644 | 645 | 646 | ## Weaknesses Exercise: 647 | 648 | Ok, so now, lets go to the second part of this listening exercise. Remember that this one is focused in my weaknesses, so again, listen and take notes. And then, read and compare. 649 | 650 | For weaknesses: 651 | 652 | > I consider that sometimes, details can be difficult, especially when I have long workflows. 653 | 654 | > Sometimes I work on too many things at the same time, and it becomes hard. 655 | 656 | > When I have too much stress, I sometimes get too sensitive. 657 | 658 | Now, read and compare your notes with the text. 659 | 660 | # 661 | 662 | All right, now you know what your strengths and weaknesses are. It is time for you to visualize yourself in your job interview. 663 | So here I give you some questions that you can answer to prepare for this job interview: 664 | 665 | + When do you feel confident? 666 | + In my case I feel confident when I know about the topic. 667 | 668 | + What are your qualities? 669 | + In my case, my qualities are; I am very sociable, I am creative and I am very proactive. 670 | 671 | + Why do you think this company needs you? 672 | + In my case I think the company needs me because I know about pedagogy and curricular design. 673 | 674 | + How can you exceed the position expectations? 675 | + I think that I can exceed the position expectations because I know a lot about pedagogy and I can teach a lot of people to replicate those things. 676 | 677 | So, the task for this video is going to have two parts: 678 | 679 | + Create your own list of strengths and weaknesses. 680 | - Remember to be descriptive; tell us why do you think this are your strengths and you weaknesses. 681 | 682 | + Answer the questions: 683 | 684 | - _When do you feel confident?_ 685 | - _What are your qualities?_ 686 | - _Why do you think this company needs you?_ 687 | - _How can you exceed the position expectations?_ 688 | 689 | Live your answers in the discussion board and remember that everyone is going to give you feedback. 690 | 691 | 692 | 693 | ## Task 694 | 695 | + **Strengths** 696 | + Ordered and detailer 697 | + Logical and pragmatic 698 | + Active learner 699 | + Artistic Sensibility 700 | + Goal-oriented 701 | + If you're going to do something, do it well 702 | 703 | + **Weaknesses** 704 | + Obsessive 705 | + Perfectionism 706 | + Details can make me lose focus 707 | 708 | Questions: 709 | 710 | + **When do you feel confident?** 711 | > I feel confident when I know I have experience in what I'm doing. But I feel confident too when I have new defies. 712 | 713 | + **What are your qualities?** 714 | > I am creative, I am always learning and I don't give up easily. 715 | 716 | + **Why do you think this company needs you?** 717 | > I am responsible, punctual, and I have many experience of the stack. 718 | 719 | + **How can you exceed the position expectations?** 720 | > At first quickly adapting myself to the workflow of the team, and then bringing new ideas to improve it. 721 | 722 | 723 | 724 | ### [Volver al índice](#title) 725 | 726 |
727 |
728 |
729 | 730 | ## 07 - Challenge: Your job interview 731 | 732 | Up until here you know how to create your professional profile, your CV and how to prepare for job interviews. 733 | 734 | Now, we are going to show you an example of an interview, a real interview, and the most common questions that you can encounter here. So, take notes and be prepared. 735 | 736 | > **Nicole:** Hi Paula, welcome, how are you? 737 | 738 | > **Paula:** Hi Nicolle!, good, and you? 739 | 740 | > **Nicole:** I'm very good, thank you. Ok Paula, tell me a little bit about yourself. 741 | 742 | > **Paula:** Well aaa, what can I tell you? I'm an education expert. I have experience in curricular design, in structional design. I have worked in different universities... That's mainly it. 743 | 744 | > **Nicole:** Ok, good. And what are you doing right now? What it's your job position? Are you currently looking for a job? Tell me about it. 745 | 746 | > **Paula:** Well, in this moment I'm working as an education analyst at Platzi. But I would like to continue expanding my horizons and yes, I'm looking for a better position right now. 747 | 748 | > **Nicole:** Great, let's talk about your strengths. Tell me a little bit about what you think are your best strengths. 749 | 750 | > **Paula:** Well, I think I'm a very organized person. I also have abilities to work with people, so I would say that team work is one of my strenghts. And I'm very goal-oriented; every time that I proyect something I try to accomplish it. 751 | 752 | > **Nicolle:** Ok, very good. So, tell me a little bit about your weaknesses. 753 | 754 | > **Paula:** I think that some times I have problems with details, like those specific things that are important but are not like the core of my workflows. So I need to be writing lists and be really careful with the tasks that I have pending. 755 | 756 | > **Nicole:** Can you tell me about, maybe if you had a problem with details in the past or recently, so we can know more about yourself? 757 | 758 | > **Paula:** Well, I would say that, well, the other day I sent an email by mistake and I think that is not something that is really like crucial, but it gives the impression that I'm not super careful with details. 759 | 760 | > **Nicole:** Ok, so, you've actually never had like a real problem with this ... ammm detail ...amm weakness? 761 | 762 | > **Paula:** Well, I cannot think of any situation that was like really serious ...aaa but is because what I'm saying; it's something that is detail and not something that is the core of the things that I have to do. So, I thinks it's a problem and I'm working on it, but aaaa I know it doesn't have that huge impact on the things that I do. 763 | 764 | > **Nicole:** Ok, thank you. So how do you think you can exceed the position expectations? 765 | 766 | > **Paula:** Well, I know that you are looking for a person that is able to design curricular here and I think that I have a lot of experience in this area and I know that I can give you all the knowledge that I have and all the experience that I have so we can create great courses and we can like teach teachers how to be better at their job. 767 | 768 | > **Nicole:** Ok, great. Well, thank you very much for this interview. We will contact you very soon and will see you very soon. 769 | 770 | > **Paula:** Ok, thank you very much Nicole. Bye. 771 | 772 | > **Nicole:** Byye. 773 | 774 | 775 | As you can see, the most common questions can be related to how you describe yourself, what are your strengths and what are the weaknesses. But remember that conversations develop, so it's important that you are prepared for expanding details and tell more about yourself. 776 | 777 | 778 | ### [Volver al índice](#title) 779 | 780 |
781 |
782 |
783 | 784 | # Section 2 - How to use English in the workplace 785 | 786 |
787 |
788 | 789 | ## 08 - Glossary - How to use English in the workplace? 790 | 791 | 792 | 793 | **Accomplish:** Achieve or complete something completely 794 | 795 | **Apps:** A program or software that is designed to fulfill a particular purpose 796 | 797 | **Argue:** Give reasons and evidence to support an idea 798 | 799 | **Assert:** State a fact forcefully 800 | 801 | **Assertive:** Having a confident personality 802 | 803 | **Audience:** A group of spectators in the display of something 804 | 805 | **Attack:** Take aggressive actions against something or someone 806 | 807 | **Attentive:** Paying close attention to something 808 | 809 | **Avoid:** Keep away from doing something 810 | 811 | **Aware:** Having knowledge of an event or a fact 812 | 813 | **Behavior:** The way in which a person acts or conducts oneself 814 | 815 | **Boss:** A person who is in charge or a business 816 | 817 | **Brands:** A type of product manufactured under the name of a specific company 818 | 819 | **Carefully:** In a way that avoids mistakes and errors when doing something 820 | 821 | **Challenge:** A task that needs great mental or physical effort to be achieved 822 | 823 | **Channel:** The way or media through which information is conveyed 824 | 825 | **Chat:** A digital channel frequently used in informal communication 826 | 827 | **Claim:** Assert or state something 828 | 829 | **Clarify:** Make a statement more comprehensible 830 | 831 | **Clients:** A person or company who uses the services or products of a company 832 | 833 | **Concise:** Giving enough information clearly and using a few words 834 | 835 | **Conclude:** Get to a judgement or position 836 | 837 | **Context:** The circumstances that from the setting for an event 838 | 839 | **Confirm:** Establish the truth or correctness 840 | 841 | **Control:** The power to influence or change people’s behaviors and the functionalities of things 842 | 843 | **Cover:** Put something in front or over something else 844 | 845 | **Coworkers:** A person with whom one works 846 | 847 | **Data:** Facts and statistics collected together for reference or analysis 848 | 849 | **Encrypt:** Cover information into code, especially to prevent unauthorized access 850 | 851 | **Demonstrate:** Clearly demonstrate the existence of something 852 | 853 | **Digital communication:** The exchange of messages and meaning through digital media 854 | 855 | **Direct:** Without intervening factors 856 | 857 | **Discover:** Find unexpectedly during research 858 | 859 | **Email:** Messages distributed through by electronic means from one user to a recipient or a group of recipients through a network 860 | 861 | **Employees:** A person employed for wages or salary 862 | 863 | **Ethics:** Moral principles that governs a person’s behavior 864 | 865 | **Experiment:** A scientific procedure to make a discovery 866 | 867 | **Find:** Discover something by chance 868 | 869 | **Fluent:** Easy to express oneself easily and clearly 870 | 871 | **Formal:** Done in accordance with convention and etiquette 872 | 873 | **For starters:** First of all, to start with 874 | 875 | **Fraud:** Criminal intention intended to result in financial or personal gain 876 | 877 | **Hack:** Gain unauthorized access to data in a system or computer 878 | 879 | **Hard drive:** A disk drive used to read from and write to a hard disk 880 | 881 | **Harassment:** Aggressive pressure or intimidation 882 | 883 | **Interact:** Act in a way as to have an effect on each other 884 | 885 | **Internet:** A global computer network which facilitates communications 886 | 887 | **Intimidating:** Something that frightens someone 888 | 889 | **Intrusive:** Causing disruption or annoyance through being unwelcome or uninvited 890 | 891 | **Involved:** Something or someone included in a situation 892 | 893 | **Letter:** A written or typed communication usually sent in an envelop by messenger 894 | 895 | **Message:** A communication sent by any channel 896 | 897 | **Mission:** An important assignment given to a person to complete 898 | 899 | **Microphone:** An instrument used to convert sound waves into electrical energy variations 900 | 901 | **Necessary:** Needed to be done, achieved or present 902 | 903 | **Notepad:** A pad of blank paper to write notes 904 | 905 | **Objectives:** A thing to be achieved 906 | 907 | **Organizations:** An organized group of people with a common goal 908 | 909 | **On behalf of:** To speak for someone or an organization 910 | 911 | **Password:** A secret word or phrase used to get access to a place 912 | 913 | **Pertinent:** Relevant or applicable to a particular matter 914 | 915 | **Permission:** The official authorization to do a particular thing 916 | 917 | **Privacy:** A state in which one is not observed by others 918 | 919 | **Prove:** Demonstrate the truth or existence of something 920 | 921 | **Providers:** A person or entity that provides something 922 | 923 | **Purchase:** Acquire something by paying for it 924 | 925 | **Regularly:** With a constant or definite pattern 926 | 927 | **Reject:** Dismiss as inadequate and unacceptable 928 | 929 | **Relevant:** Closely connected or appropriate to what is being considered 930 | 931 | **Report:** A account given of a particular matter 932 | 933 | **Rigid:** Not being able to be changed or modified 934 | 935 | ****Rob:** Take property unlawfully from a person by force 936 | 937 | **Security:** The state of being free from danger 938 | 939 | **Sequence:** A particular order in which related things follow each other 940 | 941 | **Short:** Measuring a small distance from end to end 942 | 943 | **Specific:** Clearly defined or identified 944 | 945 | **Statistics:** A fact or piece of data obtained from a study 946 | 947 | **Successful:** Accomplishing a desired goal 948 | 949 | **Suitable:** Right or appropriate for a particular person 950 | 951 | **Summary:** A brief statement or account of the most important points of something 952 | 953 | **Test:** A procedure intended to determine the quality of something 954 | 955 | **To begin:** To start 956 | 957 | **Uninformed:** Not having the necessary information 958 | 959 | **Unnecessary:** Something not needed 960 | 961 | **Verify:** Make sure something is true, accurate or justified 962 | 963 | **Tricky:** Something that is difficult or problematic 964 | 965 | 966 | ### [Volver al índice](#title) 967 | 968 |
969 |
970 |
971 | 972 | ## 09 - Vocabulary for the workplace 973 | 974 | Communications in the workplace can be tricky, however you can always follow these tips to understand the best ways to interact with coworkers, clients, providers and of course your boss. In this article we are not talking only about digital communication, but all kinds of communication. For this reason, it is necessary that you pay attention to all the people involved, the way in which the message is sent and how it might be received, the context where the message is sent, the channel you choose to send the message, amongst other aspects. 975 | 976 | When communicating with people in the work environment it is necessary to consider who you are talking to. It is different if you are talking to your boss than to a colleague that you consider your friend. Additionally, you need to be careful with the channel that you select. Using email might be perceived as more formal than using chat. Paying attention to the context in which you are speaking or sending the message is also relevant for the way people understand. 977 | 978 | Asking questions might also be something challenging, especially for new employees. In certain occasions getting used to the **company’s way of communicating** could be intimidating. Nonetheless, asking questions is a skill that all employees need to develop. There are different types of questions you can ask according to the situation. There are direct questions, which are simple and basic, it is truly something you do not know. Also, there are control questions, which are more oriented to confirm something that you already know, sometimes they clarify if the person is uninformed or lying. You can ask summary questions which are more focused on verifying you have understood all the information. Remember not to ask unnecessary questions, so always evaluate if they are relevant and pertinent. 979 | 980 | In sum, having successful communications depends on several aspects like knowing the people you are communicating to, the context in which you are involved, the message you need to deliver, the channel you select, the person who receives the message, the pertinence of the message, and the importance of asking the necessary questions. Always try to evaluate the way in which you communicate, and you will be able to be more successful and assertive. 981 | 982 | 983 | 984 | ### [Volver al índice](#title) 985 | 986 |
987 |
988 |
989 | 990 | ## 10 - Good strategies for writing in the workplace 991 | 992 | In the previous reading, you learned about why is it important to communicate in the workplace. In this video we are going to concentrate on writing and how to improve your writing in the workplace. 993 | 994 | For this, we are going to analyze three structures: 995 | 996 | + The first one is emails 997 | + The second one is reports 998 | + And the third one is chats 999 | 1000 | ### How to write emails? 1001 | 1002 | Is important to take into account that people do not always have a lot of time to read your emails. So, every time that you write one, you need to be concise and short. 1003 | I'm going to show you two examples of emails and we are going to decide which one is effective and which one is not. 1004 | 1005 | The first one is very very long email. As I told you, people is not ready to read this long information. It's better that you summarize your information and give it in small chunks. 1006 | 1007 | In the next one we have a better example of an effective email. Here you can see that this is short, it's concize and it's divided in to little chunks. 1008 | 1009 | Now, how to write an email? 1010 | What steps can we follow in order to do it? 1011 | 1012 | Before that, I need you to take into account that sometimes we want to say a lot of things, but this things that we want to say are not always relevant, so we need to find a balance between what is it that we want to say and the things that are relevant for the person that is receiving the email. 1013 | 1014 | Here we have this steps: 1015 | 1016 | + Select a subject: Be clear and concise: 1017 | _for instance in my example would be:_ Tasks and deadlines. 1018 | 1019 | + Greet according to the profile of the recipient. 1020 | It's not the same if you are writing to the president of the company or to a CEO of a company, or if you are writing to one of your close clolleges. 1021 | 1022 | + Explain the purpose of the email in the first part. 1023 | Here we have an example: 'I’m writing to you to remind you of the pending tasks and their deadlines.' 1024 | 1025 | + The next part is very important: Write bullets to list the information. This means try to summarize the information in small chunks. 1026 | Here I give you some: 1027 | + Determine the project’s budget. 1028 | + Select the team for the project. 1029 | + Arrange a meeting to go over plans. 1030 | 1031 | + Finally, you need to include a (_Write a_) goodbye line. 1032 | Here I'm using: 'Look forward to hearing from you, Paula.' 1033 | 1034 | Of course that there are many other options that you can use. And in the file section you are going to find a list of some of the expressions that you can use throughout emails. 1035 | The most important thing here is to have a clear structure and be as concise as possible. 1036 | 1037 | So, here we have an example that can be useful for you in order to create your own emails. 1038 | 1039 | Example: 1040 | 1041 | >Subject: Website Project 1042 | Hello dear David, 1043 | I’m writing you to inform you about our meeting next week. In this 1044 | meeting I hope we can go over the details of the project: 1045 | - Branding 1046 | - Landing pages 1047 | - Payment system 1048 | So, see you next Monday at my office 795 Folsom St, 11:00 am. 1049 | Regards, 1050 | Paula 1051 | 1052 | The first is the subject and here we use: "Website project". Then we have a greeting line that is: "Hello David" or "Hellow dear David", it shows a little bit of closeness. And then the body of the email. 1053 | 1054 | >I’m writing you to inform you about our meeting next week. In this 1055 | meeting I hope we can go over the details of the project: 1056 | - Branding 1057 | - Landing pages 1058 | - Payment system 1059 | So, see you next Monday at my office 795 Folsom St, 11:00 am. 1060 | Regards, 1061 | Paula 1062 | 1063 | As you can see here are the reset different goodbye line, but still the structure is the same. So all of this expressions you can use them and here I present to you some others useful expressions. 1064 | 1065 | Useful email expressions 1066 | 1067 | + If you are introducing the email: I’m writing to inform you… / I’m emailing you to.. 1068 | + If you are answering questions: I hope this clarifies your doubts 1069 | + If you want the recipient to do something: I would appreciate if you… 1070 | + If you are expecting an answer: Look forward to hearing from you. 1071 | + If you have been waiting for an answer: In reference to my email on July 20th 1072 | 1073 | All of this expressions you can use them according to the necessities that you have in the email that you are writing. 1074 | 1075 | ### How to write reports 1076 | 1077 | Now, as I told you, the second part it's related to reports. 1078 | Wherever you are, in a work place environment, you are going to be needed to present reports. 1079 | So what is the structure of a good report? 1080 | 1081 | First you need to take into account that people need to understand the data of the report that you are presenting. 1082 | Focus on data and statistics. Additionally be able to explain, first the introduction of the report and then the conclusions that you drew from this report. 1083 | 1084 | Whenever you are presenting a report using this types of expressions is going to help you to be clear and to explain in more detail what is it that you did. 1085 | 1086 | When giving reports the following expressions are very useful: 1087 | 1088 | If you want to assert something: 1089 | + Argue, assert, claim 1090 | 1091 | If you want to show conclusions: 1092 | + Discover, find, conclude 1093 | 1094 | If you want to show findings: 1095 | + Demonstrate, prove, test 1096 | 1097 | If you want to compare: 1098 | + Given that x is significantly higher than y… 1099 | 1100 | So, the important thing is that; first, you identify what is the structure that you have for the report and then you can start using usefull expressions to make it more clear. 1101 | 1102 | Finally, we have: 1103 | 1104 | ### How to interact in chats 1105 | 1106 | And here I want you to think that chats are a little bit more informal that other types of channels, for this reazon you can use different expressions that are more common in informal communication. 1107 | 1108 | **Here you have some examples of chats:** 1109 | When communicating at work via chat you can shorten messages through the use of expressions such as: 1110 | + A.s.a.p. = "As soon as possible." 1111 | + Idk = "I don't know" 1112 | + FYI = "For your information" 1113 | + BRB ="Be right back" 1114 | + OT = "Off the topic" 1115 | +Thx or Thks = "Thanks" 1116 | 1117 | There are many many many ways to write in chats in a shorten way. And as I told you, in the glosary this information will be expanded so you can have more ideas on how to implement this in the communications that you have via chat. 1118 | 1119 | To finish this video, I would like you to write an email in which you apply to a job position. 1120 | The idea is that you recycle not just the expressions that we learned in this lesson but also the expressions that you learnt in the previous units. The idea is that you can talk to about yourself and describe yourself using all this vocabulary. 1121 | Remember to be concise and short and also you can share it in the discussion board where we all will be checking your email and giving you feedback. 1122 | 1123 | 1124 | ### [Volver al índice](#title) 1125 | 1126 | 1127 |
1128 |
1129 |
1130 | 1131 | ## 11 - Making presentations in the workplace 1132 | 1133 | So, whenever you are at the work you are going to need to communicate your ideas orally, for instance when you make presentations. 1134 | Presentations always need to have a structure and you need to actually think very well what is it that you are going to communicate. 1135 | 1136 | In this video I am going to show you how to structure your presentations and how to use specific vocabulary and expressions to create your presentations. 1137 | 1138 | + The first thing that you need to decide is what is the structure that you are going to follow and also the topics that you are going to cover. 1139 | + After that you need to decide what is the sequence that you are going to present. 1140 | + And finally you are going to think about what is the conclusion that this presentation leads to. 1141 | 1142 | 1143 | >First, we need to structure the presentation, for this answer 1144 | the following questions: 1145 | - What topics do you want to cover? 1146 | - What is the sequence that you need to follow to be clear? 1147 | - What is the result or the conclusion of your presentation? 1148 | 1149 | 1150 | There are some expressions that you can use for this. 1151 | For example here we have the following expressions: 1152 | 1153 | >Second, you need to start working on the opening of your 1154 | presentation, for this you can use the following expressions: 1155 | 1156 | - To begin… 1157 | 1158 | - On behalf of… 1159 | 1160 | - For starters… 1161 | 1162 | You need to decide how is it that you are going to start your presentation. 1163 | 1164 | If it is a very formal presentation I would suggest that you use terms like: 1165 | 1166 | + On behalf of our organization. 1167 | 1168 | Or if you are going to present something that is not as formal, you can use expressions for instanse like: 1169 | 1170 | + For starters... 1171 | 1172 | Here I present to you an example that can useful and that you can adapt to your presentations. 1173 | 1174 | An example could be: 1175 | 1176 | ``` 1177 | 1178 | To begin I would like to tell you about the experiment that we 1179 | carried out in the product department. We run some tests with 1180 | users who saw different versions of the platform. In here we 1181 | wanted to identify the things that made users be more 1182 | engaged with the platform. 1183 | 1184 | ``` 1185 | 1186 | As you can see here, it's not just the beginning of the presentation but you start telling your audience what is it that you did. 1187 | 1188 | Sometimes we present experiments that we carried out in different departments and this is what we are doing here. For this is very important that you are careful with the conjugations of the verbs that you are using, especially because the experiments were run in the past tense. 1189 | 1190 | So, here, as you can see, we are describing what were the actions that the department took and what were the things that we did during this experiment. 1191 | 1192 | So, after you have described what is it that you did in the experiment or whatever it is that you are presenting, you are going to be more detailed in the things that you found througout your experiment. 1193 | For this, here, I present you some expressions that are useful for you in order to give count of whatever you did in your experiment. 1194 | 1195 | **Body:** 1196 | 1197 | ``` 1198 | After having described the experiment or treatment you 1199 | developed, you can start to present conclusions. For this, you 1200 | might need some expressions such as the following: 1201 | 1202 | - Throughout this experiment we discovered that… 1203 | 1204 | - Also, we identified trends that showed us that… 1205 | 1206 | - The data revealed that… 1207 | 1208 | 1209 | ``` 1210 | 1211 | So, the important thing here is that you use expressions and terms that show the audience that you know exactly what you're talking about and that you have analyzed the data as well. 1212 | 1213 | In the end you need to present what is it that you found in the experiment and how your team and the company can take action upon it. 1214 | 1215 | 1216 | **Conclusion:** 1217 | 1218 | ``` 1219 | 1220 | In the end, you need to present the conclusions of your experiment and the further actions that you might take. In this section you can use phrases as: 1221 | 1222 | - With all this information, we have concluded that… 1223 | 1224 | - It can be assumed that… 1225 | 1226 | 1227 | For further actions you can use: 1228 | 1229 | - It is necessary that we… 1230 | 1231 | - There are some things the company can do… 1232 | 1233 | ``` 1234 | 1235 | And that is precisely the task for this video. 1236 | You are going to create a presentation with all the vocabulary and structures that you have learnt, and you are going to upload it in a youtube video. Then you can share it in the discussion board where everybody can give you feedback. 1237 | 1238 | Remember to use vocabulary to have a clear structure and also pay a lot of attention to your pronunciation. We will give you feedback and you will identify the things that you can improve. 1239 | 1240 | 1241 | ### [Volver al índice](#title) 1242 | 1243 |
1244 |
1245 |
1246 | 1247 | ## 12 - Understand and apply computer ethics 1248 | 1249 | Hello again. 1250 | So, in this video we are going to concentrate on your listening skill. 1251 | 1252 | What is it that we are going to be talking about? 1253 | The idea is that you listen to the lecture and unswer the following questions according to the exercise. 1254 | 1255 | 1256 | ``` 1257 | 1258 | Listen to the lecture and answer the following questions according to the exercise: 1259 | 1260 | - What crimes are most common in the techworld? 1261 | - Why is it important to protect our information? 1262 | - Why are so many people victims of internet crime? 1263 | - Why is it necessary to be careful when we give permission to our apps? 1264 | 1265 | 1266 | ``` 1267 | Right now you are going to listen and take notes to answer the questions. 1268 | 1269 | 1270 | > There are many ways in which the internet, may be dangerous for people's privacy. As in TV series we are exposed to being hacked, being victims of internet fraud, have our identity duplicated and more. Therefore it is necessary for everyone who uses technology to learn how to protect their information so they avoid attacks and hacks from people with cruel intentions. 1271 | Passwords needs to be our first concern. In numerous occasions, people complain about their passwords being robbed, they do not realize that their are not careful enough with their privacy. When they go to the ATM they do not cover their password, they are not attentive of their card when making a purchase or they simply keep their pass on a notepad on their cell phones. 1272 | In addition we need to be aware of the permissions we give to the apps we use. Lately, we have seen that social media is showing us ads from the things we discuss about in our conversations. 1273 | Is normal to see this type of things when we have give permission to the app to access the microphone of our cellphone. The same with the camera from our computer or our cell. 1274 | Finally, it is necessary to remember that computer security and ethics is "everyone matter". All people can be victims of fraud and harassment. It is important that we all collaborate to avoid this problems and reject this type of behaviors. 1275 | 1276 | 1277 | 1278 | So, we have finished our listening exercise. Remember that there are four questions that you need to answer in this exercise. 1279 | 1280 | - What crimes are most common in the techworld? 1281 | - Why is it important to protect our information? 1282 | - Why are so many people victims of internet crime? 1283 | - Why is it necessary to be careful when we give permission to our apps? 1284 | 1285 | Share your answers in the discussion board and we'll all give you feedback. 1286 | 1287 | 1288 | ### [Volver al índice](#title) 1289 | 1290 | 1291 |
1292 |
1293 |
1294 | 1295 | # Section III - How to create content to enhance your professional profile 1296 | 1297 |
1298 |
1299 | 1300 | ## 13 - Creating content for enhancing your professional profile 1301 | 1302 | 1303 | >Nowadays everything is about content. Content gives you the possibility of entering into people’s lives without being intrusive. Right now, all brands, organizations and people that want to be successful create content so their audience and users feel they have something to learn. In this sense, it is important to create a content marketing strategy which allows you to touch people who surround you. 1304 | 1305 | > **What is the most common way to create a content strategy?** 1306 | For starters, it is necessary to identify the type of audience you are communicating with. Knowing their profile is going to allow you to recognize the things that might or might not work with them. Consider that it’s different to be a teacher of math, than being a dev who works in San Francisco. With this in mind, you can start creating a map which includes the topics that you audience might like the most. 1307 | 1308 | >**There are many formats to reach your audience** 1309 | Creating content for the audience does not need to be so rigid. In fact, you can show your audience that you have many channels to teach them things. For instance, you can create blogposts, videos, webminars, infographics, instagram stories, and more. Just make sure what the channels are used by the audience you aim to reach and start creating suitable content. 1310 | 1311 | > **Do it frequently** 1312 | Creating content is not a matter of one time, one week or one month, if you want that your content strategy works you need to maintain your audience updated. To do this, it is advisable to create a calendar that helps you determine the time in which is pertinent to publish content. This can be as simple as having an excel document where you write the topics you want to cover and the dates to publish them. 1313 | 1314 | >These three tips are going to help you create successful content and get recognition in your work environment. 1315 | 1316 | 1317 |
1318 | 1319 | ### [Volver al índice](#title) 1320 | 1321 |
1322 |
1323 |
1324 | 1325 | ## 14 - How to use English in your social networks? 1326 | 1327 | 1328 | Using Social Networks can be very useful when you are looking for a job. 1329 | Remember that employers, when are looking for a specific talent, they look for as many skills as possible, and they look in as many spaces as they can. 1330 | So, is advice able to have our social networks updated and with content that can show them that we are very good professionals. 1331 | 1332 | In this video, I am going to show you two things. 1333 | First; how to create content for specific social networks and second; I'm going to give you some tips on how to avoid problems with English misused. 1334 | 1335 | ### facebook 1336 | 1337 | When posting something on facebook, is very important to be short and concise. Remember that people don't have a lot of time to be checking on very long posts. 1338 | 1339 | Here, I give you some expressions that are very useful and also catchy so you can engage your audience. 1340 | 1341 | + Be short 1342 | + Use expressions like: 1343 | + Today I learned that... 1344 | + I am very happy to participate in these events 1345 | + I had the opportunity of… 1346 | 1347 | This are very short expressions that will catch your audience. 1348 | 1349 | Here I show you some of the posts that I have used in my personal social media. 1350 | 1351 | + I’m very happy to participate in events like this one, here 1352 | you meet people and share with brilliant minds. 1353 | + This weekend I had the opportunity of presenting my talk 1354 | on stratup creation. Great audience! We learned a lot. 1355 | 1356 | And remember to use always images to accompany this kind of posts. 1357 | 1358 | ### Twitter 1359 | 1360 | Then, twitter is very very specific and you have to be very careful when you post on Twitter. 1361 | Here you know that you only have 140 characters to express this idea. So, it's very important that you avoid unnecessary words, that you avoid distracting expressions, and you focus on one thing only. 1362 | 1363 | Share information that is useful for the community or the audience that you are trying to reach. 1364 | 1365 | ### LinkedIn 1366 | 1367 | LinkedIn is completely different, from other social media, here you can recycle everything you have learned in this course and you can apply everything that you’ve learned when you were creating your Curriculum Vitae. 1368 | Be very careful with your professional description because this is the first thing that employers look at. You can use your professional profile as an example to start crafting this professional description on LinkedIn. 1369 | 1370 | Now, I am going to give you some tips to avoid having problems with English in your social networks. 1371 | 1372 | + 1 - _**Be extra careful with spelling**_. 1373 | >I have seen that many people try to share things on facebook, but they make mistakes with spelling, so, it’s very advice able that you check everything before you post it on your social media. Not just because employers may see your mistakes, but because people are going to feel that you don’t know how to use the language. 1374 | 1375 | + 2 - _**Have a clear and appealing professional description**_ 1376 | > This is not just for LinkedIn, also you can have this on twitter and on Facebook and even in Instagram if you want to share it. But it's important that you catch people with those talents that are very special to you. 1377 | 1378 | + 3 - _**Check your vocabulary use: Adjectives and Verbs**_ 1379 | > If you use a lot of adjectives, pay attention to them so you don't start repiting and coming a little bit redundant. And with verbs try to select those strong verbs that make you look like a better professional. 1380 | 1381 | + 4 - _**Keep it professional**_ 1382 | > If employers can see your profile, if it's public, you need to avoid this types of posts that make you look bad. Try to always concentrate on showing things that are interesting and always try to teach your audience something. So whenever they see your social media they find something that is valuable. 1383 | 1384 | + 5 - _**Avoid informal language and abbreviations**_ 1385 | > Specially for linked in when you are writing or when you are writing your work experience, it is very important to avoid abbreviations. It's better that you write all the words complete; do not write something like _"I would like"_ with the apostrophe 'd', but better write the complete words this make your communication more polish. And also try not to use informal language. When you use informal language people may have this felling that you are not as professional as you seem to be. 1386 | 1387 | 1388 |
1389 | 1390 | ### [Volver al índice](#title) 1391 | 1392 |
1393 |
1394 |
1395 | 1396 | ## 15 - Writing good blog posts 1397 | 1398 | Some people believe that writing blog posts is something from the past, but they couldn't be more wrong. 1399 | Actually creating content for a blog is something that can help you create a position within your community and create you a name in your field. 1400 | Here I am going to show you what are the steps to create very good blog posts and I'll give you some tasks for you to practice. 1401 | 1402 | + The first thing is to select a topic that is very common to you, that you know very well and that you feel comfortable writing about. 1403 | When you know what is this topic that you want to talk about it's better for you to start crafting it's structure. 1404 | If you are a developer for example, a frontend developer, you can talk about how to create animations or how to incorporate a design to a website. So, if you know very well the topic go ahead and start talking about it and writing about. 1405 | 1406 | + The second thing that you need to do, is to identify the aspects that you are going to cover in that blog post. 1407 | Try to separate it in chunks, what are the parts that you are going to divide that blog post in. 1408 | 1409 | + After that, you need to write a draft. And writing a draft is not just writing like the general ideas of your blog post; is writing every detail that you are going to incorporate there. 1410 | After you have this draft, you can re-read it, yourself, or you can ask another person to read it for you. That will give you some feedback and some ideas on how to improve that blog post. 1411 | 1412 | + Then, you need to check if your blog post is SEO friendly. This means that, if you are using the correct keywords for people to find your blog post online, also checking that you have a good title, using provocative images or external links; things that enrich your SEO. And this is something that is very important when you want to positioning your content. 1413 | 1414 | I'm going to give you an example of bad practices when writing blog posts. 1415 | So, in the link section, you are going to find the link to that blog post that is not that well written. Check it and tell me what are your opinion on this blog posts. What are the things that you would change and how would you make it better. 1416 | 1417 | In addition to that, you have a task. 1418 | 1419 | Write a good blog post and share it in the discussion board, then read your partners’ and give them some feedback. 1420 | 1421 |
1422 | 1423 | ### [Volver al índice](#title) 1424 | 1425 |
1426 |
1427 |
1428 | 1429 | # Section IV - English for programming, marketing and business 1430 | 1431 |
1432 |
1433 | 1434 | ## 16 - Vocabulary for Programming 1435 | 1436 | ## Programming Languages 1437 | 1438 | + **Features** 1439 | + **Develop** 1440 | + **Sites** 1441 | + **Programs** 1442 | + **Algorithms** 1443 | + **Scope** 1444 | + **Steps** 1445 | + **Flowchart** 1446 | + **Graphical Representation** 1447 | + **Syntax** 1448 | + **General+purpose** 1449 | + **Backend** 1450 | + **Web projects** 1451 | + **HTML** 1452 | + **High+level** 1453 | + **Weakly+typed** 1454 | + **Interpreted Language** 1455 | + **Frameworks** 1456 | + **Libraries** 1457 | + **Angular** 1458 | + **React** 1459 | + **Multiparadigm** 1460 | + **Readable** 1461 | + **Indentation** 1462 | + **Code blocks** 1463 | + **Parethesis** 1464 | + **Brackets** 1465 | + **Coders** 1466 | + **Lines of code** 1467 | + **Open source** 1468 | + **Productive** 1469 | + **Functional Programming** 1470 | + **Interpretative Programming** 1471 | + **Object+oriented** 1472 | 1473 |
1474 | 1475 | ### [Volver al índice](#title) 1476 | 1477 |
1478 |
1479 |
1480 | 1481 | ## 17 - Listening Exercise: Programming Languages 1482 | 1483 | ### Programming Languages 1484 | 1485 | There are many different programming languages, and they all have specific features that allow programmers to develop sites and programs that solve a wide range of problems. However, it is difficult to know where to begin and what language to learn first. If you are new to this field it is a good idea to explore some of the options you have to start. In here, we will talk about some of the most common elements of programming languages and some of the most used programming languages. 1486 | 1487 | Programmers always seek to solve problems and the first thing they can do to come out with effective solutions is to create algorithms. For this, there are some steps that a programmer needs to follow: 1488 | 1489 | The problem needs to be identified and limited: This means that the scope it’s clear. 1490 | The programmer needs to define the steps that need to be taken in order to resolve the problem. One way to have this is by creating a flowchart or a graphical representation of the steps. Then the programmer uses the languages to write the solution to the problem. 1491 | 1492 | Once the programmer knows how to solve the problem through the creation of an algorithm, they need to know the syntax of the language to be able to write it. Nevertheless, there are many languages that a programmer can learn. Here you are going to get familiar with the most common programming languages and their uses. 1493 | 1494 | + **PHP**: If you are interested in web development a good option is to use PHP which is a General Purpose Language. Usually PHP is used for creating the backend of web projects. From this language is relevant to know that it can be embedded into HTML. Although it has been criticized it has become one of the most used programming languages. 1495 | 1496 | + **Javascript**: These programming language it’s usually called JS and it’s one of the languages with the biggest community among devs. Javascript is a high level weakly-typed dynamic and interpreted language. It is most used in frontend development and it supports itself in several frameworks and libraries such as Angular and React. 1497 | 1498 | + **Python**: Python is a multi-paradigm high level and General Purpose Language. The main purpose of this language is to be a readable that’s why its syntax is simpler than in other programming languages. To accomplish this it uses indentation to identify call blocks instead of parentheses or brackets. Additionally, it allows coders to express concepts in less lines of code. 1499 | 1500 | + **Ruby**: Ruby is an Open Source and dynamic programming language which aims for making coders life simpler and more productive. As Python, Ruby has a simple syntax which is read in natural ways and it’s easier to write. In addition, it merger functional and interpretative programming. 1501 | 1502 | Most of these languages are Object Oriented which means they all work with a paradigm that sees everything is an object that can be defined and characterized. 1503 | 1504 | Now, it is time for you to start learning the language of your preference. 1505 | 1506 | 1507 |
1508 | 1509 | ### [Volver al índice](#title) 1510 | 1511 |
1512 |
1513 |
1514 | 1515 | ## 18 - Best strategies to learn English 1516 | 1517 | + ### Read the documentation 1518 | >If you are coding and you are also in the pursuit of learning English, the first thing you should do is to read the documentation that comes in this language. Not only it is more reliable, but is also updates and helps you learn concepts in English in a faster way. 1519 | 1520 | 1521 | + ### Pay attention to the command names and the 1522 | syntax 1523 | >Command names are very useful to learn vocabulary in English, this is due to the fact that most commands have a root in real and day-to-day English, for this reason it would give you the chance to learn more. 1524 | 1525 | + ### Interact in events and forums 1526 | >Sharing information with people on internet and answering questions in forums is a great way to start learning English. This allows you to learn more vocabulary and also evaluate how successful you are being. 1527 | 1528 |
1529 | 1530 | ### [Volver al índice](#title) 1531 | 1532 |
1533 |
1534 |
1535 | 1536 | ## 19 - Vocabulary for Marketing 1537 | 1538 | ### Vocabulary for marketing 1539 | 1540 | + **Consumer** 1541 | + **Brand** 1542 | + **Cost** 1543 | + **Distribution** 1544 | + **Label** 1545 | + **Launch** 1546 | + **Market research** 1547 | + **PR - Public Relations** 1548 | + **Ad copy** 1549 | + **Banner ad** 1550 | + **Tracking** 1551 | + **CPC - Cost Per Click** 1552 | + **CPA - Cost Per Acquisition** 1553 | + **LTV - Life Time Value** 1554 | + **MRR - Monthly Recurring Revenue** 1555 | + **Creative strategy** 1556 | + **Demographics** 1557 | + **Campaign Traffic** 1558 | + **Impressions** 1559 | + **Strategic Market Planning** 1560 | + **Content Strategy** 1561 | + **Google Adwords** 1562 | + **Facebook Ads** 1563 | + **Channels** 1564 | + **Audience** 1565 | + **Convert** 1566 | + **Display** 1567 | + **Customer Persona** 1568 | + **Age** 1569 | + **Service** 1570 | + **Social media** 1571 | + **Benefits** 1572 | + **Business** 1573 | + **Invest** 1574 | + **Search** 1575 | + **Blog posts** 1576 | + **Email marketing** 1577 | + **Promotions** 1578 | + **Discounts** 1579 | + **Updates** 1580 | + **Killer campaigns** 1581 | 1582 |
1583 | 1584 | ### [Volver al índice](#title) 1585 | 1586 |
1587 |
1588 |
1589 | 1590 | ## 20 - Marketing strategies 1591 | 1592 | 1593 | There are different ways to advertise your business, you can use Google Adwords, Facebook Ads, or you can even have a content marketing strategy. The most important thing is that you identify the best channels to get to your audience and convert as much as possible. With this in mind, you need to create a plan that will allow you to reach the correct audience, create the right ads and content, display this information in the places, and ultimately make more money. 1594 | 1595 | The first thing to do is to describe your client or create a customer persona. In order, to do this define the type of person that will buy your product or get your service. Assign a name to your buyer persona, also think about his or her age. Then, describe the person thinking about their job position, their income, the things they like, the things they do not like, their hobbies, the reasons why they need their product, the social media they use the most, and the reasons why they wouldn’t buy your product. The benefits of doing this include knowing the type of content you need to create for that person. 1596 | 1597 | With all this information you can start thinking about the strategy for advertising your business. For example, if your customer persona uses Facebook, then you can invest money on Facebook Ads. On the other hand, if your customer will probably search for your product on Google, then it’s a good idea to invest money on Google Adwords. Also, consider that no matter the product you need to advertise, it is always a good idea to teach your customers through content that is relevant for them. In this sense, you can always have blog posts to promote your product, service and brand. 1598 | 1599 | Remember that there are other strategies that you can use to have a good relationship with your audience. One of this is email marketing, this can help your customer get register to your website, receive information about promotions and discounts, get all information about updates or product changes. Also, your company needs to pay special attention to the support you provide to customers. This means that always listening to customers and trying to solve the problems they might have is fundamental to have a successful business. 1600 | 1601 | All these strategies can help you improve the quality of your marketing campaigns. Remember the goal is to have a good relationship with your customer to the point in which they start loving your brand. 1602 | 1603 | 1604 |
1605 | 1606 | ### [Volver al índice](#title) 1607 | 1608 |
1609 |
1610 |
1611 | 1612 | ## 21 - How to create good copy for marketing campaigns 1613 | 1614 | + **Make the subject and the first line coherent** 1615 | + the title needs to be short and very specific 1616 | + it needs to call the attention of the recipient 1617 | + it **must** be connected with the first line of the email 1618 | 1619 | + **Keep it short and Strong** 1620 | + You need to fing very short copies that are effective 1621 | + Long texts maybe confuse and bore your clients 1622 | 1623 | + **Use "you"** 1624 | + it helps you to make your client get more involved 1625 | 1626 | + **Know your audience** 1627 | + You need to point to the right audience. Is not the same a developer that a designer... 1628 | 1629 | + **Focus on one objective only** 1630 | 1631 |
1632 | 1633 | ### [Volver al índice](#title) 1634 | 1635 |
1636 |
1637 |
1638 | 1639 | ## 22 - Business vocabulary overview 1640 | 1641 | 1642 | **Organize:** To arrange something: 1643 | _People need to organize their agendas to attend the meeting._ 1644 | 1645 | **Competitor:** Another business that has a similar product or service: 1646 | _Our competitor is gaining a lot of revenue thanks to their latest campaigns._ 1647 | 1648 | **Public Relations (PR):** The strategy a company creates to appear in relevant media: 1649 | _We were just interviewed by the Times, finally the Public relations strategy is paying off._ 1650 | 1651 | **After-sales service:** It is the support that businesses provide to their clients after the purchase: 1652 | _The after-sales service that Platzi provides is very good, the answers are quick._ 1653 | 1654 | **Strategy:** A plan that has been designed to achieve a goal: 1655 | _The inbound strategy is based on blog posts and Youtube videos._ 1656 | 1657 | **Team:** The people that work in a company or a project: 1658 | _The product-team is focused on releasing the new features as soon as possible._ 1659 | 1660 | **Headquarters:** The place where the main office of a company is located: 1661 | _Platzi’s Headquarters are located in Bogota._ 1662 | 1663 | **Product:** The thing that you offer and sell to your clients: 1664 | _Our product is very efficient and won’t let our customers down._ 1665 | 1666 | **Investors:** People who give money to a company to grow their business: 1667 | _Investors have given us 500.000 US dollars to grow our team._ 1668 | 1669 | **Clause:** A statement in a contract: 1670 | _The clauses in the team’s contract show that everyone is responsible for their results._ 1671 | 1672 |
1673 | 1674 | ### [Volver al índice](#title) 1675 | 1676 |
1677 |
1678 |
1679 | 1680 | ## 23 - Tips for creating a successful pitch in English 1681 | 1682 | 1683 | + **Take maximum 10 minutes:** 1684 | 1685 | Introduce yourself very shortly and go straight the point immediately. It’s recommended to make a pitch as if you were telling a story. Think that everyone loves a good story, and remember that investors get bored with spreadsheets. 1686 | 1687 | **Use expressions such as:** 1688 | - I’m very excited to be here showing you our project 1689 | - Today I’m going to present to you our amazing start-up 1690 | 1691 | **Explain what your product or service really is:** 1692 | The idea is to sell your product, that’s why you need to use every minute that you have available. Remember that investors want to know how much money your product makes. 1693 | 1694 | **For this use the following expressions:** 1695 | - The main characteristics of our product are: 1696 | - The key features of our product are: 1697 | - What is amazing about our product is: 1698 | 1699 | **Know the audience:** 1700 | When preparing your pitch have a general idea of the people who will be listening to you. Research who they are and what they expect from your presentation. 1701 | With this information you will know the type of language and tone you can use. 1702 | - Formal tone: On behalf of our organization, I would like to introduce our product. 1703 | - Informal tone: I would like to tell you all about this exciting project. 1704 | 1705 | **Explain your marketing strategy:** 1706 | One thing investors pay a lot of attention to is the marketing strategies companies have. This allows them to see what the projections for sales that you have and the revenue you expect to get. 1707 | 1708 | **Expressions:** 1709 | - Our marketing strategies will be based on three main components 1710 | - The marketing strategies will be outbound and inbound. 1711 | 1712 | **Show enthusiasm:** 1713 | When you are presenting your pitch you need to be energetic and enthusiastic, this shows the audience that you are excited about your business and your idea. 1714 | 1715 | **Expressions:** 1716 | - It’s great to have this chance 1717 | - Our amazing product 1718 | - The projections are fantastic 1719 | -------------------------------------------------------------------------------- /jQuery-JavaScript.md: -------------------------------------------------------------------------------- 1 | # Curso de jQuery a JavaScript 2 | # 3 | # Índice 4 | # 5 | 6 | ## [Sección I - Introducción](#sec1) 7 | ### [02 - La historia de jQuery](#clase2) 8 | ### [03 - Presentación del proyecto](#clase3) 9 | 10 | # 11 | 12 | 13 | ## [Sección II - De jQuery a JavaScript](#sec2) 14 | ### [04 - Variables y Funciones](#clase4) 15 | ### [05 - Promesas](#clase5) 16 | ### [06 - Tutorial de Ajax en jQeury y Javascript](#clase6) 17 | ### [07 - Funciones Asíncronas](#clase7) 18 | ### [08 - Selectores](#clase8) 19 | ### [09 - Creación de templates](#clase9) 20 | ### [10 - Creación de DOM](#clase10) 21 | ### [11 - Reutilizando Funciones](#clase11) 22 | ### [12 - Eventos](#clase12) 23 | ### [13 - Clases y estilos CSS](#clase13) 24 | ### [14 - Creación de elementos y asignación de atributos](#clase14) 25 | ### [15 - Formularios](#clase15) 26 | ### [16 - Desestructuración de objetos](#clase16) 27 | ### [17 - DataSet](#clase17) 28 | ### [18 - Encontrando elementos en la lista](#clase18) 29 | ### [19 - Animaciones](#clase19) 30 | ### [20 - Manejo de errores](#clase20) 31 | ### [21 - LocalStorage](#clase21) 32 | ### [22 - Obteniendo los datos almacenados](#clase22) 33 | ### [23 - Conclusiones del curso](#clase23) 34 | 35 | # 36 | 37 |
38 |
39 |
40 | 41 | # Sección I - Introducción 42 | 43 |
44 |
45 | 46 | ## 02 - La historia de jQuery 47 | 48 | 49 | _jQuery_ es una librería de JavaScript. 50 | Cada librería resuelve un problema específico. 51 | 52 | Las ventajas de _jQuery_ fueron: 53 | 54 | + Una única forma de acceder al DOM de manera omogenea; 55 | 56 | Anteriormente se accedía al DOM por medio de selectores. Pero en esta época de incompatibilidad de browser y de Internet Explorer las formas de embeber JavaScript en nuestro código era diferente para cada browser. 57 | jQuery unificaba esta forma. 58 | 59 | $.('selector') 60 | 61 | 62 | + Interactuar con datos del servidor 63 | 64 | jQuery implementa Ajax (XML-HTTP-Request) para interactuar con servidores. 65 | También ayudó a trabajar con la incompatibilidad de los selectores. 66 | 67 | $.ajax() 68 | 69 | 70 | + Animaciones 71 | 72 | Hacer animaciones era algo muy complejo también por la incompatibilidad de browsers y css tampoco tenía todas las funcionalidades que hoy tiene. 73 | 74 | $.animate() 75 | 76 | 77 | Con el paso del tiempo y de la implementación de jQuery comenzaron a aparecer "plugins" para esta librería que todavía facilitaban más las cosas. 78 | Pero esto trajo la complicación de que nuestro código se mezclaba a tal punto que no se entendía qué era jQuery y qué era JavaScript, y con esto, la dificultad de hacer modificaciones en el mismo. 79 | 80 | Luego de esto aparecieron librerías para problemas específicos como **BackBone.js** que se apollaba sobre **underscores.js** para la funcionalidad y sobre **jQuery** para otras cosas. 81 | Las tecnologías evolucionaron. 82 | Actualmente han aparecido otros frameworks y ecosistemas más robustos como _REACT, ANGULAR o VUE_. 83 | 84 | Pero al fin y al cabo todo este sistema y nuevas tecnologías se apoyan en JavaScript Vanilla o en puro JavaScript. 85 | 86 | **Ventajas de Aprende JavaScript** 87 | 88 | + Reutilizar conocimiento en otros lados de tu aplicación 89 | + Poder implementar soluciones sin depender de una librería 90 | + Estar más capacitado para las grandes empresas 91 | 92 |
93 |
94 |
95 | 96 | ## 03 - Presentación del proyecto 97 | 98 | Presentación del proyecto 'Platzi Video'sobre el que vamos a trabajar durante el curso. 99 | 100 | Vamos a hacer todo esto en Vanilla JS, y te esteremos dando consejos de cómo hacer estos ejercicios con Jquery. 101 | 102 |
103 |
104 |
105 | 106 | # Sección II - De jQuery a JavaScript 107 | 108 |
109 |
110 | 111 | ## 04 - Variables y Funciones 112 | 113 | Para traer datos de un servicio externo vamos a usar en combinación: 114 | 115 | + Promesas 116 | + ajax/fetch 117 | + funciones asíncronas 118 | 119 | **Procesos Asíncronos** 120 | 121 | Un proceso asíncrono es una petición que hace javaScript al browser y este la devuelve una vez cumplida a la _cola de tareas_ que será ejecutada al final del EventLoop o del flujo de funciones síncronas dentro de nuestro código. 122 | Por ejemplo cargar la página mientras pido al browser que obtenga todos los usuarios y los devuelva una vez cargado el sitio y cuándo esté listo. 123 | 124 | 125 | Pero antes de implementar una Promesa demos tener en claro dos cosas necesarias: Variables y Funciones. 126 | 127 | **Variables** 128 | 129 | Dentro de JavaScript tenemos tres formas de declarar una **variable** las cuales son: 130 | 131 | + _var_ - ECMAScript 5 132 | + _let_ - A partir de ECMAScript 6 - Para declarar variables que pueden ser modificadas 133 | + _const_ - A partir de ECMAScript 6 - Para declarar variables que no pueden ser modificadas 134 | 135 | **Funciones** 136 | 137 | Las funciones son piezas de código que puedes reutilizar y se declaran con la palabra function. 138 | 139 | function estaEsMiFuncion(string){ 140 | console.log(string) 141 | } 142 | 143 | 144 |
145 |
146 |
147 | 148 | ## 05 - Promesas 149 | 150 | “Una _Promesa_ es un objeto que representa la terminación o el fracaso eventual de una operación asíncrona”, o dicho de forma más cotidiana, se va a delegar en el navegador una función pero antes nos va a decir si falla o se ejecuta con éxito. 151 | 152 | Para crear una promesa: 153 | 154 | new Promise() 155 | 156 | 157 | La guardamos en una nueva variable: 158 | 159 | const getUser = new Promise() 160 | 161 | 162 | Las _Promesas_ reciben un argumento; este argumento es una función: 163 | 164 | const getUser = new Promise(function(){ }) 165 | 166 | 167 | Esta función que va a recibir como parámetro, a su vez recibe dos parámetros que son dos objetos; _resolve_ y _reject_ que nos van a indicar si nuestra _Promesa_ funcionó y no. 168 | El primero (_resolve_) será el que nos informe del resultado positivo y viceversa. 169 | A estos dos parámetros los podemos nombrar de cualquier otra manera: 170 | 171 | const getUser = new Promise( function(todoBien, todoMal) { }) 172 | 173 |
174 | 175 | Si mi request a una cierta API o de cualquier otro tipo es exitoso, la función parámetro de nuestra promesa devolverá el primer parámetro, si no el segundo. 176 | 177 | Para ver cómo se comporta forzaremos la respuesta de esta función: 178 | 179 | const getUser = new Promise(function(todoBien, todoMal) { 180 | todoBien() 181 | }) 182 | 183 |
184 | 185 | Y para invocar a la promesa invoco a la variable _getUser_ encadenada al método _.then()_ que también recibe una función como variable 186 | 187 | getUser.then(function(){ 188 | console.log(`El resultado de tu promesa es positivo.`) 189 | }) 190 | 191 | Para simular un delay en la _Promesa_ vamos a usar un _setTimeout()_. _**setTimeout()**_ es un método de JS que ejecuta una función después de un tiempo establecido. Y justamente recibe 2 parámetros; una función y una cantidad de tiempo en milisegundos. 192 | 193 | ```javascript 194 | 195 | const getUser = new Promise(function(todoBien, todoMal) { 196 | setTimeout(function(){ 197 | todoBien() 198 | }, 3000) 199 | }) 200 | 201 | getUser.then(function(){ 202 | console.log(`El resultado de tu promesa es positivo.`) 203 | }) 204 | // 3 seg. después: El resultado de tu promesa es positivo. 205 | 206 | ``` 207 | 208 | Si el resultado de la _Promesa_ por cualquier cosa da un error o no funciona, llamamos al método _.catch()_ para capturar ese estado y al igual que con _.then()_ pasando una función como parámetro podemos manejar este error: 209 | 210 | 211 | ```javascript 212 | 213 | const getUser = new Promise(function(todoBien, todoMal) { 214 | setTimeout(function(){ 215 | todoMal() 216 | }, 3000) 217 | }) 218 | 219 | getUser 220 | .then(function(){ 221 | console.log(`El resultado de tu promesa es positivo.`) 222 | }) 223 | .catch(function(){ 224 | console.log(`El resultado de tu promesa es negativo.`) 225 | }) 226 | 227 | 228 | ``` 229 | 230 | También podemos enviar parámetros a través de _todoBien()_ y _todoMal()_: 231 | 232 | 233 | ```javascript 234 | 235 | const getUser = new Promise(function(todoBien, todoMal) { 236 | setTimeout(function(){ 237 | todoMal(`El resultado de tu promesa es negativo.`) // paso el texto como parámetro 238 | }, 3000) 239 | }) 240 | 241 | getUser 242 | .then(function(){ 243 | console.log(`El resultado de tu promesa es positivo.`) 244 | }) 245 | .catch(function(message){ // recibo con 'message' el parámetro 246 | console.log(message) 247 | }) 248 | 249 | 250 | ``` 251 | 252 | Si quiero eniar varias _Promesas_ de forma paralela? 253 | Para iterar por las promesas uso el método _.all()_ de _Promise_ que va a recibir un _'objeto[]'_ con todas las _Promesas_ previamente declaradas: 254 | 255 | 256 | ```javascript 257 | 258 | const getUser = new Promise ( (todoBien, todoMal) => setTimeout( () => todoBien(`El resultado de tu promesa es positivo.`), 1000 )) 259 | const getUser1 = new Promise((todoBien, todoMal) => setTimeout(() => todoBien(`El resultado de tu promesa es positivo II.`), 2000)) 260 | const getUser2 = new Promise( (todoBien, todoMal) => setTimeout( () => todoBien(`El resultado de tu promesa es positivo III.`), 3000 ) ) 261 | 262 | Promise.all([ 263 | getUser, 264 | getUser1, 265 | getUser2 266 | ]) 267 | .then( message => console.log(message)) 268 | .catch( message => console.log(message)) 269 | 270 | //depués de 3sec: (3) ["El resultado de tu promesa es positivo.", "El resultado de tu promesa es positivo II.", "El resultado de tu promesa es positivo III."] 271 | 272 | ``` 273 | 274 | Si aunque sea 1 de los _Promises_ da error saldrá por .catch() y ninguna de las promesas funcionará. 275 | 276 | Otro método usual con _Promisas_ es _.race()_. Este dara resultados a partir de la promesa que primero se resuelva. 277 | 278 | ```javascript 279 | 280 | const getUser = new Promise ( (todoBien, todoMal) => setTimeout( () => todoBien(`El resultado de tu promesa es positivo.`), 1000 )) 281 | const getUser1 = new Promise((todoBien, todoMal) => setTimeout(() => todoBien(`El resultado de tu promesa es positivo II.`), 2000)) 282 | const getUser2 = new Promise( (todoBien, todoMal) => setTimeout( () => todoMal(`El resultado de tu promesa es negativo.`), 3000 ) ) 283 | 284 | Promise.race([ 285 | getUser, 286 | getUser1, 287 | getUser2 288 | ]) 289 | .then( message => console.log(message)) 290 | .catch( message => console.log(message)) 291 | 292 | // El resultado de tu promesa es positivo. 293 | 294 | 295 | ``` 296 | 297 | 298 |
299 |
300 |
301 | 302 | ## 06 - Tutorial de Ajax en jQuery y Javascript 303 | 304 | Una característica muy solicitada en cualquier sitio dinámico es solicitar datos a un servidor, denominado _API_. 305 | 306 | Para hacer esto tenemos dos opciones: 307 | 308 | + _Ajax_ con jQuery 309 | + _fetch_ con Vanilla JS 310 | 311 | **Ajax jQuery** 312 | 313 | Ajax recibe dos parámetros los cuales son la url de la API y un objeto donde pondrás la configuración que se usara para realizar la petición. En la configuración se añaden dos funciones para manejar cuando la petición se realizo correctamente y cuando falla. 314 | 315 | _Referencia: http://api.jquery.com/jquery.ajax/_ 316 | 317 | ```javascript 318 | 319 | $.ajax('htpps://randomuser.me/api/', { 320 | method: 'GET', 321 | success: function (data){ 322 | console.log(data) 323 | }, 324 | error: function (error) { 325 | console.log(error) 326 | } 327 | }) 328 | 329 | ``` 330 |
331 | 332 | **JavaScript** 333 | 334 | JavaScript internamente cuenta con una función llamada _fetch_ que también realiza peticiones a una API. 335 | Al igual que Ajax necesita dos parámetros, una url y una configuración, pero si solo le mandas la url fetch usará una configuración por defecto donde el método HTTP será GET. 336 | _fetch_ te regresa una promesa, esa promesa al resolverse te da los datos de respuesta y tiene un método llamado _json()_ que te regresa otra promesa con los datos en formato JSON. 337 | 338 | ```javascript 339 | 340 | fetch("url") 341 | .then( response => return response.json() ) 342 | .then( user => console.log(user) ) // datos en formato JSON 343 | .catch( error => console.log(error) ) 344 | 345 | ``` 346 |
347 | 348 | Las promesas resuelven el problema del Callback Hell haciendo que una promesa pueda devolver otra promesa y en lugar de ser anidadas como los callback, estas promesas son encadenadas. 349 | 350 | 351 |
352 |
353 |
354 | 355 | ## 07 - Funciones Asíncronas 356 | 357 | Una función asíncrona va a ser como una función normal, pero poniendo código asíncrono de forma que sea más fácil de leer de forma síncrona. 358 | 359 | Para declarar una función asíncrona se usa la palabra reservada _**async**_. Luego se declara la función de forma normal. 360 | Dentro de una función asíncrona se usa otra palabra reservada llamada _**await**_, lo que hará este comando es indicar que se debe esperar a que termine de ejecutarse ese fragmento de código antes de continuar. 361 | 362 | 363 | ```javascript 364 | 365 | async function load() { 366 | await 367 | } 368 | 369 | ``` 370 | 371 | Puedo llamar la función de manera normal: 372 | 373 | ```javascript 374 | 375 | async function load() { 376 | await 377 | } 378 | load() 379 | 380 | ``` 381 | 382 | O puedo hacer que se autoejecute envolviéndola entre paréntesis: 383 | 384 | 385 | ```javascript 386 | 387 | (async function load() { 388 | await 389 | })() 390 | 391 | ``` 392 | 393 | Para comenzar a trabajar en el ejercicio del curso usaremos la API de https://yts.am/api. 394 | Genero un _fetch_ con la URL que necesito y lo guardo en una constante bajo el comando _**await**_ 395 | El código allí se detiene hasta que la promesa es devuelta y continúa con el código. 396 | Llamamos entonces al método _json()_ para obtener el objeto Promise con la 'data'. 397 | 398 | ```javascript 399 | 400 | (async function load(){ 401 | const result = await fetch('https://yts.am/api/v2/list_movies.json?genre=action') 402 | const data = await result.json() 403 | console.log(data) 404 | })() 405 | 406 | ``` 407 | 408 | Ahora quiero traer tres promesas que corresponden a tres géneros diferentes de películas: 409 | 410 | ```javascript 411 | 412 | (async function load(){ 413 | 414 | async function getData(url) { 415 | const result = await fetch(url) 416 | const data = await result.json() 417 | return data 418 | } 419 | 420 | const URLroot = 'https://yts.am/api/v2/list_movies.json?genre=' 421 | 422 | const actionList = await getData(`${URLroot}action`) 423 | const horrorList = await getData(`${URLroot}horror`) 424 | const animationList = await getData(`${URLroot}animation`) 425 | 426 | console.log(actionList, horrorList, animationList) 427 | })() 428 | 429 | ``` 430 | 431 |
432 |
433 |
434 | 435 | ## 08 - Selectores 436 | 437 | 438 | Los selectores sirven para seleccionar objetos del DOM con el fin de manipularlos. 439 | 440 | Una buena práctica es asignar una constante _const_ con cada uno de ellos, listarlos al inicio del código. 441 | 442 | Una convención entre algunos programadores es agregarle a estas constantes un signo _**$**_ al comienzo de su nombre para diferenciarlas del resto de las variables del código. 443 | 444 | const $selector 445 | 446 |
447 | 448 | En **jQuery** generamos un selector de la siguiente forma: 449 | 450 | $('.home') // class 451 | $('#home') // id 452 | $('div') // HTML tag 453 | 454 | 455 |
456 | 457 | Dentro de **JavaScript** existen distintas funciones para generar selectores: 458 | 459 | + **getElementById**: recibe como parámetro el **id** del objeto. Regresa un solo objeto. 460 | 461 | document.getElementById('home') 462 | 463 | 464 | + **getElementByTagName**: recibe como parámetro el **tag** que estas buscando y te regresa una colección html de los elementos que tengan ese tag. 465 | 466 | document.getElementByTagName('span')[0] // traerá el primer span del código html 467 | 468 | 469 | + **getElementByClassName**: recibe como parámetro la **clase** y te **regresa una colección** html de los elementos que tengan esa clase. 470 | 471 | 472 | document.getElementByClassName('home') 473 | 474 | 475 | + **querySelector**: va a buscar **el primer elemento que coincida con el selector** que le pases como parámetro. 476 | 477 | 478 | document.querySelector('#container > h2') 479 | 480 | 481 | + **querySelectorAll**: va a buscar **todos los elementos** que coincidan con el selector que le pases como parámetro. 482 | 483 | document.querySelectorAll('#video-content > div > div > div.VideoMaterialLayout-timeline > span > div > aside > section > div.TimelineNav-materials > a') 484 | 485 | // En la página de una clase de Platzi arroja: 486 | 487 | // NodeList(10) [a.TimelineNav-material, a.TimelineNav-material, a.TimelineNav-material, a.TimelineNav-material, a.TimelineNav-material.is-active, a.TimelineNav-material, a.TimelineNav-material, a.TimelineNav-material, a.TimelineNav-material, a.TimelineNav-material] 488 | 489 | 490 |
491 |
492 |
493 | 494 | ## 09 - Creación de templates 495 | 496 | 497 | Con JavaScript es posible crear templates insertando código HTML en el DOM a través de los selectores. Dentro de este código puedo insertar datos dinámicos de acuerdo a la necesidad. 498 | 499 | Con una característica de ES6, "_template literals_" (que son estas comillas invertidas '`', o acento grave) puedo generar este código, tanto en javascript como con jQuery: 500 | 501 | ```javascript 502 | 503 | 504 | function template(someTitle, someContent) { 505 | return(`
506 |
`)
511 | }
512 |
513 | ```
514 |
515 |
516 | ${someTitle}
507 |
508 |
510 | ${someContent}
509 |517 |
518 |
519 | 520 | ## 10 - Creación de DOM 521 | 522 | 523 | Para imprimir nuestro código del template en el documento primero lo transformamos en código HTML, de otra manera se imprimiría sólo texto y se mostraría el código como texto en nuestra página. 524 | 525 | Para esto primero creamos un elemento HTML que nos arroja un documento html básico(esta parte del proceso es sobre todo para mostrar el mecanismo de algunos frames y librerías): 526 | 527 | 528 | ```javascript 529 | 530 | const html = document.implementation.createHTMLDocument() 531 | 532 | // #document 533 | // 534 | // 535 | // 536 | // 537 | // 538 | // 539 | 540 | ``` 541 | 542 | Y con el método _.innerHTML_ genero el código a partir de nuestro string estructurado: 543 | 544 | ```javascript 545 | 546 | const html = document.implementation.createHTMLDocument() 547 | html.body.innerHTML = HTMLString 548 | 549 | ``` 550 | 551 | Y ahora sí podemos insertar este código generado en nuestro documento con el método _.children_: 552 | 553 | ```javascript 554 | 555 | $actionContainer.append(html.body.children[0]) 556 | 557 | ``` 558 | 559 | Este flujo se parece mucho a lo que hacemos con librerías o frameworks de JavaScrip; lo que haría backBone, Angular, Vue, React. Con estos sólo pasamos unas propiedades, declaramos unos componentes que sería lo más parecido a nuestro template, y luego de eso se imprime en nuestra página. También nos dan características especiales; como por ejemplo si actualizamos alguna propiedad, esta se autoactualiza dentro de ese elemento, dentro de ese HTML sin tener que hacerlo a mano. 560 | Con este proceso hemos aprendido la forma de hacerlo con Vanilla JS para poder comprender todo el background detras de estas librerías y frames. 561 | 562 | Hay otras formas de hacer este proceso en Vanilla JS. 563 | Notese por ejemplo que el método _.append_ es nativo de jQuery y no de JS. Con Vanilla JS usaríamos _.appendChild()_ por ejemplo. 564 | 565 | 566 | 567 |
568 |
569 |
570 | 571 | ## 11 - Reutilizando Funciones 572 | 573 | 574 | Las funciones son esas porciones de código que vamos a poder declarar y reutilizar a lo largo de toda nuestra aplicación según nos convenga. 575 | Es bueno que sepamos usar funciones y nombrarlas lo más específicas posible para así poder reutilizarlas libremente. 576 | 577 | Código del curso hasta esta clase: 578 | 579 | 580 | ```javascript 581 | 582 | (async function load(){ 583 | //root de la url de la API 584 | const moviesURL = `https://yts.am/api/v2/list_movies.json?genre=`; 585 | 586 | //=== Selectores Varios ===// 587 | // contenedor de películas por género 588 | const $actionContainer = document.getElementById(`action`) 589 | const $dramaContainer = document.getElementById(`drama`) 590 | const $animationContainer = document.getElementById(`animation`) 591 | 592 | // otros contenedores 593 | const $featuringContainer = document.getElementById(`featuring`) 594 | const $form = document.getElementById(`form`) 595 | const $home = document.getElementById(`home`) 596 | 597 | // otros elementos del DOM 598 | const $modal = document.getElementById(`modal`) 599 | const $overlay = document.getElementById(`overlay`) 600 | const $hideModal = document.getElementById(`hide-modal`) 601 | 602 | // elementos dentro del modal 603 | const $modalTitle = $modal.querySelector(`h1`) 604 | const $modalImg = $modal.querySelector(`img`) 605 | const $modalDescription = $modal.querySelector(`p`) 606 | //=== Selectores Varios ===// 607 | 608 | //-- función para hacer el request a la API --// 609 | async function getMovies (url) { 610 | const response = await fetch(url) 611 | const data = await response.json() 612 | return data 613 | } 614 | 615 | // listas de objetos-películas por género traidos desde la API (request) 616 | const actionList = await getMovies(`${moviesURL}action`) 617 | const dramaList = await getMovies(`${moviesURL}drama`) 618 | const animationList = await getMovies(`${moviesURL}animation`) 619 | 620 | // listas de películas por género 621 | const actionMovies = actionList.data.movies 622 | const dramaMovies = dramaList.data.movies 623 | const animationMovies = animationList.data.movies 624 | 625 | //-- función para generar el código HTML por cada película --// 626 | function videoTemplate(img, title) { 627 | return( 628 | `
629 |
`
636 | )
637 | }
638 |
639 | //-- función para imprimir código html por cada película --//
640 | function printMoviesByGenre(genre, container){
641 | container.children[0].style = `display: none`
642 | genre.forEach( movie => {
643 | container.innerHTML += videoTemplate(movie.medium_cover_image, movie.title)
644 | })
645 | }
646 |
647 | // imprimir cada película por género en la página
648 | const actionMoviesPrinted = printMoviesByGenre(actionMovies, $actionContainer)
649 | const dramaMoviesPrinted = printMoviesByGenre(dramaMovies, $dramaContainer)
650 | const animationMoviesPrinted = printMoviesByGenre(animationMovies, $animationContainer)
651 | })()
652 |
653 |
654 | ```
655 |
656 |
630 | 
631 |
632 | 633 | ${title} 634 |
635 |657 |
658 |
659 | 660 | ## 12 - Eventos 661 | 662 | Los eventos del DOM son enviados para notificar al código de cosas interesantes que han sucedido o están sucediendo. 663 | Cada evento está representado por un objeto que se basa en la Interfaz _Event_, e incluso puede contener campos y/o funciones adicionales personalizadas para obtener más información a cerca de lo 'sucedido'. Los eventos pueden representar cualquier cosa, desde las interacciones básicas del usuario hasta notificaciones automatizadas de las cosas que suceden en el modelo de representación. 664 | 665 | _Referencia jQ: http://api.jquery.com/on/_ 666 | 667 | _Referencia JS: http://bibliotecadigital.tamaulipas.gob.mx/archivos/descargas/b716d48a5_evolucion.pdf_ 668 | 669 | Con vanilla JS, el método _addEventListener()_ se utiliza para invocar cualquier evento. 670 | Este método recibe dos parámetros; (evento, function) 671 | 672 | $element.addEventListener('event', () => {}) 673 | 674 | Con jQuery: 675 | 676 | $element.on( events, handler ) 677 | 678 | 679 | Llamando al método del event .preventDefault() evitamos que el sitio se recargue cada vez que usamos el formulario. 680 | 681 | 682 | ```javascript 683 | 684 | $form.addEventListener('submit', event => event.preventDefault()) 685 | 686 | 687 | 688 | El método .addEventListener() no acepta más de un elemento. Entonces, cuando necesito agregar el mismo _listener_ a varios elementos puedo usar dos opciones: 689 | 690 | + Un array y un for: 691 | 692 | ```javascript 693 | 694 | const arrayDeElementos = document.querySelectorAll('div'); 695 | arrayDeElementos.forEach( (elem) => { 696 | elem.addEventListener( ' click', () => { 697 | // lo que quieras hacer ... 698 | }); 699 | }); 700 | 701 | ``` 702 | 703 | + **Event Bubbling** que es básicamente escuchar todos los eventos de la página agregando el listener al _document_ y luego generar un if o un switch con los elementos que necesitamos puntualmente: 704 | 705 | 706 | ```javascript 707 | 708 | document.addEventListener('click', (event) => { 709 | if ( event.target.classList.contains( 'classX' ) ) { 710 | // lo que quieras hacer ... 711 | } elseif (event.target.classList.contains( 'classZ' ) ) { 712 | // lo que quieras hacer ... 713 | } 714 | }, false); 715 | 716 | ``` 717 | 718 | 719 |
720 |
721 |
722 | 723 | ## 13 - Clases y estilos CSS 724 | 725 | HTML se va a encargar de la estructura de nuestro proyecto. CSS de nuestros estilos y JS de la interactividad. 726 | Convinando CSS con JS podemos generar una interfaz muy rica e interactiva. 727 | 728 | Una herramienta útil para este trabajo es el **Chrome Dev Tool**. En el console, el comando _$0_ se refiere al elemento seleccionado. 729 | 730 | Cada elemento del DOM tiene un _classList_ como propiedad en JavaScript. Este _classList_ contiene propiedades. 731 | Por ejemplo nos pueden ser útil: 732 | 733 | + _add_: agrega una clase, 734 | + _remove_: quita una clase, 735 | + _toogle_: agregarla si no está y quitarla si está. 736 | 737 | ```javascript 738 | 739 | $element.classList.add('class') 740 | $element.classList.remove('class') 741 | $element.classList.toggle('class') 742 | 743 | ``` 744 | 745 | Para generar estilos inline usamos el método _.style_: 746 | 747 | ```javascript 748 | 749 | $element.style.animation = "modalIn .8s forwards"; 750 | $element.style = 'display: none' 751 | 752 | ``` 753 | 754 |
755 |
756 |
757 | 758 | ## 14 - Creación de elementos y asignación de atributos 759 | 760 | **Creación de Elementos** 761 | 762 | Es posible crear elementos independientes en el DOM a partir de JavaScript con el método _createElement()_. 763 | 764 | const $element = document.createElement('img') 765 | 766 | 767 | Para asignar atributos al elemento creado podemos usar _setAttribute()_ 768 | 769 | $element.setAttribute("src", "img/foto.png"); 770 | 771 | Y si quiero agregar varios: 772 | 773 | ```javascript 774 | 775 | function addAttributes($element, attributes) { 776 | for(const attribute in attributes ){ 777 | $element.setAttribute(attribute, attributes[attribute]) 778 | } 779 | } 780 | 781 | ``` 782 | 783 | Para agregarlo al lugar del código que quiero: 784 | 785 | ```javascript 786 | 787 | $container.append($element) 788 | 789 | ``` 790 | 791 |
792 |
793 |
794 | 795 | ## 15 - Formularios 796 | 797 | Para obtener los datos de un formulario con Vanilla JS usamos el constructor _FormData()_ que recibe como parámetro el formulario HTML al que queramos acceder: 798 | 799 | 800 | const formData = new FormData($form) 801 | 802 | 803 | A este nuevo objeto podemos setearle datos nuevos y también pedirle: 804 | 805 | 806 | // agregar 807 | formData.set('serie', 'Mr. Robot') 808 | 809 | // pedir 810 | formData.get('serie') 811 | // "Mr. Robot" 812 | 813 | Para obtener el input del formulario al que quiero acceder utilizo el valor del atributo _'name'_ previamente seteado en el tag html. 814 | 815 | ```html 816 | 817 | 820 | 821 | 824 | 825 | ``` 826 | 827 | 828 | 829 |
830 |
831 |
832 | 833 | ## 16 - Desestructuración de objetos 834 | 835 | Destructuring assignment o asignación por desestructuración nos permite introducirnos en un objeto para así extraer un dato para asignarlo a otra variable y así limpiar nuestro código. 836 | Esto se hace usando llaves; '{}' y ':'. 837 | 838 | Ej. dónde podríamos aplicar esto: 839 | 840 | ```javascript 841 | 842 | // ... 843 | const peliculaBuscada = await getMovies(`${finder_API}${data.get('name')}`) 844 | $featuringContainer.innerHTML = featuringTemplate(peliculaBuscada.data.movies[0]) 845 | // ... 846 | 847 | ``` 848 | 849 | El objeto que nos arroja la función asíncrona del ejemplo nos obliga a entrar en el sub-objeto _'data'_ y este a la vez en _'movies'_, lo que nos hace usar esta declaración para acceder a los datos que necesitamos: 850 | 851 | peliculaBuscada.data.movies[0] 852 | 853 | Desestructurando la variable en la que voy a guardar el resultado de la función asíncrona que nos arroja el objeto nuestra variable se vería más limpia y el código quedaría así: 854 | 855 | ```javascript 856 | 857 | // ... 858 | const { 859 | data: { 860 | movies: peliculaBuscada 861 | } 862 | } = await getMovies(`${finder_API}${data.get('name')}`) 863 | $featuringContainer.innerHTML = featuringTemplate(peliculaBuscada[0]) 864 | // ... 865 | 866 | ``` 867 | 868 | 869 | 870 |
871 |
872 |
873 | 874 | ## 17 - DataSet 875 | 876 | Con DataSet puedo agregar datos a los tags HTML para luego usarlos de cualquier forma necesaria en JavaScript. 877 | La forma de hacerlo es agregar un atributo _"data-nombre"_ a cualquier tag html. 878 | 879 | Ej: 880 | 881 | En el template agrego _data-id="${movie.id}"_ y _data-category="${category}"_ 882 | 883 | ```javascript 884 | 885 | function videoTemplate(movie, category) { 886 | return( 887 | `
888 |
`
895 | )
896 | }
897 |
898 |
899 | ```
900 |
901 | A los que después puedo acceder desde JS con el método _.dataset.nombre_.
902 | En este caso:
903 |
904 | ```javascript
905 |
906 | $element.dataset.id
907 | $element.dataset.category
908 |
909 | ```
910 |
911 |
912 |
913 |
889 | 
890 |
891 | 892 | ${movie.title} 893 |
894 |914 |
915 |
916 | 917 | ## 18 - Encontrando elementos en la lista 918 | 919 | ### [Find](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/find) 920 | 921 | Para seleccionar un elemento particular de un array usamos el método [_find()_](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/find). 922 | 923 | El método [_find()_](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/find) itera por los elementos de un array y devuelve el valor del primer elemento que cumple con la condición que le pasamos a travéz de la función parámetro que recibe. Si ningún valor coincide con la condición de búsqueda devuelve _undefined_. Vale remarcar que no itera por todos los elementos del array, sino sólo hasta el elemento que devuelve. 924 | Recibe una función de parámetro y esta a su vez un parámetro _this_ que referencia a mismo array. 925 | 926 | ```javascript 927 | 928 | var arrayX = [5, 12, 8, 130, 44, 180] 929 | 930 | var found = arrayX.find( e => e > 10 ) 931 | var found2 = arrayX.find( e => e < 190 ) 932 | 933 | console.log(found) 934 | // 12 935 | 936 | console.log(found2) 937 | // 5 938 | 939 | ``` 940 | 941 | ### [Switch](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/switch) 942 | 943 | Otra estructura usual de datos es el [_switch_](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/switch). 944 | Es una estructura multiple-condicional y se utiliza normalmente cuando los condicionales son 3 o más. 945 | Su funcionamiento es similar a un if- else if - else. 946 | 947 | Este evalúa una expresión y la compara con el valor que asignamos en cada _case_, si coincide con alguno ejecuta el código dentro de ese _case_, sino sale por el _default_ case. 948 | 949 | Sintaxis: 950 | 951 | ```javascript 952 | 953 | var frut = 'Papayas'; 954 | 955 | switch (frut) { 956 | case 'Oranges': 957 | console.log('Oranges are $0.59 a pound.') 958 | break 959 | case 'Mangoes': 960 | case 'Papayas': 961 | console.log('Mangoes and papayas are $2.79 a pound.') 962 | break 963 | default: 964 | console.log('Sorry, we are out of ' + expr + '.') 965 | } 966 | 967 | // "Mangoes and papayas are $2.79 a pound." 968 | 969 | ``` 970 | 971 |
972 |
973 |
974 | 975 | ## 19 - Animaciones 976 | 977 | Tanto como en CSS puro, con javaScript también podemos hacer efectos de fade con CSS. 978 | 979 | En esta clase obtenemos el objeto _image_ del template que generamos para cada película y le agregamos una clase previamente declarada en nuestro CSS. 980 | Usamos el eventListener _'load'_ para imprimir todas las imágenes juntas una vez traidas de la API. 981 | 982 | 983 | ```CSS 984 | 985 | .fadeIn { 986 | animation: 2000ms fadeIn; 987 | } 988 | 989 | @keyframes fadeIn { 990 | 0% { 991 | opacity: 0; 992 | } 993 | 994 | 100% { 995 | opacity: 1; 996 | } 997 | } 998 | 999 | ``` 1000 | 1001 | ```javascript 1002 | 1003 | const image = movieElement.querySelector('img') 1004 | image.addEventListener( 'load', event => event.srcElement.classList.add('fadeIn') ) 1005 | 1006 | ``` 1007 | 1008 | También separamos el código de los llamados asíncronos a la API para que al obtener un género de películas las imprima directamente. Esto va a ayudar a optimizar nuestra aplicación en cuanto a tiempo de carga. 1009 | 1010 | 1011 | 1012 | 1013 | 1014 |
1015 |
1016 |
1017 | 1018 | ## 20 - Manejo de errores 1019 | 1020 | Para poder manipular situaciones en las que la conexión a la API por cualquier cosa de un error utilizamos la estructura [_**try...catch**_](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/try...catch). 1021 | 1022 | 1023 | ```javascript 1024 | 1025 | try { 1026 | // ejecuta si todo está bien en el callback 1027 | } catch(error) { 1028 | console.log(error) 1029 | } 1030 | 1031 | ``` 1032 | 1033 | Para manipular los errores en JS usamos el prototipo [Error()](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error). Con este podemos crear nuestro propio _objeto error_ customizado. 1034 | 1035 | new Error(message) 1036 | 1037 | 1038 | Y para mostrar el error se puede usar [_throw_](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/throw). 1039 | 1040 | throw expresion; 1041 | 1042 | 1043 | 1044 | 1045 | 1046 |
1047 |
1048 |
1049 | 1050 | ## 21 - LocalStorage 1051 | 1052 | 1053 | Para respaldar los datos que pedimos a la API utilizamos [_**localStorage**_](https://developer.mozilla.org/es/docs/Web/API/Window/localStorage) ó [_**sessionStorage**_](https://developer.mozilla.org/es/docs/Web/API/Window/localStorage). Son objetos nativos en javascript. 1054 | 1055 | [_**localStorage**_](https://developer.mozilla.org/es/docs/Web/API/Window/localStorage) nos permite guardar los datos sin un tiempo de expiración, es decir persisten entre ventanas/tabs con el mismo origen incluso al cerrar el navegador. 1056 | 1057 | [_**sessionStorage**_](https://developer.mozilla.org/es/docs/Web/API/Window/localStorage) nos permite guardar los datos con tiempo de expiración. Son eliminados cuando finaliza la sesion de navegación, lo que ocurre cuando se cierra el navegador. 1058 | 1059 | [_**localStorage**_](https://developer.mozilla.org/es/docs/Web/API/Window/localStorage) es un objeto dentro de window. 1060 | 1061 | Para acceder: 1062 | 1063 | ```javascript 1064 | 1065 | window.localStorage 1066 | 1067 | // por defecto el navegador lo reconoce y no hace falta anteponer el 'window' 1068 | localStorage 1069 | 1070 | ``` 1071 | 1072 | Para limpiar/borrar datos: 1073 | 1074 | ```javascript 1075 | 1076 | window.localStorage.clear() 1077 | 1078 | ``` 1079 | 1080 | Setear un dato: 1081 | 1082 | 1083 | ```javascript 1084 | 1085 | window.localStorage.setItem('item','value') 1086 | 1087 | ``` 1088 | 1089 | Obtener su valor: 1090 | 1091 | ```javascript 1092 | 1093 | window.localStorage.getItem('item') 1094 | // value 1095 | 1096 | ``` 1097 | 1098 | En [_**localStorage**_](https://developer.mozilla.org/es/docs/Web/API/Window/localStorage) no puedo guardar objetos directamente. Para poder hacerlo, hay que previamente convertir el objeto en un string. 1099 | Esto puedo hacerlo con el método, también nativo de javascript, [_**JASON.stringify()**_](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify): 1100 | 1101 | ```javascript 1102 | 1103 | var object = JSON.stringify({'flor': 'roja'}) 1104 | window.localStorage.setItem('item', object) 1105 | window.localStorage.getItem('item') 1106 | // "{"flor":"roja"}" 1107 | 1108 | ``` 1109 | 1110 | Para re-convertirlo en objeto luego de obtenerlo puedo usar [_**JSON.parse**_](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/parse): 1111 | 1112 | 1113 | ```javascript 1114 | 1115 | const objectBack = window.localStorage.getItem('item') 1116 | 1117 | JSON.parse(objectBack) 1118 | // {flor: "roja"} 1119 | flor: "roja" 1120 | > __proto__: Object 1121 | 1122 | ``` 1123 | 1124 |
1125 |
1126 |
1127 | 1128 | ## 22 - Obteniendo los datos almacenados 1129 | 1130 | 1131 | 1132 | 1133 |
1134 |
1135 |
1136 | 1137 | ## 23 - Conclusiones del curso 1138 | -------------------------------------------------------------------------------- /postCSS.md: -------------------------------------------------------------------------------- 1 | # Curso de PostCSS 2 | # 3 | # Index 4 | # 5 | 6 | ## [Sección I - Introducción](#sec1) 7 | ### [01 - Bienvenida al Curso de PostCSS](#clase1) 8 | ### [02 - Instalación y uso del cliente de PostCSS](#clase2) 9 | ### [03 - Instalando y usando plugins en PostCSS](#clase3) 10 | 11 | # 12 | 13 | ## [Sección II - NextCSS - El futuro de CSS](#sec2) 14 | ### [04 - Instalando CSSNext](#clase4) 15 | ### [05 - Los nuevos módulos de CSS](#clase5) 16 | ### [06 - Variables](#clase6) 17 | ### [07 - Operaciones matemáticas con CSS - CALC ](#clase7) 18 | ### [08 - Media Queries](#clase8) 19 | ### [09 - Imágenes retina con Post CSS - Image-set](#clase9) 20 | ### [10 - Colores](#clase10) 21 | ### [11 - Fuentes](#clase11) 22 | ### [12 - Selectores Personalizados](#clase12) 23 | ### [13 - Pseudo Clases](#clase13) 24 | ### [14 - Indentando (nesting)](#clase14) 25 | 26 | # 27 | 28 | ## [Sección III - Plugins de PostCSS](#sec3) 29 | ### [15 - Modulariza tu código con postcss-Imports](#clase15) 30 | ### [16 - Auto font-face con FontMagician](#clase16) 31 | ### [17 - Validar CSS con Stylelint](#clase17) 32 | ### [18 - Agrupar Media Queries con mqpacker](#clase18) 33 | ### [19 - Optimiza CSS para producción con CSSNano](#clase19) 34 | ### [20 - Vocabulary for Marketing](#clase20) 35 | 36 | # 37 | 38 | ## [Sección IV - Conclusiones](#sec4) 39 | ### [21 - Conclusiones del Curso de PostCSS](#clase21) 40 | 41 | # 42 | 43 |
44 |
45 |
46 | 47 | # Sección I - Introducción 48 | 49 |
50 |
51 | 52 | ## 01 - Bienvenida al Curso de PostCSS 53 | 54 | ### Qué es postCSS? 55 | 56 | PostCSS es una herramienta para transformar CSS con JavaScript. 57 | Es una herramienta construida en JavaScript que sirve para manipular los archivos de CSS y convertirlos en "un mejor CSS". 58 | 59 | Existen nuevos features de CSS que no son todavía soportados por todos los navegadores. 60 | PostCSS trabaja con features y sintaxis de CSS4 transpilando un archivo de código en CSS3 que todos los navegadores hasta la fecha puedan interpretar. 61 | 62 | 63 | 64 | 65 | 66 | 67 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 68 | 69 |
70 |
71 |
72 | 73 | ## 02 - Instalación y uso del cliente de PostCSS 74 | 75 | PostCSS puede utilizarse con WebPack, Gulp, Grunt o casi con cualquier administrador de entornos. 76 | También corre con su propio cliente. 77 | 78 | Para instalar tenemos que tener seteado previamente node.js. 79 | En terminal, voy a la carpeta del proyecto y: 80 | 81 | npm init 82 | 83 | Se genera en la carpeta principal un archivo `package.json` con datos de nuestro proyecto. 84 | Luego podemos instalar PostCSS. 85 | 86 | npm i postcss-cli --save 87 | 88 | [Referencia aquí...](https://github.com/postcss/postcss-cli) 89 | 90 | Se agrega entonces la dependencia. Podemos ver la versión en el `package.json` file. 91 | 92 | ``` 93 | 94 | "dependencies": { 95 | "postcss-cli": "^6.1.2" 96 | } 97 | 98 | ``` 99 | 100 | Para invocar esta dependendencia local desde el terminal usamos `npx postcss` segido del comando que necesitemos: 101 | 102 | ```terminal 103 | 104 | npx postcss --version // imprime versión instalada 105 | 106 | 107 | /|\ 108 | // // 109 | // // 110 | //___*___*___// 111 | //--*---------*--// 112 | /|| * * ||/ 113 | // ||* v6.1.2 *|| // 114 | // || * * || // 115 | //_____||___*_________*___||_____// 116 | 117 | 118 | 119 | npx postcss --help // imprime comandos 120 | 121 | . 122 | . 123 | . 124 | 125 | Basic options: 126 | -o, --output Output file [string] 127 | -d, --dir Output directory [string] 128 | -r, --replace Replace (overwrite) the input file [boolean] 129 | --map, -m Create an external sourcemap 130 | --no-map Disable the default inline sourcemaps 131 | --verbose Be verbose [boolean] 132 | --watch, -w Watch files for changes and recompile as needed [boolean] 133 | --env A shortcut for setting NODE_ENV [string] 134 | 135 | . 136 | . 137 | . 138 | 139 | ``` 140 | 141 | Es posible crear scripts desde el `package.json` pero es realmente más agil para mantener un flujo de trabajo el hacerlo por línea de comandos. 142 | 143 | Sobre todo lo que vamos a necesitar saber es cómo generar el archivo en el que se va a transpilar nuestro código CSS. 144 | Este lo configuramos de la siguiente manera en terminal: 145 | 146 | npx postcss ruta/archivo/origen/style.css -o ruta/archivo/transpilado/style.css 147 | 148 | Si quiero generar un archivo.css con otro nombre puedo hacerlo directamente en el comando anterior: 149 | 150 | npx postcss ruta/archivo/origen/style.css -o ruta/archivo/transpilado/otroNombre.css 151 | 152 | 153 | Entonces , lo que ahora nuestro index invocará será el archivo transpilado. Hay que modificarlo en el . 154 | 155 | Si agrego un `-w` al final del comando anterior, npm quedará pendiente de los cambios que vallamos haciendo en el archivo e irá actualizando el transpilado cada vez que guardemos los cambios en nuestro archivo.css de origen. 156 | 157 | 158 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 159 | 160 |
161 |
162 |
163 | 164 | ## 03 - Instalando y usando plugins en PostCSS 165 | 166 | PostCSS es una herramienta para transformar CSS con JS y todo lo que hará es transpilar un archivo legible para multiples browsers a partir de los parámetros de los plugins que instalemos. 167 | 168 | [Referencia plugins](https://www.postcss.parts/). 169 | 170 | Podemos también generar nuestros plugins personales. 171 | 172 | El primero que usaremos es **autoprefixer**. Este es el plugin más popular y existe desde antes de postCSS. 173 | Lo que este plugin hace es agregar prefijos como -webkit- o -moz- por ejemplo a las propiedades de CSS siempre que sea necesario y los navegadores no soporten esa propiedad. 174 | 175 | Para instalar: 176 | 177 | npm i --save autoprefixer 178 | 179 | Se agrega entonces la dependencia. Podemos ver la versión en el `package.json` file. 180 | 181 | 182 | ``` 183 | 184 | "dependencies": { 185 | "autoprefixer": "^9.4.9", 186 | "postcss-cli": "^6.1.2" 187 | } 188 | 189 | ``` 190 | 191 | Para utilizarlo hay dos formas. 192 | 193 | • De forma básica o por defecto a través del terminal con el comando `-u` después de `-w`: 194 | 195 | npx postcss src/css/home.css -o dist/css/home.css -w -u autoprefixer 196 | 197 | • De forma custom generando un archivo `postcss.config.js` en el root de nuestro proyecto. 198 | 199 | + carga por defecto 200 | 201 | ```javascript 202 | 203 | module.exports = { 204 | plugins: [ 205 | require('autoprefixer') 206 | ] 207 | } 208 | 209 | 210 | ``` 211 | + carga avanzada agregando prefijos para propiedades específicas de CSS: 212 | 213 | ```javascript 214 | 215 | 216 | module.exports = { 217 | plugins: [ 218 | require('autoprefixer')({ 219 | grid: true 220 | }) 221 | ] 222 | } 223 | 224 | 225 | ``` 226 | 227 | Como algo todavía más específico otra posibilidad es la de encender e interrumpir el mecanismo de generar prefijos por cada clase o id de css es nuestro `style.css` de origen. 228 | [Ver documentación](https://github.com/postcss/autoprefixer) por propiedades ajustables. 229 | 230 | Ej: 231 | 232 | ```CSS 233 | 234 | .a { 235 | transition: 1s; /* será prefixeada */ 236 | } 237 | 238 | .b { 239 | /* autoprefixer: off */ 240 | transition: 1s; /* no será prefixeada */ 241 | } 242 | 243 | .c { 244 | /* autoprefixer: ignore next */ 245 | transition: 1s; /* no será prefixeada */ 246 | mask: url(image.png); /* será prefixeada */ 247 | } 248 | 249 | 250 | ``` 251 | 252 | 253 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 254 | 255 |
256 |
257 |
258 | 259 | # Sección II - CSSNext - El futuro de CSS 260 | 261 |
262 |
263 | 264 | ## 04 - Instalando CSSNext 265 | 266 | **[CSSNext](http://cssnext.io/)** es un paquete de plugins. 267 | Incluye un plugin por cada una de las nuevas características todavía no soportadas por los browsers de CSS. 268 | 269 | 270 | 271 | 272 | 273 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 274 | 275 |
276 |
277 |
278 | 279 | ## 05 - Los nuevos módulos de CSS 280 | 281 | 282 | 283 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 284 | 285 |
286 |
287 |
288 | 289 | ## 06 - Variables 290 | 291 | 292 | 293 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 294 | 295 |
296 |
297 |
298 | 299 | ## 07 - Operaciones matemáticas con CSS - CALC 300 | 301 | 302 | 303 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 304 | 305 |
306 |
307 |
308 | 309 | ## 08 - Media Queries 310 | 311 | 312 | 313 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 314 | 315 |
316 |
317 |
318 | 319 | ## 09 - Imágenes retina con Post CSS - Image-set 320 | 321 | 322 | 323 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 324 | 325 |
326 |
327 |
328 | 329 | ## 10 - Colores 330 | 331 | 332 | 333 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 334 | 335 |
336 |
337 |
338 | 339 | ## 11 - Fuentes 340 | 341 | 342 | 343 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 344 | 345 |
346 |
347 |
348 | 349 | ## 12 - Selectores Personalizados 350 | 351 | 352 | 353 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 354 | 355 |
356 |
357 |
358 | 359 | ## 13 - Pseudo Clases 360 | 361 | 362 | 363 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 364 | 365 |
366 |
367 |
368 | 369 | ## 14 - Indentando (nesting) 370 | 371 | 372 | 373 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 374 | 375 |
376 |
377 |
378 | 379 | # Sección III - Plugins de PostCSS 380 | 381 |
382 |
383 | 384 | ## 15 - Modulariza tu código con postcss-Imports 385 | 386 | 387 | 388 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 389 | 390 |
391 |
392 |
393 | 394 | ## 16 - Auto font-face con FontMagician 395 | 396 | 397 | 398 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 399 | 400 |
401 |
402 |
403 | 404 | ## 17 - Validar CSS con Stylelint 405 | 406 | 407 | 408 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 409 | 410 |
411 |
412 |
413 | 414 | ## 18 - Agrupar Media Queries con mqpacker 415 | 416 | 417 | 418 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 419 | 420 |
421 |
422 |
423 | 424 | ## 19 - Optimiza CSS para producción con CSSNano 425 | 426 | 427 | 428 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 429 | 430 |
431 |
432 |
433 | 434 | ## 20 - Vocabulary for Marketing 435 | 436 | 437 | 438 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 439 | 440 |
441 |
442 |
443 | 444 | # Sección IV - Conclusiones 445 | 446 |
447 |
448 | 449 | ## 21 - Conclusiones del Curso de PostCSS 450 | 451 | 452 | 453 | [To top...](https://github.com/pablojorgeandres/notas-clases/blob/master/postCSS.md#index) 454 | 455 | --------------------------------------------------------------------------------