,
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
domingo, 19 de marzo de 2017
,
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
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/
Etiquetas:
Curso,
Curso Platzi,
Desarrollo Web,
Descargar Cursos Platzi,
Platzi
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.
Etiquetas:
Backend,
Cursos,
Desarollo Movil,
Desarrollo Web,
Diseño Web,
Frontend,
Node.js,
Tips,
Tutoriales
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
Etiquetas:
CSS3,
Desarrollo Web,
Frontend,
HTML5,
Templates Free
,
Aspectos para ser un Full Stack developer | ProgramandolaWeb
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
Etiquetas:
Backend,
Desarollo Movil,
Desarrollo Web,
Full Stack Developer
,
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
Etiquetas:
CSS3,
Desarrollo Web,
Diseño Web,
Frontend,
HTML5,
Templates,
Templates Free
sábado, 24 de octubre de 2015
,
Recursos gratis para Full Stacks Developers y trucos en CSS3 y jQuery
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
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.
Etiquetas:
CSS,
Desarrollo Web,
Full Stack Developer Tools,
JQuery,
Recursos Gratuitos,
Tools Frontend
,
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>
Etiquetas:
Boostrap,
Desarrollo Web,
Frontend,
Tools Frontend
,
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>
Etiquetas:
Boostrap,
Desarrollo Web,
Frontend,
Tools Frontend
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
Etiquetas:
Desarollo Movil,
Desarrollo Web,
Frontend,
Tutoriales
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 jQueryExisten 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 scriptcon 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.
Etiquetas:
Desarollo Movil,
Desarrollo Web,
Diseño Web,
Frontend,
Tips,
Tutoriales

