Apuntes de Curso HTML Codecademy

71
<APUNTES DE CURSO HTML > Todo archivo HTML debe comenzar con el encabezado <! DOCTYPE HTML>, para que cualquier navegador entienda que el código que viene a continuación es HTML. Luego del encabezado <¡doctype html> es necesario colocar las etiquetas de inicio y final de nuestro código html (<html> </html>). El cual contendrá todas las instrucciones html. <HEAD></HEAD> son las etiquetas de la cabecera de una página web <title> </title> son las etiquetas de la página web <body> </body> son las etiquetas del cuerpo de la página web. <p> </p> Son las etiquetas de párrafo en HTML. <h> </h> son las etiquetas de los encabezados que tienen varios tamaños descendentes que van desde <h1> hasta <h6> respectivamente. <img> </img> Son las Etiquetas para la inserción de imágenes. Estas se utilizan de forma diferente a las etiquetas anteriores, ya que en esta en la etiqueta de apertura con ayuda de src=? Se le indica dnd está la ubicación de la imagen que deseamos usar. <a> </a> Son las Etiquetas Implementadas para Crear Hipervínculos. Se implementa de igual forma que img, pero no se utiliza src, en su lugar se utiliza href. Para convertir una imagen en un hipervínculo se procede de la siguiente manera: <a href =”Dirección a donde queremos nos dirija la imagen”> <img src=”Dirección Web de la Imagen”></img> </a>. <!-- --> se Utilizan para crear Comentarios. Style es uno de los atributos que más se usan en HTML ya que este es el que nos permite personalizar nuestro proyecto, A continuación un ejemplo de estos usos.

Transcript of Apuntes de Curso HTML Codecademy

Todo archivo HTML debe comenzar con el encabezado , para que cualquier navegador entienda que el cdigo que viene a continuacin es HTML.Luego del encabezado es necesario colocar las etiquetas de inicio y final de nuestro cdigo html ( ). El cual contendr todas las instrucciones html. son las etiquetas de la cabecera de una pgina web son las etiquetas de la pgina web son las etiquetas del cuerpo de la pgina web. Son las etiquetas de prrafo en HTML. son las etiquetas de los encabezados que tienen varios tamaos descendentes que van desde hasta respectivamente. Son las Etiquetas para la insercin de imgenes. Estas se utilizan de forma diferente a las etiquetas anteriores, ya que en esta en la etiqueta de apertura con ayuda de src=? Se le indica dnd est la ubicacin de la imagen que deseamos usar. Son las Etiquetas Implementadas para Crear Hipervnculos. Se implementa de igual forma que img, pero no se utiliza src, en su lugar se utiliza href. Para convertir una imagen en un hipervnculo se procede de la siguiente manera: . se Utilizan para crear Comentarios.Style es uno de los atributos que ms se usan en HTML ya que este es el que nos permite personalizar nuestro proyecto, A continuacin un ejemplo de estos usos.style = "font-size: 12px" se Utiliza dentro de las etiquetas de inicio para cambiar el tamao de la letra de nuestras etiquetas de prrafo ,lnea, encabezado, lista, cuerpo ejemplo: Personalizacin de colores: http://www.w3.org/TR/css3-color/#svg-colorPersonalizacin del tipo de letra: http://www.w3.org/TR/CSS21/fonts.html#generic-font-familiesPersonalizacin del color del fondo: style="background-color: color que se desea".Personalizacin de la ubicacin del texto style="text-align:center or left or right". se utiliza para colocar palabras o prrafos en negrita. se utiliza para colocar palabras o prrafos en italica.Tablas en HTML. Son las etiquetas que se implementan para la creacin de tablas en HTML. son las etiquetas que se utilizan para crear las filas de nuestras tablas Son las Etiquetas que se utilizan para ingresar Datos a las filas de las tablas. Son las Etiquetas que se usan para colocar toda la informacin de la tabla, es decir su cabecera. Son las etiquetas que se utilizan para ingresar los datos en la cabecera de la tabla.Colspan es el atributo que usamos dentro de las etiquetas para aumentar el nmero de columnas en las que se extiende la misma Son las etiquetas que se utiliza para crear el cuerpo de nuestra tabla.

Son las etiquetas que se implementan para dividir nuestra pgina en partes ms pequeas y de esa forma tener ms opciones de personalizacin

LISTAS EN HTML son las etiquetas para crear listas ordenadas, la cuales generan la numeracin automtica de todas las cosas que ubiquemos dentro de las mismas. se implementa de la misma forma que las etiquetas anteriores solo que estas las listas no son numeradas si no que utilizan vietas. es la etiqueta que utilizan ambas listas para denotar cada tem.

ESTILOS CSSYa sabes que deberas escribir tu CSS en un archivo completamente aparte. Pero, cmo te aseguras de que tu archivo de HTML pueda ver esa informacin de CSS?Lo puedes hacer colocando una etiqueta(tal como viste en el primer ejercicio de este curso) entre las etiquetasde tu pgina HTML. Tu etiquetanecesita tres atributos:1. Un atributotypeque siempre debe ser igual a"text/css"2. Un atributorelque siempre debe ser igual a"stylesheet"3. Un atributohrefque debe apuntar a la direccin web de tu archivo CSSEn el editor de la derecha vers dos archivos:index.htmlystylesheet.css.Ejemplo:

Em es una medida de tamao universal que se ajusta a la resolucin de la pantalla donde se est visualizando.CLASE E IDENTIFICADORES

LOS IDENTIFICADORES: se utilizan en html: < id=NombreId> y en CSS #nombreid{propiedades}LAS CLASES: se utilizan en html < class=NombreClase> y en CSS .NombreClase{propiedades}.

SELECTORES DE PSEUDO-CLASE: Un selector de pseudo-clase es una forma de acceder a los elementos de HTML que no son parte del rbol del documento (recuerdas la estructura de rbol sobre la que hablamos anteriormente?). Por ejemplo, es muy fcil ver en qu lugar del rbol va un enlace. Pero, en qu lugar encontraras la informacin que dice si se ha hecho clic o no sobre un enlace? Eso no est all!.La sintaxis de CSS para los pseudo-selectores es: selector:selector_de_pseudo-clase { propiedad: valor;}First-child: Este es otro selector de pseudo-clase que nos ayuda a aplicar estilo nicamente a los elementos que son primer hijo de sus padres.Sintaxis:Elemento:first-child{propiedades}

nth-child(n): Este es otro selector de pseudo-clase que nos ayuda a aplicar estilo nicamente a los elementos que son el n hijo de sus padres.Sintaxis:Elemento: nth-child(n){propiedades}

Selectores de Pseudo-Clase para los linksa: link = un enlace sin visitar.b: Visited = un enlace que ha sido visitado.c: hover = un enlace sobre el cual pasas el cursor sin hacer click.

DISTRIBUCION DE LA PLANTILLA HTML

Como puedes ver, cada caja se compone de capas. Desde la que est ms en el exterior hasta la que est ms hacia el centro:Margin(margen) es el espacio alrededor del elemento. Entre ms grande, habr ms espacio entre nuestro elemento y los que lo rodean. Podemos ajustar el margen para mover nuestros elementos de HTML ms cerca o ms lejos unos de otros.Margen superior, derecho, inferior, izquierdomargin-top: /*algn valor*/margin-right: /*algn valor*/margin-bottom: /*algn valor*/margin-left: /*algn valor*/margin: 1px 2px 3px 4px;Establecer un margen superior de 1 pxel, un margen derecho de of 2, un margen inferior de 3 y un margen izquierda de 4.Borderes el borde del elemento. Es lo que hemos estado haciendo visible cada vez que establecemos la propiedadborder.Padding(relleno) es el espacio entre el contenido y el borde. Con CSS, podemos ajustar este valor para mover el borde ms cerca o ms lejos del contenido.Los rellenos pueden establecerse de dos formas, tal como tus mrgenes. Puedes seleccionarlos uno por uno, as:padding-top: /*algn valor*/padding-right: /*algn valor*/padding-bottom: /*algn valor*/padding-left: /*algn valor*/padding: valor valor valor valor;

