La Consultoría, la Estrategia y la Programación Web

La combinación de la consultoría, la estrategia y la programación web te permite dar soluciones pensadas y desarrolladas desde la base real del problema hasta la solución misma. Esto hace que tengas una visión clara y a gran escala que te ayuda a tener una perspectiva más amplia de los problemas existentes.

Una página web por sí sola, no resuelve el problema de la necesidad que tiene una empresa de atender a los clientes. Necesitan una estrategia. Al mismo tiempo, una estrategia sin el debido conocimiento técnico podría ser un riesgo para realización de la idea y el resultado final sería muy desastroso. Continue reading “La Consultoría, la Estrategia y la Programación Web”

¿Cómo Crear una Clase en PHP?

Trabajar con clases en PHP es una gran manera de optimizar su código y hacerlo increíble.

Las clases o la programación orientada a objetos (OO) se ven a veces como algo complicado de hacer, pero mientras más practiques y trabajes en ellas más hábil y experto te volverás.

Descarga el código: https://github.com/lopezpagan/youtube-tutorials/tree/master/gdpgELDBSLk

¿Cómo Crear Un Campo de Selección en HTML/JSON y PHP? – Nivel Avanzado

Video tutorial que te enseña a Crear Un Campo de Selección en HTML/JSON y PHP
Nivel Avanzado 3er Video

Ej. Campo de selección (drop-down field, select field)

Descarga el proyecto:

https://github.com/lopezpagan/youtube-tutorials/tree/master/campo-de-seleccion

 

 

¿Cómo Crear Un Campo de Selección en HTML y PHP? – Nivel Intermedio

Video tutorial que te enseña a Crear Un Campo de Selección en HTML y PHP
Nivel Intermedio 2do Video

Ej. Campo de selección (drop-down field, select field)

Descarga el proyecto:

https://github.com/lopezpagan/youtube-tutorials/tree/master/campo-de-seleccion

 

 

¿Cómo Crear Un Campo de Selección en HTML y PHP? – Nivel Básico

Video tutorial que te enseña a Crear Un Campo de Selección en HTML y PHP
Nivel Básico 1er Video

Ej. Campo de selección (drop-down field, select field)

Descarga el proyecto:
https://github.com/lopezpagan/youtube-tutorials/tree/master/campo-de-seleccion

 

 

¿Cómo Crear Páginas Web Responsive con Dreamweaver?

Con este tutorial puedes aprender lo básico para desarrollar páginas web responsive en Dreamweaver. En este tiempo es necesario desarrollar las páginas que se ajusten a las distintas pantallas de los equipos tanto móviles, tabletas y computadoras de escritorio (desktop). El diseño de páginas web responsive debe ser modular y en bloques, teniendo en cuenta el comportamiento de la página en los equipos y las distintas columnas que mejor acomoda el contenido. El desarrollo web “responsive” es un cambio total en la manera en que comienzas a desarrollar una página web.

¿Cómo Crear una Página Web Responsive con Bootstrap?

Un aspecto general para conocer cómo puedes crear una página web responsive con Bootstrap. Bootstrap es una plataforma “framework” de front-end, que permite desarrollar páginas web responsive. Aquí explico de manera sencilla cómo funciona y cómo puedes crear una página totalmente responsive.

Enlaces mencionados:
• getbootstrap.com
• layoutit.com
• lopezpagan.com/youtube

Programación Web: Código HTML Básico

Aprende a crear una página web utilizando HTML básico. Este video va dirigido a principiantes y personas que están comenzando en el campo de la programación web.

¡Aún tengo dificultad de mantenerme en 5 minutos, pero ahí vamos!

Nota: Me disculpo por el audio, pero creo que se entiende el mensaje bastante bien.

  1. HTML Las siglas significan (HyperText Markup Language)  o (Lenguaje Enmarcado de HiperTexto).  Ésta describe el contenido y la estructura de la información en una página web.

  2. Etiqueta (Tags)
    <p
    class=“paragraph”>Este es un párrafo</p> <p – es el inicio de la etiqueta </p> – es el final de la etiqueta Este es un párrafo – será el texto que se mostrará en el navegador class – es un atributo dentro de la etiqueta <p> parragraph – es el valor o nombre de la clase*El atributo class puede tener más de una clase separada por espacio.  Ej. paragraph1 paragraph2 paragraph3

  3. Plantilla Básica de HTML
    <html> <head>
    <title>Título de la Página</title>
    </head>
    <body> Aquí va el contenido de la página.
    </body>
    </html>

  4. Encabezado Este incluye 6 niveles. <h1> H1 </h1> <h2> H2 </h2> <h3> H3 </h3> <h4> H4 </h4> <h5> H5 </h5> <h6> H6 </h6>

  5. Párrafo <p> Párrafo </p>

  6. Espacios en blanco (Whitespace)
    Estos no son tomados en cuenta en el código sólo le asigna 1 espacio. <p> Este        es    un
    párrafo</p>

  7. Lista sin enumerar (Unnumbered List): <ul> </ul> – Lista sin enumerar <li> </li> – Cada artículo de la lista (list item)Ejemplo:  <ul> <li> Artículo 1 </li>
    <li> Artículo 2 </li> </ul>

  8. Lista ordenada (Ordered List):
    <ol> </ol>
     Lista ordenada <li> </li> – Cada artículo de la lista (list item), funciona igual en ambos. Ejemplo: <ol> <li> Artículo 1 </li>
    <li> Artículo 2 </li> </ol>

  9. Línea horizontal (Horizontal Line): <hr /> crea una línea horizontal para dividir cada sección.

  10. Salto de Línea Forzado (Line Break): <br /> – te lleva a la próxima línea.

  11. Elementos de escritura o fraseo: <em> Énfasis (emphasis) </em> o <i> itálico (italic) </i> <b> Negrillas (bold) </b> o <strong> Negrillas (bold) </strong>

  12. Enlaces (link):
    <a
    href=“http://google.com> Enlace a Google </a>

  13. Imagen: (image): <img /> – Es para mostrar las imágenes y necesita el atributo src con el valor de la ruta donde está la imagen.Ejemplo: <img src=“http://lopezpagan.com/assets/img/logo-blue.png/>


