Con la tecnología de Blogger.

Mostrando entradas con la etiqueta Frontend. Mostrar todas las entradas
Mostrando entradas con la etiqueta Frontend. Mostrar todas las entradas

jueves, 8 de diciembre de 2016

Curso de Angular JS | Como Validar Formularios con Angular JS


Aprende a Validar Formularios con Angular JS

En esta entrada, se explicará cómo validar un formulario por medio de las directivas que brinda AngularJS. También, se detallará la diferencia de los posibles estados o propiedades que puede tener un formulario ($valid, $invalid, $dirty y $pristine) y cómo estos facilitan la correcta validación de los datos ingresados por el usuario.

domingo, 27 de noviembre de 2016

Curso de Angular JS | Creando mi primera aplicacion Angular JS



Ejemplos Prácticos con Angular JS


AngularJS es un framework MVC de JavaScript para el Desarrollo Web Front End que permite crear aplicaciones SPA Single-Page Applications. Entra dentro de la familia de frameworks como BackboneJS o EmberJS.

Conoce los alcances de este framework a través de distintos ejemplos prácticos

martes, 10 de noviembre de 2015

MaterialUP | Galerias de Apps y Sitios con Material Design


MaterialUP | Galerias de Apps y Sitios con Material Design


Material Up es una galeria de Apps y sitios web diseñados con Material Design, Si buscas inspiración para el diseño de tu stio web o para una aplicacion de dispositivo movil (Android, iOS) este es el lugar indicado para ti.

Probablemente en ocasiones los desarrolladores web tanto los programadores se ven en el problema de crear diseños y si somos o no creativos resulta un quebradero de cabeza y mucho mas de tiempo.

Pero MateriaUp nos ayuda en esto con las galarias que podemos encontrar en ella, podemos encontra tanto diseños o prototipos basados en material design de un sitio web, iconos, apps y smartwatches. Ademas cada diseño es valorado por los usuarios.



Por ultimo queremos comentar que tambien puedes comparlo en ocasiones aunque la gran mayoria estan gratuitos asi que si necesitas inspiración para tu nuevo proyecto ya sabes donde ir MateriaUp.

Enlace https://www.materialup.com



lunes, 2 de noviembre de 2015

Code4Startup - Programa Proyectos Reales y Aprende | ProgramandolaWeb



Code4Startup - Programa Proyectos Reales y Aprende | ProgramandolaWeb


Con la cantidad de sitios web acerca de programacion es dificl encontrar uno bueno donde podamos aprender y al mismo tiempo realizar proyectos reales. En Code4Startup podemos encotrar una lista de cursos asi como de ejercicios realizados son bastante practicos y te ayudaran academicamente.

Code4Starup provee de ayuda para aprender a programar y al mismo tiempo realizar proyectos reales,
aqui es posible encontrar cursos, gratuitos y de pago que nos orientan a clonar estos proyectos con determinadas tecnologias.



Code4Startup cuenta ya como mas de 15000 estudiantes en mas de 100 paises diferentes por lo que su interfaz se encuentra en ingles. Es posible filtrar por proyecto y acceder a diferentes proyectos.

Hay que tener en cuenta que hay contenido tanto para principiantes como para profesionales. Esta es una buena propuesta comenta abajo que te a parecido muchas gracias.


domingo, 1 de noviembre de 2015

5 Plantillas HTML5 y CSS3 Premium Free | ProgramandolaWeb - Parte 2


5 Plantillas HTML5 y CSS3 Premium Free | ProgramandolaWeb - Parte 2


Si aun no has visto las plantillas HTML5 y CSS3 de nuestra anterior publicacion puedes verla en este link http://www.programandolaweb.info/2015/11/5-templates-premium-free-programandolaweb.html en este post te presentaremos algunas plantillas html5 y css3 que seguramente te interesaran.

Techgut – Responsive Corporate One Page Theme  View Demo | Descargar

Portefeuille - View Demo | Descargar
 

 WHITE: One-Page HTML Theme  View Demo | Descargar

 SeFolio – One Page Responsive Bootstrap Template  View Demo | Descargar

