Reasons why we need more women in technology

It was 1992, a young girl started her career as an electronics engineer, she was coming from a feminine school and entered a public university, she was habituated to be between girls and being the majority, that year it changed forever. She was 1 between only 7 girls admitted that semester in a group of 52 students, and for her surprise that was the largest number in years, with them there were only 35 girls in the whole career, that had about 500 students. In her mind that was abnormal. We are going to discuss why we are habituated to these abnormal numbers, and what we can do to have a statistically profession gender share that matches population one: 50/50.

  • Is the wrong question going to give us the right answers?

We are plenty informed about the lack of women in STEM, you just have to look around in a tech workplace, women are usually concentrated in administrative and design tasks. We have received tons of explanations about what, from lack of ambition in women, to life elections like maternity, to lack of interest. Others also talk about hostile environments, or closed boy clubs.

One of the problems about focusing in the diagnosis of the obstacles is the appearance of deniers, people interested on saying that the problem doesn’t exists and who are basically dedicated to debate (most of times without a real research basis) in order to “demonstrate” that nothing happens and everything works as it should. But as our young student quickly realized, no, it’s abnormal, no, there’s no reason for things to remain like that.

Also these explanations not necessarily offer women solutions to their personal struggles when pursuing a career in tech; statistics work well for groups of people but don’t give parents tools to motivate girls to be curious about science. We need to go farther from diagnosis and start building a propositive speech that can offer solutions to factual scenarios where women face restrictions in access or ability to adhere to a career in tech.

  • Why do we need more women in tech?

According Mckinsey reaching gender equality by 2025 would add 4.3 trillions in anual GDP for USA economy (6). Is there any good reason to leave that money out from the table? I don’t think so.  In the specific case of tech, actually is almost not affordable to maintain the status quo.

The other important reason is that women should pursue the most lucrative careers, and their consequently jobs, as the “Graduating to a pay gap” study mentions: “Graduates who earned degrees in female-dominated majors tend to get jobs that pay less than the jobs held by graduates who earned degrees in male-dominated majors. For example, one year after graduation, the average full-time-employed female social science major earned just 66 percent of what the average full- time-employed female engineering or engineering technology major earned ($31,924 compared with $48,493).” (18) So, if women miss the opportunity to participate in tech careers and jobs they will also miss the possibility of better income.

  • Let’s ask the right question: Why do women succeed in tech?

Now we give up with the diagnosis of the handicaps, lets take a look to the women who have actually overcome it, to identify patterns and ways to stimulate new women to participate in technology.

I had the opportunity to conduct a qualitative investigation with a partner about the reasons why women elect a career in STEM (10). Those women told us about their life stories and why they selected the career. Interviewed profiles came from recently graduates to company owners. These are some of their experiences:

– Attracted to biology in high school, she didn’t find a faculty offering it near her hometown, so she decided to pursue Systems Engineering after the counseling of a former school partner. She liked engineering too much and finished her studies.  She still works in IT but now develops more administrative roles.

– She wanted to study Mining Engineering, she found opposition from family because they thought it was not a suitable career for a woman. She ignored them an started at the faculty. She was habituated to be in male environments but it was not an issue for her. After graduation she found out more details about the environmental and social impact of mining that brought her to study science divulgation, and now she is the manager of a science museum that encourage young people and families to experiment with science.

– She grow up in a family dedicated to commercial business, she wanted to pursue Systems engineering and found support from her family, who had taught her the value of hardworking. After being trained in testing technology and being very successful on it she decided to form her own testing company. She is very recognized as entrepreneur and business woman. She says never feeling bias against her gender, she just dedicates to be a hard worker, but after all those years she has also learn to appreciate the calm and value of sharing time with her loved ones.

Even the qualitative research doesn’t give us a statistical sample, we are talking about a social phenomenon and it has to be understood from the voices of the people embedded in it. The research allowed us to find some common patterns between them:

– Early exposition to science in general woke up curiosity in them to pursue a tech career later, even if the exposition was in a branch of science different from the one they later choose. As we concluded, girls should be exposed to a fan of options to explore and learn, and science and technology must be in that fan.

– A encouraging family environment to exploration, to built and dismantle toys, awakes curiosity for science to.

