WETS curso visuacypractico | Ecosistema web Primeras lineas de cédigo \ Tags HTML \ Servidores, URLs, paginas y recursos Pa yah Fa hoa Cs are Tey STW 9 Bw mys: GD afiax BO Osit civey(2353 curso visual y prActico Direccin Ediorial ——_—Atanci6n a eetr, MiguolLodertremer —_suseripcionas y ventas aan usershop@radusers.com rs 454011) 4110-5700 Mv +52-58-8:21-9560 Publicidad ublidade@redusers.com Produecion grafiea —*54/011/41108700 Gustavo De Matteo Fernando Ojam Autor Fernando Luna WEB Full Stack oY Taced ICOM icedsnecine| fey Codss die) tines Argenina Cp Von aware sd. Ee 908 io Brea el 54471) 4506 964008 a Dec ‘altplnas Si QAP Siew Pee 1:2 (SSM, Ben Awe 540 4406-0118 Mba DF ea iia Ad, hte? Ia ache Pda al Ct, el 361268 Mein ler Copia situs de pes, bes ris SA CV Cero W 58D Cl Gras Mec, Deen WTSCACD Ds eal (oo Te 51-67. an Cebu Skea SA Fania de Para E35 pa 2a ee Lr St «1250 rem 21 ray Ee SAL, Prey 152, engi e230 9% 0765 Vesa Der bd Cans Bou Ce Aas Eco oe oe as P29 u San Nowa al La Paz Cass, 88212-4820. Go yeuay rcs Sie Ten, it zit; Fox oa S16 a Novora do 180,130, C'SORE, Gund Auipona do Bases Aves. Arar Fata Ws edn yCmgt © BA.6254-855 Ts cos ena tpl rps ta nen par po ranma. ene pas pep wt de (sacar Laer ye sume esa alr iy cle crea eta de ezc nora yo easiness yucca eke, nano ptr at afro pnd ob Ws es abe eres WS, UE lo MP SAERS OS EN npn SRS. (ase 225 ya, an Baa Ac, | ECOSISTEMA WEB IE Bienvenidos al curso a TIBI Cuatro preguntas sobre ee Lasenolo web GB La importancia del navegador web GIB Nuestra primera linea de codigo TIBI {Como funcionan los tags? HIE] Cémo funciona la web? IE] Mapa de tecnologias HIE] Nuestra caja de herramientas CONTENIDO ADICIONAL ONLINE (digo fuente snaciay 40] elementos grificos utiizados ‘en los ejemplos y otros contenidos 011-4110-8700 | USERSHOP.REDUSERS.COM USERSHOP@REDUSERS.COM Port Mires it adicionales se pueden descargar en redusers.com/u/programadorwebBienvenidos al curso Programador Full Stack es una coleccién - Ellonquaje de marcado en 24 fasciculos que nos prepararé para convertirnos en desarrolladores de poenec Tee Las hojas de estilo CSS soluciones web, orientalas a eomputadoras, HTML ensus versiones 23 tablets yteléfonos méviles. El objetivo css principal del curso es conocer cada una de las tecnologias que complementan el desarrollo as de aplicaciones o portales web, tanto @ Bx \\, aprenderemos? acon triad ost JavaScript, que integra HTMLS Mysau Nuestro recorrido comienza con los CSS dndoles dinamisinoy PHP y MySOL, dos complomentas web lenguajes frontend, para luego pasar ‘uneionalidadas avanzadas, desde ‘esenciales que conforman el esqueleto al desarrollo backend. Finalmente, su papel de lengua de scripting, integraremos estos saberes con el de cualquier soluién web dindmica, iene a ‘ecosistema movil y de webapps. ‘como también el corazon de los matores ddeblogs y CMS mas populares. Bootstrap, un framework (ontorno de trabajo que vuolve més eficiante la E1munda mévil donde desde teléfonosinteligentes y tablets, podremoseccedera =F Sienavseninta ga carecaces dere : per tsb deste voetnils Bede ore ge pra car cade encunlai'tp depart . | 2A QUIEN ESTA DIRIGIDO? [© Usuarios sin experiencia en el mundo del desarrollo web, como también para aquellos que a dieron sus primeros pasos en el diseno web, y quieren ir mas alla integrando programacion dinémica que facilite el manejo de contenido. |B Disofindores gréficos y/o web, que podrén ac {de marcado, y conocer las bases necesarias de la programacién web, que permiten potenciar al maximo la informacién visualizada en un sitio web. (5 Programadores que provengan del segmento de desarrollo de aplicaciones desktop, o web utilizando otras podran conocer las herramientas que los transformardn en desarrolladores full stack. managers, responsables de marketing online, y muchos mas! se a las caractoristicas técnicas avanzadas de los lenguajes REDUSERS Bi PROGRAMADOR WEB Full Stack aCuatro preguntas sobre el desarrollo web La web se instal6 hace ya veinticinco aos entre nosotros, En un principio de forma timida, brindando informacién institucional con textos imagenes, y algin que otro sitio web que comenzaba a ofrecer descargas de archivos y programas. En poco tiempo mas, la web comenzé a ampliar su terreno, y a ofrecer servicios de todo tipo, compras de productos y servicios, contacto ‘entre colegas con intereses comunes, repositorios de éPor qué el desarrollo web es el futuro? Sihablamos de puestos de trabajo, no podemos dejar de pasar por alto el objetivo principal de este curso. Hoy en dia el segmento de desarrollo de software est ‘muy centralizado en dos nichos importantes: el mévil, {(@ mobile) y el web. Lo cierto es que'si bien el desarrollo ‘mévil esti muy bien posicionado, tiene mucha demanda de profesionales, y aquellos desarralladores que pueden resolver as necesidades de software de este campo son ‘uy bien pagos, el nicho ori importantes ventajas: O@ ‘multiplataforma. ntado a desarrollo web tiene No seli acapacidades de hardware, Esmas flexible en cuanto a actualizaciones. (ete . graficos y de contenido, entre tantas opciones mas. Un cuarto de siglo después, Internet domina por completo la vida de casi todos los seres humanos, dando Ja informacién institucional a la cual apunt6 desde un principio, y, sobre todo, trazando una gran diversidad nivel comerci economias, y hasta desarrollando un sinfin de puestos de trabajo que hace poco més de veinte Lademanda de recursos web afios no existian, que brinden informacién de todo tipo es proporcional al aumento de usuarios activos en la gran red de redes. El desarrallo web est en el proceso de maduraciin ptimo para expandirse tanto a nivel mundial como de forma local. Mas del 70% de las corporaciones mundiales, {gobiernos, y otras entidades han optado por esta plataforma como base del desarrollo de sus sistemas a medida, dada su flexibilidad para desplegar soluciones tanto en equipos de escritorio como en dispositives moviles, y las ventajas de no limitar a una organizacién a tener que utilizar un sistema operativo determinado, Puec Puede sacar ‘transparente Agrupa miles: proyecho de. et apariencia tecnologias vardware local. ‘de desarrollo. Clase 01 BI Ecosistema web«un programador full stack ‘son cambiantes, y cada ao aparecen nuevos desafios para estudiar, compreni «integrar al mundo w I éQué hace un programador full stack? Hace muy pocos afos (afio 2012 para ser exactos), se empe26 a hablar de fall stack developer o programador full stack para referirse a aquellos perfiles que seflexbilizan al momento de llevar adelante el desarrollo de aplicaciones pensadas para ejecutarse en la web. Este tipo de perfil tiende a ser eapaz de asumnir tareas de diferente indole, {que pueden abarcar: BIE desarrollo frontend de una aplicacion web, es decir, aquellas partes que vemos y con las que interactiiamos. Una combinacton de HTML, CSS y JavaScript. Bl El desarrollo backend, como la creacién, administracion y ‘mantenimiento de la base de datos, los servicios web que prestan informactén al sitio local 0 a sitios remotos, extrayenda datos de la ‘base de datos y presentindose de forma claraen una pagina web, Asi, el desarrollador full stack también se ocupa de integrar tanto la parte de disefto grafico orientado a web, con los lenguajes de marcado (HTML), longuajes de scripting de servidor o de usuario (JavaScript), ylenguajes de programacin web que interceptan peticiones y las ‘yuelcan a una base de datos (PHP). Como bien dijimos, las bases de datos no son cosa externa a un desarrollador ful stack. Este perfil también se ocupa de iniciarlas, crear las tablas y consultas, insertar datos iniciales en estas, y crear los procedimientos almacenados que devuelven la informacién procesada previamente en el servidor.Y side interaceién con servidores hablamos, tampoco dejamos de lado que los conocimientos de este perfil también deben comprender conceptos técnicos de servidores, redes, modelado de datos, APIs (Interfaces de Programacién de Aplicaciones), Ul (Interaccion de Usuario), UX (Experiencia de Usuario), y la comprensi6n de las necesidades det cliente o del consumidor. REDUSERS Ei PROGRAMADOR Full Stack éCuales la promesa? Elector estard mas que apto para desarrollar sus propios proyectos web e insertarse, en el corto 0 mediano plazo, en el hoy altamente demandado mundo laboral del desarrollo full stack. Por ejemplo: [BI Elmanejo de BTMLS y C88 nas permitiré dlsofar soluciones frontend con énfasis en lacestética yen el manejo de los recursos 1 | [Abriremos eleditor de texto de nuestra referencia donde escribiremos nuestras primeras lineas de cédigo HTML. Nosotros lo realizaremos conel clisico Bloc de Notas de Windows. Siestén en Linux pueden utilizar Nano, Emacs, Vim,0 cualquier otro de su preferencia, y para Mac los clasicos Smultron, MacVim,o Komodo Edit. Ahorasi,a escribir el cédigo, Primero cescribiremos el cédigo necesarlo para que nuestra pagina funcione y luego veremos, enlas paginas By 9, el significado y uso de bloque. Agregamos en principio el tag de inici yccietre HTML, dejando un espacio vacio en et medio: PE Asregueros, entre estos tags, el cédigo correspondiente al tag head, 0 {encabezado), también dejando tun espacio en el medio. All, ‘escribiremos el titulo que tendré nuestra pagina, utilizando el tag title: Ya dentro del editor de texto, antes de escribir tuna linea de cédigo, guardaremos el archivo. Para ello, presionamos la opcién Archivo ® Guardar, y seleccionamos como tipo de archivo: Todos os archivos *7.De esta manera nos aseguramos que el archivo se {uarde con la extensién correcta que necesitamos, Luego, en el nombre de archivo ingresamos index html, y por Gltimo presionamos el botn Guarder. \magen 05. Siel editor de texto es estindar, debemos seleccionar, como tipo de archivo, la opcién Todos los archivos, para poder especificar nosotros mismos la Clase 011 Ecosistema web‘Seguidamente, agregaremos el tag body a la pagina, dejando por supuesto tun espacio en el medio. jAtencién! Este tag body se ubicaré por afuera de los tags head: 6 | Y Finalmente, para terminar nuestra primera pagina, escribiremos, dentro del tag body, dos lineas més. Una con el tag y otra con el tag

: El tag