Mostrando entradas con la etiqueta Desarrollo Web. Mostrar todas las entradas
Mostrando entradas con la etiqueta Desarrollo Web. Mostrar todas las entradas

viernes, 6 de octubre de 2017

,

Pack de Cursos de Platzi | No. 3 - [Mega]


Aprende de expertos en programación, diseño, marketing, startups, video y web. Suscríbete hoy a Comunidad ProgramandolaWeb.


domingo, 19 de marzo de 2017

,


Curso de Desarrollo Web Online

Aprende desde cero a crear y maquetar sitios web. Con HTML5 y CSS3 crea la página web de tu producto e inicia tu carrera para ser un Frontend profesional.

Temario del curso

  • Crea tu primer proyecto HTML5
  • Configura tu entorno de trabajo optmizado para web
  • Entiende cómo se estructura una página web
  • Etiquetas, atributos y valores
  • La anatomía de una etiqueta de HTML
  • Agregando imágenes a nuestro sitio web
  • Rutas relativas y absolutas
  • Cómo crear navegación interna
  • Conoce las distintas formas de agregar hojas de estilos a tu HTML
  • Selectores de CSS
  • Cómo las classes de CSS nos ayudan a agregar estilos
  • Backgrounds, colores y tamaños de fuente
  • Cómo colocar una imagen de fondo
  • Cómo estilizar el texto de nuestra página
  • Cómo incluir Google Fonts en nuestro sitio web
  • Display block e inline-block
  • Conoce las distintas maneras de que se vean los elementos en la página
  • Modelo de caja
  • Múltiples classes para una misma etiqueta
  • Forms, Inputs y Validación básica
  • Flexbox: Conoce lo último para alinear elementos y crear layouts increíbles
  • Enlazar a otra página de nuestro sitio web
  • Pseudo-elementos
  • Deploy to Github Pages

Si te interesa tener este y mas contenido unete a Comunidad ProgramandolaWeb?

El contenido es muy grande por lo que si quieres ver cual es el contenido al que tendrás acceso sin tener que preocuparte de que al dia siguiente lo borren. Ademas el contenido no tiene contraseñas alguna y estará disponible siempre y cuando hayas realzado tu donativo.

Aunque si solo estas interesado en unos cuantos podemos llegar a un acuerdo.

Aqui puedes descargar el archivo con el contenido mas reciente al dia de hoy 16 de marzo de 2017
El costo de acceso es de 25 USD y el Acceso es anual


   Aqui esta la lista de cursos - > https://mega.nz/#!Lo1RXJgD!DbrIuCggrR-hVbWNopPHkMO3rKtclHjZnZOPMdyqHe0

   
Para mas información aquí te dejamos el grupo de facebook:  https://www.facebook.com/groups/288272378257297/

lunes, 2 de noviembre de 2015

,

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


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


,

Aspectos para ser un Full Stack developer | ProgramandolaWeb

Full Stack developer es un termino que ha tomado mucha fuerza en las empresas debido a que se busca de una persona que conosca aspectos de front-end y back-end, sistemas operativos asi como componentes intermedios. En este post explicaremos algunos de los aspectos mas importantes que un Full Stack developer debe de tener para asumir las tareas requeridas en las empresas.

Desarrollo Web LAMP

Si eres desarrollador y no conoces el termino de LAMP sera mejor que investigues mas, el desarrollo de aplicaciones sumado con LAMP es uno de los aspectos mas demandados debido a que la utilizacion de estas 4 tecnologias son las mas comunes aunque han surgido mas entornos como son NginX, PostgreSQL, Ruby on Rails para ser remplazados por LAMP.


Desarrollo Web Mean

El termino de Full Stack Developer surguio de aqui MEAN son las siglas de MongoDB, Express, Angular y NodeJS los cuales forma un kit para entregar aplicaciones otra alternativa al desarrollo LAMP.

Versiones

El control de versiones es una de las principales herramientas de un Developer, por lo que saber utilizar GIT es una obligacion debido a que encontramos compatibilidad con servicios como Heroku, Jenkins, Azure, AWS para nuestro desarrollo en produccion.

Software as a Service | PAAS

Las plataformas PASS como Heroku y Amazon son una de las primeras opciones para alojamiento de nuestras apps debido a la escalabilidad y costos que se encuentran en estos servicios.


Aplicaciones móviles

Desarrollo híbrido, nativo asi como los Frameworks son los conocimientos que hay que tener actualizados como Full Stack desde PhoneGap, Objective c.

Seguridad

Un desarrollador sabe que no desarrollar medidas de seguridad a las aplicaciones, dejara expuesta la base de datos de nuestras aplicaciones por lo que es sumamente importante para un Full Stack la seguridad informática.Por ultimo un Full Stack developer es un desarrollor con perfil tecnico y muy completo en temas de frontend y backend asi como en manejo de sistemas por lo que no es un camino facil si es que te quieres convertir en uno.

Deja tus comentarios abajo

,

 

 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

,

Recursos gratis para Full Stacks Developers y trucos en CSS3 y jQuery


Wifeo es CMS para crear sitios web y tambien una tienda online que cuenta con una base de datos de codigo fuentes con trucos en CSS3 y JQuery que resultan muy utiles para aprender y personalizar nuestras paginas web.

Es claro que estan bajo licencia licencia Creative Commons, que gracias a esto resulta gratuito hacer uso de estos recursos.

Cuenta con un generador de menu css y jQuery, generador de pestañas para redes sociales y loaders css3. 

Y sino fuera mucho tambien podras adquirir una biblioteca de iconos que esta accesible a traves de su pagina Wifeo.com/Code.

Actualmente consta de mas de 60 "trucos" y otros nuevos se añaden cada semana. No te pierdas estos recursos entra ahora.

,

Recursos gratis para Full Stacks Developers y trucos en CSS3 y jQuery


Wifeo es CMS para crear sitios web y tambien una tienda online que cuenta con una base de datos de codigo fuentes con trucos en CSS3 y JQuery que resultan muy utiles para aprender y personalizar nuestras paginas web.

Es claro que estan bajo licencia licencia Creative Commons, que gracias a esto resulta gratuito hacer uso de estos recursos.

Cuenta con un generador de menu css y jQuery, generador de pestañas para redes sociales y loaders css3. 

Y sino fuera mucho tambien podras adquirir una biblioteca de iconos que esta accesible a traves de su pagina Wifeo.com/Code.

Actualmente consta de mas de 60 "trucos" y otros nuevos se añaden cada semana. No te pierdas estos recursos entra ahora.

,

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>
                  ,

                  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


                  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

                  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.