Contentes el contenido dentro de la caja. Si estamos hablando de un elemento, el contenido es el texto del prrafo.En el diagrama vers abreviaturas comoTM,TB, yTP. Estas quieren decir "top margin" (margen superior), "top border" (borde superior), y "top padding" (relleno superior). Como veremos, podemos ajustar los rellenos, bordes y mrgenes superiores, derechos, izquierdos e inferiores de forma individual.

PROPIEDADES DE POSICIONAMIENTO

DISPLAY: a continuacin cuatro posibles valores.block: esto vuelve al elemento una caja de bloque. No permitir que nada sea ubicado junto a l en la pgina! Ocupa el ancho completo.inline-block: Esto vuelve a un elemento una caja de bloque, pero permitir que otros elementos sean ubicados junto a l en la misma lnea.inline: Esto hace que un elemento sea ubicado en la misma lnea que otro elemento, pero sin darle formato como bloque. Solamente ocupa el ancho que requiera (pero no la lnea completa).none: Esto hace que el elemento y su contenido desaparezcan por completo de la pgina!

POSICIONAMIENTO

Float: esta propiedad le dice a los elementos que se ubiquen sin interponerse con los dems elementos. Los valores que puede tomar son right, left o both.Clear: right, left o bothPosicionamiento absolute: El primer tipo de posicionamiento es posicionamiento absoluto. Cuando se establece un elemento con position: absolute, se posiciona en relacin con el primer elemento padre que tiene y que no est establecido con position: static. Si no existe tal elemento, el elemento con position: absolute se posiciona en relacin con .Posicionamiento relativo (relative): El posicionamiento relativo le indica al elemento que se desplace respecto al lugar donde se encontrara si tuviera el posicionamiento predeterminado static.

Posicionamiento fijo(fixed): El posicionamiento fijo ancla un elemento a la ventana del navegador

JQUERYEsta es la forma de conectar nuestro archive html con jquery.Estructura del cdigo de jquery:$(document).ready(function() { $(elementoParaClic).evento(function() { $(elementoAfectado).efecto(); });});$() es una funcin (un tipo de accin) que convierte lo que est en medio de los parntesis en un objeto de jQuery; es decir, algo con lo que jQuery pueda trabajar.Sintaxis $(document).ready(); $() dice: "Oigan, estn a punto de pasar cosas que tienen que ver con jQuery!" La parte de document en medio de los parntesis nos indica que estamos a punto de hacer nuestra magia en el mismo documento de HTML. .ready(); es una funcin, o una accin bsica, en jQuery. Dice: "Voy a hacer algo tan pronto como el documento de HTML est listo!" La parte en medio de los parntesis de .ready() es el evento de jQuery, que ocurre tan pronto como el documento de HTML est listo.De este modo,$(document).ready(algo); dice: "cuando el documento de HTML est listo, haz algo!".$(document).ready(function() { $('div').mouseenter(function() { $('div').fadeTo("fast",1); });});ASIGNACIN DE VARIABLES:Para la asignacin de una variable en jquery la sintaxis es la siguiente:Var $a = $(p) siendo a el nombre de la variable a usar y p el elemento o argumento que vamos a reemplazar.'this' es importanteLa palabra clavethisse refiere al objeto de jQuery con el que estamos trabajando en ese momento. Las reglas de operacin son un poco complejas, pero lo importante es entender que si usas uncontrolador de eventos(ese es el nombre elegante de las acciones como.click()y.mouseenter(), ya que controlan eventos de jQuery) en un elemento, puedes llamar alevento que ocurre (tal comofadeOut()) con$(this), y el eventosolamente afectar al elemento con el que haces algo en ese momento ejemplo del uso del this$(document).ready(function() { $('div').click(function() { $(this).fadeOut('slow'); });});Insertar elementosPodemos insertar nuestros elementos recin creados usando algunas acciones de jQuery..append()inserta el elemento especificado como el ltimo hijo del elemento al que apunta..prepend()inserta el elemento especificado como elprimerhijo del elemento al que apunta. Si tuviramos un div con clase.info,$('.info').append('Algo!');$('.info').prepend('Algo!');Agregaramos un prrafo con el texto "Algo!" dentro de todos los divs con clase.info..append()har que el prrafo sea el ltimo hijo de cada div;.prepend()har que el prrafo sea el primer hijo de cada div..appendTo()hace lo mismo que .append(), pero invierte el orden de "lo que hay que aadir" y "donde hay que aadirlo." El cdigo$('Algo!').appendTo('.info');tiene el mismo efecto que el cdigo .append()anterior..prependTo()tiene una relacin parecida con.prepend().Antes y despusPodemos especificar en qu parte del DOM insertamos un elemento con las funciones.before()y.after(). La sintaxis se ve as:$('objetivo').after('Adicin');Donde'objetivo'es el elemento despus del cual quieres agregar algo, y la parte en medio de lases el elemento de HTML que quieres agregar. Puedes agregar,, o cualquier otro HTML vlido que quieras.

Eliminar elementosAgregar elementos a nuestros documentos HTML es grandioso, pero nuestras pginas muy pronto estarn desordenadas sin la habilidad de removerlos. Afortunadamente contamos con dos funciones de jQuery,.empty()y.remove(), que nos ayudan a eliminar el contenido de nuestras pginas..empty()elimina el contenido ytodos los descendientesde un elemento. Por ejemplo, si usas.empty()en un'ol', tambin eliminars todos sus'li'y su texto..remove(), no solo elimina el contenido de un elemento, sino que tambin elimina el elemento en s.

Agregar y eliminar clasesNo tenemos que limitarnos a agregar o eliminar elementos completos; podemos afinar nuestros sper poderes de jQuery para alterar las clases, CSS, e incluso los contenidos de nuestros elementos de HTML.Comencemos con las clases. jQuery incluye dos funciones:.addClass()y.removeClass(), que se pueden usar para agregar o eliminar una clase de un elemento. Esto es grandioso si, por ejemplo, tienes una clase.resaltar que le quieres aplicar a un elemento cuando haces clic sobre l.La sintaxis se ve as:$('selector').addClass('NombreDeClase');$('selector').removeClass('NombreDeClase');en donde'selector'es el elemento de HTML que quieres y 'NombreDeClase'es el nombre de clase que quieres agregar o eliminar.

Activar y desactivar clasesPero, y qu tal si queremos activar y desactivar una clase? Es decir, qu tal si queremos que jQuery verifique automticamente si nuestro#textousa.resaltar, de modo que cuando hagamos clic sobre l, agregue la clase si no la tiene y la elimine si la tiene?Como tal vez ya lo hayas adivinado, jQuery incluye una funcin.toggleClass()que hace exactamente eso. Si el elemento con el que es llamada recibe la clase como un argumento,.toggleClass()elimina esa clase; si el elemento afectado no tiene esa clase,.toggleClass()la agrega.

Cambiar tu estiloPero, y qu tal si queremos ajustar valores individuales de propiedades de CSS? No hay problema: jQuery tiene una funcin para hacerlo.Debido a que es muy comn cambiar el tamao de los elementos, jQuery tiene las funciones especficas .height() y .width()que se pueden usar para cambiar el alto y el ancho de los elementos de HTML. Por ejemplo:$('div').height('100px');$('div').width('50px');le dar a todos losde la pgina una altura de 100 pixeles y un ancho de 50 pixeles.jQuery tambin incluye una funcin.css()para fines generales que toma dos entradas: la primera es el elemento de CSS que se va a alterar, y la segunda es el valor que se le dar. Por ejemplo:$('div').css('background-color','#008800');Le dar a todos losde la pgina un color de fondo verde.

Modificar el contenidoPor ltimo, podemos actualizar los contenidos de nuestros elementos de HTML; es decir, la parte que va entre las etiquetas de cierre y de apertura, usando las funciones.html()y.val().Se puede usar.html()para obtener el contenido del primer elemento que coincida. Por ejemplo:$('div').html();Recuperar el contenido HTML del primerdiv que encuentre, y$('div').html("Adoro jQuery!");Cambiar el contenido del primer div que encuentre a "Adoro jQuery!".val()se usa para obtener el valor de los elementos de formulario. Por ejemplo,$('input:checkbox:checked').val();Recuperar el valor de la primera casilla de seleccin activada que jQuery encuentre.

