Las BASES del diseño WEB | CLASE 2

Las BASES del diseño WEB | CLASE 2


The Digital Revolution is something that came to change our lives forever. All the information in the information in the world, our favorite music, series and movies, YouTubers, influencers even our friends are here, in our pocket, in just a click of distance. So close like you are about to understand how this works. Everybody welcome to the second episode of: “THE DEFINITIVE GUIDE: PROGRAMMING” On December 1990, Geneva, Switzerland, the Cern putted into function the first web server in history. The idea was to create a system that allowed researchers to share information easily 4 years later, it would give the access to the individuals and Internet enterprises, quickly becoming websites the most used to offer information. Perhaps most people have been introduced to the world of information after the big blue colossus born in the campus of Harvard. But a few years ago, most of the Internauts wanted to have their own websites. Google was not the most popular search engine and anyone who had their own space in the web, probably had a little bit of knowledge about the html code. Later the era of blogs arrived, and everyone made one. Here everyone could make their own website without knowing anything about programming, and every user controled the information that shared. But then the social networks came and we ended the age of personal websites, and the web hegemony was of a few colossus We arrived to the point where everyone has accounts in several social networks, but few know how they work Having a personal website nowadays is something that does not make sense, but is still a fundamental thing for a great ammount of companies need their own space that organize and visibilize them in a world everyday more globalized by the network. Welcome all to: “Web Development for Dummies” I’m your host, Hackerguy And today i’m gonna show you how to create all the visual stuff and the languages like HTML, CSS and JavaScript All you need to now about the foundings of Web Design HTML, CSS and JavaScript, this are the bases on web design of today, and by which every website that you know works with They deal with everything related to visual design, the color of the letters, their size, even their animations, are posible thanks to them. HTML is a language of standarized market that, through the use of labels, gives instructions to the navegator, to visualize a website accurately. Here we go with a few examples: Define the tittle of the website. Allows to create links between different websites or pages from the same site Allows to create a list of elements. First Element Second element Third element Shows a text in black Shows a highlighted text Shows a inclined text Creates a division In the beginning and first years of the development of the Internet this was a problem and a pain in the head for the web developers, because it took a lot of time to standarize the HTML, making that depending on which navegator you had, a same website could look different. Even that in a big number, the actual navegators mantein an estándar very similar of how interpretate the elements of a website, there are Technologies that are not avaible in everyone of them For example, the image format WEBP developed by Google, which allows to have images on great quality with a low weight. What else do you want? HTML takes care of the structure of the website, it would be similar to the beams of a bulding, is the model which gives form to the elements inside a website, but without specify the shape, colors, position or type of letter. But if it was only by HTML, websites could only have black letters, some images in their original shape and maybe some video, but without specify a shape on every one of this elements Something that the old internauts probably remember An example of this, is the first website created on history, which is made 100% on HTML, and only has with some text, hyperlinks and a tittle highlighted in bold. Because of this, the actual web as you know it, has developed thanks to a technology called CSS (CASCADING STYLE SHEETS) or also called CASCADE STYLE PAGES, which is the technology which gives the design, color to the html, making possible to order the elements inside a website as we want. Basically, it’s a layer of styles, which allows us to select objects like an image or a form, and give it the style that we want, making it bigger or smaller, changing the color of a text or to order the elements of a list. Through the use of kinds, we can identify the labels of the HTML code and add styles, for example: The kind of CSS can be utilizad adding a point in front of the name. In this example, every text that is inside the label div, with the style kind will appear on a red color So we have three div elements, but only two of them have the “Style” kind, the two are going to show appear in red, and the one left, in black. It would end up like this CSS was born in 17 December of 1996 before the development of this one, all the presentational of the html documents was included in the html code For example: The colors of the letter, the styles of the background how the elements were aligned, the edges and also the sizes were described explicitly Sometimes in a very redundant way, becoming ridiculous All of that inside the HTML like a sandwich CSS allows the designers to move all the presentational information to another file, to the style sheet, ending with a more simple html code And all of this before the born of html, in 1993 And in the moment of its creation counted with few resources but they were more than enough to create the first websites like we know them today But nowadays we could take them as vulgar in those days, having a website with images on the background and red letters automatically made you the envy of every Cybercoffee With time and the great active comunity of programmers that css have it has been incorporated some new functions, that goes beyond ordering elements inside a website being able to achieve creating animations enterily with css or even simple games. This functions that have been developed in the present, mainly after the year 2010 until the moment could be made with the oldest technologies, like the forgotten flash which allowed to execute animations in your navegator, but that consumed a lot of resources and had some security problems, because of that Steve Jobs killed it at not incorporating it into the iPhones, because it consumed a lot of battery. But there is a language that with time it started to develope, and in the last years became very popular, allowing to obtain similar results to the one obtained by Flash in its moment, and which is completely executed by the navegator. This lenguage is Java. Trough JavaScript (not confuse it with Java) you can add interactivity to the site, like for example, send an alert, detect when you click on an element, create complex animations or even games on the navegator. JavaScript is a technology that has developed a lot in the last years, that even if started as a lenguage that was executed on the same side as the client, being interpreted by your navegator, today with the new technologies, like NodeJS, we can use it alongside of the server, allowing to program backends enterily in JavaScript. JavaScript allows us to interact with elements of the website for example: Giving back an answer when we click on a information button To detect a particular element we are going to use the ID property on the HTML labels. Different to class, where you select all the elements that have the same type ID is an unique identificator, wich makes reference to only one HTML label. In this code, there are 4 point to analyze First in the part where it says “Document”, that we utilize to make reference to the HTML document whole and every label wich makes it up. But like we only want to select one in particular, we apply it a function called getElementByld that searched the label that has the ID that we specify, in this case “Banana” Once you find the Id, we re going to apply another function called addEventListener, which allow us to execute a specific function, when we interact with and HTML element, in our case when we click it. This way we define the parameter “click”, For example we could activate the function when we pass the mouse over an element of the parameter “mouseover” The second parameter of the function addEventListener is another function, that has no parameter, wich only serves to summon the alert that executes when you do click on the HTML element. This way, when we click the text “Clickme”, an alert is going to come with a text that says: “You did it, dude” Every use of this technologies, HTML,CSS and JavaScript, made web apps to be more robust, and that their codes became more extense, so nowadays Frameworks appeared, which are production environments, which allows to order the development of the code that you can use to make a bigger app, in an ordered way and reusing the bigger ammount of code possible to make it more eficient. This enviroments are financied by enterprises like Facebook in the case of Reactjs, or Google with Agularjs and Angular2. Also there is a third famous Framework called VUE.JS Through this development enviroments you can use the last updates on javascript in every navegator, even if the navegator doesn’t have with those characteristics, because the sites have an instance of compilation where every new code translates as old code in the most eficient way possible to execute in every navegator, and with this solving most of the compatibility errors that existed until that moment. With the massification of the internet, we don’t find someone without a social network It’s almost so rare like a few years ago, finding another internaut, The base of these websites is based on us memorizing many username and passwords and the Login became the main door of the most used websites. But we are going to talk about that in the next episode. Space Odyssey inmortalize, and in a representative way that first step in the evolution towards becoming technologically superior beings: The use of tools. If we go to the definition, technology is nothing more than a set of knowledge of techniques. Memories, the procedure and the subject that bring us here today: Tools. When programming, it’s not about programing languages. There are a variety of apps and technologies that let us develop and apps on a more neat way, giving us a lot of tools so we could develop a more clean and faster code. Increasing our eficiency and reducing the times of development with the objective of improve the users’s experience. So this time we are going to turn down the rythm, take a breakfast in the office and we are going to center in the order, the most important point on any project. Thank you so much for seeing this episode we hope that you’ve enjoyed it we invite you to subscribe to the course so you can still see it and to subscribe to our channel if it’s the first time on this channel An alert will appear saying: “You did it dude”

