CREAR TU PROPIO SERVIDOR WEB DESDE CASA

Como ustedes ya saben las paginas web están almacenadas en una computadora que dicha computadora es clasificada como servidor ya que cuenta con capacidades muy grandes para procesar muchos usuarios simultáneos, pero si es el caso de que quieres desarrollar tu propia pagina web y comenzar tu negocio sin invertir y cuentas con lo siguientes puntos entonces puedes montar tu propio sitio web.

• PC que no se utilice de preferencia ya que se cargara un nuevo Sistema Operativo).
• PC que tenga alguna version de Windows instalado.
• disco de instalación de alguna distribución de Linux server(CentOs).
• conexión a internet y acceso al módem del proveedor de servicios de internet.

una ves teniendo los componentes necesarios, solo es necesario realizar la instalación de el sistema operativo de nuestra pc, una ves echo esto desde la linea de comandos ejecutar lo siguiente:

[root@localhost ~]# setup                                                                                                                     

mostrara un menu como el siguiente:

Seleccionamos servicios del sistema y dentro del mismo buscamos SSHD como en la siguiente imagen, con la tecla espacio seleccionamos y con TAB nos movemos alas opciones, para ejecutar herramienta, de esta forma queda configurado el acceso remoto a tu servidor por medio de ssh como se muestra en la siguiente imagen.

Una ves echo esto reiniciamos el servidor y  descargamos los siguientes archivos desde tu pc:

• Descargar XAMPP para linux
• SSH Secure Shell

Instalamos el archivo SSH Secure Shell desde tu computadora en windows, y ejecutas este sencillo programa, esto es para acceder al servidor desde la linea de comandos del servidor.

pasamos el archivo de xampp.tar.gz (le cambias el nombre para que resulte mas simple descomprimirlo en el servidor) al servidor de forma remota con el programa que se acaban de instalar en su pc, al directorio: /opt  para esto debes entrar como usuario root.

Una vez copiado el archivo ejecutamos el siguiente comando  como se muestra en la imagen:

luego echo esto se ejecuta el siguiente comando:

  [root@localhost ~]# /opt/lampp/lampp start  

si todo anda bien aparecera como en la siguiente imagen:

y para probar esto ejecutamos desde el navegador la ip del servidor por ejemplo si la ip de tu nuevo servidor es 192.168.1.50 seria http://192.168.1.50 y deberá mostrarte una pagina que del directorio XAMPP, y listo ahora tu pagina web la puedes alojar ahi y meterla dentro del directorio /opt/lampp/htdocs. echo esto solo deberás abrir los puertos de tu módem y ver cual es tu ip publica, este tema hablare de ello en mi siguiente entrada, es bastante simple, solo es necesario tener conocimientos básicos de redes.

saludos espero le haya servido una de las formas mas sencillas de montar tu propio servidor web.

Read More

INTRODUCCIÓN A HTML5

Si bien es sabido que en estos últimos años la palabra HTML5 es bastante famosa entre los diseñadores web y programadores, dado que HTML5  ofrece gran funcionalidad ala hora de hacer paginas web mas agradables ala vista en conjunto con CSS3, como podrán darse una idea, combinar este lenguaje de con otras tecnologías como los son CSS3, PHP, JAVASCRIPT, se pueden lograr paginas muy amistosas al usuario, aunque en la actualidad existen muchas herramientas para darle el toque que quieras y la funcionalidad deseada a tu web, por ejemplo PHPmailer una librería gratuita de php para enviar correos, en función a que te des cuenta cuando alguien se registre en tu sitio web o simplemente hacer E-mailing (envió de correo masivo para promocionar tu sitio), como podrán ver las posibilidades son ilimitadas y en lo personal como programador prefiero mejor hacer todo desde el código y no utilizar sitios web que se generan de forma rápida. como lo son wordpress y jomla por mencionar algunos, no digo que estos sean mala idea, pero en la experiencia que tengo, cuando una empresa quiere hacer su pagina web y promocionarse la mejor opción es hacer la pagina desde cero.

por eso la importancia de ir conociendo las bases de como funcionan las paginas web y que lenguajes se pueden utilizar para crear la pagina web acorde a tus necesidades. vamos a darle un vistazo a lo que es la estructura básica de una pagina echa en HTML5 como se  muestra en la siguiente imagen.