– Family support helps to confirm the career election, however when there’s family opposition to it the development of self-esteem gives the girls the tools to overcome the hostile environment and to pursue the aspiration.

  • The role of role models

There are many people wanting to be the next Mark Zuckerberg or Steve Jobs, it´s time to start putting the spotlight over women in Tech that have done remarkable contributions so girls can easily identify themselves with them. We need to make more familiar to the general public. Here is a short list.

Ada Lovelace: Known as the first programmer, she created the first algorithms expected to run in the proposed Babbage’s calculation machine.  The Ada lovelace day is the second Tuesday of October and “is an international celebration of the achievements of women in science, technology, engineering and maths (STEM).” (11)

Hedy Lammar:  Usually remembered because of her beauty as cinema actress, she patented along with her husband the method of aleatory frequency hopping of a signal to avoid it’s interception. That concept was later developed as the Spread Spectrum technique that allows modern wireless systems to operate with less power consumption and efficiency. (12)

ENIAC TEAM: First noted in the ENIAC pictures and initially presented as “Refrigerator Ladies”, they were really the ENIAC programmers who created the whole code. ENIAC was the first general purpose computer of the history: Francis “Betty” Snyder Holberton, Betty “Jean” Jennings Bartik, Kathleen McNulty Mauchly Antonelli, Marlyn Wescoff Meltzer, Ruth Lichterman Teitelbaum, and Frances Bilas Spence.

Dr. Grace Hopper: Navy Rear Admiral, she created the first compiler, she was also the first programmer to use MARK I defense computers, receiving recognition for her success with MARK II and III. (14)  Nowadays the “Grace Hopper Celebration of Women in Computing” yearly gathers the largest amount of technologists in the world. (15)

Anita Borg: She developed Unix systems for Digital and Xerox PARC, she founded the “Institute for Women and Technology” dedicated to create programs, partnerships, and initiatives to include women in all aspects of technology. The institute organizes the “Grace Hopper” event. (16)

Margaret Hamilton: She was the lead software engineer for the Apollo project, she designed the software that allowed men go to the moon and safely return. In her time programming work was actually a women’s one, as it was only considered keypunching like typing, however they usually receive programming requirements directly and create the calculation approach by themselves.

As you just see, in the beginning of programming it was actually a feminine work, there’s no reason for it not to be one now.

  • Here comes the gender salary gap

Women are not yet paid as much as men, citing Gender Wage gap article in Time: “Among full-time workers, women earn 77% of what men earn. Even after accounting for the fact that women often work in different occupations and industries than men, as well as differences in work experience, union status, education and race, 41% of that gap is still unexplained. When social scientists control for every employment factor that could possibly explain the disparity, women still earn 91% of what men earn for doing the same job.” (19)

Sadly that tendency is not different in tech, here you can see data from “Graduating to a pay gap“, an study conducted by AAU.

Graduating to a pay gap, Average Annual Earnings One Year after College Graduation, by Undergraduate Major and Gender

Source “Graduating to a pay gap” study by Christianne Corbett, M.A. Catherine Hill, Ph.D. for AAUW page 14, figure 5

The bad news is you will find a gender gap if you get a work in tech, the good news is that you can found you own company and get rid of it 🙂

  • What can women do about it?

Women helping women is one of the best actions to take, because they already know what it is participating in Tech environments, the known issues, and better, the known solutions for them. Here is a list of resources.

To spread the word about the need of closing the gender gap I recommend:

CODE: Debugging the Gender Gap: “CODE documentary exposes the dearth of American female and minority software engineers and explores the reasons for this gender gap and digital divide.” It also gives clues about how to close the gap.

There are organizations dedicated to promote participation of women in Tech, many of them offer meetups, mentoring, and what I call “Safe environments”: places where you can learn and fail and do it right without gender pressure.

She´s coding: “She’s Coding was inspired by CODE: Debugging the Gender Gap documentary filmmakers, and was initiated by a team of engineers, marketers, and designers at JOLT Labs in Seattle, WA. JOLT Labs cares deeply about diversifying the workplace, not just because it’s the right thing to do…but because it’s the smart thing to do. Diverse teams produce better results!”