Comments

  1. Post
    Author
  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
  6. Post
    Author
  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
  10. Post
    Author
  11. Post
    Author
  12. Post
    Author
  13. Post
    Author
  14. Post
    Author
  15. Post
    Author
  16. Post
    Author
  17. Post
    Author
  18. Post
    Author
  19. Post
    Author
    Juxxon23

    El mismo problema del episodio anterior, la parte de "hackerguy" no se puede entender adecuadamente por el filtro de vhs que colocan y va muy rápido

  20. Post
    Author
  21. Post
    Author
  22. Post
    Author
  23. Post
    Author
  24. Post
    Author
  25. Post
    Author
  26. Post
    Author
  27. Post
    Author
  28. Post
    Author
  29. Post
    Author
    Luis Llata

    Esas personas que ahora utilizan Spotify, jamás sabrán lo que era utilizar Ares…
    Y terminar con 98 virus, 40 troyanos y 3 testigos de Jehová…

    😎!!! Saludos 🇵🇪✓

  30. Post
    Author
  31. Post
    Author
  32. Post
    Author
  33. Post
    Author
    Renzo Montenegro

    AYÚDENME. Hey banana, me gusta tu forma de explicar las cosas, sinceramente me causas la impresión de que eres una persona muy culta o que aprovechas esta vida para llenarte más de información cada día. Me encantaría y no sé si a los demás, que hagas un video diciendo lo que haces en tu día a día, o si no, citando un formato ya usado en tu canal. 5 Hechos | Ser culto. O algo parecido.

    AYÚDENME DANDO LIKE!

  34. Post
    Author
  35. Post
    Author
    Áiden 7

    no soy programador , por ende no entiendo que programa usan para programar y no entiendo que hacen con ese filtro de mier¨¨¨ emmm nada no me sirve , perdon si soy muy noob en esto..

  36. Post
    Author
  37. Post
    Author
  38. Post
    Author
    Ángel Cr

    Hola banana, me gusta mucho tu canal pero la verdad es que prefiero que este se siga enfocando en filosofía, historia, etc.
    ¡Extraño los cuentos rancios con mucha reflexión sobre la vida!
    Estaría padre que hicieras un video sobre cómo ha cambiado el poder a lo largo de la historia y también de la naturaleza humana.
    Como cosas negativas de nuestro ser nos ha hecho tan exitosos como especie.

  39. Post
    Author
    Eduin Morales

    Interesante aporte, es una lástima el filtro VHS que no permite ver claro la pantalla. Si esto es para personas con 0 conocimientos créeme que no aprenderán nada

  40. Post
    Author
  41. Post
    Author
  42. Post
    Author
  43. Post
    Author
    Luis Felipe Hernández

    El video se nota la produccion, pero el echo de encaminar a las personas a comprender el codigo, no se pude apreciar por el filtro que se utiliza al momento de programar.

  44. Post
    Author
    Hernan Castro

    Siempre me gustaron tus videos, pero esta serie sobre programacion la verdad que hasta ahora no entiendo para donde va, es decir no aprendo nada con esto y mensionan cosas pero no ponen imagenes de muestra y como dijo alguien la parte donde escriben codigo no se lee bien por el efecto del video.

  45. Post
    Author
    Estaba Aburrido

    Cuando el boludo de hackerman escribe código en su TV viejo no se entiende una m*rd por lo borroso que sale.

  46. Post
    Author
    Federico Seijo

    Está buena la idea, pero traten de cambiar un poco el formato del vhs y la velocidad de la explicación. Si no supiera programar no hubiera entendido casi nada. No se apuren, lo importante es que queden claras las ideas básicas si de eso va el curso. Uno entiende este mundo cuando comprende bien los pilares que lo sostienen, el resto es tecnología.

    printf("buena suerte! ");

  47. Post
    Author
    Luisito2212

    La verdad es que la parte de hacker guy es completamente innecesaria, no solo por el hecho de que no se ve nada del código que ese es un gran problema sino porque no es para nada entendible, sé que la intención es buena pero la ejecución para llegar al resultado no, sé pretende dar un poco de ejemplo de lo que se explica pero es obvio que sólo los que conocen del tema sabrán entenderlo (por los tecnisismos y la velocidad en la que pasa todo) y para ellos según yo no va dirigido al video. El contenido es divulgativo y para despertar el interés en el tema, pero deberían cambiar esa sección por algo que en verdad aporte algo al video. Bueno esa es mi opinión, gracias por leer y por este contenido banana.

  48. Post
    Author
  49. Post
    Author
    aomine- Code

    Increíble trabajo, y hasta el momento entiendo que el objetivo de la serie es mostrar a las personas este maravilloso mundo del desarrollo web e informar y dar a conocer los puntos más importantes y esenciales de este mismo, mas no tirar código (como vulgarmente lo llamo :v) ya que con la vaga explicación es casi imposible para una persona nueva en este mundo hacer algo de código(HTML, CSS y JS), no lo se pero pienso que la organización del curso es primero dar toda la teoría e información disponible y unas migajas de código, para luego poder enfocarse en el código y hacer un practica real como una pagina o app web. espero que sea algo así. dicho todo esto bestial nivel de producción, edición y explicación, mis respetos, aprecio y valoro mucho el trabajo de este equipo de personas, espero las próximas clases con muchas expectativas :).

  50. Post
    Author
    jesus villegas galvan

    Soy desarrollador web y no se por que pero siento que este video es una ofensa a todos los canales que tratan exclusivamente de tecnologías web XD

  51. Post
    Author
  52. Post
    Author
  53. Post
    Author
  54. Post
    Author
    matias lopez

    Con todo repesto banana pero si esta serie se trata de tutoriales de como programar una web basica, deberia explicarse mejor los conceptos basicos y dar un eplicacion auque sea por arriba pero precisa de los que es una clase, objetos, variables etc.
    Esto va muy rapido y demaciado por ensima explicado, se saltean cosas claves que le sera imposible entender a alguien que recien comienza o lo ve. Entiendo que los videos son cortos para dar una ecplicacion tan detallada, pero se pueden mejorar los videos y extender la serie. Si no para eso hagan un documental de lo que es programacion web de unos 50 min como si fuera discovery o almenos mejores la explicacion y saquen al chabon que codifica y pongan una pantalla simple pero que se vea bien.

  55. Post
    Author
    javier 300xd

    Si les da tiempo de editar pueden mover a hacker guy a los 2000 en vez de los 90 no veo muy bien lo que escribe en la pantalla

  56. Post
    Author
    kan sama

    no entiendo nada…. CREO! Qué fue error de ponerlo como una "Clase" para realmente aprender a hacerlo, sino una destinada a entender cómo funciona (no sé creo que por ahí va el problema"

  57. Post
    Author
    W12 Hot Wheels

    Vaya, a pesar de que parece que este estilo de videos de enseñansa no parece ser para todo el mundo, yo siempre he deseado algo igual a este material, es dificil encontrar este formato, sobre todo en el ambito de la programación… Asi que una vez mas, gracias chicos!! :*

  58. Post
    Author
  59. Post
    Author
  60. Post
    Author
  61. Post
    Author
    Moises Gonzales

    Banana lo estan haciendo muy a tu estilo y esta bien me gusta el toque de originalidad que tiene el video

  62. Post
    Author
  63. Post
    Author
  64. Post
    Author
  65. Post
    Author
  66. Post
    Author
    Ever Andres Cordoba Arriaga

    Amo los vídeos de la banana, todo el equipo de la banana, son los putos amos, pero estos 2 videos me tiene un poco triste 😔😔 ese filtro no deja ver la estructura de los códigos y quedó como perdido.

  67. Post
    Author
  68. Post
    Author
    Nícolas Cheneaux

    Literalmente se nota con todo respeto que no tomaron nunca una clase de programacio, men re acelerado, osea vieron loops, condicionales en un video ? Dude come on eso se ve como en 2 semanas (Por lo menos en la universidad) aparte no se ve nada xdxd, pero bueno la edicion y el amor que se nota que le pusieron es un factor totalmente distinto al que si se logra realmente aprender en este video.

  69. Post
    Author
    Julio Osorio

    Supongo que todo el curso ya esta grabado, por lo que, las criticas no importan y pues eso resulta en que el curso resulto ser horrible, a causa de una "sobreproduccion".
    Sabemos que tienes un presupuesto y todo, pero no sobreediten, sobreactuen, etc.

  70. Post
    Author
    Julio Osorio

    Se programar, pero aun asi, me puedo dar cuenta que las explicaciones estan mal.
    Por lo menos hubieran usado un editor de codigo. ¿NO?

  71. Post
    Author
    Joaquin Ugarte

    Subi cosas de politica y filosofia banana siempre con el tiki tiki tiki tiki programando y no subiendo los videos que me gustaban en tu canal.
    Igual me gustan estos videos pero no te descentres es mucho muy importante

  72. Post
    Author
    TUOTRO YO

    Esto cumple como algo informativo en vez de ser una clase , el mismo problema del vídeo anterior. Soy desarrollador web y pues la información está bien pero no funciona para poder enseñar y que alguien aprenda

  73. Post
    Author
    Tomás Gerardo Juárez Hernández

    Caray, ya se les extrañaba, puras estupideces en YouTube y ustedes no suben videos :c

  74. Post
    Author
  75. Post
    Author
    Alejhandro Marin

    Siendo alumno de programacion ya casi por egresar, siento que este viedo tiene muchos errores, tanto de enseñanza como de la naturalidad del lenguaje de la programación real, es como información sacada de Wikipedia, aunque no lo sea quizás, pero se siente así

  76. Post
    Author
  77. Post
    Author
    Diego

    Más parece un show geek de Netflix, efectos y filtros innecesarios. No solamente en este caso (el código) sino también en los demás videos del canal, saturas.

    Pásate por QuantumFracture.

  78. Post
    Author
    entrenador rojo

    Filtro de vhs.
    Si me la haces una vez culpa tuya
    Si me la haces dos veces que vergüenza
    No creo que vayas a hacerlo tres veces
    Pd: los quiero equipo banana son unos cracks 🙂

  79. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *