Aprende a Programar tu Página Web desde Cero

Descubre el fascinante mundo de la programación web desde cero con nuestro curso. Domina las habilidades fundamentales para crear tu propia página web paso a paso. Desde conceptos básicos hasta técnicas avanzadas, este curso te guiará en el viaje emocionante de convertirte en un programador web autodidacta.

¡Comienza tu aventura digital hoy y dale vida a tus ideas en la web!

Cambiando La Imagen del Header por un Video – Demo

Cambiar la imagen del encabezado por un video en desarrollo web significa reemplazar la imagen estática en la parte superior de una página web con un video que se reproduce automáticamente. En lugar de ver solo una imagen fija, los visitantes de la página verán un video en esa área. Los beneficios de esta modificación son varios.

En primer lugar, añade dinamismo y atractivo visual a la página, capturando la atención de los usuarios de una manera más impactante que una imagen estática. El video puede transmitir información de manera más efectiva, contar una historia o simplemente crear una experiencia más atractiva para quienes visitan el sitio web.

Además, el uso de videos en el encabezado puede mejorar la retención de usuarios, ya que es más probable que permanezcan en la página para ver el contenido en movimiento. Esto puede ser especialmente útil para destacar productos, promociones o simplemente para crear una primera impresión memorable.

Herramienta Para Manejar Gifs Animados

Gifs Media Uploader

Puedes utilizar este proyecto para crear tu sitio para manejar gifs.

La página index.php mostrará todos los gifs que han sido subidos a tu página.

La página media.php mostrará la imagen seleccionada con los campos llenos.

  • El campo de imagen muestra la ruta del gif.

  • El campo de la página muestra la ruta de la página media.php y la imagen gif seleccionada.

  • El campo download puedes descargar la imagen a tu computadora.

Si deseas subir un gif animado, deberás hacer Log In.  Los accesos están en el código.

  • Email: admin@domain.com

  • Password: admin

Una vez tengas acceso, serás redireccionado a la página anterior.

Ahora verás una opción en el menú llamada Upload que te llevará a la página para subir las imágenes. Busca el archivo y presiona el botón de Upload.

Luego de que la foto suba, serás redireccionado a la página de media.php con la imagen subida.

La página _process.php es donde todo el proceso es realizado.

La página de login.php y logoff.php crean una crean y destruyen la variable de sesión para que tengas acceso a uploader.php y _process.php

La plataforma que se utilizó para hacer el html + css se encuentra en getBootstrap.com. El lenguaje de servidor es PHP 5.4 o mayor.


 

Puedes descargar el código desde: https://github.com/lopezpagan/Gifs-Media-Uploader

Ventajas y Desventajas de una Página Web «One Page»

Actualmente la tendencia es desarrollar sitios web utilizando el formato de una página «one page». Debes tener en cuenta que aunque se vé muy bien, este formato no es para todo tipo de negocios.

A continuación algunos puntos que te indican las ventajas y desventajas de utilizar el formato de una página «one page» para desarrollar tu sitio web.

Ventajas:


  • Simplicidad: Lo más sencillo es ofrecer todos tus servicios al visitante en una sola página. No necesita tener ninguna experiencia poder para navegar la página y el aumento en el uso de los equipos móviles hacen que sea fácil de utilizar y adaptarse, ya que es el comportamiento más común de los usuarios.

  • Mobile-friendly: Estas páginas son más sencillas para adaptar a un equipo móvil, porque su diseño es prácticamente similar. La mayoría de las plantillas de una página son “responsive”, se adaptan a los teléfonos inteligentes, tabletas y computadoras de mesa.

  • Mayor Porcentaje de Conversión: No importa el tipo de métrica de conversión sea, notificaciones, registros, ventas o suscripciones esta página hará el trabajo. Lo usuarios estarán a un paso de comenzar el proceso y podrán deslizarse rápidamente de un paso a otro, sin ningún problema.

  • Fácil de Mantener: Es una página solamente que necesitas mantener, nada más.