Women Who Code: “A U.S. based 501(c)(3) non-profit dedicated to inspiring women to excel in technology careers. We connect amazing women with other like minded amazing women around the globe who unite under one simple notion – the world of technology is much better with women in it.” I personally leader the Medellín network, take a look to the long list of more of 50 cities in 15 countries around the world.

A mighty girl: “A Mighty Girl is the world’s largest collection of books, toys, movies, and music for parents, teachers, and others dedicated to raising smart, confident, and courageous girls and, of course, for girls themselves!” An amazing resource for parents who want their daughters involved in science from early age, basically under the premise of offering girls with all the available options, so they can choose later.

  • What can men do about it?

One of the uncomfortable things women in tech know is the need to work harder than men to be considered at least equal, actually that affirmation is considered offensive by some men and quickly discarded as untrue. We need to stop this game, let’s take an example: an study about Github shows that code done by women is more prone to be accepted, but only if they don’t show their gender explicitly in their profiles (8).

Is very frustrating to see educated and professional men acting as climate change deniers, saying than the gender gap and gender bias are non-existent, even in front of evidence. Corporations under class action lawsuits for gender discrimination have hard time understanding the issue too (7), having “Boy clubs” that are basically social events where women are not invited to participate and where socialization with managers takes place and promotion opportunities appear.

As the UN initiative He for She advocates, we need men involved to solve this problem, and the first step to solve it is to acknowledge its existence. As addicted people, recovery starts only after accepting addiction. If a man has doubts about what is happening please read documentation available, this post offers resources about it.

The second phase is let women take part, let them propose, create, encourage them to express their opinion. Culture has taught women to start every phrase in a group meting with “Excuse me”, make them confortable to participate, not to please them but because their opinion will enrich the discussion.

Stop judging women capacity by their appearance, if she wears all pink or like a bro it has nothing to do with her cognitive ability (9). Use the same rule for all (women and men) assume the other person knows the subject as you do.

  • Parenting

USA is the only big economy where paid parental leave is not enforced by law for all workers, what puts pressure on an aspect of life that should be normal. After having a child people have to decide the kind of care they want for the baby, paying someone to do so or taking time from work. Women are more prone to leave the job after having a baby than men, because they are expected to be caregivers, not only by society but also by their husbands. Men interviewed answered they considered their careers more important than their wives’ (4),

However simple actions can reverse the numbers, Google reached a decrease of 50% of women attrition in postpartum after increasing maternity leave from 3 to 5 months and from partial to full paid. (3)

Surprisingly  having a child constitutes a bonus for men, employers hire more fathers as they are perceived as more stable and committed, in the other hand mothers are expected to be less productive and easily distracted. In terms of salary having a child implies an average 6% increase in salary for men and a 4% decrease for women. (2)

We have been looking to those subjects from the view of the workforce, but, Who speaks in the name of the families? Why aren’t we asking about the men losing the opportunity to share time with their children? Why does society expect men sacrifice their family in favor of their careers?

Recently the President of the biggest bank in Colombia decided to leave his successful position in order to take care of his family and health (5), even though some people praise him others criticize his determination, society needs to understand more about the benefits of children having both parents with enough time for them. This is a family issue, not just a women one.

Conclusion

It’s time to start taking action to increase participation of women in technology, steps start from the acknowledge of the problem existence and having the purpose to do something about it.  This is not only a women’s issue, is a society issue, one that costs productivity and leaves the whole industry without important contribution from women that give up at a specific time. Creating a more welcoming workplace benefits all, better consideration of parenting help both men and women and their personal satisfaction. Increasing participation of women in tech is a win-win result, more available workforce, more people creating new companies, more business for everyone.