en la imagen anterior se pueden observar lo que son las etiquetas básicas, para definir un documento HTML5 solo es necesario delarar al principio del documento con la etiqueta <!DOCTYPE html> como se muestra en el siguiente codigo:

ejemplo HTML 4 Transicional

1 2 3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Doctype en HTML5

1	<!Doctype html>

como lo pueden ver es muy sencillo definirlo, ya conesta linea el navegador que elijas ya sabe que se trata de un documento hecho en HTML5, si bien esa es la forma de definir el documento, ahora veamos la estructura completa:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<!DOCTYPE html> <html lang="es"> <head>     <meta charset="utf-8" />     <title>Estructura basica de una pagina web en HTML5</title> </head> <body>         <header>             <nav>                 <a href="inicio.html">Inicio</a>                 <a href="nosotros.html">Nosotros</a>                 <a href="opcion.html">Opcion</a>                 <a href="opcion.html">Opcion</a>             </nav>         </header>         <aside>             <p>el contenido de aside es algo que no tiene gran relevancia ena pagina, como un submenu, buscador, formulario de contacto etc...</p>         </aside>         <section>             <p>un section es una manera de dividir la pagina por "secciones" de tal modo que podemos dividir el contenido de esta por temas</p>             <article>                 <h1>El article es la parte mas importante del sitio</h1>                 <p>Basicamente en el article pondremos lo mas importante de la pagina, la informacion jerarquicamente mas importante, un article puede tener header y footer, sin estropear el SEO.</p>             </article>         </section>         <footer>             <p>Derechos reservados</p>             <p>Contactenos en info@tucorreo.com</p>         </footer> </body> </html>

Google+

Read More

CSS Media Queries

Media queries de CSS

Saludos el día hoy les traigo una breve explicación de lo que son los media queries y porque son tan importantes a la hora de hacer que tu pagina web sea adaptable a cualquier dispositivo, existen diversas herramientas para realizar pruebas y darse cuenta como sera el aspecto en cada dispositivo... ya sean tablets, smartphones, pc de escritorio y laptops, cada uno cuenta con una resolución diferente según el tamaño de su display, este esta regido por el numero de pixeles que puede mostrar, esta es quizás una de las razones mas importantes de la creación de media queries.

a continuación les dejo un vídeo que explica como son y para que usan y  un ejemplo de código CSS.

Ejemplo:

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

El código anterior esta definido para cambiar la clase "container". según el ancho de la pantalla del dispositivo en el que se esta mirando.

nos vemos en mi próxima entrada que hablara de los selectores y atributos de CSS y de que manera controlar cada uno de los elementos de tu pagina.

Read More

transiciones y transformaciones CSS

Saludos amigos, el dia de hoy veremos lo que son las transiciones y transformaciones en CSS3, que estas nos son de mucha utilidad cuando queremos darle un estilo mas profesional y dinamico a nuestra web, estos efectos son utilizados principalmente en menus.

Ejemplo:

.a:over {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

El codigo anterior se aplica a la clase "a" que al pasar el mause por encima de ella se activara y comenzara a hacer su trabajo.

Read More

Prefijos de CSS

Saludos amigos, el día de hoy veremos lo que son los prefijos de CSS.

Bien si alguna vez te has preguntado porque en diferentes paginas web dice una leyenda que dice:"esta pagina se ve mejor en chrome o en mozilla firefox u opera", la razón de lo anterior es simple, cada navegador tiene su propia forma de interpretar el código de la pagina web que estas visitando, la razón de ello es que existe una norma que establece  el consorcio World Wide Web (W3C).

Existen ciertas reglas de CSS que no son reconocidas aun por dicha organización y los desarrolladores de dichos navegadores se adelantan para que las paginas web sean cada vez mas amigables a la vista del usuario.

En el siguiente vídeo se explica a detalle de lo que son los prefijos de css.

https://www.youtube.com/user/packo6300 

Read More

Introducción al CSS

Saludos amigos, aquí les traigo un vídeo que explica lo que es el CSS3 (hojas de estilos en cascada), poco a poco iré subiendo los demás vídeos por lo pronto aquí tienen el primer vídeo que explica su historia y como es que fue naciendo la necesidad de ir mejorando este lenguaje, que es de gran utilidad al momento de personalizar nuestras paginas web.

no olviden suscribirse!! a mi canal de youtube saludos

packo6300

Read More