Focal - A responsive portfolio Template - View Demo | Descargar


 



Muchas Gracias por visitarnos comenta abajo si te ha gustado el contenido


5 Templates Premium Free – ProgramandolaWeb


 

 Templates Premium Free – ProgramandolaWeb


Si buscas un Templates de HTML5, CSS3 tenemos algunas plantillas fantasticas que ofecen una gran funcionalidad y caracteristicas que dara una apariencia profesional que puedan servirte mucho. Estos Templates se pueden utilizar para distintos propósitos por lo que mostraremos algunas de ellas.

Unika – One Page HTML5 Template - View Demo | Download

 

Aisha- HTML5 Responsive Template - View Demo | Download

Forkio: One-Page Bootstrap Template  View Demo | Download 

SPECTRAL – Responsive Website Template  View Demo | Download

Oxygen – Free Bootstrap Theme -  View Demo | Download

 

Muchas Gracias Comparte o Comenta si te ha gustado


sábado, 24 de octubre de 2015

Tutorial Bootstrap 3: Introducción e instalación | Full Stack Pro


Tutorial Bootstrap 3: Introducción e instalación


En la industria del desarrollo web es comun tener herramientas o frameworks que nos ayudan a optimizar nuestro trabaja tal es el caso de  Bootstrap  un framework basado en HTML y CSS diseñado los desarrolladores de Twitter y que fue libererado en 2012, desde entonces ha ganado muchos adeptos, hasta el nivel que cuenta con la mayor comunidad de Github  del mundo.


Este framework nos ayuda a agilizar la creación del interfaz de nuestra página web, del cual sin exagerar se ha convertido en el mas utilizado, bootstrap permite que nuestro sitio este adaptado a la pantalla del dispositivos con el que accedemos, ya sea un ordenador, tablet, smartphone, television.... Esto significa que tendremos una Web responsive o adaptativa, y desde hace pocos meses, es fundamental de cara al posicionamiento en Google.


Además de agilizar la creación de nuestra Web, se conseguira un crear un diseño limpio, intuitivo, usable y de poco peso, por lo que la carga de nuestra web mucho mas rapida.