Agregar un cuerpoPerfecto! Ahora queremos agregar nuestro elemento HTML al documento. Esto se puede hacer usando la til funcin.append().Adelante, vamos a usarla en nuestro div con la clase.lista. Agregaremos unconclass="item", ya que ms adelante querremos enfocarnos en nuestrocuando lo vayamos a eliminar. (Una lista de cosas por hacer no es buena si no podemos tachar cosas en ella.)Queremos que el contenido de nuestro div sea el contenido de nuestro campo de entrada, el cual guardamos en la variableAgregar. Eso quiere decir que cuando usamos la funcin, queremos agregar'' + Agregar + ''

Elimina lo seleccionadoBuen trabajo! Por ltimo, queremos poder eliminar items de nuestra lista.Podras pensar que podemos hacer esto:$('.item').click(function() { $(this).remove();});y no es mala idea. El problema es que no funcionara: jQuery busca todos los.itemcuando DOM se carga, as que, para cuando tu documento est listo, ya ha decidido que no hay.itemque eliminar con.remove(), y tu cdigo no funcionar.Para esto necesitaremos un nuevo controlador de eventos:.on(). Imagina que.on()es un controlador general que toma el evento, su selector, y una accin como datos de entrada. La sintaxis se ve as:$(document).on('evento', 'selector', funcion() { Realiza una accin!});En este caso,'evento'ser'click','selector'ser'.item', y lo que queremos hacer es llamar a.remove()enthis.

Repaso de eventos de jQueryYa sabes un montn sobre eventos de jQuery, pero nunca sobra repasar los conceptos bsicos.El cdigo casi siempre se ve as:$(document).ready(function() { $('elementoParaTocar').evento(function() { $('elementoAfectado').efecto(); });});donde "elemento para tocar" es el elemento HTML sobre el que hars clic, pasars el puntero, o con el que interactuars de otro modo; y "elemento afectado" es el elemento HTML que se desvanece, cambia de tamao, o que sufre alguna otra transformacin.Algunas veces los dos elementos se refieren a uno solo: puedes pasar el puntero sobre unpara cambiar su opacidad. Otras veces interactas con un elemento aparte; por ejemplo, puedes hacer clic en un botn para cambiar el tamao de un.A veces, si quieres que un efecto ocurra de inmediato, sin un evento como .click()o.hover(), puedes omitir la segunda lnea del ejemplo anterior:$(document).ready(function() { $('elementoAfectado').efecto();});

Ir al granoVamos a repasar rpidamente como activar un efecto sin un controlador especial de eventos como.click(); simplemente queremos que nuestro efecto ocurra tan pronto como nuestro documentest listo (.ready()).Recuerda: la prctica hace al maestro!

.mouseenter() y .mouseleave()Recuerdascuando vimos los controladores de eventos.mouseenter()y.mouseleave()? Si no, puedes refrescar tu memoriaaqu; sin embargo, vamos a tomarnos un minuto para repasarlos.El evento.mouseenter()se activa cuando nuestro puntero ingresa al elemento que queremos afectar; el evento.mouseleave()se activa cuando nuestro cursor lo abandona. (Este cdigo debera parecerte conocido.)Vamos a usar .focus()!Otro evento que podemos usar es .focus(). Decimos que un elemento tienefococuando hacemos clic sobre o usamos tab en l. Si alguna vez has completado un formulario en una pgina web y has visto cmo cada cuadro de texto se ilumina cuando usas tab en o haces clic sobre l, entonces has visto 'focus' en accin!El controlador de eventos.focus()solamente funciona en los elementos que pueden recibir foco; la lista de stos elementos es un poco vaga, pero los elementos de HTML comoeson los sospechosos principales.Observa el formulario que hemos puesto en la pestaa Resultado. Si haces clic en el campo de entrada, vers que se ilumina automticamente con un encantador azul claro. Qu mal que el azul claro sea para bebs! Queremos que nuestro resaltado sea rojo.Podemos hacerlo usando dos herramientas:.focus()y nuestra funcin.css()de la ltima seccin. Queremos escribir un cdigo de jQuery que cambie el'outline-color'de nuestro'input'a'rojo'cuando tenga foco.

El evento .keydown()En jQuery, no solamente ests limitado a usar los elementos con el ratn; tambin puedes activar eventos usando el teclado!El evento.keydown()se activa cuando se presiona un botn en el teclado. Solamente funciona en cualquier elemento de la pgina que tenga foco, as que, para ver su efecto, tendrs que hacer clic en la ventana que contiene tu div antes de presionar una tecla.Adelante, combinemos nuestro evento con un nuevo efecto: .animate()! Lo usaremos para mover un objeto en la pantalla cuando presionemos una tecla.El efecto.animate()toma dos parmetros: la animacin que se va a realizar, y el tiempo en el cul se realizar. Aqu hay un ejemplo:$(document).ready(function() { $('div').animate({left:'+=10px'},500);});Esto tomar el primer div que encuentre y lo mover diez pixeles a la derecha. Recuerda que aumentar la distancia desde el margen izquierdo mueve algo hacia la derecha; la parte de+=es solamente una manera de decir "smale diez al nmero que ya est all." En este caso, le agrega diez pixeles a la distancia actual desde el margen izquierdo.Completando los casosBuen trabajo! Ahora es momento de animar nuestro personaje con base en las acciones del usuario en el teclado.Vers mucha sintaxis nueva en la pestaascript.js. No temas! Es simplemente lgica de JavaScript diseada para ayudar a alterar el comportamiento de jQuery segn las teclas que presione el usuario. Si quieres aprender ms sobre cmo agregarle lgica a tus programas, puedes ver laserie de ejercicios de JavaScriptaqu en Codecademy.Mientras tanto, tenemos trabajo que hacer! El cdigo en la lnea 5 mueve nuestro sprite 10 pixeles a la izquierda cuando se presiona la tecla "a" ("a" tiene el cdigo numrico 65, lo cual explica la lnea 4).Presentando jQuery UIMuy bien! Es el momento de abrir nuevos senderos en jQuery con una nueva biblioteca de jQuery:jQuery UI.jQuery UI incluye una cantidad de animaciones ultra-geniales que puedes usar para que tus sitios web hagan cosas increbles.Por ejemplo; recuerdas cuando nos lamentbamos porque jQuery no incluye un efecto.explotar()para nuestro planeta Krypton? Bueno, todava no lo tiene. Pero jQuery UI tiene un efecto.effect(), y vamos a asignarle el parmetro'explode'(explotar)..bounce()Genial, verdad? Pero podemos hacer mucho ms que simplemente explotar cosas.Otro efecto posible es'bounce'. Lo usamos como un parmetro de.effect()igual que'explode', pero agregamos un parmetro adicional para decirle cuntas veces rebotar. El siguiente cdigo har que nuestro'div'rebote dos veces en 200 milisegundos:$('div').effect('bounce', {times:2}, 200);

.slide()Tambin podemos hacer que Krypton aparezca deslizndose, usando .slide(). No es de extraarse que podamos hacerlo usando el efecto .effect()y asignndole el parmetro'slide'(deslizar).Auto de carrerasjQuery UI incluye una funcin .draggable()que permite arrastrar cualquier elemento de HTML; puedes hacer clic en l y moverlo a cualquier parte de la pgina!Pensamos que debes estar cansado de los bloques, as que te hicimos un carro CSS. Trabajamos realmente duro en l.

INICIO A LA PRORAMACION

