MaDesWeb

VALIDACIÓN CON JAVA SCRIPT

noreply@blogger.com (Anonymous) — Sun, 31 Dec 2017 20:05:00 +0000

Que tal amigos en esta oportunidad, detallaremos algunos tipos de validaciones con java script, métodos que fueron agregados en las API de HTML5.

Para ponernos un poco en contexto una API (Application Programming Interface), por sus siglas en ingles, y que en español podríamos llamar, Interfaz de programación de aplicaciones.

Seguramente no le sorprenderá saber que, al igual que todos los aspectos de HTML5, los formularios HTML5 tiene su propia API para personalizar todos los aspectos de procesamiento y validación.

Existen diferentes formas de aprovechar el proceso de validación en HTML5.

Podemos usar los tipos de campo para activar el proceso de validación, como vimos en el 📚articulo sobre tipos de datos en formularios.

Cada uno de estos tiene su propia forma de validación individual bastara con elegir el tipo de datos que estemos capturando para poner una restricción, como el de tipo email, o la restricción required para evitar que un campo quede vació.

También podemos crear los diferentes tipos de campos especiales, usando pattern para personalizar requisitos de validación.

Cuando se trata de aplicar mecanismos complejos de validación (por ejemplo, combinando campos o comprobando los resultados de un cálculo) deberemos utilizar los nuevos recursos provistos por esta API.

setCustomValidity()

Con este método especificamos un error personalizado que mostrará un mensaje cuando el formulario es enviado.

Podemos crear mensajes personalizados para nuestros propios requisitos de validación usando el método

setCustomValidity(mensaje).

Realicemos un ejemplo con esta aplicación.

Ejemplo:

Validación de campos con java script

Para que el proceso de validación sea omitido, el usuario debe llenar al menos un campo.

Caso contrario, el codigo de validación enviara el mensaje.

El codigo seria el siguiente.

Código de Validación

Para el ejemplo hemos utilizado codigo java script, dentro de HTML para que podamos apreciar de mejor manera la aplicación de este.

Dos campos fueron creados para recibir el nombre y apellido del usuario. Sin embargo, el formulario solo será inválido cuando ambos campos se encuentran vacíos. El usuario necesita ingresar solo uno de los campos, su nombre o su apellido, para validar la entrada. En casos como éste no es posible usar el atributo required debido a que no sabemos cuál campo el usuario decidirá utilizar. Solo con código Javascript y errores personalizados podremos crear un efectivo mecanismo de validación para este escenario.

CREANDO UNA PLANTILLA RÁPIDA CON BOOTSTRAP (SOLO 6 PASOS)

noreply@blogger.com (Anonymous) — Thu, 23 Nov 2017 01:52:00 +0000

Hola amigos en esta ocacion, les traigo una opción muy buena a la hora de iniciar una plantilla con bootstrap.

En algunas ocasiones tenemos limitantes al momento de conseguir los archivos de bootstrap, o no tenemos acceso a nuestros dispositivos de almacenamiento para poder implementarlos.

En ese aspecto podemos echar mano de una herramienta de bootstrap, que nos permite utilizar algunos diseños que ellos tienen en su sitio los cuales están disponibles de forma gratuita para todos los usuarios, y que a partir de ellos podemos trabajar según sean nuestras necesidades, o incluso porque no, realizar un híbrido, incluyendo elementos de varias plantilla.

Para poder implementar este ejercicio, antes deben haber creado su carpeta de proyecto, como mejor les parezca, acá tienen una imagen de una carpeta de proyecto.

facebook: MaDesWeb

Sin mas que agregar les muestro lo que tienen que hacer para tener una plantilla muy completa en tan solo 6 pasos!!!

Paso 1

Debes visitar este enlace para poder apreciar los temas que tienen bootstrap.

madesweb

Paso 2

Deberás elegir un tema que tenga los componentes con los que quieras trabajar en tu proyecto, una vez echo eso damos clic para abrir la plantilla.

maquetacion y desarrollo web

El botón de descargar que aparece en la esquina superior derecha, te descargara todos los archivos de bootstrap así que de momento no nos sirve.

Paso 3

Damos clic derecho en la plantilla y elegimos "VER CÓDIGO FUENTE"... yo nunca he encontrado un botón que permita descargar el código de otra manera así que es lo que yo aplico para poder usar todos los componentes que tiene la plantilla.

Paso 4

Nos aparecerá todo el código HTML de la plantilla como los enlaces de los archivos adicionales para que esta funciones, como CSS y el JS.

Lo que tenemos que hacer es copiar TODO el código HTML5 que nos aparece y pegarlo en nuestro editor de código en mi caso sublime y guardarlo con el nombre de index o como quieran ponerle.

Si visualizamos esto en el explorador veremos que no tiene el mismo estilo o forma de la plantilla original y es porque los CSS están siendo utilizados de forma local.

Es decir están almacenados en unas carpetas a las cuales se hace referencia en el código, como podemos darnos cuenta en la linea de cogido siguientes:

Paso 5

Como ya se imaginaran lo que tendremos que hacer es dar un clic en la linea de código que nos marca la ruta de acceso a los archivos CSS necesarios para esta plantilla.

Esto nos abrirá una nueva ventana en el explorador con el código css necesario para cierta parte de la plantilla.

No se asusten cuando vean todo ese código, recuerden que es el min.css de bootstrap, osea esta minimizado para efectos de optimisacion.

Recuerden que la ruta de acceso a los css, deben de ser modificadas y acopladas a las de su proyecto.

Solo selecciona todo el código copialo en tu editor y guárdalo en la carpeta CSS de tu proyecto, es aconsejable que le pongas: bootstrap.min.css.

Otro consejo es que debes fijarte en el codigo HTML si tiene esta linea de código:

<link href="product.css" rel="stylesheet">

Que significaría que esta plantilla usa CSS personalizado, por lo cual tendrán que darle en el link, para descarar esos estilos CSS también, de lo contrario tu plantilla no lucirá como la original.

De esta manera lucen los códigos CSS personalizados para la plantilla que yo utilice, solo es de copiarlos en el editor, asignarle un nombre y ver que coincida con el nombre que aparece en la plantilla HTML.

Paso 6

Deberán copiar los respectivos .JS que aparecen en la plantilla y incorporarlos a la suya, deberán copiar el JQUERY y el BOOTSTRAP.MIN.JS para que todos los efectos de plantilla funcionen al cien.

En definitiva todos los .js que aparecen en la parte inferior de la plantilla.

Y después de eso hemos instalado la plantilla en 6 simples pasos.

Espero que les sirva amigos, recuerden compartir y dejar un like en nuestra pagina de facebook.

Hasta la próxima.

COMO HACER UN LOGIN EN PHP

noreply@blogger.com (Las tic) — Tue, 21 Nov 2017 02:34:00 +0000

En esta oportunidad les presento el desarrollo de un login con php.

Este sera el primer de dos artículos en cual crearemos un CRUD con php, en la aplicación servirá para registrar libros de una manera sencilla.

Esta desarrollado con boostrap para la plantilla base y algunos css propios.

Mostrandoles la conexión a la base de datos, la validación con php y js, y un escritorio si la conexión se realiza con éxito.

Sin mas que decir vamos a iniciar....

LA CONEXIÓN

CONEXIÓN CON PHP

En el archivo de la conexión, definimos nuestro host, en este caso es uno local, colocamos el usuario, y su contraseña y por ultimo el nombre de la base de datos.

Y establecemos la variable $con para iniciar nuestra conexión, y pasamos las variables: $host, $user, $password y $db.

EL LOGIN

Desarrollamos el encabezado de html, y en el cuerpo diseñamos un formulario solicitando un nombre de usuario y una contraseña.

Tendremos un botón el cual nos servirá para acceder a la aplicación.

En la parte inferior del archivo, incluimos el archivo .js que incluye la validación con java script.

En ese apartado se estudiara el propósito de esa validación.

VALIDACIÓN CON PHP

Al darle clic en el botón del login, se llama el archivo de validación con php, que contiene las restricciones, que deben de existir registros en la base de datos que coincidan con los datos ingresados en el login.

Luego establecemos el inicio de la session.

VALIDACIÓN JAVA SCRIPT

VALIDACIÓN CON JAVA SCRIPT

Básicamente lo que definimos es que no se pueden dejar espacios los espacios en el formulario de login, y que los datos ingresados deben cumplir con el formato establecido.

ESCRITORIO DE LA APLICACIÓN

ESCRITORIO DE LA APLICACION

Una vez registrados, nos cargara el index en cual tendremos una pantalla de bienvenida, donde tendremos las opciones del CRUD.

El cual estudiaremos en un nuevo articulo.

Recuerda si te a sido de utilidad, regalame un like, comparte con tus amigos.

Link de descarga en el ultimo articulo..... (PARA SUBIR LOS ARCHIVOS COMPLETOS.)

COMBOBOX O SELECT DINÁMICOS CON JAVA SCRIPT

noreply@blogger.com (Las tic) — Sun, 19 Nov 2017 04:01:00 +0000

SELECT DINÁMICOS CON JAVA SCRIPT

En esta oportunidad les presentare un articulo sobre una tarea que desarrolle, la verdad si fue difícil, por la poca experiencia que tenia trabajando con java script.

Les dejo un vídeo del funcionamiento del ejercicio.

La tarea trataba sobre SELECT dinámicos, por medio de java script, al inicio pensé que no era algo tan difícil pues solo son select.

Peeero.!! 😁 Cuando no se tiene mucha experiencia o se a dejado de practicar pues si que te pierdes un poco.

LA TAREA DECÍA ALGO ASÍ:

Crear un un formulario que solicite, información sobre los países centroamericanos.

📌nombre de País

📌Capital

📌Moneda

📌Extensión

📌Población.

Los primeros tres campos deben estar en un campo de tipo select, cuanto se elija el nombre del pais, que AUTOMÁTICAMENTE o por arte de magia 😎 se auto rellene los campos de capital y moneda.😕😌

Bueno la cosa se puede complicar un poco mas de lo que se piensa.

Vale aclarar que las campos de extensión y población están vacíos para que el usuario los rellene, sinceramente no se por que, pues se pueden auto rellenar ya que estamos en este tema. Pero la tarea así lo establecía.

Luego tenemos un botón que seria para guardar los datos en una base de datos.

Aclaro, es solo de ejemplo el objetivo se centra en los select.

DESCRIPCIÓN DEL DESARROLLO DEL EJERCICIO

LES MUESTRO EL INDEX EN HTML COMO QUEDARÍA

index parte 1

index parte 2

En el index lo que hice, para las fonts las enlace de manera externa desde google fonts, y el encabezado general de html, luego cree un header el cual es el encabezado de la plantilla.

Luego cree un div que es el container, donde almacenare el formulario. En dicho formulario los campos label y input están dentro de un div de manera individual esto es para acomodarlos de mejor manera.

Dentro del formulario esta el campo select con todos los option, se debe prestar atension pues en este campo es donde se invoca la funcion "Cambiar_pais".

Muy importante a cada input asignarle un id que es con lo que java script trabaja los campos html.

En la parte inferior pongo la importe los archivos de java script necesarios para que nuestro formulario funcione.

Y ACÁ LES MUESTRO COMO DESARROLLE EL CÓDIGO JAVA SCRIPT

Codigo java script parte1

Codigo java script parte2

Para el codigo de js, creamos una funcion llamada "cambiar_pais" y les pasamos tres parametros s1, s2, s3.

Creamos estas tres variables y...

Acá es donde esta lo cuestionable de este ejercicio... pues a mi propio criterio mal utilice el if repitiendo código, pero de verdad no supe como hacer un array y que con un solo if y un elseif luego un ciclo for recorriera todos los datos del array, y eligiera dependiendo de lo que aya elegido en el primer select según yo eso seria lo mas ordenado desde un punto de vista de programación.
De alguna manera me las arrelge.

lo que hice fue lo siguiente.

Cree un if e iguale el valor de la variable s1.value el value es para que tome el valor ejelijo en el select 1.

Y si el valor coincide al asignado en el javascript le asigne el valor del primer pais de centro america, para este caso Belice, luego en el mismo if cree unas variables con un array con los datos de la capital y la moneda.

Si el valor elegido en el primer select es Belice, pues elije los valores asignados en el array.

Luego para seguir condicionando lo hice con un else if a los cuales se reinicia la variable s1 para el valor del segundo país de centro américa en este caso Guatemala, y se crea unas variables almacenando un array con los datos de la capital y la moneda de ese país, y así para los demas países de centro américa.

En la parte inferior para recorrer el valor de los array echos en cada else if, cree dos ciclo for, que recorra los datos almacenados uno para capital y otro para moneda y si coincide pues que los asigne a las variables s2 y s3 que creamos al inicio de el archivo y que representan los input de capital y moneda respectivamente.

Y básicamente ese es el funcionamiento del ejercicio.

😎...

Lo dicho antes gente, abra una y mil formas de hacer lo mismo y de mejor forma. Pero en se momento fue lo que puede hacer y lo mas importante lo que salvo mi nota.

Muchas veces como estudiante nos vemos obligados a pensar con rapidez por el tiempo es muy corto, o la tarea es compleja, por lo que sea, si logras desarrollar la tarea y no quedas convencido al 100... luego podrás retomar el reto y hacerlo mucho mejor.

Espero que a mas de uno les sirva para salvar su nota también.

Gracias por su tiempo gente.!!!

hasta pronto.

LINK DE DESCARGA

Pass: madesweb

Si este articulo te a sido de utilidad recuerda compartir en redes sociales, y dar like a nuestra pagina de facebook.

COMO REALIZAR UN INDEX GLOBAL CON PHP, UTILIZANDO "INCLUDE" O "REQUIRED_ONCE"

noreply@blogger.com (Las tic) — Wed, 15 Nov 2017 19:22:00 +0000

@madesweb

Les a pasado que tienen un error en un código de php, html o css y por lo general tienen que cambiar cada archivo que contiene ese codigo.?

pues en este articulo les traigo la solución perfecta se trata de un index global en donde se dividen las partes de nuestro blog, y luego se juntan en un index.

Para poder realizar esta tarea lo haremos utilizando el required_once de php, ya algunos sabrán como funciona, pero básicamente nos incluye un archivo .php en el archivo que lo invoques, ahora si como naruto(por invocar a Gamakichi.... ok no! soy un friki -_-).

Bueno, con que finalidad se desarrollan de esta manera los sitio web?

pues la de brindarnos un orden global en nuestro sitio de esa manera manipularemos mejor nuestros archivos.

Y Básicamente cuando tengamos que hacer una modificación a nuestro código pues iremos directo al archivo .php y lo abremos echo en todo nuestra plantilla.

Veamos unas imágenes de lo que tenemos en este ejercicio.

Como se puede apreciar en la siguiente imagen, aparecen todos los archivos necesarios para crear un index global.

Árbol de archivos

La idea principal es que cada archivo representa una sección de nuestra plantilla, como por ejemplo header, footer, estos archivos contienen la información requerida por esa sección.

Y lo que hacemos es crearnos un index.php que es el archivo en donde incluiremos todos los archivos que "necesitemos", osea que no es regla que debemos mostrar todos los archivos en el index, pero si que ponemos los links que nos lleven a esa sección como se mostrara en la siguiente imagen:

Index global

como se puede apreciar a simple vista, la reducción de código es considerable, el index no tiene mas cosa que un texto de bienvenida o introduccon a tu sitio.

En la parte superior podemos ver el codigo :

include de php

este lo que hace, es que trae el archivo header.php y agrega las características que hemos especificado en ese archivo.

en la parte inferior tenemos los siguientes códigos:

include la barra lateral

include el footer

Que incluyen la barra lateral y el footer de nuestra plantilla.

como se puede apreciar, los include al ir llamando archivos externos no tienen un orden especifico, pero si que cada cosa debe ir en su lugar, no alteraría nada poner todos los include en la parte superior del index, pero para un mejor entendimiento de que es lo que hace cada código pues se sitúan en su respectivo espacio.

Otra cosa a mencionar es que por lo mismo de no llevar un orden correlativo y invocar estos archivos en diferente sitio del index, cada archivo que invoquemos deberá ir en las etiquetas de apertura y de cierre de php. Ejemplo: <?php include ('footer.php'); ?>

veamos una imagen de e resultado en nuestro explorador.

PLANTILLA INDEX GLOBAL

Si se familiarizan con la plantilla es la creada con el modelo de caja tradicional que estudiamos en artículos pasados, en la categoría de HTML.

El proposito, es mostrar como funciona un index global, implementado de una forma sencilla, y ordenado.

DIFERIENCIA ENTRE INCLUDE Y REQUIRE

require() establece que el código del archivo invocado es requerido, es decir, obligatorio para el funcionamiento del programa. Por ello, si el archivo especificado en la función require() no se encuentra saltará un error “PHP Fatal error” y el programa PHP se detendrá.

include(), por el contrario, si no se encuentra dicho código, saltará un error tipo “Warning” y el programa seguirá ejecutándose (aunque como consecuencia de no incluirse el código puede que no funcione correctamente, o sí, depende de la situación).

DESCRIPCIÓN DE LA PLANTILLA

La plantilla de muestra tienen el menú de navegación, el cual nos permite desplazarnos a todos los lugares de nuestra plantilla.

Luego la barra lateral, solo nos sirve de muestra en ella irían link para las secciones que ahí se describen, pero para el caso solo es de muestra. En unas secciones como acerca de, esta barra no se incluye, y luego tenemos el footer que básicamente tiene que estar en toda nuestra plantilla.

Recuerden compartir el articulo en tus redes sociales, y no olvides pasar por nuestra pagina de facebook.

Como siempre les dejo el link de descarga de la carpeta con todos los archivos del ejercicio.

@madesweb

Pass: madesweb

FORMULARIOS CON HTML5 NUEVOS ELEMENTOS!!!!

noreply@blogger.com (Las tic) — Sat, 11 Nov 2017 22:37:00 +0000

@madesweb

La Web 2.0 está completamente enfocada en el usuario. Y cuando el usuario es el centro de atención, todo está relacionado con interfaces, en cómo hacerlas más intuitivas, más naturales, más prácticas, y por supuesto más atractivas.

Los formularios web son la interface más importante de todas, permiten a los usuarios insertar datos, tomar decisiones, comunicar información y cambiar el comportamiento de una aplicación.

Durante los últimos años, códigos personalizados y librerías fueron creados para procesar formularios en el ordenador del usuario. HTML5 vuelve a estas funciones estándar agregando nuevos atributos, elementos y una API completa. Ahora la capacidad de procesamiento de información insertada en formularios en tiempo real ha sido incorporada en los navegadores y completamente estandarizada.

EL ELEMENTO FORM

Los formularios en HTML no han cambiado mucho. La estructura sigue siendo la misma, pero HTML5 ha agregado nuevos elementos, tipos de campo y atributos para expandirlos tanto como sea necesario y proveer así las funciones actualmente implementadas en aplicaciones web.

@madesweb

En la imagen anterior creamos una plantilla básica para formularios.

Como puede ver, la estructura del formulario y sus atributos siguen siendo igual que en especificaciones previas. Sin embargo, existen nuevos atributos para el elemento

form: autocomplete Este es un viejo atributo que se ha vuelto estándar en esta especificación. Puede tomar dos valores: on y off.

El valor por defecto es on. Cuando es configurado como off los elementos input pertenecientes a ese formulario tendrán la función de autocompletar desactivada, sin mostrar entradas previas como posibles valores.

Puede ser implementado en el elemento form o en cualquier elemento input independientemente.