Sources:

  1. The Simple Truth about the Gender Pay Gap (Spring 2016) http://www.aauw.org/resource/the-simple-truth-about-the-gender-pay-gap/
  2. The Motherhood Penalty vs. the Fatherhood Bonus http://www.nytimes.com/2014/09/07/upshot/a-child-helps-your-career-if-youre-a-man.html
  3. In Google’s Inner Circle, a Falling Number of Women http://www.nytimes.com/2012/08/23/technology/in-googles-inner-circle-a-falling-number-of-women.html
  4. Why U.S. Women Are Leaving Jobs Behind http://www.nytimes.com/2014/12/14/upshot/us-employment-women-not-working.html
  5. La carta que hizo renunciar al presidente de Bancolombia http://www.eltiempo.com/economia/empresas/renuncia-de-presidente-de-bancolombia-y-carta-de-su-hija/16531722
  6. The power of parity: Advancing women’s equality in the United States http://www.mckinsey.com/global-themes/employment-and-growth/The-power-of-parity-Advancing-womens-equality-in-the-United-States
  7. In denial: Corporate America’s blindness to gender discrimination http://fortune.com/2013/05/24/in-denial-corporate-americas-blindness-to-gender-discrimination/
  8. Women considered better coders – but only if they hide their gender https://www.theguardian.com/technology/2016/feb/12/women-considered-better-coders-hide-gender-github
  9. Coding Like a Girl https://medium.com/@sailorhg/coding-like-a-girl-595b90791cce#.ggm4tkcvz
  10. Las voces del SI http://www.latinity.info/detailed-program/#ST18
  11. Finding Ada http://findingada.com
  12. Hedy Lammar http://www.women-inventors.com/Hedy-Lammar.asp
  13. ENIAC Programmers http://eniacprogrammers.org
  14. Grace Hopper biography http://www.cs.yale.edu/homes/tap/Files/hopper-story.html
  15. Grace Hopper Event http://ghc.anitaborg.org
  16. Anita Borg http://anitaborg.org/about-us/about-anita-borg/
  17. Margaret Hamilton https://medium.com/@3fingeredfox/margaret-hamilton-lead-software-engineer-project-apollo-158754170da8#.7n5z7vxze
  18. Graduating to a pay gap, the earnings of women and men one year after college graduation http://www.aauw.org/files/2013/02/graduating-to-a-pay-gap-the-earnings-of-women-and-men-one-year-after-college-graduation.pdf?_ga=1.7578036.722397424.1379578621
  19. Gender Wage gap http://time.com/105292/gender-wage-gap/

 

Advertisements

Women Who Code, Meetup virtual 20 de febrero de 2016

Iniciamos este año Women Who Code Medellín con un Meetup virtual, para que puedas conectarte desde donde quiera que estés en el siguiente evento de google hangout on air, el sábado 20 de febrero a la 1:00 pm.

Regístrate para asistir en http://meetu.ps/2RT7Kg

Queremos escuchar lo que te interesa conocer y aprender durante este 2016, tus preguntas y comentarios durante el hangout son bienvenidos. Queremos que otras chicas se vinculen a la logística de los eventos, tu participación es importante.

En lo técnico estaremos hablando de prototipado rápido de aplicaciones con Invision. Puedes seguirnos y participar desde tu computador en cualquier lugar. Para enviar preguntas y participar puedes hacerlo desde Hangouts On Air, las preguntas pueden hacerse desde antes de que comience https://plus.google.com/events/c8mq0nd7sfmic4dlrjg7ucnrk0s

Para visualizarlo de forma no interactiva, puedes hacerlo desde YouTube.

 

Women Who Code Medellín se une a la “Hora del Código”

HoraDelCodigo_logo_RGBCon ocasión del cumpleaños de Ada Lovelace este 10 de diciembre, vamos a unirnos a la “Hora de Código” una iniciativa mundial para que todas participemos ese día haciendo código durante una hora.

Si eres principiante te recomendamos este recurso donde podrás programar tu robot de Star Wars https://code.org/learn Motiva a otras para que participen, es un reto que puedes completar con tus hijas, sobrinas, tías, hasta tu abuela puede divertirse haciéndolo.

Si quieres saber más sobre la “Hora de Código” puedes consultar aquí https://hourofcode.com/co

Nos gustaría que compartieras tu experiencia con nosotras registrándote en el Meetup o en nuestra página de Facebook.  También puedes hacer tus twits con el Hashtag #HourOfCode y ver lo que otros hacen alrededor del mundo.