JavaScript interactivoLo que acabamos de ver es un ejemplo de cmo JavaScript puede ser interactivo. Ahora intntalo t mismo!Ejemplos:confirm("Me siento sper!");confirm("Estoy listo para continuar.");Estas cajas de dilogos pueden ser usadas en los sitios web para que los usuariosconfirmenacciones. Probablemente las has visto aparecer cuando intentas borrar cosas importantes o cuando sales de un sitio web sin grabar los cambios.Qu es programar?Programar es como escribirle al computador una lista de instrucciones, de forma que pueda hacer cosas geniales con la informacin que le das.Los programas no pueden tender tu cama por ti, pero s pueden hacer clculos, llevar un registro de tu cuenta en el banco o enviarle un mensaje a uno de tus amigos.Para realizar cualquiera de estas acciones, el programa necesita que se le ingresen datos. Puedes pedirle al usuario que ingrese datos mediante un prompt.Ejemplos:1.prompt("Cul es tu nombre?");2.prompt("Qu es Ubuntu?");

Tipos de datos I & II: Nmeros y StringsExisten variostiposde datos. Y ya usaste dos de ellos!a. numbersson cantidades, tal como las que conoces. Puedes hacer operaciones matemticas con ellas.b. stringsson secuencias de caracteres, como las letrasa-z, los espacios, e incluso los nmeros. Todos estos son strings:"Ryan","4"y"Cul es tu nombre?"Los strings son muy tiles como etiquetas, nombres y contenido para tus programas.Para generar un nmero en tu cdigo, simplemente escrbelo como un numeralsin comillas:42,190.12334.Para escribir un string, debes ponerlo entre comillas:"Cul es tu nombre?"

Tipos de datos III: booleanosEl tercer tipo de dato es unbooleano(que se pronuncia "bu-lea-no"; bautizado as en honor aGeorge Boole). Un booleano puede tener dos valores,true(verdadero) ofalse(falso).Puedes usarlos en tu cdigo haciendo sentencias quesean igualatrueo false.Por ejemplo:1.10 > 3es igual atrue2.5 < 4es una locura, as que es igual afalseLos booleanos son bastante tiles porque ms adelante nos permitirn ejecutar ciertas partes de nuestro cdigo solamentesiciertas condiciones sonverdaderas. Por ejemplo, los cajeros automticos calculan si[la cantidad de dinero en tu cuenta bancaria]> 0y solamente te darn dinero si la respuesta estrue.

Usando console.logPosiblemente te hayas dado cuenta de que el intrprete no muestra mensajes de todas las acciones que ejecuta. As que a veces, cuando queremos saber qu es lo que est pensando, tenemos que preguntarle directamente.El comandoconsole.log()toma lo que est entre parntesis y loregistraen la consoladebajo de tu cdigo; por eso es que se llamaconsole.log()(registro de consola)!A esta accin se le conoce comnmente comoimpresin.

ComparacionesHemos aprendido acerca de tres tipos de datos: numbers, strings y booleanos. Vamos a aprender sobre los operadores de comparacin y como se relacionan con los tipos de datos.Lista de operadores de comparacin: >Mayor que = 4) { console.log("Lo hiciste! venciste al dragon!"); atacar = false; } else { tuAciertas = Math.floor(Math.random() * 2); } } else { console.log("El dragon te hizo cenizas! Estas frito ."); atacar = false; }}If / else if / elseQu bien! Tambin vamos a practicar un poco conelse, as como a aprender sobre una nueva funcin de lujo:isNaN.Si usasisNaNcon algn elemento, la funcin verifica que ese elementono seaun nmero. Por lo tanto:isNaN('baya') // => trueisNaN(NaN) // => trueisNaN(indefinido) // => trueisNaN(42); // => falseTen cuidado: si usasisNaNen un string que se parezca a un nmero, como'42', JavaScript tratar de ayudar, convirtiendo'42'en el nmero42y dar como resultadofalse(ya que 42s esun nmero).Completar un switch ya existenteLa sentencia switch est compuesta as:switch (//Alguna expresin) { case 'opcin1': // Realiza una accin break; case 'opcin2': // Realiza otra accin break; default: // Realizar otra accin ms break;}JavaScript verificar si la expresin entre el parntesis deswitch()coincide con cadacase. Si coinciden, ejecutar el cdigo debajo de cada caso, y en caso de que ninguno coincida, ejecutar el cdigodefault.Descripcin generalHasta ahora hemos visto cmo controlar nuestros programas con una sola condicin: por ejemplo, si una variable es igual a determinado valor. Pero, qu tal si queremos comprobar msde una variable?Para eso necesitaremos los operadores lgicos. JavaScript tiene tres de ellos:and(&&),or(||), ynot(!).Con ellos podemos comprobar varias variables al mismo tiempo! Observa el cdigo en el editor.

YEl operador lgicoandse escribe en JavaScript de esta forma:&&. Da como resultadotruecuandoambasexpresiones sontrue; si no lo son, da como resultadofalse.true && true // => truetrue && false // => falsefalse && true // => falsefalse && false // => false

OrEl operador lgicoorse escribe en JavaScript de esta forma:||. Da como resultadotruecuandouna, o la otra, o ambasexpresiones sontrue; si no lo son, da como resultadofalse.true || true // => truetrue || false // => truefalse || true // => truefalse || false // => false

NotEl operador lgiconotse escribe en JavaScript de esta forma:!. Hace que las expresionestruese vuelvanfalse, y viceversa.!true // => false!false // => true

.toUpperCase() y .toLowerCase()Quizs observaste que utilizamos la funcin.toUpperCase()en el primer ejercicio. La utilizamos de esta manera: var variable = prompt("Pregunta para el usuario").toUpperCase();Esto convierte la respuesta del usuario a MAYSCULAS antes de guardarla en la variable. Esto ayuda a eliminar problemas que podran surgir si tu programa ejecuta la prueba para'SI' pero el usuario escribi'si'. Los datos de entrada se convierten en maysculas antes de la comprobacin, por tanto necesitaremos comparar solamente las maysculas!Tambin puedes utilizar .toLowerCase(), el cual convierte a minscula todas los caracteres de un string.Arreglos heterogneosAhora que hemos repasado algunos arreglos bsicos, es hora de aprender algunas cosas nuevas.Primero, no es necesario que ubiques el mismo tipo de datos en un arreglo. No tienes que tenervar pronombres = ["Yo", "T", "Nosotros"];var numeros = [1, 2, 3];Puedes tener unarreglo heterogneo, lo que quiere decir que es una mezcla de tipos , as:var mix = [42, verdadero, "toalla"];

Arreglos de arreglosQu bien! Lo siguiente a saber es que, no solamente puedes colocar una combinacin de tipos en un arreglo, sino que tambin puedes colocarotros arreglosdentro de los arreglos. Puedes hacer unarreglo en dos dimensionesanidando los arreglos en una capa ms adentro, as:var 2d = [[1, 1], [1, 1]];Este arreglo tiene dos dimensiones porque contiene dos filas, y cada una contiene dos elementos. Si quisieras insertar una nueva lnea entre las dos filas, podras mostrar en la consola un objeto 2D (un cuadrado), as:[1, 1][1, 1]

PYTHON

Bienvenido al "Flying Circus"Python es un lenguaje de programacin flexible y poderoso, que puedes usar en desarrollo web/de Internet, para escribir interfaces grficas de usuario (GUI) de escritorio, crear juegos, y mucho ms. Python es:De alto nivel, lo que quiere decir que leer y escribir en Python es realmente fcil; se parece mucho al ingls comn y corriente!Interpretado: quiere decir que no necesitas un compilador para escribir y ejecutar Python! Puedes escribirlo aqu, en Codecademy, o incluso en tu propio computador (muchos ya vienen con elintrpretePython incorporado; ms adelante en esta leccin hablaremos del intrprete).Orientado a los objetos, quiere decir que les permite a los usuarios manipular estructuras de datos llamadasobjetos, para construir y ejecutar programas. Ms adelante aprenderemos ms sobre los objetos.Divertido de usar. El nombre de Python viene de la comedia britnicaMonty Python's Flying Circus, y el cdigo y los tutoriales de ejemplo a menudo incluyen bromas del programa, con el fin de hacer que el aprendizaje del lenguaje sea ms interesante.Para este curso no se requieren conocimientos previos de Python en particular, ni de programacin o informtica en general.

