Hola a todos, este es mi primer post espero que les guste, esta dirigido a todas las personas que se estan
de alguna forma iniciando en el desarrollo de paginas web, es medio sencillo la idea es mostrarle una introduccion y algunas herramientas gratuitas, como para que se interesen en el tema y luego buesquen mas informacion en internet que esta repleto.
Tratare de comenzar desde cero suponiendo que hay gente que recien empieza, no voy a entrar mucho en detalle con los lenguajes de programacion simplemente voy a hacer reseña de cada uno y para que sirven, tampoco es que sea un experto en pimer lugar iba a publicar algunos programas pero decidi hacer un mini tutorial detallando la forma
en que fui aprendiendo las cosas cuando empezaba que fue hace poco jajajja
Todos los programas son gratuitos son los que mas me han gustado porque son bastante completos y practicos
Bueno como la mayoria saben las paginas web son aquellos sitios en los que navegamos por internet diariamente con nuestro navegador favorito, como google, facebook, taringa ,etc. el navegador web es justamente
eso el programa que utilizamos para visualizar las paginas, las paginas estan escritas en un lenguaje llamado HTML que son lineas de codigo que son escritas en un documento que
se guarda con extencion .html o .htm es lo mismo, entonces el navegador es el encargado de leer e interpretar ese codigo y muestra en la pantalla los resultados que seria la pagina web.
Para empezar a hacer pruebas para entender como funciona este lenguaje html es necesario tener un editor de textos como el bloc de notas de windows para editar los archivos y un navegador web para visualizar los resultados de nuestra web, como internet explorer de microsoft que viene con windows, firefox, chrome de google, safari de apple, opera o cualquier otro.
Algunos navegadores web gratuitos:
Enlace de descarga de Firefox 5:
Enlace de descarga de Google Chrome:
Enlace de descarga de Opera 11:
Enlace de dascarga de Safari 5:
Breve introduccion a HTML:
Como dijimos html es el lenguaje o sintaxis con la que se escriben las paginas web
La estructura de las paginas web escritas en html es la siguiente:
<html>
<head>
<title>Titulo de la web</title>
<meta>
<!--
Aqui adentro van los comentarios
-->
<!--
Codigo que no se ve en la pagina web Ej: la inclusion de una fichero javascript
-->
<script type="text/javascript"></script>
</head>
<body>
contenido que se ve en la pagina web
Ej:
<div>Hola Mundo</div>
</body>
</html>
Pueden encontrar un totorial completo y sencillo de html en
Pueden probar ese codigo copiandolo en el bloc de notas que esta en inicio, accesorios, lo abren y pegan el codigo y lo guardan con extencion .html es decir se van a archvio, guardar como y le ponen como nombre por ejemplo: prueba.html y le ponen guardar.
Esa es una muy pequeña pagina web pero es una pagina web en fin, es asi como funcionan todas las web ovbiamente con muchas mas lineas de codigo y funciones.
Bueno ahora que ya han experimentado programar con el bloc de notas cabe destacar que existen otros programas mucho mas copados que nos resaltan la sintaxis del codigo html y sus etiquetas con colores, tambien nos facilitan
la inserccion de dichas etiquetas, de formularios, etc. esa es una de las grandes ventajas de utilizar este tipo de programas que nos permite reducir la posibilidad de errores y aumentar la velocidad con la que escribimos
el codigo, sin embargo otra de las cualidades es que nos permiten visualizar el codigo rapidamente en alguno de los navegadores que tengamos intalados.
Algunos programas editores html:
RJ TextEd:
Uno de los mejores programas para programar en varios lenguajes pero orientado a la programacion web, con posiblidad de ver el codigo resaltado y la vista previa en distintos navegadores
que configuremos.
Enlace para descargar de RJ TextEd:
Otro programa muy bueno y similar al anterior
PSPAD EDITOR:
Enlace para descargar Pspad:
Ambos programas son gratuitos.
Hasta aqui vimos que es html y algunos programas para poder editar los archivos y poder practicar.
Otra forma de programar paginas web es utilizando un editor HTML visual (WYSIWYG) que nos permite en ves de escribir codigos y etiquetas, nos permite desplazar o arrastrar los elementos
de la pagina web como si la estuvieramos diseñando en el word o programas similares.
En mi opinion es aconcesjable iniciarse con la programacion con editores de texto como los que mencione antes, y luego se pueden combinar los conocimientos adquiridos
con las posibildades que brindan los programas WYSIWYG.
El mejor editor WYSIWYG del mercado pero de pago es el adobe dreamweaver.
Otro editor con menos funciones pero gratuito es el NVU:
Enlace de descarga de NVU:
Bueno las pruebas de los archivos .html las deben hacer en su navegador web, ya sea internet explorer, firefox, opera, safari, google chrome, etc solo tienen
que habrir el arhivo html con algunos de esos navegadores. Cabe destacar que no todos los navegadores interpretan el codigo html de la misma forma, no tanto el html
que es estandar para todos los navegadores, sino los estilos o mejor dicho la hojas de estilos que es lo que deben aprender luego de html, de alguna forma lo que hacen
las hojas de estilos es darle justamente estilo a la web, es decir dotarla de apariencia y colores y formato como si lo hicieran con el word solo que con codigo, las extenciones de
las hojas de estilo son .css, al igual que html tiene sus reglas y etiquetas. Pero esto es algo
mucho mas estenso solo lo mencionaba.
CSS o hojas de estilo como dije nos permite dotarla de apariencia a nuestra web, el codigo css se puede escribir dentro del archivo html dentro de las etiquetas <head>Aqui</head>
Ej:
<html>
<head>
<title>Titulo de la web</title>
<meta>
<style type="text/css">
#blanco {
color: #ffffff;
}
.negro {
background-color: #000000;
}
</style>
</head>
<body>
<div id="blanco" class="negro">seq</div>
</body>
</html>
Aqui vemos que el elemeto div con id pagina se vera con texto de color blanco indicado por la id #blanco, y con fondo negro indicado por la clase .negro, las id se aplican a un solo elemento
html y las clases pueden ser aplicadas a cualquier etiqueta o elemento como quieran llamarlo, cabe destacar que tanto las id como las clases pueden ponerle el nombre que deseen.
Bueno esto es una introduccion a las hojas de estilo ustedes deben buscar mas informacion en internet.
Un manual de CSS:
Bueno hasta aqui solo vimos a grandes rasgos los que es html y algunos programas para editar los archivos, y las hojas de estilos, lo siguiente luego de haber practicado y teniendo una nocion
mas proxima de los que html y css habiendo conocido la mayorias de las etiquetas y sus funciones lo siguiente es aprender algun lenguaje de programacion orientado a objetos, como los son javascript, vbscript, etc
Javascript sirve por ejemplo para hacer calculadoras, para poner la hora en la pagina, o hacer cualquier tipo de calculos, tambien se pueden modificar algunos elementos html
La inclusion de un codigo javascript se hace de la siguiente forma:
<body>
<script type="text/javascript">
Codigo javascript
</script>
</body>
Un manual de javascript:
El siguiente paso es aprender un lenguaje de programacion del lado del servidor, es decir que tenga la capacidad de hacer consultas a bases de datos y que se ejecute en el servidor como los son PHP, ASP, etc.
Con php se pueden hacer paginas web como taringa, facebook, google, etc, que llevan un registro en las bases de datos sobre sus usuarios registrados, los posts publicados los mensajes, etc. obviamente teniendo el conocimiento dinero y equipo necesario.
El codigo php no lo interpreta el navegador
sino que es el servidor donde esta el interprete php el que lo hace, que se encarga de interpetar el codigo y enviarlo al navegadro en formtao html.
Estructura de el lenguaje PHP:
<php?
$a = 1;
$b = 2;
$c = $a+$b;
echo $c;
?>
Bueno como vemos las $a es una variable, es la forma de escribir las variable poniendole un signo $ delante del nombre que queramos. en la variable $c se suman ambas
y luego se las imprime en pantalla con echo, y el resultado es 3.
Un manual de PHP:
Para hacer las pruebas si van a utilizar php deben tener un servidor web instalado en su computadora, pero como siempre hay herramientas gratuitas y superfaciles de usar, la idea es
tener un servidor intalado, como apache, con el interprete php, y el sistema de bases de datos MySQL, pero hay programas que nos instalan todo junto en en uno solo todo ya configurado
Algunos de estos programas:
USB WebServer 8:
La principal caracteristica es que no hay que ni siquiera instalarlo solo hay ejecutarlo, poner los archivo de nuestra web en una carpeta dentro de la carpeta root del programa,
luego tenemos que ir a nuestro navegadro y escribir la siguiente direccion http://localhost/nuesraweb.php o http://localhost:8080/nuestraweb.php suponiendo que nuestraweb.php se encuentra en la raiz del directorio root.
Enlace de descarga de USB webserver 8:
Otro programa con las mismas funcionalidades pero no es portable es decir hay que instalarlo es el Wamp Server:
Enlace de descargar de Wamp Server:
Bueno por ultimo les dejo los enlaces para descargar CMS, es decir programas que nos permiten crear nuestar web sin siquiera programar, solo configurando la apariencia y
las funcoinalidades, estos programas son totalmente gratuitos y libres de uso, solo hay informarse sobre su funcionamiento y pueden tener su pagina web funcionando en internet en
poco tiempo.
Joomla: nos permite tener nuestra web gestinandola con modulos, extenciones y plugins que la dotan de funcionalidades exepcionales la mayoria gratuitos.
Enlace de descargar de joomla 1.5:
Enlace de descarga de joomla 1.6:
Web para descargar infinidades de extenciones para joomla: http://extensions.joomla.org/
Otros CMS:
Wordpress:
Enlace de descarga de worpress: http://wordpress.org/latest.zip
ClipBucket: Para video estilo youtube de gran calidad solo hay que dejar un enlace a la web del autor muy pequeño en la parte inferior
Enlace de descarga de ClipBucket:
Bueno con esto finalizo si quieren aglun hosting gratis para empezar sus proyectos tengo dos que me parecen muy buenos por las prestaciones
El mejor de los dos creo yo Byethost:
Solo tienen que entrar a la web y regitrarse donde dice signup now o aglo asi nos da 6gb de espacio web y 200gb de transferencia mensual totamlmente gratis y sin publicidad.
Enlace Web:
El otro es www.000webhost.com, similar al anterior solo que nos borran la cuenta si naide nos visita por un tiempo o si no tenemos ninguna web funcionando.
Bueno ahora si termine jaja espero que le haya servido a alguien suerte y si tienen alguna duda no duden en preguntar si puedo la respondo.
HA Y NO SE OLVIDEN DE BUSCAR EN GOOGLE MAS INFORMACION SOBRE EL TEMA QUE VAN A ENCOTRAR UN MONTON.
de alguna forma iniciando en el desarrollo de paginas web, es medio sencillo la idea es mostrarle una introduccion y algunas herramientas gratuitas, como para que se interesen en el tema y luego buesquen mas informacion en internet que esta repleto.
Tratare de comenzar desde cero suponiendo que hay gente que recien empieza, no voy a entrar mucho en detalle con los lenguajes de programacion simplemente voy a hacer reseña de cada uno y para que sirven, tampoco es que sea un experto en pimer lugar iba a publicar algunos programas pero decidi hacer un mini tutorial detallando la forma
en que fui aprendiendo las cosas cuando empezaba que fue hace poco jajajja
Todos los programas son gratuitos son los que mas me han gustado porque son bastante completos y practicos
Bueno como la mayoria saben las paginas web son aquellos sitios en los que navegamos por internet diariamente con nuestro navegador favorito, como google, facebook, taringa ,etc. el navegador web es justamente
eso el programa que utilizamos para visualizar las paginas, las paginas estan escritas en un lenguaje llamado HTML que son lineas de codigo que son escritas en un documento que
se guarda con extencion .html o .htm es lo mismo, entonces el navegador es el encargado de leer e interpretar ese codigo y muestra en la pantalla los resultados que seria la pagina web.
Para empezar a hacer pruebas para entender como funciona este lenguaje html es necesario tener un editor de textos como el bloc de notas de windows para editar los archivos y un navegador web para visualizar los resultados de nuestra web, como internet explorer de microsoft que viene con windows, firefox, chrome de google, safari de apple, opera o cualquier otro.
Algunos navegadores web gratuitos:
Enlace de descarga de Firefox 5:
Enlace de descarga de Google Chrome:
Enlace de descarga de Opera 11:
Enlace de dascarga de Safari 5:
Breve introduccion a HTML:
Como dijimos html es el lenguaje o sintaxis con la que se escriben las paginas web
La estructura de las paginas web escritas en html es la siguiente:
<html>
<head>
<title>Titulo de la web</title>
<meta>
<!--
Aqui adentro van los comentarios
-->
<!--
Codigo que no se ve en la pagina web Ej: la inclusion de una fichero javascript
-->
<script type="text/javascript"></script>
</head>
<body>
contenido que se ve en la pagina web
Ej:
<div>Hola Mundo</div>
</body>
</html>
Pueden encontrar un totorial completo y sencillo de html en
Pueden probar ese codigo copiandolo en el bloc de notas que esta en inicio, accesorios, lo abren y pegan el codigo y lo guardan con extencion .html es decir se van a archvio, guardar como y le ponen como nombre por ejemplo: prueba.html y le ponen guardar.
Esa es una muy pequeña pagina web pero es una pagina web en fin, es asi como funcionan todas las web ovbiamente con muchas mas lineas de codigo y funciones.
Bueno ahora que ya han experimentado programar con el bloc de notas cabe destacar que existen otros programas mucho mas copados que nos resaltan la sintaxis del codigo html y sus etiquetas con colores, tambien nos facilitan
la inserccion de dichas etiquetas, de formularios, etc. esa es una de las grandes ventajas de utilizar este tipo de programas que nos permite reducir la posibilidad de errores y aumentar la velocidad con la que escribimos
el codigo, sin embargo otra de las cualidades es que nos permiten visualizar el codigo rapidamente en alguno de los navegadores que tengamos intalados.
Algunos programas editores html:
RJ TextEd:
Uno de los mejores programas para programar en varios lenguajes pero orientado a la programacion web, con posiblidad de ver el codigo resaltado y la vista previa en distintos navegadores
que configuremos.
Enlace para descargar de RJ TextEd:
Otro programa muy bueno y similar al anterior
PSPAD EDITOR:
Enlace para descargar Pspad:
Ambos programas son gratuitos.
Hasta aqui vimos que es html y algunos programas para poder editar los archivos y poder practicar.
Otra forma de programar paginas web es utilizando un editor HTML visual (WYSIWYG) que nos permite en ves de escribir codigos y etiquetas, nos permite desplazar o arrastrar los elementos
de la pagina web como si la estuvieramos diseñando en el word o programas similares.
En mi opinion es aconcesjable iniciarse con la programacion con editores de texto como los que mencione antes, y luego se pueden combinar los conocimientos adquiridos
con las posibildades que brindan los programas WYSIWYG.
El mejor editor WYSIWYG del mercado pero de pago es el adobe dreamweaver.
Otro editor con menos funciones pero gratuito es el NVU:
Enlace de descarga de NVU:
Bueno las pruebas de los archivos .html las deben hacer en su navegador web, ya sea internet explorer, firefox, opera, safari, google chrome, etc solo tienen
que habrir el arhivo html con algunos de esos navegadores. Cabe destacar que no todos los navegadores interpretan el codigo html de la misma forma, no tanto el html
que es estandar para todos los navegadores, sino los estilos o mejor dicho la hojas de estilos que es lo que deben aprender luego de html, de alguna forma lo que hacen
las hojas de estilos es darle justamente estilo a la web, es decir dotarla de apariencia y colores y formato como si lo hicieran con el word solo que con codigo, las extenciones de
las hojas de estilo son .css, al igual que html tiene sus reglas y etiquetas. Pero esto es algo
mucho mas estenso solo lo mencionaba.
CSS o hojas de estilo como dije nos permite dotarla de apariencia a nuestra web, el codigo css se puede escribir dentro del archivo html dentro de las etiquetas <head>Aqui</head>
Ej:
<html>
<head>
<title>Titulo de la web</title>
<meta>
<style type="text/css">
#blanco {
color: #ffffff;
}
.negro {
background-color: #000000;
}
</style>
</head>
<body>
<div id="blanco" class="negro">seq</div>
</body>
</html>
Aqui vemos que el elemeto div con id pagina se vera con texto de color blanco indicado por la id #blanco, y con fondo negro indicado por la clase .negro, las id se aplican a un solo elemento
html y las clases pueden ser aplicadas a cualquier etiqueta o elemento como quieran llamarlo, cabe destacar que tanto las id como las clases pueden ponerle el nombre que deseen.
Bueno esto es una introduccion a las hojas de estilo ustedes deben buscar mas informacion en internet.
Un manual de CSS:
Bueno hasta aqui solo vimos a grandes rasgos los que es html y algunos programas para editar los archivos, y las hojas de estilos, lo siguiente luego de haber practicado y teniendo una nocion
mas proxima de los que html y css habiendo conocido la mayorias de las etiquetas y sus funciones lo siguiente es aprender algun lenguaje de programacion orientado a objetos, como los son javascript, vbscript, etc
Javascript sirve por ejemplo para hacer calculadoras, para poner la hora en la pagina, o hacer cualquier tipo de calculos, tambien se pueden modificar algunos elementos html
La inclusion de un codigo javascript se hace de la siguiente forma:
<body>
<script type="text/javascript">
Codigo javascript
</script>
</body>
Un manual de javascript:
El siguiente paso es aprender un lenguaje de programacion del lado del servidor, es decir que tenga la capacidad de hacer consultas a bases de datos y que se ejecute en el servidor como los son PHP, ASP, etc.
Con php se pueden hacer paginas web como taringa, facebook, google, etc, que llevan un registro en las bases de datos sobre sus usuarios registrados, los posts publicados los mensajes, etc. obviamente teniendo el conocimiento dinero y equipo necesario.
El codigo php no lo interpreta el navegador
sino que es el servidor donde esta el interprete php el que lo hace, que se encarga de interpetar el codigo y enviarlo al navegadro en formtao html.
Estructura de el lenguaje PHP:
<php?
$a = 1;
$b = 2;
$c = $a+$b;
echo $c;
?>
Bueno como vemos las $a es una variable, es la forma de escribir las variable poniendole un signo $ delante del nombre que queramos. en la variable $c se suman ambas
y luego se las imprime en pantalla con echo, y el resultado es 3.
Un manual de PHP:
Para hacer las pruebas si van a utilizar php deben tener un servidor web instalado en su computadora, pero como siempre hay herramientas gratuitas y superfaciles de usar, la idea es
tener un servidor intalado, como apache, con el interprete php, y el sistema de bases de datos MySQL, pero hay programas que nos instalan todo junto en en uno solo todo ya configurado
Algunos de estos programas:
USB WebServer 8:
La principal caracteristica es que no hay que ni siquiera instalarlo solo hay ejecutarlo, poner los archivo de nuestra web en una carpeta dentro de la carpeta root del programa,
luego tenemos que ir a nuestro navegadro y escribir la siguiente direccion http://localhost/nuesraweb.php o http://localhost:8080/nuestraweb.php suponiendo que nuestraweb.php se encuentra en la raiz del directorio root.
Enlace de descarga de USB webserver 8:
Otro programa con las mismas funcionalidades pero no es portable es decir hay que instalarlo es el Wamp Server:
Enlace de descargar de Wamp Server:
Bueno por ultimo les dejo los enlaces para descargar CMS, es decir programas que nos permiten crear nuestar web sin siquiera programar, solo configurando la apariencia y
las funcoinalidades, estos programas son totalmente gratuitos y libres de uso, solo hay informarse sobre su funcionamiento y pueden tener su pagina web funcionando en internet en
poco tiempo.
Joomla: nos permite tener nuestra web gestinandola con modulos, extenciones y plugins que la dotan de funcionalidades exepcionales la mayoria gratuitos.
Enlace de descargar de joomla 1.5:
Enlace de descarga de joomla 1.6:
Web para descargar infinidades de extenciones para joomla: http://extensions.joomla.org/
Otros CMS:
Wordpress:
Enlace de descarga de worpress: http://wordpress.org/latest.zip
ClipBucket: Para video estilo youtube de gran calidad solo hay que dejar un enlace a la web del autor muy pequeño en la parte inferior
Enlace de descarga de ClipBucket:
Bueno con esto finalizo si quieren aglun hosting gratis para empezar sus proyectos tengo dos que me parecen muy buenos por las prestaciones
El mejor de los dos creo yo Byethost:
Solo tienen que entrar a la web y regitrarse donde dice signup now o aglo asi nos da 6gb de espacio web y 200gb de transferencia mensual totamlmente gratis y sin publicidad.
Enlace Web:
El otro es www.000webhost.com, similar al anterior solo que nos borran la cuenta si naide nos visita por un tiempo o si no tenemos ninguna web funcionando.
Bueno ahora si termine jaja espero que le haya servido a alguien suerte y si tienen alguna duda no duden en preguntar si puedo la respondo.
HA Y NO SE OLVIDEN DE BUSCAR EN GOOGLE MAS INFORMACION SOBRE EL TEMA QUE VAN A ENCOTRAR UN MONTON.