Pero ahora hablemos de ¿Por qué usar Bootstrap?
    En la web actual tenemos conceptos de Web responsive, que se integran a la perfeccion con este framework. Suit de utilideades o funcionalidades ya diseñadas. La velocidad de carga de la web Compatibilidad con la mayoria de navegadores. En constante desarrollo, tiene una gran comunidad detras y el framework va mejorando cada vez mas.

                  Como instalar Bootstrap

                  Para poder instalar iremos a la web oficial http://getbootstrap.com y le damos a Download, hay tendremos tres opciones de descarga.


                      1. Descargar el código compilado, es la ideal para comenzar a trabajar con Bootstrap.

                      2. Descargar código fuente, contiene todo los archivos originales de Bootstrap, para poder usarlo necesitas compilarlo.

                      3. Descargar código fuente en Sass, ésta versión del código fuente esta convertida a Sass para facilitar la implementación con aplicaciones como Ruby,


                  Si no queremos tener en nuestro servidor los archivos de Bootstrap, podemos utilizar el CDN disponible para ello. Para el que no lo sepa, un CDN es un conjunto de servidores ubicados en diferentes puntos de una red que contienen copias locales de ciertos contenidos, en este caso, los archivos de Bootstrap. Con esto conseguimos mejorar la carga de nuestra web.



                  En este tutorial nos decantaremos por la opción 1, una vez que lo hemos descargado, descomprimimos el framework en la carpeta de nuestro nuevo proyecto, la estructura de la carpeta debería de quedar así:

                  Carpeta del Proyecto/
                  ├── css/
                  │   ├── bootstrap.css
                  │   ├── bootstrap.min.css
                  │   ├── bootstrap-theme.css
                  │   └── bootstrap-theme.min.css
                  ├── js/
                  │   ├── bootstrap.js
                  │   └── bootstrap.min.js
                  └── fonts/
                      ├── glyphicons-halflings-regular.eot
                      ├── glyphicons-halflings-regular.svg
                      ├── glyphicons-halflings-regular.ttf
                      └── glyphicons-halflings-regular.woff


                  Esta es la estructura más básica de Bootstrap, los archivos acabados en *.min.css o *.min.js son versiones comprimidas.

                  Si queréis ver el tipo de web que podemos crear utilizando este framework, en la web oficial hay una galería de webs creadas con Bootstrap.


                  Nuestro primer ejemplo con Bootstrap

                  Estupendo, ya lo tenemos en  nuestro ordenador, ahora vamos a ver como empezar a usarlo. Primero escribimos una estructura básica de HTML5.


                   <!DOCTYPE html>
                  <html lang="en">
                    <head>
                      <meta charset="utf-8">
                    </head>
                  <body>
                  </body>
                  </html>


                  Ahora ya todo esta completo ya tenemos nuestra web, ahora llamamos a Bootstrap para que podamos hacer uso de sus funcionalidades


                  <!DOCTYPE html>
                  <html lang="es">
                    <head>
                      <meta charset="utf-8">
                      <meta name="viewport" content="width=device-width, initial-scale=1"> <!–Con esto garantizamos que se vea bien en dispositivos móviles–>
                      <title>Mi primer proyecto con los desarrolladores de full stack</title>

                      <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!–Llamamos al archivo CSS –>
                    </head>
                    <body>
                      <h1>¡Hola mundo!</h1>
                       <p> Hola a todos desde Desarrolladores Full Stack, porque esta es mi primera web con Bootsrap ;(</p>   
                       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!– Importante llamar antes a jQuery para que funcione bootstrap.min.js   –>
                      <script src="js/bootstrap.min.js"></script> <!– Llamamos al JavaScript de Bootstrap –>
                    </body>
                  </html>

                  miércoles, 7 de octubre de 2015

                  Recopilación de más de 500 libros de programación totalmente gratis


                  Recopilación de más de 500 libros de programación totalmente gratis


                  Si te gustan las cosas gratis tanto como a nosotros este post es para ti, programar es una de los trabajos que exigen tener conocimiento muy especializado en un tema. Ahora si bien programar en algún lenguaje puede ser difícil por el hecho de existir una amplia gama de  contenido en la web. Resulta que tenemos la solución a este problema.


                  Se trata de un repositorio en Github con más de 500 libros de programación con diversos lenguajes de programación, resulta absurdo no querer tenerlos. Sin embargo solo hay cerca de 80 lenguajes de programación que están cubiertos en este repositorio. Por lo tendrás que echar un vistazo a esta enorme colección de libros que te ayudaran a desarrollarte como todo un profesional.

                  No olvides comentar y compartir con tus amigos,  Muchas Gracias

                  Enlace aquí: https://github.com/vhf/free-programming-books/blob/master/free-programming-books.md#professional-development


                  lunes, 5 de octubre de 2015

                  Introducción a jQuery | ProgramandolaWeb


                  Introducción a jQuery

                  Guia de introducción a jQuery donde encontraras la informacion necesaria para poder aprender la implementasion, sintaxis y eventos que pueden utilizarse con este Framework de JavaScript.

                  JQuery es sin ninguna duda el mejor de los frameworks de JavaScript, utilizado para mutiples tareas como animaciones, Ajax entre otras cosas.


                  Implementando JQuery en una web  

                  Lo principal que hay que hacer es descargar la version de JQuery que vamos a utilizar aqui puedes descargarlo página oficial de jQuery
                   
                  Existen dos formas implementar jQuery en una pagina web:

                  La primera es copiar la ruta del archivo y agregar una etiqueta script en el codigo de nuestra web.

                  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
                  La segunda forma es guardar el contenido en el equipo y añadir la etiqueta script
                  con la ubicacion de nuestro archivo descargado. 
                    
                  <script src="jquery-1.10.2.min.js"></script>

                  Sentencias en JQuery

                  Las sentencias nos permiten ejecutar scripts una vez que todo esta cargado en nuestra pagina.

                   $( document ).ready()

                  Esta sentencia nos permite ejecutar nuestros scripts una vez todo el DOM de la pagina ha sido cargado.

                  $(document).ready(function(){ //Codigo });

                  Selectores

                  Los selectores en jQuery forman parte de los  mecanismo principales para seleccionar elementos del DOM. Existen tres principales selectores en jQuery:

                  El primero es de Etiqueta retorna una coleccion con los elementos correspondientes a la etiqueta seleccionada.

                  Etiqueta

                  Retorna una colección de elementos correspondiente a la etiqueta deseada.
                  $("h3")
                  Ejemplo practico seria:
                  $("h3").each(function(){
                  alert($(this).html());
                  });
                  Como puedes ver en este ejemplo se esta seleccionado todos los elementos <h3> y luego recorremos dicha colección imprimiendo en una ventana de alerta su contenido.

                  El siguiente selector es de clase el cual retorna una coleccion de acuerdo a los elementos que estan asociados a dicha clase.

                  Clase

                  Este selector retorna una coleccion de elementos cuya clase sea la especificada.
                  $(".header")
                  Ejemplo practico :
                  $(".header").each(function(){
                  alert($(this).html());
                  });
                  Como puedes apreciar en este ejemplo se ha seleccionado todos los elementos cuya clase sea header y luego recorremos dicha colección imprimiendo su contenido en una ventana de alerta.

                  Identificador


                  La tercer selector es de identificador el cual a travez de un id se retorna un elemento en especifico

                  $("#nav")
                  Ejemplo
                  var header = $("#nav");
                  alert(header.html());
                  Como puedes ver solo se esta imprimiendo en la ventana de alerta el contenido del elemento cuyo identificador sea nav.


                  miércoles, 6 de mayo de 2015

                  domingo, 3 de mayo de 2015

                  Tan pocas mujeres programadoras


                   

                  Tan pocas mujeres programadoras


                  “Como programadora no puedo resistir la tentación de responder. Algunas de las cuestiones que he visto con las mujeres en la programación son los siguientes:

                  1. La falta de modelos a seguir.

                  En promedio se ve muy pocas programadoras que se hayan dado a conocer en los últimos de 10 años. Dado el número pequeño, es difícil encontrar mentores, amigas que desean pasar el rato contigo y aprender.

                  La otra cosa importante es, que deseas tener todo lo que un gran programador masculino quiere tener, además de lo que se plantearon para aspirar a tener una mujer. Esa es una de las primeras cosas que me desconciertan.

                  Ser mentor de programación.


                  En promedio, un programador femenino suele ser mejor en lo social que sus homólogos masculinos.Esto nos convierte en objetivos más evidentes, desde la perspectiva de un director y por eso es que vemos que cada vez más mujeres son gerentes o jefes de producto.

                  Un problema común parece ser que la mayoría de los gerentes de ingeniería de ambos sexos no tienen ni idea de cómo manejar a una compañera de trabajo. Así que las mujeres por lo general se promueven para gestionar equipos de ingeniería, recogen las mismas habilidades y tienden a comportarse igual o parecido a los gerentes quienes fueron sus jefes en el pasado. Yo lo viví.

                  No trabajar en proyectos personales.


                  Nunca en nada de lo personal (ni laboral, ni escolar) he estado en la programación de proyectos con otra mujer programadora, sin embargo eso es algo muy común que se puede ver seguido en los buenos programadores masculinos.Pero muy rara vez se ve en mujeres fuera de la escuela / trabajo. Y es más o menos la mejor manera de mejorar sus habilidades como programador, haciendo proyectos fuera de tu trabajo o escuela. Trabajar conjuntamente con otras compañeras, eso no se ve en el mundo de la programación por lo general, y eso me da pena.

                  Estereotipos Negativos.


                  Digamos que usted consigue un pasante para el verano.Si se trata de un programador masculino, el supuesto defecto siempre es que es un buen programador y por tanto es más aceptable sus aportes en la creación del proyecto, incluso tener su propia máquina para trabajar, lo que sea. Pero una programadora tiene que demostrar que puede hacer las cosas, antes de que alguien acepte que ella puede. Esto probablemente significa que usted no conseguirá un problema “desafiante” para resolver en el comienzo de su carrera profesional. Duele decirlo, pero es la gran verdad.

                  Diferentes motivaciones.


                  La mayoría de los programadores masculinos excepcionales que conozco están motivados por cosas completamente diferentes a los programadores femeninos que conozco.Las mujeres tienden a mirar a la programación como una forma de resolver un determinado problema – si el problema es interesante, van a trabajar para lograr que se haga, es decir, las mujeres se enfocan más en la parte secuencial para encontrar la solución a un problema. Los hombres en cambio, al ser motivado por el problema también parecen disfrutar de la mecánica de cómo funciona el programa. Se sienten tan entusiasmados con el  caché L1, mejora del rendimiento de la mejoría en un 13% o las características del el último procesador de gráficos. Es como si amaran la parte estructural.

                  Para entender esto, es suficiente con observar las nuevas empresas más exitosas iniciadas por las mujeres y las iniciadas por los hombres.

                  Presión Social.


                  Probablemente seguiré mis gritos fuera de este espacio para decir eso, pero, al ser un programador femenino no te hace la cosa más atractiva en el universo (risa).Usted tiene que ser atractiva a pesar de ello, si es así, en absoluto. La riqueza, estatus social, etc., ese trabajo está más enfocado para un programador masculino.

                  El deseo de encajar con la población femenina en general.


                  Cuando pasas tanto tiempo en lugares que tienen menos de 10% de mujeres, se distorsiona su perspectiva del mundo.La mayoría de las mujeres programadoras han estado probablemente en un entorno desde que estaban en la adolescencia (de los estudios secundarios, universidad, escuela de graduado, trabajos, etc.). Usted tiende a llegar a tener más amigos varones, y poco a poco dejará de hacer las cosas que a la mayoría de las mujeres disfrutan, es decir que adopta la forma reservada de la mayoría de los chicos de pasar el rato programando.

                  También debo añadir:


                  Conseguí mi primera computadora en cuarto grado.  Además, me crié en una cultura donde ser geek no era la peor cosa en el mundo. Pero aún así, no me hice a la idea de ser una programadora hasta que cumplí 17, motivada principalmente por Bill Gates, con ganas de iniciar una empresa, como dije hay pocas mujeres a las que se puede tomar como modelo a seguir.

                  La edad de la primera exposición a la programación no es una cosa muy importante. He conocido chicos que dominan su primer lenguaje de programación a los 18 años y hacían cosas extraordinarias con lo aprendido hace unos años atrás.

                  Para ser realista, el Internet ha cambiado todo. La forma en que las personas aprenden a programar y encontrar amigos. Así que un montón de cosas sería muy diferente para una chica joven que está empezando ahora en el mundo de la programación. Esperemos que en unos años si haya más mujeres programadoras, porque de que somos buenas profesionales lo somos.  (Ah, me reservo mi edad, pero no soy una nena de 18)”

                  sábado, 2 de mayo de 2015

                  Libros recomendados para mejorar como programador



                  Buscando recomendaciones sobre libros de programación que todo programador junior debería leer Gracias a todos los que participasteis hemos elaborado un recopilatorio ordenado esas recomendaciones para que todo desarrollador novel o senior le puede echar un vistazo y ampliar su biblioteca de referencia.

                  La idea tiene una motivación clara: dotar a los programadores junior de una base sólida que les permita comenzar a programar de la forma más eficiente y clara. Es importante recordar los valores de un buen programador debe tener, como bien comentaba Konaminan:

                  • Escribe código legible.

                  • Divide el sistema en partes muy especializadas y débilmente acopladas.

                  • Escribe pruebas automáticas.

                  Comenzamos con la recopilación de libros que debería leer cualquier programador junior y, por supuesto, recordar durante su carrera profesional:

                  Descargar -> http://adfoc.us/25274755301408