VariablesUno de los conceptos ms bsicos en programacin son lasvariables. Una variable es una palabra/identificador que capta un nicovalor. Por ejemplo, digamos que para tu programa necesitas el nmero5, pero no lo vas a usar de inmediato. Puedes establecer una variable, digamosjamon, para que capte el valor5y guardarla para usarla ms tarde, as:jamon =5Es fcil declarar variables en Python; solamente tienes que escribir un nombre/identificador, comojamon, y usar=para asignarle un valor, y listo!

Tipos de datosGrandioso! Ahora, cada vez que lo necesitemos, podemos tomar el valor10refirindonos al nombre mi_variable.En este caso, eltipo de datosde mi_variableesentero(un nmero entero positivo o negativo). Hay tres tipos de datos en Python que nos interesan en este momento:enteros, reales(nmeros fraccionarios escritos con un punto decimal, como1.970), y booleanos(que pueden serTrueo False).Los programas de computador, en gran parte, son creados para manipular datos. Por lo tanto, es importante entender los diferentes tipos de datos que podemos incorporar en nuestros programas.Nunca uses las comillas ('o") con los booleanos, y siempre usa mayscula inicial! Pythondistingue entre maysculas y minsculas. Usaremos las comillas cuando lleguemos a losstrings, los cuales veremos en la siguiente unidad.

Qu es una sentencia?

Imagina que unasentenciaen Python es parecida a una oracin en espaol: es la unidad ms pequea del lenguaje que tiene sentido propio. As como "Me", "gusta", "el" y "jamn" no son oraciones por s solas, pero "Me gusta el jamn"s lo es, las variables y los tipos de datos en Python no son sentencias por s solos, perosonlos bloques que las forman.Siguiendo esta comparacin con las oraciones; es claro que adems necesitamos algn tipo de signo de puntuacin para que sea obvio en qu punto termina una sentencia y en qu punto comienza otra. Si conoces JavaScript, sabrs que en ese lenguaje las sentencias terminan con un punto y coma (;). En Python, las sentencias estn separadas porespacios en blanco. As como no se puede colocar punto y coma donde quieras en JavaScript, no puedes colocar espacios en blanco al azar en Python.Tal vez te tome un poco de tiempo acostumbrarte a esto, en especial si vienes de practicar con un lenguaje de programacin donde no importan los espacios en blanco.Los espacios en blanco son espacios correctosObserva el error que apareci cuando ejecutaste el cdigo en el editor:IndentationError: expected an indented block. Vers este mensaje de error cada vez que tus espacios en blanco en Python no estn donde deben. (Si has estudiado JavaScript, imagina que el uso inadecuado de los espacios es como el uso inadecuado de;o{}). Cuando tu puntuacin no est bien, lo que quieres dar a entender puede cambiar completamente.El campesino dijo, "La bruja me convirti en un tritn!""El campesino", dijo la bruja, "me convirti en un tritn!"Ves a qu nos referimos?

Una cuestin de interpretacinEn la introduccin a esta unidad mencionamos que Python es un lenguajeinterpretado(es decir, que se ejecuta usando unintrprete). En el contexto de Codecademy, el intrprete es la ventana de consola/salida en la esquina inferior derecha de la pantalla.Por ahora, imagina que el intrprete es un programa que toma el cdigo que escribes, lo revisa en busca de errores de sintaxis, y ejecuta las sentencias en ese cdigo, lnea por lnea. Funciona como un mediador entre el computador y t, y te permite saber el resultado de las instrucciones que le das a la mquina.Comentarios de una sola lneaHabrs notado algunas instrucciones en el editor que comienzan con un smbolo de#(numeral). Estas lneas del cdigo se llamancomentarios, y el intrprete no las leeno afectan al cdigo en absoluto. Son simples comentarios en espaol escritos por el programador, que sirven como instrucciones o explicaciones del funcionamiento de una parte del programa en particular.Como los comentarios mejoran en gran medida la legibilidad de nuestro cdigo (y te servirn para depurar los programas de forma ms rpida, ya que podrs identificar de un vistazo lo que se supone que debe hacer cada parte del programa), te recomendamos que escribas comentarios en tu cdigo cuando su propsito no sea inmediatamente obvio.Comentarios de varias lneasA veces tienes que escribir un comentariorealmentelargo.#nicamente funciona en una sola lnea; y si bienpodrasescribir un comentario de varias lneas y comenzar cada una con#, esa tarea puede ser fastidiosa.Si quieres escribir un comentario que abarque varias lneas, puedes incluir el bloque entero en un grupo de tres comillas, as:"""Soy un leador y me siento con energa, duermo toda la noche, y trabajo todo el da!"""

Operadores aritmticosLas sentencias de Python no se limitan a simples expresiones de asignacin comojamon =3; tambin comprenden una cantidad de expresiones matemticas usandooperadores aritmticos.Hay seis operadores aritmticos en los cuales nos vamos a concentrar:1. Suma (+)2. Resta (-)3. Multiplicacin (*)4. Divisin (/)5. Exponenciacin (**)6. Mdulo (%)

ExponenciacinExcelente trabajo!Todas las operaciones aritmticas que has hecho hasta el momento probablemente han sido intuitivas o han reflejado el trabajo que ya has hecho en otros lenguajes de programacin (como JavaScript). Sin embrago, tal vez laexponenciacin sea nueva, as que requiere un poco de explicacin.El operador**eleva el primer nmero, labase, a la potencia del segundo nmero, elexponente. As que, si escribes2**3, obtendrs8(2**3es lo mismo que2 * 2 * 2, ambos son igual a8).5**2=25,2**4=16, y as sucesivamente.

Repaso general

Buen trabajo! Hasta el momento has aprendido lo siguiente en Python:Variables, que son referencias que contienen valores;Tipos de datos(tales comoenteros,reales, andbooleanos);Espacios en blanco(y por qu son importantes!);Sentencias(y la manera en que las sentencias de Python son similares a las oraciones en el espaol normal);Comentarios(y por qu son buenos para tu cdigo!); yOperadores aritmticos (incluyendo+,-,*,/,**, y%).

Paso uno: strings(Para este curso se requiere haber visto laUnidad 1: Sintaxis de Python.)Otro tipo de datos til en Python son losstring. Los strings soncadenasde caracteres, lo que es una manera ms formal de decir que en realidad son frases en espaol comn y corriente. Pueden incluir nmeros, letras, y varios smbolos como:"Somoslos#1!"Unstring literales un string creado al escribirloliteralmenteen medio de comillas (' 'o" "). Sin embargo, debes usar el mismo tipo de comillas en cada extremo del string: no debe ser'string"ni"string'!

Cuatro mtodos para la locuraBuen trabajo! Ahora hablaremos acerca de algunos de losmtodosque estn disponibles para ser usados con strings.Unmtodoes unafuncinde un objetoespecfico (veremos los objetos ms adelante). Una funcin es un fragmento de cdigo que resuelve un problema particular o que desempea una tarea especfica. (En la Unidad 4 veremos las funciones.) Por ahora, la idea principal es que los mtodos de string son fragmentos de cdigo pre-construidos que desempean tareas especficas para los strings.En esta seccin, vamos a concentrarnos en cuatro mtodos de string:1. len() = Retorna la longitud del String se utiliza len(var_name)2. lower()= Transforma todo nuestro String a Minusculas. se utiliza var_name.lower3. upper()=Transforma todo nuestro String a Mayusculas. se utiliza var_name.upper4. str()= Transforma en cualquier dato a String. Se utiliza str(var_name)

lower()Bien hecho. Observa quelen()retorna la longitud (es decir, la cantidad de caracteres) del string con el cual es usado.Pero, digamos que no quieres que tu string (en este caso,"Azul Noruego") lleve ninguna mayscula. En este ejemplo, cambiar"Azul Noruego"a"azul noruego"representa un poco de trabajo manual. Pero, qu tal si quisieras pasar miles de palabras de maysculas a minsculas? Hacerlo de forma manual podra tardar por siempre.str()Parece que de verdad ests dominando los mtodos de strings en Python. En caso de que te ests aburriendo un poco (y sabemos que ajustar las maysculas y minsculas de un string no es lo ms emocionante del mundo), intenta usar el mtodostr(), a ver qu te parece.El mtodostr()retorna un string que contiene una representacin mostrable de cualquier cosa que hayas puesto entre parntesis. Crea strings a partir de cosas que no son strings!

Notacin de puntosComo lo prometimos, ahora explicaremos la razn por la que usaslen(string)ystr(objeto), pero usasla notacin de puntos(P.ej.,"String".upper()) con el resto.La notacin de puntos funciona en los string literales ("The Ministry of Silly Walks".upper()) y en las variables asignadas a los strings (ministry.upper()) porque estos mtodos son especficos de los strings; es decir, no funcionan con ningn otro elemento. En comparacin,len()ystr()pueden funcionar con un montn de objetos diferentes (que veremos ms adelante), as que no se les puede asociarnicamentea los strings con notacin de puntos.Uso de print con strings literalesYa hemos identificado la ventana en la parte inferior derecha de la pantalla comoconsola/intrprete. Te hemos explicado el intrprete: puedes imaginar que es un pequeo programa que transporta informacin entre tu cdigo de Python y el computador cuando presionas "Ejecutar." La ventana en la que el intrprete muestra la salida de tu cdigo es laconsola. (Si conoces JavaScript, sabes queconsole.logregistrael resultado de la evaluacin de tu cdigo en la consola; printes la versin de Python deconsole.log.)Si no has estudiado JavaScript, no temas! Todo lo que debes saber es que printmuestraen la consola el resultado de la evaluacin que el intrprete hace de tu cdigo, para que la puedas ver.Concatenacin de stringsSabes acerca de strings, y sabes acerca de operadores aritmticos. Pero, sabas que algunos operadores aritmticos funcionan en los strings?Si usas el operador+en medio de dos strings, losconcatena(los une). "Monty " + "Python"dar como resultado"Monty Python"!

Conversin explcita de stringsRecuerdas cuando hablamos del mtodostr()un par de lecciones atrs, y de cmo convierte elementos que no son strings en strings? El nombre elegante de ese proceso esconversin explcita de strings. Le ests diciendoexplcitamentea Python: "Hey, yo s que esto no es un string, pero lo quiero convertir en uno." Compralo con el procesoimplcitode literalmente colocarle comillas a una secuencia de caracteres, para convertirla en un string.Formateo de strings con %, parte 1Que buen trabajo llevas hasta ahora. Esta es la ltima cosa que vamos a ver antes de que hagamos el repaso!Anteriormente vimos que puedes acceder a los caracteres individuales de un string mediante el desplazamiento, o, si lo quieres imaginar de esa forma, mediante una ID numrica. (Recuerda, "PYTHON"[1]es"Y", no"P"!) Desafortunadamente, los strings en Python soninmutables; no los puedes cambiar una vez que los hayas creado.Sin embargo,existeuna manera de hacer que tus strings sean flexibles, y es con elformateo de strings. Usa el smbolo%(no lo confundas con el mdulo!), y puedes imaginar que es una variable para tu string.Formateo de strings con %, parte 2Viste? El formateador de strings% reemplaza los%s(la "s" es de "string") en nuestro string con las variables entre parntesis. (Lo podramos haber hecho simplemente colocando "Camelot"y"lugar"entre parntesis despus del string, pero queramos mostrarte cmo funciona con las variables.)La sintaxis sera as:print"%s"% (variable)Puedes tener las variables (o strings!) que quieras, separadas por comas, en medio de tus parntesis.

La biblioteca datetimeEn este pequeo proyecto, crearemos un programa que experimente con la habilidad de Python de darnos la fecha y hora actuales. Con esto podrs practicar mostrar strings, concatenacin, y la funcin de conversin explcitastr().Al finalizar esta leccin, sabrs mostrar la hora y la fecha en el siguiente formato:mm/dd/aaaahh:mm:ssEn la lnea 1, observa la sentenciafromdatetimeimportdatetime. La importacin de funcionalidades especiales en tus programas se ver en ladiscusin sobre la sentencia import de la Unidad 4.Por ahora, simplemente debes saber que le estamos diciendo alintrprete de Python para que nuestro programa pueda recuperar la fecha y la hora.En el siguiente ejercicio, veremos cmo recuperar explcitamente esta informacin.Obtener la hora y fecha actualesPara recuperar la fecha y hora actuales, podemos usar una funcin llamada datetime.now()para obtener dicha informacin.Enun curso posterior, aprenders todo sobre "funciones." Por ahora, simplemente debes saber que datetime.now()llama a un bloque de cdigo que viene con Python para averiguar la fecha y la hora.Extraer informacinObserva cmo obtuvimos un dato de salida con la forma2012-07-19 12:50:53.180759. Se ve muy feo.Examinemos cmo extraer porciones de la fecha y la hora para finalmente mostrar una versin ms "bonita" de esta informacin.Empecemos recuperando el mes, el da y el ao del resultado dedatetime.now(). Para hacerlo, podemos usar nuestra variableahorade la siguiente manera:anno_actual =ahora.year. Por supuesto, la variable del lado izquierdo de la asignacin puede tener cualquier nombre.El hecho de que podamos extraer partes de la fecha con una sintaxis tan elegante es bastante sorprendente. Como puedes suponer, podemos usar una sintaxis similar para extraer elmesy elda.Nota: no te preocupes por los detalles de la notacin deahora.year, se llama "notacin de puntos" y se usa para acceder a datos de un "objeto". Esto se present en laUnidad 2.Fecha especialBuen trabajo mostrando los componentes de la fecha! Como preparacin para nuestro objetivo ltimo de mostrarmm/dd/aaaahh:mm:ss, empecemos agregando barras diagonales/a las partes de la fecha.Podras hacer algo como esto:printahora.month,"/", ahora.day,"/", ahora.yearSin embargo, de esta forma te aparecern espacios entre las barras diagonales. Entonces, la mejor solucin es concatenar strings (usando el operador+), cubierto en laUnidad 2.Como puedes ver, no es tan simple como agregar la concatenacin -- principalmente porquela concatenacin solamente funciona con strings.Cuando extraes informacin como ahora.year, terminas con un nmero entero. Para convertir un nmero entero en un string, puedes usar la funcinstr(). Por ejemplo, si una variablextuviera el valor 4 y quisiramos convertirlo en"4", podras usarstr(x).

Sigue el flujo(Este curso supone la familiarizacin con el material presentado en la Unidad 1: Sintaxis de Pythony en laUnidad 2: Strings y salida en consola. De ahora en adelante, da por hecho que cada nuevo curso suponga conocimiento del material presentado en los cursos anteriores.)Tal vez hayas notado que los programas de Python que hemos escrito hasta ahora han sido ms o menos monotemticos. Hacen la suma de dos nmeros o usanprintpara mostrar algo en la consola, pero no tienen la capacidad de escoger un resultado en vez de otro, como por ejemplo; sumar dos nmeros si su suma es menor que 100, o en lugar de eso, usarprintpara mostrar los nmeros en la consola sin sumarlos, en caso de que su suma sea mayor que 100.Elcontrol de flujonos permite tener estos resultados mltiples y seleccionar uno basados en lo que est ocurriendo en el programa. Se pueden producir diferentes resultados con base en las entradas del usuario o una gran variedad de factores en el entornodel programa. (El entorno es el nombre tcnico para todas las variablesy sus valoresque existen en el programa en un momento determinado.)Compara de cerca!No nos adelantemos. Primero, comenzaremos con el aspecto ms simple del control de flujo: los comparadores. Existen seis comparadores, y apostaramos a que al menos unos cuantos te parecen familiares:1. Igual a (==) *2. No es igual a (!=)3. Menor que (=)Fjate que==es usado para comparar si dos objetos con iguales, y que=es usado para asignar un valor a una variable.Esperamos que ests familiarizado con los conceptos de mayor/menor que y mayor/menor o igual que (aunque probablemente has visto ese ltimo escrito as: y ). Funcionan exactamente como te lo imaginas: prueban si un nmero es igual (o no) a, mayor (o igual) que, o menor (o igual) que otro nmero. (Si vienes de las lecciones de JavaScript: en Python no existe===.)

Ser and/or No SerLosoperadores booleanos(uoperadores lgicos) son palabras usadas para conectar las sentencias de Python de forma gramaticalmente correcta, casi igual que en ingls. Existen tres operadores booleanos en Python:1. and, que quiere decir "y" en espaol;2. or, que significa "o" en espaol, y quiere decir "una cosa O la otra o AMBAS" (no esexclusivamenteuna o la otra, as como pasa seguido en espaol);3. not, que quiere decir "no" en espaol.Queremos enfatizar el segundo caso: si tu mam te dice que puedes tener las pelculasMonty Python and the Holy GrailOMonty Python's Life of Brian, lo que probablemente quiere decir "una o la otra, pero no las dos." Por otro lado, Python no tendra problema con que escogieras ambas, siempre y cuando tu eleccin no seaninguna de las dos. Es decir, Python es ms divertido que tu mam.Los operadores booleanos generan valores booleanos:TrueoFalse(era de esperarse). Vamos a ver los tres operadores uno por uno.

Sintaxis de sentencias condicionalesRecuerdas cuando te mostramos que los espacios en Python son importantes? Si no lo recuerdas, toma nota:los espacios en Python son importantes. Si haz aprendido algo de JavaScript aqu en Codecademy, sabes que el bloque de cdigo que ejecuta una sentenciaifest delimitado por llaves ({}). En Python, los espacios se encargan de hacer ese trabajo por nosotros.

Aqu hay un ejemplo de una sentencia ifen Python:if 8 < 9: print "Ocho es menor que nueve!"if siempre va seguido de una expresin, la cual va seguida de dos puntos (:). Elbloque de cdigo(el cdigo que ser ejecutado en caso de que la expresin sea igual aTrue) est indentado.Esto tambin es vlido para las funcioneselifyelse(las cuales veremos en un momento). La sintaxis completa debe verse ms o menos as:if 8 < 9: print "Yo salgo en la pantalla!"elif 8 > 9: print "Yo no salgo en la pantalla."else: print "Yo tampoco salgo en la pantalla!"

Problemas con else? Qu pena me da...En Python, la sentenciaelsees el complemento de la sentenciaif. Si bien una sentenciaifhar que el programa contine en la siguiente lnea de cdigo despus del bloque de cdigoif, incluso si no hay una sentenciaelse, se considera una buena prctica escribir una sentencia elsepor cada sentenciaif. Un par if/elsele indica a Python lo siguiente: "Si esta expresin es True, ejecuta este bloque de cdigo indentado; de lo contrario, ejecuta este cdigo despus de la sentenciaelse."Recuerdas el primer ejercicio de esta seccin, cuando te dijimos "haz que responsesea igual a'Y'; de lo contrario, haz que sea igual a'N'"? sa era una especie de sentencia if/else!

DesglosarlosCuando comienzas un proyecto grande como este, es importante dedicar un tiempo a descomponer el problema en pasos individuales. Despus, puedes empezar a trabajar (y probar) un paso a la vez, en lugar de intentar escribir un programa enorme de una sola vez!Pensemos en el problema de Pig Latin. Pig Latin es un lenguaje creado en el que se toma la primera letra de una palabra y se pone al final de la misma y se le agrega tambin un sonido voclico. Por ejemplo, la palabra perro sera "erropei". Cules pasos debemos seguir?1. Pedir al usuario que ingrese una palabra en espaol2. Verificar que el usuario ingres una palabra vlida3. Convertir la palabra de espaol al Pig Latin de Python4. Mostrar el resultado de la traduccinNota que algunos de los pasos se pueden dividir a su vez en pasos individuales. Por ejemplo, queremos pensar detenidamente en el algoritmo para el paso N. 3 antes de empezar a escribir el cdigo.Un poco de tiempo invertido pensando detenidamente en la descomposicin y los algoritmos para tu programa puede ahorrarte MUCHOS momentos frustrantes ms adelante!Toma una hoja de papel y elabora un algoritmo para el paso N. 3 del proyecto.var = ('Sentencia'.decode('utf-8')) es la forma de capturar datos ingresados por el usuario y asignarlos a una variablevar_name.isalpha() = se utiliza para verificar que el contenido de un string sea exclusivamente caracteres alfabticos La regla para la traduccin aqu es un poco ms compleja. Debes eliminar la primera letra de la palabra, pasarla al final y despus agregar el sufijo 'ei'.La manera ms apropiada para obtener el resto del string despus de eliminar la primera letra es usarslicing. Si tienes un strings, puedes obtener "el resto" desdesdeihastaj usandos[i:j]. Con esto obtienes los caracteres desde la posicinihasta la j. Por ejemplo, sis ="foo", entonces s[0:2]devuelve"fo". Piensa en cmo usar esta tcnica para obtener el resto del string sin la primera letra.

Qu tan buenas son las funciones?Unafuncines una seccin de cdigo reutilizable, escrita para realizar una tarea especfica en un programa. Tal vez te preguntes por qu debes separar tu cdigo en funciones, en lugar de simplemente escribirlo todo en un bloque gigante. Probablemente ya hayas adivinado las respuestas, pero aqu estn algunas de las ms importantes:1. En caso de que algo salga mal en tu cdigo, es mucho ms fcil encontrar y arreglar los errores si has organizado bien tu programa. Asignar tareas especficas a funciones separadas ayuda en esta organizacin.2. Mediante la asignacin de tareas especficas a funciones separadas (una idea que los expertos en informtica llamanseparacin de preocupaciones), puedes hacer tu programa menos redundante y tu cdigo ms reutilizable; no solamente puedes usar repetidamente la misma funcin en un solo programa, sin necesidad de reescribirla cada vez, sino que incluso puedes usar esa funcin enotroprograma.3. Cuando aprendamos ms acerca de los objetos, vers que hay muchas cosas interesantes que podemos hacer con las funciones que pertenecen a esos objetos (llamadasmtodos).max()La funcinmax()toma cualquier cantidad de argumentos y retorna el mayor de ellos. (Aqu, "el mayor" puede tener significados variados, as que es mejor usarmax()en cosas como enteros y reales, en donde los resultados son concretos, y no en otros objetos, como strings.)Por ejemplo,max(1,2,3)dar como resultado3(el nmero mayor en el conjunto de argumentos).

min()Como te habrs imaginado,min()hace lo contrario demax(): dada una serie de argumentos, retorna el menor de ellos.abs()La funcinabs()retorna elvalor absolutodel nmero que toma como argumento; es decir, la distancia desde0hasta ese nmero en una lnea imaginaria de nmeros, sin importar si es positivo o negativo. Por ejemplo,3y-3tienen la misma distancia desde0, y por lo tanto, tienen el mismo valor absoluto:3. La funcinabs()siempre retorna un valor positivo, y a diferencia demax()ymin(), solamente puede tomar un solo nmero.type()Por ltimo, la funcintype()hace algo muy interesante: retorna eltipo de los datos que recibe como argumento. Si le pides a Python que haga lo siguiente:print type(42)print type(4.2)print type('jamon')print type({'Nombre':'John Cleese'})print type((1,2))Python dar como resultado:

Ya conoces los enteros (int), reales (float), y losstrings; en lecciones posteriores aprenders acerca de los diccionarios (dict) y las tuplas (tuple).Introduccin a las listasLas listas son untipo de datosque puedes usar para almacenar una coleccin de diferentes fragmentos de informacin en forma de secuencia, bajo un solo nombre de variable. (Los tipos de datos que ya aprendiste incluyen strings, nmeros, y booleanos.)Puedes asignar elementos a una lista con una expresin de la formanombre_de_lista=[elemento_1, elemento_2], con los elementos en medio de corchetes. Una lista tambin puede estar vaca:lista_vacia =[].

Acceso mediante ndicesPuedes acceder a un elemento individual de la lista mediante sundice. Un ndice es como una direccin que identifica la posicin de un elemento en una lista. El ndice aparece directamente despus del nombre de la lista, en medio de corchetes, as:nombre_de_lista[ndice]Los ndices de las listas comienzan con 0, no con 1!Puedes acceder al primer elemento de una lista as:nombre_de_lista[0]. El segundo elemento de una lista se encuentra en el ndice 1:nombre_de_lista[1]. A los expertos en informtica les encanta comenzar a contar desde cero.Nuevos vecinosEl ndice de una lista se comporta como cualquier otro nombre de variable! Puede ser usado para acceder a y asignar valores.Ya viste cmo acceder a un ndice de lista, as:zoo_animals[0]#recupera el valor "pangolin"En la lnea 5 puedes ver cmo funciona la asignacin:zoo_animals[2] = "hiena"#cambia "perezoso" por "hiena"

Retrasos y longitud de listasUna lista no tiene que tener una longitud fija: puedes aadir elementos al final de una lista cada vez que quieras! En Python, decimos que las listas sonmutables, es decir, que se pueden cambiar.Puedes aadir elementos a las listas con la funcin incorporada de listas append(), as:nombre_de_lista.append(elemento)chale un vistazo: hemos usado appendpara aadir un string amaletinen la lnea 2.Puedes saber cuntos elementos tiene una lista con la funcinlen()(es "length" (longitud) abreviado), as:len(nombre_de_lista)

Particionado de listasSi solo quieres una pequea parte de la lista, se puede acceder a esa porcin usando una notacin especial en los corchetes del ndice.nombre_de_lista[a:b]retornar una porcin denombre_de_lista, comenzando con el ndiceay terminandoantesdel ndiceb.Si le dices a Python mi_lista =[0,1,2,3], entonces mi_lista[1:3]retornar la lista[1, 2], sin cambiar la lista original! Observa:mi_lista = [0, 1, 2, 3]mi_porcion = mi_lista[1:3]print mi_lista#mostrar [0, 1, 2, 3]print mi_porcion#mostrar [1, 2]

Particionado de listas y de stringsPuedes particionar un string exactamente igual que una lista! De hecho, puedes imaginar que los strings son listas de caracteres: cada caracter es un elemento en secuencia de la lista, comenzando desde el ndice 0.Si la porcin de tu lista incluye el primer o el ltimo elemento en una lista (o en un string), el ndice de se elemento no tiene que estar incluido. Aqu hay un ejemplo:mi_lista[:2]#recupera los dos primeros elementosmi_lista[3:]#recupera del cuarto al ltimo elemento

Mantener el ordenPuedes buscar a travs de una lista con la funcinindex().mi_lista.index("dog")dar como resultado el primer ndice que contenga el string"dog". Ocurrir un error si ese elemento no existe.Los elementos pueden ser aadidos a la mitad de una lista (en lugar de al final) con la funcininsert().mi_lista.insert(4,"cat")aade el elemento "cat" al ndice 4 demiLista, y desplaza el elemento que estaba en el ndice 4 y todos los elementos que le siguen al siguiente ndice (es decir, todos se mueven un ndice hacia adelante).Para uno y para todosSi quieres hacer algo con cada elemento de la lista, puedes usar un buclefor. Presta mucha atencin si has aprendido sobre los buclesforen JavaScript! Son diferentes en Python.Aqu est la sintaxis:for variable in nombre_de_lista: # Haz algo!El nombre de una variable sigue a la instruccinfor; a su vez se le asignar el valor de cada elemento de la lista.innombre_de_listadesigna anombre_de_listacomo la lista en la que el bucle funcionar. La lnea termina con un signo de dos puntos (:) y el cdigo indentado que la sigue ser ejecutado una vez por cada elemento de la lista.Ms con 'for'Si tu lista es un revoltijo, tal vez necesites ordenarla con ayuda desort().mi_lista.sort()ordenar los elementos enmi_listaen orden numrico/alfabtico ascendente.Vale la pena resaltar quesort()no genera una listanueva; en vez de eso, tu listami_listaes ordenadaen su lugar(la versin ordenada reemplaza la versin sin ordenar).

Esta parte que sigue es claveUn diccionario es parecido a una lista, solo que puedes acceder a los valores buscando unaclaveen vez de un ndice. Una clave puede ser cualquier string o nmero. Los diccionarios se encuentran rodeados por llaves, as:d = {'clave1' : 1, 'clave2' : 2, 'clave3' : 3}Este es un diccionario llamadodcon trespares clave-valor. La clave'clave1'apunta al valor1,'clave2'a2, y as sucesivamente.Los diccionarios son grandiosos para cosas como las guas telefnicas (hacer una pareja de nombre y nmero telefnico), pginas de inicio de sesin (hacer una pareja de una direccin de correo electrnico y un nombre de usuario), y ms!

Nuevas entradasCuando se asigna una nueva clave, se crea un nuevo par clave-valor en un diccionario, as:nombre_diccionario[clave_nueva] = valor_nuevoUn par de llaves vaco{}es un diccionario vaco, tal como un par de corchetes vaco[]es una lista vaca.La longitudlen()de un diccionario es la cantidad de pares clave-valor que contiene. Cada par se cuenta solo una vez, incluso si el valor es una lista. (As es: puedes colocar listasdentrode los diccionarios!)

Cambiar de parecerAl igual que las listas, los diccionarios son mutables (se pueden cambiar). Se pueden eliminar elementos de un diccionario usando el comandodel:del nombre_diccionario[nombre_clave]eliminar del diccionario la clave nombre_clavey su valor asociado.Se puede asociar un nuevo valor a una clave asignndole un valor a la clave, as:nombre_diccionario[clave] = valor_nuevo

Es peligroso ir solo! Llvate estoPor ltimo,mi_lista.remove(valor)eliminar el primer elemento de mi_listacuyo valor sea igual avalor. La diferencia entredely.remove()es:1. delelimina una clave y su valor con base en laclaveque le indiques que elimine.2. .remove()elimina una clave y su valor con base en elvalorque le indiques que elimine.

Antes de comenzarAntes de comenzar nuestro ejercicio, vamos a repasar una vez ms los buclesforde Python. Por ahora, solamente vamos a repasar el bucle foren trminos de cmo se relaciona con listas y diccionarios. En cursos posteriores explicaremos ms usos geniales de los buclesfor.Los buclesfor nos permiten iterar a travs de los elementos de una lista, desde el que est en el extremo izquierdo (el elemento cero) hasta el que est en el extremo derecho. Un bucle de ejemplo estara estructurado de la siguiente forma:a = ["Una lista de algun tipo]for x in a: # hace algo para cada xEste bucle ejecutar todo el cdigo del bloque indentado debajo de la sentenciaforxina:.xser el tem de la lista que se est calculando en este momento. As que, si ejecutamos:for item in [1, 3, 21]: print itemmostrar en pantalla 1, luego 3, y luego 21. La variable en medio defor einpuede tener cualquier nombre de variable (en el momento se llama tem), pero debes tener cuidado de evitar usar la palabra list como variable, ya que esa es una palabra reservada (es decir, significa algo especial) en el lenguaje de Python.Esto es CLAVE!Tambin puedes usar un bucleforen un diccionario para iterar a travs de susvalores, con lo siguiente:d = {"foo" : "bar"}

for clave in d: print d[clave] # muestra "bar" Ten en cuenta que los diccionarios estndesordenados, es decir, que cada vez que hagas un bucle travs de un diccionario, pasars porcadaclave, pero no tendrs garantizado que las veas en un orden particular.

Control de flujo y buclesLos bloques de cdigo en un buclefor pueden ser tan grandes o tan pequeos como sea necesario. Cuando haces bucles, tal vez quieras llevar a cabo diferentes acciones dependiendo del tem particular en la lista. Esto se puede lograr combinando tus bucles con el control de flujo (sentencias if/else), que se parezcan a lo siguiente:for item in numeros: if (condicion == True): # haz algo else: # haz otra cosa Asegrate de controlar tu indentacin, o podras terminar confundido!