Si quieres saber más sobre Ada Lovelace, la primera programadora de la historia, mira aquí. http://findingada.com/about/who-was-ada/ o aquí en español http://www.lavozdegalicia.es/noticia/sociedad/2012/12/10/ada-lovelace-implicacion-maquina-analitica-babbage/00031355146716765243152.htm

Practiquemos diversos tipos de navegación para apps iOS

Hoy utilizaremos varios elementos de navegación en apps para iOS con XCode, comencemos creando un proyecto nuevo que sea una aplicación con tabs, lo dejaremos para dispositivo iPhone, lenguaje Swith y desactivados los Tests (Si tienes dudas sobre esto último consulta el post sobre la primera app sin código)

Captura de pantalla 2015-11-28 10.43.32

Cuando abras la story board que te ha creado verás que tienes una vista inicial y un par de vistas hijas.Captura de pantalla 2015-11-28 11.20.50

Captura de pantalla 2015-11-28 11.23.50Aunque hoy no los usaremos, puedes notar en el menú a la izquierda que ha creado un archivo .swift para cada una de las vistas hijas. Esto servirá luego para poder hacer programación personalizada de cada una de las vistas, en cuanto a contenido y acciones.  Cambia el color de fondo de cada vista para que puedas observar fácilmente su cambio en el menú.

Captura de pantalla 2015-11-28 11.28.50Abre el menú de los elementos del story board que se muestra en la imagen, si está colapsado y no lo ves da click sobre botón para desplegarlo en la parte inferior que hemos encerrado en un círculo fucsia.

Puedes ves que hay una “First Scene” y una “Second Scene” para cambiarle el nombre que se despliega selecciona dentro de la vista la estrella azul que tiene el nombre, en este caso “First”

Una vez seleccionada te permitirá ver las propiedades del elemento, entre ellas el título y la imagen. Cambiemos el nombre a Español en ambas vistas

Captura de pantalla 2015-11-28 11.34.39

Agrega a tu aplicación un par de íconos y cambia también la imagen desplegada, el tamaño adecuado para la barra es un png de 32×32 pixels, con sus versiones @2x de 64×64 y @3x de 96×96.  Un buen lugar para encontrar íconos gratuitos que puedes usar siempre y cuando atribuyas a sus autores es flaticon.com. Revisa la primera app sin código si no recuerdas como agregar los íconos.

Haz correr la aplicación desde la barra superior, en el símbolo “play”, elige el dispositivo sobre el cual quieras observarla, lo cual abrirá el simulador. select run device

Observarás que aparece cargada por defecto la primera vista y si das click en la barra inferior pasa a la segunda.

tab-bar

Ahora vamos a integrar lo que aprendiste antes, selecciona la primera vista y buscas en el menú Editor -> Embed in -> Navigation controller. ahora tendrás una primera vista a la cual puedes agregar vistas hijas como en la vez anterior, no detallaremos el proceso pues ya lo vimos en la primera app sin código, pero crearemos un par de botones para abrir dos vistas, una que contenga imágenes de gatos y otra de perros. El resultado debería verse algo como esto.

conect-button-detail.gif

Ahora vamos a integrar un nuevo elemento, una Table View Controller, esta nos permite crear tablas con contenido dinámico o fijo, hoy la usaremos de forma fija.  Busca el elemento en el menú de la derecha y arrástralo a la storyboard.

Captura de pantalla 2015-11-28 12.09.19

Una vez insertada vamos a integrarla al tab bar, para esto selecciona la vista principal, presiona la tecla ctrl y arrastra hasta tocar la table view controller, conéctala en modo Relationships y se agregará un nuevo tab.

conect-tableviewcontroller

Cambia el nombre del nuevo item y agrégale su ícono respectivo como lo hicimos antes, la llamaremos Directorio.

Captura de pantalla 2015-11-28 12.14.33

Ahora vamos a cambiar la configuración para que nos deje  personalizarla, dejaremos el contenido en celdas estáticas y agrupadas, haremos un directorio sencillo.  Captura de pantalla 2015-11-28 12.15.02

Puedes ver que ha creado un par de secciones con de a tres celdas cada una. borra una de las table view cells que no la vamos a necesitar.

 

Captura de pantalla 2015-11-28 12.16.24

Agregaremos un texto de encabezado y otro de pie de página, en cada una de las secciones.

 