Novalidate: Una de las características de formularios en HTML5 es la capacidad propia de validación. Los formularios son automáticamente validados.

Para evitar este comportamiento, podemos usar el atributo novalidate Para lograr lo mismo para elementos input específicos, existe otro atributo llamado formnovalidate.

Ambos atributos son booleanos, ningún valor tiene que ser especificado (su presencia es suficiente para activar su función).

A continuación definiremos cada tipo de dato que existe, para poder incorporarlos en un formularios según nos convenga.

EL ELEMENTO INPUT

El elemento más importante en un formulario es input. Este elemento puede cambiar sus características gracias al atributo type (tipo).

Este atributo determina qué clase de entrada es esperada desde el usuario. Los tipos disponibles hasta el momento eran el multipropósitos text (para textos en general) y solo unos pocos más específicos como password o submit.

HTML5 ha expandido las opciones incrementando de este modo las posibilidades para este elemento.

El navegador procesará los datos ingresados de acuerdo al valor del atributo type y validará la entrada o no.

El atributo type trabaja junto con otros atributos adicionales para ayudar al navegador a limitar y controlar en tiempo real lo ingresado por el usuario.

TIPO EMAIL

Casi todo formulario en la web ofrece un campo para ingresar una dirección de email, pero hasta ahora el único tipo de campo disponible para esta clase de datos era text.

El tipo text representa un texto general, no un dato específico, por lo que teníamos que controlar la entrada con código Javascript para estar seguros de que el texto ingresado correspondía a un email válido. Ahora el navegador se hace cargo de esto con el nuevo tipo email:

Tipo de dato: Email

TIPO SEARCH

El tipo search (búsqueda) no controla la entrada, es solo una indicación para los navegadores. Al detectar este tipo de campo algunos navegadores cambiarán el diseño del elemento para ofrecer al usuario un indicio de su propósito.

Tipo de dato : Search

TIPO URL

Este tipo de campo trabaja exactamente igual que el tipo email pero es específico para direcciones web. Está destinado a recibir solo URLs absolutas y retornará un error si el valor es inválido.

Tipo de dato: url

TIPO TEL

Este tipo de campo es para números telefónicos. A diferencia de los tipos email y url, el tipo tel no requiere ninguna sintaxis en particular. Es solo una indicación para el navegador en caso de que necesite hacer ajustes de acuerdo al dispositivo en el que la aplicación es ejecutada.

Tipo de dato: tel

TIPO NUMBER

Como su nombre lo indica, el tipo number es sólo válido cuando recibe una entrada numérica. Existen algunos atributosnuevos que pueden ser útiles para este campo: min El valor de este atributo determina el mínimo valor aceptado para el campo.

max El valor de este atributo determina el máximo valor aceptado para el campo. step El valor de este atributo determina el tamaño en el que el valor será incrementado o disminuido en cada paso. Por ejemplo, si declara un valor de 5 para step en un campo que tiene un valor mínimo de 0 y máximo de 10, el navegador no le permitirá especificar valores entre 0 y 5 o entre 5 y 10.

Tipo de dato: number

TIPO DATE

Este es otro tipo de campo que genera una nueva clase de control. En este caso fue incluido para ofrecer una mejor forma de ingresar una fecha. Algunos navegadores muestran en pantalla un calendario que aparece cada vez que el usuario hace clic sobre el campo.

El calendario le permite al usuario seleccionar un día que será ingresado en el campo junto con el resto de la fecha. Un ejemplo de uso es cuando necesitamos proporcionar un método para seleccionar una fecha para un vuelo o la entrada a un espectáculo. Gracias al tipo date ahora es el navegador el que se encarga de construir un almanaque o las herramientas necesarias para facilitar el ingreso de este tipo de datos.

Tipo de dato: date

TIPO WEEK

Este tipo de campo ofrece una interface similar a date, pero solo para seleccionar una semana completa. Normalmente el valor esperado tiene la sintaxis 2011-W50 donde 2011 es al año y 50 es el número de la semana.

Tipo de dato: week

TIPO MONTH

Similar al tipo de campo previo, éste es específico para seleccionar meses. Normalmente el valor esperado tiene la sintaxis año-mes.

Tipo de data: month

TIPO TIME

El tipo de campo time es similar a date, pero solo para la hora. Toma el formato de horas y minutos, pero su comportamiento depende de cada navegador en este momento. Normalmente el valor esperado tiene la sintaxis hora:minutos:segundos, pero también puede ser solo hora:minutos.

Tipo de dato: time

TIPO DATETIME-LOCAL

El tipo de campo datetime-local es como el tipo datetime sin la zona horaria.

tipo de dato: datetime-local

TIPO COLOR

Además de los tipos de campo para fecha y hora existe otro tipo que provee una interface predefinida similar para seleccionar colores. Normalmente el valor esperado para este campo es un número hexadecimal, como #00FF00.

Tipo de dato: color

TIPO FILE

El tipo de campo file es para para poder cargar diferentes tipos de archivos.

Tipo de dato: file

Nuevos atributos

ATRIBUTO PLACEHOLDER

Especialmente en tipos de campo search, pero también en entradas de texto normales, el atributo placeholder representa una sugerencia corta, una palabra o frase provista para ayudar al usuario a ingresar la información correcta. El valor de este atributo es presentado en pantalla por los navegadores dentro del campo, como una marca de agua que desaparece cuando el elemento es enfocado.

Atributo : placeholder

ATRIBUTO REQUIRED

Este atributo booleano no dejará que el formulario sea enviado si el campo se encuentra vacío. Por ejemplo, cuando usamos el tipo email para recibir una dirección de email, el navegador comprueba si la entrada es un email válido o no, pero validará la entrada si el campo está vacío. Cuando el atributo required es incluido, la entrada será válida sólo si se cumplen las dos condiciones: que el campo no esté vacío y que el valor ingresado esté de acuerdo con los requisitos del tipo de campo.

Atributo: required

ATRIBUTO MULTIPLE

El atributo multiple es otro atributo booleano que puede ser usado en algunos tipos de campo (por ejemplo, email o file) para permitir el ingreso de entradas múltiples en el mismo campo. Los valores insertados deben estar separados por coma para ser válidos.

Atributo: multiple

ATRIBUTO AUTOFOCUS

Esta es una función que muchos desarrolladores aplicaban anteriormente utilizando el método focus() de Javascript. Este método era efectivo pero forzaba el foco sobre el elemento seleccionado, incluso cuando el usuario ya se encontraba posicionado en otro diferente. Este comportamiento era irritante pero difícil de evitar hasta ahora. El atributo autofocus enfocará la página web sobre el elemento seleccionado pero considerando la situación actual. No moverá el foco cuando ya haya sido establecido por el usuario sobre otro elemento.

Atributo: autofocus

ATRIBUTO PATTERN

El atributo pattern es para propósitos de validación. Usa expresiones regulares para personalizar reglas de validación. Algunos de los tipos de campo ya estudiados validan cadenas de texto específicas, pero no permiten hacer validaciones personalizadas, como por ejemplo un código postal que consiste en 5 números. No existe ningún tipo de campo predeterminado para esta clase de entrada.

El atributo pattern nos permite crear nuestro propio tipo de campo para controlar esta clase de valores no ordinarios. Puede incluso incluir un atributo title para personalizar mensajes de error.

Atributo: patterm

ATRIBUTO FORM

El atributo form es una adición útil que nos permite declarar elementos para un formulario fuera del ámbito de las etiquetas<form>. Hasta ahora, para construir un formulario teníamos que escribir las etiquetas <form> de apertura y cierre y luego declarar cada elemento del formulario entre ellas. En HTML5 podemos insertar los elementos en cualquier parte del código y luego hacer referencia al formulario que pertenecen usando su nombre y el atributo form:

Atributo: form

De esta manera completamos cada uno de los tipos de datos y atributos con que podermos desarrollar nuestros formularios html5, recordarles que en este articulo no se a tocado tema de css, para dar estilo a nuestros formulario, que por ser muy extenso el tema pues sera en otra oportunidad.

les presento una imgen con todos los campos y atributos que se pueden utilizar en un formulario.

Recuerden probar sus codigos en diferentes navegadores para obterner distintos resultados, y optimizar sus codigos.

Descarga el archivo con los códigos.!!!!

USO DEL MÉTODO POST EN PHP

noreply@blogger.com (Anonymous) — Sat, 11 Nov 2017 03:38:00 +0000

En este articulo hablaremos sobre formularios en PHP.

Método POST

Los formularios: En PHP y en todo el desarrollo web, son de suma importancia al momento de manipular informacion y almacenarla en la base de datos o imprimirla en pantalla.

Es una forma muy segura de manipular informacion muy valiosa y sensible a la vez, es por eso que los formulario en PHP representan uno de los apartados mas importantes a la hora de aprender este lenguaje.

La manipulación de datos o informacion en php, se realiza por medio de métodos.

Tienes dos opciones el momento de elegir el método: GET y POST.

Con respecto a los métodos, la diferencia entre usar GET y POST se encuentra directamente en la forma en que se pasa la información del formulario al codigo de procesamiento.

El método GET envía toda la información recopilada durante mucho tiempo como parte de la URL.

El método POST transmite la información de manera invisible al usuario.

En este articulo veremos un ejemplo utilizando el método POST.

Enunciado: Desarrollar un programa que capture en un formulario el: nombre, correo electrónico, una calificación por parte del usuario y ademas un comentario.

El codigo HTML5 quedaría de la siguiente manera:

MÉTODO POST EN PHP

Si siguen nuestros artículos sobre HTML5 entenderán la estructura básica que se utiliza y como se incluyen los archivos necesarios para el funcionamiento, en este caso solo llamaremos el archivo .css.

Así que me detendré a explicar los elementos del formulario que es donde aplicamos el método elegido.

Primero crearemos un div al cual le colocaremos un id="formulario" este contendrá el espacio para el fieldset.

Luego crearemos un fieldset con su respectiva leyenda, y dentro del este crearemos nuestro formulario.

Iniciamos nuestro formulario con la siguiente linea de codigo:

<form action="handle_form.php" method="POST">

Es en esta linea que definiremos dos cosas importantes para el manejo de datos en formularios en PHP.

El action: Este atributo representa el archivo .php que recibirá la informacion que capturamos en el formulario.

Method: Acá definiremos el método por medio de el cual enviaremos la informacion, para nuestro caso usaremos POST.

Ok... Aca es donde se viene lo interesante..

Para poder capturar los datos, cada campo de nuestro formulario debe tener un name: por medio del cual lo llamaremos en el codigo de recepción de informacion.

Para los campos de nuestro formulario iniciaremos con a etiqueta <p> y colocaremos la palabra nombre: esto es para que funcione como una etiqueta label, en este caso me estoy refiriendo a la persona por medio de el acrónimo de Señor, Señora y Señorita.

Por lo que debemos hacer un select con todas estas opciones, a este select le pondremos un name="titulo".

Así para todos los campos de nuestro formulario con sus respectivos atributos.

Hacer hincapié en el name: que se le asigna a cada campo, ya que por medio de este atributo lo llamaremos en nuestro codigo de procesamiento.

Hacer un breve paréntesis en el campo de los radio buttton, se puede notar que el name: es el mismo para las tres opciones, pero deben fijarse en el value: de cada uno de ellos es diferente, por lo tanto, cuando enviamos ese campo lo hacemos por el name Pero!!! Se recive su value, así se registra la opción que aya marcado.

Luego tenemos un textarea con sus rows y cols para definir su tamaño.

Por ultimo tenemos un input de tipo submit con el cual enviaremos los datos capturados!

Si aun no identificas cada tipo de elementos de un formulario te dejo mi articulo que trata acerca de los tipos de elementos que se pueden utilizar y sus atributos.

El resultado de este codigo seria el siguiente.

Formulario de captura de datos

El CÓDIGO DE RECEPCIÓN DE LOS DATOS

Código receptor de datos.

Para este codigo recuerden, que iniciamos la estructura básica de html5, y por debajo de la etiqueta body colocarnos una etiqueta header para poder poner un titulo de la pagina.

Seguidamente usamos una etiqueta fieldset para almacenar los datos recibidos y ordenarlos de una mejor manera.

Iniciamos nuestro codigo PHP con la etiqueta <?php y lo primero por hacer es crear nuestras variables, con los datos capturados en el formulario.

para crear las variables anteponemos el sigo de $ a la palabra que vallamos a utilizar, en este caso todos los nombres de los dato que capturamos.

El siguiente codigo muestra la forma de declarar una variable y llamar el valor que corresponde en el formulario.

$titulo = $_POST['titulo'];

'titulo' es el name que nosotros usamos para el dato del acronimo que con que llamamos a las personas que se registran.

Y así sucesivamente para cada dato capturado declararemos una variable.

Para imprimir en pantalla, usamos la palabra reservada echo, y empezamos a concatenar con ayuda de un (.) todas las variables que declaramos en la parte superior.

echo "<p>Gracias, <span>$titulo</span> <span>$name</span>, Por sus comentarios.</p>";

Después de la etiqueta echo abrimos comillas y colocaremos la etiqueta <p> para poder colocar texto, luego la etiqueta <span> es para resaltar el texto que se encuentre entre ellas, en nuestro caso serán nuestras variables.

Si no sabes como se concatenan variables en PHP te invito a leer mi articulo, que te sera de mucha ayuda.

Les muestro el funcionamiento de este ejercicio.

Si este articulo te a sido de utilidad no olvides darle me 👍 y 📣compartirlo📣 en tus redes sociales.

Link para descargar los archivos en nuestra pagina de facebook.

@madesweb

MANEJADORES DE EVENTOS

noreply@blogger.com (Las tic) — Thu, 09 Nov 2017 03:50:00 +0000

@madesweb

Como comentamos anteriormente, el código Javascript es normalmente ejecutado luego de que el usuario realiza alguna acción.

Estas acciones y otros eventos son procesados por manejadores de eventos y funciones Javascript asociadas con ellos.

Existen tres diferentes formas de registrar un evento para un elemento HTML: podemos agregar un nuevo atributo al elemento, registrar un manejador de evento como una propiedad del elemento o usar el nuevo método estándar addEventListener().

📌Conceptos básicos: En JavaScript las acciones de los usuarios son llamadas eventos. Cuando el usuario realiza una acción, como un clic del ratón o la presión de una tecla, un evento específico para cada acción y cada elemento es disparado.

Además de los eventos producidos por los usuarios existen también otros eventos disparados por el sistema (por ejemplo, el evento load que se dispara cuando el documento es completamente cargado).

Estos eventos son manejados por códigos o funciones. El código que responde al evento es llamado manejador. Cuando registramos un manejador lo que hacemos es definir cómo nuestra aplicación responderá a un evento en particular. Luego de la estandarización del método addEventListener(), este procedimiento es usualmente llamado “escuchar al evento”, y lo que hacemos para preparar el código que responderá a ese evento es “agregar una escucha” a un elemento en particular.

📓MANEJADORES DE EVENTOS EN LINEA

Ya hemos utilizado esta técnica en el articulo de INTRODUCION A JAVASCRIPT, incluyendo el atributo onclick en el elemento <p> puedes revisar el articulo para poder estudiar este evento.

Se trata simplemente de utilizar los atributos provistos por HTML para registrar eventos para un elemento en particular. Esta es una técnica en desuso pero aun extremadamente útil y práctica en algunas circunstancias, especialmente cuando necesitamos hacer modificaciones rápidas para testeo.

📓MANEJADORES DE EVENTOS COMO PROPIEDADES

Para evitar las complicaciones de la técnica en línea (inline), debemos registrar los eventos desde el código Javascript.

Usando selectores Javascript podemos referenciar el elemento HTML y asignarle el manejador de eventos que queremos como si fuese una propiedad.

El manejador de eventos onload fue registrado para la ventana usando la construcción window.onload, y el manejador de eventos onclick fue registrado para el primer elemento <p> encontrado en el documento con la línea de código document.getElementsByTagName('p')[0].onclick

De igual manera en el artículo de introducción a JavaScript encontraran el código de ejemplo.

📓El método addEventListener()

El método addEventListener() es la técnica ideal y la que es considerada como estándar por la especificación de HTML5. Este método tiene tres argumentos: el nombre del evento, la función a ser ejecutada y un valor booleano (falso o verdadero) que indica cómo un evento será disparado en elementos superpuestos.

@madesweb

La parte del código (‘p’) [0] se refiere a que cuando se haga clic cobre el elemento “p”, pero no cualquier elemento, sino al “primer elemento p” se encuentre en el código, y eso se expresa de esta manera[0].

Como se puede observar en la imagen del código hay 2 elementos p, por lo que se tiene que indicar en que elemento se generara la acción para que cuente el clic.

📓APIs.

Javascript es tan poderoso como cualquier otro lenguaje de desarrollo en este momento.

Y por la misma razón que lenguajes de programación profesionales poseen librerías para crear elementos gráficos, motores 3D para video juegos o interfaces para acceder a bases de datos, Javascript cuenta con APIs para ayudar a los programadores a lidiar con actividades complejas.

HTML5 introduce varias APIs (interfaces de programación de aplicaciones) para proveer acceso a poderosas librerías desde simple código Javascript. El potencial de estas incorporaciones es tan importante que pronto se convertirán en nuestro objeto de estudio.

Veamos rápidamente sus características para obtener una perspectiva de lo que nos encontraremos en el resto del libro. La siguiente es solo una introducción, más adelante estudiaremos cada una de estas tecnologías con mayor profundidad.

Canvas

Canvas es una API gráfica que provee una básica pero poderosa superficie de dibujo. Esta es la más maravillosa y prometedora API de todas. La posibilidad de generar e imprimir gráficos en pantalla, crear animaciones o manipular imágenes y videos (combinado con la funcionalidad restante de HTML5) abre las puertas para lo que nos podamos imaginar.

Canvas genera una imagen con pixeles que son creados y manipulados por funciones y métodos provistos específicamente para este propósito.

Drag and Drop

Drag and Drop incorpora la posibilidad de arrastrar y soltar elementos en la pantalla como lo haríamos comúnmente en aplicaciones de escritorio. Ahora, con unas pocas líneas de código, podemos hacer que un elemento esté disponible para ser arrastrado y soltado dentro de otro elemento en la pantalla. Estos elementos pueden incluir no solo gráficos sino además textos, enlaces, archivos o datos en general.

Geolocation

Geolocation es utilizada para establecer la ubicación física del dispositivo usado para acceder a la aplicación. Existen varios métodos para acceder a esta información, desde señales de red hasta el Sistema de Posicionamiento Global (GPS). Los valores retornados incluyen latitud y longitud, posibilitando la integración de esta API con otras como Google Maps, por ejemplo, o acceder a información de localización específica para la construcción de aplicaciones prácticas que trabajen en tiempo real.

Storage

Dos APIs fueron creadas con propósitos de almacenamiento de datos: Web Storage e Indexed Database.

Básicamente, estas APIs transfieren la responsabilidad por el almacenamiento de datos del servidor al ordenador del usuario, pero en el caso de Web Storage y su atributo sessionStorage, esta incorporación también incrementa el nivel de control y la eficiencia de las aplicaciones web.

Web Storage contiene dos importantes atributos que son a veces considerados APIs por sí mismos: sessionStorage y localStorage. El atributo sessionStorage es responsable por mantener consistencia sobre la duración de la sesión de una página web y preservar información temporal como el contenido de un carro de compras, asegurando los datos en caso de accidente o mal uso (cuando la aplicación es abierta en una segunda ventana, por ejemplo).