Desventajas:


  • Escalabilidad: Cuando decidas comenzar a crear más contenido y artículos para un blog, no podrás hacerlo con un sitio web con el formato de una página «one page». Tendrás que hacer un rediseño completo de tu sitio web e implementar los elementos de la navegación con los estilos de las demás páginas.

  • Optimización de los Motores de Búsqueda (SEO): Los buscadores les encanta el contenido y el formato de una página «one page» no tiene mucho contenido. De hecho, tener todo el contenido en una sola página, le crea dificultad a los buscadores para encontrar las palabras claves “keywords”, las cuales ayudan a los motores de búsqueda a dirigir el tráfico.

    Podrás estar ubicado entre los primeros utilizando las palabras claves de tu negocio, pero no podrás aprovechar la oportunidad de que las personas puedan encontrarte a través de las frases y sub-tópicos que se encuentran en tu sitio web, y así, poder ofrecer más información relacionada a los temas de la página.

  • Compartir en las Redes Sociales: Es fácil compartir una página en las redes sociales, lo difícil, es que puedas compartir un contenido específico dentro de esta página, porque todos el contenido está dentro de una sola dirección de url. Aunque es posible, integrarse los botones para compartir secciones individuales dentro de una página, requiere más trabajo y la mayoría de las veces no es costo-eficiente.

  • Analíticos Significativos: Es más complicado analizar el rendimiento de un sitio web con el formato de una página «one page» que de un sitio con múltiples páginas. Con el formato de las múltiples páginas podrás ver las visitas con las conversiones y saber cuál de ellas está funcionando y cuál necesita un ajuste.

    Con el formato de una página, si el visitante llega y se va inmediatamente, no hay manera de saber por qué y reducir el por ciento de rebote “bounce rate”. Y es difícil refinar tu estrategia, cuando desconoces dónde estás fallando.

La Mejor Alternativa es Hacer un Híbrido


Si te gusta el formato de una página, pero piensas que tienes mucho contenido para hacer que funcione para tu negocio, puedes pensar en utilizar el formato de una página para la página de inicio “home” y hacer toda la conversión en esta página. Luego, creas distintas páginas para lo que resulta ser tu página de blog, preguntas frecuentes “faq”, información de la compañía, etc. Puedes utilizar las secciones de la página de inicio para dirigir el tráfico a las demás páginas.

Algunos ejemplos de compañías que están utilizando este formato híbrido son:

La mayoría de los sitios web necesitan ser rediseñados constantemente para poder cumplir con las exigencias de la tecnología emergente y las necesidades de los usuarios.

Al final del día, hacer un rediseño con cambios drásticos se resumen en la siguiente pregunta: ¿Qué necesita mi sitio web para poder ser exitoso? Para unos es una página. Para otros son 50 páginas. Yo creo que la mejor alternativa, está ubicado en el medio de ambas.


Descarga la Presentación/Diapositiva: 

Fuente: AddThis

¿Cómo Puedo Mostrar los Días Hábiles en PHP?

Escribo este artículo en respuesta a la pregunta que me hicieron de ¿Cómo puedo mostrar los días hábiles en PHP?

Debes Saber:

Para poder hacer este ejercicio debemos tener cierto conocimiento en las funciones de fecha, formato de fecha y arreglos. Los nombres de las funciones de php que estaremos trabajando son date() y date_format().  Asegúrate de que la función trabaje con tu versión de PHP.

Esta es la función de date() y los parámetros que acepta.

string date ( string $format [, int $timestamp = time() ] )

Es muy importante que estudies y utilices de referencia la tabla del formato que puedes utilizar para la fecha. Puedes entrar a página web de la documentación de PHP. No es necesario aprendértelos todos, pero debes conocer algunos que estarás utilizando la mayoría de las veces.

Y = 2015 (año completo)
y = 15 (últimos 2 dígitos del año)
m = 12 (número del mes)
d = 01 (número del día en 2 días)
h = 09 (hora en formato de 12 horas)
i = 30 (minutos con el cero al inicio)
s = 23 (segundos con el cero al inicio)

Aunque no lo mencioné anteriormente, utilicé otra función de php llamada «date_create()» que te permite convertir un «string» (cadena de caracteres) en el formato de fecha y así asignarle el formato que deseas utilizar.

$date = date_create('2015-12-13');
echo date_format($date, 'Y-m-d H:i:s');

La Búsqueda:

Es importante que entiendas siempre existe más de una forma de realizar las cosas, pero lo que buscamos es que podamos tener un código que sea re-utilizable, o sea, pasar el trabajo una vez. Sea que te sientes a programar el código tu mismo, o hagas una búsqueda en la internet, es tiempo que se te resta de la fecha final del proyecto.

Así que debemos volvernos expertos en decidir qué momentos, programar y qué momentos hacer la búsqueda en internet, ya que existen un sin número de ejemplos de pequeños pedazos de códigos que nos pueden servir para nuestro proyecto, pero debemos saber leer e interpretar el mismo.

El Código:

Este código lo tomé de https://eval.in/90006 y me pareció muy acertado para responder a la pregunta que me hicieron. Al ser una función nos permite aplicarlo de manera sencilla.