Captura de pantalla 2015-11-28 12.18.50

 

Ve al menú lateral y agrega el ícono de info en la celda

 

Del menú lateral toma un label y un image view para agregarlos dentro de la primera celda, escribe el nombre de una amiga en el label y añade un ícono pequeño al image view.

Captura de pantalla 2015-11-28 13.01.01

Captura de pantalla 2015-11-28 13.03.27.png

Tu primera celda debería verse ahora algo así.
Puedes repetir el proceso varias veces o usar la tecla command+d para duplicar tu celda. Ten cuidado, el duplicado por defecto aparece fuera de la tabla, debes arrastrarlo hasta la ubicación correcta.
Tu tabla debe llegar a una apariencia como esta, o mejor 🙂 Captura de pantalla 2015-11-28 13.04.45
Crearemos una nueva View Controller con los datos de tu amiga, usa los elementos que ya conoces.
Captura de pantalla 2015-11-28 13.06.22.png
Ahora conectaremos el detalle de la vista a la celda, primero vuelve tu table view controller embebida en una navigation controller, igual que antes. Luego como se muestra a continuación, dando click + ctrl sobre la celda y arrastrando hasta la vista, selecciona modo push.
conect-cell-detail
Una vez hemos terminado tu directorio se vería así.  Ahora es tu turno de integrar estos nuevos elementos y crear nuevas cosas.
table-detail-navigation.gif
Ah, no olvides cuando publiques, atribuir a los dueños del contenido, por ejemplo de aquí saqué los íconos.
Icons made by Freepik from www.flaticon.com is licensed by CC BY 3.0

Taller iOS Women Who Code – Sábado 28 de noviembre 2015

Women-Who-Code-Medellin-noviembre-4

¿Eres una chica inquieta por el software? Women Who Code tiene algo para ti:

  • Habilidades de Programación.
  • Hacer conexiones.
  • Construir tu propio proyecto.
  • Intercambiar conocimientos.

¿Tema del próximo taller?

  • Desarrollo para iPhone (iOS) Construyendo apps sin código usando tablas.

¿Cuándo?

  • Sábado 28 de Noviembre de 2:00pm a 4:00 pm

Regístrate para asistir en http://www.meetup.com/es/Women-Who-Code-Medellin/events/225700070/

Tu primera app para iPhone sin usar código

Este post está dirigido a quienes quieren acercarse a la programación para dispositivos móviles pero que todavía no han profundizado mucho en elementos de programación.  El método es ir haciendo para ir aprendiendo y luego si moverse hacia elementos más complejos.  Si ya sabes de programación pero en otra área puede serte interesante esta introducción.

Algunos términos primero:

  • iOS: Sistema operativo que corre en los iPhone/iPad
  • Swift: Lenguaje de programación nuevo para crear programas para productos Apple.
  • Objective-C: Lenguaje de programación anterior para crear programas para productos Apple.
  • XCode: Entorno de desarrollo nativo, es decir provisto por el fabricante, y que se puede descargar en cualquier PC/Laptop Mac desde https://developer.apple.com/xcode/

En este tutorial suponemos que ya tienes XCode instalado, sino simplemente descárgalo de la página antes dicha y sigue los pasos del instalador (next, next), así de simple.

Las imágenes animadas de este tutorial puedes darles click para ver las versiones de mayor resolución.

CONOCIENDO XCode

Xcode inicioLo primero que verás al abrir XCode será una ventana como esta, la cual te permite iniciar un Playground (no hablaremos de eso hoy), crear un nuevo proyecto o iniciar algo desde un repositorio existente (tampoco lo cubriremos hoy). A la derecha, no mostrado en la figura, podrías abrir proyectos que ya hayas comenzado antes, debe estar vacío si tu XCode está recién instalado. Escogeremos la opción de crear un nuevo proyecto de XCode.

Escoger tipo appNos pide entonces escoger una plantilla para la aplicación, a la izquierda está la lista de sistemas operativos para los cuales podemos crear cosas, para nuestro caso escogeremos iOS y que sea una aplicación de una sola vista.