Por el otro lado, el atributo localStorage nos permite grabar contenidos extensos de información en el ordenador del usuario.

La información almacenada es persistente y no expira, excepto por razones de seguridad. Ambos atributos, sessionStorage y localStorage reemplazan la anterior función del sistema de cookies y fueron creados para superar sus limitaciones.

La segunda API, agrupada dentro de las APIs de almacenamiento pero independiente del resto, es Indexed Database.

La función elemental de un sistema de base de datos es la de almacenar información indexada. Web Storage API trabaja sobre el almacenamiento de grandes o pequeñas cantidades de información, datos temporales o permanentes, pero no datos estructurados. Esta es una posibilidad solo disponible para sistemas de base de datos y la razón de la existencia de esta API.

File

Bajo el título de File, HTML5 ofrece varias APIs destinadas a operar con archivos.

En este momento existen tres disponibles: File, File: Directories & System, y File: Criterio. Gracias a este grupo de APIs, ahora podemos crear y procesar archivos en el ordenador del usuario.

Con estos conceptos de API`s de java script finalizamos este articulo, en el siguiente veremos las librerías externas con que cuenta este lenguaje de programación.

Recuerda compartir si te a gustado el contenido.

Hasta luego gente.!!!!

LENGUAJE SQL : COMO CREAR UNA BASE DE DATOS Y SUS TABLAS

noreply@blogger.com (Anonymous) — Tue, 07 Nov 2017 03:34:00 +0000

MADES-WEB

En este articulo veremos el Lenguaje Estructurado de Consulta, que usa en las base de datos.

Este es utilizado para definir, controlar y acceder a los datos almacenados en una base de datos relacional.

Como ejemplos de sistemas gestores de bases de datos que utilizan SQL podemos citar DB2, SQL Server, Oracle, MySql, PostgreSQL o Access.

Tiene un estándar definido, a partir del cual cada sistema gestor ha desarrollado su versión propia.

En SQL Server la versión de SQL que se utiliza se llama TRANSACT-SQL.

Se puede ejecutar directamente en modo interactivo, pero también se suele emplear embebido en programas escritos en lenguajes de programación convencionales.

En estos programas se mezclan las instrucciones del propio lenguaje (denominado anfitrión) con llamadas a procedimientos de acceso a la base de datos que utilizan el SQL como lenguaje de acceso. Como por ejemplo en Visual Basic, Java, C#, PHP .NET, etc.

Las instrucciones SQL se clasifican según su propósito en tres grupos:

📌 El DDL (Data Description Language) Lenguaje de Descripción de Datos.

📌 El DCL (Data Control Language) Lenguaje de Control de Datos.

📌 El DML (Data Manipulation Language) Lenguaje de Manipulación de Datos.

📌 El DDL, es la parte del SQL dedicada a la definición de la base de datos, consta de sentencias para definir la estructura de la base de datos, permiten crear la base de datos, crear, modificar o eliminar la estructura de las tablas, crear índices, definir reglas de validación de datos, relaciones entre las tablas, etc.

Permite definir gran parte del nivel interno de la base de datos.

📌El DCL (Data Control Language) se compone de instrucciones que permiten:

➢ Ejercer un control sobre los datos

➢ Asignación de privilegios de acceso a los datos (GRANT/REVOKE).

Detallaremos cada una de las instrucciones que se usan con regularidad en la creación y manipulación de bases de datos.

Vamos a examinar la estructura completa de la sentencia CREATE iniciando con la más general.

Veremos que las instrucciones CREATE empiezan de la misma forma y después dan paso a sus especificaciones. La primera parte de CREATE será siempre igual.

Instrucción CREATE

CREATE <tipo de objeto> <nombre del objeto>

De esta forma declararíamos la instrucción CREATE para crear una base de datos nueva.

Sentencia CREATE

La instrucción para crear una tabla seria la siguiente:

CREATE TABLE

Como lo podrán notar después de definir el objeto y su nombre abrimos paréntesis, y iniciamos con definiendo los campos que contendrá nuestra tabla, y el tipo de dato que este aceptara, luego separamos cada dato con una coma, al ultimo campo que definimos no es necesario colocarla la coma.

RESTRICCIONES EN UNA TABLA

El objetivo de esta caracteristica es limitar el tipo de dato que puede ingresarse en una tabla.

Dichas restricciones se pueden especificar cuando se crea la tabla por primera vez, o luego utilizando la instrucción ALTER TABLE.

LOS TIPOS MAS COMUNES DE RESTRICCIONES SON:

📌NOT NULL: No acepta nulos

📌CHECK: Aparece seleccionado por defecto.

📌DEFAULT: Aparece el valor por defecto.

📌PRIMARY KEY: Llave primaria para el dato con que se identificara la tabla.

📌FOREIGN KEY: Llave foránea para poder establecer una relación con otra tabla.

📌UNIQUE: Su valor es único, no se puede repetir.

La instrucción para agregar restricciones es: ALTER TABLE.

Con esta instrucción podemos agregar todas las restricciones que detallamos antes.

Por ejemplo: Agregando la restricción CHECK

ALTER TABLE

Agregando la restricción DEFAULT

RESTRICCIÓN: DEFAULT

Agregando la restricción de Llave foránea:

RESTRICCIÓN: FOREIGN KEY

Las demás restricción siempre se agregan cuando creamos las tablas.

PRINCIPALES RESTRICCIONES

Con el NOT NULL, le decimos que no puede quedar vació ningún dato, y el UNIQUE que no pueden haber ID repetidos, y por ultimo que nuestro ID sera nuestra llave primaria.

El UNIQUE: NO sustituye nuestra PRIMARY KEY, por lo cual se utilizan tal cual esta en el codigo anterior.

Estas restricciones siempre serán las iniciales.

De esta forma terminamos el articulo, espero que les sea de mucha utilidad y que los compartan en sus redes sociales y me ayuden con un like.

PRIMEROS PROGRAMAS EN PHP: COMO CONCATENAR EN PHP

noreply@blogger.com (Anonymous) — Mon, 06 Nov 2017 04:12:00 +0000

@MADESWEB

El objetivo de este articulo es enseñas PHP a través de ejemplos.

Pues lo que se pretende es captar el concepto de forma sencilla y observar el formato de programación de PHP en su expresión mas simple.

VARIABLES

Los nombre de una variable en PHP empiezan con un carácter y van seguidos de números caracteres sin espacios. Para hacer referencia estas variables debemos anteponer a su nombre el símbolo del dolar ($).

Hay tres tipos de variables:

📖Entero: numero entero con signo

📖Flotante: numero decimal con signo

📖Booleano: valores de true o false

📖Cadena de caracteres: Cadena de caracteres delimita por comillas, las comillas simples interpretan el texto literalmente, mientras que las dobles sustituyen las variables.

Como sabrán no hace falta declarar las variables, ya que el interprete averigua el tipo de dato que almacenara y se declarara automáticamente.

Si es necesaria una conversión de tipos, al igual que en C, se puede anteponer el tipo al que se desea promocionar entre paréntesis.

COMENTARIOS

Para comentar una sola linea se utiliza: // o #, que comentan todo lo que se encuentre a continuación de ellos hasta el fin de la linea.

Si se desean comentarios de varias lineas se abren con /* y se cierran con */.

Para imprimir en pantalla se puede usar la palabra reservada ECHO o PRINT.

ECHO: Recibe como primer y único parámetro una cadena. Esa cadena, si esta entre comillas simples se imprimirá literalmente.
Si por el contrario deseamos que se sustituyan las variables que contenga por sus valores hay que usar comillas dobles.

PRINT: Recibe sus parámetros entre paréntesis. Es una instrucción que admite muchos mas parámetros y opciones. Una de sus principales diferencias es que evalúan su parámetro y después lo imprime.

Ej: echo 'doble(8)' es igual a: doble(8)

mientras que print (doble(8)) da 16.

Por lo pronto considero que es suficiente informacion para desarrollar algunos ejemplos con estas bases, para acostumbrarnos a estas básicas reglas de programación en PHP.

📋Ejercicio 1: Concatenemos dos cadenas con el operador punto(.), y luego imprimir su resultado.

Concatenando en PHP

La estructura básica de HTML5, y luego para iniciar el codigo en PHP iniciamos con la instrucción: <?php
seguidamente declararemos tres variables las cuales se inician con el signo de $ como ya hemos hablado al inicio de este articulo.

las variables son: $ini="primer cadena";
$fin="segunda cadena";
$todo=llamamos los nombres de las variables y las dividimos con el (.), colocamos el ; para terminar la instrucción.

Para finalizar utilizamos la instrucción ECHO, y llamamos la variables $todo, para poder imprimir en pantalla.
El resultado seria la unión de las dos palabras: "hola a todos".

Desarrollemos otro ejemplo, pero esta vez con números.

📋Ejercicio 2: Hacer un programa que sume dos variables que almacenan dos números distintos.

Sumando dos variables en PHP

La estructura básica de HTML5, y luego para iniciar con el codigo php, iniciamos declarando las variables, $n1, $n2 y $suma, les asignamos los valores respectivos para luego poder imprimir a pantalla.

En esta ocacion se utiliza el ECHO de dos formas diferentes, una para mostrar el resultado de la operación, y la otra para mostrar en pantalla los números que estamos sumando.

La linea: echo "suma=".$suma."<br";

La explicación seria: después de las comillas se puede escribir y utilizar cualquier herramienta en este caso pues "texto" que nos ayude a mostrar de una forma mas ordenada el resultado.

Por ejemplo se pudo haber escrito tal cual:echo"$suma".

Eso nos daría un numero 3 en nuestras pantallas, que si es el resultado pero seria muy simple y poco comprensible.

Por lo que se utiliza "suma=" y se concatena con la variable $suma, y el "<br>" es para que de un salto de linea, para que la siguiente expresión se muestre en la linea inferior.

Ademas hay que mostrar cuales son los números que estamos sumando, por lo que se usa nuevamente el echo "$n1+$n2" Ojo!!!

Acá no estamos concatenando nada tampoco se esta realizando la operación simplemente se muestran los valores que tienen almacenados las variables y se les pone el signo "+" para que se entienda que es una suma.

Espero que estos sencillos ejemplos les sirvan y puedan comprender de forma mas sencilla la teoría con respecto a la concatenación y utilización de variables.

Ya sabes que si te gusto, puedes compartir 👇👇 el articulo en tus redes sociales y regalarnos un 👍.

📢hasta la próxima.

INTRO "MADESWEB"

noreply@blogger.com (Las tic) — Mon, 06 Nov 2017 02:59:00 +0000

Recuerden pasar por mi canal, donde estaré compartiendo contenido desarrollado en el blog.

Saludos Gente!!!

QUE ES UN FRAMEWORK

noreply@blogger.com (Las tic) — Fri, 03 Nov 2017 00:28:00 +0000

En esta oportunidad compartiremos información acerca de los framework en que nos ayudan? que nos brindan? y todo lo referente a su desarrollo.

Rápidamente vienen a nuestras mentes nombres como: Bootstrap o Bulma, que son algunos de los framework del momento.

@madesweb

Mas de una vez te habrás echo la siguiente pregunta... ¿Que es un frameworck?.. Pues acá trataremos de darte una respuesta.

¿Qué es un framework Web?

El termino framework se emplea en muchos ámbitos del desarrollo de sistemas

software, no solo en el ámbito de aplicaciones Web. Podemos encontrar frameworks para el desarrollo de aplicaciones médicas, de visión por computador, para el desarrollo de juegos, y para cualquier ámbito que pueda ocurrírsenos.

En general, con el término framework, nos estamos refiriendo a una estructura software compuesta de partes personalizables e intercambiables para el desarrollo de una aplicación.

En otras palabras, un framework se puede considerar como una aplicación genérica incompleta y configurable a la que podemos añadirle las últimas piezas para construir una aplicación concreta.

Los objetivos principales que persigue un framework son:

📌Acelerar el proceso de desarrollo

📌 Reutilizar código ya existente

📌 Promover buenas prácticas de desarrollo como el uso de patrones

Un framework Web, por tanto, podemos definirlo como:

Un conjunto de componentes (por ejemplo clases en java y descriptores y archivos de configuración en XML) que componen un diseño reutilizable que facilita y agiliza el desarrollo de sistemas Web.

Tipos de framework Web.

Existen varios tipos de frameworks Web:

📌Orientados a la interfaz de usuario,como Java Server Faces,Bootstrap.

📌Orientados a aplicaciones de publicación documentos, como Coocon.

📌Orientados a la parte de control de eventos, como Struts y algunos que incluyen varios elementos como Tapestry.

La mayoría de frameworks Web se encargan de ofrecer una capa de controladores de acuerdo con el patrón Modelo Vista Controlador(MVC) o con el modelo 2 de Servlets y JSP, ofreciendo mecanismos para facilitar la integración con otras herramientas para la complementación de las capas de negocio y presentación.

Características.

A continuación enunciamos una serie de características que podemos encontrar en prácticamente todos los frameworks existentes.

📋Abstracción de URLs y sesiones: No es necesario manipular directamente las URLs ni las sesiones, el framework ya se encarga de hacerlo.

📋Acceso a datos: Incluyen las herramientas e interfaces necesarias para integrarse con herramientas de acceso a datos, en BBDD, XML, etc..

📋Controladores: La mayoría de frameworks implementa una serie de controladores para gestionar eventos, como una introducción de datos mediante un formulario o el acceso a una página. Estos controladores suelen ser fácilmente adaptables a las necesidades de un proyecto concreto.

📋Autentificación y control: Incluyen mecanismos para la identificación de usuarios

Espero que este articulo sirva para comprender mejor que es un framework y como funcionan.

Recuerda compartir con amigos.

Hasta pronto!!!

SABES QUE NECESITAS PARA EL DESAROLLO WEB!?

noreply@blogger.com (Las tic) — Wed, 01 Nov 2017 03:06:00 +0000

@madesweb

En esta oportunidad, les traigo un articulo referente a las herramientas que necesitas, para poder desarrollar ejercicios relacionados con el desarrollo web. En síntesis son pocos los requisitos para poder realizar estas tareas, en la web existen decenas de artículos relacionados a como iniciar en el desarrollo web.

En esta oportunidad te hablare de las herramientas que se utilizan en este blog para desarrollar todos los ejercicios que se presentan acá.

📝 Iniciamos con un editor de texto: En mi caso uso SUBLIME TEXT creo que es el editor por excelencia, es muy versátil, permite agregarle plugin y configurarlo según el lenguaje que estemos desarrollando.

existen otros como:

☑Notepad++

☑ Brackets

☑Atom

Por mencionar algunos, la elección se base en tu propia experiencia y en cual te encuentres mas cómodo al momento de desarrollar.

📝 Lo siguiente seria la configuración de algún servicio de APACHE, el cual nos permite probar nuestros ejercicio en el explorador simulando estar en linea, pero de forma local.

Igual es otro tema de gustos, pues hay quienes deciden bajarse APACHE y lo configuran manualmente, de echo configuran manualmente todos los servicios de APACHE, BASE DE DATOS, y todos los demas servicios.

Para nosotros como se trata de realizar practicas de manera local, instalaremos un programa que nos brinde en conjunto todas las herramientas web necesarias para probar nuestros ejercicios en el explorador.

La herramienta que utilizamos es XAMPP , el cual nos incorpora phpmyadmin para administrar fácilmente las base de datos que vallamos a necesitar la versión mas reciente de APACHE, y por supuesto PHP.

su configuración es totalmente intuitiva y muy fácil de instalar en nuestras computadoras.

Existen otras como:

☑WAMPP SERVER
☑DREAMWEAVER

Estos entornos de desarrollo web, son de los mas conocidos dependiendo de que lenguaje vallamos a desarrollar, pues así encontraremos herramientas.

📝Lo que sigue seria un explorador web, como todas ya sabrán existen muchos ya dependerá de cual dominemos mejor, cuantas herramientas conozcamos de ese explorador.

En algún otro post les mencionaba, que era buena practica probar nuestros códigos en mas de un explorador, pues cada uno tiene sus forma de interpretar el código que estemos ejecutando, siendo esto desarrollo web, seria aun mas obligatorio hacerlo pues al momento de interpretar HTML, CSS y sobre todo JAVA SCRIPT, algunos exploradores pueden variar la forma en que presentan el resultado final.

Algunos de los navegadores mas usados en estos tiempos:

☑ GOOGLE CHROME

☑ MOZILA FIREFOX

☑ OPERA

☑ SAFARI

☑ INTERNET EXPLORER 8

@madesweb

📝 Una PC, en donde poder crear un árbol de carpetas, donde podamos clasificar nuestros proyectos, y poder instalar todas las herramientas antes mencionadas.

especificaciones, serán dadas por gustos y otras ocaciones por necesidades,

lo básico seria:

☑ SO de 32 o 64 bits
☑ 4 GB de RAM
☑ 500 GB de Disco Duro
☑ Monitor de 21''

Seria bastante recomendable, en mi caso uso uno de 17'' y algunas de cosas de diseño, si que tienen su dificultad.

☑Teclado, mouse y unas bocinas para poner ambiente mientras realizamos nuestros ejercicios. 😎

Con estas especificaciones iremos sobrados, pero es mejor prepararnos para un futuro cercano que si le cogemos el gusto por el desarrollo web, luego de un tiempo nos quedaremos cortos pues necesitaremos mas capacidad para poder desarrollar nuestros ejercicios o quien quita ya trabajos mas profesionales demandaran mas recursos.

📝Y por ultimo, MUCHAS GANAS por aprender.!!!

Esta demas decir como todo relacionado con tecnología, en estos días cambian muy rápido, y constantemente están saliendo nuevas tecnologías que nos brindan nuevas herramientas o nuevas formas de trabajar, y necesitaras mucha paciencia para ir aprendiendo paso a paso cada una de estas.

Espero que este articulo les sea de utilidad...!!! 😏 hasta pronto.

INTRODUCCION A MYSQL

noreply@blogger.com (Las tic) — Sun, 29 Oct 2017 18:39:00 +0000

@madesweb

El articulo esta pensado para ser desarrollado de forma introductoria a este tema. El objetivo es aprender MySQL en forma sencilla viendo un concepto teórico, luego algunos ejercicios resueltos y por último y lo más importante efectuar una serie de ejercicios.

Al finalizar este artículo tendrás un conocimiento introductorio de MySQL que facilitará el desarrollo de páginas y ejercicios con PHP que acceden a una base de datos MySQL

Mientras que para llevar una contabilidad, una agenda de contactos, facturas, etc., almacenar datos “alfanuméricas” sirve cualquier producto del mercado, el “motor” o “gestor” de un sistema de gestión documental tiene unos requisitos más exigentes. Hace muchos años que la continúa evolución del hardware ha resuelto los problemas de capacidad y rendimiento que plantea guardar en un PC corriente un archivo con 40, 50, 300 mil o más registros.

Los datos “alfanuméricos”, nombres, apellidos, números de teléfono, cuentas contables ocupan unos cuantos bytes y, por muchos que tengamos, siempre hablamos de kilobytes. Unos pocos “Megas” a lo sumo. ¿Qué son 3 o 4 Megabytes en un PC que tiene un disco duro con 1 Terabyte.

Es un problema resuelto.

Ahora un “registro” de la base de datos, cada uno de los elementos que la componen, es un archivo. Puede ser un documento con texto (20, 30, 140Kb…), PDF (50, 100, 200Kb), hoja electrónica de cálculo (otro tanto). Puede que tenga imágenes, logotipos, fotos, documentos escaneados con una buena resolución, con lo que ya el orden de magnitud empieza a ser de Mb, más que Kb. No es difícil que un usuario incorpore 2 o 3 mil documentos al año con lo que nos empezamos a mover (en una PYME de 10 usuarios) en cifras de varios Gb anuales. Esto ya no es fácil de gestionar. Y menos sencillo es garantizar un rendimiento adecuado al introducir los nuevos documentos, y al consultar los existentes.

Ahora que ya ha decidido lo que quiere, la pregunta de siempre: ¿cuál elegir?

Porque, como pasa con todo en la sociedad actual, la oferta es enorme, variada y con frecuencia contradictoria. Unos comentarios sobre cómo y porqué elegimos

Nosotros la base de datos sobre la que “montar” nuestra aplicación. (En realidad, más correcto es decir SGBD, sistema de gestión de base de datos).

Primera decisión: software libre o propietario. ¡Ya estamos otra vez! Y es más complicado aún, porque puedes implementar un programa desarrollado con un

lenguaje “propietario” como Delphi, Visual net o Visual Basic, sobre un SGBD libre, o no, y, a su vez, sobre un servidor con Linux o Windows Server o UNIX.

Si solamente nos centramos en la base de datos (SGBD): “Libres” o gratuitas hay varias: MySQL, PostgreSQL, SQLite3, MariaDB, Firebird, las cuatro primeras son las más conocidas y, sin duda, son válidas para un proyecto, por complicado que sea. Los sistemas GNU/Linux o software libre o de código abierto ya no son una novedad más, son una realidad “Propietarias” hay más.

Dejando de lado las menos “potentes”, dBASE (un clásico, pero muy superada), FileMaker, Interbase, Access. Tenemos las dos más conocidas, Oracle y SQL Server de Microsoft, además de IBM DB2, Informix, Progress. Y un tercer grupo, las “super-propietarias”. Las creadas por empresas, normalmente pequeñas, a medida para su programa de gestión, documental o no. ¿Cual elegir? La respuesta es muy sencilla: todas sirven.

Todas. Esto ya está inventado. Cualquiera de ellas es válida, si se configura y utiliza bien. La decisión no es en función de que sirva o no para mi necesidad. Seguro que sirve. La decisión estará basada en otras características. Evitamos las “exóticas” (en PYMES, insisto, como Progress, Informix) porque es difícil conseguir ayuda técnica cuando tienes un problema. Un argumento definitivo para los programadores.

En cuanto al software libre, es casi una decisión filosófica. Es como ser usuario de Mac, o tener un iPhone. O como convencer al que tiene una Canon reflex fabulosa de que las Nikon son mejores. El software libre es una decisión válida y técnicamente irreprochable. Y lo es, igualmente, montar Oracle. Hay espacio para todos y hay aplicaciones estupendas en los dos sistemas. No van a ser mejores o peores los programas, ni los usuarios van a trabajar mejor, por el hecho de haber elegido uno u otro gestor de base de datos. La clave está en el software, en el interfaz de usuario, en la facilidad de uso, y eso es independiente de la tecnología.

Todo depende del uso que haga de MySQL y de nuestro conocimiento y experiencia sobre él.

De manera de introducción este articulo sí que esta está bien, para no cansaros haremos los ejercicios iniciales en un nuevo artículo.

Espero que les sea de utilidad.

INTRODUCCIÓN A PHP

noreply@blogger.com (Las tic) — Thu, 26 Oct 2017 17:37:00 +0000

El lenguaje PHP (cuyo nombre es acrónimo de PHP: Hipertext Preprocessor) es un lenguaje interpretado con una sintaxis similar a la de C++ o JAVA. Aunque el lenguaje se puede usar para realizar cualquier tipo de programa, es en la generación dinámica de páginas web donde ha alcanzado su máxima popularidad.

En concreto, suele incluirse incrustado en páginas HTML (o XHTML), siendo el servidor web el encargado de ejecutarlo. Algunas de las características de su enorme popularidad son:

📚Es un lenguaje libre. Puede descargarse de http://www.php.net.
📚Está disponible para muchos sistemas (GNU/Linux, Windows, UNIX,etc).
📚Tiene una extensa documentación oficial en varios idiomas.
📚Existen multitud de extensiones: para conectar con bases de datos, para manejo de sockets, para generar documentos PDF, para generar dinámicamente páginas en Flash, etc
📚Al ejecutarse en el servidor, los programas PHP lo pueden usar todo tipo de máquinas con todo tipo de sistemas operativos.
📚En caso de que un cliente falle (por error hardware, virus, etc) se puede seguir usando el sistema desde otro cualquiera que tenga un navegador web con conexión al servidor.

Este documento enseña a manejar PHP a personas con conocimientos básicos de programación. Para realizar programas son necesarios algunas nociones de HTML (o XHTML), pero se puede ir aprendiendo sobre la marcha con los ejemplos.

INCLUSIÓN DE CÓDIGO PHP EN UNA PAGINA HTML

Para incluir código PHP basta con precederlo de la etiqueta:

<?php

Y cerrarlo con

?>.

Si el servidor web está correctamente configurado, detectará código PHP y, en vez de proporcionarle el contenido de la página directamente al cliente (lo que significaría que recibiría el código fuente del programa), ejecuta el programa y devuelve su resultado al navegador.

Así pues, el esquema de una petición sería como sigue:

@madesweb

El siguiente paso sería configurar el entorno de trabajo, lo cual omitiremos en este artículo, pues estoy trabajando con XAMPP, y eso nos incluye todas las tecnologías necesarias para realizar un desarrollo web completo. Te dejare un link para que puedas ver la instalación paso a pasa y su configuración.

ALGUNAS ESPECIFICACIONES DE PHP

El objetivo del resto del documento es mostrar PHP a través de ejemplos. Las explicaciones de sintaxis serán mínimas.

Los nombres de variables en PHP comienzan por un carácter y van seguidos de números y caracteres sin espacios. Para hacer referencia a una variable debemos anteponer a su nombre el símbolo del dólar ($).

Los tipos básicos son:

Entero: número entero con signo
Flotante: número decimal con signo
Booleano: vale true o false
Cadena de caracteres: cadena de caracteres delimitada por comillas.

Las comillas simples interpretan el texto literalmente, mientras que las dobles sustituyen las variables. No es necesario declarar las variables, simplemente el intérprete averiguará el tipo de dato que almacenará y se declarará automáticamente.

Si es necesaria una conversión de tipos, al igual que en C, se puede anteponer el tipo al que se desea promocionar entre paréntesis. Los comentarios pueden ser de dos tipos:

🔰 Para comentarios de unas sólo línea (o parte de ella) se pueden usar indistintamente // o #, que comentan todo lo que se encuentre a continuación de ellos hasta el fin de la línea. Si se desean comentario de varias líneas, se abren con /* y se cierran con */

🔰 Para imprimir en pantalla se puede usar la orden echo o print: La orden echo es muy similar a la de Shell Bash. Recibe como primer y único parámetro una cadena.

Esa cadena, si está entre comillas simples, se imprimirá literalmente. Si por el contrario deseamos que se sustituyan las variables que contenga por sus valores hay que usar comillas dobles.

Por ejemplo:

$cant=8; echo 'Son $cant euros'; dará como resultado Son $cant euros.

Pero $cant=8; echo "Son $cant euros"; imprimirá Son 8 euros.

Como se observa, las órdenes PHP van terminadas por el carácter ; Por el contrario, la orden print recibe sus parámetros entre paréntesis. Es una orden que admite muchos más parámetros y opciones.

Una de sus principales diferencias es que evalúa su parámetro y después lo imprime.

Por ejemplo:

echo "doble (8)" da doble (8),

Pero, print(doble(8)) da 16.

A continuación presentare algunos primeros ejercicios para poder comprender de una mejor manera los conceptos antes escritos.

Ejemplo 1:

Concatena dos cadenas con el operador punto (.) e imprimir su resultado.

@madesweb

Recordarles que tienen que crear una carpeta con el nombre de “ejercicios-php” en "htdocs" que es donde se encuentran los todos los archivos con condigo que luego mediante "localhost" leeremos en el explorador.

Ejemplo 2: Hacer un programa que sume dos variables que almacenan dos números distintos.

“Mi editor de texto se volvió loco y no me dejo comentar en el código php por eso van afuera los comentarios xD”

@madesweb

Ejemplo 3: Mostrar en pantalla una tabla de 10 por 10 con los números del 1 al 100

@madesweb

Finalizamos este articulo de esta forma, esperando dejar en claro las sintaxis utilizada.

Recordarles que se expresa una forma de pensar y de analizar los diferentes problemas presentados, si alguien tiene alguna otra opinión, bien pueden dejarla en la caja de comentarios.

Les dejo el Link de descarga de los archivos para que puedan probarlos.

LINK DE DESCARGA

INTRODUCCION A JAVA SCRIPT

noreply@blogger.com (Las tic) — Mon, 23 Oct 2017 16:19:00 +0000

HTML5 puede ser imaginado como un edificio soportado por tres grandes columnas: HTML, CSS y Javascript. Ya hemos estudiado los elementos incorporados en HTML y las nuevas propiedades que hacen CSS la herramienta ideal para diseñadores.

Ahora es momento de develar lo que puede ser considerado como uno de los pilares más fuertes de esta especificación: Javascript.

Javascript es un lenguaje interpretado usado para múltiples propósitos pero solo considerado como un complemento hasta ahora. Una de las innovaciones que ayudó a cambiar el modo en que vemos Javascript fue el desarrollo de nuevos motores de interpretación, creados para acelerar el procesamiento de código.

La clave de los motores más exitosos fue transformar el código Javascript en código máquina para lograr velocidades de ejecución similares a aquellas encontradas en aplicaciones de escritorio. Esta mejorada capacidad permitió superar viejas limitaciones de rendimiento y confirmar el lenguaje Javascript como la mejor opción para la web. Para aprovechar esta prometedora plataforma de trabajo ofrecida por los nuevos navegadores, Javascript fue expandido en relación con portabilidad e integración.

A la vez, interfaces de programación de aplicaciones (APIs) fueron incorporadas por defecto en cada navegador para asistir al lenguaje en funciones elementales. Estas nuevas APIs (como Web Storage, Canvas, y otras) son interfaces para librerías incluidas en navegadores. La idea es hacer disponible poderosas funciones a través de técnicas de programación sencillas y estándares, expandiendo el alcance del lenguaje y facilitando la creación de programas útiles para la web.

En este capítulo vamos a estudiar cómo incorporar Javascript dentro de nuestros documentos HTML y veremos las incorporaciones recientes a este lenguaje con la intención de prepararnos para el resto del libro.

Incorporando JavaScript

Siguiendo los mismos lineamientos que en CSS, existen tres técnicas para incorporar código Javascript dentro de HTML. Sin embargo, al igual que en CSS, solo la inclusión de archivos externos es la recomendada a usar en HTML5.

EN LINEA

Esta es una técnica simple para insertar Javascript en nuestro documento que se aprovecha de atributos disponibles en elementos HTML. Estos atributos son manejadores de eventos que ejecutan código de acuerdo a la acción del usuario. Los manejadores de eventos más usados son, en general, los relacionados con el ratón, como por ejemplo onclick, onMouseOver, u onMouseOut. Sin embargo, encontraremos sitios web que implementan eventos de teclado y de la ventana, ejecutando acciones luego de que una tecla es presionada o alguna condición en la ventana del navegador cambia (por ejemplo, onload u onfocus).

@madesweb

El resultado que obtenemos seria el siguiente:

@madesweb

Usando el manejador de eventos onclick, un código es ejecutado cada vez que el usuario hace clic con el ratón sobre el texto que dice “Hacer Clic”. Lo que el manejador onclick está diciendo es algo como: “cuando alguien haga clic sobre este elemento ejecute este código” y el código en este caso es una función predefinida en Javascript que muestra una pequeña ventana con el mensaje “hizo clic!”.

Intente cambiar el manejador onclick por onMouseOver, por ejemplo, y verá cómo el código es ejecutado solo pasando el puntero del ratón sobre el elemento.

EMBEDIDO

Para trabajar con códigos extensos y funciones personalizadas debemos agrupar los códigos en un mismo lugar entre etiquetas <script>. El elemento <script> actúa exactamente igual al elemento <style> usado para incorporar estilos CSS.

Nos ayuda a organizar el código en un solo lugar, afectando a los elementos HTML por medio de referencias. Del mismo modo que con el elemento <style>, en HTML5 no debemos usar ningún atributo para especificar lenguaje. Ya no es necesario incluir el atributo type en la etiqueta <script>. HTML5 asigna JavaScript por defecto.

En resultado sería exactamente igual al de ejemplo anterior una cuadro de dialogo emergente con una alerta que dice “Hizo clic!”.

El elemento <script> y su contenido pueden ser posicionados en cualquier lugar del documento, dentro de otros

elementos o entre ellos.

Para mayor claridad, recomendamos siempre colocar sus códigos Javascript en la cabecera del documento y luego referenciar los elementos a ser afectados usando los métodos Javascript apropiados para ese propósito. Actualmente existen tres métodos disponibles para referenciar elementos HTML desde Javascript:

getElementsByTagName: referencia un elemento por su nombre o palabra clave.
getElementById: referencia un elemento por el valor de su atributo id.
getElementsByClassName: es una nueva incorporación que nos permite referenciar un elemento por el valor de su atributo class.

Incluso si seguimos la práctica recomendada (posicionar el código dentro de la cabecera del documento), una situación debe ser considerada: el código del documento es leído de forma secuencial por el navegador y no podemos referenciar un elemento que aún no ha sido creado.

Elemento <p> que estamos referenciando. Si hubiésemos intentado afectar el elemento <p> directamente con una referencia, hubiéramos recibido un mensaje de error anunciando que el elemento no existe.

Para evitar este problema, el código fue convertido a una función llamada mostraralerta(), y la referencia al elemento <p> junto con el manejador del evento fueron colocados en una segunda función llamada hacerclic().

Las funciones son llamadas desde la última línea del código usando otro manejador de eventos (en este caso asociado con la ventana) llamado onload. Este manejador ejecutará la función hacerclic() cuando el documento sea completamente cargado y todos los elementos creados.

Es tiempo de analizar cómo el documento del ejemplo anterior es ejecutado. Primero las funciones Javascript son cargadas (declaradas) pero no ejecutadas. Luego los elementos HTML, incluidos los elementos <p>, son creados. Y finalmente, cuando el documento completo es cargado en la ventana del navegador, el evento load es disparado y la función hacerclic() es llamada. En esta función, el método getElementsByTagName referencia todos los elementos <p>.

Este método retorna un arreglo (array) conteniendo una lista de los elementos de la clase especificada encontrados en el documento. Sin embargo, usando el índice [0] al final del método indicamos que solo queremos que el primer elemento de la lista sea retornado.

Una vez que este elemento es identificado, el código registra el manejador de eventos onclick para el mismo. La función mostraralerta() será ejecutada cuando el evento click es disparado sobre este elemento mostrando el mensaje “hizo clic!”.

Puede parecer mucho código y trabajo para reproducir el mismo efecto logrado por una simple línea en el ejemplo anterior. Sin embargo, considerando el potencial de HTML5 y la complejidad alcanzada por Javascript, la concentración del código en un único lugar y la apropiada organización representa una gran ventaja para nuestras futuras implementaciones y para hacer nuestros sitios web y aplicaciones fáciles de desarrollar y mantener.

ARCHIVOS EXTERNOS

Los códigos Javascript crecen exponencialmente cuando agregamos nuevas funciones y aplicamos algunas de las APIs mencionadas previamente. Códigos embebidos incrementan el tamaño de nuestros documentos y los hacen repetitivos (cada documento debe volver a incluir los mismos códigos). Para reducir los tiempos de descarga, incrementar nuestra productividad y poder distribuir y reusar nuestros códigos en cada documento sin comprometer eficiencia, recomendamos grabar todos los códigos Javascript en uno o más archivos externos y llamarlos usando el atributo src:

El código seria el siguiente:

@madesweb

El código js sería el mismo del ejemplo 2, pero esta vez en un archivo .js

@madesweb

Y el resultado tendría que ser igual a los anteriores.

Así daríamos por concluido el articulo de introducción a JavaScript, con estos simples ejemplos y conociendo las maneras de incorporar código js a nuestra plantilla html.

En un próximo artículo veremos nuevos selectores y nuevas formas de trabajar con JavaScript.

Si te ha parecido interesante recuerda compartirlo con tus amigos, y dale like a nuestra página en face.

DRIVE

INTRODUCCIÓN A FORMATOS PARA CAJAS Y TEXTOS CON CSS3

noreply@blogger.com (Las tic) — Sat, 21 Oct 2017 03:07:00 +0000

MYDWEB

La web cambió para siempre cuando unos años atrás nuevas aplicaciones desarrolladas sobre implementaciones Ajax mejoraron el diseño y la experiencia de los usuarios.

La versión 2.0, asignada a la web para describir un nuevo nivel de desarrollo, representó un cambio no solo en la forma en que la información era transmitida sino también en cómo los sitios web y nuevas aplicaciones eran diseñados y construidos.

Los códigos implementados en esta nueva generación de sitios web pronto se volvieron estándar. La innovación se volvió tan importante para el éxito de cualquier proyecto en Internet que programadores desarrollaron librerías completas para superar las limitaciones y satisfacer los nuevos requerimientos de los diseñadores.

La falta de soporte por parte de los navegadores era evidente, pero la organización responsable de los estándares web no tomó las tendencias muy seriamente e intentó seguir su propio camino. Afortunadamente, algunas mentes brillantes siguieron desarrollando nuevos estándares en paralelo y pronto HTML5 nació. Luego del retorno de la calma (y algunos acuerdos de por medio), la integración entre HTML, CSS y JavaScript bajo la tutela de HTML5 fue como el caballero bravo y victorioso que dirige las tropas hacia el palacio enemigo.

A pesar de la reciente agitación, esta batalla comenzó mucho tiempo atrás, con la primera especificación de la tercera versión de CSS. Cuando finalmente, alrededor del año 2005, esta tecnología fue oficialmente considerada estándar, CSS estaba listo para proveer las funciones requeridas por desarrolladores (aquellas que programadores habían creado desde años atrás usando códigos JavaScript complicados de implementar y no siempre compatibles).

En este capítulo vamos a estudiar las contribuciones hechas por CSS3 a HTML5 y todas las propiedades que simplifican la vida de diseñadores y programadores.

Ahora nos volvemos locos, debemos copiarnos una la siguiente plantilla para poder aplicar las nuevas etiquetas del CSS3:

NOTA: Pega este código en tu editor de texto y guárdalo como plantilla.html

<!DOCTYPE html>

<head>

<title>Nuevos Estilos CSS3</title>

</head>

<body>

<span id="titulo">Estilos CSS Web 2.0</span>

</header>

</body>

</html>

Luego crea otro archivo y copia este código css, y guárdalo con el nombre de nuevocss3.css.

Recuerda que los dos archivos tienen que estar en la misma carpeta para que funciones.

body {

text-align: center;

}

#principal {

display: block;

width: 500px;

margin: 50px auto;

padding: 15px;

text-align: center;

border: 1px solid #999999;

background: #DDDDDD;

}

#titulo {

font: bold 36px verdana, sans-serif;

}

Abre tu archivo .hmtl en el navegador para que tengas la primera vista de la plantilla que modificaremos, como ya te diste cuenta no tiene nada de especial xD…su propósito es solo crear una caja en la que podamos mostrar nuestros siguientes ejemplos.

@madesweb

Una de las cosas que notará sobre esta caja cuando sea mostrada en pantalla es que sus esquinas son rectas. Esto no es algo que nos agrade, ¿verdad? Puede ser un factor psicológico o no, lo cierto es que a casi nadie en este negocio le agradan las esquinas rectas. Por lo tanto, lo primero que haremos será cambiar este aspecto.

Border-radius

Por muchos años diseñadores han sufrido intentando lograr el efecto de esquinas redondeadas en las cajas de sus páginas web. El proceso era casi siempre frustrante y extenuante. Todos lo padecieron alguna vez. Si mira cualquier presentación en video de las nuevas características incorporadas en HTML5, cada vez que alguien habla sobre las propiedades de CSS3 que hacen posible generar fácilmente esquinas redondeadas, la audiencia enloquece. Esquinas redondeadas eran esa clase de cosas que nos hacían pensar: “debería ser fácil hacerlo”. Sin embargo nunca lo fue.

El código seria:

#border-radius{

display: block;

width: 500px;

margin: 50px auto;

padding: 15px;

text-align: center;

border: 1px solid #999999;

background: #DDDDDD;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border-radius: 20px;

}

El –moz y webkit se usan para que el Border-radius sean soportados en los exploradores de Chrome y Firefox, pero eso fue solo al inicio, en estos días ya todos los exploradores soportaran estos estilos.

Les dejo una imagen para ver su efecto en una caja con un texto.

@madesweb

Si todas las esquinas tienen la misma curvatura podemos utilizar un solo valor. Sin embargo, como ocurre con las propiedades margin y padding, podemos también declarar un valor diferente por cada una:

-moz-border-radius: 20px 10px 30px 50px;

-webkit-border-radius: 20px 10px 30px 50px;

border-radius: 20px 5px 10px 100px;

Sabiendo esto las posibilidades son muchas ya que podremos manipular una caja a nuestro antojo, y poder utilizarlo con otros fines que no sean solo redondear contornos, les muestro una figura creada con este método.

@madesweb

Acá le colocamos los siguientes datos: border-radius: 20px 5px 10px 100px; y además le subimos el borde: 5px;

Como lo podrán notar los datos 100px y 20px corresponden a las esquinas de la izquieda y los valores de 5px y 10px a las esquinas del lado derecho. Con esto las posibilidades son infinitas.

Otra forma de escribir estos datos seria de la siguiente manera:

-moz-border-radius: 20px / 10px;

-webkit-border-radius: 20px / 10px;

border-radius: 15px / 15px;

Los valores a la izquierda de la barra representarán el radio horizontal mientras que los valores a la derecha representan el radio vertical. La combinación de estos valores genera una elipsis.

Box-shadow

Ahora que finalmente contamos con la posibilidad de generar bonitas esquinas para nuestras cajas podemos arriesgarnos con algo más. Otro muy buen efecto, que había sido extremadamente complicado de lograr hasta este momento, es sombras. Por años diseñadores han combinado imágenes, elementos y algunas propiedades CSS para generar sombras. Gracias a CSS3 y a la nueva propiedad box-shadow podremos aplicar sombras a nuestras cajas con solo una simple línea de código:

CODIGO:

#box-shadowl {

display: block;

width: 500px;

margin: 50px auto;

padding: 15px;

text-align: center;

border: 1px solid #999999;

background: #DDDDDD;

-moz-box-shadow: rgb(150,150,150) 5px 5px;

-webkit-box-shadow: rgb(150,150,150) 5px 5px;

box-shadow: rgb(150,150,150 20px 20px;

}

El resultado sería el siguiente:

@madesweb

Los valores: rgb(150,150,150) definen el color de la sombra en el sistema RGB como ya sabemos la combinación de los colores ROJO, VERDE y AZUL generan la gama de todos los colores. Y los valores: 20px 20px; establecen la distancia con respecto a la caja.

Exageramos estos valores para poder notar una diferencia, pero con una configuración de 5px, se obtiene un resultado muy notable y aceptable.

Text-shadow

Ahora que conoce todo acerca de sombras probablemente estará pensando en generar una para cada elemento de su documento. La propiedad box-shadow fue diseñada especialmente para ser aplicada en cajas. Si intenta aplicar este efecto a un elemento <span>, por ejemplo, la caja invisible ocupada por este elemento en la pantalla tendrá una sombra, pero no el contenido del elemento. Para crear sombras para figuras irregulares como textos, existe una propiedad especial llamada text-shadow.

CODIGO:

#box-shadow {

font: bold 36px verdana, sans-serif;

text-shadow: rgb(250,150,0) 3px 3px 5px;

}

El resultado sería el siguiente:

@madesweb

Para los valores presente, también se configuran el valor y la posición.

Gradiente lineal

Los gradientes son uno de los efectos más atractivos entre aquellos incorporados en CSS3. Este efecto era prácticamente imposible de implementar usando técnicas anteriores pero ahora es realmente fácil de hacer usando CSS. Una propiedad background con algunos pocos parámetros es suficiente para convertir su documento en una página web con aspecto profesional:

CODIGO:

#gradiente-lineal {

background: -webkit-linear-gradient (top, #FFFFFF, #006699);

background: -moz-linear-gradient (top, #FFFFFF, #006699);

}

El resultado sería el siguiente:

@madesweb

Para este ejemplo los varales establecen el color y la posición de donde inicia y donde termina y que con que color en específico. En este caso se especifican en hexadecimal.

Gradiente radial

La sintaxis estándar para los gradientes radiales solo difiere en unos pocos aspectos con respecto a la anterior. Debemos usar la función radial-gradient() y un nuevo atributo para la forma:

CODIGO:

#gradiente-radial {

background: -moz-radial-gradient(center, circle, #FFFFFF 0%, #DF3A01 200%);

background: -webkit-radial-gradient(center, circle, #FFFFFF 0%, #DF3A01 200%);

}

El resultado sería el siguiente:

MYDWEB

Outline

La propiedad outline es una vieja propiedad CSS que ha sido expandida en CSS3 para incluir un valor de desplazamiento. Esta propiedad era usada para crear un segundo borde, y ahora ese borde puede ser mostrado alejado del borde real del elemento.

CODIGO:

#OUTLINE {

outline: 2px dashed #000099;

outline-offset: 15px;

}

Resultado sería:

@madesweb

Transform: scale

Números enteros y decimales pueden ser declarados para la escala. Esta escala es calculada por medio de una matriz. Los valores entre 0 y 1 reducirán el elemento, un valor de 1 mantendrá las proporciones originales y valores mayores que 1 aumentarán las dimensiones del elemento de manera incremental.

CODIGO:

-moz-transform: scale(1);

-webkit-transform: scale(1);

}

Esta opción es para poner una escala a la caja que contiene el texto, no puse imagen de ejemplo pues ocupa casi toda la pantalla con un valor de 2 y pues con un valor de 1 pues luce exactamente igual a los demás ejemplos.

Prueben en sus computadoras para ver el efecto que tiene sobre los elementos, pueden probar agregando un segundo para metro con números negativos para poder girar el elemento.

-moz-transform: scale(1, -1);

-webkit-transform: scale(1, -1);

}

Transform: rotate

La función rotate rota el elemento en la dirección de las agujas de un reloj. El valor debe ser especificado en grados usando la unidad “deg”:

Codigo:

-moz-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

}

El resultado sería:

MYDWEB

TRANSFORMACIONES DINÁMICAS

Lo que hemos aprendido hasta el momento en este capítulo cambiará la forma de la web, pero la mantendrá tan estática como siempre. Sin embargo, podemos aprovecharnos de la combinación de transformaciones y pseudo-clases para convertir nuestra página en una aplicación dinámica:

Dejo el código completo:

#dinamic {

display: block;

width: 500px;

margin: 50px auto;

padding: 15px;

text-align: center;

border: 1px solid #999999;

background: #ACFA58;

-moz-transition: -moz-transform 1s ease-in-out 0.25s;

-webkit-transition: -webkit-transform 1s ease-in-out 0.25s;

}

#dinamic:hover{

-moz-transform: rotate(10deg);

-webkit-transform: rotate(10deg);

}

El resultado lo podrán ver en sus navegadores.

Están son las nuevas herramientas que agrego css3, hace algunos años, cabe recalcar que esto es a nivel de introducción a css3, a la fecha hay muchas mas tecnologías para hacer lo que se presenta en este articulo, pero una de las mejores maneras de aprender es saber como se hace, paso a paso para poder generar estos mismos efectos de una forma automática.

Recuerden que pueden compartir con sus amigos, en sus redes sociales si les a parecido interesante.

Para finalizar les dejo el link donde podrán descargar el .rar con los archivos con los códigos para que los puedan abrir en su computador.

Link de Descarga.!!!!

QUE ES LA MAQUETACION WEB?

noreply@blogger.com (Las tic) — Sun, 15 Oct 2017 21:17:00 +0000

ARCHIVO TEXTO PLANO

Anteriormente, se pensaba en los archivos web y paginas web como texto plano o algo sin profundidad.

En estos tiempos esa idea es totalmente obsoleta, pues el desarrollo web a evolucionado y adaptado de una muy buena manera. Haciendo así del desarrollo y diseño web, algo para no tomarse a la ligera, pues deberá de tomarse su tiempo para poder entender cada una de las tecnologías que se ven envueltas en el proceso.

EL TERMINO : MAQUETACION WEB

Podria surgir a partir de que las tablas pasaron a ser obsoletas en le evolucion del desarrollo web, pues como conocemos en años anteriores estas eran las que proporcionaban la estructura para una plantilla web y su contenido

Hoy en día eso es totalmente diferente, pues como ya se sabe surgieron nuevas tecnologías para este propósito, las tablas pasaron a contener la información para las que fueron creadas.

LA MAQUETACION WEB, se desarrolla utilizando una seria de tecnologías como: HTML Y CSS.

EL HTML: proporciona, la estructura y permite ingresar el contenido de nuestro sitio.

MIENTRAS QUE EL CSS: Proporcionara el estilo, posición, y para algunas etiquetas el formato con que se muestran.

No se puede incluir JAVA SCRIPT Y PHP pues estos lenguajes de programación van en orientados al comportamiento del sitio y a su funcionamiento del lado del servidor respectivamente.

El objetivo con que nace la maquetacion web, es de proporcionar una estructura no invasiva en cuanto al contenido, cada sección tendrá su propio espacio y por ende esto permite tratar cada sección como individual al extremo de poder asignar un estilo personalizado a cada una de estas sección, tal y como se muestra en la siguiente imagen.

MAQUETACION WEB CON HTML5 Y CSS3

De esta manera es totalmente mas fácil identificar cada una de las partes que definen nuestra plantilla, y se descarta la imagen anterior de que el diseño web es un simple archivo de texto plano.

En este blog ya hemos abordado temas describiendo las partes de una plantilla utilizando html y css para lograr lo que seria un modelo de caja tradicional, el cual es un buen ejemplo de lo que seria la maquetacion web.

Les dejare por acá una lista de los artículos que proporcionan un ejercicio sobre maquetacion web.

📑MAQUETACION DE UN SITIO WEB CON HTML5 Y CSS3

📑 ESTRUCTURA DE UN ARTICULO UTILIZANDO LA MAQUETACION WEB CON HTML5 CSS3

Aclaro que este termino de maquetacion web, se esta abordando desde el punto de vista DESARROLLO FRONT-END, pues construir una aplicación completa incluyen otros paradigmas como POO (Programación Orientada a Objetos) o MVC(Modelo Vista Controlador.)

APLICANDO CSS A NUESTRA PLANTILLA

noreply@blogger.com (Las tic) — Sat, 07 Oct 2017 03:22:00 +0000

madesweb

Siguiendo con los conceptos básicos de CSS, vamos a estudiar lo que es llamado el Modelo de Caja Tradicional. Este modelo has sido implementado desde la primera versión de CSS y es actualmente soportado por cada navegador en el mercado, lo que lo ha convertido en un estándar para el diseño web.

Todo modelo, incluso aquellos aún en fase experimental, pueden ser aplicados a la misma estructura HTML, pero esta estructura debe ser preparada para ser afectada por estos estilos de forma adecuada. Nuestros documentos HTML deberán ser adaptados al modelo de caja seleccionado.

Modelo de caja tradicional

Todo comenzó con tablas. Las tablas fueron los elementos que sin intención se volvieron la herramienta ideal utilizada por desarrolladores para crear y organizar cajas de contenido en la pantalla. Este puede ser considerado el primer modelo de caja de la web. Las cajas eran creadas expandiendo celdas y combinando filas de celdas, columnas de celdas y tablas enteras, unas sobre otras o incluso anidadas.

Cuando los sitios webs crecieron y se volvieron más y más complejos esta práctica comenzó a presentar serios problemas relacionados con el tamaño y el mantenimiento del código necesario para crearlos.

Estos problemas iniciales hicieron necesario lo que ahora vemos como una práctica natural: la división entre estructura y presentación. Usando etiquetas <div> y estilos CSS fue posible reemplazar la función de tablas y efectivamente separar la estructura HTML de la presentación.

Con elementos <div> y CSS podemos crear cajas en la pantalla, posicionar estas cajas a un lado o a otro y darles un tamaño, color o borde específico entre otras características. CSS provee propiedades específicas que nos permiten organizar las cajas acorde a nuestros deseos. Estas propiedades son lo suficientemente poderosas como para crear un modelo de caja que se transformó en lo que hoy conocemos como Modelo de Caja Tradicional.

Algunas deficiencias en este modelo mantuvieron a las tablas vivas por algún tiempo, pero los principales desarrolladores, influenciados por el suceso de las complementaciones Ajax y una cantidad enorme de nuevas aplicaciones interactivas, gradualmente volvieron a las etiquetas <div> y estilos CSS en un estándar. Finalmente el Modelo de Caja Tradicional fue adoptado a gran escala.

En el articulo anterior creamos nuestra plantilla con las etiquetas HTML5. Esa sera la estructura necesario para nuestro documento.

Este modelo necesita agrupar cajas juntas para ordenarlas horizontalmente. Debido a que el contenido completo del cuerpo es creado a partir de cajas, debemos agregar un elemento <div> para agruparlas, centrarlas y darles un tamaño especifico.

A continuación se les proporcionara el código de nuestra nueva plantilla con el elemento <div> ya incluido.

<!DOCTYPE html>

<head>

<title>EJEMPLO DE MODELO DE CAJA CON HTML5 Y CSS3</title>

</head>

<body>

<h1>MAQUETACION Y DESARROLLO WEB</h1>

</header>

<ul>

<li>principal</li>

<li>fotos</li>

<li>videos</li>

<li>contacto</li>

</ul>

</nav>

<h1>APRENDE SOBRE CSS3</h1>

<h2>NUEVAS ETIQUETAS</h2>

</hgroup>

<time datetime="2017-10-05" pubdate>publicado 05-10-2017

</time>

</header>

En este articulo, te mostrare lo nuevo sonbre CSS3, y como puedes aplicarlo, en tus diseños.

css3

</figcaption>

</figure>

<p>comentarios (0)</p>

</footer>

</article>

<h1>APRENDE SOBRE CSS3</h1>

<h2>NUEVAS ETIQUETAS</h2>

</hgroup>

<time datetime="2017-10-05" pubdate>publicado 05-10-2017

</time>

</header>

En este articulo, te mostrare lo nuevo sonbre CSS3, y como puedes aplicarlo, en tus diseños.

css3

</figcaption>

</figure>

<p>comentarios (0)</p>

</footer>

</article>

</section>

<blockquote>Mensaje número uno</blockquote>

<blockquote>Mensaje número dos</blockquote>

</aside>

</footer>

</div>

</body>

</html>

Provee una nueva plantilla lista para recibir los estilos CSS. Dos cambios importantes pueden distinguirse al comparar este código con el propuesto en el articulo Estructura de un articulo utilizando etiquetas html5

Lo primero en destacar serán las etiquetas id que están sombreadas y e negritas pues son las etiquetas agregadas para poder referenciar sus respectivas etiquetas en nuestro código CSS.

En segundo lugar, la adición del elemento <div> mencionado anteriormente. Este <div> fue identificado con el atributo id="agrupar", el cual es cerrado al final de cuerpo con la etiqueta de cierre </div>.

Este elemento se encarga de agrupar todos los demás elementos permitiéndonos aplicar el modelo de caja al cuerpo y designar su posición horizontal, como veremos mas adelante.

Deberá copiar esta plantilla en su editor de texto preferido, y guardarla con el nombre modelo_caja_tradicional.html, a la cual posteriormente le agregaremos nuestros estilo.

DEFINIENDO TÉRMINOS GENERALES DE CSS3.

Selector universal *

Comencemos con algunas reglas básicas que nos ayudarán a proveer consistencia al diseño:

* {
margin: 0px;
padding: 0px;
}

La primera regla en nuestro archivo CSS, nos asegura que todo elemento tendrá un margen interno y externo de 0 pixeles. De ahora en más solo necesitaremos modificar los márgenes de los elementos que queremos que sean mayores que cero.

Debemos escribir todas las reglas necesarias para otorgar estilo a nuestra plantilla en un archivo CSS. El archivo ya fue incluido dentro del código HTML por medio de la etiqueta <link>, por lo que lo único que tenemos que hacer es crear un archivo en su editor de texto preferido, guardarlo y con el nombre de misestilos.css y luego en su interior copiar todas las lineas de código que se irán describiendo a continuación, incluida la de selector universal.

Nueva jerarquía para cabeceras

En nuestra plantilla usamos elementos <h1> y <h2> para declarar títulos y subtítulos de diferentes secciones del documento. Los estilos por defecto de estos elementos se encuentran siempre muy lejos de lo que queremos

h1 {

font: bold 20px verdana, sans-serif;

}

h2 {

font: bold 14px verdana, sans-serif;

}

La propiedad font, asignada a los elementos <h1> y <h2>, nos permite declarar todos los estilos para el texto en una sola línea.

Las propiedades que pueden ser declaradas usando font son: font-style, font-variant, font-weight, font-size/line-height, y font-family en este orden. Con estas reglas estamos cambiando el grosor, tamaño y tipo de letra del texto dentro de los elementos <h1> y <h2> a los valores que deseamos.

Declarando nuevos elementos HTML5

Otra regla básica que debemos declarar desde el comienzo es la definición por defecto de elementos estructurales de HTML5.

Algunos navegadores aún no reconocen estos elementos o los tratan como elementos inline (en línea). Necesitamos declarar los nuevos elementos HTML5 como elementos block para asegurarnos de que serán tratados como regularmente se hace con elementos <div> y de este modo construir nuestro modelo de caja:

header, section, footer, aside, nav, article, figure, figcaption,

hgroup {

display: block;

}

Centrando el cuerpo

El primer elemento que es parte del modelo de caja es siempre <body>. Normalmente, por diferentes razones de diseño, el contenido de este elemento debe ser posicionado horizontalmente. Siempre deberemos especificar el tamaño de este contenido, o un tamaño máximo, para obtener un diseño consistente a través de diferentes configuraciones de pantalla.

body {

text-align: center;

}

Con el código anterior todo lo que se encuentra dentro de <body> será centrado en la ventana, centrando de este modo toda la página web.

Creando la caja principal

Siguiendo con el diseño de nuestra plantilla, debemos especificar una tamaño o tamaño máximo para el contenido del cuerpo. Como seguramente recuerda, en el Listado 2-25 en este mismo capítulo agregamos un elemento <div> a la plantilla para agrupar todas las cajas dentro del cuerpo.

Este <div> será considerado la caja principal para la construcción de nuestro modelo de caja (este es el propósito por el que lo agregamos). De este modo, modificando el tamaño de este elemento lo hacemos al mismo tiempo para todos los demás:

#agrupar {

       width: 960px;

       margin: 15px auto;

       text-align: left;

}

El código anterior está referenciando por primera vez un elemento a través del valor de su atributo id. El carácter # le está diciendo al navegador que el elemento afectado por este conjunto de estilos tiene el atributo id con el valor agrupar.

Dentro de esta regla hay tres estilos para la caja principal.

width: establece un valor fijo de 960pixeles, esto es un valor común para todos los sitios hoy en día este es el ancho de la caja que contiene los artículos y la barra lateral.

margin: Usado para este código puede tener cuatro valores: Superior, Derecho, Inferior, Izquierdo, en este orden. El primer valor declaro sera el asignada a la parte superior, sino se asignan mas valores la caja tomara este valor para los cuatro lados.

text-aling: Esta linea de código es para alinear el texto según queramos, los valores pueden ser: Center, Right, Left, Justify.

La cabecera

#cabecera {

background: #FFFBB9;

border: 1px solid #999999;

padding: 20px;

}

<header>. Este elemento contiene el título principal de nuestra página web y estará ubicado en la parte superior de la pantalla. En nuestra plantilla, <header> fue identificado con el atributo id y el valor cabecera.

Barra de navegación

Siguiendo al elemento <header> se encuentra el elemento <nav>, el cual tiene el propósito de proporcionar ayuda para la navegación. Los enlaces agrupados dentro de este elemento representarán el menú de nuestro sitio web.

#menu {

background: #CCCCCC;

padding: 5px 15px;

}

#menu li {

display: inline-block;

list-style: none;

padding: 5px;

font: bold 14px verdana, sans-serif;

}

La propiedad padding trabaja exactamente como margin. Cuatro valores pueden ser especificados: superior, derecho, inferior, izquierdo, en este orden. Si solo declaramos un valor, el mismo será asignado para todos los espacios alrededor del contenido del elemento. Si en cambio especificamos dos valores, entonces el primero será asignado como margen interno de la parte superior e inferior del contenido y el segundo valor no será asignado al margen interno de los lados, izquierdo y derecho.

Dentro de la barra de navegación hay una lista creada con las etiquetas <ul> y <li>. Por defecto, los ítems de una lista son posicionados unos sobre otros. Para cambiar este comportamiento y colocar cada opción del menú una al lado de la otra, referenciamos los elementos <li> dentro de este elemento <nav> en particular usando el selector #menu li, y luego asignamos a todos ellos el estilo display: inline-block para convertirlos en lo que se llama cajas inline.

A diferencia de los elementos block, los elementos afectados por el parámetro inline-block estandarizado en CSS3 no generan ningún salto de línea pero nos permiten tratarlos como elementos block y así declarar un valor de ancho determinado. Este parámetro también ajusta el tamaño del elemento de acuerdo con su contenido cuando el valor del ancho no fue especificado.

En esta última regla también eliminamos el pequeño gráfico generado por defecto por los navegadores delante de cada opción del listado utilizando la propiedad list-style.

Section y aside

Los siguientes elementos estructurales en nuestro código son dos cajas ordenadas horizontalmente. El Modelo de Caja

Tradicional es construido sobre estilos CSS que nos permiten especificar la posición de cada caja.

Usando la propiedad

float podemos posicionar estas cajas del lado izquierdo o derecho de acuerdo a nuestras necesidades. Los elementos

que utilizamos en nuestra plantilla HTML para crear estas cajas son <section> y <aside>, cada uno identificado con el

atributo id y los valores seccion y columna respectivamente.

#seccion {

      float: left;

      width: 660px;

      margin: 20px;

}

#

columna {

      float: left;

      width: 150px;

      margin: 20px 0px;

      padding: 20px;

      background: #CCCCCC;

}

Float actúan como elementos block (con la diferencia de que son ubicados de acuerdo al valor de esta propiedad y no el flujo normal del documento). Los elementos son movidos a izquierda o derecha en el área disponible, tanto como sea posible,

respondiendo al valor de float.

Con las reglas del código anterior declaramos la posición de ambas cajas y sus respectivos tamaños, generando así las columnas visibles en la pantalla. La propiedad float mueve la caja al espacio disponible del lado especificado por su valor, width asigna un tamaño horizontal y margin, por supuesto, declara el margen del elemento.

Afectado por estos valores, el contenido del elemento <section> estará situado a la izquierda de la pantalla con un tamaño de 660 pixeles, más 40 pixeles de margen, ocupando un espacio total de 700 pixeles de ancho. La propiedad float del elemento <aside> también tiene el valor left (izquierda).

Esto significa que la caja generada será movida al espacio disponible a su izquierda. Debido a que la caja previa creada por el elemento <section> fue también movida a la izquierda de la pantalla, ahora el espacio disponible será solo el que esta caja dejó libre. La nueva caja quedará ubicada en la misma línea que la primera pero a su derecha, ocupando el espacio restante en la línea, creando la segunda columna de nuestro diseño.

Footer

Para finalizar la aplicación del Modelo de Caja Tradicional, otra propiedad CSS tiene que ser aplicada al elemento <footer>. Esta propiedad devuelve al documento su flujo normal y nos permite posicionar <footer> debajo del último elemento en lugar de a su lado:

#pie {

clear: both;

text-align: center;

padding: 20px;

border-top: 2px solid #999999;

}

el código anterior declara un borde de 2 pixeles en la parte superior de <footer>, un margen interno (padding) de 20 pixeles, y centra el texto dentro del elemento. A sí mismo, restaura el normal flujo del documento con la propiedad clear.

Esta propiedad simplemente restaura las condiciones normales del área ocupada por el elemento, no permitiéndose posicionarse adyacente a una caja flotante.

El valor usualmente utilizado es both, el cual significa que ambos lados del elemento serán restaurados y el elemento seguirá el flujo normal (este elemento ya no es flotante como los anteriores). Esto, para un elemento block, quiere decir que será posicionado debajo del último elemento, en una nueva línea.

La propiedad clear también empuja los elementos verticalmente, haciendo que las cajas flotantes ocupen un área real en la pantalla. Sin esta propiedad, el navegador presenta el documento en pantalla como si los elementos flotantes no existieran y las cajas se superponen.

En la siguiente imagen, se muestra hasta ahora el avance con nuestro modelo de caja tradicional.

madesweb

Últimos toques, configuraremos la etiqueta <article>

Lo único que nos queda por hacer es trabajar en el diseño del contenido. Para esto, solo necesitamos configurar los pocos elementos HTML5 restantes:

article {

background: #FFFBCC;

border: 1px solid #999999;

padding: 20px;

margin-bottom: 15px;

}

article footer {

text-align: right;

}

time {

color: #999999;

}

figcaption {

font: italic 14px verdana, sans-serif;

}

Este codigo referencia todos los elementos <article> y les otorga algunos estilos básicos (color de fondo, un borde sólido de 1 pixel, margen interno y margen inferior). El margen inferior de 15 pixeles tiene el propósito de separar un elemento <article> del siguiente verticalmente.

Cada elemento <article> cuenta también con un elemento <footer> que muestra el número de comentarios recibidos. Para referenciar un elemento <footer> dentro de un elemento <article>, usamos el selector article footer que significa “cada <footer> dentro de un <article> será afectado por los siguientes estilos”.

Esta técnica de referencia fue aplicada aquí para alinear a la derecha el texto dentro de los elementos <footer> de cada <article>.

Al final del código cambiamos el color de cada elemento <time> y diferenciamos la descripción de la imagen (insertada con el elemento <figcaption>) del resto del texto usando una tipo de letra diferente.

Box-sizing

Existe una propiedad adicional incorporada en CSS3 relacionada con la estructura y el Modelo de Caja Tradicional. La propiedad box-sizing nos permite cambiar cómo el espacio total ocupado por un elemento en pantalla será calculado forzando a los navegadores a incluir en el ancho original los valores de las propiedades padding y border.

Como explicamos anteriormente, cada vez que el área total ocupada por un elemento es calculada, el navegador obtiene el valor final por medio de la siguiente fórmula: tamaño + márgenes + márgenes internos + bordes.

Por este motivo, si declaramos la propiedad width igual a 100 pixeles, margin en 20 pixeles, padding en 10 pixeles y border en 1 pixel, el área horizontal total ocupada por el elemento será: 100+40+20+2= 162 pixeles (note que tuvimos que duplicar los valores de margin, padding y border en la fórmula porque consideramos que los mismos fueron asignados tanto para el lado derecho como el izquierdo).

Esto significa que cada vez que declare el ancho de un elemento con la propiedad width, deberá recordar que el área real para ubicar el elemento en pantalla será seguramente más grande. Dependiendo de sus costumbres, a veces podría resultar útil forzar al navegador a incluir los valores de padding y border en el tamaño del elemento. En este caso la nueva fórmula sería simplemente: tamaño + márgenes.

div {

width: 100px;

margin: 20px;

padding: 10px;

border: 1px solid #000000;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

La propiedad box-sizing puede tomar dos valores. Por defecto es configurada como content-box, lo que significa que los navegadores agregarán los valores de padding y border al tamaño especificado por width y height.

Usando el valor border-box en su lugar, este comportamiento es cambiado de modo que padding y border son incluidos dentro del elemento.

Y de esta manera estaríamos terminando de aplicar los estilos a nuestra plantilla HTML, lo que sigue es revisar el resultado en varios navegadores para apreciar como se aplican cada estilo.

Sera obligación de cada uno jugar con las etiquetas y probar cambiando sus valores esto para ser totalmente cocientes de que tanto se puede alterar nuestro código.

A continuación se muestra el resultado de el modelo caja tradicional, solo agregue algunas cosas como la imagen de ejemplo, y algún que otro texto. Este es el resultado en CHROME, cada quien se encargara de probarlo en los demás exploradores.

madesweb

Espero que este grupo de artículos que se están desarrollando, en verdad les ayude a entender un poco mejor la temática de HTML Y CSS, con ejemplos super sencillos.

En otra oportunidad se desarrollara nuevos efectos que dispone CSS3.

Hasta pronto.!!!

INTRODUCCIÓN A CSS3

noreply@blogger.com (Anonymous) — Thu, 05 Oct 2017 01:55:00 +0000

madesweb

Como aclaramos anteriormente, la nueva especificación de HTML (HTML5) no describe solo los nuevos elementos HTML o el lenguaje mismo. La web demanda diseño y funcionalidad, no solo organización estructural o definición de secciones. En este nuevo paradigma, HTML se presenta junto con CSS y Javascript como un único instrumento integrado.

Oficialmente CSS nada tiene que ver con HTML5. CSS no es parte de la especificación y nunca lo fue. Este lenguaje es, de hecho, un complemento desarrollado para superar las limitaciones y reducir la complejidad de HTML.

Al comienzo, atributos dentro de las etiquetas HTML proveían estilos esenciales para cada elemento, pero a medida que el lenguaje evolucionó, la escritura de códigos se volvió más compleja y HTML por sí mismo no pudo más satisfacer las demandas de diseñadores.

En consecuencia, CSS pronto fue adoptado como la forma de separar la estructura de la presentación. Desde entonces, CSS ha crecido y ganado importancia, pero siempre desarrollado en paralelo, enfocado en las necesidades de los diseñadores y apartado del proceso de evolución de HTML.

La versión 3 de CSS sigue el mismo camino, pero esta vez con un mayor compromiso. La especificación de HTML5 fue desarrollada considerando CSS3 a cargo del diseño. Debido a esta consideración, la integración entre HTML y CSS es ahora vital para el desarrollo web y esta es la razón por la que cada vez que mencionamos HTML5 también estamos haciendo referencia a CSS3, aunque oficialmente se trate de dos tecnologías completamente separadas.

Estilos y estructura

A pesar de que cada navegador garantiza estilos por defecto para cada uno de los elementos HTML, estos estilos no necesariamente satisfacen los requerimientos de cada diseñador. Normalmente se encuentran muy distanciados de lo que queremos para nuestros sitios webs. Diseñadores y desarrolladores a menudo deben aplicar sus propios estilos para obtener la organización y el efecto visual que realmente desean.

ELEMENTO BLOCK

Con respecto a la estructura, básicamente cada navegador ordena los elementos por defecto de acuerdo a su tipo: block (bloque) o inline (en línea). Esta clasificación está asociada con la forma en que los elementos son mostrados en pantalla. Elementos block son posicionados uno sobre otro hacia abajo en la página. Elementos inline son posicionados lado a lado, uno al lado del otro en la misma línea, sin ningún salto de línea a menos que ya no haya más espacio horizontal para cubicarlos.

Casi todos los elementos estructurales en nuestros documentos serán tratados por los navegadores como elementos block por defecto. Esto significa que cada elemento HTML que representa una parte de la organización visual (por ejemplo, <section>, <nav>, <header>, <footer>, <div>) será posicionado debajo del anterior.

En el Capítulo 1 creamos un documento HTML con la intención de reproducir un sitio web tradicional. El diseño incluyó barras horizontales y dos columnas en el medio. Debido a la forma en que los navegadores muestran estos elementos por defecto, el resultado en la pantalla está muy lejos de nuestras expectativas.

Tan pronto como el archivo HTML es abierto en el navegador, la posición errónea en la pantalla de las dos columnas definidas por los elementos <section> y <aside> es claramente visible. Una columna está debajo de la otra en lugar de estar a su lado, como correspondería. Cada bloque (block) es mostrado por defecto tan ancho como sea posible, tan alto como la información que contiene y uno sobre otro, como se muestra en la siguiente imagen:

MODELO DE CAJA

Para aprender cómo podemos crear nuestra propia organización de los elementos en pantalla, debemos primero entender cómo los navegadores procesan el código HTML. Los navegadores consideran cada elemento HTML como una caja. Una página web es en realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son establecidas por estilos provistos por los navegadores o por los diseñadores usando CSS3.

CSS3 tiene un set predeterminado de propiedades destinados a sobrescribir los estilos provistos por navegadores y obtener la organización deseada. Estas propiedades no son específicas, tienen que ser combinadas para formar reglas que luego serán usadas para agrupar cajas y obtener la correcta disposición en pantalla. La combinación de estas reglas es normalmente llamada modelo o sistema de disposición. Todas estas reglas aplicadas juntas constituyen lo que se llama un modelo de caja.

CONCEPTOS BÁSICOS SOBRE ESTILOS

Antes de comenzar a insertar reglas CSS en nuestro archivo de estilos y aplicar un modelo de caja, debemos revisar los conceptos básicos sobre estilos CSS3.

ESTILOS EN LINEA

Una de las técnicas más simples para incorporar estilos CSS3 a un documento HTML5 es la de asignar los estilos dentro delas etiquetas por medio del atributo style.

ejemplo:

<!DOCTYPE html>

<head>

<title>Este es el título del documento</title>

</head>

<body>

<p style=”font-size: 20px”>Mi texto</p>

</body>

</html>

Usar la técnica demostrada anteriormente es una buena manera de probar estilos y obtener una vista rápida de sus efectos, pero no es recomendado para aplicar estilos a todo el documento. La razón es simple: cuando usamos esta técnica, debemos escribir y repetir cada estilo en cada uno de los elementos que queremos modificar, incrementando el tamaño del documento a proporciones inaceptables y haciéndolo imposible de mantener y actualizar. Solo imagine lo que ocurriría si decide que en lugar de 20 pixeles el tamaño de cada uno de los elementos <p> debería ser de 24 pixeles. Tendría que modificar cada estilo en cada etiqueta <p> en el documento completo.

ESTILOS EMBEDIDOS

Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar referencias para afectar los elementos HTML correspondientes.

Ejemplo:

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

<style>

p { font-size: 20px }

</style>

</head>

<body>

<p>Mi texto</p>

</body>

</html>

El elemento <style> mostrado en el ejemplo anterior, permite a los desarrolladores agrupar estilos CSS dentro del documento. En versiones previas de HTML era necesario especificar que tipo de estilos serian insertados.

El ejemplo anterior tiene la misma función que ejemplo de estilo en linea pero para este ejemplo no tuvimos que escribir el estilo dentro de la etiqueta <p> porque todos los estos elementos ya fueron afectados.

Con este método reducimos nuestros códigos y asignamos los estilos que queremos a elementos específicos utilizando referencias.

ARCHIVOS EXTERNOS

Declarar los estilos en la cabecera del documento ahorra espacio y vuelve al código más consistente y actualizable, pero nos requiere hacer una copia de cada grupo de estilos en todos los documentos de nuestro sitio web. La solución es mover todos los estilos a un archivo externo y luego utilizar el elemento <link> para insertar este archivo dentro de cada documento que los necesite. Este método nos permite cambiar los estilos por completo simplemente incluyendo un archivo diferente.

Ejemplo:

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

<link rel="stylesheet" href="misestilos.css">

</head>

<body>

<p>Mi texto</p>

</body>

En los articulos que desarollamos anteriormente en la seccion de HTML esdutiadmos la etiqueta <link> y cómo utilizarla para insertar archivos con estilos CSS en nuestros documentos. Utilizando la línea <link rel=”stylesheet” href=”misestilos.css”> le decimos al navegador que cargue el archivo misestilos.css porque contiene todos los estilos necesitados para presentar el documento en pantalla.

REFERENCIANDO CON PALABRA CLAVE

Continuando con el desarrollo se detallaran las maneras con que CSS puede hacer referencias a elementos HTML utilizando palabras reservadas.

La cual ademas, es la forma de desarrollar los archivos .css externos que se enlazan a nuestra plantilla HTML.

Al declarar las reglas CSS utilizando la palabra clave del elemento afectamos cada elemento de la misma clase en el documento. Por ejemplo, la siguiente regla cambiará los estilos de todos los elementos <p>:

p { font-size: 20px }

Utilizando la palabra clave p al frente de la regla le estamos diciendo al navegador que esta regla debe ser aplicada a cada elemento <p> encontrado en el documento HTML.

Todos los textos envueltos en etiquetas <p> tendrán el tamaño de 20 pixeles.

Si especificamos la palabra clave span en lugar de p, por ejemplo, cada texto entre etiquetas <span> tendrá un tamaño de 20 pixeles:

span { font-size: 20px }

REFERENCIANDO CON EL ATRIBUTO ID

El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de este atributo no puede ser duplicado. Este nombre debe ser único en todo el documento.

Para referenciar un elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser declarada con el símbolo # al frente del valor que usamos para identificar el elemento:

#texto1 { font-size: 20px }

Para que la linea de estilo anterior funcione, tenemos que haber definido en nuestro archivo HTML la instrucción siguiente, id="texto1", dentro de la etiqueta que queramos afectar, con esto podemos asignarle estilos a todas las etiquetas <p> que tengamos en nuestro HTML.

Ejemplo de condigo html:

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

</head>

<body>

<p id=”texto1”>Mi texto</p>

</body>

</html>

REFERENCIANDO CON EL ATRIBUTO CLASS

La mayoría del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es mejor utilizar class. Este atributo es más flexible y puede ser asignado a cada elemento HTML en el documento que comparte un diseño similar.

Para asignarle algún estilo al atributo class se define anteponiendo un (.) seguido de el nombre que le hayaamos asignado en nuestro archivo HTML.

.texto1 { font-size: 20px }

Para que la linea de estilo anterior funcione, tenemos que haber definido en nuestro archivo HTML la instrucción siguiente, class="texto1", dentro de la etiqueta que queramos afectar, con esto podemos asignarle estilos a todas las etiquetas <p> que tengamos en nuestro HTML.

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

</head>

<body>

<p class=”texto1”>Mi texto</p>

<p>Mi texto</p>

</body>

</html>

Los elementos <p> en las primeras dos líneas dentro del cuerpo del código tienen el atributo class con el valor texto1. Como dijimos previamente, la misma regla puede ser aplicada a diferentes elementos en el mismo documento. Por lo tanto, estos dos primeros elementos comparten la misma regla y ambos serán afectados por el estilo que contiene nuestro archivo .css

Existen otras maneras de hacer referecias mucho mas exactas, pero a manera de introduccion se estudiaran solo las mas generales, en nuevo articulo se detallaran las demas.
Espero que estos articulos, les sean de utilidad y sean de mucho probecho, si les sirvio les invito a compartirlo.

Hasta pronto!!!

ESTRUCTURA DE UN ARTICULO UTILIZANDO LA MAQUETACION WEB HTML5 Y CSS3

noreply@blogger.com (Las tic) — Mon, 02 Oct 2017 02:00:00 +0000

Dentro del cuerpo

El cuerpo de nuestro documento está listo. La estructura básica de nuestro sitio web fue finalizada, pero aún tenemos que trabajar en el contenido. Los elementos HTML5 estudiados hasta el momento nos ayudan a identificar cada sección del diseño y asignar un propósito intrínseco a cada una de ellas, pero lo que es realmente importante para nuestro sitio web se encuentra en el interior de estas secciones.

La mayoría de los elementos ya estudiados fueron creados para construir una estructura para el documento HTML que pueda ser identificada y reconocida por los navegadores y nuevos dispositivos.

Aprendimos acerca de la etiqueta <body> usada para declarar el cuerpo o parte visible del documento, la etiqueta <header> con la que agrupamos información importante para el cuerpo, la etiqueta <nav> que provee ayuda para la navegación del sitio web, la etiqueta <section> necesaria para contener la información más relevante, y también <aside> y <footer> para ofrecer información adicional de cada sección y del documento mismo. Pero ninguno de estos elementos declara algo acerca del contenido. Todos tienen un específico propósito estructural.

Más profundo nos introducimos dentro del documento más cerca nos encontramos de la definición del contenido. Esta información estará compuesta por diferentes elementos visuales como títulos, textos, imágenes, vídeos y aplicaciones interactivas, entre otros. Necesitamos poder diferenciar estos elementos y establecer una relación entre ellos dentro de la estructura.

Para este articulo, estaremos trabajando solo las etiquetas <SECTION>....</SECTION> que son en las cuales se posicionan el contenido de nuesto sitio, esto tambien es para ahorrar muchas lineas de código realmente innecesario si solo estaremos utilizando una parte de este.

Si as seguido los artículos anteriores lograras seguir la secuencia en el que se desarrollara en esta oportunidad.

Sin mas que agregar, vamos a empezar!!!

<article>
El diseño considerado en artículos anteriores es el más común y representa una estructura esencial para los sitios web estos días, pero es además ejemplo de cómo el contenido clave es mostrado en pantalla. Del mismo modo que los blogs están divididos en entradas, sitios web normalmente presentan información relevante dividida en partes que comparten similares características. El elemento <article> nos permite identificar cada una de estas partes:

<section>
<article>
Este es el texto de mi primer mensaje
</article>
<article>
Este es el texto de mi segundo mensaje
</article>
</section>

Como dijimos anteriormente, la estructura de un documento HTML puede ser descrita como un árbol, con el elemento <html> como su raíz.

Otra forma de describir la relación entre elementos es nombrarlos como padres, hijos y hermanos, de acuerdo a la posición que ocupan dentro de esa misma estructura.

Por ejemplo, en un típico documento HTML el elemento <body> es hijo del elemento <html> y hermano del elemento <head>. Ambos, <body> y <head>, tienen al elemento <html> como su padre.

Y al igual que cada elemento hijo del cuerpo, las etiquetas <article> son ubicadas una sobre otra, como es mostrado en la Figura

Como una parte independiente del documento, el contenido de cada elemento <article> tendrá su propia estructura.

Para definir esta estructura, podemos aprovechar la versatilidad de los elementos <header> y <footer> estudiados anteriormente. Estos elementos son portables y pueden ser usados no solo para definir los límites del cuerpo sino también en cualquier sección de nuestro documento:

<section>
<article>
<header>
<h1>TITULO DE MI ARTICULO</h1>
</header>

<P>ESTE ES MI CONTENIDO</P>

<footer>
<p>comentarios (0)</p>
</footer>

</article>
</section>

<hgroup>
Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo de cada <article>, incorporamos elementos <h1> para declarar un título.

Básicamente, las etiquetas <h1> son todo lo que necesitamos para crear una línea de cabecera para cada parte del documento, pero es normal que necesitemos también agregar subtítulos o más información que especifique de qué se trata la página web o una sección en particular.

De hecho, el elemento <header> fue creado para contener también otros elementos como tablas de contenido, formularios de búsqueda o textos cortos y logos

Para construir este tipo de cabeceras, podemos aprovechar el resto de las etiquetas H, como <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, pero siempre considerando que por propósitos de procesamiento interno, y para evitar generar múltiples secciones durante la interpretación del documento por parte del navegador, estas etiquetas deben ser agrupadas juntas. Por esta razón, HTML5 provee el elemento <hgroup>:

<section>
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<p>publicado 10-12-2011</p>
</header>
Este es el texto de mi primer mensaje

<footer>
<p>comentarios (0)</p>
</footer>

</article>
</section>

Lo que llamamos “información adicional” dentro de la cabecera en nuestra descripción previa es conocido como Metadata.

Metadata es un conjunto de datos que describen y proveen información acerca de otro grupo de datos. En nuestro ejemplo, Metadata es la fecha en la cual cada mensaje fue publicado.

<figure> y <figcaption>
La etiqueta <figure> fue creada para ayudarnos a ser aún más específicos a la hora de declarar el contenido del documento.

Antes de que este elemento sea introducido, no podíamos identificar el contenido que era parte de la información pero a la vez independiente, como ilustraciones, fotos, videos, etc…

Normalmente estos elementos son parte del contenido relevante pero pueden ser extraídos o movidos a otra parte sin afectar o interrumpir el flujo del documento. Cuando nos encontramos con esta clase de información, las etiquetas <figure> pueden ser usadas para identificarla:

<section>
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<p>publicado 10-12-2011</p>
</header>

Este es el texto de mi primer mensaje

<figure>
<img src=”hubicacion del archivo .jpg, .png que se quiera utilizar”>
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>

<footer>
<p>comentarios (0)</p>
</footer>

</article>

Con todo lo expuesto en todos los artículos anteriores, tenemos el código básico como crear ya nuestra primera plantilla HTML5, bastara agregarles algunas lineas de código de CSS3 para agregarle algunos estilos, que sera de lo que tratara los próximos artículos.

Como referencia a continuación les dejare un pequeño diccionario con todas las etiquetas que se han visto hasta ahora, y algunas que no tienen relevancia en el desarrollo de contenido, pero que si son una alternativa cuando el navegador no muestra el contenido apropiadamente, como son las "ñ" o si queremos subrayar algo, poner en negritas, cursiva, resaltar texto o poner algunas citas en nuestros artículos.

Ademas les proporcionares el código completo de la platilla con todas las etiquetas que hemos aprendido.

Referencia rápida
En la especificación HTML5, HTML está a cargo de la estructura del documento y provee un grupo completo de nuevos elementos para este propósito. La especificación también incluye algunos elementos con la única tarea de proveer estilos.

Esta es una lista de los que consideramos más relevantes:

<header> Este elemento presenta información introductoria y puede ser aplicado en diferentes secciones del documento. Tiene el propósito de contener la cabecera de una sección pero también puede ser utilizado para agrupar índices, formularios de búsqueda, logos, etc…

<nav> Este elemento indica una sección de enlaces con propósitos de navegación, como menús o índices. No todos los enlaces dentro de una página web tienen que estar dentro de un elemento <nav>, solo aquellos que forman partes de bloques de navegación.

<section> Este elemento representa una sección general del documento. Es usualmente utilizado para construir varios bloques de contenido (por ejemplo, columnas) con el propósito de ordenar el contenido que comparte una característica específica, como capítulos o páginas de un libro, grupo de noticias, artículos, etc…

<aside> Este elemento representa contenido que está relacionado con el contenido principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras laterales, publicidad, etc…

<footer> Este elemento representa información adicional sobre su elemento padre. Por ejemplo, un elemento <footer> insertado al final del cuerpo proveerá información adicional sobre el cuerpo del documento, como el pie normal de una página web. Puede ser usado no solo para el cuerpo sino también para diferentes secciones dentro del cuerpo, otorgando información adicional sobre estas secciones específicas.

<article> Este elemento representa una porción independiente de información relevante (por ejemplo, cada artículo de un periódico o cada entrada de un blog). El elemento <article> puede ser anidado y usado para mostrar una lista dentro de otra lista de ítems relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo.

<hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene múltiples niveles (por ejemplo, una cabecera con título y subtítulo).

<figure> Este elemento representa una porción independiente de contenido (por ejemplo, imágenes, diagramas o videos) que son referenciadas desde el contenido principal. Esta es información que puede ser removida sin afectar el fluido del resto del contenido.

<figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto relacionado con el contenido de un elemento <figure>, como la descripción de una imagen.

<mark> Este elemento resalta un texto que tiene relevancia en una situación en particular o que ha sido mostrado en respuesta de la actividad del usuario.

<small> Este elemento representa contenido al margen, como letra pequeña (por ejemplo, descargos, restricciones legales, declaración de derechos, etc…).

<cite> Este elemento es usado para mostrar el título de un trabajo (libro, película, poema, etc…).

<address> Este elemento encierra información de contacto para un elemento <article> o el documento completo. Es recomendable que sea insertado dentro de un elemento <footer>.

<time> Este elemento se utiliza para mostrar fecha y hora en formatos comprensibles por los usuarios y el navegador. El valor para los usuarios es ubicado entre las etiquetas mientras que el específico para programas y navegadores es incluido como el valor del atributo datetime. Un segundo atributo optativo llamado pubdate es usado para indicar que el valor de datetime es la fecha de publicación.

El siguiente codigo, representa todas las etiquetas HTML5 estudiadas en los articulos anteriores, formando en conjunto lo que seria una plantilla base para poder desarrollar nuestros sitios web.

Solo tendrán que copiar el código y pegarlo en su editor de texto de preferencia y guardarlo con extensión .html por ejemplo: modelo_caja.html.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript"
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<p>publicado 10-12-2011</p>
</header>
Este es el texto de mi primer mensaje

<figure>
<img src=”hubicacion del archivo .jpg, .png que se quiera utilizar”>
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Título del mensaje dos</h1>
<h2>Subtítulo del mensaje dos</h2>
</hgroup>
<p>publicado 15-12-2011</p>
</header>

Este es el texto de mi segundo mensaje

<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados MYDWEB © 2017
</footer>
</body>
</html>

Hasta un próximo articulo.!!!

MAQUETACION DE UN SITIO WEB CON HTML5 Y CSS3

noreply@blogger.com (Las tic) — Sun, 01 Oct 2017 23:31:00 +0000

Para esta oportunidad, continuaremos mostrandoles las etiquetas del lenguaje de estructura web llamado HTML5, mostrando las etiquetas que se encargan de organizar el contenido de una pagina web, como introducción mostraremos un poco de teoría y luego pasaremos a describir cada etiqueta.

La estructura del cuerpo (El código entre las etiquetas body) generara la parte visible del documento. Este el código que producirá nuestra página web.

HTML siempre ofreció diferentes formas de construir y organizar la información dentro del cuerpo de un documento. Uno de los primeros elementos provistos para este propósito fue table. Las tablas permitían a los diseñadores acomodar datos, texto, imágenes y herramientas dentro de filas y columnas de celdas, incluso sin que hayan sido concebidas para este propósito.

En los primeros días de la web, las tablas fueron una revolución, un gran paso hacia adelante con respecto a la visualización de los documentos y la experiencia ofrecida a los usuarios. Más adelante, gradualmente, otros elementos reemplazaron su función, permitiendo lograr lo mismo con menos código, facilitando de este modo la creación, permitiendo portabilidad y ayudando al mantenimiento de los sitios web.

El elemento div comenzó a dominar la escena. Con el surgimiento de webs más interactivas y la integración de HTML, CSS y JavaScript, el uso de div se volvió una práctica común. Pero este elemento, así como table, no provee demasiada información acerca de las parte del cuerpo que está representando.

Desde imágenes a menús, textos, enlaces, códigos, formularios, cualquier cosa puede ir entre las etiquetas de apertura y cierre de un elemento div. En otras palabras, la palabra clave div solo especifica una división en el cuerpo, como la celda de una tabla, pero no ofrece indicio alguno sobre qué clase de división es, cuál es su propósito o qué contiene.

Para los usuarios estas claves o indicios no son importantes, pero para los navegadores la correcta interpretación de qué hay dentro del documento que se está procesando puede ser crucial en muchos casos.

Luego de la revolución de los dispositivos móviles y el surgimiento de diferentes formas en que la gente accede a la web, la identificación de cada parte del documento es una tarea que se ha vuelto más relevante que nunca.

Considerando todo lo expuesto, HTML5 incorpora nuevos elementos que ayudan a identificar cada sección del documento y organizar el cuerpo del mismo.

En HTML5 las secciones más importantes son diferenciadas y la estructura principal ya no depende más de los elementos div o table.

Cómo usamos estos nuevos elementos depende de nosotros, pero las palabras clave otorgadas a cada uno de ellos nos dan ayudan a entender sus funciones. Normalmente una página o aplicación web está dividida entre varias áreas visuales

Para mejorar la experiencia del usuario y facilitar la interactividad. Las palabras claves que representan cada nuevo elemento de HTML5 están íntimamente relacionadas con estas áreas, como veremos pronto.

ORGANIZACIÓN.

Definamos la organización según la siguiente imagen.

maquetacion web html5 y css3

En la parte superior, descrito como Cabecera, se encuentra el espacio donde usualmente se ubica el logo, título, subtítulos y una En la parte superior, descrito como Cabecera, se encuentra el espacio donde usualmente se ubica el logo, título, subtítulos y una corta descripción del sitio web o la página.

BARRA DE NAVEGACIÓN

En la cual casi todos los desarrolladores ofrecen un menú o lista de enlaces con el propósito de facilitar la navegación a través del sitio.

CUERPO O INFORMACIÓN PRINCIPAL

El contenido más relevante de una página web se encuentra, en casi todo diseño, ubicado en su centro. Esta sección presenta información y enlaces valiosos. La mayoría de las veces es dividida en varias filas y columnas.

En la imagen anterior se utilizaron solo dos columnas: Información Principal y Barra Lateral, pero esta sección es extremadamente flexible y normalmente diseñadores la adaptan acorde a sus necesidades insertando más columnas, dividiendo cada columna entre bloques más pequeños o generando diferentes distribuciones y combinaciones.

En la sección de información principal, se mostrarías todas las entradas de un blog, mientras que en la barra lateral una lista de todas las entradas que el blog contiene, información del desarrollador, redes sociales, formulario de login etc.

A continuación les muestro una imagen de lo que es un diseño de blog meramente tradicional, es el punto de partida para poder realizar los diseños que nosotros queramos y sobre todo nos aran entender un poco mejor la ubicación de cada una de las etiquetas que hemos visto hasta ahora.

Para un mayor entendimiento de la imagen les mostrare como sería la estructura de ese blog utilizando las etiquetas de HTML5.

En el ejemplo se muestran las etiquetas posteriormente detalladas en el articulo INTRODUCCIÓN A HTML5, si aun no lo has checado, te dejo el enlace para que vallas y lo hagas, ya que nos sirve como base para los ejemplos propuestos en este articulo.

Les mostrare el esquema del blog, propuesto anteriormente utilizando las etiquetas que estudiamos en el articulo anterior.

De esta manera se nos hacer mucho más fácil reconocer cada una de las etiquetas y que tipo de información contienen cada una de estas. Ahora veremos una breve explicación de cada una de estas para aclarar cualquier duda.

header

El elemento header no debe ser confundido con head usado antes para construir la cabecera del documento. Del mismo modo que head, la intención de header es proveer información introductoria (títulos, subtítulos, logos) el elemento head tiene el propósito de proveer información acerca de todo el documento, header es usado solo para el cuerpo o secciones específicas dentro del cuerpo:

@madesweb

nav

Siguiendo con nuestro ejemplo, la siguiente sección es la Barra de Navegación. Esta barra es generada en HTML5 con el elemento nav:

@madesweb

section

En esta etiqueta como se pudo apreciar en la imagen anterior se encargara de mostrar el contenido general del sitio web:

@madesweb

aside

La Barra Lateral contendrá una lista de enlaces

@madesweb

footer

Para finalizar la construcción de la plantilla o estructura elemental de nuestro documento HTML5, solo necesitamos un elemento más.

@madesweb

Ufff!! Es así como por fin termino, de mostrarles las etiquetas que ordenan, el contenido de una pagina web, decirles que los artículos son bastante extensos, pero lo que se pretende es dejar un material completo que logre solventar todas sus dudas, quizá pueda parecer aburrido pero créanme que hago lo posible de hacer los artículos lo mas amigable y cortos posibles, y aun así no se logra abarcar toda la temática o por lo menos no el objetivo principal el cual es brindarles una información lo mas completa posible.

En un nuevo articulo se explicara la configuración de lo que es ya un articulo en si, que aunque no lo parezca son varias etiquetas aun, en mi opinión una de las razones por la cual muchas personas optan por utilizar un framework, o gestor de contenido es porque no conocen estas etiquetas y piensan que html5 no cuenta con todo lo necesario para desarrollar un articulo completo.

Habiendo expuesto eso pues el siguiente articulo sera probar que html5 si tiene las etiquetas necesarias para desarrollar un buen arcitulo.

Descarga el Archivo con la plantilla completa.

LINK!!!

Hasta entonces amigos.!!!!

INTRODUCCION A HTML5

noreply@blogger.com (Las tic) — Sat, 30 Sep 2017 22:20:00 +0000

INTRODUCCION A HTML5

En esta ocasión, les traigo un artículo del ya bien conocido HTML5, proponiendo según mi opinión un punto de inicio para poder desarrollar mejores estructuras en nuestros sitios web, están disponibles para esta versión muchas etiquetas que no se les da la importancia necesaria al momento de empezar a desarrollar.

Mucha gente lo usa, pero no aprovechan al cien por ciento su rendimiento ya que no conocen algunas de las nuevas etiquetas y siguen usando las etiquetas antiguas para desarrollar la estructura de sus sitios web.

En este artículo les presentare una breve introducción a las versiones anteriores y un completo glosario con ejemplos de todas las nuevas etiquetas que le fueron agregadas, así como la estructura de un modelo llamado “modelo de caja tradicional” el cual a mi ver es el punto de partida y la base para dominar el lenguaje HTML5.

Sin más que agregar, espero que disfruten este artículo, así que vamos a empezar.

HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta ya antigua tecnología, sino un nuevo concepto para la construcción de sitios web y aplicaciones en una era que combina dispositivos móviles, computación en la nube y trabajos en red.

Todo comenzó mucho tiempo atrás con una simple versión de HTML propuesta para crear la estructura básica de páginas web, organizar su contenido y compartir información.

El lenguaje y la web misma nacieron principalmente con la intención de comunicar información por medio de texto.

El limitado objetivo de HTML motivó a varias compañías a desarrollar nuevos lenguajes y programas para agregar características a la web nunca antes implementadas. Estos desarrollos iniciales crecieron hasta convertirse en populares y poderosos accesorios. Simples juegos y bromas animadas pronto se transformaron en sofisticadas aplicaciones, ofreciendo nuevas experiencias que cambiaron el concepto de la web para siempre.

De las opciones propuestas, Java y Flash fueron las más exitosas; ambas fueron masivamente adoptadas y ampliamente consideradas como el futuro de Internet.

Sin embargo, tan pronto como el número de usuarios se incrementó e Internet pasó de ser una forma de conectar amantes de los ordenadores a un campo estratégico para los negocios y la interacción social, limitaciones presentes en estas dos tecnologías probaron ser una sentencia de muerte.

El mayor inconveniente de Java y Flash puede describirse como una falta de integración. Ambos fueron concebidos desde el principio como complementos (plugins), algo que se inserta dentro de una estructura pero que comparte con la misma solo espacio en la pantalla.

No existía comunicación e integración alguna entre aplicaciones y documentos.

HTML5 es, de hecho, una mejora de esta combinación, el pegamento que une todo.

HTML5 propone estándares para cada aspecto de la web y también un propósito claro para cada una de las tecnologías involucradas. A partir de ahora, HTML provee los elementos estructurales, CSS se encuentra concentrado en cómo volver esa estructura utilizable y atractiva a la vista, y JavaScript tiene todo el poder necesario para proveer dinamismo y construir aplicaciones web completamente funcionales.

Las barreras entre sitios webs y aplicaciones finalmente han desaparecido. Las tecnologías requeridas para el proceso de integración están listas. El futuro de la web es prometedor y la evolución y combinación de estas tres tecnologías (HTML, CSS y JavaScript) en una poderosa especificación está volviendo a Internet la plataforma líder de desarrollo. HTML5 indica claramente el camino.

IMPORTANTE: Ya para esta fecha la mayoría de navegadores soportan las etiquetas del HTML5. Sea cual fuere el navegador elegido, siempre tenga en mente que un buen desarrollador instala y prueba sus códigos en cada programa disponible en el mercado.

Ejecute los códigos provistos en este artículo en cada uno de los Navegadores disponibles.

Componentes básicos

Hágalo usted mismo: Cree un archivo de texto vacío utilizando su editor de desarrollo favorito para probar cada código presentado en este artículo.

Esto lo ayudará a recordar las nuevas etiquetas HTML y acostumbrarse a ellas.

Yo utilizo el editor SUBLIME TEXT, la versión más reciente, a mi opinión me parece bastante completo, dispone de una variedad de lenguajes para los que tiene diferente configuraciones para mostrar el código de una manera más clara y sobre todo ordenada, y además podemos agregar plug-ins lo cual le da un extra aun mejor.

Conceptos básicos

Un documento HTML es un archivo de texto. Si usted no posee ningún programa para desarrollo web, puede simplemente utilizar el Bloc de Notas de Windows o cualquier otro editor de textos. El archivo debe ser guardado con la extensión .html y el nombre que desee (por ejemplo, micodigo.html).

Teniendo claro lo que es un archivo html, daremos paso a definir su estructura global.

Estructura global

Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas.

En esta parte vamos a ver cómo construir la estructura global de un documento HTML y los nuevos elementos semánticos incorporados en HTML5.

<!DOCTYPE>

En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente.

Sencillo:

<!DOCTYPE html>

IMPORTANTE: Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan. De esta forma, el modo estándar del navegador es activado y las incorporaciones de HTML5 son interpretadas siempre que sea posible, o ignoradas en caso contrario.

<html>

Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo árbol de este lenguaje tiene su raíz en el elemento <html>.

Este elemento envolverá al resto del código:

<!DOCTYPE html>

</html>

El atributo lang en la etiqueta de apertura <html> es para definir el idioma humano del contenido del documento que estamos creando, en este caso es por español.

<head>

Continuemos construyendo nuestra plantilla. El código HTML insertado entre las etiquetas <html> tiene que ser dividido entre dos secciones principales.

Al igual que en versiones previas de HTML, la primera sección es la cabecera y la segunda el cuerpo. El siguiente paso, por lo tanto, será crear estas dos secciones en el código usando los elementos <head> y <body> ya conocidos.

El elemento <head> va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre:

<!DOCTYPE html>

<head>

</head>

</html>

<body>

La siguiente gran sección que es parte principal de la organización de un documento HTML es el cuerpo. El cuerpo representa la parte visible de todo documento y es especificado entre etiquetas <body>.

Estas etiquetas tampoco han cambiado en relación con versiones previas de HTML:

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

Hasta el momento tenemos un código simple pero con una estructura compleja. Esto es porque el código HTML no está formado por un conjunto de instrucciones secuenciales.

HTML es un lenguaje de etiquetas, un listado de elementos que usualmente se utilizan en pares y que pueden ser anidados (totalmente contenidos uno dentro del otro).

<meta>

Es momento de construir la cabecera del documento.

Algunos cambios e innovaciones fueron incorporados dentro de la cabecera, y uno de ellos es la etiqueta que define el juego de caracteres a utilizar para mostrar el documento.

Ésta es una etiqueta <meta> que especifica cómo el texto será presentado en pantalla:

<!DOCTYPE html>

<head>

<meta charset=”iso-8859-1”>

</head>

<body>

</body>

</html>

Por supuesto, podemos cambiar el tipo iso-8859-1 por el necesario para nuestros documentos y agregar otras etiquetas <meta> como description o keywords para definir otros aspectos de la página web, como es mostrado en el siguiente ejemplo:

<head>

<meta charset="iso-8859-1">

<meta name=”description” content=”Ejemplo de HTML5”>

<meta name=”keywords” content=”HTML5, CSS3, Javascript”>

</head>

Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar información general sobre el documento, pero esta información no es mostrada en la ventana del navegador, es solo importante para motores de búsqueda y dispositivos que necesitan hacer una vista previa del documento u obtener un sumario de la información que contiene.

<title>

La etiqueta <title>, como siempre, simplemente especifica el título del documento, y no hay nada nuevo para comentar:

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

</head>

<body>

</body>

</html>

<link>

Otro importante elemento que va dentro de la cabecera del documento es <link>. Este elemento es usado para incorporar estilos, códigos JavaScript, imágenes o iconos desde archivos externos. Uno de los usos más comunes para <link> es la incorporación de archivos con estilos CSS:

<!DOCTYPE html>

<head>

<link rel=”stylesheet” href=”misestilos.css”>

</head>

<body>

</body>

</html>

En HTML5 ya no se necesita especificar qué tipo de estilos estamos insertando, por lo que el atributo type fue eliminado. Solo necesitamos dos atributos para incorporar nuestro archivo de estilos: rel y href.

El atributo rel significa “relación” y es acerca de la relación entre el documento y el archivo que estamos incorporando por medio de href.

En este caso, el atributo rel tiene el valor stylesheet que le dice al navegador que el archivo misestilos.css es un archivo CSS con estilos requeridos para presentar la página en pantalla.

En esta etapa por tratarse de una introducción terminaremos este articulo de esta manera, abiendo definido las etiquetas que comprenden los extremos del documento, quedaría definir las etiquetas que se encargan de ordenar el contenido lo cual haremos en el próximo articulo.

Para no cargar el documento aun mas y que se vuelva mas aburrido, tratare de que los próximos artículos sean mas prácticos, dado que se tratase de una introducción es prácticamente necesario incluir teoría.

PROCESO DEL DESARROLLO WEB

noreply@blogger.com (Las tic) — Tue, 26 Sep 2017 18:35:00 +0000

Es bien sabido que para poder lograr un funcionamiento óptimo de una aplicación web se requieren que varias tareas funcionen en armonía para su funcionamiento.

En esta oportunidad les presentares las seis tareas principales que todo des arrollador web debe de manejar antes de dedicarse a trabajar profesionalmente.

De ante mano decirles que en esta ocasión se está abordando el tema de forma general y NO se pretende imponer ningún orden jerárquico en el orden de las tareas al desarrollar aplicaciones ya que este orden depende meramente de quien esté desarrollando, de la habilidad de trabajo con que cuente y definitivamente de su experiencia.

Pero sí que se puede seguir algún tipo de patrón donde se abarquen las actividades que si o si tienes que desarrollar en tu primer trabajo profesional o semi-profesional, todo esto con el fin de brindar un servicio realmente confiable y sobre todo ordenado.

Otro dato a tener en cuenta es que estas actividades puede que varíen dependiendo el tipo de trabajo, no todos los proyectos tienen el mismo tamaño y tampoco requieren que se emplee al pie de la letra cada una de las etapas, pero en la mayoría de los casos a partir de la segunda etapa hasta la sexta sí que se pueden cambiar el orden dependiendo de tu flujo de trabajo, pues la primera es la base en la cual las demás tareas estarán basadas.

A continuación se muestra un diagrama de las tareas al momento de desarrollar una aplicación web.

A continuación se detallaran las actividades que se deben de realizar en cada una de estas tareas.

“Aclararles que los conceptos expuestos a continuación no son sacados de ningún libro en específico, más que eso, es mi criterio y mi forma de entender las etapas antes expuestas, Porque aclaro esto, pues porque estamos en Internet y como ya se sabe las opiniones pueden ser muy variadas.”

TOMA DE REQUERIMIENTOS DEL CLIENTE.

En esta etapa principalmente se identificara el problema que queremos solventar con nuestra aplicación basándonos en las necesidades del cliente.

Principalmente en las inquietudes que estos expongan al memento de realizar un estudio de campo entrevistando a quienes serán los usuarios finales del nuestra aplicación.

Otra de las cosas a tener en cuenta en esta etapa será el alcance que queremos cubrir con nuestra aplicación pues de esto dependerán muchas cosas que vendrán a continuación, por ejemplo cuantos módulos serán necesarios para desarrollar en nuestra aplicación para que esta cumpla con los requisitos del clientes y de solución a la problemática antes identificada.

Como bien es sabido actualmente se desarrolla con el paradigma (POO), o lo que es igual a Programación Orientada a Objetos.

De igual manera se recomienda ser totalmente honestos y transparentes con nuestros clientes y no ofrecer más de lo que en realidad puede desarrollar, ya que de esto dependerá el éxito de nuestro trabajo.

Se definirán también los limites en que los profesionales se involucraran en el proyecto es decir una vez sea implementado, testeado en funcionamiento y el cliente lo apruebe.

Toda revisión futura será cuenta a parte y no estará incluida en este documento.

DESARROLLO FRONT-END

En esta etapa se desarrollara la parte del diseño visual del propio sitio, así como la vista de las diferentes páginas que integraran todo el sitio.

Se diseñaran las imágenes que se utilizaran en todo el sitio, en esta parta también se abarcara lo que es el DISEÑO GRAFICO, que en la gráfica aparece como ultima tarea, se preguntaran porque?

Pues, sencillo siempre hay algo de diseño gráfico que se le pueda agregar a un sitio web, incluso cuando este haya sido terminado completamente.

Pues como sabrán “el cliente siempre tiene la razón”, y a última hora si se le ocurre cambiar la cabecera del sitio, tocara hacerlo, y para los que son más minuciosos y se toman el tiempo de diseñar los iconos de una forma personalizada imagínense cuanto más trabajo. Por es sencilla razón lo dejamos como ultima tarea.

Basta de hablar de diseño gráfico, y a lo que nos compete, retomando el tema del desarrollo front-end tendrás que utilizar tus conocimientos acerca de CSS, para proporcionar el estilo y los colores, también determinar la estructura de tu sitio con las etiquetas HTML, lo cual en conjunto le brindará la apariencia de tu sitio web, una opción muy usada en estos tiempos es utilizar algo de JAVA SCRIPT para agregar efectos a nuestros sitios, dado que ha tenido mayor uso sobre flash que ha ido en decremento.

Como otra opción hoy en día bastante recurrente, tendrás que decidir si utilizar un gestor de contenido o un framework.

Sabes a que se refieren esos términos?

En términos genéreles son herramientas que te sirven para facilitar el desarrollo web, sencillo no? Pues no es cierto!!! XD como todo en esta vida nada es tan sencillo, a menos que ya domines estas herramientas claro.

Un gestor de contenido te proporciona una interfaz grafica para desarrollo web, mientras que un framework son unas series de librerías previamente desarrolladas para que las uses según te convenga.

Y como como una constante en este mundo del desarrollo web surgen nuevas interrogantes como que es una librerías? Como usarla? Bueno pues te invito a ver mi artículo donde trato de explicar más afondo estas tecnologías.

Has escuchado hablar de WIREFRAMING? Que tan conveniente es utilizarlo, cuales tipos de herramientas se necesitan para realizar esta tarea?

Pues te diré que el wireframing, se refiere nada más a realizar un bosquejo de lo que serán todas las páginas de tu sitio, poniendo link entre paginas delimitando cajas en donde mostraras los contenidos que contendrá tu sitio.

Que creen…? tenemos otra pregunta…xD

Es necesario utilizarlo?

Esta es mi opinión…

Si se trata de un proyecto bastante grande en el cual el correcto funcionamiento depende de un buen diseño y tienes el tiempo para hacerlo SEGURO que si, es conveniente utilizarlo.

Ahora que si lo que desarrollas es una página o un sitio para don chencho… el señor de la tiendita de tu barrio, pues definitivamente NO.

Eso solo generara tiempo perdido, que puedes invertir en diseñar directamente un prototipo para mostrar a tu cliente.

“Si quieres saber más acerca de este tema te invito a visitar mi artículo completo donde te doy unos tips y te enseño algunas herramientas que se utilizan para este tipo de desarrollo.”

DESARROLLO BACK-END

Desarrollo del lado del servidor, pero de una forma más sencilla es la parte “lógica” de una aplicación web, es decir la parte de que se dedica a ejecutar las instrucciones que nosotros definimos mediante líneas de código.

De qué forma? Pues hay muchas, tanto, como lenguajes específicos para este objetivo los hay como lo son PHP, ASP.NET, JAVA SCRIPT, PHYTON y muchas más.

En esta etapa se programara las funciones específicas que nuestro sitio deberá realizar, desde una sencilla suma matemática, hasta un registro en nuestra base de datos.

La complejidad de este dependerá del lenguaje que decidas utilizar, y de tu habilidad con que domines este lenguaje.

Algo que agregar es que la selección del lenguaje a programar no se debe de tomar a la ligera, pues debes tomas muchas cosas en cuenta, como SEGURIDAD WEB, documentación, soporte, herramientas, si es multiplaforma etc.

Pero sobre todo cuál lenguaje es el que tú dominas.

MANEJO Y DISEÑO DE LA BASE DE DATOS.

Partiendo de que la aplicación en la que desees trabajar almacenara datos, ya sean usuarios y contraseñas, registros en tablas etc.

Pues en esta sección tienes que diseñas la base de datos en general, cuantas tablas llevara, los campos con su tipo de datos, asignar llave principal a cada una de las tablas y las llaves foráneas para cada una de las relaciones que existirán entre cada tabla.

El tamaño de tu base de datos dependerá de que tan grande sea tu sistema web, si solo es para el registro de libros de una librería local, podría considerarse

pequeño-mediano, pero si se trata de varias sucursales sí que será una cantidad considerable de información, por otro lado, al existir interacción de otras sucursales se es necesario enfocarse en configurar de forma adecuada la seguridad de la base de datos, y realizar copias de seguridad con regularidad para asegurar la información por algún fallo de sistema.

Si no sabes que motores de base de datos existen, te invito a que revises mi artículo MOTORES DE BASE DE DATOS donde te presento las herramientas más usadas en la actualidad.

Queda a elección de cada uno, las hay de paga y también de código abierto, también tendrás que decidir si trabajaras de forma gráfica o lo harás utilizando el lenguaje propio de base de datos, del cual hablaremos en otra oportunidad.

MANEJO DE SERVIDORES.

Un tema no por ser el último, menos importante, en esta etapa decidirás si tu herramienta web se ubicara de forma local, o en la nube.

Dependiendo de cuantas sucursales sean beneficiadas con la herramienta veras que opción es más viable utilizar.

Cabe recalcar que las herramientas para servidor son variadas, hay servidores sencillos que se utilizan para prueba y error mientras se desarrolla la aplicación web, como lo son XAMP, WAMPP SERVER, APACHE SERVER.

Estos convierten tu ordenador común en un servidor local, de uso personal, ya que se asigna una ip estática, para que puedas acceder a tu sitio web de forma que simule como si estuvieras en internet.

Otro tipo de servidor son los locales, el cual es un hardware especial, con características superiores de un pc normal, se les instala in sistema operativo como WINDOWS SERVER, que es uno de los más usados a nivel mundial, aunque también los hay LINUX famosos por su seguridad, este equipo se tiene que instalar en una habitación especifica donde no habrá multitud de personas merodeando por ahí que puedan estropear algo, estos equipos por lo general permanecen encendidos las 24 horas del día, para que todas las dependientes que se conecten a él y puedan acceder a la información que ahí se almacene.

En otros artículos abordaremos la configuración completa de un servidor, y todo lo que hay que tomar en cuenta para poder poner a disposición servicios como: correos empresariales, registro de docentes, registro de notas etc. En el presente artículo solo se trata de dar una introducción de forma general.

DISEÑO GRAFICO

Como ya vimos en el primer apartado, este tema trata de desarrollar todas las herramientas multimedia que tendrá nuestro sitio o sistema web.

Utilizando herramientas graficas como COREL DRAW, PHOTOSHOP, GYMP entre algunos otros que no son muy conocidos que en otra oportunidad les mostrare de forma más detallada.

BIENVENIDOS/AS

noreply@blogger.com (Las tic) — Tue, 26 Sep 2017 02:14:00 +0000

MADESWEB

En el siguientes material encontraran ejemplos de desarrollo web, muchos de ellos ejemplos recibidos en los cursos de mi carrera, y otros encontrados y o desarrollados por mi cuenta.

Se pretende esta sea una herramienta para aquellos que buscan una solución a posibles tareas académicas, ofreciendo herramientas de desarrollo, ejemplos de desarrollo según su magnitud.

y cualquier ejercicios que se considere conveniente publicar y ofrecer mi opinión al respecto.

En todos mis años de estudio casi siempre me pasaba, que buscando la solución a ciertos temas y no encontraba ningún material que de verdad me hiciera entender la solución al problema en cuestión,

y algunas veces, terminaba copiando algún código de un lado, un texto de otro, y pues los juntaba y lo arreglaba de cierta forma que tuviera sentido.

Estamos claros, que esa no es la forma correcta de solucionar o desarrollar una aplicación web, que para nada nos aporta para nuestra formación, pues no terminamos de entender en si la problemática y muchas veces el tema en estudio.

Lo que se pretende con este sitio, es desarrollar los temas dando una breve explicación de la problemática las posibles soluciones y cual es la mas acertada.

Y lo mas importante "Comprender" el porque esa es la solución mas apropiada a determinado tema.

El material que encontraras en este blogg es meramente personal, y no estrictamente serán conceptos sacados de libros, sino mas bien mi opinión y la comprensión de los temas que se aborden, tratare de no usar lenguaje técnico cuando no sea necesario, pues eso tiende a confundir mas aun a los estudiantes mas bien proporcionare mi punto de vista.

Aclaro lo anterior pues no se trata de imponer una forma de pensar o desarrollar determinada, lo que se busca es aportar conocimiento con un punto de vista diferente.