function number_of_working_dates($from, $days) {
    $workingDays = [1, 2, 3, 4, 5]; # date format = N (1 = Monday, ...)
    $holidayDays = ['*-12-25', '*-01-01', '2013-12-24', '2013-12-25']; # variable and fixed holidays

    $from = new DateTime($from);
    $dates = [];
    $dates[] = $from->format('Y-m-d');
    while ($days) {
        $from->modify('+1 day');

        if (!in_array($from->format('N'), $workingDays)) continue;
        if (in_array($from->format('Y-m-d'), $holidayDays)) continue;
        if (in_array($from->format('*-m-d'), $holidayDays)) continue;

        $dates[] = $from->format('Y-m-d');
        $days--;
    }
    return $dates;
}

print_r( number_of_working_dates('2015-12-23', 10) );

Le añadí algunas otras líneas para que pudieran ver cómo se puede utilizar un código base para desarrollar lo que deseamos.

$dates = number_of_working_dates('2015-12-23', 10); //Arreglo del resultado de las fechas

foreach ( $dates as $date ) {
    $fecha = date_create($date); //Convertir 'string' a formato de fecha
    echo($date . ' - ' . $fecha->format('D') . '
');  
    //Muestro los formatos que deseo (fecha y el día)
    
}

//Aquí puedo seleccionar el día deseado
$fecha = date_create($dates[0]);
//echo( ''.$dates[0] . ' - ' . date_format($fecha, 'D') . '');  //Método tradicional
echo( ''.$dates[0] . ' - ' . $fecha->format('D') . '');  //Orientado a objeto

Resultado final:

Este es el resultado final del código completo para que lo puedan utilizar.

function number_of_working_dates($from, $days) {
    $workingDays = [1, 2, 3, 4, 5]; # date format = N (1 = Monday, ...)
    $holidayDays = ['*-12-25', '*-01-01', '2013-12-24', '2013-12-25']; # variable and fixed holidays

    $from = new DateTime($from);
    $dates = [];
    $dates[] = $from->format('Y-m-d');
    while ($days) {
        $from->modify('+1 day');

        if (!in_array($from->format('N'), $workingDays)) continue;
        if (in_array($from->format('Y-m-d'), $holidayDays)) continue;
        if (in_array($from->format('*-m-d'), $holidayDays)) continue;

        $dates[] = $from->format('Y-m-d');
        $days--;
    }
    return $dates;
}

//print_r( number_of_working_dates('2015-12-23', 10) );
$dates = number_of_working_dates('2015-12-23', 10);

foreach ( $dates as $date ) {
    $fecha = date_create($date);
    echo($date . ' - ' .  $fecha->format('D') . '
'); 
    
}


$fecha = date_create($dates[0]);
//echo( ''.$dates[0] . ' - ' . date_format($fecha, 'D') . '');
echo( ''.$dates[0] . ' - ' . $fecha->format('D') . '');  //orientado a objetos

Lo Próximo:

Luego tomaré un tiempo para crear un video que muestre cómo se hace todo, ya que hay muchas personas que se les hace más fácil aprender cuando lo ven. Saludos y hasta la próxima.

Referencias:

¿Cómo Auto-Completar Un Formulario?

 

Este video te mostrará como ingresar un código y auto-completar un formulario con los valores de la tabla.

Recomiendo a que veas el video Cómo Borrar Récords de una Tabla y Añadirlos en Otra con PHP.

Descarga el proyecto:
https://github.com/lopezpagan/youtube-tutorials/tree/master/4-fThzGTB5g

Para más tutoriales entra a: lopezpagan.com/youtube.

¿Cómo Borrar Records de una Tabla y Añadirlos en Otra con PHP?

A través de este tutorial muestro Cómo Borrar Records de una Tabla y Añadirlos en Otra con PHP.
Continue reading «¿Cómo Borrar Records de una Tabla y Añadirlos en Otra con PHP?»

¿Cómo Hacer Una Búsqueda por Fechas con un Formulario en PHP?

Este es un tutorial básico en el cuál muestro cómo hacer una búsqueda por fechas con un formulario en PHP.

Recomiendo que veas el video: ¿Cómo Manejar la Fecha en los Formularios? – HTML y PHP

Descarga el proyecto: 

https://github.com/lopezpagan/youtube-tutorials/tree/master/7cjh3aGNH00

 

Para más tutoriales entra a: lopezpagan.com/youtube

¿Cómo verificar los errores en tu programación?

Este es un tutorial básico en el cuál muestro como puedes verificar los errores de tu programación.

Puedes ver cómo se pueden verificar los errores en jQuery, Javascript, PHP y cómo verificar los estilos en CSS utilizando tu navegador.

Para más tutoriales entra a: lopezpagan.com/youtube

¿Cuales son las Etapas del Desarrollo de una Página Web?

En esta presentación sencilla te muestro las etapas de desarrollo de una página web.  En algún momento, te has preguntado: ¿Cómo se desarrolla una página web? ¿Cuál es el proceso de su desarrollo? ¿Cómo se divide un proyecto de desarrollo web?  Pues estas y otras interrogantes deseo responder con ésta presentación / diapositiva.

Estas son las 6 Etapas del Desarrollo de una Página Web.

1. Recopilación de Información
2. Planificación
3. Diseño
4. Desarrollo
5. Pruebas y Entrega
6. Mantenimiento

 


Descarga la presentación / diapositiva: http://www.slideshare.net/lopezpagan/how-its-made-digitally

¿Qué es un Wireframe? ¿Cómo se crea un Wireframe?

En diseño web, un wireframe es una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas.

Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para comprobar la usabilidad de un sitio web.

La principal ventaja es que ofrece una perspectiva basada solamente en la arquitectura del contenido, obviando el diseño y evitando elementos accidentales que puedan distraer (colores, tipografías, imágenes, textos, etc.).

Aunque es un video del 2013, te muestro como debo desarrollar una estructura de una página antes de comenzar a diseñarla y programarla.  Pronto haré un video más actualizado mencionando las herramientas que existen para desarrollar wireframes y prototipos.

¿Cómo Manejar las Bases de Datos con PHPMyAdmin?

 

Aprende como manejar las bases de datos. Instalar, conectar, crear y diseñar las bases de datos de MySQL con PHPMyAdmin.

– Instalar una base de datos local
– Instalar un manejador de la base de datos
– Crear una base de datos
– Conectarse a una base de datos
– Diseñar tablas en una base de datos
– Alterar y borrar tablas en una base de datos
– Insertar, editar, seleccionar y borrar datos de una tabla

http://www.mamp.info
http://dev.mysql.com/downloads/

¿Cómo Hacer una Búsqueda con Multiples Criterios?

Este video es la continuación del tutorial #7 y amplía el tema discutido en el tutorial #2. Te muestra cómo puedes hacer una búsqueda a través de un formulario y con varios criterios de búsqueda.

Descarga el proyecto:
https://github.com/lopezpagan/youtube-tutorials/tree/master/4DHd9Ewx7I8

Lee más: lopezpagan.com/youtube

¿Cómo Desarrollar una Página Web de Manera Simple?

Aquí enseño como puedes desarrollar una página web sobre la plataforma de Bootstrap. Es fácil y sencillo de hacer. Este video forma parte de una serie de tutoriales en los cuales hemos ido desarrollando un proyecto existente.

Descarga el proyecto:
 https://github.com/lopezpagan/youtube-tutorials/tree/master/aZG2F8snYQM

Para más tutoriales entra a: lopezpagan.com/youtube.

¿Cómo Subir un Archivo con un Formulario a tu Servidor?

Aquí enseño a crear un formulario, el cuál te permite subir un archivo a tu servidor.  Este video forma parte de una serie de tutoriales en los cuales hemos ido desarrollando un proyecto existente.

Descarga el proyecto:
https://github.com/lopezpagan/youtube-tutorials/tree/master/3gDKl4tGiAE

Página de tutoriales: lopezpagan.com/youtube

¿Cómo Hacer una Búsqueda y Mostrar los Resultados con PHP?

Aquí mostramos cómo hacer una búsqueda y mostrar los resultados en una página utilizando PHP. Este video forma parte de una serie de tutoriales en los cuales hemos ido desarrollando un proyecto existente.

Descarga el proyecto:
https://github.com/lopezpagan/youtube-tutorials/tree/master/afo5WcdbuG0

Página de tutoriales: lopezpagan.com/youtube

¿Cómo Listar, Añadir, Editar, Borrar Records con Dreamweaver y PHP?

Aquí enseño como puedes utilizar Adobe Dreamweaver y PHP para listar, añadir, editar y borrar records. Este video forma parte de una serie de tutoriales en los cuales hemos ido desarrollando un proyecto existente.

Descarga el proyecto:
https://github.com/lopezpagan/youtube-tutorials/tree/master/ieeRfZEFOAc

Página de tutoriales: lopezpagan.com/youtube

¿Cómo Cargar Una Página Dentro de un DIV con jQuery?

Cómo cargar una página dentro de un DIV con jQuery utilizando Adobe Dreamweaver CS6.

-> Para el problema de «same origin policy»
Ver video: http://lopezpagan.com/como-cargar-varias-paginas-dentro-de-la-misma-pagina/

Descarga el proyecto:
 https://github.com/lopezpagan/youtube-tutorials/tree/master/f4pXZ_LeqxE

Para más tutoriales entra a: lopezpagan.com/youtube.