Datos del appLuego debemos identificar la aplicación, escoge un nombre que sea unico, el nombre de la organización es tu empresa o el tuyo propio si desarrollas para ti, el nombre de la organización se escribe como un nombre de dominio pero al revés, debe ser único por lo cual si posees un dominio personal en internet sería lo más indicado para nombrarlo, sino lo posees para efectos de prueba puedes inventarte el dominio que quieras. Escogeremos como lenguaje Swift, como dispositivo iPhone y por ahora deshabilitaremos el Unit Testing y el UI Testing.

Elegir ubicacionElige el lugar donde deseas guardar el proyecto, XCode creará por sí mismo una carpeta con el nombre que le diste al proyecto en el lugar que elijas. Activa la casilla inferior donde dice Source Control -> Create a Git Repository on -> My Mac. Esto va a servir para que XCode administre los cambios en tu código y luego cuando vayas a usar un manejador de versiones ya estén creados los archivos básicos. Si no sabes que es un manejador de versiones no te preocupes por eso ahora.

Menu izquierdaUna vez abierto el proyecto encontrarás tres secciones de XCode, la izquierda tiene varios íconos arriba y cada uno te permite varias cosas, no te preocupes si todavía no conoces algunos términos, si quieres adelantarte puedes darle una googleada a lo que no te sea familliar:

  • Explorar los archivos del proyecto
  • Ver la jerarquía de tus clases
  • Buscar texto en el proyecto
  • Ver errores
  • Ver las pruebas
  • Ver operación del debug
  • Ver los Breakpoints.
  • Ver los logs del proyecto.

Menu centralEn el centro está la identificación del proyecto y la configuración en general aquí seleccionaremos cosas que serán importantes cuando estemos integrando código de terceros y configurando una cuenta que nos permita publicar la aplicación en el App Store.

Menu derechaEl menu de la derecha vamos a usarlo mucho hoy, es donde verás todas las propiedades de lo que estés editando en ese momento y desde donde vamos a extraer los elementos que necesitaremos para crear nuestra aplicación, lo veremos con más detalle luego.

AHORA SI COMENCEMOS A EDITAR LA APLICACIÓN

Ve al menú de la izquierda y selecciona el archivo llamado Main.StoryBoard, este archivo nos va a permitir crear una aplicación desde la interfaz gráfica. Lo que voy a explicar a continuación puedes verlo en la imagen animada siguiente, da click sobre la imagen para que la veas en toda su resolución.

Story board size classes

Al seleccionar el Story Board el menu del centro cambia y te muestra un gran cuadro blanco, y a la izquierda el View Controller Scene, puedes desplegarlo y ver los elementos que tiene.  Por ahora lo cerraremos dando click sobre el botón inferior. Luego seleccionaremos el cuadro grande del centro, al hacerlo sus bordes se vuelven azules. Vamos al ícono en forma de hoja del menu de la derecha y quitamos la selección sobre Use Size Classes, porque nuestra App será solo para iPhone. Nos pregunta de qué tipo la queremos, dejamos iPhone seleccionado y las deshabilitamos. Verás que el cuadro se ha vuelto un rectángulo, en la proporción típica de un iPhone.

Story board elementsEn la parte inferior derecha vas a ver una cantidad de elementos que puedes usar, dales una mirada. Por el momento quiero que veas que existen: Label, button, Image View, y Views. Puedes buscarlos digitando sus nombres.  El cuadro blanco que tienes en el centro es una vista, podemos agregar nuevas vistas desde este mismo menú, hay diferentes tipos de ellas, la más simple que es igual a la que tenemos en el centro es una View Controller. Puedes ver que la View Controller está en amarillo mientras los otros elementos son grises, todos los elementos en amarillo son digámoslo así padres, y puedes arrastrarlos al Story board de forma independiente, los elementos en gris son hijos y solo puedes ponerlos dentro de un elemento en amarillo.

Vamos a cambiarle la apariencia a nuestra vista, lo que voy a describir está en la imagen animada siguiente. Da click sobre la vista y asegúrate que esté a la derecha el ícono que parece un escudo (realmente es un slider, pero digámosle escudo) selecciona el Background y cámbialo a un color que te guste, explora la opción other para personalizarlo como quieras. Busca en la lista inferior una Image View y posiciónala donde quieras, haz lo mismo con tres Buttons y ubícalos según tu deseo.