Otras etiquetas:

Nombre Etiqueta inicial Etiqueta final Descripción
a <a> </a> Origen o destino del vínculo
abbr <abbr> </abbr> Abreviatura (p.ej.:WWW, HTTP, etc.)
acronym <acronym> </acronym>
address <address> </address> Información sobre el autor
applet <applet> </applet> Applet Java
area <area> Prohibido Área de un mapa de imágenes en el lado del cliente
b <b> </b> Estilo de texto en negrita
base <base> Prohibido URI base del documento
basefont <basefont> Prohibido Tamaño base de fuente
bdo <bdo> </bdo> Anular algoritmo BiDi I18N
big <big> </big> Estilo de texto grande
blockquote <blockquote> </blockquote> Cita larga
body Opcional Opcional Cuerpo del documento
br <br> Prohibido Salto de línea forzado
button <button> </button> Botón
caption <caption> </caption> Título de tabla
center <center> </center> Forma abreviada de DIV align=center
cite <cite> </cite> Cita
code <code> </code> Fragmento de código de computadora
col <col> Prohibido Columna de una tabla
colgroup <colgroup> Opcional Grupo de columnas de una tabla
dd <dd> Opcional Descripción de una definición
del <del> </del> Texto borrado
dfn <dfn> </dfn> Definición
dir <dir> </dir> Lista tipo directorio
div <div> </div> Contenedor genérico de idioma/estilo
dl <dl> </dl> Lista de definiciones
dt <dt> Opcional Término definido
em <em> </em> Énfasis
fieldset <fieldset> </fieldset> Grupo de controles de un formulario
font <font> </font> Cambio local de la fuente
form <form> </form> Formulario interactivo
frame <frame> Prohibido Subventana
frameset <frameset> </frameset> Subdivisión en ventanas
h1 <h1> </h1> Encabezado
h2 <h2> </h2> Encabezado
h3 <h3> </h3> Encabezado
h4 <h4> </h4> Encabezado
h5 <h5> </h5> Encabezado
h6 <h6> </h6> Encabezado
head Opcional Opcional Cabecera del documento
hr <hr> Prohibido Separador horizontal
html Opcional Opcional Elemento raiz del documento
i <i> </i> Estilo de texto en itálica
iframe <iframe> </iframe> Subventana en línea
img <img> Prohibido Imagen incluida
input <input> Prohibido Control de formulario
ins <ins> </ins> Texto insertado
isindex <isindex> Prohibido Entrada de texto en una sola línea con indicador
kbd <kbd> </kbd> Texto que debe introducir el usuario
label <label> </label> Texto del rótulo de un campo de formulario
legend <legend> </legend> Leyenda de un grupo de campos
li <li> Opcional Objeto de lista
link <link> Prohibido Un vínculo independiente del medio
map <map> </map> Mapa de imágenes en el lado del cliente
menu <menu> </menu> Lista tipo menú
meta <meta> Prohibido Metainformación genérica
noframes <noframes> </noframes> Contenedor de contenidos alternativos para la representación no basada en marcos
noscript <noscript> </noscript> Contenedor de contenidos alternativos para la representación no basada en scripts
object <object> </object> Objeto incluido genérico
ol <ol> </ol> Lista ordenada
optgroup <optgroup> </optgroup> Grupo de opciones
option <option> Opcional Opción seleccionable
p <p> Opcional Párrafo
param <param> Prohibido Valor de propiedad con nombre
pre <pre> </pre> Texto preformateado
q <q> </q> Cita corta en línea
s <s> </s> Estilo de texto tachado
samp <samp> </samp> Ejemplo de salida de programas, scripts, etc.
script <script> </script> Sentencias de script
select <select> </select> Selector de opciones
small <small> </small> Estilo de texto pequeño
span <span> </span> Contenedor genérico de idioma/estilo
strike <strike> </strike> Estilo de texto tachado
strong <strong> </strong> Énfasis fuerte
style <style> </style> Información de estilo
sub <sub> </sub> Subíndice
sup <sup> </sup> Superíndice
table <table> </table>
tbody Opcional Opcional Cuerpo de tabla
td <td> Opcional Celda de datos de una tabla
textarea <textarea> </textarea> Campo de texto multilínea
tfoot <tfoot> Opcional Pie de tabla
th <th> Opcional Celda de encabezado de tabla
thead <thead> Opcional Cabecera de tabla
title <title> </title> Título del documento
tr <tr> Opcional Fila de una tabla
tt <tt> </tt> Estilo de texto de teletipo o monoespacio
u <u> </u> Estilo de texto subrayado
ul <ul> </ul> Lista no ordenada
var <var> </var> Variable o argumento de un programa

Ventajas y Desventajas en Desarrollar tu Sitio Web con el Formato de Una Página

Actualmente la tendencia es desarrollar sitios web utilizando el formato de una página. 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 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. 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 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 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.

Presentación: http://bit.ly/1Os9ieN

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

Este tutorial está enfocado en personas nuevas y principiantes. Utilizó un lenguaje bastante fácil de entender y técnicas que son fáciles de implementar.

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

Para más tutoriales de programación entra a: lopezpagan.com/youtube

¿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