Story board add elements

Embed in Nav ControllerVamos a introducir un elemento de navegación, esto nos permitirá que XCode cree el código para pasar de una vista a otra por nosotros. El elemento de navegación que usaremos se llama un Navigation Controller. Para introducirlo iremos al Menú Editor -> Embed in -> Navigation Controller. Verás que tu Story Board ha cambiado y ahora aparece un Navigation Controller justo antes de la vista donde tienes el Image View y los Buttons. También verás que le ha aparecido una franja gris a tu vista, allí puedes ponerle un nombre, si tu imagen ha quedado bajo la franja gris muévela hacia abajo.

Agreguemos ahora tres view Controllers nuevas, busca el elemento en el menu derecho y arrástralo tres veces a una zona libre. Toma cada vista y cámbiale el fondo a un color diferente.

Story board add view controllers

Vamos a darle a cada botón el nombre y el color de una vista, porque cada uno va permitirnos navegar a una nueva vista.

Story board change buttons

Para conectar el botón con la vista que abrirá lo seleccionamos con el mouse, luego presionando la tecla ctrl vemos que sale una línea azul, alargamos la línea hasta que toque la vista del color que queremos y esta se ponga con un sombreado azul, soltamos el mouse y nos ofrece varias formas de presentarla, seleccionamos el modo Push.  Vemos que aparece una línea que une las dos vistas con un símbolo raro en la mitad, ese símbolo significa que la presentación es Push, o sea que reemplaza la vista anterior. Hacer igual para los otros dos botones, cada uno con su vista.

Story-board-link-views

VEAMOS EL RESULTADO

select run deviceUna vez hecho con las tres vistas ahora sí, ¡A correr!, es decir que vamos a ver en el simulador como se ejecuta todo. En la parte superior izquierda vemos un ícono como Play, y otro como Stop, junto a ese un ícono que tiene el nombre del proyecto y a la derecha podemos seleccionar el tipo de dispositivo en el cual queremos simular, para este caso hemos escogido iPhone 5s.

Para ver como funciona dale click sobre el ícono de Play y XCode abrirá un emulador según el dispositivo que hayas elegido. En este punto te pido algo de paciencia, es relativamente común que la primera vez que presiones Play el emulador corra pero no veas allí tu proyecto, dale unos 30 segundos, si no arranca dale Stop y lánzalo de nuevo con Play, la segunda suele ser la vencida.

running

Podrás ver los botones y al darle click a cada uno irá a la siguiente vista y habilitará la opción de Back para regresar a la anterior. Parece simple ¿Verdad? pero has creado la navegación necesaria para hacer una especie de multimedia.

Ahora vamos con las imágenes, como los dispositivos pueden ser de distinto tamaño el código se encarga de adaptarlos siempre y cuando al agregarlos sigamos los requisitos necesarios, así toda imagen precargada debería existir tres veces como imagen.png, imagen@2x.png e imagen@3x.png esto significa la imagen, su doble y su triple.

Para agregarlas selecciona en el menú izquierda Assets.xassets, da click derecho sobre el área blanca que se abre el el centro y selecciona Import. En el cuadro de diálogo que se abre selecciona las tres imágenes y quedarán importadas.  Esto de los tres tamaños es muy importante para los íconos e imágenes de botones

import images

icons 3 sizes

Puedes importar imágenes de paisajes y cosas así sin los tres tamaños y con la resolución apropiada la image view se encargará de ella, Vuelve a la image View, fíjate que esté seleccionado en el menú de la derecha el iconito del escudo y selecciona allí una imagen, haz se configure como Aspec Fit, para que no se arruine su relación de aspecto.

Image View

Bueno, nuestra app no se ve muy bonita que digamos, pero ahora es tiempo de que tu juegues y con estos sencillos elementos crees una aplicación que te muestre por ejemplo categorías de productos en una tienda y las imágenes de cada uno, puedes agregar cuantas Image View quieras en una vista. Ensaya con los labels y pon texto descriptivo junto a las imágenes.

Es sencillo, explora y conoce a la herramienta.